/* ========================================
   FIX GROUP - Premium Animations v3
   ======================================== */

/* ============ 1. ЛОГОТИП ============ */

/* Контейнер логотипа */
.header__logo {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* Hover эффект - легкое свечение */
.header__logo:hover {
  filter: drop-shadow(0 0 8px rgba(55, 98, 252, 0.5));
  transform: scale(1.02);
}

/* Блик по логотипу (добавляется через JS) */
.logo-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  animation: logoShimmer 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes logoShimmer {
  0%, 90% { left: -100%; opacity: 0; }
  95% { opacity: 1; }
  100% { left: 200%; opacity: 0; }
}

/* ============ 2. ЗАГОЛОВОК ============ */

/* Reveal анимация для заголовков */
.intro__text--title,
.intro__text--subtitle {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(5px);
  animation: revealText 0.8s ease forwards;
}

.intro__text--title {
  animation-delay: 0.2s;
}

.intro__text--subtitle {
  animation-delay: 0.5s;
}

@keyframes revealText {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Градиентный перелив на заголовке */
.intro__text--title {
  background: linear-gradient(
    120deg,
    #0E1A42 0%,
    #0E1A42 40%,
    #3b82f6 50%,
    #0E1A42 60%,
    #0E1A42 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: revealText 0.8s ease forwards, shine 5s linear 1s infinite;
}

@keyframes shine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ============ 3. ФОН - Дышащее свечение ============ */

.intro {
  position: relative;
  overflow: hidden;
}

.intro::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(55, 98, 252, 0.2) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  animation: breathe 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.intro::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
  bottom: -150px;
  left: -50px;
  animation: breathe 15s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: 0;
}

@keyframes breathe {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.25); }
}

.intro__container {
  position: relative;
  z-index: 1;
}

/* ============ 4. БЛОК 200+ - Glassmorphism ============ */

.intro__main--right {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 24px 32px !important;
  box-shadow: 
    0 8px 32px rgba(14, 26, 66, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.intro__main--right:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 20px 50px rgba(14, 26, 66, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.intro__right--text {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  background: none !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.intro__right--subtext {
  font-size: 0.95rem !important;
  color: #475569 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  max-width: 140px;
}

/* ============ 5. КНОПКИ ============ */

/* Пульсирующая аура + магнитный эффект */
.btn-bl {
  position: relative;
  transition: all 0.3s ease;
  z-index: 1;
}

.btn-bl::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  z-index: -1;
  opacity: 0;
  animation: pulseAura 2.5s ease-in-out infinite;
}

@keyframes pulseAura {
  0%, 100% { transform: scale(1); opacity: 0; }
  50% { transform: scale(1.2); opacity: 0.25; }
}

.btn-bl:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.4);
}

.btn-bl:hover::before {
  animation: none;
  opacity: 0;
}

.btn-bl-tr {
  transition: all 0.3s ease;
}

.btn-bl-tr:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.2);
}

/* ============ 6. МЕНЮ ============ */

.header__center--link {
  position: relative;
  transition: color 0.3s ease;
}

.header__center--link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3762FC, #2563eb);
  transition: all 0.3s ease;
  transform: translateX(-50%);
  border-radius: 2px;
}

.header__center--link:hover::after {
  width: 100%;
}

.header__center--link:hover {
  color: #2563eb;
}

/* ============ 7. NEW BADGE ============ */

.new-badge {
  animation: glowBadge 2s ease-in-out infinite;
}

@keyframes glowBadge {
  0%, 100% { box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 4px 20px rgba(16, 185, 129, 0.6); }
}

/* ============ 8. СЕКЦИИ ============ */

.fade-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ 9. ЧАСТИЦЫ (Canvas) ============ */

#particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ============ RESPONSIVE ============ */

@media (max-width: 768px) {
  .intro__main--right {
    padding: 16px 20px !important;
  }
  
  .intro__right--text {
    font-size: 2rem !important;
  }
  
  .intro::before,
  .intro::after {
    opacity: 0.25;
  }
  
  .intro__text--title,
  .intro__text--subtitle {
    animation-delay: 0s;
  }
}

/* ============ 12. БЛОК ЭКОСИСТЕМЫ - ИСПРАВЛЕННЫЙ ============ */

/* Контейнер блоков - flex без обрезки */
.intro__bottom--blocks {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Плашки - фиксированная ширина, текст не обрезается */
.intro__bottom--block {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px;
  padding: 12px 20px !important;
  min-width: auto !important;
  width: auto !important;
  position: relative;
  overflow: visible !important;
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateY(20px);
  animation: blockReveal 0.6s ease forwards;
}

.intro__block--text {
  white-space: nowrap !important;
  font-size: 0.95rem !important;
}

/* Последовательное появление */
.intro__bottom--block:nth-child(1) { animation-delay: 0.1s; }
.intro__bottom--block:nth-child(3) { animation-delay: 0.3s; }
.intro__bottom--block:nth-child(5) { animation-delay: 0.5s; }
.intro__bottom--block:nth-child(7) { animation-delay: 0.7s; }
.intro__bottom--block:nth-child(9) { animation-delay: 0.9s; }

@keyframes blockReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover эффект */
.intro__bottom--block:hover {
  transform: scale(1.08) translateY(-3px);
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(55, 98, 252, 0.5) !important;
  box-shadow: 0 8px 32px rgba(55, 98, 252, 0.25);
}

/* Плюсы - пульсация */
.intro__block--img {
  opacity: 0;
  animation: plusReveal 0.4s ease forwards, pulsePlus 2.5s ease-in-out 1.5s infinite;
}

.intro__bottom--blocks > .intro__block--img:nth-of-type(1) { animation-delay: 0.2s, 1.5s; }
.intro__bottom--blocks > .intro__block--img:nth-of-type(2) { animation-delay: 0.4s, 1.8s; }
.intro__bottom--blocks > .intro__block--img:nth-of-type(3) { animation-delay: 0.6s, 2.1s; }
.intro__bottom--blocks > .intro__block--img:nth-of-type(4) { animation-delay: 0.8s, 2.4s; }

@keyframes plusReveal {
  to { opacity: 0.7; }
}

@keyframes pulsePlus {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); filter: drop-shadow(0 0 6px rgba(55, 98, 252, 0.8)); }
}

/* Энергетическая линия */
.intro__bottom--blocks::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(55, 98, 252, 0.4) 20%,
    rgba(139, 92, 246, 0.7) 50%,
    rgba(55, 98, 252, 0.4) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: energyFlow 3s linear infinite;
  border-radius: 2px;
}

@keyframes energyFlow {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============ ЗАГОЛОВОК БЛОКА - Блеск + Дыхание ============ */

.intro__bottom--title {
  opacity: 0;
  transform: translateY(20px);
  animation: blockReveal 0.6s ease forwards;
  background: linear-gradient(
    120deg,
    #ffffff 0%,
    #ffffff 40%,
    #a5b4fc 50%,
    #ffffff 60%,
    #ffffff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: 
    blockReveal 0.6s ease forwards,
    shineWhite 6s linear 1s infinite,
    breatheText 5s ease-in-out 1s infinite;
}

@keyframes shineWhite {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes breatheText {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.01); filter: brightness(1.1); }
}

/* ============ ИКОНКИ - Анимация ============ */

/* Иконка логотипа Fix Group (верхняя) */
.intro__bottom--right .intro__icon--top,
.intro__bottom--right > img:first-of-type,
.intro__bottom--right > div:first-child img {
  animation: floatIcon1 6s ease-in-out infinite, glowIcon 4s ease-in-out infinite;
}

@keyframes floatIcon1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, -8px) rotate(2deg); }
  50% { transform: translate(-3px, -12px) rotate(-1deg); }
  75% { transform: translate(-8px, -5px) rotate(1deg); }
}

@keyframes glowIcon {
  0%, 100% { filter: drop-shadow(0 4px 15px rgba(55, 98, 252, 0.3)); }
  50% { filter: drop-shadow(0 8px 25px rgba(55, 98, 252, 0.6)); }
}

/* Иконка звёздочки (нижняя) */
.intro__bottom--right .intro__icon--bottom,
.intro__bottom--right > img:last-of-type,
.intro__bottom--right > div:last-child img {
  animation: floatIcon2 7s ease-in-out infinite, pulseIcon 3s ease-in-out infinite;
}

@keyframes floatIcon2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-6px, 10px) rotate(-3deg); }
  66% { transform: translate(8px, 5px) rotate(2deg); }
}

@keyframes pulseIcon {
  0%, 100% { 
    transform: scale(1);
    filter: drop-shadow(0 4px 15px rgba(139, 92, 246, 0.4));
  }
  50% { 
    transform: scale(1.08);
    filter: drop-shadow(0 6px 20px rgba(139, 92, 246, 0.7));
  }
}

/* Сфера - дыхание */
.intro__bottom--right img[src*="intro"],
.intro__bottom--right svg {
  animation: sphereBreathe 8s ease-in-out infinite;
}

@keyframes sphereBreathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.03); filter: brightness(1.15) drop-shadow(0 0 40px rgba(139, 92, 246, 0.5)); }
}

/* ============ ТОЧНЫЕ СЕЛЕКТОРЫ ДЛЯ ИКОНОК ============ */

/* Логотип Fix Group - плавает и светится */
.intro-fg {
  animation: floatLogo 6s ease-in-out infinite !important;
  filter: drop-shadow(0 4px 15px rgba(55, 98, 252, 0.4));
}

@keyframes floatLogo {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, -10px) rotate(2deg); }
  50% { transform: translate(-4px, -15px) rotate(-1deg); }
  75% { transform: translate(-8px, -6px) rotate(1deg); }
}

/* Иконка AI (звёздочка) - плавает и пульсирует */
.intro-ai {
  animation: floatAI 7s ease-in-out infinite, pulseAI 3s ease-in-out infinite !important;
}

@keyframes floatAI {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-8px, 12px) rotate(-4deg); }
  66% { transform: translate(10px, 6px) rotate(3deg); }
}

@keyframes pulseAI {
  0%, 100% { filter: drop-shadow(0 4px 15px rgba(139, 92, 246, 0.5)); }
  50% { filter: drop-shadow(0 8px 30px rgba(139, 92, 246, 0.8)); }
}

/* Основная сфера - дышит */
.intro-img {
  animation: breatheSphere 8s ease-in-out infinite !important;
}

@keyframes breatheSphere {
  0%, 100% { 
    transform: scale(1);
    filter: brightness(1);
  }
  50% { 
    transform: scale(1.04);
    filter: brightness(1.15);
  }
}

/* Анимационные линии вокруг сферы */
.intro__anim {
  animation: rotateSlow 25s linear infinite !important;
  transform-origin: center center;
}

.intro__anim-2 {
  animation: rotateSlow 30s linear infinite reverse !important;
  transform-origin: center center;
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============ ПЛАШКИ - Растянуть в одну строку ============ */

.intro__bottom--blocks {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 16px !important;
  overflow: visible !important;
}

.intro__bottom--block {
  flex: 0 0 auto !important;
  padding: 14px 28px !important;
  min-width: 100px !important;
}

.intro__block--text {
  font-size: 1rem !important;
  font-weight: 500 !important;
}

/* Плюсы между блоками */
.intro__block--img {
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

/* На мобильных - в 2 строки */
@media (max-width: 900px) {
  .intro__bottom--blocks {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

/* ============ ПЛАШКИ - ИСПРАВЛЕНИЕ v2 ============ */

.intro__bottom--blocks {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px !important;
  max-width: 600px !important;
}

.intro__bottom--block {
  flex: 0 0 auto !important;
  padding: 12px 20px !important;
  min-width: auto !important;
  width: auto !important;
}

.intro__block--text {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* Плюсы */
.intro__block--img {
  width: 12px !important;
  height: 12px !important;
  opacity: 0.6 !important;
}

/* Контейнер левой части - ограничиваем ширину */
.intro__bottom--left {
  max-width: 55% !important;
  overflow: visible !important;
}

/* Правая часть с иконками - не перекрывается */
.intro__bottom--right {
  position: relative !important;
  z-index: 1 !important;
}

/* ============ МИКРО-ВИДЖЕТЫ МЕТРИК ============ */

.metrics-widgets {
  display: flex;
  gap: 16px;
  margin: 24px 0 32px 0;
  flex-wrap: wrap;
  overflow: visible !important;
}

.metric-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 14px 20px;
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateY(20px);
  animation: widgetReveal 0.6s ease forwards;
}

.metric-widget:nth-child(1) { animation-delay: 0.2s; }
.metric-widget:nth-child(2) { animation-delay: 0.4s; }
.metric-widget:nth-child(3) { animation-delay: 0.6s; }

@keyframes widgetReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.metric-widget:hover {
  transform: translateY(-4px) scale(1.02);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(55, 98, 252, 0.4);
  box-shadow: 0 8px 32px rgba(55, 98, 252, 0.2);
}

.metric-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(55, 98, 252, 0.2);
  border-radius: 10px;
  animation: pulseIcon 3s ease-in-out infinite;
}

.metric-widget:nth-child(1) .metric-icon { animation-delay: 0s; }
.metric-widget:nth-child(2) .metric-icon { animation-delay: 1s; }
.metric-widget:nth-child(3) .metric-icon { animation-delay: 2s; }

@keyframes pulseIcon {
  0%, 100% { 
    transform: scale(1);
    background: rgba(55, 98, 252, 0.2);
  }
  50% { 
    transform: scale(1.1);
    background: rgba(55, 98, 252, 0.35);
  }
}

.metric-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metric-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #fff, #a5b4fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metric-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}

/* Responsive */
@media (max-width: 768px) {
  .metrics-widgets {
    flex-direction: column;
    gap: 12px;
  }
  
  .metric-widget {
    padding: 12px 16px;
  }
}

/* ============ ТУЛТИПЫ ДЛЯ МЕТРИК ============ */

.metric-widget {
  position: relative;
  cursor: pointer;
}

.metric-widget::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: max-content;
  max-width: 280px;
  padding: 14px 18px;
  background: rgba(14, 26, 66, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(55, 98, 252, 0.3);
  border-radius: 12px;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 100;
  pointer-events: none;
}

/* Стрелка тултипа */
.metric-widget::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  border: 8px solid transparent;
  border-top-color: rgba(14, 26, 66, 0.95);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 101;
}

/* Появление при наведении */
.metric-widget:hover::after,
.metric-widget:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Подсветка виджета при наведении */
.metric-widget:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(55, 98, 252, 0.5) !important;
}

/* Адаптив - тултипы снизу на мобильных */
@media (max-width: 768px) {
  .metric-widget::after {
    bottom: auto;
    top: calc(100% + 12px);
    max-width: 220px;
    font-size: 0.8rem;
  }
  
  .metric-widget::before {
    bottom: auto;
    top: calc(100% + 4px);
    border-top-color: transparent;
    border-bottom-color: rgba(14, 26, 66, 0.95);
  }
}

/* ============ ТУЛТИПЫ ДЛЯ БЛОКОВ ЭКОСИСТЕМЫ ============ */

.intro__bottom--block {
  position: relative;
  cursor: pointer;
}

.intro__bottom--block::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: max-content;
  max-width: 260px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(55, 98, 252, 0.2);
  border-radius: 12px;
  color: #0E1A42;
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 100;
  pointer-events: none;
}

/* Стрелка */
.intro__bottom--block::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  border: 8px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.95);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 101;
}

/* Показать при наведении */
.intro__bottom--block:hover::after,
.intro__bottom--block:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ============ БЛОК RESULT - Новые стили ============ */

.result__highlight {
  font-weight: 600 !important;
  color: #2563eb !important;
  margin-top: 8px !important;
}

.result__divider {
  width: 100%;
  max-width: 400px;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(37, 99, 235, 0.3) 20%, 
    rgba(37, 99, 235, 0.5) 50%, 
    rgba(37, 99, 235, 0.3) 80%, 
    transparent
  );
  margin: 20px 0;
}

.result__left--note {
  font-size: 0.9rem;
  color: #64748b;
  font-style: italic;
}

/* ============ БЛОК RESULT - Новые стили ============ */

.result__highlight {
  font-weight: 600 !important;
  color: #2563eb !important;
  margin-top: 8px !important;
}

.result__divider {
  width: 100%;
  max-width: 400px;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(37, 99, 235, 0.3) 20%, 
    rgba(37, 99, 235, 0.5) 50%, 
    rgba(37, 99, 235, 0.3) 80%, 
    transparent
  );
  margin: 20px 0;
}

.result__left--note {
  font-size: 0.9rem;
  color: #64748b;
  font-style: italic;
}

/* ============ БЛОК: КАК ЭТО РАБОТАЕТ (WORKFLOW) ============ */

.workflow {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  overflow: hidden;
}

.workflow__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.workflow__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0E1A42;
  text-align: center;
  margin-bottom: 12px;
}

.workflow__subtitle {
  font-size: 1.1rem;
  color: #64748b;
  text-align: center;
  margin-bottom: 60px;
}

/* Таймлайн */
.workflow__timeline {
  position: relative;
  padding: 40px 0;
}

.workflow__line {
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  transform: translateY(-50%);
  z-index: 1;
  overflow: visible;
}

.workflow__line-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #2563eb, #3b82f6, #8b5cf6);
  border-radius: 2px;
  transition: width 1.5s ease;
}

.workflow.visible .workflow__line-fill {
  width: 100%;
}

/* Шаги */
.workflow__steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.workflow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 18%;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s ease;
}

.workflow.visible .workflow__step {
  opacity: 1;
  transform: translateY(0);
}

.workflow.visible .workflow__step:nth-child(1) { transition-delay: 0.1s; }
.workflow.visible .workflow__step:nth-child(2) { transition-delay: 0.3s; }
.workflow.visible .workflow__step:nth-child(3) { transition-delay: 0.5s; }
.workflow.visible .workflow__step:nth-child(4) { transition-delay: 0.7s; }
.workflow.visible .workflow__step:nth-child(5) { transition-delay: 0.9s; }

/* Иконка шага */
.workflow__step-icon {
  width: 70px;
  height: 70px;
  background: #fff;
  border: 3px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 20px;
  transition: all 0.4s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.workflow.visible .workflow__step-icon {
  border-color: #2563eb;
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.2);
}

.workflow__step:hover .workflow__step-icon {
  transform: scale(1.1);
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  border-color: transparent;
}

.workflow__step:hover .workflow__step-icon span {
  filter: brightness(0) invert(1);
}

/* Контент шага */
.workflow__step-content {
  text-align: center;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 16px;
  transition: all 0.3s ease;
  min-height: 160px;
}

.workflow__step:hover .workflow__step-content {
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: 0 10px 40px rgba(37, 99, 235, 0.15);
  transform: translateY(-5px);
}

.workflow__step-number {
  font-size: 0.75rem;
  font-weight: 700;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 10px;
}

.workflow__step-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0E1A42;
  margin-bottom: 8px;
}

.workflow__step-desc {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.4;
}

.workflow__step-metric {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
}

/* Финальный шаг */
.workflow__step--final .workflow__step-icon {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: transparent;
}

.workflow__step--final .workflow__step-icon span {
  filter: brightness(0) invert(1);
}

/* Результат */
.workflow__result {
  text-align: center;
  margin-top: 50px;
  padding: 24px 40px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(139, 92, 246, 0.05));
  border-radius: 16px;
  border: 1px solid rgba(37, 99, 235, 0.1);
}

.workflow__result-text {
  font-size: 1.2rem;
  color: #0E1A42;
  font-weight: 500;
}

/* Мобильная версия */
@media (max-width: 992px) {
  .workflow__steps {
    flex-direction: column;
    gap: 30px;
  }
  
  .workflow__step {
    width: 100%;
    flex-direction: row;
    gap: 20px;
  }
  
  .workflow__step-content {
    text-align: left;
    min-height: auto;
    flex: 1;
  }
  
  .workflow__line {
    left: 35px;
    right: auto;
    width: 4px;
    height: calc(100% - 80px);
    top: 40px;
    transform: none;
  }
  
  .workflow__line-fill {
    width: 100% !important;
    height: 0;
  }
  
  .workflow.visible .workflow__line-fill {
    height: 100%;
  }
  
  .workflow__step-icon {
    flex-shrink: 0;
  }
}

@media (max-width: 576px) {
  .workflow__title {
    font-size: 1.8rem;
  }
  
  .workflow__step-icon {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
  }
}

/* ============ БЛОК WORKFLOW - PREMIUM ВИЗУАЛ ============ */

.workflow {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  overflow: hidden;
  position: relative;
}

.workflow__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.workflow__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0E1A42;
  text-align: center;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.workflow.visible .workflow__title {
  opacity: 1;
  transform: translateY(0);
}

.workflow__subtitle {
  font-size: 1.1rem;
  color: #64748b;
  text-align: center;
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease 0.1s;
}

.workflow.visible .workflow__subtitle {
  opacity: 1;
  transform: translateY(0);
}

/* ===== ТАЙМЛАЙН ===== */
.workflow__timeline {
  position: relative;
  padding: 40px 0;
}

/* Энергетическая линия */
.workflow__line {
  position: absolute;
  top: 85px;
  left: 10%;
  right: 10%;
  height: 4px;
  background: linear-gradient(90deg, #e2e8f0, #cbd5e1, #e2e8f0);
  border-radius: 2px;
  z-index: 1;
  overflow: hidden;
}

.workflow__line-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #2563eb, #3b82f6, #8b5cf6, #3b82f6, #2563eb);
  background-size: 200% 100%;
  border-radius: 2px;
  transition: width 2s ease;
}

.workflow.visible .workflow__line-fill {
  width: 100%;
  animation: energyPulse 3s linear infinite;
}

@keyframes energyPulse {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Бегущая точка по линии */
.workflow__line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -20px;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.8) 0%, transparent 70%);
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: 0;
}

.workflow.visible .workflow__line::after {
  animation: runningDot 3s ease-in-out infinite;
}

@keyframes runningDot {
  0% { left: -20px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% + 20px); opacity: 0; }
}

/* ===== ШАГИ ===== */
.workflow__steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.workflow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 18%;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease;
}

.workflow.visible .workflow__step {
  opacity: 1;
  transform: translateY(0);
}

.workflow.visible .workflow__step:nth-child(1) { transition-delay: 0.2s; }
.workflow.visible .workflow__step:nth-child(2) { transition-delay: 0.5s; }
.workflow.visible .workflow__step:nth-child(3) { transition-delay: 0.8s; }
.workflow.visible .workflow__step:nth-child(4) { transition-delay: 1.1s; }
.workflow.visible .workflow__step:nth-child(5) { transition-delay: 1.4s; }

/* ===== ИКОНКИ - Inner Glow + Дыхание ===== */
.workflow__step-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 
    0 8px 30px rgba(37, 99, 235, 0.4),
    inset 0 2px 10px rgba(255, 255, 255, 0.3);
  animation: iconBreathe 3s ease-in-out infinite;
}

.workflow.visible .workflow__step:nth-child(1) .workflow__step-icon { animation-delay: 0.2s; }
.workflow.visible .workflow__step:nth-child(2) .workflow__step-icon { animation-delay: 0.5s; }
.workflow.visible .workflow__step:nth-child(3) .workflow__step-icon { animation-delay: 0.8s; }
.workflow.visible .workflow__step:nth-child(4) .workflow__step-icon { animation-delay: 1.1s; }
.workflow.visible .workflow__step:nth-child(5) .workflow__step-icon { animation-delay: 1.4s; }

@keyframes iconBreathe {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 
      0 8px 30px rgba(37, 99, 235, 0.4),
      inset 0 2px 10px rgba(255, 255, 255, 0.3);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 
      0 12px 40px rgba(37, 99, 235, 0.5),
      inset 0 2px 15px rgba(255, 255, 255, 0.4);
  }
}

/* Кольцо вокруг иконки */
.workflow__step-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37, 99, 235, 0.3);
  animation: ringPulse 2s ease-in-out infinite;
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.2; }
}

.workflow__step-icon svg {
  position: relative;
  z-index: 1;
}

/* Hover для иконок */
.workflow__step:hover .workflow__step-icon {
  transform: scale(1.1);
  box-shadow: 
    0 15px 50px rgba(37, 99, 235, 0.5),
    inset 0 2px 15px rgba(255, 255, 255, 0.5);
}

/* ===== КАРТОЧКИ - Glassmorphism ===== */
.workflow__step-content {
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 24px 18px;
  min-height: 180px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 
    0 8px 32px rgba(14, 26, 66, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Светящаяся обводка */
.workflow__step-content::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.4), rgba(139, 92, 246, 0.2), rgba(37, 99, 235, 0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.workflow__step:hover .workflow__step-content::before {
  opacity: 1;
}

.workflow__step:hover .workflow__step-content {
  transform: translateY(-8px);
  box-shadow: 
    0 20px 50px rgba(37, 99, 235, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Номер шага */
.workflow__step-number {
  font-size: 0.75rem;
  font-weight: 700;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 12px;
}

.workflow__step-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0E1A42;
  margin-bottom: 10px;
}

.workflow__step-desc {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.5;
}

/* ===== МЕТРИКИ - Неоново-синие чипы ===== */
.workflow__step-metric {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 
    0 4px 15px rgba(37, 99, 235, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: chipGlow 2s ease-in-out infinite;
}

@keyframes chipGlow {
  0%, 100% { box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4); }
  50% { box-shadow: 0 4px 25px rgba(37, 99, 235, 0.6); }
}

/* ===== ФИНАЛЬНЫЙ ШАГ ===== */
.workflow__step--final .workflow__step-icon {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #34d399 100%);
  box-shadow: 
    0 8px 30px rgba(16, 185, 129, 0.4),
    inset 0 2px 10px rgba(255, 255, 255, 0.3);
}

.workflow__step--final .workflow__step-icon::before {
  border-color: rgba(16, 185, 129, 0.3);
}

.workflow__step--final:hover .workflow__step-icon {
  box-shadow: 
    0 15px 50px rgba(16, 185, 129, 0.5),
    inset 0 2px 15px rgba(255, 255, 255, 0.5);
}

.workflow__step--final .workflow__step-metric {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

/* ===== НИЖНИЙ БАННЕР - Glassmorphism ===== */
.workflow__result {
  text-align: center;
  margin-top: 60px;
  padding: 28px 50px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 
    0 8px 32px rgba(14, 26, 66, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease 1.6s;
}

.workflow.visible .workflow__result {
  opacity: 1;
  transform: translateY(0);
}

.workflow__result-text {
  font-size: 1.25rem;
  color: #0E1A42;
  font-weight: 500;
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ ===== */
@media (max-width: 992px) {
  .workflow__steps {
    flex-direction: column;
    gap: 40px;
  }
  
  .workflow__step {
    width: 100%;
    flex-direction: row;
    gap: 24px;
  }
  
  .workflow__step-content {
    text-align: left;
    min-height: auto;
    flex: 1;
  }
  
  .workflow__line {
    left: 40px;
    right: auto;
    width: 4px;
    height: calc(100% - 100px);
    top: 50px;
  }
  
  .workflow__line-fill {
    width: 100% !important;
    height: 0;
  }
  
  .workflow.visible .workflow__line-fill {
    height: 100%;
  }
  
  .workflow__step-icon {
    flex-shrink: 0;
  }
  
  .workflow__line::after {
    display: none;
  }
}

@media (max-width: 576px) {
  .workflow__title {
    font-size: 1.8rem;
  }
  
  .workflow__step-icon {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
  }
  
  .workflow__result {
    padding: 20px 24px;
  }
  
  .workflow__result-text {
    font-size: 1.1rem;
  }
}

/* ============ АНИМАЦИЯ ЗАГОЛОВКОВ СЕКЦИЙ ============ */

/* Блок "Мы создаём систему" */
.result__left--title {
  background: linear-gradient(
    135deg,
    #0E1A42 0%,
    #0E1A42 35%,
    #3b82f6 45%,
    #8b5cf6 50%,
    #3b82f6 55%,
    #0E1A42 65%,
    #0E1A42 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: 
    shineTitle1 8s ease-in-out infinite,
    breatheTitle 6s ease-in-out infinite;
}

.result__left--title .blue {
  -webkit-text-fill-color: #2563eb;
}

@keyframes shineTitle1 {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

@keyframes breatheTitle {
  0%, 100% { 
    transform: scale(1);
    filter: brightness(1);
  }
  50% { 
    transform: scale(1.008);
    filter: brightness(1.05);
  }
}

/* Блок "Как заявки превращаются" */
.workflow__title {
  background: linear-gradient(
    -135deg,
    #0E1A42 0%,
    #0E1A42 30%,
    #60a5fa 42%,
    #a78bfa 50%,
    #60a5fa 58%,
    #0E1A42 70%,
    #0E1A42 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: 
    shineTitle2 7s ease-in-out 0.5s infinite,
    breatheTitle2 5s ease-in-out 0.5s infinite;
}

@keyframes shineTitle2 {
  0%, 100% { background-position: 100% center; }
  50% { background-position: 0% center; }
}

@keyframes breatheTitle2 {
  0%, 100% { 
    transform: scale(1);
    filter: brightness(1);
  }
  50% { 
    transform: scale(1.01);
    filter: brightness(1.08);
  }
}

/* Подзаголовок workflow - легкая пульсация */
.workflow__subtitle {
  animation: subtitlePulse 4s ease-in-out infinite;
}

@keyframes subtitlePulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ============ ИСПРАВЛЕНИЕ ШРИФТОВ ЗАГОЛОВКОВ ============ */

.result__left--title,
.workflow__title {
  font-family: "golos", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 110% !important;
}

.workflow__subtitle {
  font-family: "golos", sans-serif !important;
}

/* ============ БЕЛЫЙ ФОН С ТОЧКАМИ ============ */

/* Единый белый фон */
.result,
.workflow,
.transform {
  position: relative;
  background: #ffffff !important;
  overflow: hidden;
}

/* Контент поверх точек */
.result__container,
.workflow__container,
.transform__container {
  position: relative;
  z-index: 1;
}

/* ============ ПЕРЕХОД: ГЛУБИНА ============ */

/* Z-ось: Тень под тёмным блоком экосистемы */
.intro__bottom {
  position: relative;
  z-index: 10;
  overflow: visible !important;
  padding-bottom: 20px !important;
  box-shadow: 
    0 40px 80px -20px rgba(14, 26, 66, 0.4),
    0 80px 120px -40px rgba(55, 98, 252, 0.2);
}

/* Градиентный fade внизу тёмного блока */
.intro__bottom::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(
    to bottom,
    rgba(14, 26, 66, 0.3) 0%,
    rgba(14, 26, 66, 0.1) 40%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 5;
}

/* Белые блоки "подплывают" под тёмный */
.result {
  position: relative;
  z-index: 2;
  margin-top: -20px;
  padding-top: 80px;
}

.workflow {
  position: relative;
  z-index: 1;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  .data-flow-bridge {
    height: 80px;
    margin-top: -15px;
    margin-bottom: -30px;
  }
  
  .intro__bottom::after {
    bottom: -30px;
    height: 30px;
  }
  
  .result {
    margin-top: -10px;
    padding-top: 40px;
  }
}

/* ============ БЛОК: ЧТО МЕНЯЕТСЯ В БИЗНЕСЕ ============ */

.transform {
  padding: 100px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.transform__container {
  position: relative;
  z-index: 1;
}

.transform__title {
  font-family: "golos", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 110% !important;
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 0.5rem;
  background: linear-gradient(
    135deg,
    #0E1A42 0%,
    #3762FC 50%,
    #0E1A42 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: 
    shineTitle1 8s ease-in-out infinite,
    floatTitle 6s ease-in-out infinite;
}

@keyframes floatTitle {
  0%, 100% {
    transform: translateY(0) translateZ(0);
  }
  50% {
    transform: translateY(-8px) translateZ(0);
  }
}

.transform__subtitle {
  font-family: "golos", sans-serif;
  text-align: center;
  color: #6b7280;
  font-size: 1.1rem;
  margin-bottom: 3rem;
  animation: floatSubtitle 6s ease-in-out 0.3s infinite;
}

@keyframes floatSubtitle {
  0%, 100% {
    transform: translateY(0) translateZ(0);
  }
  50% {
    transform: translateY(-5px) translateZ(0);
  }
}

/* Сетка 2x2 */
.transform__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

/* Карточка */
.transform__card {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(200, 210, 230, 0.5);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow: hidden;
  box-shadow: 
    0 4px 24px rgba(14, 26, 66, 0.06),
    0 1px 2px rgba(14, 26, 66, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation: floatCard 5s ease-in-out infinite;
}

/* Разные задержки для волнового эффекта */
.transform__card[data-card="1"] {
  animation-delay: 0s;
}
.transform__card[data-card="2"] {
  animation-delay: 0.5s;
}
.transform__card[data-card="3"] {
  animation-delay: 1s;
}
.transform__card[data-card="4"] {
  animation-delay: 1.5s;
}

@keyframes floatCard {
  0%, 100% {
    transform: translateY(0) translateZ(0);
  }
  50% {
    transform: translateY(-10px) translateZ(0);
  }
}

/* Градиентная обводка эффект */
.transform__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(156, 163, 175, 0.3) 0%,
    rgba(55, 98, 252, 0.1) 50%,
    rgba(55, 98, 252, 0.4) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.transform__card.scanned::before {
  opacity: 1;
}

.transform__card:hover {
  animation-play-state: paused;
  transform: translateY(-12px);
  box-shadow: 
    0 20px 50px rgba(55, 98, 252, 0.2),
    0 10px 30px rgba(14, 26, 66, 0.12);
  border-color: rgba(55, 98, 252, 0.35);
}

.transform__card:hover .transform__icon--after {
  transform: scale(1.08);
}

.transform__card.scanned:hover .transform__icon--after {
  box-shadow: 
    0 6px 24px rgba(55, 98, 252, 0.6),
    0 0 40px rgba(55, 98, 252, 0.4),
    0 0 80px rgba(99, 102, 241, 0.25);
}

/* Сканер */
.transform__scanner {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60px;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(55, 98, 252, 0.1) 20%,
    rgba(55, 98, 252, 0.4) 45%,
    rgba(99, 102, 241, 0.6) 50%,
    rgba(55, 98, 252, 0.4) 55%,
    rgba(55, 98, 252, 0.1) 80%,
    transparent 100%
  );
  filter: blur(2px);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
}

.transform__card.scanning .transform__scanner {
  animation: scanEffect 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes scanEffect {
  0% {
    left: -60px;
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0.8;
  }
}

/* Секции Было/Стало */
.transform__before,
.transform__after {
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.transform__before {
  opacity: 1;
  filter: none;
}

.transform__card.scanned .transform__before {
  opacity: 0.6;
  filter: grayscale(0.3);
  transform: scale(0.98);
}

.transform__after {
  opacity: 0.85;
  transform: translateX(0);
}

.transform__card.scanned .transform__after {
  opacity: 1;
  filter: none;
  transform: translateX(4px);
}

/* Иконки */
.transform__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.transform__icon svg {
  width: 24px;
  height: 24px;
  transition: all 0.5s ease;
}

.transform__icon--before {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
  border: 1px solid rgba(107, 114, 128, 0.2);
}

.transform__icon--after {
  background: rgba(55, 98, 252, 0.12);
  color: #3762FC;
  border: 1px solid rgba(55, 98, 252, 0.2);
}

.transform__card.scanned .transform__icon--after {
  background: linear-gradient(135deg, #3762FC 0%, #6366f1 100%);
  color: white;
  border-color: transparent;
  box-shadow: 
    0 4px 20px rgba(55, 98, 252, 0.5),
    0 0 30px rgba(55, 98, 252, 0.3),
    0 0 60px rgba(99, 102, 241, 0.2);
  animation: iconPulseTransform 2s ease-in-out infinite;
}

.transform__card.scanned .transform__icon--after svg {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

@keyframes iconPulseTransform {
  0%, 100% {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.08) translateZ(0);
    opacity: 0.9;
  }
}

/* Лейблы */
.transform__label {
  font-family: "golos", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  min-width: 50px;
}

.transform__after .transform__label {
  color: #3762FC;
}

.transform__card.scanned .transform__after .transform__label {
  text-shadow: 0 0 10px rgba(55, 98, 252, 0.3);
}

/* Текст */
.transform__text {
  font-family: "golos", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #374151;
  margin: 0;
  flex: 1;
  transition: all 0.5s ease;
}

.transform__before .transform__text {
  color: #4b5563;
  font-weight: 400;
}

.transform__card.scanned .transform__before .transform__text {
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.5);
  color: #9ca3af;
}

.transform__card.scanned .transform__after .transform__text {
  color: #0E1A42;
  font-weight: 600;
  text-shadow: 0 0 20px rgba(55, 98, 252, 0.1);
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  .transform {
    padding: 60px 0;
  }
  
  .transform__title {
    font-size: 1.75rem;
  }
  
  .transform__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .transform__card {
    padding: 1.5rem;
  }
  
  .transform__icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
  
  .transform__icon svg {
    width: 20px;
    height: 20px;
  }
}

/* ============ ФОНОВЫЕ ЖИВЫЕ АНИМАЦИИ ============ */

/* 1. Дышащие световые пятна на фоне */
.result::after,
.workflow::after,
.transform::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(55, 98, 252, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 500px 350px at 80% 70%, rgba(99, 102, 241, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 50% 50%, rgba(139, 92, 246, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: ambientFloat 20s ease-in-out infinite;
}

.workflow::after {
  animation-delay: -7s;
}

.transform::after {
  animation-delay: -14s;
}

@keyframes ambientFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1) translateZ(0);
    opacity: 0.8;
  }
  33% {
    transform: translate(20px, -15px) scale(1.02) translateZ(0);
    opacity: 1;
  }
  66% {
    transform: translate(-15px, 10px) scale(0.98) translateZ(0);
    opacity: 0.9;
  }
}

/* 2. Голографический блеск на glassmorphism карточках */
.transform__card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 60px;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.3) 45%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.3) 55%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 20;
  transform: translateX(-100%) rotate(25deg) translateZ(0);
  animation: holoShine 12s ease-in-out infinite;
}

.transform__card[data-card="2"]::after {
  animation-delay: 3s;
}
.transform__card[data-card="3"]::after {
  animation-delay: 6s;
}
.transform__card[data-card="4"]::after {
  animation-delay: 9s;
}

@keyframes holoShine {
  0%, 90%, 100% {
    transform: translateX(-100%) rotate(25deg) translateZ(0);
    opacity: 0;
  }
  95% {
    transform: translateX(200%) rotate(25deg) translateZ(0);
    opacity: 0.8;
  }
}

/* 3. Пульсация иконок workflow */
.workflow__step-icon {
  animation: workflowIconPulse 4s ease-in-out infinite;
}

.workflow__step[data-step="2"] .workflow__step-icon {
  animation-delay: 0.5s;
}
.workflow__step[data-step="3"] .workflow__step-icon {
  animation-delay: 1s;
}
.workflow__step[data-step="4"] .workflow__step-icon {
  animation-delay: 1.5s;
}
.workflow__step[data-step="5"] .workflow__step-icon {
  animation-delay: 2s;
}

@keyframes workflowIconPulse {
  0%, 100% {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.06) translateZ(0);
    opacity: 0.85;
  }
}

/* 4. Световой импульс по линии workflow */
.workflow__line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 6px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(55, 98, 252, 0.9) 50%,
    transparent 100%
  );
  border-radius: 3px;
  transform: translateY(-50%) translateZ(0);
  animation: lineImpulse 4s ease-in-out infinite;
}

@keyframes lineImpulse {
  0% {
    left: 0%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 30px);
    opacity: 0;
  }
}

/* 5. Карточки workflow тоже парят */
.workflow__step-content {
  animation: workflowCardFloat 6s ease-in-out infinite;
}

.workflow__step[data-step="1"] .workflow__step-content {
  animation-delay: 0s;
}
.workflow__step[data-step="2"] .workflow__step-content {
  animation-delay: 0.4s;
}
.workflow__step[data-step="3"] .workflow__step-content {
  animation-delay: 0.8s;
}
.workflow__step[data-step="4"] .workflow__step-content {
  animation-delay: 1.2s;
}
.workflow__step[data-step="5"] .workflow__step-content {
  animation-delay: 1.6s;
}

@keyframes workflowCardFloat {
  0%, 100% {
    transform: translateY(0) translateZ(0);
  }
  50% {
    transform: translateY(-6px) translateZ(0);
  }
}

/* 6. Глаз в иконке контроля - статичное свечение вместо сканирования */

/* ============ ОПТИМИЗАЦИЯ ПРОИЗВОДИТЕЛЬНОСТИ ============ */

/* GPU-ускорение для анимируемых элементов */
.transform__card,
.transform__title,
.transform__subtitle,
.workflow__step-content,
.workflow__step-icon,
.workflow__line::after,
.transform__card::after,
.result::after,
.workflow::after,
.transform::after {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Изоляция перерисовки */
.transform,
.workflow,
.result {
  contain: layout style paint;
}

/* Отключаем сложные анимации при запросе пользователя */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============ ЖИВЫЕ АНИМАЦИИ INTRO БЛОКА ============ */

/* Главный заголовок - парение после появления */
.intro__text--title.revealed {
  animation: floatMainTitle 7s ease-in-out infinite !important;
  opacity: 1 !important;
  filter: blur(0) !important;
}

@keyframes floatMainTitle {
  0%, 100% {
    transform: translateY(0) translateZ(0);
  }
  50% {
    transform: translateY(-6px) translateZ(0);
  }
}

/* Подзаголовок - парение после появления */
.intro__text--subtitle.revealed {
  animation: floatMainSubtitle 7s ease-in-out infinite !important;
  opacity: 1 !important;
  filter: blur(0) !important;
}

@keyframes floatMainSubtitle {
  0%, 100% {
    transform: translateY(0) translateZ(0);
  }
  50% {
    transform: translateY(-4px) translateZ(0);
  }
}

/* Кнопки - лёгкое дыхание */
.intro__top .btn-bl,
.intro__top .btn-bl-tr {
  animation: btnBreathe 4s ease-in-out infinite;
  will-change: transform;
}

.intro__top .btn-bl-tr {
  animation-delay: 0.5s;
}

@keyframes btnBreathe {
  0%, 100% {
    transform: translateY(0) scale(1) translateZ(0);
  }
  50% {
    transform: translateY(-3px) scale(1.02) translateZ(0);
  }
}

/* Блок 200+ - пульсация */
.intro__main--right {
  animation: counterPulse 5s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes counterPulse {
  0%, 100% {
    transform: translateY(0) scale(1) translateZ(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-5px) scale(1.03) translateZ(0);
    opacity: 0.95;
  }
}

/* Метрики экосистемы - волновое парение после появления */
.metric-widget.revealed {
  animation: metricFloat 5s ease-in-out infinite !important;
  opacity: 1 !important;
  transform: translateY(0) translateZ(0);
}

.metric-widget.revealed:nth-child(1) {
  animation-delay: 0s !important;
}
.metric-widget.revealed:nth-child(2) {
  animation-delay: 0.3s !important;
}
.metric-widget.revealed:nth-child(3) {
  animation-delay: 0.6s !important;
}

@keyframes metricFloat {
  0%, 100% {
    transform: translateY(0) translateZ(0);
  }
  50% {
    transform: translateY(-6px) translateZ(0);
  }
}

/* Плашки экосистемы - волновое парение после появления */
.intro__bottom--block.revealed {
  animation: blockFloat 6s ease-in-out infinite !important;
  opacity: 1 !important;
  transform: translateY(0) translateZ(0);
}

.intro__bottom--block.revealed:nth-child(1) { animation-delay: 0s !important; }
.intro__bottom--block.revealed:nth-child(2) { animation-delay: 0.2s !important; }
.intro__bottom--block.revealed:nth-child(3) { animation-delay: 0.4s !important; }
.intro__bottom--block.revealed:nth-child(4) { animation-delay: 0.6s !important; }
.intro__bottom--block.revealed:nth-child(5) { animation-delay: 0.8s !important; }

@keyframes blockFloat {
  0%, 100% {
    transform: translateY(0) translateZ(0);
  }
  50% {
    transform: translateY(-5px) translateZ(0);
  }
}

/* Hover для плашек - приподнимание */
.intro__bottom--block.revealed:hover {
  transform: translateY(-8px) scale(1.05) translateZ(0) !important;
  animation-play-state: paused;
}

/* Сфера AI - усиленное вращение */
.intro__anim,
.intro__anim-2 {
  animation: sphereRotate 20s linear infinite;
  will-change: transform;
}

.intro__anim-2 {
  animation-direction: reverse;
  animation-duration: 25s;
}

@keyframes sphereRotate {
  0% {
    transform: rotate(0deg) translateZ(0);
  }
  100% {
    transform: rotate(360deg) translateZ(0);
  }
}

/* AI иконка в правом углу - пульсация */
.intro-ai {
  animation: aiIconPulse 3s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes aiIconPulse {
  0%, 100% {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.5) translateZ(0);
    opacity: 0.9;
  }
}

/* Сфера свечение */
.intro-fg {
  animation: fgGlow 4s ease-in-out infinite;
  will-change: opacity;
}

@keyframes fgGlow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* GPU-ускорение для intro элементов */
.intro__top .btn-bl,
.intro__top .btn-bl-tr,
.intro__main--right,
.metric-widget,
.intro__bottom--block,
.intro__anim,
.intro__anim-2 {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ========================================
   ФОРМАТЫ ЛИДОВ - Парение и свечение
   (как у метрик в hero)
   ======================================== */

/* Базовые стили для всех иконок форматов */
.format__anim--img {
  transition: all 0.3s ease;
}

/* 1. НЕЙРОЛИДЫ - Алмаз: парение + фиолетовое свечение */
.format__anim-1 .format__anim--img {
  animation: formatFloat1 6s ease-in-out infinite, formatGlow1 4s ease-in-out infinite;
}

@keyframes formatFloat1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(5px, -8px) rotate(2deg); }
  50% { transform: translate(-3px, -12px) rotate(-1deg); }
  75% { transform: translate(-6px, -5px) rotate(1deg); }
}

@keyframes formatGlow1 {
  0%, 100% { filter: drop-shadow(0 4px 15px rgba(139, 92, 246, 0.4)); }
  50% { filter: drop-shadow(0 8px 30px rgba(139, 92, 246, 0.7)); }
}

/* 2. МИКС-ЛИДЫ - Звёзды: парение + синее свечение */
.format__anim-2 .format__anim--img {
  animation: formatFloat2 7s ease-in-out infinite, formatGlow2 3s ease-in-out infinite;
}

@keyframes formatFloat2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-6px, 10px) rotate(-3deg); }
  66% { transform: translate(8px, 5px) rotate(2deg); }
}

@keyframes formatGlow2 {
  0%, 100% { filter: drop-shadow(0 4px 15px rgba(55, 98, 252, 0.3)); }
  50% { filter: drop-shadow(0 8px 25px rgba(55, 98, 252, 0.6)); }
}

/* 3. КЦ-ЛИДЫ - Волна: парение + пульсация */
.format__block:nth-child(3) .format__anim .format__anim--img {
  animation: formatFloat3 5s ease-in-out infinite, formatPulse3 2.5s ease-in-out infinite;
}

@keyframes formatFloat3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(4px, -6px); }
}

@keyframes formatPulse3 {
  0%, 100% { 
    filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.3));
    transform: scale(1);
  }
  50% { 
    filter: drop-shadow(0 6px 20px rgba(99, 102, 241, 0.5));
    transform: scale(1.02);
  }
}

/* 4. БРЕНДОВЫЕ ЛИДЫ - VK: парение + синее свечение */
.format__anim-4 .format__anim--img {
  animation: formatFloat4 8s ease-in-out infinite, formatGlow4 4s ease-in-out infinite;
}

@keyframes formatFloat4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-5px, -10px) rotate(-2deg); }
  50% { transform: translate(3px, -8px) rotate(1deg); }
  75% { transform: translate(6px, -4px) rotate(-1deg); }
}

@keyframes formatGlow4 {
  0%, 100% { filter: drop-shadow(0 4px 15px rgba(55, 98, 252, 0.35)); }
  50% { filter: drop-shadow(0 8px 25px rgba(55, 98, 252, 0.6)); }
}

/* Hover эффект на карточках форматов */
.format__block:hover .format__anim--img {
  filter: drop-shadow(0 10px 35px rgba(139, 92, 246, 0.6)) !important;
  transform: scale(1.05) !important;
}


/* ========================================
   ФОРМАТЫ ЛИДОВ - Заголовки
   Градиентный перелив + парение
   ======================================== */

/* ГЛАВНЫЙ ЗАГОЛОВОК "Форматы лидов" */
.format__title {
  background: linear-gradient(
    120deg,
    #ffffff 0%,
    #ffffff 40%,
    #60a5fa 50%,
    #ffffff 60%,
    #ffffff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: formatMainShine 5s linear infinite, formatMainFloat 6s ease-in-out infinite;
}

@keyframes formatMainShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

/* ЗАГОЛОВКИ КАРТОЧЕК - белые с синим переливом */
.format__block .card__text--title {
  background: linear-gradient(
    120deg,
    #ffffff 0%,
    #ffffff 40%,
    #60a5fa 50%,
    #ffffff 60%,
    #ffffff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: formatTitleShine 6s linear infinite, formatTitleFloat 5s ease-in-out infinite;
}

@keyframes formatTitleShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

/* Разные задержки для каждой карточки */
.format__block:nth-child(1) .card__text--title {
  animation-delay: 0s, 0s;
}

.format__block:nth-child(2) .card__text--title {
  animation-delay: 1.5s, 0.5s;
}

.format__block:nth-child(3) .card__text--title {
  animation-delay: 3s, 1s;
}

.format__block:nth-child(4) .card__text--title {
  animation-delay: 4.5s, 1.5s;
}

/* Hover - усиление эффекта */
.format__block:hover .card__text--title {
  animation-duration: 2s, 3s;
  filter: drop-shadow(0 0 10px rgba(96, 165, 250, 0.5));
}


/* ========================================
   ИНСТРУМЕНТЫ - Анимации и стили
   ======================================== */

/* Секция - relative для canvas */
.inst {
  position: relative;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  padding-top: 20px;
}

/* Контейнер не обрезает */
.inst__container {
  overflow: visible !important;
}

/* УБИРАЕМ СЛАЙДЕР - делаем нормальный grid */
.inst__slider {
  overflow: visible !important;
}

.inst__slide {
  overflow: visible !important;
}

.inst__slide--ai {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Карточки */
.inst__block--ai {
  position: relative;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* БЕЙДЖ "НОВИНКА" - исправлено позиционирование */
.inst__block--new {
  position: relative;
  overflow: visible !important;
}

.inst__badge-new {
  position: absolute;
  top: 10px;
  right: 15px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 100;
  animation: badgePulse 2s ease-in-out infinite, badgeGlow 3s ease-in-out infinite;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
  white-space: nowrap;
}

/* Overflow visible на всех родителях для бейджа */
.inst__slide--ai,
.inst__block--ai {
  overflow: visible !important;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4); }
  50% { box-shadow: 0 6px 25px rgba(249, 115, 22, 0.7); }
}

/* КНОПКИ - исправляем */
.inst__blocks--btn {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 15px;
}

.inst__blocks--btn .btn-bl,
.inst__blocks--btn .btn-bl-tr {
  padding: 10px 16px !important;
  font-size: 0.85rem !important;
  white-space: nowrap;
}

/* ГЛАВНЫЙ ЗАГОЛОВОК */
.inst__block--title {
  background: linear-gradient(
    120deg,
    #0E1A42 0%,
    #0E1A42 40%,
    #3b82f6 50%,
    #0E1A42 60%,
    #0E1A42 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: instTitleShine 5s linear infinite, instTitleFloat 6s ease-in-out infinite;
}

@keyframes instTitleShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

/* ЗАГОЛОВКИ КАРТОЧЕК */
.inst__ai--title {
  background: linear-gradient(
    120deg,
    #0E1A42 0%,
    #0E1A42 40%,
    #3b82f6 50%,
    #0E1A42 60%,
    #0E1A42 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: instCardShine 6s linear infinite, instCardFloat 5s ease-in-out infinite;
}

@keyframes instCardShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

/* Разные задержки */
.inst__block--ai:nth-child(1) .inst__ai--title { animation-delay: 0s, 0s; }
.inst__block--ai:nth-child(2) .inst__ai--title { animation-delay: 1.5s, 0.4s; }
.inst__block--ai:nth-child(3) .inst__ai--title { animation-delay: 3s, 0.8s; }
.inst__block--ai:nth-child(4) .inst__ai--title { animation-delay: 4.5s, 1.2s; }

/* ИКОНКИ - Парение и свечение */
.inst__ai--img {
  animation: instIconFloat 6s ease-in-out infinite, instIconGlow 4s ease-in-out infinite;
}

@keyframes instIconFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(3px, -5px) rotate(2deg); }
  50% { transform: translate(-2px, -8px) rotate(-1deg); }
  75% { transform: translate(-4px, -3px) rotate(1deg); }
}

@keyframes instIconGlow {
  0%, 100% { filter: drop-shadow(0 4px 12px rgba(139, 92, 246, 0.3)); }
  50% { filter: drop-shadow(0 8px 20px rgba(139, 92, 246, 0.6)); }
}

/* Разные задержки для иконок */
.inst__block--ai:nth-child(1) .inst__ai--img { animation-delay: 0s, 0s; }
.inst__block--ai:nth-child(2) .inst__ai--img { animation-delay: 0.5s, 0.3s; }
.inst__block--ai:nth-child(3) .inst__ai--img { animation-delay: 1s, 0.6s; }
.inst__block--ai:nth-child(4) .inst__ai--img { animation-delay: 1.5s, 0.9s; }

/* Hover эффект */
.inst__block--ai:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(14, 26, 66, 0.15);
}

.inst__block--ai:hover .inst__ai--img {
  filter: drop-shadow(0 10px 30px rgba(139, 92, 246, 0.7)) !important;
  transform: scale(1.1) !important;
}

.inst__block--ai:hover .inst__ai--title {
  animation-duration: 2s, 3s;
}

/* Адаптив */
@media (max-width: 1200px) {
  .inst__slide--ai {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .inst__slide--ai {
    grid-template-columns: 1fr !important;
  }
  
  .inst__blocks--btn {
    flex-direction: column;
  }
  
  .inst__blocks--btn .btn-bl,
  .inst__blocks--btn .btn-bl-tr {
    width: 100%;
    text-align: center;
  }
}


/* ОТКЛЮЧАЕМ SLICK - делаем TABS */
.inst__slider {
  position: relative !important;
  overflow: visible !important;
  width: 100% !important;
}

.inst__slider .slick-track {
  display: block !important;
  width: 100% !important;
  transform: none !important;
}

.inst__slider .slick-list {
  overflow: visible !important;
  width: 100% !important;
}

.inst__slider .slick-slide {
  width: 100% !important;
  float: none !important;
}

.inst__slider .slick-dots,
.inst__slider .slick-arrow {
  display: none !important;
}

/* TABS - ВСЕ слайды скрыты по умолчанию */
.inst__slide {
  display: none !important;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Активный слайд показываем */
.inst__slide.active {
  display: block !important;
  opacity: 1;
}

/* Кнопки табов */
.inst__block--btn {
  display: flex;
  gap: 0;
  background: #f1f5f9;
  border-radius: 30px;
  padding: 4px;
}

.inst-btn {
  padding: 12px 24px;
  border: none;
  background: transparent;
  border-radius: 26px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.3s ease;
}

.inst-btn.active {
  background: #0E1A42;
  color: white;
  box-shadow: 0 4px 12px rgba(14, 26, 66, 0.3);
}

.inst-btn:hover:not(.active) {
  color: #0E1A42;
}

/* Grid для обоих слайдов */
.inst__slide.active .inst__slide--ai,
.inst__slide.active .inst__slide--combo {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  overflow: visible !important;
  width: 100% !important;
}

/* Комбо карточки - не обрезаются */
.inst__block--combo {
  overflow: visible !important;
  min-width: 0;
}

@media (max-width: 1200px) {
  .inst__slide.active .inst__slide--ai,
  .inst__slide.active .inst__slide--combo {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .inst__slide.active .inst__slide--ai,
  .inst__slide.active .inst__slide--combo {
    grid-template-columns: 1fr !important;
  }
}

/* ИСПРАВЛЯЕМ ТЕКСТ */
.inst__ai--title {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  white-space: nowrap !important;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem) !important;
}


/* КОМБО-ПРОДУКТЫ - Стили карточек */
.inst__block--combo {
  position: relative;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.inst__block--combo:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(14, 26, 66, 0.15);
}

/* Заголовки комбо */
.inst__combo--title {
  background: linear-gradient(
    120deg,
    #0E1A42 0%,
    #0E1A42 40%,
    #3b82f6 50%,
    #0E1A42 60%,
    #0E1A42 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: instCardShine 6s linear infinite, instCardFloat 5s ease-in-out infinite;
}

/* Иконки комбо */
.inst__combo--img {
  animation: instIconFloat 6s ease-in-out infinite, instIconGlow 4s ease-in-out infinite;
}


/* Дополнительно - убираем overflow на контейнере inst */
.inst,
.inst__container,
.inst__slider {
  overflow: visible !important;
}


/* Исправление обрезания комбо-карточек */
.inst__slide--combo {
  overflow: visible !important;
  width: 100% !important;
}

.inst__slide {
  width: 100% !important;
  overflow: visible !important;
}


/* ========================================
   ИНСТРУМЕНТЫ - Парящий эффект карточек
   ======================================== */

/* Карточки ИИ-инструментов - парение */
.inst__block--ai {
  animation: instCardFloat 6s ease-in-out infinite;
}

.inst__block--ai:nth-child(1) { animation-delay: 0s; }
.inst__block--ai:nth-child(2) { animation-delay: 0.5s; }
.inst__block--ai:nth-child(3) { animation-delay: 1s; }
.inst__block--ai:nth-child(4) { animation-delay: 1.5s; }

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

/* Карточки Комбо-продуктов - парение */
.inst__block--combo {
  animation: comboCardFloat 6s ease-in-out infinite;
}

.inst__block--combo:nth-child(1) { animation-delay: 0s; }
.inst__block--combo:nth-child(2) { animation-delay: 0.4s; }
.inst__block--combo:nth-child(3) { animation-delay: 0.8s; }
.inst__block--combo:nth-child(4) { animation-delay: 1.2s; }
.inst__block--combo:nth-child(5) { animation-delay: 1.6s; }
.inst__block--combo:nth-child(6) { animation-delay: 2s; }

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

/* Hover - остановка парения + поднятие */
.inst__block--ai:hover,
.inst__block--combo:hover {
  animation-play-state: paused;
  transform: translateY(-12px) !important;
  box-shadow: 0 25px 50px rgba(14, 26, 66, 0.15);
}


/* ========================================
   КАК РАБОТАЕТ - Импульс анимация
   ======================================== */

/* Секция */
.work {
  position: relative;
  overflow: hidden;
}

/* Главный заголовок - градиент + парение */
.work__top--title {
  background: linear-gradient(
    120deg,
    #0E1A42 0%,
    #0E1A42 40%,
    #3b82f6 50%,
    #0E1A42 60%,
    #0E1A42 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: workTitleShine 5s linear infinite, workTitleFloat 6s ease-in-out infinite;
}

@keyframes workTitleShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

/* Заголовки карточек - градиент */
.work__text--title {
  background: linear-gradient(
    120deg,
    #0E1A42 0%,
    #0E1A42 40%,
    #3b82f6 50%,
    #0E1A42 60%,
    #0E1A42 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: workCardShine 6s linear infinite;
}

.work__card-1 .work__text--title { animation-delay: 0s; }
.work__card-2 .work__text--title { animation-delay: 1s; }
.work__card-3 .work__text--title { animation-delay: 2s; }
.work__card-4 .work__text--title { animation-delay: 3s; }
.work__card-5 .work__text--title { animation-delay: 4s; }

@keyframes workCardShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Карточки - контейнер */
.work__card {
  position: relative;
}

/* Белый блок - парит */
.work__block {
  animation: workBlockFloat 5s ease-in-out infinite;
  transition: transform 0.4s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 2;
}

.work__card-1 .work__block { animation-delay: 0s; }
.work__card-2 .work__block { animation-delay: 0.3s; }
.work__card-3 .work__block { animation-delay: 0.6s; }
.work__card-4 .work__block { animation-delay: 0.9s; }
.work__card-5 .work__block { animation-delay: 1.2s; }

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

.work__card:hover .work__block {
  animation-play-state: paused;
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(14, 26, 66, 0.12);
}

/* Стрелки выведены в отдельную анимацию ниже */

/* Иконки - только свечение, без движения */
.work__block--img {
  animation: workIconGlow 3s ease-in-out infinite;
}

.work__card-1 .work__block--img { animation-delay: 0s; }
.work__card-2 .work__block--img { animation-delay: 0.3s; }
.work__card-3 .work__block--img { animation-delay: 0.6s; }
.work__card-4 .work__block--img { animation-delay: 0.9s; }
.work__card-5 .work__block--img { animation-delay: 1.2s; }

@keyframes workIconGlow {
  0%, 100% { filter: drop-shadow(0 2px 8px rgba(59, 130, 246, 0.15)); }
  50% { filter: drop-shadow(0 4px 15px rgba(59, 130, 246, 0.4)); }
}

/* Номера - пульсация */
.work__block--num {
  animation: workNumPulse 3s ease-in-out infinite;
}

.work__card-1 .work__block--num { animation-delay: 0s; }
.work__card-2 .work__block--num { animation-delay: 0.4s; }
.work__card-3 .work__block--num { animation-delay: 0.8s; }
.work__card-4 .work__block--num { animation-delay: 1.2s; }
.work__card-5 .work__block--num { animation-delay: 1.6s; }

@keyframes workNumPulse {
  0%, 100% { 
    transform: scale(1);
    filter: drop-shadow(0 2px 8px rgba(59, 130, 246, 0.3));
  }
  50% { 
    transform: scale(1.08);
    filter: drop-shadow(0 4px 15px rgba(59, 130, 246, 0.6));
  }
}

/* ========================================
   СТРЕЛКИ - Градиентный импульс сверху вниз (независимые)
   ======================================== */

/* ========================================
   СТРЕЛКИ - Градиентный импульс сверху вниз
   ======================================== */

/* Стрелки - основная анимация */
img.work__block--arrow {
  animation: arrowPulse 4s ease-in-out infinite;
}

img.work__block--arrow-1 { animation-delay: 0s; }
img.work__block--arrow-2 { animation-delay: 1s; }
img.work__block--arrow-3 { animation-delay: 2s; }
img.work__block--arrow-4 { animation-delay: 3s; }

@keyframes arrowPulse {
  0%, 60%, 100% {
    opacity: 0.3;
    filter: brightness(0.6) grayscale(0.5);
    transform: scale(1);
  }
  15%, 35% {
    opacity: 1;
    filter: brightness(1.2) grayscale(0) drop-shadow(0 0 8px rgba(59, 130, 246, 0.8)) drop-shadow(0 0 20px rgba(139, 92, 246, 0.6));
    transform: scale(1.1);
  }
}

/* ========================================
   SCROLL TRIGGER - Появление карточек
   ======================================== */

.work__card {
  transition: all 0.4s ease;
}



/* ========================================
   WORKFLOW - Только анимации (без layout)
   ======================================== */

/* Шаги - hover */
.workflow__step {
  transition: transform 0.3s ease;
}

.workflow__step:hover {
  transform: translateX(5px);
}

/* Иконки - парение */
.workflow__step-icon {
  transition: transform 0.4s ease, filter 0.4s ease;
  animation: workflowIconFloat 4s ease-in-out infinite;
}

.workflow__step:nth-child(1) .workflow__step-icon { animation-delay: 0s; }
.workflow__step:nth-child(2) .workflow__step-icon { animation-delay: 0.3s; }
.workflow__step:nth-child(3) .workflow__step-icon { animation-delay: 0.6s; }
.workflow__step:nth-child(4) .workflow__step-icon { animation-delay: 0.9s; }
.workflow__step:nth-child(5) .workflow__step-icon { animation-delay: 1.2s; }

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

.workflow__step-icon:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 5px 15px rgba(55, 98, 252, 0.4));
}

/* Метрики - пульсация */
.workflow__step-metric {
  animation: metricPulse 2s ease-in-out infinite;
}

@keyframes metricPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}


/* ========================================
   TRANSFORM - Только анимации (без layout)
   ======================================== */

/* Карточки - hover */
.transform__card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.transform__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(14, 26, 66, 0.12);
}

/* Иконки - hover */
.transform__icon {
  transition: transform 0.3s ease;
}

.transform__card:hover .transform__icon--after {
  transform: scale(1.1);
}


/* ========================================
   REVIEWS - Только анимации (без layout)
   ======================================== */

/* Карточки отзывов - hover */
.reviews__main--block {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.reviews__main--block:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(79, 70, 229, 0.12);
}

/* Аватар - hover */
.reviews__block--img {
  transition: transform 0.3s ease;
}

.reviews__main--block:hover .reviews__block--img {
  transform: scale(1.08);
}


/* ========================================
   ABU (О нас) - Только анимации (без layout)
   ======================================== */

/* Блоки статистики - hover */
.abu__top--block {
  transition: transform 0.4s ease;
}

.abu__top--block:hover {
  transform: translateY(-5px);
}

/* Слайды фото - hover */
.abu-slide {
  transition: transform 0.4s ease;
}

.abu-slide:hover {
  transform: scale(1.03);
}

.abu-slide img {
  transition: transform 0.5s ease;
}

.abu-slide:hover img {
  transform: scale(1.05);
}


/* ========================================
   TEST (CTA) - Только анимации (без layout)
   ======================================== */

/* Кнопка - усиленная пульсация */
.test__left--btn .btn-bl {
  animation: testBtnPulse 3s ease-in-out infinite;
}

@keyframes testBtnPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); }
  50% { box-shadow: 0 8px 30px rgba(37, 99, 235, 0.5); }
}

/* Картинка - парение */
.test__img {
  animation: testImgFloat 5s ease-in-out infinite;
}

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

.test__main:hover .test__img {
  animation-play-state: paused;
  transform: scale(1.02);
}


/* ========================================
   RESPONSIVE - Отключение на мобильных
   ======================================== */

@media (max-width: 768px) {
  .workflow__step-icon,
  .test__img {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ========================================
   KEYS & REVIEWS - Заголовки с градиентом и парением
   ======================================== */

/* Успешные кейсы - заголовок */
.keys__top--title {
  background: linear-gradient(
    120deg,
    #0E1A42 0%,
    #0E1A42 40%,
    #3b82f6 50%,
    #0E1A42 60%,
    #0E1A42 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: keysTitleShine 5s linear infinite, keysTitleFloat 6s ease-in-out infinite;
}

@keyframes keysTitleShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

/* Опыт тех, кто уже работает с нами - заголовок */
.reviews__block--title {
  background: linear-gradient(
    120deg,
    #0E1A42 0%,
    #0E1A42 40%,
    #3b82f6 50%,
    #0E1A42 60%,
    #0E1A42 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: reviewsTitleShine 5s linear infinite, reviewsTitleFloat 6s ease-in-out infinite;
}

@keyframes reviewsTitleShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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


/* ========================================
   KEYS CAROUSEL - Полная визуализация
   ======================================== */

/* Карточки кейсов - hover + shimmer */
.keys__slide {
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}

.keys__slide:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(14, 26, 66, 0.12);
}

/* Shimmer эффект на карточках */
.keys__slide::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: keysShimmer 10s ease-in-out infinite;
  pointer-events: none;
}

.keys__slide:nth-child(1)::after { animation-delay: 0s; }
.keys__slide:nth-child(2)::after { animation-delay: 2.5s; }
.keys__slide:nth-child(3)::after { animation-delay: 5s; }
.keys__slide:nth-child(4)::after { animation-delay: 7.5s; }

@keyframes keysShimmer {
  0%, 70%, 100% { left: -100%; opacity: 0; }
  75% { opacity: 1; }
  85% { left: 200%; opacity: 1; }
  86% { opacity: 0; }
}

.keys__slide:hover::after {
  animation-play-state: paused;
}

/* Цифры статистики - выделение */
.keys__block--text {
  transition: transform 0.3s ease;
}

.keys__slide:hover .keys__block--text {
  transform: scale(1.02);
}

/* Проценты - пульсация */
.keys__block--text.blue {
  animation: percentPulse 3s ease-in-out infinite;
}

@keyframes percentPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; text-shadow: 0 0 10px rgba(37, 99, 235, 0.5); }
}

/* Разделительные линии - градиент */
.keys__info--line {
  position: relative;
  overflow: hidden;
}

.keys__info--line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(55, 98, 252, 0.3) 0%, transparent 100%);
  animation: lineGradient 4s ease-in-out infinite;
}

@keyframes lineGradient {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* Теги источников - hover */
.keys__source--text {
  transition: all 0.3s ease;
}

.keys__source--text:hover {
  background: rgba(55, 98, 252, 0.1);
  box-shadow: 0 2px 10px rgba(55, 98, 252, 0.15);
  transform: translateY(-2px);
}

/* Стрелки навигации - пульсация + hover */
.keys__prev,
.keys__next {
  transition: all 0.3s ease;
  animation: arrowIdle 2s ease-in-out infinite;
}

@keyframes arrowIdle {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.keys__prev:hover,
.keys__next:hover {
  animation: none;
  transform: scale(1.1);
  filter: drop-shadow(0 4px 12px rgba(14, 26, 66, 0.2));
}

/* Progress bar контейнер */
.keys__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(55, 98, 252, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.keys__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3762FC, #4F46E5);
  border-radius: 3px;
  transition: width 0.1s linear;
}

/* Индикаторы (точки) */
.keys__indicators {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.keys__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(55, 98, 252, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.keys__dot:hover {
  background: rgba(55, 98, 252, 0.4);
  transform: scale(1.2);
}

.keys__dot.active {
  background: #3762FC;
  transform: scale(1.2);
  box-shadow: 0 2px 10px rgba(55, 98, 252, 0.4);
}

/* Swipe hint для мобильных */
@media (max-width: 768px) {
  .keys__slider__container {
    cursor: grab;
  }
  
  .keys__slider__container:active {
    cursor: grabbing;
  }
}


/* ========================================
   REVIEWS - Полная анимация отзывов
   ======================================== */

/* === Карточки - парение (разные фазы) === */
.reviews__main--block {
  position: relative;
  animation: reviewFloat 5s ease-in-out infinite;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.reviews__main--block:nth-child(1) { animation-delay: 0s; }
.reviews__main--block:nth-child(2) { animation-delay: 1.2s; }
.reviews__main--block:nth-child(3) { animation-delay: 2.4s; }
.reviews__main--block:nth-child(4) { animation-delay: 3.6s; }

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

.reviews__main--block:hover {
  animation-play-state: paused;
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(14, 26, 66, 0.12);
}

/* === Бегущий градиент по рамке === */
.reviews__main--block::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 40%,
    rgba(55, 98, 252, 0.6) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 300% 100%;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderGlow 6s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}

.reviews__main--block:nth-child(1)::before { animation-delay: 0s; }
.reviews__main--block:nth-child(2)::before { animation-delay: 1.5s; }
.reviews__main--block:nth-child(3)::before { animation-delay: 3s; }
.reviews__main--block:nth-child(4)::before { animation-delay: 4.5s; }

@keyframes borderGlow {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* === Shimmer по карточке === */
.reviews__main--block::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: reviewShimmer 8s ease-in-out infinite;
  pointer-events: none;
}

.reviews__main--block:nth-child(1)::after { animation-delay: 0s; }
.reviews__main--block:nth-child(2)::after { animation-delay: 2s; }
.reviews__main--block:nth-child(3)::after { animation-delay: 4s; }
.reviews__main--block:nth-child(4)::after { animation-delay: 6s; }

@keyframes reviewShimmer {
  0%, 60%, 100% { left: -100%; opacity: 0; }
  65% { opacity: 1; }
  80% { left: 200%; opacity: 1; }
  81% { opacity: 0; }
}

/* === Аватары - пульсирующий ring === */
.reviews__block--img {
  position: relative;
  z-index: 1;
  transition: transform 0.4s ease;
  animation: avatarPulse 3s ease-in-out infinite;
}

.reviews__main--block:nth-child(1) .reviews__block--img { animation-delay: 0s; }
.reviews__main--block:nth-child(2) .reviews__block--img { animation-delay: 0.7s; }
.reviews__main--block:nth-child(3) .reviews__block--img { animation-delay: 1.4s; }
.reviews__main--block:nth-child(4) .reviews__block--img { animation-delay: 2.1s; }

@keyframes avatarPulse {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(55, 98, 252, 0.4);
  }
  50% { 
    box-shadow: 0 0 0 8px rgba(55, 98, 252, 0);
  }
}

.reviews__main--block:hover .reviews__block--img {
  animation-play-state: paused;
  transform: scale(1.1);
  box-shadow: 0 5px 20px rgba(55, 98, 252, 0.3);
}

/* === Имена - hover подчёркивание === */
.reviews__text--title {
  position: relative;
  display: inline-block;
  transition: color 0.3s ease;
}

.reviews__text--title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3762FC, #4F46E5);
  transition: width 0.3s ease;
  border-radius: 2px;
}

.reviews__main--block:hover .reviews__text--title::after {
  width: 100%;
}

/* === Компании - градиентный текст === */
.reviews__text--subtitle {
  background: linear-gradient(
    120deg,
    #64748b 0%,
    #64748b 40%,
    #3b82f6 50%,
    #64748b 60%,
    #64748b 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: companyShine 8s linear infinite;
}

.reviews__main--block:nth-child(1) .reviews__text--subtitle { animation-delay: 0s; }
.reviews__main--block:nth-child(2) .reviews__text--subtitle { animation-delay: 2s; }
.reviews__main--block:nth-child(3) .reviews__text--subtitle { animation-delay: 4s; }
.reviews__main--block:nth-child(4) .reviews__text--subtitle { animation-delay: 6s; }

@keyframes companyShine {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* === Подсветка цифр в тексте === */
.reviews__block--subtext .highlight-number {
  display: inline;
  background: linear-gradient(120deg, transparent, rgba(55, 98, 252, 0.15), transparent);
  background-size: 200% 100%;
  animation: numberHighlight 4s ease-in-out infinite;
  padding: 0 3px;
  border-radius: 3px;
}

@keyframes numberHighlight {
  0%, 70%, 100% { background-position: 200% center; }
  85% { background-position: -200% center; }
}

/* === Каскадное появление === */
.reviews__main--block.reveal-init {
  opacity: 0;
  transform: translateY(30px);
}

.reviews__main--block.reveal-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* === Floating кавычки на фоне === */
.reviews__slide--main {
  position: relative;
}

.reviews__quote-left,
.reviews__quote-right {
  position: absolute;
  font-size: 120px;
  font-family: Georgia, serif;
  color: rgba(55, 98, 252, 0.05);
  pointer-events: none;
  z-index: 0;
  line-height: 1;
}

.reviews__quote-left {
  top: -20px;
  left: -10px;
  animation: quoteFloatLeft 8s ease-in-out infinite;
}

.reviews__quote-right {
  bottom: -40px;
  right: -10px;
  animation: quoteFloatRight 8s ease-in-out infinite;
}

@keyframes quoteFloatLeft {
  0%, 100% { transform: translate(0, 0) rotate(-5deg); }
  50% { transform: translate(5px, -10px) rotate(0deg); }
}

@keyframes quoteFloatRight {
  0%, 100% { transform: translate(0, 0) rotate(5deg); }
  50% { transform: translate(-5px, 10px) rotate(0deg); }
}

/* === Responsive === */
@media (max-width: 768px) {
  .reviews__main--block {
    animation: none;
  }
  
  .reviews__main--block::before {
    animation: none;
    opacity: 0;
  }
  
  .reviews__quote-left,
  .reviews__quote-right {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews__main--block,
  .reviews__block--img,
  .reviews__main--block::before,
  .reviews__main--block::after {
    animation: none;
  }
}


/* ========================================
   ABU (О нас) - Полные анимации
   ======================================== */

/* === Заголовок - градиент + парение === */
.abu__top--title {
  background: linear-gradient(
    120deg,
    #0E1A42 0%,
    #0E1A42 40%,
    #3b82f6 50%,
    #0E1A42 60%,
    #0E1A42 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: abuTitleShine 5s linear infinite, abuTitleFloat 6s ease-in-out infinite;
}

@keyframes abuTitleShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

/* === Блоки статистики - парение + hover === */
.abu__top--block {
  transition: transform 0.4s ease;
  animation: abuBlockFloat 5s ease-in-out infinite;
}

.abu__top--block:nth-child(1) { animation-delay: 0s; }
.abu__top--block:nth-child(2) { animation-delay: 0.5s; }
.abu__top--block:nth-child(3) { animation-delay: 1s; }

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

.abu__top--block:hover {
  animation-play-state: paused;
  transform: translateY(-8px);
}

/* === Большие цифры - пульсация === */
.abu__block--text-big {
  display: inline-block;
  transition: transform 0.3s ease;
}

.abu__top--block:hover .abu__block--text-big {
  transform: scale(1.05);
}

/* === Каскадное появление === */
.abu__top--block.reveal-init {
  opacity: 0;
  transform: translateY(30px);
}

.abu__top--block.reveal-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* === Responsive === */
@media (max-width: 768px) {
  .abu__top--block {
    animation: none;
  }
}


/* ========================================
   ABU GALLERY - Полные анимации фото
   ======================================== */

/* === Фото - hover zoom + lift === */
.abu-slide {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  animation: abuSlideFloat 6s ease-in-out infinite;
}

.abu-slide:nth-child(1) { animation-delay: 0s; }
.abu-slide:nth-child(2) { animation-delay: 0.8s; }
.abu-slide:nth-child(3) { animation-delay: 1.6s; }
.abu-slide:nth-child(4) { animation-delay: 2.4s; }
.abu-slide:nth-child(5) { animation-delay: 3.2s; }
.abu-slide:nth-child(6) { animation-delay: 4s; }

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

.abu-slide:hover {
  animation-play-state: paused;
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 50px rgba(14, 26, 66, 0.2);
  z-index: 10;
}

/* Zoom внутри рамки */
.abu-slide img {
  transition: transform 0.5s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.abu-slide:hover img {
  transform: scale(1.25);
}

/* === Overlay при hover === */
.abu-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(14, 26, 66, 0.4) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  pointer-events: none;
}

.abu-slide:hover::before {
  opacity: 1;
}

/* === Иконка увеличения при hover === */
.abu-slide::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 32px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.abu-slide:hover::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* === Shimmer по фото === */
.abu-slide .shimmer-overlay {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: abuShimmer 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes abuShimmer {
  0%, 60%, 100% { left: -100%; opacity: 0; }
  65% { opacity: 1; }
  80% { left: 200%; opacity: 1; }
  81% { opacity: 0; }
}

/* === Стрелки - пульсация + hover === */
.abu__prev,
.abu__next {
  transition: all 0.3s ease;
  animation: abuArrowPulse 2s ease-in-out infinite;
  cursor: pointer;
}

.abu__prev { animation-delay: 0s; }
.abu__next { animation-delay: 0.3s; }

@keyframes abuArrowPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.abu__prev:hover,
.abu__next:hover {
  animation: none;
  transform: scale(1.25);
  filter: drop-shadow(0 4px 15px rgba(14, 26, 66, 0.25));
  opacity: 1;
}

/* === Progress bar === */
.abu__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(55, 98, 252, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.abu__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3762FC, #4F46E5);
  border-radius: 3px;
  transition: width 0.1s linear;
}

/* === Индикаторы === */
.abu__indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.abu__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(55, 98, 252, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.abu__dot:hover {
  background: rgba(55, 98, 252, 0.4);
  transform: scale(1.3);
}

.abu__dot.active {
  background: #3762FC;
  transform: scale(1.3);
  box-shadow: 0 2px 8px rgba(55, 98, 252, 0.4);
}

/* === Появление при скролле === */
.abu-slide.reveal-init {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
}

.abu-slide.reveal-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* === Responsive === */
@media (max-width: 768px) {
  .abu-slide {
    animation: none;
  }
  
  .abu__slider {
    cursor: grab;
  }
  
  .abu__slider:active {
    cursor: grabbing;
  }
  
  .abu-slide::after {
    display: none;
  }
}


/* ========================================
   FAQ - Полные анимации
   ======================================== */

/* === Заголовок - градиент + парение === */
.faq__title {
  background: linear-gradient(
    120deg,
    #0E1A42 0%,
    #0E1A42 40%,
    #3b82f6 50%,
    #0E1A42 60%,
    #0E1A42 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: faqTitleShine 5s linear infinite, faqTitleFloat 6s ease-in-out infinite;
}

@keyframes faqTitleShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

/* === Блоки вопросов === */
.faq__block {
  position: relative;
  transition: all 0.3s ease;
}

.faq__block:hover {
  transform: translateX(8px);
}

.faq__block:hover .faq__top--title {
  color: #3762FC;
}

/* === Текст вопроса === */
.faq__text {
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq__top--title {
  transition: color 0.3s ease;
}

/* === Иконка + (toggle) === */
.faq__toggle {
  transition: transform 0.4s ease, filter 0.3s ease;
  animation: faqPlusPulse 3s ease-in-out infinite;
}

@keyframes faqPlusPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.faq__block:hover .faq__toggle {
  animation: none;
  transform: scale(1.2);
  filter: drop-shadow(0 2px 8px rgba(55, 98, 252, 0.4));
}

/* При открытии - вращение в × */
.faq__block.active .faq__toggle {
  transform: rotate(45deg);
  animation: none;
}

.faq__block.active:hover .faq__toggle {
  transform: rotate(45deg) scale(1.2);
}

/* === Ответы (details) === */
.faq__details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}

.faq__block.active .faq__details {
  max-height: 500px;
  opacity: 1;
}

.faq__text--block {
  transform: translateY(-10px);
  transition: transform 0.3s ease;
}

.faq__block.active .faq__text--block {
  transform: translateY(0);
}

/* === Линии - градиентный эффект === */
.faq__line {
  position: relative;
  overflow: hidden;
}

.faq__line::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(55, 98, 252, 0.5),
    transparent
  );
  animation: faqLineShimmer 8s ease-in-out infinite;
}

.faq__block:nth-child(1) + .faq__line::after { animation-delay: 0s; }
.faq__block:nth-child(3) + .faq__line::after { animation-delay: 1.5s; }
.faq__block:nth-child(5) + .faq__line::after { animation-delay: 3s; }
.faq__block:nth-child(7) + .faq__line::after { animation-delay: 4.5s; }
.faq__block:nth-child(9) + .faq__line::after { animation-delay: 6s; }

@keyframes faqLineShimmer {
  0%, 60%, 100% { left: -100%; }
  80% { left: 200%; }
}

/* === Подсветка активного блока === */
.faq__block.active {
  background: rgba(55, 98, 252, 0.03);
  border-radius: 12px;
  margin: -12px;
  padding: 12px;
}

/* === Каскадное появление === */
.faq__block.reveal-init {
  opacity: 0;
  transform: translateY(20px);
}

.faq__block.reveal-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* === Responsive === */
@media (max-width: 768px) {
  .faq__block:hover {
    transform: none;
  }
  
  .faq__toggle {
    animation: none;
  }
}


/* ========================================
   CTA BLOCK (TEST) - Живые анимации
   ======================================== */

/* === Заголовок - парение === */
.test__text--title {
  animation: testTitleFloat 5s ease-in-out infinite;
}

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

/* === Подзаголовок - fade pulse === */
.test__text--subtitle {
  animation: testSubtitlePulse 4s ease-in-out infinite;
}

@keyframes testSubtitlePulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

/* === Glow на фоне - дышащая пульсация === */
.test__main {
  position: relative;
  overflow: hidden;
}

.test__main::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 10%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 70%);
  transform: translate(0, -50%);
  animation: glowBreathe 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes glowBreathe {
  0%, 100% { 
    opacity: 0.5; 
    transform: translate(0, -50%) scale(1); 
  }
  50% { 
    opacity: 0.8; 
    transform: translate(0, -50%) scale(1.2); 
  }
}

/* Второй glow для глубины */
.test__main::after {
  content: '';
  position: absolute;
  top: 30%;
  right: 20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
  animation: glowBreathe2 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes glowBreathe2 {
  0%, 100% { 
    opacity: 0.4; 
    transform: scale(1) translate(0, 0); 
  }
  50% { 
    opacity: 0.7; 
    transform: scale(1.3) translate(-10px, 10px); 
  }
}

.test__left,
.test__right {
  position: relative;
  z-index: 1;
}

/* === Кнопка - усиленная пульсация === */
.test__left--btn .btn-bl {
  position: relative;
  animation: ctaBtnPulse 2s ease-in-out infinite;
}

@keyframes ctaBtnPulse {
  0%, 100% { 
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
  }
  50% { 
    box-shadow: 0 8px 35px rgba(59, 130, 246, 0.7), 0 0 50px rgba(59, 130, 246, 0.3);
  }
}

.test__left--btn .btn-bl:hover {
  animation: none;
  transform: scale(1.05);
  box-shadow: 0 10px 40px rgba(59, 130, 246, 0.6);
}

/* === Shimmer по блоку === */
.test__main .shimmer-cta {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: ctaShimmer 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes ctaShimmer {
  0%, 70%, 100% { left: -100%; opacity: 0; }
  75% { opacity: 1; }
  90% { left: 200%; opacity: 1; }
  91% { opacity: 0; }
}

/* === Картинка справа - парение === */
.test__img {
  animation: testImgFloat 6s ease-in-out infinite;
}

@keyframes testImgFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

/* === Появление при скролле === */
.test__main.reveal-init {
  opacity: 0;
  transform: translateY(30px);
}

.test__main.reveal-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}


/* ========================================
   FOOTER - Живые анимации
   ======================================== */

/* === Логотип - shimmer === */
.footer__logo {
  position: relative;
  transition: filter 0.3s ease;
  animation: footerLogoShimmer 8s ease-in-out infinite;
}

@keyframes footerLogoShimmer {
  0%, 90%, 100% { filter: brightness(1); }
  95% { filter: brightness(1.2) drop-shadow(0 0 5px rgba(55, 98, 252, 0.3)); }
}

.footer__logo:hover {
  filter: brightness(1.1) drop-shadow(0 0 10px rgba(55, 98, 252, 0.4));
}

/* === Телефон и email - hover === */
.footer__phone,
.footer__info--text a {
  position: relative;
  transition: color 0.3s ease;
}

.footer__phone::after,
.footer__info--text a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3762FC, #4F46E5);
  transition: width 0.3s ease;
}

.footer__phone:hover::after,
.footer__info--text a:hover::after {
  width: 100%;
}

.footer__phone:hover {
  color: #3762FC !important;
}

/* === Соцсети - пульсация + hover === */
.footer__img {
  transition: transform 0.3s ease, filter 0.3s ease;
  animation: socialPulse 3s ease-in-out infinite;
}

.footer__contact a:nth-child(1) .footer__img { animation-delay: 0s; }
.footer__contact a:nth-child(2) .footer__img { animation-delay: 0.5s; }

@keyframes socialPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.footer__img:hover {
  animation: none;
  transform: scale(1.2);
  filter: drop-shadow(0 4px 12px rgba(55, 98, 252, 0.4));
}

/* === Ссылки справа - hover === */
.footer__link-text {
  position: relative;
  transition: color 0.3s ease;
}

.footer__link-text::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #3762FC;
  transition: width 0.3s ease;
}

.footer__link-text:hover {
  color: #3762FC;
}

.footer__link-text:hover::after {
  width: 100%;
}

/* === Адрес - subtle animation === */
.footer__info--adress {
  position: relative;
}

/* === Появление футера === */
.footer.reveal-init {
  opacity: 0;
  transform: translateY(20px);
}

.footer.reveal-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* === Responsive === */
@media (max-width: 768px) {
  .test__main::before,
  .test__main::after {
    opacity: 0.3;
  }
  
  .test__img,
  .footer__img {
    animation: none;
  }
}


/* ========================================
   FLOATING TELEGRAM BUTTON
   ======================================== */

/* Контейнер */
.floating-tg {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 9999;
  opacity: 0;
  transform: translateX(100px);
  animation: floatingTgAppear 0.6s ease 2s forwards;
}

@keyframes floatingTgAppear {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Иконка TG */
.floating-tg__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #59b1e6 0%, #3a9fd5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: tgIconPulse 2s ease-in-out infinite;
  box-shadow: 0 4px 20px rgba(89, 177, 230, 0.4);
}

@keyframes tgIconPulse {
  0%, 100% { 
    box-shadow: 0 4px 20px rgba(89, 177, 230, 0.4);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 6px 30px rgba(89, 177, 230, 0.6), 0 0 0 8px rgba(89, 177, 230, 0.1);
    transform: scale(1.05);
  }
}

.floating-tg:hover .floating-tg__icon {
  animation: none;
  transform: scale(1.1);
  box-shadow: 0 8px 35px rgba(89, 177, 230, 0.6);
}

/* Текст */
.floating-tg__text {
  background: white;
  padding: 12px 20px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.floating-tg:hover .floating-tg__text {
  opacity: 1;
  transform: translateX(0);
}

/* Ссылка */
.floating-tg__link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* SVG иконка внутри */
.floating-tg__icon svg {
  width: 28px;
  height: 28px;
  fill: white;
}

/* Responsive */
@media (max-width: 768px) {
  .floating-tg {
    bottom: 20px;
    right: 20px;
  }
  
  .floating-tg__icon {
    width: 50px;
    height: 50px;
    font-size: 14px;
  }
  
  .floating-tg__text {
    display: none;
  }
}


/* ========================================


/* ========================================
   KEYS DISCLAIMER - ЯРКИЙ АКЦЕНТ (ЗАМЕНА)
   ======================================== */

/* Контейнер дисклеймера */
.keys__disclaimer {
  text-align: center;
  margin-top: 40px;
  padding: 0 20px;
  opacity: 0;
  transform: translateY(20px);
  animation: disclaimerAppear 0.8s ease 0.5s forwards;
}

@keyframes disclaimerAppear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Текст - ЯРКИЙ СТИЛЬ */
.keys__disclaimer-text {
  display: inline-block;
  font-size: 1rem;
  font-weight: 500;
  color: #0E1A42;
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 40px;
  background: linear-gradient(135deg, rgba(55, 98, 252, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
  border-radius: 16px;
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
  box-shadow: 0 8px 30px rgba(55, 98, 252, 0.12);
  transition: all 0.4s ease;
}

/* Градиентная рамка */
.keys__disclaimer-text::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(120deg, #3762FC, #8b5cf6, #3762FC);
  background-size: 200% 100%;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: disclaimerBorderMove 4s linear infinite;
  z-index: -1;
}

@keyframes disclaimerBorderMove {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Shimmer эффект */
.keys__disclaimer-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  animation: disclaimerShimmer 6s ease-in-out infinite;
  pointer-events: none;
  border-radius: 16px;
}

@keyframes disclaimerShimmer {
  0%, 50%, 100% { left: -100%; opacity: 0; }
  55% { opacity: 1; }
  70% { left: 150%; opacity: 1; }
  71% { opacity: 0; }
}

/* Иконка слева */
.keys__disclaimer-icon {
  display: inline-block;
  margin-right: 12px;
  font-size: 20px;
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Hover эффект */
.keys__disclaimer-text:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 45px rgba(55, 98, 252, 0.2);
}

/* Лёгкое парение */
.keys__disclaimer-text {
  animation: disclaimerFloat 5s ease-in-out infinite;
}

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

/* Responsive */
@media (max-width: 768px) {
  .keys__disclaimer {
    padding: 0 15px;
    margin-top: 30px;
  }
  
  .keys__disclaimer-text {
    font-size: 0.9rem;
    padding: 20px 24px;
  }
}


/* ========================================
   СКРЫВАЕМ СТАРЫЙ BANNER "50 заявок"
   ======================================== */

.scroll-banner {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ========================================
   WORK SECTION - Улучшенные живые анимации
   ======================================== */

/* === Заголовок секции - градиент + парение === */
.work__top--title {
  background: linear-gradient(
    120deg,
    #0E1A42 0%,
    #0E1A42 40%,
    #3b82f6 50%,
    #0E1A42 60%,
    #0E1A42 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: workMainTitleShine 5s linear infinite, workMainTitleFloat 6s ease-in-out infinite;
}

@keyframes workMainTitleShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

/* === Карточки - парение (разные фазы) === */
.work__card {
  animation: workCardFloat 6s ease-in-out infinite;
}

.work__card-1 { animation-delay: 0s; }
.work__card-2 { animation-delay: 1.2s; }
.work__card-3 { animation-delay: 2.4s; }
.work__card-4 { animation-delay: 3.6s; }
.work__card-5 { animation-delay: 4.8s; }

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

/* Hover на карточках */
.work__card:hover {
  animation-play-state: paused;
}

.work__card:hover .work__block {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(55, 98, 252, 0.15);
}

.work__block {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* === Номера 1-5 - последовательная пульсация === */
.work__block--num {
  animation: numSequencePulse 8s ease-in-out infinite;
}

.work__card-1 .work__block--num { animation-delay: 0s; }
.work__card-2 .work__block--num { animation-delay: 1.6s; }
.work__card-3 .work__block--num { animation-delay: 3.2s; }
.work__card-4 .work__block--num { animation-delay: 4.8s; }
.work__card-5 .work__block--num { animation-delay: 6.4s; }

@keyframes numSequencePulse {
  0%, 15%, 100% { 
    transform: scale(1);
    filter: drop-shadow(0 2px 8px rgba(55, 98, 252, 0.2));
  }
  7.5% { 
    transform: scale(1.15);
    filter: drop-shadow(0 4px 20px rgba(55, 98, 252, 0.6));
  }
}

/* Hover на номерах */
.work__card:hover .work__block--num {
  animation-play-state: paused;
  transform: scale(1.2);
  filter: drop-shadow(0 5px 25px rgba(55, 98, 252, 0.5));
}

/* === Иконки - парение (более выраженное) === */
.work__block--img {
  animation: workIconFloat 5s ease-in-out infinite;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.work__card-1 .work__block--img { animation-delay: 0.2s; }
.work__card-2 .work__block--img { animation-delay: 1s; }
.work__card-3 .work__block--img { animation-delay: 1.8s; }
.work__card-4 .work__block--img { animation-delay: 2.6s; }
.work__card-5 .work__block--img { animation-delay: 3.4s; }

@keyframes workIconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(1deg); }
  75% { transform: translateY(-3px) rotate(-1deg); }
}

/* Hover на иконках */
.work__card:hover .work__block--img {
  animation-play-state: paused;
  transform: scale(1.1);
  filter: drop-shadow(0 8px 20px rgba(55, 98, 252, 0.3));
}

/* === Стрелки - бегущий свет === */
.work__block--arrow {
  position: relative;
  animation: arrowLightPulse 8s ease-in-out infinite;
}

.work__block--arrow-1 { animation-delay: 0s; }
.work__block--arrow-2 { animation-delay: 2s; }
.work__block--arrow-3 { animation-delay: 4s; }
.work__block--arrow-4 { animation-delay: 6s; }

@keyframes arrowLightPulse {
  0%, 20%, 100% {
    opacity: 0.4;
    filter: brightness(0.8) grayscale(0.3);
  }
  10% {
    opacity: 1;
    filter: brightness(1.3) grayscale(0) drop-shadow(0 0 15px rgba(55, 98, 252, 0.8));
  }
}

/* === Заголовки карточек - градиент === */
.work__text--title {
  background: linear-gradient(
    120deg,
    #0E1A42 0%,
    #0E1A42 40%,
    #3b82f6 50%,
    #0E1A42 60%,
    #0E1A42 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: workCardTitleShine 6s linear infinite;
}

.work__card-1 .work__text--title { animation-delay: 0s; }
.work__card-2 .work__text--title { animation-delay: 1s; }
.work__card-3 .work__text--title { animation-delay: 2s; }
.work__card-4 .work__text--title { animation-delay: 3s; }
.work__card-5 .work__text--title { animation-delay: 4s; }

@keyframes workCardTitleShine {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* === Кнопка "Запустить систему" === */
.work__btn .btn-bl {
  animation: workBtnPulse 2.5s ease-in-out infinite;
}

@keyframes workBtnPulse {
  0%, 100% { 
    box-shadow: 0 4px 15px rgba(55, 98, 252, 0.3);
  }
  50% { 
    box-shadow: 0 8px 35px rgba(55, 98, 252, 0.5), 0 0 50px rgba(55, 98, 252, 0.2);
  }
}

.work__btn .btn-bl:hover {
  animation: none;
  transform: scale(1.05);
  box-shadow: 0 10px 40px rgba(55, 98, 252, 0.5);
}

/* === Каскадное появление === */
.work__card.reveal-init {
  opacity: 0;
  transform: translateY(40px);
}

.work__card.reveal-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* === Responsive === */
@media (max-width: 768px) {
  .work__card {
    animation: none;
  }
  
  .work__block--num,
  .work__block--img {
    animation: none;
  }
  
  .work__block--arrow {
    animation: arrowLightPulse 8s ease-in-out infinite;
  }
}


/* ========================================
   TRANSFORM SECTION - Было/Стало усиленные анимации
   ======================================== */

/* === Заголовок - градиент + парение === */
.transform__title {
  background: linear-gradient(
    120deg,
    #0E1A42 0%,
    #0E1A42 40%,
    #3b82f6 50%,
    #0E1A42 60%,
    #0E1A42 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: transformTitleShine 5s linear infinite, transformTitleFloat 6s ease-in-out infinite;
}

@keyframes transformTitleShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

/* === Карточки - парение === */
.transform__card {
  position: relative;
  animation: transformCardFloat 6s ease-in-out infinite;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}

.transform__card:nth-child(1) { animation-delay: 0s; }
.transform__card:nth-child(2) { animation-delay: 0.8s; }
.transform__card:nth-child(3) { animation-delay: 1.6s; }
.transform__card:nth-child(4) { animation-delay: 2.4s; }

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

.transform__card:hover {
  animation-play-state: paused;
  transform: translateY(-10px);
  box-shadow: 0 25px 60px rgba(55, 98, 252, 0.15);
}

/* === Разделительная линия внутри карточки === */
.transform__card::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(55, 98, 252, 0.3) 30%,
    rgba(139, 92, 246, 0.5) 50%,
    rgba(55, 98, 252, 0.3) 70%,
    transparent 100%
  );
  background-size: 100% 200%;
  animation: transformLinePulse 4s ease-in-out infinite;
  transform: translateX(-50%);
}

@keyframes transformLinePulse {
  0%, 100% { background-position: 0% 0%; opacity: 0.5; }
  50% { background-position: 0% 100%; opacity: 1; }
}

/* === БЫЛО - приглушённое === */
.transform__before {
  position: relative;
}

.transform__icon--before {
  opacity: 0.6;
  filter: grayscale(0.3);
  animation: beforeIconFade 4s ease-in-out infinite;
}

@keyframes beforeIconFade {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.7; }
}

.transform__before .transform__text {
  position: relative;
  color: #94a3b8;
}

/* Зачёркивание с анимацией */
.transform__before .transform__text::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ef4444, #f87171);
  animation: strikeThrough 3s ease-in-out infinite;
}

@keyframes strikeThrough {
  0%, 100% { opacity: 0.6; transform: scaleX(0.95); }
  50% { opacity: 1; transform: scaleX(1); }
}

/* === СТАЛО - яркое, живое === */
.transform__after {
  position: relative;
}

.transform__icon--after {
  animation: afterIconPulse 3s ease-in-out infinite;
}

.transform__card:nth-child(1) .transform__icon--after { animation-delay: 0s; }
.transform__card:nth-child(2) .transform__icon--after { animation-delay: 0.5s; }
.transform__card:nth-child(3) .transform__icon--after { animation-delay: 1s; }
.transform__card:nth-child(4) .transform__icon--after { animation-delay: 1.5s; }

@keyframes afterIconPulse {
  0%, 100% { 
    transform: scale(1);
    filter: drop-shadow(0 2px 8px rgba(55, 98, 252, 0.3));
  }
  50% { 
    transform: scale(1.08);
    filter: drop-shadow(0 4px 20px rgba(55, 98, 252, 0.6));
  }
}

/* Текст "Стало" с подсветкой */
.transform__after .transform__text {
  position: relative;
  font-weight: 600;
  color: #0E1A42;
}

.transform__after .transform__text::before {
  content: '';
  position: absolute;
  inset: -4px -8px;
  background: linear-gradient(120deg, transparent, rgba(55, 98, 252, 0.08), transparent);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: textHighlight 4s ease-in-out infinite;
  z-index: -1;
}

@keyframes textHighlight {
  0%, 100% { background-position: 200% center; opacity: 0; }
  50% { background-position: -200% center; opacity: 1; }
}

/* === Лейблы БЫЛО/СТАЛО === */
.transform__label {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.transform__before .transform__label {
  color: #94a3b8;
}

.transform__after .transform__label {
  color: #3762FC;
  animation: labelPulse 3s ease-in-out infinite;
}

@keyframes labelPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; text-shadow: 0 0 10px rgba(55, 98, 252, 0.3); }
}

/* === Shimmer по карточке === */
.transform__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: transformShimmer 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}

.transform__card:nth-child(1)::before { animation-delay: 0s; }
.transform__card:nth-child(2)::before { animation-delay: 2s; }
.transform__card:nth-child(3)::before { animation-delay: 4s; }
.transform__card:nth-child(4)::before { animation-delay: 6s; }

@keyframes transformShimmer {
  0%, 60%, 100% { left: -100%; opacity: 0; }
  65% { opacity: 1; }
  80% { left: 200%; opacity: 1; }
  81% { opacity: 0; }
}

/* === Каскадное появление === */
.transform__card.reveal-init {
  opacity: 0;
  transform: translateY(30px);
}

.transform__card.reveal-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* === Responsive === */
@media (max-width: 768px) {
  .transform__card {
    animation: none;
  }
  
  .transform__card::after {
    display: none;
  }
}

/* ============ TYPING CURSOR ============ */

.typing-cursor {
  display: inline;
  color: #3762FC;
  font-weight: 300;
  animation: blink 0.7s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typing-active {
  min-height: 1.5em;
}

/* ============ KEYS — Progress Bar ============ */

.keys__progress {
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(14, 26, 66, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.keys__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3762FC, #2563eb);
  border-radius: 3px;
  transition: width 0.05s linear;
}

/* ============ KEYS — Indicators (точки) ============ */

.keys__indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 1.5rem;
}

.keys__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(14, 26, 66, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
}

.keys__dot:hover {
  background: rgba(55, 98, 252, 0.4);
}

.keys__dot.active {
  width: 32px;
  border-radius: 5px;
  background: #3762FC;
}

/* ============ HIGHLIGHT NUMBER ============ */

.highlight-number {
  color: #2563eb;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 4px;
  transition: background 0.3s ease;
}

/* ============ REVEAL INIT/VISIBLE ============ */

.reveal-init {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

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

/* ========================================================
   WORKFLOW v2 — LIGHT ENTERPRISE DASHBOARD
   ======================================================== */

.wf {
  padding: 80px 0;
  background: #fff;
  overflow: hidden;
  position: relative;
}

.wf__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Header --- */
.wf__header {
  text-align: center;
  margin-bottom: 40px;
}

.wf__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.wf__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  animation: wfPulse 2s ease-in-out infinite;
}

@keyframes wfPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}

.wf__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0E1A42;
  margin-bottom: 12px;
  line-height: 1.2;
}

.wf__subtitle {
  font-size: 1rem;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

/* --- Dashboard shell --- */
.wf__dashboard {
  background: #f8f9ff;
  border: 1px solid rgba(14, 26, 66, 0.08);
  border-radius: 16px;
  overflow: hidden;
}

/* --- Status bar --- */
.wf__statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: rgba(14, 26, 66, 0.02);
  border-bottom: 1px solid rgba(14, 26, 66, 0.06);
  font-size: 0.75rem;
  color: rgba(14, 26, 66, 0.4);
  font-family: 'Courier New', monospace;
}

.wf__status-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wf__status-item strong {
  color: #0E1A42;
}

.wf__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.wf__status-dot--green {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16,185,129,0.6);
  animation: wfPulse 2s ease-in-out infinite;
}

.wf__clock {
  color: rgba(14, 26, 66, 0.3);
  font-variant-numeric: tabular-nums;
}

/* --- Flow grid --- */
.wf__flow {
  display: flex;
  align-items: stretch;
  padding: 32px 12px;
  gap: 0;
  overflow: hidden;
  flex-wrap: nowrap;
  justify-content: center;
}

/* --- Connectors --- */
.wf__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  position: relative;
  flex-shrink: 1;
}

.wf__connector-line {
  width: 100%;
  height: 2px;
  background: rgba(55, 98, 252, 0.15);
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}

.wf__connector-pulse {
  position: absolute;
  top: 50%;
  left: -6px;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3762FC;
  box-shadow: 0 0 8px rgba(55,98,252,0.5);
  animation: wfDataFlow 2.5s ease-in-out infinite;
}

@keyframes wfDataFlow {
  0% { left: -8px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% + 8px); opacity: 0; }
}

.wf__connector-label {
  font-size: 0.65rem;
  font-family: 'Courier New', monospace;
  color: #3762FC;
  margin-top: 8px;
  white-space: nowrap;
}

.wf__connector--final .wf__connector-pulse {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16,185,129,0.5);
}

/* --- Nodes --- */
.wf__node {
  flex: 1 1 0;
  min-width: 0;
  max-width: 210px;
  background: #fff;
  border: 1px solid rgba(14, 26, 66, 0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.4s ease;
  position: relative;
  box-shadow: 0 2px 12px rgba(14, 26, 66, 0.04);
}

.wf__node:hover {
  border-color: rgba(55, 98, 252, 0.2);
  background: #fff;
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(55, 98, 252, 0.1);
}

.wf__node-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wf__node-status {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  font-family: 'Courier New', monospace;
}

.wf__node-status--active {
  color: #10b981;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.2);
}

.wf__node-status--processing {
  color: #3762FC;
  background: rgba(55,98,252,0.12);
  border: 1px solid rgba(55,98,252,0.2);
  animation: wfStatusBlink 3s ease-in-out infinite;
}

@keyframes wfStatusBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.wf__node-status--done {
  color: #f59e0b;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.2);
}

.wf__node-id {
  font-size: 0.6rem;
  color: rgba(14, 26, 66, 0.2);
  font-family: 'Courier New', monospace;
  letter-spacing: 0.05em;
}

.wf__node-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0E1A42;
  line-height: 1.3;
}

.wf__node-desc {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.4;
}

/* --- Metric inside node --- */
.wf__node-metric {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(14, 26, 66, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wf__metric-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #3762FC;
  font-variant-numeric: tabular-nums;
}

.wf__metric-label {
  font-size: 0.7rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Stats row (for node 2) --- */
.wf__node-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(14, 26, 66, 0.06);
}

.wf__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wf__stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: #3762FC;
  font-family: 'Courier New', monospace;
}

.wf__stat-label {
  font-size: 0.65rem;
  color: #94a3b8;
  text-transform: uppercase;
}

.wf__stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(14, 26, 66, 0.08);
}

/* --- Funnel (for node 3) --- */
.wf__funnel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding-top: 12px;
}

.wf__funnel-bar {
  height: 18px;
  background: rgba(55, 98, 252, 0.15);
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  transition: width 1.5s ease;
  overflow: hidden;
}

.wf__funnel-bar span {
  font-size: 0.55rem;
  color: rgba(14, 26, 66, 0.5);
  white-space: nowrap;
  font-family: 'Courier New', monospace;
}

.wf__funnel-bar--mid {
  background: rgba(55, 98, 252, 0.25);
}

.wf__funnel-bar--hot {
  background: linear-gradient(90deg, rgba(55,98,252,0.4), rgba(16,185,129,0.4));
}

.wf__funnel-bar--hot span {
  color: #10b981;
  font-weight: 600;
}

/* --- Final node (CRM output) --- */
.wf__node--final {
  border-color: rgba(16,185,129,0.2);
  background: rgba(16,185,129,0.03);
}

.wf__node--final:hover {
  border-color: rgba(16,185,129,0.35);
  background: rgba(16,185,129,0.05);
  box-shadow: 0 8px 32px rgba(16,185,129,0.1);
}

.wf__node-result {
  margin-top: auto;
  padding: 10px;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.15);
  border-radius: 8px;
  text-align: center;
}

.wf__result-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: #10b981;
  display: block;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.wf__result-label {
  font-size: 0.7rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
  display: block;
}

/* --- Bottom metrics --- */
.wf__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 24px;
  border-top: 1px solid rgba(14, 26, 66, 0.06);
  background: rgba(14, 26, 66, 0.015);
}

.wf__bottom-stat {
  text-align: center;
}

.wf__bottom-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0E1A42;
  display: block;
  font-variant-numeric: tabular-nums;
}

.wf__bottom-label {
  font-size: 0.7rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
  display: block;
}

.wf__bottom-divider {
  width: 1px;
  height: 36px;
  background: rgba(14, 26, 66, 0.08);
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .wf__node {
    max-width: 180px;
    padding: 14px;
  }
  .wf__node-title { font-size: 0.85rem; }
  .wf__node-desc { font-size: 0.7rem; }
  .wf__connector { min-width: 24px; }
}

@media (max-width: 992px) {
  .wf__flow {
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
  }
  .wf__node {
    max-width: 360px;
    width: 100%;
  }
  .wf__connector {
    min-height: 32px;
    min-width: auto;
  }
  .wf__connector-line {
    width: 2px;
    height: 100%;
    min-height: 24px;
  }
  .wf__connector-pulse {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    animation: wfDataFlowV 2.5s ease-in-out infinite;
  }
  @keyframes wfDataFlowV {
    0% { top: -8px; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: calc(100% + 8px); opacity: 0; }
  }
  .wf__statusbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .wf__status-time { display: none; }
}

@media (max-width: 576px) {
  .wf__title { font-size: 1.75rem; }
  .wf__bottom { flex-direction: column; gap: 20px; }
  .wf__bottom-divider { width: 40px; height: 1px; }
  .wf__node { min-width: auto; }
}

/* ========================================================
   FORM BUTTON STATES
   ======================================================== */

.btn--success {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #fff !important;
  pointer-events: none;
}

.btn--error {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  animation: btnShake 0.4s ease;
}

@keyframes btnShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}