/* PROДАТЬ - Clean Simple Design */
/* ================================ */

/* ========================================
   CSS CUSTOM PROPERTIES
========================================= */
:root {
    /* Colors */
    --color-background: #0a0a0a;
    --color-surface: #1a1a1a;
    --color-surface-elevated: #252525;
    --color-border: #333333;
    --color-primary: #02B78C;
    --color-secondary: #00FFA1;
    --color-accent: #e1ff00;
    --color-text-primary: #ffffff;
    --color-text-secondary: #e6e1db;
    --color-text-muted: #a0a0a0;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-base: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Animation */
    --duration-fast: 0.15s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;
}

/* ========================================
   RESET & BASE STYLES
========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Премиум smooth scroll с momentum */
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    scroll-padding-top: 0;
    overflow-y: auto;
    overflow-x: hidden;

    /* Ускорение прокрутки для премиум ощущения */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none; /* Убирает bounce на краях */
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ========================================
   SLIDE SECTIONS - SLSBMB STYLE
========================================= */
/* Все основные секции = слайды */
.hero,
.intro-section,
.industries-section,
.why-outsource-section,
.impact-section,
.clients-section,
.how-it-works-section,
.sales-system-section,
.pricing-section,
.contact-section {
    scroll-snap-align: start;
    scroll-snap-stop: normal; /* Плавный скролл между слайдами */
    position: relative;
    min-height: 100vh; /* Каждая секция = полный экран как у SLSBMB */
    display: flex;
    align-items: center; /* Центрируем контент вертикально */
    justify-content: center;
}

/* Hero секция - дополнительные стили */
.hero {
    /* min-height и display уже заданы выше для всех секций */
}

/* 3D Math визуализация - профессиональная */
.math-3d-container {
    position: absolute;
    right: 8%;
    top: 40%;
    transform: translateY(-50%);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 600;
    line-height: 1.8;
    opacity: 0.25;
    pointer-events: none;
    z-index: 1;
    perspective: 2000px;
}

.math-3d-line {
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    white-space: nowrap;
    margin-bottom: 0.8rem;
    transform-style: preserve-3d;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    letter-spacing: -0.02em;
    will-change: transform;
    position: relative;
}

/* Три состояния */
.math-stagnation {
    color: #888888;
    transform: translateZ(0) rotateX(0deg);
    animation: float3d 8s ease-in-out infinite;
}

.math-decline {
    color: #FF4444;
    transform: translateZ(20px) rotateX(5deg);
    animation: float3d 8s ease-in-out infinite 0.5s;
}

.math-growth {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: translateZ(40px) rotateX(10deg);
    animation: float3d 8s ease-in-out infinite 1s, mathPulse 3s ease-in-out infinite;
    font-weight: 700;
}

/* Пульсация для 1.01 линии */
@keyframes mathPulse {
    50% {
        filter: brightness(1.2) drop-shadow(0 0 25px rgba(0, 255, 161, 0.6));
    }
}

/* Контейнер для частиц X */
.x-particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

/* Умная частица X с JavaScript управлением */
.x-particle-smart {
    position: absolute;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    transform: scale(0.3) rotate(0deg);
    transition: all 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: drop-shadow(0 0 12px rgba(0, 255, 161, 0.6));
    pointer-events: none;
    z-index: 10;
}

/* Анимация импакта при попадании в цель - только свечение */
@keyframes impactPulse {
    0% {
        filter: brightness(1) drop-shadow(0 0 10px rgba(0, 255, 161, 0.3));
    }
    50% {
        filter: brightness(1.8) drop-shadow(0 0 40px rgba(0, 255, 161, 1)) drop-shadow(0 0 60px rgba(0, 255, 161, 0.6));
    }
    100% {
        filter: brightness(1) drop-shadow(0 0 10px rgba(0, 255, 161, 0.3));
    }
}

/* Элементы формулы */
.math-base {
    font-size: 1em;
    font-weight: 700;
}

.math-power {
    font-size: 0.55em;
    vertical-align: super;
    opacity: 0.7;
    font-weight: 500;
}

.math-eq {
    opacity: 0.4;
    margin: 0 0.4em;
    font-weight: 400;
}

.math-result {
    font-weight: 700;
    text-shadow: 0 0 20px currentColor;
}

/* Продвинутая 3D анимация */
@keyframes float3d {
    25% {
        transform: translateZ(15px) rotateX(-3deg) translateY(-8px);
    }
    50% {
        transform: translateZ(30px) rotateX(3deg) translateY(0);
    }
    75% {
        transform: translateZ(15px) rotateX(-2deg) translateY(8px);
    }
}

/* Hover эффект на всем контейнере */
.hero:hover .math-3d-container {
    opacity: 0.35;
}

.hero:hover .math-3d-line {
    transform: scale(1.05);
}

/* Планшеты - уменьшаем */
@media (max-width: 1024px) {
    .math-3d-container {
        right: 5%;
        font-size: 0.85em;
    }
}

/* Мобильные - скрываем полностью */
@media (max-width: 768px) {
    .math-3d-container {
        display: none;
    }

    .x-particles-container {
        display: none;
    }

    /* Адаптация загрузочного экрана */
    .loading-logo-new {
        margin-bottom: 2rem;
        gap: 0.35rem;
        max-width: 250px;
        padding-left: 0.75rem;
    }

    .logo-text-new {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
    }

    .rotating-x {
        font-size: clamp(2.25rem, 9vw, 2.75rem);
    }

    .loading-progress {
        max-width: 250px;
        gap: 0.6rem;
    }

    .loading-text {
        font-size: clamp(0.875rem, 3.5vw, 1rem);
    }
}

/* ========================================
   LOADING SCREEN - SLSBMB STYLE
========================================= */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at center, #1a1a1a 0%, #0a0a0a 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    filter: blur(10px);
}

/* Particle Canvas Background */
.particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Main Loading Content */
.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
    height: 100vh;
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Logo with Glow Effect - ВСЕГДА В ЦЕНТРЕ (старая версия - скрыто) */
.loading-logo {
    margin: 0;
    perspective: 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: none; /* Скрыта старая версия */
}

.logo-glow {
    display: flex;
    gap: 0.1em;
    font-size: var(--text-5xl);
    font-weight: 900;
    letter-spacing: -0.02em;
}

.logo-letter {
    display: inline-block;
    color: var(--color-text-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.logo-letter.accent {
    color: var(--color-text-primary);
}

/* Новый логотип с вращающимся X */
.loading-logo-new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    perspective: 1000px;
    margin-bottom: 2.5rem;
    width: 100%;
    max-width: 300px;
    /* Компенсация визуального смещения из-за большого X */
    padding-left: 1rem;
}

.logo-text-new {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    line-height: 1;
}

/* Вращающийся X с свечением */
.rotating-x {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rotateAndGlow 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(0, 255, 161, 0.6));
    display: inline-block;
    transform-style: preserve-3d;
    line-height: 1;
    flex-shrink: 0;
}

/* Анимация вращения и свечения */
@keyframes rotateAndGlow {
    0% {
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 0 20px rgba(0, 255, 161, 0.6));
    }
    50% {
        transform: rotate(180deg) scale(1.1);
        filter: drop-shadow(0 0 40px rgba(0, 255, 161, 1)) drop-shadow(0 0 60px rgba(0, 255, 161, 0.6));
    }
    100% {
        transform: rotate(360deg) scale(1);
        filter: drop-shadow(0 0 20px rgba(0, 255, 161, 0.6));
    }
}



/* Красивая строка загрузки */
.loading-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 300px;
}

.loading-text {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--color-text-secondary);
    letter-spacing: 0.05em;
    animation: textPulse 2s ease-in-out infinite;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Progress Bar */
.progress-bar {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg,
        var(--color-primary) 0%,
        var(--color-secondary) 50%,
        var(--color-primary) 100%);
    border-radius: 8px;
    width: 0%;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 0 20px var(--color-primary);
}

.progress-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(2, 183, 140, 0.8) 50%,
        transparent 100%);
    animation: shimmer 2s ease-in-out infinite;
    opacity: 0.7;
}

/* Loading Dots */
.loading-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.dot {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    animation: dotPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px var(--color-primary);
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.3s; }
.dot:nth-child(3) { animation-delay: 0.6s; }

@keyframes textPulse {
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(300%); opacity: 0; }
}

@keyframes dotPulse {
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.progress-ring {
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 10px var(--color-primary));
}

.progress-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 2;
}

.progress-ring-fill {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 339.292;
    stroke-dashoffset: 339.292;
    animation: drawCircle 4s ease-in-out infinite;
    filter: drop-shadow(0 0 5px var(--color-primary));
}

@keyframes drawCircle {
    0% {
        stroke-dashoffset: 339.292;
        stroke: var(--color-primary);
    }
    50% {
        stroke-dashoffset: 0;
        stroke: var(--color-secondary);
    }
    100% {
        stroke-dashoffset: 339.292;
        stroke: var(--color-accent);
    }
}

/* Central Pulsing Dot */
.loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pulse-dot {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, var(--color-primary), var(--color-secondary));
    border-radius: 50%;
    animation: pulseCore 2s ease-in-out infinite;
    box-shadow: 0 0 20px var(--color-primary);
}

@keyframes pulseCore {
    50% {
        transform: scale(1.5);
        box-shadow: 0 0 40px var(--color-primary), 0 0 60px var(--color-secondary);
    }
}


@keyframes textGlow {
    50% {
        color: var(--color-primary);
        text-shadow: 0 0 20px var(--color-primary);
    }
}

/* Section title with glow effect like Powered by experience */
.section-title-glow {
    animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(2, 183, 140, 0.3);
    }
    50% {
        color: var(--color-primary);
        text-shadow: 0 0 20px rgba(2, 183, 140, 0.8),
                     0 0 30px rgba(0, 255, 161, 0.6),
                     0 0 40px rgba(2, 183, 140, 0.4);
    }
}

/* Tech Lines */
.tech-lines {
    display: none;
}

.tech-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    animation: techScan 3s ease-in-out infinite;
}

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

@keyframes techScan {
    50% {
        opacity: 1;
        transform: scaleX(1);
        box-shadow: 0 0 10px var(--color-primary);
    }
}

/* Floating Hexagons */
.hex-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}


/* ========================================
   SIMPLE BACKGROUND
========================================= */
.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Согласуем с liquid-glass.css */
    overflow: visible; /* НЕ обрезаем частицы! */
    pointer-events: none;
}

.floating-element {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    /* opacity управляется через liquid-glass.css */
    top: 0; /* Стартовая позиция - анимация сама задаёт translateY */
    animation: float 40s linear infinite; /* Замедлили с 25s до 40s */
    will-change: transform;
    /* Гарантируем видимость */
    visibility: visible !important;
    display: block !important;
}

/* Различные позиции для всех 12 элементов */
.floating-element:nth-child(1) { left: 5%; animation-delay: 0s; }
.floating-element:nth-child(2) { left: 15%; animation-delay: -3s; }
.floating-element:nth-child(3) { left: 25%; animation-delay: -6s; }
.floating-element:nth-child(4) { left: 35%; animation-delay: -9s; }
.floating-element:nth-child(5) { left: 45%; animation-delay: -12s; }
.floating-element:nth-child(6) { left: 55%; animation-delay: -15s; }
.floating-element:nth-child(7) { left: 65%; animation-delay: -18s; }
.floating-element:nth-child(8) { left: 75%; animation-delay: -21s; }
.floating-element:nth-child(9) { left: 85%; animation-delay: -24s; }
.floating-element:nth-child(10) { left: 12%; animation-delay: -2s; }
.floating-element:nth-child(11) { left: 68%; animation-delay: -8s; }
.floating-element:nth-child(12) { left: 92%; animation-delay: -14s; }

/* Дополнительные плавающие элементы (13-18) - оптимальное количество */
.floating-element:nth-child(13) { left: 3%; width: 8px; height: 8px; animation-delay: -5s; }
.floating-element:nth-child(14) { left: 18%; width: 10px; height: 10px; animation-delay: -11s; }
.floating-element:nth-child(15) { left: 28%; width: 6px; height: 6px; animation-delay: -17s; }
.floating-element:nth-child(16) { left: 42%; width: 9px; height: 9px; animation-delay: -22s; }
.floating-element:nth-child(17) { left: 72%; width: 12px; height: 12px; animation-delay: -28s; }
.floating-element:nth-child(18) { left: 88%; width: 7px; height: 7px; animation-delay: -34s; }

@keyframes float {
    0% {
        transform: translateY(120vh) scale(1); /* Старт далеко ниже экрана */
    }
    100% {
        transform: translateY(-30vh) scale(1); /* Финиш далеко выше экрана */
    }
}

/* ========================================
   NAVIGATION
========================================= */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    transition: background var(--duration-normal) ease;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-base) var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.logo-text {
    font-size: var(--text-xl);
    font-weight: 900;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

.logo-asterisk {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: var(--text-lg);
    animation: subtitlePulse 2s ease-in-out infinite;
    display: inline-block;
}

.nav-menu {
    display: flex;
    gap: var(--space-xl);
    list-style: none;
}

.nav-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--duration-normal) ease;
    position: relative;
}

.nav-link:hover {
    color: var(--color-primary);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--duration-normal) ease;
}

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

.nav-hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.nav-hamburger span {
    width: 24px;
    height: 2px;
    background: var(--color-text-primary);
    transition: all var(--duration-normal) ease;
}

/* ========================================
   HERO SECTION
========================================= */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: var(--space-lg) 0; /* Умеренный отступ для PC - комфортное расстояние от меню */
    position: relative;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.hero-content {
    max-width: 1000px; /* Увеличено для горизонтального размещения badges */
}

/* Контейнер для всех badges - горизонтальное размещение только на PC */
/* СОХРАНЁННЫЕ СТИЛИ ДЛЯ HERO-BADGES (временно скрыты) */
.hero-badges {
    display: flex !important; /* Оставляем flex для сохранения layout */
    opacity: 0 !important; /* Полностью прозрачные */
    pointer-events: none !important; /* Нельзя кликнуть */
    flex-direction: row !important; /* Горизонтально для PC */
    flex-wrap: nowrap !important;
    gap: var(--space-base);
    margin-bottom: var(--space-xl);
    margin-top: calc(-1.5 * var(--space-xl)); /* Умеренно поднимаем badges ближе к меню на PC */
    justify-content: center;
    width: 100%;
    align-items: center;
}

/* Мобильная версия - скрываем badges и добавляем отступы */
@media (max-width: 992px) {
    .hero-badges,
    .hero-badges *,
    div.hero-badges {
        display: none !important; /* Полностью скрываем на мобильных и планшетах */
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Увеличиваем отступы hero section на мобильных */
    .hero {
        padding: var(--space-4xl) 0 var(--space-3xl) 0; /* Больше отступ сверху для мобильных */
        padding-top: calc(80px + var(--space-3xl)); /* Отступ от навигации + дополнительный отступ */
    }

    .hero-container {
        padding: 0 var(--space-base); /* Боковые отступы на мобильных */
    }
}

.hero-badge {
    display: inline-flex !important;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid transparent;
    padding: var(--space-sm) var(--space-base);
    border-radius: 50px;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 44px;
    height: auto;
    position: relative;
    overflow: hidden;
    background-clip: padding-box;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05);
}

/* Тонкий gradient border для badges */
.hero-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(2, 183, 140, 0.3), rgba(255, 255, 255, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Ensure content stays on top */
.hero-badge span {
    position: relative;
    z-index: 1;
}

/* Hover эффект для badges */
.hero-badge:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.hero-title {
    font-size: var(--text-5xl);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: var(--space-xl);
    letter-spacing: -0.02em;
}

.title-line {
    display: block;
}

.title-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: subtitlePulse 2s ease-in-out infinite;
}

.hero-subtitle {
    font-size: var(--text-xl);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2xl);
    line-height: 1.6;
}

/* Выделение текста в subtitle с пульсацией - такой же градиент как у заголовка */
.subtitle-highlight {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    animation: subtitlePulse 2s ease-in-out infinite;
}

@keyframes subtitlePulse {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(0, 255, 161, 0.5));
    }
    50% {
        opacity: 0.9;
        filter: drop-shadow(0 0 20px rgba(0, 255, 161, 0.8));
    }
}

.hero-actions {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.btn-primary, .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-base) var(--space-xl);
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--duration-normal) ease;
    border: 1px solid transparent;
}

.btn-primary {
    background: rgba(2, 183, 140, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-text-primary);
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(2, 183, 140, 0.2);
}

/* Gradient border эффект */
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    padding: 2px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-accent));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderGradient 3s linear infinite;
}

/* Glossy shine эффект при hover */
.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 30%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.1) 70%,
        transparent 100%
    );
    transform: translateX(-150%);
    transition: transform 0.6s ease;
}

.btn-primary:hover::after {
    transform: translateX(150%);
}

.btn-primary:hover {
    background: rgba(2, 183, 140, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Gradient border animation */
@keyframes borderGradient {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Ensure text stays on top */
.btn-primary span {
    position: relative;
    z-index: 1;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-text-primary);
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05);
}

/* Gradient border для secondary */
.btn-secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(2, 183, 140, 0.3), rgba(255, 255, 255, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Glossy shine для secondary */
.btn-secondary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 30%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.08) 70%,
        transparent 100%
    );
    transform: translateX(-150%);
    transition: transform 0.6s ease;
}

.btn-secondary:hover::after {
    transform: translateX(150%);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Ensure text stays on top для secondary */
.btn-secondary span {
    position: relative;
    z-index: 1;
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-3d-object {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, rgba(2, 183, 140, 0.1), rgba(0, 255, 161, 0.05));
    border: 1px solid rgba(2, 183, 140, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero-3d-object::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(2, 183, 140, 0.1), transparent);
    animation: shimmer 3s ease-in-out infinite;
}


/* ========================================
   SECTIONS
========================================= */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

section {
    padding: var(--space-3xl) 0;
}

.section-title {
    font-size: var(--text-4xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-3xl);
    letter-spacing: -0.02em;
}

/* Reveal Animation */
/* [data-reveal] анимации управляются через GSAP - старые CSS стили удалены */

/* ========================================
   SPLIT SCREEN SECTION
========================================= */

/* ========================================
   ВТОРОЙ СЛАЙД: TWO BLOCKS SECTION (ИЗОЛЯЦИЯ)
   ======================================== */
.two-blocks-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: var(--space-3xl) var(--space-3xl); /* Отступы как у других секций */
    position: relative;
    background: var(--color-bg-primary);
    overflow: hidden;
}

.two-blocks-section .split-screen-container {
    width: 100%;
    height: calc(100vh - calc(var(--space-3xl) * 2));
    display: grid;
    grid-template-columns: 76% 22%;
    gap: 2%;
    overflow: visible;
    align-items: start; /* Выравнивание по верхнему краю для одинаковой baseline */
}

/* Left Side - Dark with Animation + Liquid Glass */
.two-blocks-section .split-left {
    background: rgba(26, 26, 26, 0.3);
    backdrop-filter: blur(16px) saturate(200%);
    -webkit-backdrop-filter: blur(16px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    text-align: center;
}

.two-blocks-section .split-left::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(2, 183, 140, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.two-blocks-section .split-left .split-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 90%; /* Ограничиваем ширину чтобы не вылазил */
    margin: 0 auto; /* Центрируем */
}

.two-blocks-section .split-title {
    font-size: var(--text-4xl);
    font-weight: 900;
    color: var(--color-text-primary);
    margin-bottom: var(--space-base);
    line-height: 1.2;
    word-wrap: break-word; /* Переносим длинные слова */
    overflow-wrap: break-word;
}

.two-blocks-section .split-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2xl);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Powered by experience title */
.powered-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3xl);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.experience-glow {
    color: var(--color-primary);
    font-weight: 800;
    animation: experiencePulse 2s ease-in-out infinite;
    text-shadow:
        0 0 10px rgba(2, 183, 140, 0.8),
        0 0 20px rgba(0, 255, 161, 0.6),
        0 0 30px rgba(2, 183, 140, 0.4);
}

@keyframes experiencePulse {
    50% {
        opacity: 0.8;
        text-shadow:
            0 0 15px rgba(2, 183, 140, 1),
            0 0 30px rgba(0, 255, 161, 0.8),
            0 0 45px rgba(2, 183, 140, 0.6);
    }
}

/* Animation Container */
.animation-container {
    width: 100%;
    min-height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2xl) 0;
}

/* Logo Start - PROДАТЬ× (МАКСИМАЛЬНО БОЛЬШОЙ) */
.logo-start {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 18vw; /* Используем viewport width для адаптивности */
    font-weight: 900;
    z-index: 10;
    position: absolute;
    left: 2%; /* Исправлено с -2% на 2% из-за gap между блоками */
    top: 50%;
    transform: translateY(-50%);
}

.logo-text {
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

.logo-x {
    color: var(--color-primary);
    font-size: 3rem; /* В 2 раза меньше чем было 6rem */
    display: inline-block;
    text-shadow:
        0 0 10px rgba(2, 183, 140, 0.8),
        0 0 20px rgba(0, 255, 161, 0.6);
    /* Статичный - без анимации */
}

/* Движущиеся × символы от логотипа к стрелке */
.x-flow {
    position: absolute;
    left: 12%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 1.5rem;
    z-index: 5;
}

.x-symbol {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--color-primary);
    animation: xMove 2s ease-in-out infinite;
    text-shadow:
        0 0 12px rgba(2, 183, 140, 1),
        0 0 24px rgba(0, 255, 161, 0.8);
}

.x-1 {
    animation-delay: 0s;
}

.x-2 {
    animation-delay: 0.3s;
}

.x-3 {
    animation-delay: 0.6s;
}

@keyframes xMove {
    0% {
        opacity: 0;
        transform: translateX(0) rotate(0deg);
    }
    20% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    80% {
        opacity: 0;
        transform: translateX(35px) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translateX(35px) rotate(180deg);
    }
}

/* Animated Arrow from Logo to Circle */
.wave-logo-to-circle {
    position: absolute;
    left: 20%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    animation: arrowPulse 2s ease-in-out infinite;
}

@keyframes arrowPulse {
    50% {
        opacity: 1;
        transform: translateY(-50%) translateX(10px);
    }
}

/* Контейнер для всех символов - правее стрелки */
.symbols-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    z-index: 3;
}

/* Внешний круг символов - 12 символов */
.symbols-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotateClockwise 25s linear infinite;
}

/* Средний круг символов - 8 символов */
.symbols-middle {
    position: absolute;
    width: 65%;
    height: 65%;
    left: 17.5%;
    top: 17.5%;
    animation: rotateCounterClockwise 18s linear infinite;
}

/* Внутренний круг символов - 6 символов */
.symbols-inner {
    position: absolute;
    width: 35%;
    height: 35%;
    left: 32.5%;
    top: 32.5%;
    animation: rotateClockwise 12s linear infinite;
}

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

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

.symbol {
    position: absolute;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--color-primary);
    animation: symbolPulse 2s ease-in-out infinite;
    text-shadow:
        0 0 12px rgba(2, 183, 140, 1),
        0 0 24px rgba(0, 255, 161, 0.8),
        0 0 36px rgba(2, 183, 140, 0.6);
    user-select: none;
    line-height: 1;
}

/* Расположение символов внешнего круга (12 символов) */
.symbols-outer .symbol:nth-child(1) { top: 0%; left: 50%; transform: translate(-50%, -50%); }
.symbols-outer .symbol:nth-child(2) { top: 7%; left: 75%; transform: translate(-50%, -50%); animation-delay: 0.2s; }
.symbols-outer .symbol:nth-child(3) { top: 25%; left: 93%; transform: translate(-50%, -50%); animation-delay: 0.4s; }
.symbols-outer .symbol:nth-child(4) { top: 50%; left: 100%; transform: translate(-50%, -50%); animation-delay: 0.6s; }
.symbols-outer .symbol:nth-child(5) { top: 75%; left: 93%; transform: translate(-50%, -50%); animation-delay: 0.8s; }
.symbols-outer .symbol:nth-child(6) { top: 93%; left: 75%; transform: translate(-50%, -50%); animation-delay: 1s; }
.symbols-outer .symbol:nth-child(7) { top: 100%; left: 50%; transform: translate(-50%, -50%); animation-delay: 1.2s; }
.symbols-outer .symbol:nth-child(8) { top: 93%; left: 25%; transform: translate(-50%, -50%); animation-delay: 1.4s; }
.symbols-outer .symbol:nth-child(9) { top: 75%; left: 7%; transform: translate(-50%, -50%); animation-delay: 1.6s; }
.symbols-outer .symbol:nth-child(10) { top: 50%; left: 0%; transform: translate(-50%, -50%); animation-delay: 1.8s; }
.symbols-outer .symbol:nth-child(11) { top: 25%; left: 7%; transform: translate(-50%, -50%); animation-delay: 2s; }
.symbols-outer .symbol:nth-child(12) { top: 7%; left: 25%; transform: translate(-50%, -50%); animation-delay: 2.2s; }

/* Расположение символов среднего круга (8 символов) */
.symbols-middle .symbol:nth-child(1) { top: 0%; left: 50%; transform: translate(-50%, -50%); animation-delay: 0.3s; }
.symbols-middle .symbol:nth-child(2) { top: 15%; left: 85%; transform: translate(-50%, -50%); animation-delay: 0.6s; }
.symbols-middle .symbol:nth-child(3) { top: 50%; left: 100%; transform: translate(-50%, -50%); animation-delay: 0.9s; }
.symbols-middle .symbol:nth-child(4) { top: 85%; left: 85%; transform: translate(-50%, -50%); animation-delay: 1.2s; }
.symbols-middle .symbol:nth-child(5) { top: 100%; left: 50%; transform: translate(-50%, -50%); animation-delay: 1.5s; }
.symbols-middle .symbol:nth-child(6) { top: 85%; left: 15%; transform: translate(-50%, -50%); animation-delay: 1.8s; }
.symbols-middle .symbol:nth-child(7) { top: 50%; left: 0%; transform: translate(-50%, -50%); animation-delay: 2.1s; }
.symbols-middle .symbol:nth-child(8) { top: 15%; left: 15%; transform: translate(-50%, -50%); animation-delay: 2.4s; }

/* Расположение символов внутреннего круга (6 символов) */
.symbols-inner .symbol:nth-child(1) { top: 0%; left: 50%; transform: translate(-50%, -50%); animation-delay: 0.5s; }
.symbols-inner .symbol:nth-child(2) { top: 25%; left: 93%; transform: translate(-50%, -50%); animation-delay: 0.8s; }
.symbols-inner .symbol:nth-child(3) { top: 75%; left: 93%; transform: translate(-50%, -50%); animation-delay: 1.1s; }
.symbols-inner .symbol:nth-child(4) { top: 100%; left: 50%; transform: translate(-50%, -50%); animation-delay: 1.4s; }
.symbols-inner .symbol:nth-child(5) { top: 75%; left: 7%; transform: translate(-50%, -50%); animation-delay: 1.7s; }
.symbols-inner .symbol:nth-child(6) { top: 25%; left: 7%; transform: translate(-50%, -50%); animation-delay: 2s; }

@keyframes symbolPulse {
    50% {
        opacity: 0.7;
        text-shadow:
            0 0 18px rgba(2, 183, 140, 1),
            0 0 36px rgba(0, 255, 161, 1),
            0 0 54px rgba(2, 183, 140, 0.8);
    }
}

/* Waves - волнистые линии по диагонали (бегущая волна) */
.wave {
    position: absolute;
    z-index: 4;
}

.wave-top {
    left: 60%;
    top: 18%;
    transform: rotate(-28deg);
    transform-origin: left center;
}

.wave-bottom {
    left: 60%;
    top: 64%;
    transform: rotate(28deg);
    transform-origin: left center;
}

.wave-path {
    stroke-dasharray: 10 5;
    animation: dashFlow 1s linear infinite;
}

.wave-bottom .wave-path {
    animation: dashFlow 1s linear infinite reverse;
}

@keyframes dashFlow {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 15;
    }
}

/* Money End - Купюры точно у концов волн */
.money-end {
    position: absolute;
    right: 3%;
    top: -5%;
    display: flex;
    flex-direction: column;
    gap: 22rem;
    z-index: 10;
}

/* ============================================ */
/* RIGHT SIDE - Заголовок и анимация мозга */
/* ============================================ */

.right-heading {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: 3rem;
}

.glow-text {
    color: var(--color-primary);
    animation: textGlow 2s ease-in-out infinite;
    text-shadow:
        0 0 20px rgba(2, 183, 140, 0.8),
        0 0 40px rgba(0, 255, 161, 0.6);
}

@keyframes textGlow {
    50% {
        text-shadow:
            0 0 30px rgba(2, 183, 140, 1),
            0 0 60px rgba(0, 255, 161, 0.8),
            0 0 80px rgba(2, 183, 140, 0.6);
    }
}

/* Анимация мозга */
.brain-animation {
    max-width: 300px;
    margin: 0 auto 4rem;
}

.brain-svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(2, 183, 140, 0.3));
}

.brain-outline {
    animation: brainPulse 3s ease-in-out infinite;
}

@keyframes brainPulse {
    50% {
        stroke-width: 3;
        stroke: rgba(0, 255, 161, 0.8);
    }
}

/* Импульсы (точки) */
.pulse {
    animation: pulseBeat 2s ease-in-out infinite;
}

.pulse-1 { animation-delay: 0s; }
.pulse-2 { animation-delay: 0.3s; }
.pulse-3 { animation-delay: 0.6s; }
.pulse-4 { animation-delay: 0.9s; }
.pulse-5 { animation-delay: 1.2s; }
.pulse-6 { animation-delay: 1.5s; }

@keyframes pulseBeat {
    50% {
        r: 5;
        opacity: 1;
        fill: rgba(0, 255, 161, 1);
    }
}

/* Связи между импульсами */
.connection {
    animation: connectionFlow 2s ease-in-out infinite;
}

@keyframes connectionFlow {
    50% {
        opacity: 0.7;
        stroke-width: 2;
    }
}

/* Место под текст */
.right-text-space {
    min-height: 200px;
    padding: 2rem 0;
}

.ruble-bill {
    width: 90px;
    height: 60px;
    background: linear-gradient(135deg, rgba(2, 183, 140, 0.3), rgba(0, 255, 161, 0.3));
    border: 3px solid var(--color-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: billFloat 3s ease-in-out infinite;
    box-shadow:
        0 0 30px rgba(2, 183, 140, 0.6),
        inset 0 0 15px rgba(0, 255, 161, 0.3);
}

.ruble-symbol {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--color-primary);
    text-shadow:
        0 0 10px rgba(2, 183, 140, 1),
        0 0 20px rgba(0, 255, 161, 0.8);
}

.ruble-bill {
    width: 80px;
    height: 50px;
    background: linear-gradient(135deg, rgba(2, 183, 140, 0.2), rgba(0, 255, 161, 0.2));
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: billFloat 3s ease-in-out infinite;
    box-shadow:
        0 0 20px rgba(2, 183, 140, 0.4),
        inset 0 0 10px rgba(0, 255, 161, 0.2);
}

.ruble-bill:nth-child(2) {
    animation-delay: 1.5s;
}

@keyframes billFloat {
    25% {
        transform: translateY(-10px) rotate(5deg);
    }
    75% {
        transform: translateY(10px) rotate(-5deg);
    }
}

.ruble-symbol {
    font-size: var(--text-3xl);
    font-weight: 900;
    color: var(--color-primary);
    text-shadow:
        0 0 10px rgba(2, 183, 140, 0.8),
        0 0 20px rgba(0, 255, 161, 0.6);
    animation: rubleGlow 2s ease-in-out infinite;
}

@keyframes rubleGlow {
    50% {
        text-shadow:
            0 0 20px rgba(2, 183, 140, 1),
            0 0 30px rgba(0, 255, 161, 0.8),
            0 0 40px rgba(2, 183, 140, 0.6);
    }
}

/* Right Side - Light with Content + Enhanced Liquid Glass */
.two-blocks-section .split-right {
    background: rgba(26, 26, 26, 0.3);
    backdrop-filter: blur(16px) saturate(200%);
    -webkit-backdrop-filter: blur(16px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    position: relative;
    text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 40px rgba(2, 183, 140, 0.1);
    overflow: visible; /* КРИТИЧНО: не обрезать свечение цифр */
}

/* Subtle glow effect */
.two-blocks-section .split-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(2, 183, 140, 0.05) 50%,
        rgba(0, 255, 161, 0.05) 100%
    );
    pointer-events: none;
    opacity: 0.5;
    border-radius: 24px; /* Подстраиваем под родителя */
}

.two-blocks-section .split-right .split-content {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    overflow: visible; /* Не обрезать свечение */
}

.two-blocks-section .split-image {
    width: 100%;
    max-width: 100%;
    margin: 0 auto var(--space-base) auto;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: var(--space-base);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.diagram-img {
    width: 100%;
    height: auto;
    display: block;
}

.two-blocks-section .split-text {
    color: var(--color-text-primary);
    overflow: visible; /* КРИТИЧНО: не обрезать свечение цифр */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--space-2xl);
}

.two-blocks-section .split-heading {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--color-text-primary); /* Белый текст */
    margin-bottom: var(--space-sm);
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Контраст для читаемости */
}

.two-blocks-section .split-description {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-secondary); /* Серый текст для glass */
    margin-bottom: var(--space-sm);
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.highlight-text {
    color: var(--color-primary);
    font-weight: 600;
    position: relative;
}

.highlight-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

/* Metrics List */
.two-blocks-section .split-metrics {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    margin-top: 0;
    list-style: none;
    padding: 0 0 14px 0; /* Точная подстройка для идеального выравнивания с левым блоком */
    width: 100%;
    overflow: visible; /* Не обрезать свечение */
}

.metric-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: visible; /* Не обрезать свечение */
}

/* Контейнер для цифры и символа */
.metric-number {
    display: flex;
    align-items: baseline;
    justify-content: center; /* Центрируем цифру + символ как единое целое */
    gap: 4px;
    overflow: visible; /* Не обрезать свечение */
}

.metric-value, .metric-prefix {
    font-size: var(--text-4xl);
    font-weight: 900;
    color: var(--color-primary);
    animation: metricPulse 2s ease-in-out infinite;
    text-shadow:
        0 0 10px rgba(2, 183, 140, 0.39),
        0 0 20px rgba(0, 255, 161, 0.29),
        0 0 30px rgba(2, 183, 140, 0.20);
    line-height: 1;
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
}

@keyframes metricPulse {
    50% {
        opacity: 0.8;
        text-shadow:
            0 0 15px rgba(2, 183, 140, 0.49),
            0 0 30px rgba(0, 255, 161, 0.39),
            0 0 45px rgba(2, 183, 140, 0.29);
    }
}

.metric-value-100 {
    letter-spacing: 0;
}

.metric-value-100 .digit {
    display: inline-block;
    margin: 0 0.02em;
}

.metric-value:hover {
    text-shadow:
        0 0 15px rgba(2, 183, 140, 1),
        0 0 30px rgba(0, 255, 161, 0.8),
        0 0 45px rgba(2, 183, 140, 0.6);
    transform: scale(1.05);
}

.metric-label {
    font-size: var(--text-xs); /* Компактный текст под цифрой */
    color: var(--color-text-secondary);
    text-transform: none;
    letter-spacing: 0.02em;
    text-align: center;
    opacity: 0.85;
    line-height: 1.3;
    max-width: 180px; /* Увеличено для текста "рекордно увеличили" */
}

/* Right Block Title "ЦИФРЫ" with glow + pulse */
.right-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-align: center;
}

.cifry-glow {
    color: var(--color-primary);
    font-weight: 800;
    animation: cifryPulse 2s ease-in-out infinite;
    text-shadow:
        0 0 10px rgba(2, 183, 140, 0.8),
        0 0 20px rgba(2, 183, 140, 0.6),
        0 0 30px rgba(2, 183, 140, 0.4),
        0 0 40px rgba(0, 255, 161, 0.3);
}

@keyframes cifryPulse {
    50% {
        text-shadow:
            0 0 15px rgba(2, 183, 140, 1),
            0 0 30px rgba(2, 183, 140, 0.8),
            0 0 45px rgba(2, 183, 140, 0.6),
            0 0 60px rgba(0, 255, 161, 0.5);
        opacity: 0.9;
    }
}

/* Lightning Icon Container */
.lightning-container {
    width: 100%;
    max-width: 70px;
    margin: var(--space-sm) auto var(--space-sm) auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightning-icon {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(0, 255, 161, 0.8));
}

/* Metric Plus Symbol */
.metric-plus {
    font-size: var(--text-2xl);
    font-weight: 900;
    color: var(--color-primary);
    margin-left: 0;
    animation: metricPulse 2s ease-in-out infinite;
    text-shadow:
        0 0 10px rgba(2, 183, 140, 0.39),
        0 0 20px rgba(0, 255, 161, 0.29),
        0 0 30px rgba(2, 183, 140, 0.20);
}

/* ========================================
   THREE BLOCKS SECTION
========================================= */

.three-blocks-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: var(--space-3xl) var(--space-3xl);
    position: relative;
    background: var(--color-bg-primary);
    overflow: hidden;
}

.three-blocks-container {
    width: 100%;
    height: calc(100vh - calc(var(--space-3xl) * 2));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2%;
    overflow: visible;
    align-items: stretch;
}

.block-item {
    background: rgba(26, 26, 26, 0.3);
    backdrop-filter: blur(16px) saturate(200%);
    -webkit-backdrop-filter: blur(16px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start; /* Выравнивание к верху для размещения формулы */
    justify-content: center;
    padding: var(--space-3xl);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.block-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(2, 183, 140, 0.2);
}

/* Decline Block - Красная граница */
.block-decline {
    border-color: rgba(255, 68, 68, 0.3);
}

.block-decline:hover {
    border-color: rgba(255, 68, 68, 0.6);
    box-shadow: 0 10px 40px rgba(255, 68, 68, 0.2);
}

/* Stagnation Block - Серая граница */
.block-stagnation {
    border-color: rgba(136, 136, 136, 0.3);
}

.block-stagnation:hover {
    border-color: rgba(136, 136, 136, 0.6);
    box-shadow: 0 10px 40px rgba(136, 136, 136, 0.2);
}

/* Growth Block - Зеленая граница (primary color) */
.block-growth {
    border-color: rgba(2, 183, 140, 0.3);
}

.block-growth:hover {
    border-color: rgba(2, 183, 140, 0.6);
    box-shadow: 0 10px 40px rgba(2, 183, 140, 0.3);
}

.block-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(2, 183, 140, 0.05) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
}

.block-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Math Formula Styling in Blocks - Чистая реализация без копирования */
.block-math-formula {
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    white-space: nowrap;
    margin-bottom: var(--space-xs);
    letter-spacing: -0.02em;
    font-weight: 600;
}

/* Базовое число */
.block-math-formula .math-base {
    font-weight: 600 !important;
    opacity: 1 !important;
    text-shadow: inherit !important;
}

/* Степень (маленькая сверху) */
.block-math-formula .math-power {
    font-size: 0.5em;
    vertical-align: super;
    font-weight: 600 !important;
    opacity: 1 !important;
    text-shadow: inherit !important;
}

/* Знак равно */
.block-math-formula .math-eq {
    margin: 0 0.3em;
    font-weight: 600 !important;
    opacity: 1 !important;
    text-shadow: inherit !important;
}

/* Декоративный знак равно под формулой 1^365 = 1 */
.decorative-equals {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation: equalsAppear 1s ease-out 0.5s forwards;
}

.math-stagnation {
    position: relative;
}

/* Анимация появления декоративного знака */
@keyframes equalsAppear {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Пульсация линий знака равно */
.equals-line {
    animation: equalsPulse 2s ease-in-out infinite;
    transform-origin: center;
}

.equals-line-1 {
    animation-delay: 0s;
}

.equals-line-2 {
    animation-delay: 0.1s;
}

@keyframes equalsPulse {
    50% {
        opacity: 0.7;
        filter: drop-shadow(0 0 8px rgba(0, 255, 161, 0.8));
    }
}

/* Результат */
.block-math-formula .math-result {
    font-weight: 600 !important;
    opacity: 1 !important;
    text-shadow: inherit !important;
}

/* Decline Formula - Яркий красный с пульсацией */
.block-decline .block-math-formula {
    color: #FF4444; /* Яркий красный */
    text-shadow:
        0 0 10px rgba(255, 68, 68, 0.6),
        0 0 20px rgba(255, 68, 68, 0.4),
        0 0 30px rgba(255, 68, 68, 0.2);
    animation: pulse-red 3s ease-in-out infinite;
}

.block-decline .block-math-formula * {
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* Stagnation Formula - Яркий серый с пульсацией */
.block-stagnation .block-math-formula {
    color: #AAAAAA; /* Яркий серый */
    text-shadow:
        0 0 10px rgba(170, 170, 170, 0.6),
        0 0 20px rgba(170, 170, 170, 0.4),
        0 0 30px rgba(170, 170, 170, 0.2);
    animation: pulse-gray 3s ease-in-out infinite;
}

.block-stagnation .block-math-formula * {
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* Growth Formula - Яркий зеленый с пульсацией */
.block-growth .block-math-formula {
    color: var(--color-primary); /* Яркий зеленый #02B78C */
    text-shadow:
        0 0 10px rgba(2, 183, 140, 0.6),
        0 0 20px rgba(2, 183, 140, 0.4),
        0 0 30px rgba(2, 183, 140, 0.2);
    animation: pulse-green 3s ease-in-out infinite;
}

.block-growth .block-math-formula * {
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* Animations для пульсации */
@keyframes pulse-red {
    50% {
        text-shadow:
            0 0 15px rgba(255, 68, 68, 0.8),
            0 0 30px rgba(255, 68, 68, 0.6),
            0 0 45px rgba(255, 68, 68, 0.3);
    }
}

@keyframes pulse-gray {
    50% {
        text-shadow:
            0 0 15px rgba(170, 170, 170, 0.8),
            0 0 30px rgba(170, 170, 170, 0.6),
            0 0 45px rgba(170, 170, 170, 0.3);
    }
}

@keyframes pulse-green {
    50% {
        text-shadow:
            0 0 15px rgba(2, 183, 140, 0.8),
            0 0 30px rgba(2, 183, 140, 0.6),
            0 0 45px rgba(2, 183, 140, 0.3);
    }
}

/* ========================================
   АНИМАЦИИ ПЕРСОНАЖЕЙ (ТОЛЬКО ДЛЯ ТРЕТЬЕГО СЛАЙДА)
   ======================================== */

/* Контейнер для анимации - ТОЛЬКО для three-blocks-section */
.three-blocks-section .animation-container {
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    max-width: 120px;
    margin-left: auto;
    margin-right: auto;
    min-height: auto;
    padding: 0;
    display: block;
}

.three-blocks-section .character-animation {
    width: 100%;
    height: auto;
    opacity: 0.8; /* Немного приглушаем */
}

/* ========================================
   БЛОК 1: ПАДЕНИЕ И РАЗБИВАНИЕ КОРОБКИ (Decline)
   ======================================== */

/* ========================================
   БЛОК 1: ПАДЕНИЕ И РАЗБИВАНИЕ КОРОБКИ (Decline)
   ======================================== */

/* Целая коробка - падает сверху естественно */
.three-blocks-section .box-whole {
    animation: box-fall 2.5s cubic-bezier(0.34, 0, 0.84, 1) infinite;
    transform-origin: center;
}

@keyframes box-fall {
    0% {
        transform: translate(0px, 0px);
        opacity: 1;
    }

    /* Падает до точки касания */
    70% {
        transform: translate(0px, 43px);
        opacity: 1;
    }

    /* Исчезает */
    71% {
        transform: translate(0px, 43px);
        opacity: 0;
    }

    /* Пауза перед новым циклом */
    100% {
        transform: translate(0px, 43px);
        opacity: 0;
    }
}


/* Осколки - невидимы до взрыва */
.three-blocks-section .box-fragments {
    opacity: 0;
    animation: fragments-appear 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

/* КРИТИЧЕСКИ ВАЖНО: transform-origin для всех осколков */
.three-blocks-section .fragment {
    transform-origin: center center;
}

@keyframes fragments-appear {
    0%, 70% {
        opacity: 0;
        transform: translate(0px, 0px); /* Осколки полностью скрыты */
    }

    /* Появляются */
    71% {
        opacity: 1;
        transform: translate(0px, 43px);
    }

    /* Летят */
    95% {
        opacity: 0.3;
    }

    100% {
        opacity: 0;
    }
}

/* ==========================================
   ВЗРЫВ - КРУГОВОЕ РАСПРЕДЕЛЕНИЕ 360°
   ========================================== */

/* Осколок 1 - 0° ВПРАВО → */
.three-blocks-section .fragment-1 { animation: fragment-1-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-1-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); }
    71% { transform: translate(5px, 43px) rotate(-10deg); }
    95% { transform: translate(75px, 72px) rotate(-160deg); opacity: 0.3; }
    100% { opacity: 0; }
}

/* Осколок 2 - 22.5° */
.three-blocks-section .fragment-2 { animation: fragment-2-fly 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite; }
@keyframes fragment-2-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); }
    71% { transform: translate(3px, 74px) rotate(8deg); }
    95% { transform: translate(70px, 100px) rotate(95deg); opacity: 0.2; }
    100% { opacity: 0; }
}

/* Осколок 3 - 45° ДИАГОНАЛЬ */
.three-blocks-section .fragment-3 { animation: fragment-3-fly 2.5s cubic-bezier(0.19, 0.61, 0.31, 1) infinite; }
@keyframes fragment-3-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); }
    71% { transform: translate(4px, 76px) rotate(12deg); }
    95% { transform: translate(53px, 125px) rotate(145deg); opacity: 0.25; }
    100% { opacity: 0; }
}

/* Осколок 4 - 67.5° */
.three-blocks-section .fragment-4 { animation: fragment-4-fly 2.5s cubic-bezier(0.28, 0.44, 0.42, 1) infinite; }
@keyframes fragment-4-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); }
    71% { transform: translate(2px, 77px) rotate(-8deg); }
    95% { transform: translate(28px, 142px) rotate(-100deg); opacity: 0.3; }
    100% { opacity: 0; }
}

/* Осколок 5 - 90° ВНИЗ */
.three-blocks-section .fragment-5 { animation: fragment-5-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-5-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); }
    71% { transform: translate(0px, 78px) rotate(10deg); }
    95% { transform: translate(0px, 147px) rotate(92deg); opacity: 0.2; }
    100% { opacity: 0; }
}

/* Осколок 6 - 112.5° */
.three-blocks-section .fragment-6 { animation: fragment-6-fly 2.5s cubic-bezier(0.2, 0.65, 0.3, 1) infinite; }
@keyframes fragment-6-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); }
    71% { transform: translate(-2px, 77px) rotate(15deg); }
    95% { transform: translate(-28px, 142px) rotate(168deg); opacity: 0.25; }
    100% { opacity: 0; }
}

/* Осколок 7 - 135° ДИАГОНАЛЬ */
.three-blocks-section .fragment-7 { animation: fragment-7-fly 2.5s cubic-bezier(0.25, 0.5, 0.4, 0.98) infinite; }
@keyframes fragment-7-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); }
    71% { transform: translate(-4px, 76px) rotate(-12deg); }
    95% { transform: translate(-53px, 125px) rotate(-128deg); opacity: 0.2; }
    100% { opacity: 0; }
}

/* Осколок 8 - 157.5° */
.three-blocks-section .fragment-8 { animation: fragment-8-fly 2.5s cubic-bezier(0.18, 0.68, 0.28, 1) infinite; }
@keyframes fragment-8-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); }
    71% { transform: translate(-5px, 74px) rotate(18deg); }
    95% { transform: translate(-70px, 100px) rotate(152deg); opacity: 0.25; }
    100% { opacity: 0; }
}

/* Осколок 9 - 180° ВЛЕВО */
.three-blocks-section .fragment-9 { animation: fragment-9-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-9-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); }
    71% { transform: translate(-5px, 43px) rotate(25deg); }
    95% { transform: translate(-75px, 72px) rotate(178deg); opacity: 0.3; }
    100% { opacity: 0; }
}

/* Осколок 10 - 202.5° */
.three-blocks-section .fragment-10 { animation: fragment-10-fly 2.5s cubic-bezier(0.25, 0.55, 0.4, 1) infinite; }
@keyframes fragment-10-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); }
    71% { transform: translate(-5px, 70px) rotate(-18deg); }
    95% { transform: translate(-70px, 44px) rotate(-142deg); opacity: 0.2; }
    100% { opacity: 0; }
}

/* Осколок 11 - 225° ДИАГОНАЛЬ */
.three-blocks-section .fragment-11 { animation: fragment-11-fly 2.5s cubic-bezier(0.2, 0.6, 0.35, 1) infinite; }
@keyframes fragment-11-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); }
    71% { transform: translate(-4px, 68px) rotate(15deg); }
    95% { transform: translate(-53px, 19px) rotate(122deg); opacity: 0.25; }
    100% { opacity: 0; }
}

/* Осколок 12 - 247.5° */
.three-blocks-section .fragment-12 { animation: fragment-12-fly 2.5s cubic-bezier(0.28, 0.5, 0.42, 1) infinite; }
@keyframes fragment-12-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); }
    71% { transform: translate(-2px, 67px) rotate(-22deg); }
    95% { transform: translate(-28px, 2px) rotate(-162deg); opacity: 0.3; }
    100% { opacity: 0; }
}

/* Осколок 13 - 270° ВВЕРХ */
.three-blocks-section .fragment-13 { animation: fragment-13-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-13-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); }
    71% { transform: translate(0px, 66px) rotate(-15deg); }
    95% { transform: translate(0px, -3px) rotate(-122deg); opacity: 0.2; }
    100% { opacity: 0; }
}

/* Осколок 14 - 292.5° */
.three-blocks-section .fragment-14 { animation: fragment-14-fly 2.5s cubic-bezier(0.25, 0.55, 0.38, 1) infinite; }
@keyframes fragment-14-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); }
    71% { transform: translate(2px, 67px) rotate(20deg); }
    95% { transform: translate(28px, 2px) rotate(157deg); opacity: 0.3; }
    100% { opacity: 0; }
}

/* Осколок 15 - 315° ДИАГОНАЛЬ */
.three-blocks-section .fragment-15 { animation: fragment-15-fly 2.5s cubic-bezier(0.2, 0.65, 0.32, 1) infinite; }
@keyframes fragment-15-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); }
    71% { transform: translate(4px, 68px) rotate(-18deg); }
    95% { transform: translate(53px, 19px) rotate(-117deg); opacity: 0.25; }
    100% { opacity: 0; }
}

/* Осколок 16 - 337.5° */
.three-blocks-section .fragment-16 { animation: fragment-16-fly 2.5s cubic-bezier(0.18, 0.68, 0.3, 1) infinite; }
@keyframes fragment-16-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); }
    71% { transform: translate(5px, 70px) rotate(-25deg); }
    95% { transform: translate(70px, 44px) rotate(-147deg); opacity: 0.25; }
    100% { opacity: 0; }
}

/* Осколки 17-25 упрощенные */
.three-blocks-section .fragment-17 { animation: f17 3.5s ease-out infinite; }
@keyframes f17 {
    0%, 70% { opacity: 0; }
    71% { opacity: 1; transform: translate(0, 43px); }
    85% { opacity: 0; transform: translate(58px, 86px); }
}

.three-blocks-section .fragment-18 { animation: f18 3.5s ease-out infinite; }
@keyframes f18 {
    0%, 70% { opacity: 0; }
    71% { opacity: 1; transform: translate(0, 43px); }
    85% { opacity: 0; transform: translate(40px, 127px); }
}

.three-blocks-section .fragment-19 { animation: f19 3.5s ease-out infinite; }
@keyframes f19 {
    0%, 70% { opacity: 0; }
    71% { opacity: 1; transform: translate(0, 43px); }
    85% { opacity: 0; transform: translate(-14px, 130px); }
}

.three-blocks-section .fragment-20 { animation: f20 3.5s ease-out infinite; }
@keyframes f20 {
    0%, 70% { opacity: 0; }
    71% { opacity: 1; transform: translate(0, 43px); }
    85% { opacity: 0; transform: translate(-55px, 112px); }
}

.three-blocks-section .fragment-21 { animation: f21 3.5s ease-out infinite; }
@keyframes f21 {
    0%, 70% { opacity: 0; }
    71% { opacity: 1; transform: translate(0, 43px); }
    85% { opacity: 0; transform: translate(-58px, 62px); }
}

.three-blocks-section .fragment-22 { animation: f22 3.5s ease-out infinite; }
@keyframes f22 {
    0%, 70% { opacity: 0; }
    71% { opacity: 1; transform: translate(0, 43px); }
    85% { opacity: 0; transform: translate(-40px, 17px); }
}

.three-blocks-section .fragment-23 { animation: f23 3.5s ease-out infinite; }
@keyframes f23 {
    0%, 70% { opacity: 0; }
    71% { opacity: 1; transform: translate(0, 43px); }
    85% { opacity: 0; transform: translate(14px, 14px); }
}

.three-blocks-section .fragment-24 { animation: f24 3.5s ease-out infinite; }
@keyframes f24 {
    0%, 70% { opacity: 0; }
    71% { opacity: 1; transform: translate(0, 43px); }
    85% { opacity: 0; transform: translate(55px, 32px); }
}

.three-blocks-section .fragment-25 { animation: f25 3.5s ease-out infinite; }
@keyframes f25 {
    0%, 70% { opacity: 0; }
    71% { opacity: 1; transform: translate(0, 43px); }
    85% { opacity: 0; transform: translate(52px, 102px); }
}


/* ========================================
   БЛОК 2: БЕГ НА МЕСТЕ (Stagnation)
   ======================================== */
.three-blocks-section .character-stagnation {
    animation: bounce-in-place 1.5s ease-in-out infinite;
}

@keyframes bounce-in-place {
    50% {
        transform: translateY(-3px);
    }
}

/* Анимация ног - быстрый бег на месте */
.three-blocks-section .character-stagnation .leg-left {
    animation: run-leg-left 0.4s ease-in-out infinite;
    transform-origin: 100px 90px;
}

.three-blocks-section .character-stagnation .leg-right {
    animation: run-leg-right 0.4s ease-in-out infinite;
    transform-origin: 100px 90px;
}

@keyframes run-leg-left {
    0% {
        transform: rotate(30deg);
    }
    50% {
        transform: rotate(-30deg);
    }
    100% {
        transform: rotate(30deg);
    }
}

@keyframes run-leg-right {
    0% {
        transform: rotate(-30deg);
    }
    50% {
        transform: rotate(30deg);
    }
    100% {
        transform: rotate(-30deg);
    }
}

/* Анимация рук - быстрый бег (противоположно ногам) */
.three-blocks-section .character-stagnation .arm-left {
    animation: run-arm-left 0.4s ease-in-out infinite;
    transform-origin: 100px 75px;
}

.three-blocks-section .character-stagnation .arm-right {
    animation: run-arm-right 0.4s ease-in-out infinite;
    transform-origin: 100px 75px;
}

@keyframes run-arm-left {
    0% {
        transform: rotate(-40deg);
    }
    50% {
        transform: rotate(40deg);
    }
    100% {
        transform: rotate(-40deg);
    }
}

@keyframes run-arm-right {
    0% {
        transform: rotate(40deg);
    }
    50% {
        transform: rotate(-40deg);
    }
    100% {
        transform: rotate(40deg);
    }
}

/* Капля пота - появляется периодически */
.three-blocks-section .sweat-drop {
    animation: sweat 6s ease-in-out infinite;
}

@keyframes sweat {
    75% {
        opacity: 1;
        transform: translateY(0);
    }
    85% {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* ========================================
   БЛОК 3: ПОЛЕТ ВВЕРХ (Growth)
   ======================================== */
.three-blocks-section .character-growth {
    animation: fly-up 3s ease-in-out infinite;
}

@keyframes fly-up {
    0% {
        transform: translateY(30px) translateX(-30px);
    }
    100% {
        transform: translateY(-20px) translateX(30px);
    }
}

/* Анимация ног - энергичный бег вверх */
.three-blocks-section .character-growth .leg-left {
    animation: climb-leg-left 0.5s ease-in-out infinite;
    transform-origin: 100px 95px;
}

.three-blocks-section .character-growth .leg-right {
    animation: climb-leg-right 0.5s ease-in-out infinite;
    transform-origin: 100px 95px;
}

@keyframes climb-leg-left {
    0% {
        transform: rotate(25deg);
    }
    50% {
        transform: rotate(-25deg);
    }
    100% {
        transform: rotate(25deg);
    }
}

@keyframes climb-leg-right {
    0% {
        transform: rotate(-25deg);
    }
    50% {
        transform: rotate(25deg);
    }
    100% {
        transform: rotate(-25deg);
    }
}

/* Анимация рук - взмах для энергии полета */
.three-blocks-section .character-growth .arm-left {
    animation: climb-arm-left 0.5s ease-in-out infinite;
    transform-origin: 100px 80px;
}

.three-blocks-section .character-growth .arm-right {
    animation: climb-arm-right 0.5s ease-in-out infinite;
    transform-origin: 100px 80px;
}

@keyframes climb-arm-left {
    0% {
        transform: rotate(-15deg);
    }
    50% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(-15deg);
    }
}

@keyframes climb-arm-right {
    0% {
        transform: rotate(15deg);
    }
    50% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(15deg);
    }
}

.block-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
    text-shadow:
        0 0 10px rgba(2, 183, 140, 0.5),
        0 0 20px rgba(0, 255, 161, 0.3);
}

.block-description {
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* Tablet */
@media (max-width: 992px) {
    .two-blocks-section {
        padding: var(--space-base);
    }

    .two-blocks-section .split-screen-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
        min-height: calc(100vh - calc(var(--space-base) * 2));
        border-radius: 16px;
    }

    .two-blocks-section .split-left,
    .two-blocks-section .split-right {
        min-height: 50vh;
        padding: var(--space-2xl);
        border: none;
    }

    .two-blocks-section .split-right {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-left: none;
    }

    .two-blocks-section .split-title {
        font-size: var(--text-3xl);
    }

    .two-blocks-section .split-heading {
        font-size: var(--text-2xl);
    }

    .two-blocks-section .split-metrics {
        flex-wrap: wrap;
        gap: var(--space-base);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .two-blocks-section {
        padding: var(--space-sm);
    }

    .two-blocks-section .split-screen-container {
        border-radius: 12px;
    }

    .two-blocks-section .split-left,
    .two-blocks-section .split-right {
        padding: var(--space-xl);
        min-height: 60vh;
    }

    .two-blocks-section .split-title {
        font-size: var(--text-2xl);
    }

    .two-blocks-section .split-heading {
        font-size: var(--text-xl);
    }

    .process-canvas,
    .animation-container {
        height: 300px;
        min-height: 300px;
    }

    .two-blocks-section .split-image {
        max-width: 100%;
        padding: var(--space-base);
    }

    .two-blocks-section .split-metrics {
        gap: var(--space-base);
    }

    .metric-value {
        font-size: var(--text-2xl);
    }
}

/* ========================================
   CONTENT SECTIONS
========================================= */

/* Intro Section */
.intro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.intro-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: var(--space-xl);
    transition: all var(--duration-normal) ease;
}

.intro-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
}

.card-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    color: var(--color-background);
    border-radius: 50%;
    font-weight: 800;
    font-size: var(--text-lg);
    margin-bottom: var(--space-lg);
}

.card-title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-base);
    color: var(--color-text-primary);
}

.card-description {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Industries Section */
/* Industries Section - SLSBMB Style */
.industries-section .section-title {
    /* Используем Inter как в других заголовках */
    font-family: var(--font-primary); /* Inter */
    text-align: center;
    font-size: var(--text-4xl); /* 2.25rem = 36px - как у "Нужны ли мы вам" */
    font-weight: 800; /* Как у других заголовков */
    line-height: 1.1;
    letter-spacing: -0.02em; /* Как у стандартных заголовков */
    margin-bottom: var(--space-3xl);
}

/* Свечение для "20+" как у experience */
.niches-glow {
    color: var(--color-primary);
    font-weight: 800;
    animation: nichesPulse 2s ease-in-out infinite;
    text-shadow:
        0 0 10px rgba(2, 183, 140, 0.8),
        0 0 20px rgba(0, 255, 161, 0.6),
        0 0 30px rgba(2, 183, 140, 0.4);
}

@keyframes nichesPulse {
    50% {
        opacity: 0.8;
        text-shadow:
            0 0 15px rgba(2, 183, 140, 1),
            0 0 30px rgba(0, 255, 161, 0.8),
            0 0 45px rgba(2, 183, 140, 0.6);
    }
}

.industries-list {
    display: flex;
    flex-wrap: wrap; /* Построчный список с переносами */
    justify-content: center; /* Центрируем элементы */
    gap: var(--space-xl) var(--space-3xl); /* Больше расстояния: 32px вертикально, 64px горизонтально */
    margin-top: var(--space-2xl);
    padding: 0 var(--space-xl); /* Отступы слева и справа 32px чтобы текст не выходил за границы */
}

.industry-item {
    font-size: var(--text-lg); /* 18px */
    font-weight: 400;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap; /* Не разрывать слова */
    transition: all var(--duration-fast) ease;
}

.industry-item:hover {
    color: var(--color-primary);
    transform: translateY(-2px);
}

.industry-description {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* Impact Numbers */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.impact-card {
    text-align: center;
    padding: var(--space-xl);
}

.impact-number {
    font-size: var(--text-5xl);
    font-weight: 900;
    color: var(--color-primary);
    display: block;
    margin-bottom: var(--space-sm);
}

.impact-label {
    color: var(--color-text-secondary);
    font-size: var(--text-base);
}

/* Новый grid для кейсов 3x2 - минималистичный дизайн */
.impact-grid-cases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg); /* Меньший gap как на скриншоте */
    margin-top: var(--space-2xl);
}

.case-card {
    background: transparent; /* Прозрачный фон */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Тонкая светлая рамка */
    border-radius: 8px; /* Меньший радиус */
    padding: var(--space-2xl);
    min-height: 280px; /* Увеличенная высота как на скриншоте */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-normal) ease;
}

.case-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.02);
}

.case-content {
    text-align: center;
}

.case-content p {
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
}

/* Contact Form */
.contact-form {
    max-width: 600px;
    margin: var(--space-2xl) auto 0;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    color: var(--color-text-secondary);
    font-weight: 500;
    margin-bottom: var(--space-sm);
}

.form-group input,
.form-group textarea {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-base);
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    transition: border-color var(--duration-normal) ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-submit {
    width: 100%;
    margin-top: var(--space-lg);
}

/* Footer */
.footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: var(--space-3xl) 0 var(--space-xl);
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.footer-logo .logo-text {
    font-size: var(--text-2xl);
    font-weight: 900;
    color: var(--color-text-primary);
    display: block;
    margin-bottom: var(--space-sm);
}

.logo-tagline {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-links a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--duration-normal) ease;
}

.footer-links a:hover {
    color: var(--color-primary);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-contact a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--duration-normal) ease;
}

.footer-contact a:hover {
    color: var(--color-primary);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Why Outsource */
.why-grid {
    display: grid;
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.why-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-lg);
    align-items: flex-start;
}

.why-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--color-primary);
    color: var(--color-background);
    border-radius: 50%;
    font-weight: 800;
    font-size: var(--text-xl);
    flex-shrink: 0;
}

.why-text h3 {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    color: var(--color-text-primary);
}

.why-text p {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Новый дизайн Why Outsource */
.why-subtitle {
    text-align: center;
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-top: var(--space-md);
    margin-bottom: var(--space-3xl);
}

.why-grid-new {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
    margin-top: var(--space-3xl);
}

.why-card {
    text-align: center;
    padding: var(--space-2xl);
}

.why-icon {
    font-size: 64px;
    margin-bottom: var(--space-lg);
}

.why-card h3 {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Clients Section - Full Isolation */
.clients-section {
    isolation: isolate;
    position: relative;
    z-index: 1;
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
    isolation: isolate;
    transform: translateZ(0);
}

.client-logo {
    background: transparent;
    border: none;
    padding: var(--space-lg);
    text-align: center;
    font-weight: 700;
    color: var(--color-text-secondary);
    transition: all var(--duration-normal) ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    isolation: isolate;
    will-change: transform;
    position: relative;
    z-index: 2;
    transform: translateZ(0);
}

.client-logo img {
    max-width: 100%;
    height: auto;
    filter: grayscale(100%) brightness(0.5) opacity(0.6) !important;
    transition: all var(--duration-normal) ease;
    will-change: filter;
    isolation: isolate;
    position: relative;
    z-index: 3;
    transform: translateZ(0);
}

.client-logo:hover img {
    filter: grayscale(0%) brightness(1) opacity(1) !important;
}

/* Special rule for inverted logos - no grayscale, just brightness */
.client-logo-inverted img {
    filter: brightness(0.5) opacity(0.6) !important;
    will-change: filter;
    isolation: isolate;
}

.client-logo-inverted:hover img {
    filter: brightness(1) opacity(1) !important;
}

/* Tonus logo - switch image on hover */
.tonus-logo:hover img {
    content: url('/assets/images/clients/tonus-elast-v2.png?v=3');
    filter: none;
}

/* How It Works */
.steps-container {
    margin-top: var(--space-2xl);
    display: grid;
    gap: var(--space-xl);
}

.step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-lg);
    align-items: flex-start;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-background);
    border-radius: 50%;
    font-weight: 800;
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.step-title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    color: var(--color-text-primary);
}

.step-description {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Sales System */
.system-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.system-feature {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: var(--space-xl);
    text-align: center;
    transition: all var(--duration-normal) ease;
}

.system-feature:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
}

.feature-icon {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-lg);
}

.feature-title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    color: var(--color-text-primary);
}

.feature-description {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Pricing */
.pricing-content {
    max-width: 800px;
    margin: var(--space-2xl) auto 0;
}

.team-offer {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: var(--space-2xl);
    text-align: center;
}

.offer-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-2xl);
    color: var(--color-text-primary);
}

.team-composition {
    display: grid;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.team-member {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-base);
    background: var(--color-background);
    border-radius: 8px;
}

.member-role {
    font-weight: 600;
    color: var(--color-text-primary);
}

.member-description {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.pricing-details {
    text-align: center;
}

.price {
    font-size: var(--text-3xl);
    font-weight: 900;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.price-note {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ========================================
   RESPONSIVE
========================================= */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: var(--color-surface);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: var(--space-xl);
        transition: left var(--duration-normal) ease;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-hamburger {
        display: flex;
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-xl);
    }

    .hero-title {
        font-size: var(--text-4xl);
    }

    .hero-subtitle {
        font-size: var(--text-lg);
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-3d-object {
        width: 300px;
        height: 300px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .team-member {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }

    .why-item,
    .step {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: var(--text-3xl);
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .btn-primary, .btn-secondary {
        width: 100%;
        justify-content: center;
        max-width: 280px;
    }
}

/* ========================================
   PROGRESS DOTS INDICATOR
========================================= */
.progress-dots {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.progress-dot:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.2);
}

.progress-dot.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 10px var(--color-primary);
    transform: scale(1.3);
}

.progress-dot::after {
    content: attr(data-label);
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.progress-dot:hover::after {
    opacity: 1;
}

/* Скрываем на мобильных */
@media (max-width: 992px) {
    .progress-dots {
        display: none;
    }
}

/* ========================================
   ENHANCED REVEAL ANIMATIONS
========================================= */
/* Улучшенные анимации управляются через GSAP - CSS не нужен */
/* [data-reveal] стили отключены - GSAP делает всё сам */

/* ========================================== */
/*  НОВЫЕ ОСКОЛКИ fragment-26 до fragment-49  */
/* ========================================== */

/* Ряд 0 (верхний, y=14) - 7 осколков */
/* Fragment 26 - левый край верхний */
.three-blocks-section .fragment-26 { animation: fragment-26-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-26-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(3px, 0) rotate(-5deg); opacity: 1; }
    95% { transform: translate(-80px, -40px) rotate(-180deg); opacity: 0.2; }
    100% { opacity: 0; }
}

/* Fragment 27 */
.three-blocks-section .fragment-27 { animation: fragment-27-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-27-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(2px, -2px) rotate(10deg); opacity: 1; }
    95% { transform: translate(-65px, -50px) rotate(150deg); opacity: 0.25; }
    100% { opacity: 0; }
}

/* Fragment 28 */
.three-blocks-section .fragment-28 { animation: fragment-28-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-28-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(0, -3px) rotate(-8deg); opacity: 1; }
    95% { transform: translate(-30px, -75px) rotate(-200deg); opacity: 0.3; }
    100% { opacity: 0; }
}

/* Fragment 29 - центральный верхний */
.three-blocks-section .fragment-29 { animation: fragment-29-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-29-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(0, -4px) rotate(5deg); opacity: 1; }
    95% { transform: translate(0, -90px) rotate(180deg); opacity: 0.2; }
    100% { opacity: 0; }
}

/* Fragment 30 */
.three-blocks-section .fragment-30 { animation: fragment-30-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-30-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(2px, -3px) rotate(-12deg); opacity: 1; }
    95% { transform: translate(40px, -75px) rotate(220deg); opacity: 0.3; }
    100% { opacity: 0; }
}

/* Fragment 31 */
.three-blocks-section .fragment-31 { animation: fragment-31-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-31-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(3px, -2px) rotate(8deg); opacity: 1; }
    95% { transform: translate(70px, -55px) rotate(-170deg); opacity: 0.25; }
    100% { opacity: 0; }
}

/* Fragment 32 - правый край верхний */
.three-blocks-section .fragment-32 { animation: fragment-32-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-32-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(4px, -1px) rotate(-15deg); opacity: 1; }
    95% { transform: translate(85px, -45px) rotate(200deg); opacity: 0.2; }
    100% { opacity: 0; }
}

/* Боковые осколки (левый и правый край для рядов 1-5) */
/* Fragment 33 - левый край ряд 1 */
.three-blocks-section .fragment-33 { animation: fragment-33-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-33-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-5px, 43px) rotate(10deg); opacity: 1; }
    95% { transform: translate(-90px, 40px) rotate(-150deg); opacity: 0.25; }
    100% { opacity: 0; }
}

/* Fragment 34 - правый край ряд 1 */
.three-blocks-section .fragment-34 { animation: fragment-34-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-34-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(5px, 43px) rotate(-10deg); opacity: 1; }
    95% { transform: translate(90px, 40px) rotate(150deg); opacity: 0.25; }
    100% { opacity: 0; }
}

/* Fragment 35 - левый край ряд 2 */
.three-blocks-section .fragment-35 { animation: fragment-35-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-35-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-6px, 73px) rotate(12deg); opacity: 1; }
    95% { transform: translate(-95px, 60px) rotate(-160deg); opacity: 0.3; }
    100% { opacity: 0; }
}

/* Fragment 36 - правый край ряд 2 */
.three-blocks-section .fragment-36 { animation: fragment-36-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-36-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(6px, 73px) rotate(-12deg); opacity: 1; }
    95% { transform: translate(95px, 60px) rotate(160deg); opacity: 0.3; }
    100% { opacity: 0; }
}

/* Fragment 37 - левый край ряд 3 (центр) */
.three-blocks-section .fragment-37 { animation: fragment-37-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-37-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-7px, 43px) rotate(15deg); opacity: 1; }
    95% { transform: translate(-100px, 72px) rotate(-180deg); opacity: 0.2; }
    100% { opacity: 0; }
}

/* Fragment 38 - правый край ряд 3 (центр) */
.three-blocks-section .fragment-38 { animation: fragment-38-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-38-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(7px, 43px) rotate(-15deg); opacity: 1; }
    95% { transform: translate(100px, 72px) rotate(180deg); opacity: 0.2; }
    100% { opacity: 0; }
}

/* Fragment 39 - левый край ряд 4 */
.three-blocks-section .fragment-39 { animation: fragment-39-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-39-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-6px, 74px) rotate(10deg); opacity: 1; }
    95% { transform: translate(-95px, 90px) rotate(-150deg); opacity: 0.3; }
    100% { opacity: 0; }
}

/* Fragment 40 - правый край ряд 4 */
.three-blocks-section .fragment-40 { animation: fragment-40-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-40-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(6px, 74px) rotate(-10deg); opacity: 1; }
    95% { transform: translate(95px, 90px) rotate(150deg); opacity: 0.3; }
    100% { opacity: 0; }
}

/* Fragment 41 - левый край ряд 5 */
.three-blocks-section .fragment-41 { animation: fragment-41-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-41-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-5px, 75px) rotate(8deg); opacity: 1; }
    95% { transform: translate(-90px, 105px) rotate(-140deg); opacity: 0.25; }
    100% { opacity: 0; }
}

/* Fragment 42 - правый край ряд 5 */
.three-blocks-section .fragment-42 { animation: fragment-42-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-42-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(5px, 75px) rotate(-8deg); opacity: 1; }
    95% { transform: translate(90px, 105px) rotate(140deg); opacity: 0.25; }
    100% { opacity: 0; }
}

/* Ряд 6 (нижний, y=58) - 7 осколков */
/* Fragment 43 - левый край нижний */
.three-blocks-section .fragment-43 { animation: fragment-43-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-43-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-4px, 76px) rotate(5deg); opacity: 1; }
    95% { transform: translate(-85px, 120px) rotate(-130deg); opacity: 0.2; }
    100% { opacity: 0; }
}

/* Fragment 44 */
.three-blocks-section .fragment-44 { animation: fragment-44-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-44-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-3px, 77px) rotate(-10deg); opacity: 1; }
    95% { transform: translate(-70px, 130px) rotate(160deg); opacity: 0.25; }
    100% { opacity: 0; }
}

/* Fragment 45 */
.three-blocks-section .fragment-45 { animation: fragment-45-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-45-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-2px, 78px) rotate(12deg); opacity: 1; }
    95% { transform: translate(-40px, 140px) rotate(-170deg); opacity: 0.3; }
    100% { opacity: 0; }
}

/* Fragment 46 - центральный нижний */
.three-blocks-section .fragment-46 { animation: fragment-46-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-46-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(0, 80px) rotate(-5deg); opacity: 1; }
    95% { transform: translate(0, 150px) rotate(200deg); opacity: 0.2; }
    100% { opacity: 0; }
}

/* Fragment 47 */
.three-blocks-section .fragment-47 { animation: fragment-47-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-47-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(2px, 78px) rotate(-12deg); opacity: 1; }
    95% { transform: translate(40px, 140px) rotate(170deg); opacity: 0.3; }
    100% { opacity: 0; }
}

/* Fragment 48 */
.three-blocks-section .fragment-48 { animation: fragment-48-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-48-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(3px, 77px) rotate(10deg); opacity: 1; }
    95% { transform: translate(70px, 130px) rotate(-160deg); opacity: 0.25; }
    100% { opacity: 0; }
}

/* Fragment 49 - правый край нижний */
.three-blocks-section .fragment-49 { animation: fragment-49-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-49-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(4px, 76px) rotate(-5deg); opacity: 1; }
    95% { transform: translate(85px, 120px) rotate(130deg); opacity: 0.2; }
    100% { opacity: 0; }
}
/* ========================================== */
/*  НОВЫЕ ОСКОЛКИ fragment-50 до fragment-81  */
/*  Расширение до 9x9 сетки (еще 32 осколка)  */
/* ========================================== */

/* Ряд -1 (самый верхний, y=7) - 9 осколков */
.three-blocks-section .fragment-50 { animation: fragment-50-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-50-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(-5px, -2px) rotate(10deg); opacity: 1; }
    95% { transform: translate(-100px, -60px) rotate(-200deg); opacity: 0.2; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-51 { animation: fragment-51-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-51-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(-4px, -3px) rotate(-8deg); opacity: 1; }
    95% { transform: translate(-85px, -70px) rotate(180deg); opacity: 0.25; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-52 { animation: fragment-52-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-52-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(-2px, -4px) rotate(12deg); opacity: 1; }
    95% { transform: translate(-60px, -85px) rotate(-150deg); opacity: 0.3; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-53 { animation: fragment-53-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-53-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(-1px, -5px) rotate(-10deg); opacity: 1; }
    95% { transform: translate(-25px, -100px) rotate(170deg); opacity: 0.2; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-54 { animation: fragment-54-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-54-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(0, -6px) rotate(8deg); opacity: 1; }
    95% { transform: translate(0, -110px) rotate(-190deg); opacity: 0.25; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-55 { animation: fragment-55-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-55-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(1px, -5px) rotate(-15deg); opacity: 1; }
    95% { transform: translate(25px, -100px) rotate(160deg); opacity: 0.2; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-56 { animation: fragment-56-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-56-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(2px, -4px) rotate(12deg); opacity: 1; }
    95% { transform: translate(60px, -85px) rotate(-140deg); opacity: 0.3; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-57 { animation: fragment-57-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-57-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(4px, -3px) rotate(-10deg); opacity: 1; }
    95% { transform: translate(85px, -70px) rotate(175deg); opacity: 0.25; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-58 { animation: fragment-58-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-58-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(5px, -2px) rotate(15deg); opacity: 1; }
    95% { transform: translate(100px, -60px) rotate(-210deg); opacity: 0.2; }
    100% { opacity: 0; }
}

/* Боковые осколки (левый 71 и правый 129) для рядов 0-6 */
.three-blocks-section .fragment-59 { animation: fragment-59-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-59-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(-7px, -1px) rotate(12deg); opacity: 1; }
    95% { transform: translate(-110px, -35px) rotate(-170deg); opacity: 0.25; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-60 { animation: fragment-60-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-60-fly {
    0%, 70% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    71% { transform: translate(7px, -1px) rotate(-12deg); opacity: 1; }
    95% { transform: translate(110px, -35px) rotate(170deg); opacity: 0.25; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-61 { animation: fragment-61-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-61-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-8px, 43px) rotate(15deg); opacity: 1; }
    95% { transform: translate(-115px, 35px) rotate(-160deg); opacity: 0.3; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-62 { animation: fragment-62-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-62-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(8px, 43px) rotate(-15deg); opacity: 1; }
    95% { transform: translate(115px, 35px) rotate(160deg); opacity: 0.3; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-63 { animation: fragment-63-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-63-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-8px, 73px) rotate(18deg); opacity: 1; }
    95% { transform: translate(-115px, 55px) rotate(-150deg); opacity: 0.25; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-64 { animation: fragment-64-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-64-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(8px, 73px) rotate(-18deg); opacity: 1; }
    95% { transform: translate(115px, 55px) rotate(150deg); opacity: 0.25; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-65 { animation: fragment-65-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-65-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-9px, 43px) rotate(20deg); opacity: 1; }
    95% { transform: translate(-120px, 72px) rotate(-200deg); opacity: 0.2; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-66 { animation: fragment-66-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-66-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(9px, 43px) rotate(-20deg); opacity: 1; }
    95% { transform: translate(120px, 72px) rotate(200deg); opacity: 0.2; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-67 { animation: fragment-67-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-67-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-8px, 74px) rotate(15deg); opacity: 1; }
    95% { transform: translate(-115px, 95px) rotate(-155deg); opacity: 0.3; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-68 { animation: fragment-68-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-68-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(8px, 74px) rotate(-15deg); opacity: 1; }
    95% { transform: translate(115px, 95px) rotate(155deg); opacity: 0.3; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-69 { animation: fragment-69-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-69-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-7px, 75px) rotate(12deg); opacity: 1; }
    95% { transform: translate(-110px, 110px) rotate(-145deg); opacity: 0.25; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-70 { animation: fragment-70-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-70-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(7px, 75px) rotate(-12deg); opacity: 1; }
    95% { transform: translate(110px, 110px) rotate(145deg); opacity: 0.25; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-71 { animation: fragment-71-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-71-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-6px, 76px) rotate(10deg); opacity: 1; }
    95% { transform: translate(-105px, 125px) rotate(-135deg); opacity: 0.2; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-72 { animation: fragment-72-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-72-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(6px, 76px) rotate(-10deg); opacity: 1; }
    95% { transform: translate(105px, 125px) rotate(135deg); opacity: 0.2; }
    100% { opacity: 0; }
}

/* Ряд 7 (самый нижний, y=65) - 9 осколков */
.three-blocks-section .fragment-73 { animation: fragment-73-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-73-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-5px, 78px) rotate(8deg); opacity: 1; }
    95% { transform: translate(-100px, 145px) rotate(-125deg); opacity: 0.2; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-74 { animation: fragment-74-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-74-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-4px, 79px) rotate(-12deg); opacity: 1; }
    95% { transform: translate(-85px, 155px) rotate(165deg); opacity: 0.25; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-75 { animation: fragment-75-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-75-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-3px, 80px) rotate(15deg); opacity: 1; }
    95% { transform: translate(-60px, 165px) rotate(-155deg); opacity: 0.3; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-76 { animation: fragment-76-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-76-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(-1px, 82px) rotate(-10deg); opacity: 1; }
    95% { transform: translate(-25px, 175px) rotate(180deg); opacity: 0.2; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-77 { animation: fragment-77-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-77-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(0, 85px) rotate(5deg); opacity: 1; }
    95% { transform: translate(0, 180px) rotate(-200deg); opacity: 0.25; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-78 { animation: fragment-78-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-78-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(1px, 82px) rotate(-15deg); opacity: 1; }
    95% { transform: translate(25px, 175px) rotate(170deg); opacity: 0.2; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-79 { animation: fragment-79-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-79-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(3px, 80px) rotate(12deg); opacity: 1; }
    95% { transform: translate(60px, 165px) rotate(-145deg); opacity: 0.3; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-80 { animation: fragment-80-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-80-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(4px, 79px) rotate(-10deg); opacity: 1; }
    95% { transform: translate(85px, 155px) rotate(160deg); opacity: 0.25; }
    100% { opacity: 0; }
}

.three-blocks-section .fragment-81 { animation: fragment-81-fly 2.5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
@keyframes fragment-81-fly {
    0%, 70% { transform: translate(0, 43px) rotate(0deg); opacity: 0; }
    71% { transform: translate(5px, 78px) rotate(10deg); opacity: 1; }
    95% { transform: translate(100px, 145px) rotate(-130deg); opacity: 0.2; }
    100% { opacity: 0; }
}

/* ========================================
/* ========================================
    50% {
        opacity: 0.85;
        filter: drop-shadow(0 0 12px rgba(0, 255, 161, 1));
    }
}
    50% {
        opacity: 0.8;
    }
}
/* ========================================
   3D ЧАСТИЦЫ ЗНАКА РАВНО с вращением
========================================= */
.equals-particles {
    width: 100%;
    height: 100%;
}

.particles-container {
    transform-origin: center center;
    transform-style: preserve-3d;
    animation: particlesRotate3D 8s ease-in-out infinite;
}

/* 3D вращение всего контейнера частиц */
@keyframes particlesRotate3D {
    0% {
        transform: translate(100px, 60px) rotateY(0deg) rotateX(0deg);
    }
    25% {
        transform: translate(100px, 60px) rotateY(90deg) rotateX(10deg);
    }
    50% {
        transform: translate(100px, 60px) rotateY(180deg) rotateX(0deg);
    }
    75% {
        transform: translate(100px, 60px) rotateY(270deg) rotateX(-10deg);
    }
    100% {
        transform: translate(100px, 60px) rotateY(360deg) rotateX(0deg);
    }
}

/* Индивидуальная анимация каждой частицы */
.particle {
    animation: particlePulse 2s ease-in-out infinite;
}

/* Разные задержки для эффекта волны */
.p1 { animation-delay: 0s; }
.p2 { animation-delay: 0.1s; }
.p3 { animation-delay: 0.2s; }
.p4 { animation-delay: 0.3s; }
.p5 { animation-delay: 0.4s; }
.p6 { animation-delay: 0.5s; }
.p7 { animation-delay: 0.6s; }
.p8 { animation-delay: 0.7s; }
.p9 { animation-delay: 0.8s; }
.p10 { animation-delay: 0.05s; }
.p11 { animation-delay: 0.15s; }
.p12 { animation-delay: 0.25s; }
.p13 { animation-delay: 0.35s; }
.p14 { animation-delay: 0.45s; }
.p15 { animation-delay: 0.55s; }
.p16 { animation-delay: 0.65s; }
.p17 { animation-delay: 0.75s; }
.p18 { animation-delay: 0.85s; }

/* Пульсация и свечение частиц */
@keyframes particlePulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* ========================================
   3D CANVAS ДЛЯ ЗНАКА РАВНО ИЗ ЧАСТИЦ
========================================= */
.equals-3d-canvas {
    width: 100%;
    height: 100%;
    display: block;
}
/* ========================================
   ПРОФЕССИОНАЛЬНАЯ 3D МОДЕЛЬ ЗНАКА =
   ТОЛЬКО ДЛЯ ТРЕТЬЕГО СЛАЙДА
========================================= */
.three-blocks-section .equals-3d-container {
    width: 100%;
    height: 80px; /* Уменьшили высоту */
    display: flex;
    align-items: flex-start; /* Прижали к верху */
    justify-content: center;
    position: relative;
    perspective: 1000px;
    margin-top: 10px; /* Небольшой отступ от заголовка */
}

.three-blocks-section #equals3DScene {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.three-blocks-section .equals-symbol-3d {
    width: 60px; /* Уменьшили ширину */
    height: 30px; /* Уменьшили высоту */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 5px 0; /* Уменьшили отступы */
    animation: rotate3dEquals 8s linear infinite;
    transform-style: preserve-3d;
}

.three-blocks-section .equals-bar {
    width: 100%;
    height: 6px; /* Уменьшили толщину полосок */
    background: linear-gradient(135deg, #888 0%, #bbb 50%, #888 100%);
    border-radius: 3px; /* Уменьшили скругление */
    box-shadow:
        0 1px 5px rgba(170, 170, 170, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

@keyframes rotate3dEquals {
    from {
        transform: rotateY(0deg) rotateX(15deg);
    }
    to {
        transform: rotateY(360deg) rotateX(15deg);
    }
}

/* ========================================
   АНИМАЦИЯ ПРЕВРАЩЕНИЯ + В × В СТИЛЕ ЛОГОТИПА
   ТОЛЬКО ДЛЯ ТРЕТЬЕГО СЛАЙДА
   Техника: два символа с плавным crossfade
========================================= */
.three-blocks-section .plus-to-x-logo-style {
    height: 80px !important;
    min-height: 80px !important;
    display: flex;
    align-items: flex-start; /* Прижали к верху */
    justify-content: center;
    margin-top: 10px; /* Небольшой отступ от заголовка */
}

.three-blocks-section .symbol-morph-container {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.three-blocks-section .symbol-plus,
.three-blocks-section .symbol-x {
    position: absolute;
    font-size: 3.5rem;
    font-weight: 900;
    color: #02B78C; /* Яркий зеленый как у заголовка блока */
    line-height: 1;
    text-shadow:
        0 0 15px rgba(2, 183, 140, 0.6),
        0 0 30px rgba(2, 183, 140, 0.4),
        0 0 45px rgba(2, 183, 140, 0.2);
}

.three-blocks-section .symbol-plus {
    animation: morphPlus 6s ease-in-out infinite;
}

.three-blocks-section .symbol-x {
    animation: morphX 6s ease-in-out infinite;
}

/* Анимация для плюса */
@keyframes morphPlus {
    0% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
    20% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
    30% {
        opacity: 0;
        transform: rotate(22.5deg) scale(0.9);
    }
    70% {
        opacity: 0;
        transform: rotate(22.5deg) scale(0.9);
    }
    80% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* Анимация для крестика */
@keyframes morphX {
    0% {
        opacity: 0;
        transform: rotate(-22.5deg) scale(0.9);
    }
    20% {
        opacity: 0;
        transform: rotate(-22.5deg) scale(0.9);
    }
    30% {
        opacity: 1;
        transform: rotate(0deg) scale(1.05);
    }
    50% {
        opacity: 1;
        transform: rotate(0deg) scale(1.05);
    }
    70% {
        opacity: 1;
        transform: rotate(0deg) scale(1.05);
    }
    80% {
        opacity: 0;
        transform: rotate(22.5deg) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: rotate(22.5deg) scale(0.9);
    }
}

/* Убираем старые стили частиц */
.equals-animation,
.equals-particles,
.particles-container,
.particle {
    display: none !important;
}

/* ========================================
   ТЕКСТОВЫЙ КОНТЕНТ В БЛОКАХ
   ======================================== */

.three-blocks-section .block-text-content {
    margin-top: -10px;
    padding: 0 var(--space-md);
    text-align: left;
    color: var(--text-primary);
    font-family: var(--font-sans);
}

/* Специальный отступ для среднего блока (стагнация) - выравнивание с левым блоком */
.block-stagnation .block-text-content {
    margin-top: 20px;
}

/* Специальный отступ для правого блока (рост) - выравнивание с остальными блоками */
.block-growth .block-text-content {
    margin-top: 20px;
}

.three-blocks-section .block-text-paragraph {
    font-size: 0.75rem;
    line-height: 1.45;
    margin-bottom: var(--space-xs);
    opacity: 0.95;
}

.three-blocks-section .block-text-paragraph strong {
    font-weight: 700;
    color: inherit;
}

/* Фразы с красным пульсирующим свечением */
.three-blocks-section .block-text-glow {
    font-weight: 400;
    color: #FF4444;
    text-shadow:
        0 0 4px rgba(255, 68, 68, 0.3),
        0 0 8px rgba(255, 68, 68, 0.2),
        0 0 12px rgba(255, 68, 68, 0.15);
    animation: pulse-red-text 2s ease-in-out infinite;
}

@keyframes pulse-red-text {
    0%, 100% {
        text-shadow:
            0 0 4px rgba(255, 68, 68, 0.3),
            0 0 8px rgba(255, 68, 68, 0.2),
            0 0 12px rgba(255, 68, 68, 0.15);
    }
    50% {
        text-shadow:
            0 0 6px rgba(255, 68, 68, 0.4),
            0 0 12px rgba(255, 68, 68, 0.3),
            0 0 18px rgba(255, 68, 68, 0.2);
    }
}

.three-blocks-section .block-text-metrics {
    font-weight: 600;
    color: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
}

.three-blocks-section .block-text-emphasis {
    font-weight: 700;
    color: #FF4444;
}

/* Серое свечение для блока стагнации */
.block-stagnation .block-text-glow {
    color: #AAAAAA;
    text-shadow:
        0 0 4px rgba(170, 170, 170, 0.3),
        0 0 8px rgba(170, 170, 170, 0.2),
        0 0 12px rgba(170, 170, 170, 0.15);
    animation: pulse-gray-text 2s ease-in-out infinite;
}

@keyframes pulse-gray-text {
    0%, 100% {
        text-shadow:
            0 0 4px rgba(170, 170, 170, 0.3),
            0 0 8px rgba(170, 170, 170, 0.2),
            0 0 12px rgba(170, 170, 170, 0.15);
    }
    50% {
        text-shadow:
            0 0 6px rgba(170, 170, 170, 0.4),
            0 0 12px rgba(170, 170, 170, 0.3),
            0 0 18px rgba(170, 170, 170, 0.2);
    }
}

/* Зелёное свечение для блока роста */
.block-growth .block-text-glow {
    color: #02B78C;
    text-shadow:
        0 0 4px rgba(2, 183, 140, 0.3),
        0 0 8px rgba(2, 183, 140, 0.2),
        0 0 12px rgba(2, 183, 140, 0.15);
    animation: pulse-green-text 2s ease-in-out infinite;
}

@keyframes pulse-green-text {
    0%, 100% {
        text-shadow:
            0 0 4px rgba(2, 183, 140, 0.3),
            0 0 8px rgba(2, 183, 140, 0.2),
            0 0 12px rgba(2, 183, 140, 0.15);
    }
    50% {
        text-shadow:
            0 0 6px rgba(2, 183, 140, 0.4),
            0 0 12px rgba(2, 183, 140, 0.3),
            0 0 18px rgba(2, 183, 140, 0.2);
    }
}

/* ========================================
   СТРОГАЯ ИЗОЛЯЦИЯ СТИЛЕЙ ПО СЕКЦИЯМ
   Защита от конфликтов между слайдами
========================================= */

/* ИЗОЛЯЦИЯ: Первый слайд (HERO) */
.hero-section .animation-container:not(.equals-3d-container):not(.plus-to-x-container) {
    /* Стили применяются только к hero-section */
}

/* ИЗОЛЯЦИЯ: Процесс (первый анимированный слайд) */
.process-slide {
    isolation: isolate; /* CSS isolation для полной независимости */
}

.process-slide .logo-start,
.process-slide .x-flow,
.process-slide .symbols-container,
.process-slide .wave-logo-to-circle {
    /* Все анимации процесса изолированы */
}

/* ИЗОЛЯЦИЯ: Второй слайд (метрики) */
.metrics-slide {
    isolation: isolate;
}

.metrics-slide .metric-card,
.metrics-slide .metric-value,
.metrics-slide .metric-label {
    /* Стили метрик не влияют на другие секции */
}

/* ИЗОЛЯЦИЯ: Третий слайд (THREE BLOCKS) */
.three-blocks-section {
    isolation: isolate; /* Полная изоляция третьего слайда */
}

/* Все стили третьего слайда должны иметь префикс */
.three-blocks-section .block-item {
    /* Изолированные блоки */
}

.three-blocks-section .animation-container {
    /* Контейнеры анимаций только для этой секции */
}

/* ИЗОЛЯЦИЯ: Анимация знака = */
.three-blocks-section .equals-3d-container,
.three-blocks-section #equals3DScene,
.three-blocks-section .equals-symbol-3d,
.three-blocks-section .equals-bar {
    /* Эти стили НЕ должны применяться нигде кроме three-blocks-section */
}

/* ИЗОЛЯЦИЯ: Анимация + в × */
.three-blocks-section .plus-to-x-logo-style,
.three-blocks-section .morphing-symbol {
    /* Только для третьего слайда */
}

/* ИЗОЛЯЦИЯ: Взрыв коробки (левый блок третьего слайда) */
.three-blocks-section .box-explosion,
.three-blocks-section .fragment {
    /* Осколки только в левом блоке */
}

/* ЗАЩИТА: Запрет глобальных стилей для специфичных элементов */
/* Если элемент НЕ внутри .three-blocks-section, убираем стили */
.equals-3d-container:not(.three-blocks-section .equals-3d-container),
#equals3DScene:not(.three-blocks-section #equals3DScene),
.equals-symbol-3d:not(.three-blocks-section .equals-symbol-3d),
.equals-bar:not(.three-blocks-section .equals-bar) {
    display: none !important; /* Скрываем если не в правильной секции */
}

.plus-to-x-container:not(.three-blocks-section .plus-to-x-container),
.plus-to-x-animation:not(.three-blocks-section .plus-to-x-animation) {
    display: none !important; /* Скрываем если не в правильной секции */
}

/* ИЗОЛЯЦИЯ: Intro Section */
.intro-section {
    isolation: isolate;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: var(--space-3xl);
    padding-left: var(--space-3xl);
    padding-right: var(--space-3xl);
    padding-bottom: var(--space-3xl);
    position: relative;
    background: var(--color-bg-primary);
}

.intro-section .intro-content {
    width: 100%;
    transform: translateY(-25vh);
    text-align: center;
}

.intro-section .section-title {
    margin-bottom: var(--space-2xl);
}

/* Стиль заголовка как у Powered by experience */
.intro-title-styled {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Свечение для "Да" как у experience */
.da-glow {
    color: var(--color-primary);
    font-weight: 800;
    animation: daPulse 2s ease-in-out infinite;
    text-shadow:
        0 0 10px rgba(2, 183, 140, 0.8),
        0 0 20px rgba(0, 255, 161, 0.6),
        0 0 30px rgba(2, 183, 140, 0.4);
}

@keyframes daPulse {
    50% {
        opacity: 0.8;
        text-shadow:
            0 0 15px rgba(2, 183, 140, 1),
            0 0 30px rgba(0, 255, 161, 0.8),
            0 0 45px rgba(2, 183, 140, 0.6);
    }
}

/* ========================================
   PROGRESS BAR - БИЗНЕС ДИАГНОСТИКА
   ======================================== */

.business-progress-container {
    position: relative;
    margin-top: var(--space-md);
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.business-progress-container .progress-bar {
    position: relative;
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 2px 10px rgba(0, 0, 0, 0.2);
}

.business-progress-container .progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #FF4444;
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
    border-radius: 15px;
}

.progress-text-no {
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    font-size: var(--text-xl); /* Как у Powered by experience */
    font-weight: 600; /* Как у Powered by experience */
    color: var(--color-text-secondary); /* Серый цвет как у Powered by experience */
    text-align: center;
    text-transform: uppercase; /* Как у Powered by experience */
    letter-spacing: 0.1em; /* Как у Powered by experience */
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* Максимальная специфичность для блокировки анимаций */
.intro-section .business-progress-container .progress-text-no,
.business-progress-container .progress-text-no,
div.progress-text-no {
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
    text-shadow: none !important;
}

.progress-words {
    position: absolute;
    top: 180px;
    left: 50%;
    transform: translateX(-51%);
    width: 90vw;
    max-width: 1400px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-lg) var(--space-xl);
    transform-style: preserve-3d;
}

.progress-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--text-base);
    line-height: 2;
    perspective: 800px;
}

.progress-words .progress-list li {
    color: #FF4444;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(255, 68, 68, 0.2);
    margin-bottom: var(--space-lg);
    font-size: var(--text-lg);
    font-weight: 600;
    opacity: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    will-change: transform;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}

.progress-words .progress-list li.visible {
    opacity: 1;
    transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: float3d 8s ease-in-out infinite !important;
}

/* Gray text for columns 4-6 */
.progress-words .progress-list-gray li {
    color: #888888;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(136, 136, 136, 0.2);
}

/* Ensure gray words also get float animation */
.progress-words .progress-list-gray li.visible {
    opacity: 1;
    transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: float3d 8s ease-in-out infinite !important;
}

/* Flying X animation from center of Отсутствует to words */
.x-flow-intro {
    position: absolute;
    top: 70px;
    left: 40%;
    transform: translateX(-50%);
    width: 400px;
    height: 100px;
    pointer-events: none;
    z-index: 5;
}

/* Left X animation */
.x-flow-left .x-symbol-intro {
    position: absolute;
    font-size: 48px;
    font-weight: 800;
    color: #FF4444;
    opacity: 0;
    text-shadow: 0 0 20px rgba(255, 68, 68, 0.8);
    animation: flyXToWordsLeft 3s ease-in-out 1s infinite;
}

/* Right X animation - mirrored */
.x-flow-right {
    left: 60%;
}

.x-flow-right .x-symbol-intro {
    position: absolute;
    font-size: 48px;
    font-weight: 800;
    color: #888888;
    opacity: 0;
    text-shadow: 0 0 20px rgba(136, 136, 136, 0.8);
    animation: flyXToWordsRight 3s ease-in-out 1s infinite;
}

@keyframes flyXToWordsLeft {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
    10% {
        opacity: 1;
    }
    50% {
        opacity: 1;
        transform: translate(-280px, 100px) scale(0.6) rotate(360deg);
    }
    70% {
        opacity: 0;
        transform: translate(-280px, 100px) scale(0.4) rotate(540deg);
    }
    100% {
        opacity: 0;
        transform: translate(-280px, 100px) scale(0.4) rotate(540deg);
    }
}

@keyframes flyXToWordsRight {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
    10% {
        opacity: 1;
    }
    50% {
        opacity: 1;
        transform: translate(280px, 100px) scale(0.6) rotate(-360deg);
    }
    70% {
        opacity: 0;
        transform: translate(280px, 100px) scale(0.4) rotate(-540deg);
    }
    100% {
        opacity: 0;
        transform: translate(280px, 100px) scale(0.4) rotate(-540deg);
    }
}

/* Pulsing state for words when X touches them */
.progress-column-left .progress-list li.pulsing {
    animation: wordBrightPulse 0.6s ease-in-out;
}

@keyframes wordBrightPulse {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    }
    50% {
        filter: brightness(2) drop-shadow(0 0 30px rgba(255, 68, 68, 1));
    }
}


@keyframes pulse-red-glow {
    0%, 100% {
        box-shadow:
            inset 0 2px 8px rgba(255, 68, 68, 0.5),
            0 0 20px rgba(255, 68, 68, 0.3);
    }
    50% {
        box-shadow:
            inset 0 2px 12px rgba(255, 68, 68, 0.7),
            0 0 30px rgba(255, 68, 68, 0.5);
    }
}

@keyframes pulse-gray-glow {
    0%, 100% {
        box-shadow:
            inset 0 2px 8px rgba(136, 136, 136, 0.5),
            0 0 20px rgba(136, 136, 136, 0.3);
    }
    50% {
        box-shadow:
            inset 0 2px 12px rgba(136, 136, 136, 0.7),
            0 0 30px rgba(136, 136, 136, 0.5);
    }
}

@keyframes pulse-green-glow {
    0%, 100% {
        box-shadow:
            inset 0 2px 8px rgba(2, 183, 140, 0.5),
            0 0 20px rgba(2, 183, 140, 0.4);
    }
    50% {
        box-shadow:
            inset 0 2px 12px rgba(2, 183, 140, 0.7),
            0 0 35px rgba(2, 183, 140, 0.6);
    }
}

/* ИЗОЛЯЦИЯ: Features Section */
.features-section {
    isolation: isolate;
}

/* ИЗОЛЯЦИЯ: Footer */
.footer {
    isolation: isolate;
}

/* ========================================
   ДОПОЛНИТЕЛЬНАЯ ЗАЩИТА
   Изоляция контекста для критичных секций
========================================= */

/* Каждая секция создает новый контекст наложения */
.hero-section,
.process-slide,
.metrics-slide,
.three-blocks-section,
.intro-section,
.features-section,
.footer {
    position: relative; /* Создаем новый контекст позиционирования */
    isolation: isolate; /* Создаем новый контекст наложения */
    z-index: auto; /* Изолируем z-index стек */
}

/* Защита от случайного применения стилей анимаций к другим секциям */
body > :not(.three-blocks-section) .equals-3d-container,
body > :not(.three-blocks-section) .plus-to-x-logo-style {
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ========================================
   АДАПТИВНАЯ СИСТЕМА ДЛЯ ВСЕХ УСТРОЙСТВ
   Обеспечивает идеальный вид на любом экране
========================================= */

/*
BREAKPOINTS:
- 320-480px: Мобильные телефоны (portrait)
- 481-768px: Мобильные телефоны (landscape) и маленькие планшеты
- 769-992px: Планшеты
- 993-1366px: Маленькие ноутбуки
- 1367-1920px: Full HD мониторы и средние ноутбуки ⭐ КРИТИЧНЫЙ ДИАПАЗОН
- 1921-2560px: 2K мониторы
- 2561+: 4K и выше (MacBook Pro Retina)
*/

/* ========================================
   FULL HD (1920×1080) - КРИТИЧНЫЙ ДИАПАЗОН
   Специально для обычных PC мониторов (НЕ Retina)
========================================= */
/* Используем device-pixel-ratio для исключения Retina дисплеев (MacBook = 2.0, Full HD PC = 1.0) */
@media (min-width: 993px) and (max-width: 1920px) and (max-height: 1080px) and (max-resolution: 1.5dppx) {
    /* Второй слайд - Powered by Experience - БАЛАНС ДЛЯ FULL HD */
    .two-blocks-section {
        padding: var(--space-xl) var(--space-3xl); /* 32px сверху/снизу, 64px слева/справа */
        min-height: 100vh; /* Секция = весь экран */
    }

    .two-blocks-section .split-screen-container {
        height: calc(100vh - calc(var(--space-xl) * 2)); /* 100vh - 64px = 1016px (94% экрана) */
    }

    /* Внутренние отступы - оставляем как на MacBook для красоты */
    .two-blocks-section .split-left,
    .two-blocks-section .split-right {
        padding: var(--space-3xl); /* 64px внутри блоков */
    }

    /* Intro секция - переопределяем padding полностью */
    .intro-section {
        padding: var(--space-3xl) var(--space-xs) !important; /* 64px сверху/снизу, 4px слева/справа (минимум) */
    }

    /* Intro секция - убираем отступы вложенного контейнера */
    .intro-section .container {
        max-width: none !important; /* Убираем ограничение 1200px */
        padding: 0 !important; /* Убираем боковые отступы контейнера (24px) */
    }

    /* Третий слайд - Three blocks - выравнивание + 45% высоты */
    .three-blocks-container {
        height: auto;
        align-items: stretch; /* Все блоки ОДИНАКОВОЙ высоты */
    }

    .block-item {
        padding: var(--space-2xl); /* 48px padding */
        padding-top: calc(var(--space-2xl) * 1.45); /* Верхний padding +45% */
        padding-bottom: calc(var(--space-2xl) * 1.45); /* Нижний padding +45% */
        height: 100%; /* Растягиваем на всю высоту контейнера */
    }

    /* Четвёртый слайд - Why Outsource - увеличиваем ширину контента */
    .why-outsource-section {
        padding: var(--space-3xl) var(--space-3xl); /* 64px слева/справа как у других слайдов */
    }

    .why-outsource-section .container {
        max-width: none; /* Убираем ограничение 1200px */
        padding: 0; /* Убираем боковые отступы контейнера */
    }
}

/* ========================================
   2K МОНИТОРЫ (2560×1440)
   Ограничиваем ширину для читабельности
========================================= */
@media (min-width: 1921px) and (max-width: 2560px) {
    .two-blocks-section .split-screen-container {
        max-width: 1800px;
        margin: 0 auto;
    }

    /* Контейнеры для больших экранов */
    .hero-content,
    .intro-section > div,
    .industries-section > div {
        max-width: 1800px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========================================
   УНИВЕРСАЛЬНОЕ ПРАВИЛО ДЛЯ INTRO-SECTION
   Применяется на всех разрешениях > 993px (кроме Full HD)
========================================= */
@media (min-width: 993px) and (min-resolution: 1.6dppx) {
    /* Intro секция - устанавливаем правильные отступы как у других слайдов */
    .intro-section {
        padding: var(--space-3xl) var(--space-3xl) !important; /* 64px со всех сторон */
    }

    /* Industries секция - такие же отступы как у Intro */
    .industries-section {
        padding: var(--space-3xl) var(--space-3xl) !important; /* 64px со всех сторон */
    }

    /* Intro секция - растягиваем контент как у других секций */
    .intro-section .container {
        max-width: 100% !important; /* Растягиваем на всю ширину родителя */
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important; /* Убираем auto centering */
    }

    /* Industries секция - такая же ширина как у Intro */
    .industries-section .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }
}

/* ========================================
   RETINA ДИСПЛЕИ (MacBook Pro 16" и подобные)
   Высокая плотность пикселей
========================================= */
@media (min-width: 2561px),
       (-webkit-min-device-pixel-ratio: 2) and (min-width: 1367px) {
    /* Дополнительные стили для больших Retina экранов могут быть здесь */
}

/* ========================================
   МАЛЕНЬКИЕ НОУТБУКИ (1366×768)
   Компактные экраны ноутбуков
========================================= */
@media (min-width: 993px) and (max-width: 1366px) {
    .two-blocks-section {
        padding: var(--space-xl) var(--space-xl); /* 2rem = 32px */
    }

    .two-blocks-section .split-screen-container {
        height: calc(100vh - calc(var(--space-xl) * 2)); /* 100vh - 64px */
        grid-template-columns: 74% 24%; /* Больше места правому блоку */
        gap: 2%;
    }

    .two-blocks-section .split-left,
    .two-blocks-section .split-right {
        padding: var(--space-xl);
    }
}