/* 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: 0.875rem; /* МОБИЛЬНАЯ ВЕРСИЯ: уменьшено с 1rem */
    --space-lg: 1.25rem; /* МОБИЛЬНАЯ ВЕРСИЯ: уменьшено с 1.5rem */
    --space-xl: 1.75rem; /* МОБИЛЬНАЯ ВЕРСИЯ: уменьшено с 2rem */
    --space-2xl: 2.5rem; /* МОБИЛЬНАЯ ВЕРСИЯ: уменьшено с 3rem */
    --space-3xl: 3rem; /* МОБИЛЬНАЯ ВЕРСИЯ: уменьшено с 4rem */

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

    /* SVG Gradients */
    --gradient-start-color: rgba(2, 183, 140, 0.8);
    --gradient-end-color: rgba(0, 255, 161, 0.8);
    --gradient-stop-opacity: 1;
}

/* SVG Gradient Styles */
#arrowGlowGradient stop[offset="0%"] {
    stop-color: var(--gradient-start-color);
    stop-opacity: var(--gradient-stop-opacity);
}

#arrowGlowGradient stop[offset="100%"] {
    stop-color: var(--gradient-end-color);
    stop-opacity: var(--gradient-stop-opacity);
}

/* ========================================
   RESET & BASE STYLES
========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* ⚡ MOBILE: Убирает 300ms delay на touch событиях */
    touch-action: manipulation;
}

html {
    /* ⚡ MOBILE: Убрали scroll-behavior для производительности */
    scroll-behavior: auto; /* МОБИЛЬНАЯ ВЕРСИЯ: отключаем для производительности */
    scroll-padding-top: 0;
    overflow-y: auto;
    overflow-x: hidden;

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

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Глобальное исправление overflow */
body {
    font-family: var(--font-primary);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    line-height: 1.6;
    overflow-x: hidden !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: строго запрещаем горизонтальный скролл */
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 320px; /* Минимальная ширина сайта */

    /* Retina оптимизация для MacBook Pro 16" M1 Pro */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* CSS класс для управления overflow при открытом меню (замена inline стилей) */
body.menu-open {
    overflow: hidden !important;
}

/* ========================================
   ACCESSIBILITY - FOCUS INDICATORS
========================================= */
/* Видимый focus indicator для клавиатурной навигации */
*:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Убираем outline для мыши, оставляем только для клавиатуры */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Skip link для клавиатуры */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-background);
    color: var(--color-text-primary);
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100000;
    border-radius: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    transition: top var(--duration-fast) ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden,
.honeypot-field {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
    left: -9999px !important;
    display: none !important;
}

/* ========================================
   TYPOGRAPHY REFINEMENT
========================================= */
/* Headings унификация */
h1, .h1 {
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.02em;
}

h2, .h2 {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
}

h3, .h3 {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    line-height: 1.3;
    font-weight: 700;
}

h4, .h4 {
    font-size: clamp(1.125rem, 3.5vw, 1.5rem);
    line-height: 1.3;
    font-weight: 600;
}

/* Paragraphs */
p {
    font-size: clamp(0.9375rem, 2.5vw, 1.125rem);
    line-height: 1.6;
    margin-bottom: clamp(0.75rem, 2vw, 1rem);
}

/* Tablet: увеличенный line-height для paragraphs */
@media (min-width: 768px) {
    p {
        line-height: 1.7;
    }
}

/* Small text */
small, .text-sm {
    font-size: clamp(0.8125rem, 2.2vw, 0.9375rem);
    line-height: 1.5;
}

/* Links */
a {
    font-size: inherit;
    text-decoration: underline;
    color: var(--color-primary);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-secondary);
}

/* ========================================
   SLIDE SECTIONS - MOBILE-FIRST APPROACH
========================================= */
/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Глобальное исправление overflow для всех секций */
.hero,
.intro-section,
.industries-section,
.why-outsource-section,
.impact-section,
.services-section,
.partners-section,
.clients-section,
.how-it-works-section,
.sales-system-section,
.pricing-section,
.contact-section {
    position: relative;
    min-height: auto; /* МОБИЛЬНАЯ ВЕРСИЯ: высота по контенту */
    display: flex;
    flex-direction: column; /* МОБИЛЬНАЯ ВЕРСИЯ: вертикальный стек */
    align-items: stretch; /* МОБИЛЬНАЯ ВЕРСИЯ: растягиваем на всю ширину */
    /* ⚡ OPTIMIZATION: Изоляция перерисовок для плавного скролла */
    contain: layout style paint;
    transform: translateZ(0); /* GPU слой */
    justify-content: flex-start; /* МОБИЛЬНАЯ ВЕРСИЯ: контент сверху */
    overflow-x: hidden !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: запрещаем горизонтальный скролл */
    width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: полная ширина */
    max-width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: не выходим за границы */
    padding: clamp(1.5rem, 4vw, 2rem) var(--space-base); /* МОБИЛЬНАЯ ВЕРСИЯ: адаптивные вертикальные отступы */
    pointer-events: auto !important;
    z-index: 5;
}

/* МОБИЛЬНАЯ ВЕРСИЯ: секции всегда по контенту, без @media queries */

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

/* 3D Math визуализация - профессиональная */
/* МОБИЛЬНАЯ ВЕРСИЯ: скрываем на маленьких экранах */
.math-3d-container {
    display: none; /* МОБИЛЬНАЯ ВЕРСИЯ: скрыто по умолчанию */
    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;
}

/* Tablet: показываем math-3d-container с уменьшенным размером */
@media (min-width: 768px) {
    .math-3d-container {
        display: block;
        right: 5%;
        opacity: 0.2;
    }
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Увеличиваем размер math формул для лучшей читаемости */
.math-3d-line {
    font-size: clamp(1.2rem, 4vw, 1.8rem) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: больше размер (было 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;
    position: relative;
    /* ⚡ OPTIMIZATION: GPU ускорение для 3D трансформаций (will-change убран - создает лишние слои) */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Три состояния */
.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));
    }
}

/* Анимация импакта при попадании в цель - только свечение */
@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));
    }
}

/* Элементы формулы */
/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Увеличиваем размер math формул */
.math-base {
    font-size: clamp(1.2rem, 4vw, 1.8rem) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный размер (было 1em) */
    font-weight: 700;
}

.math-power {
    font-size: clamp(0.8rem, 2.5vw, 1.2rem) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный размер (было 0.55em) */
    vertical-align: super;
    opacity: 0.7;
    font-weight: 500;
}

.math-result {
    font-size: clamp(1.2rem, 4vw, 1.8rem) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный размер */
}

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

/* КРИТИЧНО: Знак = в зелёной формуле - solid зелёный (градиент на маленьком символе не виден) */
.math-growth .math-eq {
    background: none !important;
    -webkit-text-fill-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    opacity: 0.9;
    margin: 0 0.4em;
    text-shadow: 0 0 10px rgba(2, 183, 140, 0.5);
    display: inline;
    vertical-align: baseline;
}

/* КРИТИЧНО: Степень 365 в зелёной формуле - тоже solid зелёный */
.math-growth .math-power {
    background: none !important;
    -webkit-text-fill-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    opacity: 0.7;
    text-shadow: 0 0 8px rgba(2, 183, 140, 0.4);
}

.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);
    }
}

/* МОБИЛЬНАЯ ВЕРСИЯ: Плавная плавающая анимация для Hero текста */
/* МОБИЛЬНАЯ ВЕРСИЯ: Плавная плавающая анимация для Hero текста - улучшенная */
@keyframes textFloat {
    0%, 100% {
        transform: translateY(0px) translateZ(0);
    }
    25% {
        transform: translateY(-5px) translateZ(0); /* Увеличена амплитуда с -3px до -5px */
    }
    50% {
        transform: translateY(0px) translateZ(0);
    }
    75% {
        transform: translateY(5px) translateZ(0); /* Увеличена амплитуда с 3px до 5px */
    }
}

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

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

/* Планшеты - уменьшаем */

/* Мобильные - ПОКАЗЫВАЕМ формулы (1 в 1 как MacBook) */

/* ========================================
   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);
    pointer-events: none !important;
}

/* 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: clamp(1rem, 3vw, 2rem);
    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: clamp(1.5rem, 4vw, 2.5rem);
    width: 100%;
    max-width: clamp(250px, 60vw, 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: clamp(250px, 60vw, 300px);
}

.loading-text {
    font-size: clamp(1rem, 3vw, 1.125rem);
    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: clamp(3px, 0.8vw, 4px);
    background: rgba(255, 255, 255, 0.1);
    border-radius: clamp(4px, 1vw, 8px);
    overflow: hidden;
    backdrop-filter: blur(10px);
    
    /* ⚡ PERFORMANCE: Оптимизация для плавного скролла */
    transform: translateZ(0);
    contain: layout style paint;
    backface-visibility: hidden;
}

.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;
    /* ⚡ OPTIMIZATION: Изоляция для плавного скролла */
    contain: strict;
    will-change: transform; /* Оставляем для активно анимируемого фона */
}

.floating-element {
    position: absolute;
    width: 6px;
    height: 6px;
    /* ⚡ OPTIMIZATION: GPU ускорение для анимируемых элементов */
    transform: translateZ(0);
    backface-visibility: hidden;
    background: var(--color-primary);
    border-radius: 50%;
    /* opacity управляется через liquid-glass.css */
    top: 0; /* Стартовая позиция - анимация сама задаёт translateY */
    /* МОБИЛЬНАЯ ВЕРСИЯ: Частицы летят сверху вниз */
    animation: float 40s linear infinite;
    /* will-change убран - transform: translateZ(0) достаточно для GPU ускорения */
    /* Гарантируем видимость */
    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(-30vh) scale(1); /* Старт далеко выше экрана */
    }
    100% {
        transform: translateY(120vh) scale(1); /* Финиш далеко ниже экрана */
    }
}

/* ========================================
   NAVIGATION
========================================= */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    
    /* Баланс между читаемостью и прозрачностью */
    background: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* ⚡ OPTIMIZATION: GPU ускорение для плавного скролла (will-change только для backdrop-filter) */
    transform: translateZ(0);
    will-change: backdrop-filter; /* Только backdrop-filter, transform уже ускорен через translateZ(0) */
    contain: layout style paint;
    backface-visibility: hidden;
    isolation: isolate; /* Изоляция для backdrop-filter */
    
    /* Светящаяся рамка */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    
    /* Глубина через shadows */
    box-shadow: 
        0 4px 24px 0 rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    
    /* Закруглённые нижние углы */
    border-radius: 0 0 12px 12px;
    
    /* Плавный переход */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tablet: увеличить backdrop-filter blur для лучшей читаемости */
@media (min-width: 768px) {
    .navbar {
        backdrop-filter: blur(30px) saturate(180%);
        -webkit-backdrop-filter: blur(30px) saturate(180%);
    }
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    /* МОБИЛЬНАЯ ВЕРСИЯ: Еще больше уменьшен padding для минимальной высоты navbar */
    padding: clamp(0.75rem, 2vw, 1rem) var(--space-lg) !important; /* Адаптивный padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: auto !important; /* Убираем минимальную высоту */
    position: relative;
    z-index: 1003; /* Выше всего для корректной работы кликов */
}

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

    /* Убрать все подчеркивания и границы */
    text-decoration: none !important;
    border: none;
    border-bottom: none !important;
    outline: none;

    /* Убрать tap highlight на мобильных */
    -webkit-tap-highlight-color: transparent;

    /* Убрать box-shadow при фокусе */
    box-shadow: none !important;

    /* Transition для плавности */
    transition: opacity var(--duration-normal) ease;
}

/* Специфичное правило когда .nav-logo это ссылка (на статьях/сертификатах) */
a.nav-logo .logo-text,
a.nav-logo .logo-asterisk {
    font-size: clamp(1rem, 4vw, 1.25rem) !important; /* Mobile */
    font-weight: 900 !important;
}

/* Убрать ::after если он случайно применился */
.nav-logo::after,
.nav-logo::before {
    content: none !important;
    display: none !important;
}

/* Убрать эффекты при hover/focus/active */
.nav-logo:hover,
.nav-logo:focus,
.nav-logo:active {
    text-decoration: none !important;
    border-bottom: none !important;
    outline: none !important;
    opacity: 0.8;
}

.logo-text {
    font-size: clamp(1rem, 4vw, 1.25rem) !important; /* Mobile */
    font-weight: 900 !important;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
}

/* Tablet */
@media (min-width: 768px) {
    a.nav-logo .logo-text,
    a.nav-logo .logo-asterisk {
        font-size: clamp(1.125rem, 2vw, 1.5rem) !important;
    }
    
    .logo-text {
        font-size: clamp(1.125rem, 2vw, 1.5rem) !important;
    }
}

.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: 1.25rem !important;
    font-weight: 900 !important;
    animation: subtitlePulse 2s ease-in-out infinite;
    display: inline-block;
}

/* ========================================
   MOBILE NAVIGATION - Бургер-меню всегда видимо
   ======================================== */
.nav-menu {
    position: fixed;
    top: 70px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 70px);
    background: rgba(26, 26, 26, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: var(--space-xl);
    gap: clamp(0.75rem, 2vw, 1rem);
    transition: left var(--duration-normal) ease;
    z-index: 1001; /* Выше навбара (z-index: 1000) */
    overflow-y: auto;
    display: flex; /* Явно указываем display для корректной работы */
}

.nav-menu.active {
    left: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Tablet: боковое меню (slide-in справа) */
@media (min-width: 768px) {
    .nav-menu {
        top: 0;
        left: auto;
        right: -400px;
        width: clamp(300px, 30vw, 400px);
        height: 100vh;
        justify-content: center;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .nav-menu.active {
        right: 0;
        left: auto;
    }
}

/* Улучшение touch targets для nav-links */
.nav-link {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    padding: clamp(0.75rem, 2vw, 1rem);
    transition: all 0.2s ease;
    font-size: clamp(0.875rem, 2.5vw, 1rem);
}

/* Активное состояние для текущей секции */
.nav-link.active {
    background: rgba(2, 183, 140, 0.1);
    border-left: 3px solid var(--color-primary);
}

/* Hover эффект только на устройствах с hover */
@media (hover: hover) {
    .nav-link:hover {
        background: rgba(255, 255, 255, 0.05);
        transform: translateX(4px);
    }
}

/* Touch эффект */
.nav-link:active {
    background: rgba(2, 183, 140, 0.15);
    transform: scale(0.98);
}

.nav-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: clamp(1rem, 3vw, 1.125rem); /* МОБИЛЬНАЯ ВЕРСИЯ: адаптивный размер */
    padding: clamp(0.875rem, 2vw, 1rem); /* МОБИЛЬНАЯ ВЕРСИЯ: адаптивный padding */
    min-height: 44px; /* МОБИЛЬНАЯ ВЕРСИЯ: минимум для touch */
    transition: color var(--duration-normal) ease;
    position: relative;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tablet: уменьшить ширину пунктов меню */
@media (min-width: 768px) {
    .nav-link {
        width: auto;
        min-width: 120px;
    }
}

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

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

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

/* Бургер-меню всегда видимо в мобильной версии */
.nav-hamburger {
    display: flex !important;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
    z-index: 1002; /* Выше меню (z-index: 1001) */
    min-width: 44px; /* МОБИЛЬНАЯ ВЕРСИЯ: минимум для touch (iOS) */
    min-height: 44px; /* МОБИЛЬНАЯ ВЕРСИЯ: минимум для touch (iOS) */
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 2vw, 1rem);
    position: relative;
    pointer-events: auto !important; /* Гарантируем что клики работают */
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1); /* Визуальная обратная связь при клике */
}

/* Android: увеличить touch target до 48px */
@media (hover: none) and (pointer: coarse) {
    .nav-hamburger {
        min-width: 48px;
        min-height: 48px;
    }
}

.nav-hamburger span {
    width: clamp(20px, 5vw, 24px);
    height: 2px;
    background: var(--color-text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
    position: relative;
}

/* Улучшенная анимация бургера при открытии */
.nav-hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
    width: clamp(20px, 5vw, 24px);
}

.nav-hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
    width: 0;
}

.nav-hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
    width: clamp(20px, 5vw, 24px);
}

/* Ripple эффект при клике */
.nav-hamburger {
    position: relative;
    overflow: hidden;
}

.nav-hamburger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.nav-hamburger:active::after {
    width: 100px;
    height: 100px;
}

/* ========================================
   HERO SECTION
========================================= */
.hero {
    /* МОБИЛЬНАЯ ВЕРСИЯ: Текст размещён посередине */
    display: flex;
    align-items: center !important; /* Центрирование по вертикали */
    justify-content: center !important; /* Центрирование по горизонтали */
    /* МОБИЛЬНАЯ ВЕРСИЯ: padding-top компенсирует высоту фиксированного navbar */
    padding-top: clamp(4.5rem, 12vw, 6rem) !important; /* Отступ сверху для navbar (60-96px) */
    padding-bottom: var(--space-xl);
    padding-left: var(--space-base);
    padding-right: var(--space-base);
    position: relative;
    /* МОБИЛЬНАЯ ВЕРСИЯ: Убеждаемся, что весь текст виден */
    overflow: visible !important;
    min-height: calc(100vh - clamp(3.5rem, 10vw, 5rem)) !important; /* Высота экрана минус navbar */
    width: 100% !important;
    max-width: 100% !important;
}

/* МОБИЛЬНАЯ ВЕРСИЯ: hero всегда по контенту (без @media queries) */

/* МОБИЛЬНАЯ ВЕРСИЯ: Контейнер без обрезки текста, центрирование контента */
.hero-container {
    max-width: 100% !important;
    margin: 0 auto;
    /* МОБИЛЬНАЯ ВЕРСИЯ: Уменьшен padding-top, так как он уже есть в .hero */
    padding: 0 var(--space-base) var(--space-xl) var(--space-base) !important;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-items: center !important; /* Центрирование по горизонтали */
    justify-content: center !important; /* Центрирование по вертикали */
    width: 100% !important;
    /* МОБИЛЬНАЯ ВЕРСИЯ: Убеждаемся, что весь текст виден */
    overflow: visible !important;
    min-height: auto;
}

/* ДЕСКТОП: двухколоночная сетка только на больших экранах */
    /* МОБИЛЬНАЯ ВЕРСИЯ: @media блок удален */

.hero-content {
    max-width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ: полная ширина для видимости текста */
    position: relative;
    z-index: 5;
    width: 100% !important;
    /* МОБИЛЬНАЯ ВЕРСИЯ: Убеждаемся, что весь текст виден */
    overflow: visible !important;
    padding: 0;
}

/* Контейнер для всех 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;
}

/* Tablet: показываем badges с плавной анимацией */
@media (min-width: 768px) {
    .hero-badges {
        opacity: 1 !important;
        pointer-events: auto !important;
        flex-wrap: wrap;
        gap: clamp(0.5rem, 1.5vw, 0.75rem);
        animation: fadeInUp 0.6s ease-out;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Мобильная версия - скрываем badges и добавляем отступы */

.hero-badge {
    display: inline-flex !important;
    align-items: center;
    gap: clamp(0.25rem, 1vw, 0.5rem);
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid transparent;
    padding: clamp(0.375rem, 1.5vw, 0.5rem) clamp(0.5rem, 2vw, 0.875rem);
    border-radius: 50px;
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    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;
    min-width: 44px; /* Touch target минимум 44px */
    height: auto;
    position: relative;
    overflow: hidden;
    background-clip: padding-box;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05);
    
    /* ⚡ OPTIMIZATION: GPU ускорение для backdrop-filter */
    transform: translateZ(0);
    will-change: backdrop-filter;
    backface-visibility: hidden;
}

/* Тонкий 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 (только на устройствах с hover) */
@media (hover: hover) {
    .hero-badge:hover {
        background: rgba(255, 255, 255, 0.05);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
}

/* Touch эффект для мобильных устройств */
.hero-badge:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.08);
}

/* МОБИЛЬНАЯ ВЕРСИЯ: Текст виден полностью, с плавной плавающей анимацией */
.hero-title {
    /* Адаптивный размер для разных экранов */
    font-size: clamp(1.75rem, 8vw, 2.25rem); /* Mobile Small (320-374px) */
    font-weight: 900;
    line-height: clamp(1.2, 1.3, 1.4) !important; /* Адаптивный line-height для лучшей читаемости */
    /* ⚡ PERFORMANCE: GPU ускорение */
    transform: translateZ(0); /* МОБИЛЬНАЯ ВЕРСИЯ: GPU ускорение для анимации */
    backface-visibility: hidden;
    margin-top: 0 !important;
    margin-bottom: clamp(1rem, 3vw, 1.75rem);
    letter-spacing: -0.02em;
    /* МОБИЛЬНАЯ ВЕРСИЯ: Текст виден сразу и полностью */
    opacity: 1 !important;
    visibility: visible !important;
    /* МОБИЛЬНАЯ ВЕРСИЯ: Плавная плавающая анимация - улучшенная */
    animation: textFloat 5s ease-in-out infinite;
    /* will-change оставлен для активно анимируемого элемента */
    will-change: transform;
    /* МОБИЛЬНАЯ ВЕРСИЯ: Убеждаемся, что весь текст виден */
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important; /* Предотвращение разрыва слов */
    white-space: normal !important;
    padding: 0 !important;
    text-align: center !important; /* Центрирование текста */
    hyphens: none !important; /* Отключение автоматических переносов */
}

/* Mobile Medium (375-414px) */
@media (min-width: 375px) {
    .hero-title {
        font-size: clamp(2.25rem, 9vw, 3rem);
    }
}

/* Mobile Large (415-767px) */
@media (min-width: 415px) {
    .hero-title {
        font-size: clamp(2.5rem, 7vw, 3.5rem);
    }
}

/* Tablet (768-1024px) */
@media (min-width: 768px) {
    .hero-title {
        font-size: clamp(3rem, 5vw, 4.5rem);
    }
}

.title-line {
    display: block;
    /* МОБИЛЬНАЯ ВЕРСИЯ: Плавная плавающая анимация - улучшенная */
    transform: translateZ(0);
    /* МОБИЛЬНАЯ ВЕРСИЯ: Текст виден сразу и полностью */
    opacity: 1 !important;
    visibility: visible !important;
    /* МОБИЛЬНАЯ ВЕРСИЯ: Плавная плавающая анимация с задержкой для каждой строки */
    animation: textFloat 5s ease-in-out infinite; /* Ускорена с 6s до 5s */
    will-change: transform;
    /* МОБИЛЬНАЯ ВЕРСИЯ: Убеждаемся, что весь текст виден */
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important; /* Предотвращение разрыва слов */
    white-space: normal !important;
    overflow: visible !important;
    hyphens: none !important; /* Отключение автоматических переносов */
}

/* Задержки для каждой строки для органичности */
.title-line:nth-child(1) { animation-delay: 0s; }
.title-line:nth-child(2) { animation-delay: 0.15s; }
.title-line:nth-child(3) { animation-delay: 0.3s; }
.title-line:nth-child(4) { animation-delay: 0.45s; }
.title-line:nth-child(5) { animation-delay: 0.6s; }

.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: none !important;
}

.hero-subtitle {
    font-size: clamp(0.9375rem, 2.8vw, 1.125rem); /* Mobile */
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
    /* ⚡ PERFORMANCE: GPU ускорение */
    transform: translateZ(0);
    backface-visibility: hidden;
    line-height: 1.6;
    /* МОБИЛЬНАЯ ВЕРСИЯ: Текст виден сразу и полностью, с плавающей анимацией */
    opacity: 1 !important;
    visibility: visible !important;
    /* МОБИЛЬНАЯ ВЕРСИЯ: Плавная плавающая анимация */
    animation: textFloat 6s ease-in-out infinite 1s;
    will-change: transform;
    text-align: center !important; /* Центрирование текста */
}

/* Tablet */
@media (min-width: 768px) {
    .hero-subtitle {
        font-size: clamp(1.125rem, 2vw, 1.375rem);
    }
}

/* Выделение текста в 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: none !important;
}

@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;
        flex-direction: column; /* МОБИЛЬНАЯ ВЕРСИЯ: вертикальная компоновка */
        gap: var(--space-base);
        width: 100%;
        /* МОБИЛЬНАЯ ВЕРСИЯ: Кнопки расположены ниже - увеличенный отступ сверху */
        margin-top: clamp(2rem, 5vw, 3rem) !important;
    }

/* Tablet: горизонтальная компоновка кнопок */
@media (min-width: 768px) {
    .hero-actions {
        flex-direction: row;
        justify-content: center;
        width: auto;
        gap: clamp(0.75rem, 2vw, 1rem); /* Адаптивный gap между кнопками */
    }
}

.btn-primary, .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.25rem, 1vw, 0.5rem);
    min-height: 44px; /* Touch target минимум 44px для iOS */
    min-width: 44px; /* Touch target минимум 44px */
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.25rem, 4vw, 2rem); /* Адаптивный padding */
    padding: clamp(0.875rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem); /* МОБИЛЬНАЯ ВЕРСИЯ: адаптивный padding */
    min-height: 44px; /* МОБИЛЬНАЯ ВЕРСИЯ: минимум для touch (Apple HIG) */
    border-radius: 50px;
    font-weight: 600;
    font-size: clamp(0.875rem, 2.5vw, 1rem); /* МОБИЛЬНАЯ ВЕРСИЯ: адаптивный размер шрифта */
    text-decoration: none;
    transition: all var(--duration-normal) ease;
    border: 1px solid transparent;
    width: 100%; /* МОБИЛЬНАЯ ВЕРСИЯ: кнопки в полную ширину */
    max-width: 100%;
    /* ⚡ PERFORMANCE: GPU ускорение для hover эффектов */
    transform: translateZ(0);
    /* will-change убран - используется только при активной анимации */
    backface-visibility: hidden;
}

/* Tablet: кнопки с auto width и min-width */
@media (min-width: 768px) {
    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        width: auto;
        min-width: 200px;
    }
}

.btn-primary {
    /* ЭФФЕКТ НАВБАРА - ТОЧНО 1 В 1 КАК НАВБАР (КОПИРУЕМ ВСЕ СВОЙСТВА) */
    background: rgba(26, 26, 26, 0.6); /* Точно как навбар */
    backdrop-filter: blur(20px) saturate(180%); /* Точно как навбар */
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* GPU ускорение - точно как навбар */
    transform: translateZ(0);
    will-change: backdrop-filter; /* Точно как навбар */
    contain: layout style paint; /* Точно как навбар */
    backface-visibility: hidden;
    isolation: isolate; /* Точно как навбар */
    
    /* Светящаяся рамка - точно как навбар (border-bottom у навбара, у кнопок border) */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Точно как навбар border-bottom */
    
    /* Глубина через shadows - точно как навбар */
    box-shadow: 
        0 4px 24px 0 rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    
    /* Плавный переход - точно как навбар */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Дополнительные свойства для кнопок */
    color: var(--color-text-primary);
    background-clip: padding-box;
    position: relative;
    overflow: hidden;
}

/* УБРАН ::before - навбар не имеет анимированного border */

/* 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 {
    /* Hover эффект - легкое усиление прозрачности (как навбар) */
    background: rgba(26, 26, 26, 0.7); /* Немного темнее при hover */
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    transform: translateY(-2px) translateZ(0);
    border-color: rgba(255, 255, 255, 0.2); /* Немного ярче border */
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.5),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

/* 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-primary.loading {
    pointer-events: none;
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-primary.loading .btn-spinner {
    display: inline-block;
}

.btn-primary .btn-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-text-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn-secondary {
    /* ЭФФЕКТ НАВБАРА - ТОЧНО 1 В 1 КАК НАВБАР (КОПИРУЕМ ВСЕ СВОЙСТВА) */
    background: rgba(26, 26, 26, 0.6); /* Точно как навбар */
    backdrop-filter: blur(20px) saturate(180%); /* Точно как навбар */
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* GPU ускорение - точно как навбар */
    transform: translateZ(0);
    will-change: backdrop-filter; /* Точно как навбар */
    contain: layout style paint; /* Точно как навбар */
    backface-visibility: hidden;
    isolation: isolate; /* Точно как навбар */
    
    /* Светящаяся рамка - точно как навбар (border-bottom у навбара, у кнопок border) */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Точно как навбар border-bottom */
    
    /* Глубина через shadows - точно как навбар */
    box-shadow: 
        0 4px 24px 0 rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    
    /* Плавный переход - точно как навбар */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Дополнительные свойства для кнопок */
    color: var(--color-text-primary);
    background-clip: padding-box;
    position: relative;
    overflow: hidden;
}

/* УБРАН ::before - навбар не имеет анимированного border */

/* 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 {
    /* Hover эффект - легкое усиление прозрачности (как навбар) */
    background: rgba(26, 26, 26, 0.7); /* Немного темнее при hover */
    backdrop-filter: blur(25px) saturate(200%);
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    transform: translateY(-2px) translateZ(0);
    border-color: rgba(255, 255, 255, 0.2); /* Немного ярче border */
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.5),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

/* 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-visual[hidden] {
    display: none !important;
}

.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: none; /* Mobile: скрыт */
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Tablet: показываем с уменьшенным размером */
@media (min-width: 768px) {
    .hero-3d-object {
        display: flex;
        width: clamp(250px, 30vw, 350px);
        height: clamp(250px, 30vw, 350px);
    }
}

.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
========================================= */
/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Адаптивный container с правильными отступами */
.container {
    width: 100%;
    max-width: 100%; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: полная ширина на мобильных (было 1200px) */
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 1.5rem) !important; /* Mobile */
}

/* Tablet */
@media (min-width: 768px) {
    .container {
        padding: 0 clamp(1.5rem, 4vw, 2rem) !important;
    }
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Адаптивный padding для секций */
section {
    padding: clamp(2rem, 5vw, 3rem) 0 !important; /* Mobile: вертикальный padding */
    padding-left: clamp(1rem, 4vw, 1.5rem) !important; /* Mobile: горизонтальный padding */
    padding-right: clamp(1rem, 4vw, 1.5rem) !important;
}

/* Tablet */
@media (min-width: 768px) {
    section {
        padding: clamp(3rem, 6vw, 4rem) 0 !important; /* Tablet: вертикальный padding */
        padding-left: clamp(2rem, 5vw, 3rem) !important; /* Tablet: горизонтальный padding */
        padding-right: clamp(2rem, 5vw, 3rem) !important;
    }
}

.section-padding {
    padding: clamp(2rem, 5vw, 3rem) 0; /* Mobile */
}

@media (min-width: 768px) {
    .section-padding {
        padding: clamp(3rem, 6vw, 4rem) 0; /* Tablet */
    }
}

/* ========================================
   ACCESSIBILITY
========================================= */
/* Focus states для клавиатурной навигации */
*:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-primary);
    color: var(--color-text-primary);
    padding: 1rem;
    text-decoration: none;
    z-index: 10000;
}

.skip-link:focus {
    top: 0;
}

/* Улучшенные focus states для интерактивных элементов */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ARIA hidden для декоративных элементов */
[aria-hidden="true"] {
    display: none;
}

/* ========================================
   TOAST NOTIFICATIONS
========================================= */
.toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(280px, 90vw, 320px); /* Mobile */
    padding: clamp(0.75rem, 2vw, 1rem);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    z-index: 10000;
    pointer-events: none;
}

/* Tablet */
@media (min-width: 768px) {
    .toast-container {
        width: clamp(320px, 40vw, 400px);
    }
}

.toast {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: clamp(0.75rem, 2vw, 1rem);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.toast-close {
    min-width: 32px;
    min-height: 32px;
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
}

.toast-close:hover {
    color: var(--color-text-primary);
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Адаптивная типографика для section-title */
.section-title {
    font-size: clamp(1.5rem, 5vw, 2rem) !important; /* Mobile */
    font-weight: 800;
    text-align: center;
    margin-bottom: clamp(var(--space-xl), 4vw, var(--space-3xl)) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный отступ */
    letter-spacing: -0.02em;
}

/* Tablet */
@media (min-width: 768px) {
    .section-title {
        font-size: clamp(2rem, 4vw, 2.5rem) !important;
    }
}

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

/* CSS классы для reveal анимаций (замена inline стилей) */
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   WHY SECTION (Нужны ли мы вам?)
========================================= */
.why-section {
    padding: clamp(2rem, 5vw, 3rem) 0; /* Адаптивный вертикальный padding */
}

.why-section .section-title {
    font-size: clamp(1.5rem, 5vw, 2rem); /* Mobile */
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
}

/* Tablet */
@media (min-width: 768px) {
    .why-section .section-title {
        font-size: clamp(2rem, 4vw, 2.5rem);
    }
}

.why-subtitle {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    color: var(--color-text-secondary);
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    text-align: center;
}

.why-words-list {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 2vw, 1.25rem); /* Улучшенный gap */
    justify-content: center;
    margin-top: clamp(1rem, 3vw, 1.5rem);
}

/* Mobile: 2 колонки с wrap */
@media (max-width: 767px) {
    .why-words-list {
        justify-content: flex-start;
    }
}

/* Tablet: 3-4 колонки с wrap */
@media (min-width: 768px) {
    .why-words-list {
        gap: clamp(0.75rem, 2vw, 1rem);
    }
}

.why-word {
    font-size: clamp(0.8125rem, 2.2vw, 1rem);
    padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
    border-radius: clamp(4px, 1vw, 8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-secondary);
    transition: all 0.3s ease;
    min-height: 44px; /* Touch-friendly: активная область минимум 44px */
    min-width: 44px; /* Touch target минимум 44px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    word-break: break-word; /* Перенос длинных слов */
    overflow-wrap: break-word;
    animation: fadeInUp 0.4s ease-out; /* Плавная анимация появления */
    opacity: 0;
    animation-fill-mode: forwards;
}

/* Задержка анимации для каждого элемента */
.why-word:nth-child(1) { animation-delay: 0.1s; }
.why-word:nth-child(2) { animation-delay: 0.15s; }
.why-word:nth-child(3) { animation-delay: 0.2s; }
.why-word:nth-child(4) { animation-delay: 0.25s; }
.why-word:nth-child(5) { animation-delay: 0.3s; }
.why-word:nth-child(6) { animation-delay: 0.35s; }
.why-word:nth-child(n+7) { animation-delay: 0.4s; }

/* Hover эффекты только для устройств с hover */
@media (hover: hover) {
    .why-word:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
    }
    
    .why-word.missing-word:hover {
        background: rgba(255, 68, 68, 0.1);
        border-color: rgba(255, 68, 68, 0.3);
        color: #ff4444;
    }
    
    .why-word.present-word:hover {
        background: rgba(2, 183, 140, 0.1);
        border-color: rgba(2, 183, 140, 0.3);
        color: var(--color-primary);
    }
}

/* Active state для touch устройств */
.why-word:active {
    transform: translateY(0);
    opacity: 0.8;
}

.why-word.missing-word {
    color: rgba(255, 68, 68, 0.7);
    border-color: rgba(255, 68, 68, 0.2);
}

.why-word.present-word {
    color: rgba(2, 183, 140, 0.8);
    border-color: rgba(2, 183, 140, 0.2);
}

/* ========================================
   QUOTE SECTION (Фотография и цитата)
========================================= */
.quote-section {
    padding: clamp(2rem, 5vw, 3rem) 0;
}

.split-screen-container {
    display: flex;
    flex-direction: column; /* Mobile: вертикальная компоновка */
    gap: clamp(1.5rem, 4vw, 3rem); /* Адаптивный gap */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* Предотвращаем горизонтальный overflow */
}

/* Tablet: горизонтальная компоновка */
@media (min-width: 768px) {
    .split-screen-container {
        flex-direction: row;
        align-items: center; /* Центрирование по вертикали */
        gap: clamp(2rem, 5vw, 4rem); /* Больший gap на планшетах */
    }
}

.quote-photo {
    width: 100%;
    padding: clamp(1rem, 3vw, 2rem);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Tablet */
@media (min-width: 768px) {
    .quote-photo {
        width: clamp(40%, 35vw, 45%);
        padding: clamp(1.5rem, 3vw, 2rem);
    }
}

.quote-photo-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1rem);
}

.author-photo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.author-photo {
    width: clamp(120px, 30vw, 180px); /* Mobile: круглое изображение */
    height: clamp(120px, 30vw, 180px);
    border-radius: 50%;
    object-fit: cover; /* Сохранение пропорций */
    border: 3px solid rgba(2, 183, 140, 0.2); /* Тонкая рамка */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Тень для глубины */
}

/* Tablet: увеличенный размер */
@media (min-width: 768px) {
    .author-photo {
        width: clamp(180px, 20vw, 240px);
        height: clamp(180px, 20vw, 240px);
    }
}

.quote-photo-text {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    text-align: center;
    color: var(--color-text-secondary);
    margin-top: clamp(0.75rem, 2vw, 1rem);
    line-height: 1.6;
}

.quote-photo-text p {
    margin: 0.25rem 0;
}

.quote-content {
    width: 100%;
    padding: clamp(1rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Tablet */
@media (min-width: 768px) {
    .quote-content {
        width: clamp(55%, 50vw, 60%);
    }
}

.quote-content-wrapper {
    width: 100%;
}

.quote-main-content {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 1.5rem);
}

.quote-text {
    font-size: clamp(1rem, 3vw, 1.25rem); /* Mobile */
    line-height: clamp(1.5, 1.6, 1.7); /* Адаптивный line-height */
    padding: clamp(1rem, 3vw, 2rem);
    font-style: italic;
    color: var(--color-text-primary);
    word-wrap: break-word; /* Перенос длинных слов */
    overflow-wrap: break-word;
    hyphens: auto; /* Автоматическая расстановка переносов */
    margin: 0;
    text-align: left;
}

/* Tablet */
@media (min-width: 768px) {
    .quote-text {
        font-size: clamp(1.125rem, 2vw, 1.375rem);
        line-height: 1.7;
    }
}

.quote-text p {
    margin: 0;
}

.quote-signature-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: clamp(1rem, 3vw, 1.5rem);
}

.quote-signature {
    max-width: clamp(150px, 40vw, 200px); /* Mobile */
    height: auto;
    display: block;
}

/* Tablet */
@media (min-width: 768px) {
    .quote-signature {
        max-width: clamp(200px, 25vw, 250px);
    }
}

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

/* ========================================
   ВТОРОЙ СЛАЙД: TWO BLOCKS SECTION (ИЗОЛЯЦИЯ)
   ======================================== */
/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Исправляем overflow для two-blocks-section */
.two-blocks-section {
    /* МОБИЛЬНАЯ ВЕРСИЯ: базовые стили уже заданы выше */
    display: flex;
    flex-direction: column; /* Mobile: вертикальная компоновка */
    align-items: flex-start; /* МОБИЛЬНАЯ ВЕРСИЯ: контент сверху */
    padding: var(--space-xl) var(--space-base); /* МОБИЛЬНАЯ ВЕРСИЯ: нормальные отступы */
    position: relative;
    background: var(--color-bg-primary);
    overflow-x: hidden !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: запрещаем горизонтальный скролл */
    overflow-y: visible !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: разрешаем вертикальный скролл */
    width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: полная ширина */
    max-width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: не выходим за границы */
    gap: clamp(1.5rem, 4vw, 3rem); /* Gap между блоками */
}

/* Tablet: улучшенный gap */
@media (min-width: 768px) {
    .two-blocks-section {
        gap: clamp(2rem, 5vw, 4rem); /* Больший gap на планшетах */
    }
}

/* Tablet: горизонтальная компоновка */
@media (min-width: 768px) {
    .two-blocks-section {
        flex-direction: row;
        align-items: stretch;
    }
    
    .two-blocks-section .split-left,
    .two-blocks-section .split-right {
        flex: 1;
    }
}

/* МОБИЛЬНАЯ ВЕРСИЯ: split-screen-container удалён, используем прямую структуру */

/* Left Side - Dark with Animation + Liquid Glass */
/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Уменьшаем padding и исправляем overflow для split-left */
/* МОБИЛЬНАЯ ВЕРСИЯ: Упрощённый split-left - лёгкая карточка */
.two-blocks-section .split-left {
    position: relative;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    min-height: auto !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1rem, 4vw, 1.5rem) !important;
    text-align: center;
    width: 100% !important;
    max-width: 100% !important;
    
    /* Лёгкая карточка вместо heavy liquid-glass */
    background: rgba(10, 10, 10, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    /* БЕЗ backdrop-filter, БЕЗ box-shadow для производительности */
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Адаптируем размер градиента и делаем менее заметным */
.two-blocks-section .split-left::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(200px, 50vw, 400px) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный размер (было 600px) */
    height: clamp(200px, 50vw, 400px) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный размер (было 600px) */
    background: radial-gradient(circle, rgba(2, 183, 140, 0.08) 0%, transparent 70%) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: менее заметный (было 0.15) */
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.5 !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: дополнительное уменьшение видимости */
}

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

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Адаптивная типографика для split-title */
.two-blocks-section .split-title {
    font-size: clamp(1.5rem, 5vw, 2.5rem) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный размер (было 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 */
/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Адаптивная типографика для powered-title */
.powered-title {
    font-size: clamp(1.5rem, 5vw, 2rem) !important; /* Mobile */
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: clamp(var(--space-xl), 4vw, var(--space-3xl)) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный отступ */
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Tablet */
@media (min-width: 768px) {
    .powered-title {
        font-size: clamp(2rem, 4vw, 2.5rem) !important;
    }
}

.experience-glow {
    color: var(--color-primary);
    font-weight: 800;
    font-size: inherit;
    line-height: 1;
    display: inline-block;
    vertical-align: baseline;
    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);
    }
}

/* Highlight number glow effect (как у Powered by) */
.highlight-number {
    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);
}

/* Animation Container */
/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Упрощаем animation-container */
.animation-container {
    width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: полная ширина */
    max-width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: не выходим за границы */
    min-height: auto !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: высота по контенту (было 400px) */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: центрируем (было space-between) */
    padding: var(--space-lg) 0 !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: меньше padding (было var(--space-2xl)) */
    overflow-x: hidden !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: запрещаем горизонтальный скролл */
    overflow-y: visible !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: разрешаем вертикальный скролл */
}

/* 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 {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    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);
    }
}

/* Контейнер для всех символов - правее стрелки */
/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Скрываем сложную анимацию символов - перекрывает текст */
.symbols-container {
    display: none !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: скрываем сложную анимацию */
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Скрываем сложную анимацию в split-left (Powered by experience) */
.two-blocks-section .split-left .animation-container {
    display: none !important; /* МОБИЛЬНАЯ ВЕРСИЯ: скрываем на мобильных */
    max-width: clamp(280px, 80vw, 400px); /* Адаптивный размер */
    margin: 0 auto;
}

/* Tablet: показываем анимацию с оптимизацией */
@media (min-width: 768px) {
    .two-blocks-section .split-left .animation-container {
        display: block !important;
        max-width: clamp(300px, 35vw, 450px); /* Адаптивный размер для планшетов */
        height: clamp(300px, 35vw, 450px);
    }
}

/* Поддержка prefers-reduced-motion для анимаций */
@media (prefers-reduced-motion: reduce) {
    .two-blocks-section .split-left .animation-container,
    .metric-value,
    .metric-prefix {
        animation: none !important;
    }
}

/* Внешний круг символов - 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);
    }
}

/* МОБИЛЬНАЯ ВЕРСИЯ: Упрощённый split-right - лёгкая карточка */
.two-blocks-section .split-right {
    position: relative;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    min-height: auto !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1rem, 4vw, 1.5rem) !important;
    text-align: center;
    width: 100% !important;
    max-width: 100% !important;
    
    /* Лёгкая карточка вместо heavy liquid-glass */
    background: rgba(10, 10, 10, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    /* БЕЗ backdrop-filter, БЕЗ box-shadow для производительности */
}

/* МОБИЛЬНАЯ ВЕРСИЯ: Убрали ::before эффект для упрощения */

.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: clamp(1rem, 3vw, 1.75rem) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный gap 16-28px (было var(--space-xl) = 28px) */
    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: clamp(1.5rem, 4vw, 2.5rem); /* Mobile: уменьшенные размеры */
    font-weight: 900;
    color: var(--color-primary);
    animation: metricPulse 2s ease-in-out infinite;
    line-height: 1.2; /* Улучшенная читаемость */
    letter-spacing: -0.02em; /* Более компактное отображение */
}

.metric-label {
    font-size: clamp(0.75rem, 2vw, 1rem); /* Адаптивный размер */
    color: var(--color-text-secondary);
    margin-top: clamp(0.25rem, 1vw, 0.5rem);
    line-height: 1.4;
}

/* Плавная анимация появления метрик */
@keyframes metricFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.metric-value,
.metric-label {
    animation: metricFadeIn 0.6s ease-out, metricPulse 2s ease-in-out infinite 0.6s;
    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;
}

/* Tablet: увеличенные размеры для лучшей читаемости */
@media (min-width: 768px) {
    .metric-value, .metric-prefix {
        font-size: clamp(2rem, 4vw, 2.75rem);
    }
}

/* Во время анимации счётчика: отключаем transition и pulse для ПЛАВНОСТИ */
.metric-value[data-target] {
    transition: none !important;  /* КРИТИЧНО: НЕТ transition во время счёта */
    animation: none !important;   /* КРИТИЧНО: НЕТ pulse во время счёта */
    contain: layout style;        /* Оптимизация для частых обновлений DOM */
    /* will-change: contents убран - contain достаточно */
}

/* ПОСЛЕ анимации: включаем обратно красивые эффекты */
.metric-value.animation-complete {
    animation: metricPulse 2s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
}

@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: clamp(0.875rem, 2.5vw, 1rem); /* Mobile: компактный текст */
    color: var(--color-text-secondary);
    text-transform: none;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.4;
}

/* Tablet: увеличенные размеры */
@media (min-width: 768px) {
    .metric-label {
        font-size: clamp(1rem, 2.5vw, 1.125rem);
    }
}

/* 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
========================================= */

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Исправляем overflow для three-blocks-section */
.three-blocks-section {
    /* МОБИЛЬНАЯ ВЕРСИЯ: базовые стили уже заданы выше */
    display: flex;
    align-items: flex-start; /* МОБИЛЬНАЯ ВЕРСИЯ: контент сверху */
    padding: var(--space-xl) var(--space-base); /* МОБИЛЬНАЯ ВЕРСИЯ: нормальные отступы */
    position: relative;
    background: var(--color-bg-primary);
    overflow-x: hidden !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: запрещаем горизонтальный скролл */
    overflow-y: visible !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: разрешаем вертикальный скролл */
    width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: полная ширина */
    max-width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: не выходим за границы */
}

/* МОБИЛЬНАЯ ВЕРСИЯ: three-blocks-section всегда по контенту (без @media queries) */

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Исправляем three-blocks-container - одна колонка на мобильных */
/* МОБИЛЬНАЯ ВЕРСИЯ: three-blocks-container удалён, используем прямую структуру */
.three-blocks-section {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 1.5rem) !important; /* Отступ между блоками */
}

/* МОБИЛЬНАЯ ВЕРСИЯ: Упрощённый block-item - использует light-card стили */
.block-item {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left; /* МОБИЛЬНАЯ ВЕРСИЯ: текст слева для лучшей читаемости */
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    
    /* light-card стили уже применены через класс, но переопределяем для блоков */
    /* background, border, border-radius, padding уже в .light-card */
}

/* МОБИЛЬНАЯ ВЕРСИЯ: Упрощённый hover - только изменение фона */
.block-item:hover {
    background: rgba(10, 10, 10, 0.6) !important;
    /* БЕЗ transform для производительности на мобильных */
}

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

/* МОБИЛЬНАЯ ВЕРСИЯ: Упрощённый hover для decline */
.block-decline:hover {
    border-color: rgba(255, 68, 68, 0.2) !important;
    /* БЕЗ box-shadow для производительности */
}

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

/* МОБИЛЬНАЯ ВЕРСИЯ: Упрощённый hover для stagnation */
.block-stagnation:hover {
    border-color: rgba(136, 136, 136, 0.2) !important;
    /* БЕЗ box-shadow для производительности */
}

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

/* МОБИЛЬНАЯ ВЕРСИЯ: Упрощённый hover для growth */
.block-growth:hover {
    border-color: rgba(2, 183, 140, 0.2) !important;
    /* БЕЗ box-shadow для производительности */
}

.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) 0%, /* УБРАНО свечение - было 0.05 → 0.02 → 0 */
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0; /* Полностью отключен overlay */
}

.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)
   ======================================== */

/* Целая коробка - падает сверху естественно */
/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Скрываем сложную SVG анимацию box-whole (81 элемент) */
.three-blocks-section .box-whole {
    display: none !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: скрываем сложную анимацию */
}

@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;
    }
}

/* Осколки - невидимы до взрыва */
/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Скрываем сложную SVG анимацию box-animation (81 элемент) */
.three-blocks-section .box-animation,
.three-blocks-section .decline-animation {
    display: none !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: скрываем сложную SVG анимацию */
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Скрываем сложную анимацию осколков - слишком много элементов */
.three-blocks-section .box-fragments {
    display: none !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: скрываем сложную анимацию (81 элемент) */
}

/* КРИТИЧЕСКИ ВАЖНО: 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 */

/* Mobile */

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

/* Intro Section */
.intro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(1rem, 3vw, 1.75rem) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный gap 16-28px (было var(--space-xl) = 28px) */
    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;
    /* ⚡ PERFORMANCE: GPU ускорение для hover эффектов */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

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

.card-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(40px, 10vw, 48px); /* МОБИЛЬНАЯ ВЕРСИЯ: адаптивный размер */
    height: clamp(40px, 10vw, 48px); /* МОБИЛЬНАЯ ВЕРСИЯ: адаптивный размер */
    background: var(--color-primary);
    color: var(--color-background);
    border-radius: 50%;
    font-weight: 800;
    font-size: clamp(1rem, 2.5vw, 1.125rem); /* МОБИЛЬНАЯ ВЕРСИЯ: адаптивный размер шрифта */
    margin-bottom: var(--space-base); /* МОБИЛЬНАЯ ВЕРСИЯ: меньше отступ */
}

.card-title {
    font-size: clamp(1.125rem, 3.5vw, 1.25rem); /* МОБИЛЬНАЯ ВЕРСИЯ: адаптивный размер */
    font-weight: 700;
    margin-bottom: var(--space-sm); /* МОБИЛЬНАЯ ВЕРСИЯ: меньше отступ */
    color: var(--color-text-primary);
    line-height: 1.3; /* МОБИЛЬНАЯ ВЕРСИЯ: улучшенная читаемость */
}

.card-description {
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-size: clamp(0.9375rem, 2.5vw, 1rem); /* МОБИЛЬНАЯ ВЕРСИЯ: адаптивный размер */
}

/* Industries Section */
/* Industries Section - SLSBMB Style */
.industries-section .section-title {
    /* Используем Inter как в других заголовках */
    font-family: var(--font-primary); /* Inter */
    text-align: center;
    font-size: clamp(1.5rem, 5vw, 2rem); /* Mobile */
    font-weight: 800; /* Как у других заголовков */
    line-height: 1.1;
    letter-spacing: -0.02em; /* Как у стандартных заголовков */
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
}

/* Tablet */
@media (min-width: 768px) {
    .industries-section .section-title {
        font-size: clamp(2rem, 4vw, 2.5rem);
    }
}

/* Свечение для "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: clamp(0.75rem, 2vw, 1rem); /* Mobile: адаптивный gap */
    margin-top: clamp(1rem, 3vw, 1.5rem);
    padding: 0 var(--space-base);
}

/* Tablet: увеличенный gap и больше колонок */
@media (min-width: 768px) {
    .industries-list {
        gap: clamp(1rem, 2vw, 1.5rem);
    }
}

.industry-item {
    font-size: clamp(0.75rem, 2vw, 1rem); /* Уже адаптивный - оставить */
    font-weight: 400;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-height: 44px; /* Touch target минимум 44px */
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
    word-break: break-word; /* Перенос длинных названий */
    overflow-wrap: break-word;
    white-space: normal; /* Разрешаем перенос строк */
    text-align: center;
    white-space: nowrap; /* Не разрывать слова */
    word-break: break-word; /* Fallback для очень длинных слов */
    line-height: 1.4; /* Для лучшей читаемости */
    padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
    transition: all var(--duration-fast) ease;
    /* ⚡ PERFORMANCE: GPU ускорение для hover эффектов */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.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: clamp(1rem, 3vw, 1.75rem) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный gap 16-28px (было var(--space-xl) = 28px) */
    margin-top: var(--space-2xl);
}

.impact-card {
    text-align: center;
    padding: var(--space-xl);
    /* ⚡ PERFORMANCE: GPU ускорение для анимируемых элементов */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

.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);
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Исправляем impact-grid-cases - одна колонка на мобильных */
.impact-grid-cases {
    display: grid;
    grid-template-columns: 1fr !important; /* Mobile: всегда одна колонка */
    gap: clamp(1.25rem, 3.5vw, 2rem) !important; /* Улучшенный адаптивный gap */
    margin-top: var(--space-lg);
    padding: 0;

    /* Transform origin для пропорционального масштабирования от центра */
    transform-origin: center center;
}

/* Tablet: 2 колонки */
@media (min-width: 768px) {
    .impact-grid-cases {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Tablet Large: 3 колонки */
@media (min-width: 1024px) {
    .impact-grid-cases {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Исправляем обрезку текста в карточках кейсов, оптимизируем padding */
.case-card {
    /* LIQUID GLASS EFFECT - темный премиум */
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: clamp(1rem, 3.5vw, 1.5rem) !important; /* Улучшенный адаптивный padding */
    min-height: auto !important; /* Высота по контенту */
    
    /* Flexbox для вертикальной структуры */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: clamp(0.75rem, 2vw, 1rem); /* Улучшенный адаптивный gap */
    overflow: visible !important; /* Не обрезаем текст */
    width: 100% !important; /* Полная ширина */
    max-width: 100% !important; /* Не выходим за границы */
    
    /* 3D глубина */
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.6s ease-out; /* Плавная анимация появления */
    opacity: 0;
    animation-fill-mode: forwards;
}

/* Задержка анимации для каждой карточки */
.case-card:nth-child(1) { animation-delay: 0.1s; }
.case-card:nth-child(2) { animation-delay: 0.2s; }
.case-card:nth-child(3) { animation-delay: 0.3s; }
.case-card:nth-child(4) { animation-delay: 0.4s; }
.case-card:nth-child(5) { animation-delay: 0.5s; }
.case-card:nth-child(6) { animation-delay: 0.6s; }
.case-card:nth-child(n+7) { animation-delay: 0.7s; }

/* Grid для услуг 3x4 - компактный дизайн */
.services-grid-cases {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 колонка */
    gap: clamp(1.25rem, 3.5vw, 2rem); /* Улучшенный gap */
    margin-top: var(--space-lg);
}

/* Tablet: 2 колонки */
@media (min-width: 768px) {
    .services-grid-cases {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet Large: 3 колонки */
@media (min-width: 1024px) {
    .services-grid-cases {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Исправляем обрезку текста в карточках услуг */
.service-card {
    /* LIQUID GLASS EFFECT (единый стиль с navbar и system-feature) */
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* Элегантная рамка */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: clamp(1rem, 3vw, 1.5rem); /* Улучшенный адаптивный padding */
    min-height: auto !important; /* Высота по контенту */
    
    /* Глубина 3D через тени + внутренняя подсветка */
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: не обрезаем текст */
    width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: полная ширина */
    max-width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: не выходим за границы */
    word-wrap: break-word !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: переносим длинные слова */
    overflow-wrap: break-word !important;
    animation: fadeInUp 0.6s ease-out; /* Плавная анимация появления */
    opacity: 0;
    animation-fill-mode: forwards;
}

/* Задержка анимации для каждой карточки */
.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }
.service-card:nth-child(5) { animation-delay: 0.5s; }
.service-card:nth-child(6) { animation-delay: 0.6s; }
.service-card:nth-child(n+7) { animation-delay: 0.7s; }

.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px; /* Было 8px, стало 12px */
    padding: 2px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary), #00ffa1);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover {
    /* Усиленный glass фон при hover */
    background: rgba(10, 10, 10, 0.95); /* ТЕМНЫЙ как контейнер, почти плотный при hover */
    border-color: transparent; /* Градиент заменяет рамку */
    
    /* Lift эффект */
    transform: translateY(-5px); /* Было -3px, стало -5px */
    
    /* Усиленные тени + зелёное свечение */
    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 255, 161, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.service-card:hover::before {
    opacity: 1; /* Градиентная рамка появляется */
}

.case-card:hover {
    background: rgba(10, 10, 10, 0.95);
    border-color: rgba(0, 255, 161, 0.4);
    transform: translateY(-4px);
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 255, 161, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Case Card Elements - ОПТИМИЗИРОВАННЫЙ AAA+ дизайн */
.case-icon {
    font-size: clamp(2rem, 6vw, 2.5rem); /* Mobile */
    margin-bottom: clamp(0.25rem, 1vw, 0.5rem); /* Адаптивный margin */
    width: clamp(3rem, 8vw, 4rem); /* Адаптивная ширина */
    height: clamp(3rem, 8vw, 4rem); /* Адаптивная высота */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tablet */
@media (min-width: 768px) {
    .case-icon {
        font-size: clamp(2.5rem, 4vw, 3rem);
    }
}

.case-industry {
    font-size: clamp(0.875rem, 2.5vw, 1rem); /* Mobile */
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.case-metric {
    font-size: clamp(1.125rem, 3.5vw, 1.5rem); /* Mobile */
    font-weight: 700; /* Для акцента */
    color: #00FFA1; /* Зелёный акцент */
    line-height: clamp(1.1, 1.2, 1.3); /* Адаптивный line-height */
    margin-bottom: clamp(0.25rem, 1vw, 0.5rem); /* Адаптивный margin */
    letter-spacing: -0.01em; /* Более компактное отображение */
}

.case-period {
    font-size: 12px; /* Было 11px, стало 12px */
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 8px; /* Было 6px, стало 8px */
}

.case-details {
    width: 100%;
    margin-top: clamp(0.75rem, 2vw, 1rem); /* Улучшенный margin */
    padding-top: clamp(0.75rem, 2vw, 1rem); /* Улучшенный padding */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1rem); /* Улучшенный gap */
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Исправляем обрезку текста в элементах кейсов */
.case-numbers,
.case-tools,
.case-result {
    font-size: clamp(0.8125rem, 2.2vw, 0.9375rem); /* Mobile */
    line-height: 1.5;
    overflow: visible !important; /* Не обрезаем текст */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin-top: clamp(0.5rem, 1.5vw, 0.75rem);
}

.case-numbers {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.case-tools {
    color: rgba(255, 255, 255, 0.55);
}

.case-result {
    font-weight: 600;
    color: #00FFA1; /* Зелёный результат */
}

/* Legacy support for old content */
.case-content {
    text-align: center;
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    line-height: 1.5;
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
}

/* ========================================
   HOW IT WORKS SECTION (Как это работает)
========================================= */
.how-it-works-section {
    padding: clamp(2rem, 5vw, 3rem) 0;
}

.how-it-works-section .section-title {
    font-size: clamp(1.5rem, 5vw, 2rem); /* Mobile */
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
}

/* Tablet */
@media (min-width: 768px) {
    .how-it-works-section .section-title {
        font-size: clamp(2rem, 4vw, 2.5rem);
    }
}

/* Process Tabs */
.process-tabs {
    display: flex;
    gap: clamp(0.75rem, 2vw, 1.25rem); /* Улучшенный gap */
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
    overflow-x: auto; /* Mobile: горизонтальный scroll */
    scroll-snap-type: x mandatory;
    scroll-padding: clamp(0.5rem, 2vw, 1rem); /* Отступ для snap */
    -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding-bottom: clamp(0.5rem, 1.5vw, 0.5rem);
    position: relative;
    z-index: 100;
}

.process-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Tablet: обычная компоновка с wrap */
@media (min-width: 768px) {
    .process-tabs {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
    }
}

.tab-btn {
    min-width: clamp(80px, 20vw, 120px); /* Mobile */
    min-height: 44px; /* Touch target */
    min-width: 44px; /* Touch target минимум 44px */
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 3vw, 1.5rem); /* Улучшенный padding */
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    border: 1px solid rgba(255, 255, 255, 0.1);
    scroll-snap-align: start; /* Snap для каждого таба */
    flex-shrink: 0; /* Не сжимаются при скролле */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Плавная анимация */
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-text-secondary);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(0.5rem, 1.5vw, 0.5rem);
    scroll-snap-align: start;
    flex-shrink: 0;
    position: relative;
    z-index: 101;
    pointer-events: auto;
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 255, 161, 0.3);
}

.tab-btn.active {
    background: rgba(0, 255, 161, 0.15); /* Более заметный активный фон */
    border-color: rgba(0, 255, 161, 0.6);
    color: var(--color-primary);
    box-shadow: 
        0 4px 16px rgba(0, 255, 161, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(1.05); /* Небольшое увеличение для визуальной обратной связи */
}

/* Плавная анимация переключения */
.tab-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-btn:active {
    transform: scale(0.98); /* Touch feedback */
}

/* Tablet */
@media (min-width: 768px) {
    .tab-btn {
        min-width: clamp(100px, 15vw, 140px);
        flex: 1;
    }
}

.tab-number {
    font-size: 0.75em;
    opacity: 0.7;
}

.tab-label {
    font-weight: 600;
}

.tab-content-container {
    position: relative;
    min-height: clamp(300px, 50vw, 500px);
}

.tab-content {
    display: none;
    padding: clamp(1rem, 3vw, 2rem);
    max-width: 100%;
}

.tab-content.active {
    display: block;
}

.tab-content-title {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    color: var(--color-text-primary);
    font-weight: 700;
}

.content-section {
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.content-subtitle {
    font-size: clamp(1.125rem, 3.5vw, 1.375rem);
    margin-bottom: clamp(0.75rem, 2vw, 1rem);
    color: var(--color-text-primary);
    font-weight: 600;
}

.content-list {
    font-size: clamp(0.9375rem, 2.5vw, 1.0625rem);
    line-height: 1.6;
    padding-left: clamp(1.25rem, 3vw, 1.75rem);
    color: var(--color-text-secondary);
}

.content-list li {
    margin-bottom: 0.75rem;
    padding: clamp(0.75rem, 2vw, 0.75rem) 0 clamp(0.75rem, 2vw, 0.75rem) clamp(1.5rem, 4vw, 2rem);
    position: relative;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.content-list li::before {
    content: '•';
    position: absolute;
    left: clamp(0.75rem, 2vw, 0.75rem);
    color: #00FFA1;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
}

.deliverables-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 колонка */
    gap: clamp(1.25rem, 3.5vw, 2rem); /* Улучшенный gap */
    margin-top: clamp(1rem, 3vw, 1.5rem);
}

/* Tablet: 2-3 колонки */
@media (min-width: 768px) {
    .deliverables-grid {
        grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 30vw, 300px), 1fr)); /* Адаптивный minmax */
        gap: clamp(1.5rem, 4vw, 2.5rem); /* Больший gap на планшетах */
    }
}

.deliverable-card {
    padding: clamp(1rem, 3vw, 1.5rem);
    gap: clamp(0.75rem, 2vw, 1rem);
    display: flex;
    align-items: flex-start;
    background: rgba(10, 10, 10, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.deliverable-card:hover {
    background: rgba(10, 10, 10, 0.7);
    border-color: rgba(2, 183, 140, 0.3);
    transform: translateY(-2px);
}

.deliverable-icon {
    font-size: clamp(1.5rem, 4vw, 2rem);
    flex-shrink: 0;
    margin-right: clamp(0.75rem, 2vw, 1rem);
}

.deliverable-info {
    flex: 1;
}

.deliverable-name {
    font-size: clamp(1rem, 3vw, 1.125rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.deliverable-desc {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Additional styles for How It Works section (moved from inline styles) */
.tab-number {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 900;
    background: linear-gradient(135deg, #00FFA1, #02B78C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.tab-label {
    font-size: clamp(0.875rem, 2.5vw, 1.125rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.tab-duration {
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    color: rgba(255, 255, 255, 0.5);
}

.tab-content-container {
    position: relative;
    min-height: clamp(300px, 50vw, 500px);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-content {
    animation: fadeIn 0.4s ease-in-out;
}

.tab-description {
    font-size: clamp(0.9375rem, 2.5vw, 1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

.content-list-compact {
    list-style: none;
    padding: 0;
    margin: 0 0 clamp(1rem, 3vw, 1.25rem) 0;
}

.content-list-compact li {
    position: relative;
    padding-left: clamp(1.25rem, 3vw, 1.5rem);
    margin-bottom: clamp(0.5rem, 1.5vw, 0.625rem);
    font-size: clamp(0.875rem, 2.5vw, 0.9375rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

.content-list-compact li::before {
    content: '•';
    position: absolute;
    left: clamp(0.5rem, 1.5vw, 0.5rem);
    color: #00FFA1;
    font-size: clamp(1rem, 2.5vw, 1.125rem);
}

.content-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.content-list li:last-child {
    border-bottom: none;
}

.deliverable-card.metric {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(0.5rem, 1.5vw, 0.5rem);
}

.metric-value {
    font-size: clamp(2rem, 5vw, 2.25rem);
    font-weight: 900;
    background: linear-gradient(135deg, #00FFA1, #02B78C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.metric-label {
    font-size: clamp(0.8125rem, 2.2vw, 0.875rem);
    color: rgba(255, 255, 255, 0.7);
}

.tab-footer {
    margin-top: clamp(1.5rem, 4vw, 2rem);
    padding-top: clamp(1rem, 3vw, 1.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: clamp(1.5rem, 4vw, 3rem);
    flex-wrap: wrap;
}

.footer-item {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 1vw, 0.25rem);
}

.footer-label {
    font-size: clamp(0.8125rem, 2.2vw, 0.875rem);
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.footer-value {
    font-size: clamp(0.9375rem, 2.5vw, 1rem);
    color: #00FFA1;
    font-weight: 600;
}

/* ========================================
   COOKIE CONSENT BANNER
========================================= */
.cookie-banner {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 900px;
    width: calc(100% - 40px); /* Mobile: фиксированная позиция снизу, width 100% */
    background: rgba(10, 10, 15, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(2, 183, 140, 0.2);
    border-radius: 24px;
    padding: clamp(1rem, 3vw, 1.5rem);
    z-index: 999999 !important;
    display: none;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(2, 183, 140, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

/* Tablet: можно сделать боковое размещение или центрированное */
@media (min-width: 768px) {
    .cookie-banner {
        max-width: clamp(400px, 50vw, 500px);
        width: auto;
    }
}

.cookie-banner::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg,
        rgba(2, 183, 140, 0.3),
        rgba(0, 255, 161, 0.2),
        rgba(225, 255, 0, 0.2),
        rgba(2, 183, 140, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: liquidFlow 4s linear infinite;
    opacity: 0.6;
}

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

/* CSS классы для cookie banner анимаций (замена inline стилей) */
.cookie-banner.hiding {
    animation: slideDownGlass 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.cookie-banner.hidden {
    display: none !important;
}

.cookie-banner.show {
    display: block !important;
    animation: slideUpGlass 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 1;
}

@keyframes slideUpGlass {
    from {
        transform: translateX(-50%) translateY(200px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes slideDownGlass {
    from {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    to {
        transform: translateX(-50%) translateY(200px);
        opacity: 0;
    }
}

.cookie-content {
    display: flex;
    flex-direction: column; /* Mobile: вертикальная компоновка */
    gap: clamp(1rem, 3vw, 1.5rem);
    position: relative;
    z-index: 1;
}

/* Tablet: горизонтальная компоновка */
@media (min-width: 768px) {
    .cookie-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.cookie-text {
    flex: 1;
    min-width: 0;
}

.cookie-text h3,
.cookie-title {
    font-size: clamp(1rem, 3vw, 1.125rem);
    font-weight: 600;
    margin: 0 0 clamp(0.5rem, 1.5vw, 0.75rem) 0;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.cookie-text p,
.cookie-desc {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    line-height: 1.5;
    margin: 0;
    color: #e6e1db;
}

.cookie-text a,
.cookie-link {
    color: #4da6ff;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.2s ease;
}

.cookie-text a:hover {
    color: #00FFA1;
    text-decoration: underline;
}

.cookie-accept {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: clamp(0.75rem, 2vw, 1rem);
    border-radius: 50px;
    font-weight: 600;
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    min-height: 44px; /* Touch target */
    min-width: clamp(100px, 25vw, 120px);
    width: 100%; /* Mobile: полная ширина */
    background: rgba(2, 183, 140, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 4px 20px rgba(2, 183, 140, 0.3);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Tablet: auto width */
@media (min-width: 768px) {
    .cookie-accept {
        width: auto;
    }
}

.cookie-accept::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    padding: 2px;
    background: linear-gradient(135deg, #02B78C, #00FFA1, #e1ff00);
    -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;
}

@keyframes borderGradient {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.cookie-accept::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 30%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.15) 70%,
        transparent 100%
    );
    transform: translateX(-150%);
    transition: transform 0.6s ease;
}

.cookie-accept:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(2, 183, 140, 0.5);
    background: rgba(2, 183, 140, 0.25);
}

.cookie-accept:hover::after {
    transform: translateX(150%);
}

.cookie-accept:active {
    transform: translateY(0);
}

.cookie-accept:focus {
    outline: 3px solid rgba(2, 183, 140, 0.5);
    outline-offset: 2px;
}

/* ========================================
   TOUCH OPTIMIZATIONS
========================================= */
/* Hover effects только для устройств с hover */
@media (hover: hover) {
    .why-word:hover,
    .industry-item:hover,
    .case-card:hover,
    .service-card:hover,
    .system-feature:hover,
    .deliverable-card:hover {
        /* Hover styles применяются только на устройствах с hover */
    }
}

/* Active state для touch устройств */
.why-word:active,
.industry-item:active,
.case-card:active,
.service-card:active,
.system-feature:active,
.deliverable-card:active {
    transform: translateY(0);
    opacity: 0.8;
}

/* Touch action для контроля жестов */
.touch-action-pan-y {
    touch-action: pan-y;
}

.touch-action-pan-x {
    touch-action: pan-x;
}

.touch-action-manipulation {
    touch-action: manipulation;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
========================================= */
/* Prefers-reduced-motion для accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Backdrop-filter fallback */
@supports not (backdrop-filter: blur(20px)) {
    .navbar,
    .case-card,
    .service-card,
    .system-feature,
    .accent-container {
        background: rgba(10, 10, 10, 0.98) !important;
    }
}

/* Tablet: можно включить backdrop-filter с fallback */
@media (min-width: 768px) {
    @supports (backdrop-filter: blur(20px)) {
        .accent-container {
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            background: rgba(10, 10, 10, 0.85);
        }
    }
}

.case-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.5;
}

/* ========================================
   SALES SYSTEM SECTION (Система продаж)
========================================= */
.sales-system-section {
    padding: clamp(2rem, 5vw, 3rem) 0;
}

.sales-system-section .section-title {
    font-size: clamp(1.5rem, 5vw, 2rem); /* Mobile */
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
}

/* Tablet */
@media (min-width: 768px) {
    .sales-system-section .section-title {
        font-size: clamp(2rem, 4vw, 2.5rem);
    }
}

.system-content {
    max-width: 100%;
    padding: clamp(1rem, 3vw, 2rem);
}

/* Partners Section */
.partners-section {
    isolation: isolate;
    position: relative;
    z-index: 1;
    /* МОБИЛЬНАЯ ВЕРСИЯ: базовые стили уже заданы выше */
    display: flex;
    align-items: flex-start; /* МОБИЛЬНАЯ ВЕРСИЯ: контент сверху */
    justify-content: flex-start; /* МОБИЛЬНАЯ ВЕРСИЯ: контент слева */
}

/* ДЕСКТОП: полный экран для partners-section */
    /* МОБИЛЬНАЯ ВЕРСИЯ: @media блок удален */

.partners-container {
    /* ═══════════════════════════════════════════════════════
       РЕАЛЬНЫЙ NAVBAR ЭФФЕКТ - темный И видны частицы!
       ═══════════════════════════════════════════════════════ */
    
    /* Баланс между читаемостью и прозрачностью (из liquid-glass.css navbar) */
    background: rgba(10, 10, 10, 0.65); /* ТЕМНЫЙ как navbar! */
    backdrop-filter: blur(10px); /* Меньше blur как у navbar! */
    -webkit-backdrop-filter: blur(10px);
    
    /* Светящаяся рамка */
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    /* Глубина через shadows (как navbar) */
    box-shadow: 
        0 4px 24px 0 rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    
    /* Закруглённые углы (как navbar) */
    border-radius: 12px;
    
    /* Остальные параметры */
    padding: var(--space-3xl);
    margin-top: var(--space-2xl);
    position: relative;
    overflow: hidden;
    
    /* Плавный переход */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.partners-container:hover {
    background: rgba(10, 10, 10, 0.75); /* Темнее при hover */
    border-color: rgba(0, 255, 161, 0.3);
    transform: translateY(-2px);
    box-shadow:
        0 12px 40px 0 rgba(0, 0, 0, 0.5),
        0 0 40px 0 rgba(0, 255, 161, 0.15),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Одноколоночный макет для партнёров - логотипы не обрезаются */
.partners-grid {
    display: grid !important; /* Mobile: grid для лучшего контроля */
    grid-template-columns: repeat(2, 1fr) !important; /* Mobile: 2 колонки */
    gap: clamp(1rem, 3vw, 1.5rem) !important;
    justify-items: center;
    align-items: center;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    isolation: isolate;
    transform: translateZ(0);
    transform-origin: center center;
}

/* Tablet: 3-4 колонки */
@media (min-width: 768px) {
    .partners-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: clamp(1.5rem, 3vw, 2rem) !important;
    }
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Увеличиваем размер логотипов партнёров */
.partner-logo {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: clamp(0.875rem, 3vw, 1.25rem) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный padding 14-20px (было var(--space-lg) = 20px) */
    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;
    min-width: 0 !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: убираем min-width чтобы не было overflow (было 200px) */
    width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: полная ширина */
    max-width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: не выходим за границы (было 300px) */
    isolation: isolate;
    will-change: transform;
    position: relative;
    z-index: 2;
    transform: translateZ(0);
    overflow: visible !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: не обрезаем */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.partner-logo:hover {
    border-color: rgba(2, 183, 140, 0.5);
    background: rgba(2, 183, 140, 0.05);
    transform: translateY(-5px);
}

/* Contact Form */
.contact-form {
    max-width: 100%; /* Mobile: полная ширина */
    margin: var(--space-2xl) auto 0;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
    padding: clamp(1rem, 3vw, 2rem);
}

/* Tablet */
@media (min-width: 768px) {
    .contact-form {
        max-width: clamp(500px, 60vw, 700px);
    }
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 1.5rem);
    margin-bottom: var(--space-lg);
}

/* Tablet: можно сделать 2 колонки для name/company и email/phone */
@media (min-width: 768px) {
    .form-row {
        flex-direction: row;
        gap: clamp(1rem, 3vw, 1.5rem);
    }
    
    .form-row .form-group {
        flex: 1;
    }
}

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

.form-group label {
    color: var(--color-text-secondary);
    font-weight: 500;
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
}

.form-group input,
.form-group textarea {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: clamp(6px, 1.5vw, 8px);
    padding: clamp(0.875rem, 2vw, 1rem); /* МОБИЛЬНАЯ ВЕРСИЯ: адаптивный padding */
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    /* КРИТИЧНО: минимум 16px для предотвращения zoom на iOS */
    font-size: max(16px, clamp(1rem, 3vw, 1.125rem)); /* МОБИЛЬНАЯ ВЕРСИЯ: адаптивный размер шрифта */
    transition: border-color var(--duration-normal) ease;
    pointer-events: auto !important;
    z-index: 10;
    position: relative;
    width: 100%;
    resize: vertical;
}

.form-group input {
    min-height: 44px; /* Touch target */
}

.form-group textarea {
    min-height: clamp(120px, 20vw, 150px); /* МОБИЛЬНАЯ ВЕРСИЯ: адаптивная высота для textarea */
}

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

/* Стили для полей с ошибками */
.form-group input.error,
.form-group textarea.error {
    border-color: #ff4444;
    background-color: rgba(255, 68, 68, 0.05);
    animation: shake 0.3s ease-in-out;
}

.form-group input.error:focus,
.form-group textarea.error:focus {
    border-color: #ff4444;
    box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.1);
}

/* Checkbox Group - стили вынесены из inline HTML */

/* Анимация тряски при ошибке */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.form-error {
    display: block;
    color: #ff4444;
    font-size: clamp(0.8125rem, 2.2vw, 0.9375rem);
    margin-top: 4px;
    min-height: clamp(20px, 5vw, 24px);
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.form-error:not(:empty) {
    opacity: 1;
    transform: translateY(0);
}

.form-help {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin-top: 4px;
}

.form-submit {
    width: 100%;
    margin-top: var(--space-lg);
    justify-content: center;
    min-height: 44px; /* Touch target */
    font-size: clamp(1rem, 3vw, 1.125rem);
    padding: clamp(0.875rem, 2vw, 1.25rem);
}

/* Footer */
.footer {
    position: relative;
    z-index: 10;
    
    /* ПРЕМИУМ LIQUID GLASS - ТЕМНЫЙ как контентные блоки */
    background: rgba(10, 10, 10, 0.75); /* Было rgba(26,26,26,0.6) серый → Теперь ЧЕРНЫЙ для единства */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* Светящаяся рамка */
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    
    /* Глубина через shadows (зеркально navbar, но перевёрнуто) */
    box-shadow: 
        0 -4px 24px 0 rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.08);
    
    /* Закруглённые ВЕРХНИЕ углы (зеркально navbar) */
    border-radius: 12px 12px 0 0;
    
    /* Padding */
    padding: var(--space-3xl) 0 var(--space-xl);
    
    /* Плавный переход */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Вертикальное расположение блоков футера */
.footer-content {
    display: flex !important;
    flex-direction: column !important; /* Mobile: вертикальная компоновка */
    gap: clamp(1.5rem, 4vw, 2.5rem); /* Улучшенный gap */
}

/* Tablet: горизонтальная компоновка (2-3 колонки) */
@media (min-width: 768px) {
    .footer-content {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .footer-content > * {
        flex: 1 1 calc(33.333% - 1rem);
        min-width: 200px;
    }
}
@media (min-width: 768px) {
    .footer-content {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: flex-start;
        text-align: left;
        gap: clamp(2rem, 5vw, 3rem); /* Улучшенный gap между колонками на планшетах */
    }
    
    .footer-content > * {
        flex: 1 1 calc(33.333% - 1rem);
        min-width: 200px;
    }
}

.footer-logo-main {
    display: flex;
    align-items: center;
    gap: clamp(0.25rem, 1vw, 0.5rem);
    margin-bottom: var(--space-sm);
}

.footer-logo .logo-text {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    font-weight: 900;
    color: var(--color-text-primary);
    display: inline;
    margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
}

.logo-tagline {
    color: var(--color-text-muted);
    font-size: clamp(0.8125rem, 2.2vw, 0.9375rem);
    margin-top: clamp(0.25rem, 1vw, 0.5rem);
    font-size: var(--text-sm);
    display: block;
    margin-top: var(--space-xs);
}

.footer-logo .logo-asterisk {
    color: var(--color-primary);
    font-size: 1.2em;
    font-weight: bold;
}

.footer-privacy-link {
    margin-top: 16px;
}

.footer-privacy-link a,
.footer-legal a {
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    text-decoration: none;
    transition: color var(--duration-normal) ease;
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    min-height: 44px; /* Touch target */
    display: inline-flex;
    align-items: center;
}

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

.footer-logo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 120px;
    text-align: left;
}

.footer-legal {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(0.25rem, 1vw, 0.5rem);
    min-height: 120px;
    text-align: center;
    font-size: clamp(0.8125rem, 2.2vw, 0.9375rem);
    line-height: 1.5;
}

.legal-company {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    line-height: 1.6;
}

.legal-inn,
.legal-ogrnip,
.legal-date {
    font-weight: 400;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(0.75rem, 2vw, 1rem);
    min-height: 120px;
    text-align: right;
}

.contact-item {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 44px; /* Touch target */
    font-size: clamp(0.875rem, 2.5vw, 1rem);
}

.contact-item:hover {
    color: #00FFA1;
    background: rgba(0, 255, 161, 0.08);
    border-color: rgba(0, 255, 161, 0.3);
    transform: translateX(-8px);
    box-shadow: 0 4px 16px rgba(0, 255, 161, 0.2);
}

.contact-icon-svg {
    width: clamp(18px, 4vw, 20px);
    height: clamp(18px, 4vw, 20px);
    flex-shrink: 0;
    color: #00FFA1;
    opacity: 0.9;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-item:hover .contact-icon-svg {
    transform: scale(1.15);
    opacity: 1;
}

.footer-socials {
    display: flex;
    gap: clamp(0.75rem, 2vw, 1.25rem); /* Улучшенный gap */
    justify-content: flex-end;
    margin-top: clamp(0.75rem, 2vw, 1rem);
    flex-wrap: wrap; /* Перенос на новую строку при необходимости */
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(44px, 10vw, 48px); /* Touch target минимум 44px */
    height: clamp(44px, 10vw, 48px); /* Touch target минимум 44px */
    min-width: 44px; /* Гарантируем минимум 44px */
    min-height: 44px; /* Гарантируем минимум 44px */
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

/* Hover эффект только на устройствах с hover */
@media (hover: hover) {
    .social-link:hover {
        background: rgba(0, 255, 161, 0.1);
        border-color: rgba(0, 255, 161, 0.5);
        transform: translateY(-4px);
        box-shadow: 
            0 8px 24px rgba(0, 255, 161, 0.3),
            0 0 40px rgba(0, 255, 161, 0.2);
    }
}

/* Touch эффект */
.social-link:active {
    transform: scale(0.95);
    background: rgba(0, 255, 161, 0.15);
}

.social-link:hover .social-icon-svg {
    color: #00FFA1;
    filter: drop-shadow(0 0 8px rgba(0, 255, 161, 0.6));
}

.social-icon-svg {
    width: clamp(20px, 5vw, 24px);
    height: clamp(20px, 5vw, 24px);
    flex-shrink: 0;
}

.social-whatsapp {
    color: #25D366;
}

.social-whatsapp:hover {
    background: rgba(37, 211, 102, 0.15);
}

.social-telegram {
    color: #0088cc;
}

.social-telegram:hover {
    background: rgba(0, 136, 204, 0.15);
}

.footer-bottom {
    text-align: center;
    padding-top: clamp(1.25rem, 3.5vw, 2rem); /* Улучшенный padding */
    padding-bottom: clamp(1rem, 3vw, 1.5rem);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    line-height: clamp(1.4, 1.5, 1.6); /* Адаптивный line-height */
}

/* Why Outsource */
.why-grid {
    display: grid;
    gap: clamp(1rem, 3vw, 1.75rem) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный gap 16-28px (было var(--space-xl) = 28px) */
    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(auto-fit, minmax(220px, 1fr)); /* МОБИЛЬНАЯ ВЕРСИЯ: адаптивная сетка */
    gap: clamp(1rem, 3vw, 1.75rem) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный gap 16-28px (было var(--space-xl) = 28px) */ /* МОБИЛЬНАЯ ВЕРСИЯ: меньший gap */
    margin-top: var(--space-xl); /* МОБИЛЬНАЯ ВЕРСИЯ: меньший отступ */
    
    /* МОБИЛЬНАЯ ВЕРСИЯ: на очень узких экранах одна колонка */
    @media (max-width: 414px) {
        grid-template-columns: 1fr;
    }
    
    /* ДЕСКТОП: 3 колонки на больших экранах */
    /* МОБИЛЬНАЯ ВЕРСИЯ: @media блок удален */
}

.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;
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Одноколоночный макет для клиентов - логотипы не обрезаются */
.clients-grid {
    display: grid !important; /* Mobile: grid для лучшего контроля */
    grid-template-columns: repeat(2, 1fr) !important; /* Mobile: 2 колонки */
    gap: clamp(1rem, 3vw, 1.5rem) !important; /* Адаптивный gap */
    justify-items: center; /* Центрируем логотипы */
    align-items: center;
    margin-top: var(--space-2xl);
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Tablet: 3-4 колонки */
@media (min-width: 768px) {
    .clients-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: clamp(1.5rem, 3vw, 2rem) !important;
    }
}

.client-logo {
    background: transparent;
    border: none;
    padding: clamp(1rem, 3vw, 1.5rem);
    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: clamp(60px, 15vw, 80px);
    align-items: center;
    justify-content: center;
    min-height: 100px;
    isolation: isolate;
    will-change: transform;
    position: relative;
    z-index: 2;
    transform: translateZ(0);
}

/* МОБИЛЬНАЯ ВЕРСИЯ: Сначала общие правила для всех логотипов */
.client-logo:not(.client-logo-inverted) img,
.client-logo:not(.client-logo-inverted) picture {
    max-width: clamp(120px, 30vw, 200px); /* Адаптивная максимальная ширина */
    max-height: clamp(40px, 12vw, 60px);
    width: auto;
    height: auto;
    object-fit: contain; /* Сохранение пропорций */
    /* МОБИЛЬНАЯ ВЕРСИЯ: убрано затемнение - логотипы яркие как на десктопе */
    filter: none !important;
    opacity: 1 !important;
    transition: filter 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

/* МОБИЛЬНАЯ ВЕРСИЯ: Партнёры - гарантируем одинаковый размер для всех логотипов */
/* Особенно важно для квадратных логотипов (компании 4 и 7) */
#partners .client-logo img,
#partners .client-logo picture img {
    max-width: clamp(120px, 30vw, 200px) !important;
    max-height: clamp(60px, 18vw, 90px) !important; /* Увеличено для квадратных логотипов */
    min-width: clamp(100px, 25vw, 150px) !important; /* Минимальная ширина для одинакового размера */
    min-height: clamp(50px, 15vw, 80px) !important; /* Минимальная высота - увеличено */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
}

/* МОБИЛЬНАЯ ВЕРСИЯ: КРИТИЧНО - amoCRM (4-й элемент) требует особого подхода */
/* Квадратное изображение 800x800, нужно гарантировать одинаковый размер с другими */
/* Используем максимальную специфичность для гарантии применения */
#partners.clients-section .clients-grid .client-logo:nth-child(4),
#partners .clients-grid .client-logo:nth-child(4) {
    /* Вертикальное выравнивание - центрируем как остальные */
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#partners.clients-section .clients-grid .client-logo:nth-child(4) img,
#partners.clients-section .clients-grid .client-logo:nth-child(4) picture img,
#partners .clients-grid .client-logo:nth-child(4) img,
#partners .clients-grid .client-logo:nth-child(4) picture img,
html body #partners .clients-grid .client-logo:nth-child(4) img,
html body #partners .clients-grid .client-logo:nth-child(4) picture img {
    /* Для квадратного изображения используем более агрессивные значения */
    /* Чтобы визуально он был такого же размера как прямоугольные логотипы */
    max-width: clamp(140px, 35vw, 220px) !important; /* Увеличено для визуального равенства */
    max-height: clamp(70px, 20vw, 100px) !important; /* Увеличено для квадратного формата */
    min-width: clamp(130px, 32vw, 190px) !important; /* Гарантированная ширина - больше чем у остальных */
    min-height: clamp(60px, 18vw, 85px) !important; /* Гарантированная высота */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
    vertical-align: middle !important; /* Вертикальное выравнивание */
    display: block !important; /* Блочный элемент для лучшего контроля */
    margin: 0 auto !important; /* Центрирование */
}

/* МОБИЛЬНАЯ ВЕРСИЯ: Inverted логотипы (компании 3 и 6) - БЕЗ затемнения, БЕЗ инверсии - ЯРКИЕ */
/* На десктопе они тоже яркие, поэтому убираем все фильтры */
.client-logo.client-logo-inverted img,
.client-logo.client-logo-inverted picture img,
.client-logo.client-logo-inverted picture source + img,
.client-logo-inverted img,
.client-logo-inverted picture img {
    max-width: clamp(120px, 30vw, 200px);
    max-height: clamp(40px, 12vw, 60px);
    width: auto;
    height: auto;
    object-fit: contain;
    /* МОБИЛЬНАЯ ВЕРСИЯ: убрано затемнение, убрана инверсия - логотипы яркие как обычные */
    filter: none !important;
    opacity: 1 !important;
    will-change: filter;
    isolation: isolate;
    transition: filter 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

/* Hover эффект для обычных логотипов (только на устройствах с hover) */
@media (hover: hover) {
    .client-logo:not(.client-logo-inverted):hover img {
        /* МОБИЛЬНАЯ ВЕРСИЯ: логотипы уже яркие, hover только для плавности */
        filter: brightness(1.1) !important;
        opacity: 1 !important;
        transform: scale(1.05);
    }
}

.client-logo:not(.client-logo-inverted):hover img {
    /* МОБИЛЬНАЯ ВЕРСИЯ: логотипы уже яркие, hover только для плавности */
    filter: brightness(1.1) !important;
    opacity: 1 !important;
}

/* Hover эффект для inverted логотипов (компании 3 и 6) */
@media (hover: hover) {
    .client-logo.client-logo-inverted:hover img,
    .client-logo.client-logo-inverted:hover picture img {
        /* МОБИЛЬНАЯ ВЕРСИЯ: логотипы уже яркие, hover только для плавности */
        filter: brightness(1.1) !important;
        opacity: 1 !important;
        transform: scale(1.05);
    }
}

.client-logo.client-logo-inverted:hover img,
.client-logo.client-logo-inverted:hover picture img {
    /* МОБИЛЬНАЯ ВЕРСИЯ: логотипы уже яркие, hover только для плавности */
    filter: brightness(1.1) !important;
    opacity: 1 !important;
}

/* МОБИЛЬНАЯ ВЕРСИЯ: КРИТИЧНО - Убеждаемся что inverted логотипы НЕ затемнены */
/* Это правило должно быть последним для максимального приоритета */
.clients-section .client-logo.client-logo-inverted img,
.clients-section .client-logo.client-logo-inverted picture img,
.clients-section .client-logo.client-logo-inverted picture source + img,
.clients-grid .client-logo.client-logo-inverted img,
.clients-grid .client-logo.client-logo-inverted picture img,
.clients-grid .client-logo.client-logo-inverted picture source + img,
#clients .client-logo.client-logo-inverted img,
#clients .client-logo.client-logo-inverted picture img,
.container .client-logo.client-logo-inverted img,
.container .client-logo.client-logo-inverted picture img {
    /* МОБИЛЬНАЯ ВЕРСИЯ: убрано затемнение, убрана инверсия - логотипы яркие как обычные */
    filter: none !important;
    opacity: 1 !important;
    will-change: filter;
    isolation: isolate;
}

/* МОБИЛЬНАЯ ВЕРСИЯ: АБСОЛЮТНОЕ ПРАВИЛО В КОНЦЕ - гарантия что inverted логотипы яркие */
/* Это правило должно быть самым последним в файле */
body .clients-section .clients-grid .client-logo.client-logo-inverted img,
body .clients-section .clients-grid .client-logo.client-logo-inverted picture img,
html body .clients-section .clients-grid .client-logo.client-logo-inverted img,
html body .clients-section .clients-grid .client-logo.client-logo-inverted picture img {
    /* МОБИЛЬНАЯ ВЕРСИЯ: убрано затемнение, убрана инверсия - логотипы яркие как обычные */
    filter: none !important;
    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;
}

/* ========================================
   CERTIFICATES SECTION
========================================= */
.certificates-section {
    isolation: isolate;
    position: relative;
    z-index: 1;
}

.certificates-grid {
    display: grid;
    grid-template-columns: 1fr; /* МОБИЛЬНАЯ ВЕРСИЯ: одна колонка */
    gap: clamp(1rem, 3vw, 1.75rem) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный gap 16-28px (было var(--space-xl) = 28px) */
    margin-top: var(--space-2xl);
    isolation: isolate;
    transform: translateZ(0);
}

.certificate-card {
    /* ═══════════════════════════════════════════════════════
       ЭФФЕКТ NAVBAR - темный И видны частицы!
       ═══════════════════════════════════════════════════════ */
    
    /* Баланс между читаемостью и прозрачностью (как navbar) */
    background: rgba(10, 10, 10, 0.65); /* Как navbar - видны частицы! */
    backdrop-filter: blur(10px); /* Меньше blur как у navbar! */
    -webkit-backdrop-filter: blur(10px);
    
    /* Светящаяся рамка */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px; /* Как navbar */
    
    /* Глубина через shadows (как navbar) */
    box-shadow: 
        0 4px 24px 0 rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    
    padding: var(--space-md);
    transition: all var(--duration-normal) ease;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* Квадратные карточки для единообразия */
    display: flex;
    align-items: center;
    justify-content: center;
}

.certificate-card:hover {
    background: rgba(10, 10, 10, 0.75); /* Темнее при hover */
    border-color: rgba(0, 255, 161, 0.3);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 60px rgba(2, 183, 140, 0.4),
        0 0 40px 0 rgba(0, 255, 161, 0.15),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

.certificate-image-wrapper {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--space-sm); /* Небольшой внутренний отступ */
}

.certificate-image-wrapper img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Вся картинка видна, без обрезки */
    transition: transform var(--duration-normal) ease;
}

.certificate-card:hover .certificate-image-wrapper img {
    transform: scale(1.08);
}

/* Адаптивность */

/* How It Works */
/* Glassmorphism Cards Design для "Как это работает" */
.steps-container {
    margin-top: var(--space-2xl);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Auto-fit адаптивная сетка - не меняется */
    gap: clamp(1rem, 3vw, 1.75rem) !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный gap 16-28px (было var(--space-xl) = 28px) */

    /* Transform origin для пропорционального масштабирования от центра */
    transform-origin: center center;
}

.step {
    position: relative;
    padding: var(--space-xl);
    background: rgba(26, 26, 26, 0.4);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Градиентная рамка через псевдоэлемент */
.step::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, #02B78C, #00FFA1, #e1ff00);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

/* Hover эффект: усиление свечения рамки */
.step:hover::before {
    opacity: 1;
}

/* Hover эффект: подъём карточки */
.step:hover {
    transform: translateY(-8px);
    background: rgba(26, 26, 26, 0.6);
    box-shadow:
        0 20px 40px rgba(2, 183, 140, 0.3),
        0 0 60px rgba(0, 255, 161, 0.2);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 80px;
    height: auto;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    color: var(--color-primary);
    border-radius: 12px;
    font-weight: 800;
    font-size: var(--text-3xl);
    margin-bottom: var(--space-md);
    /* Неоновое свечение как у "30 услуг" */
    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);
    animation: numberPulse 2s ease-in-out infinite;
}

@keyframes numberPulse {
    0%, 100% {
        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);
    }
    50% {
        text-shadow:
            0 0 20px rgba(2, 183, 140, 1),
            0 0 40px rgba(0, 255, 161, 0.8),
            0 0 60px rgba(2, 183, 140, 0.6),
            0 0 80px rgba(225, 255, 0, 0.4);
    }
}

.step-content {
    margin-top: var(--space-sm);
}

.step-title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--color-text-primary);
    transition: color 0.3s ease;
}

.step:hover .step-title {
    color: var(--color-primary);
}

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

.step:hover .step-description {
    color: var(--color-text-primary);
}

/* Sales System */
.system-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 колонка */
    gap: clamp(1.25rem, 3.5vw, 2rem); /* Улучшенный gap */
    margin-top: var(--space-2xl);
    transform-origin: center center;
}

/* Tablet: 2 колонки */
@media (min-width: 768px) {
    .system-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet Large: 3 колонки */
@media (min-width: 1024px) {
    .system-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.system-feature {
    /* LIQUID GLASS EFFECT (как Navbar) */
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* Элегантная тонкая рамка */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: clamp(1.25rem, 3.5vw, 1.75rem); /* Улучшенный padding */
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1rem);
    
    /* Глубина 3D через тени + внутренняя подсветка */
    box-shadow: 
        0 4px 24px 0 rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
    
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.6s ease-out; /* Плавная анимация появления */
    opacity: 0;
    animation-fill-mode: forwards;
}

/* Задержка анимации для каждого элемента */
.system-feature:nth-child(1) { animation-delay: 0.1s; }
.system-feature:nth-child(2) { animation-delay: 0.2s; }
.system-feature:nth-child(3) { animation-delay: 0.3s; }
.system-feature:nth-child(4) { animation-delay: 0.4s; }
.system-feature:nth-child(5) { animation-delay: 0.5s; }
.system-feature:nth-child(6) { animation-delay: 0.6s; }
.system-feature:nth-child(n+7) { animation-delay: 0.7s; }

.system-feature:hover {
    /* Усиленный glass фон при hover */
    background: rgba(10, 10, 10, 0.95); /* ТЕМНЫЙ почти плотный при hover */
    
    /* Зелёная рамка при hover */
    border-color: rgba(0, 255, 161, 0.5);
    
    /* Lift */
    transform: translateY(-6px);
    
    /* Усиленные тени + зелёное свечение */
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 255, 161, 0.3),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}

.feature-icon {
    font-size: clamp(2rem, 6vw, 2.5rem); /* Mobile */
    margin-bottom: clamp(0.75rem, 2vw, 1rem);
}

/* Tablet */
@media (min-width: 768px) {
    .feature-icon {
        font-size: clamp(2.5rem, 4vw, 3rem);
    }
}

.feature-title {
    font-size: clamp(1.125rem, 3.5vw, 1.375rem);
    font-weight: 600;
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
    color: #00FFA1; /* Зелёный бренд-акцент */
}

.feature-description {
    font-size: clamp(0.9375rem, 2.5vw, 1.0625rem);
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* МОБИЛЬНАЯ ВЕРСИЯ: Партнёры используют те же стили что и клиенты */
/* Старые стили для .system-feature удалены, так как теперь используется .client-logo */
/* Партнёры наследуют стили от .clients-section .clients-grid .client-logo */

#partners {
    /* МОБИЛЬНАЯ ВЕРСИЯ: высота по контенту */
    display: flex;
    align-items: flex-start; /* МОБИЛЬНАЯ ВЕРСИЯ: контент сверху */
    padding: var(--space-lg) 0; /* МОБИЛЬНАЯ ВЕРСИЯ: меньшие отступы */
}

/* ДЕСКТОП: полный экран для #partners */
    /* МОБИЛЬНАЯ ВЕРСИЯ: @media блок удален */

/* МОБИЛЬНАЯ ВЕРСИЯ: .system-content удалено, используется .container */

#partners .section-title,
.partners-section .section-title {
    font-size: clamp(1.5rem, 5vw, 2rem); /* Mobile */
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
}

/* Tablet */
@media (min-width: 768px) {
    #partners .section-title,
    .partners-section .section-title {
        font-size: clamp(2rem, 4vw, 2.5rem);
    }
}

#partners .system-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* ВСЕГДА 4 колонки - не меняется */
    gap: var(--space-xl) var(--space-md);
    margin-top: var(--space-lg);

    /* Transform origin для пропорционального масштабирования от центра */
    transform-origin: center center;
}

/* МОБИЛЬНАЯ ВЕРСИЯ: Партнёры используют те же стили что и клиенты */
/* Все старые стили для .system-feature удалены - теперь используется .client-logo */

.feature-description {
    color: rgba(255, 255, 255, 0.8); /* Было var(--color-text-secondary), стало светлее для glass фона */
    line-height: 1.6; /* Было 1.5, стало 1.6 для лучшей читаемости */
    font-size: var(--text-sm);
}

/* Pricing with Stars */
#pricing .container {
    position: relative;
    overflow: hidden;
    background: rgba(10, 10, 10, 0.8) !important;
}

.stars-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;

    /* Transform origin для пропорционального масштабирования от центра */
    transform-origin: center center;
}

#pricing .section-title {
    position: relative;
    z-index: 2;
    margin-bottom: var(--space-2xl);
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Исправляем overflow для pricing-items */
.pricing-items {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column; /* Вертикальная раскладка - не меняется */
    gap: clamp(1.25rem, 3.5vw, 2rem) !important; /* Улучшенный адаптивный gap */
    max-width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: полная ширина (было 900px) */
    margin: 0 auto;
    width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: полная ширина */
    overflow-x: hidden !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: запрещаем горизонтальный скролл */

    /* Transform origin для пропорционального масштабирования от центра */
    transform-origin: center center;
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Исправляем overflow и padding для pricing-item */
.pricing-item {
    background: rgba(10, 10, 10, 0.70);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: clamp(8px, 2vw, 12px);
    padding: clamp(1.25rem, 3.5vw, 1.75rem); /* Улучшенный padding */
    gap: clamp(0.75rem, 2vw, 1.25rem); /* Улучшенный gap */
    transition: all var(--duration-normal) ease;
    text-align: center;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    display: flex;
    flex-direction: column;
}

.pricing-item:hover {
    background: rgba(10, 10, 10, 0.85);
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(2, 183, 140, 0.2);
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Исправляем обрезку текста в pricing-item-title */
.pricing-item-title {
    font-size: clamp(1.125rem, 3.5vw, 1.375rem) !important; /* Mobile */
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: clamp(0.75rem, 2vw, 1rem);
    line-height: 1.4;
    overflow: visible !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

.pricing-item-price {
    font-size: clamp(1.5rem, 5vw, 2rem) !important; /* Mobile */
    font-weight: 700;
    color: var(--color-primary);
    text-shadow: 0 0 20px rgba(2, 183, 140, 0.5);
    overflow: visible !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Адаптивный pricing-content */
.pricing-content {
    max-width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: полная ширина (было 800px) */
    margin: clamp(var(--space-xl), 4vw, var(--space-2xl)) auto 0 !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: адаптивный отступ */
    width: 100% !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: полная ширина */
    overflow-x: hidden !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: запрещаем горизонтальный скролл */
}

.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
========================================= */

/* ========================================
   PROGRESS DOTS INDICATOR
========================================= */
/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Скрываем вертикальный индикатор прогресса - мешает чтению */
.progress-dots {
    display: none !important;
}

.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;
}

/* Скрываем на мобильных */

/* ========================================
   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: 120px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    perspective: 1000px;
    margin-top: 10px;
    opacity: 1 !important; /* CRITICAL FIX: Force visibility */
}

.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;
    margin-top: 15px; /* Опускаем саму анимацию ниже */
    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: 120px; /* Увеличиваем высоту чтобы анимация была на том же уровне что у красного */
    min-height: 120px;
    display: flex;
    align-items: center;
    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;
}

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

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Исправляем обрезку текста */
.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-primary); /* Inter - как в "Опыт в 20 нишах" */
    overflow: visible !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: не обрезаем текст */
    min-height: auto !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: высота по контенту */
    word-wrap: break-word !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: переносим длинные слова */
    overflow-wrap: break-word !important;
}

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

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

.three-blocks-section .block-text-paragraph {
    font-size: clamp(12px, 1.2vw, 14px); /* Адаптивный размер для разных экранов */
    line-height: 1.65;                   /* Скорректирован пропорционально */
    letter-spacing: 0.01em;              /* Небольшой межбуквенный интервал для воздушности */
    margin-bottom: var(--space-sm);      /* Больше отступ между параграфами */
    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 {
    /* Контейнеры анимаций только для этой секции - OVERRIDE global rules */
    min-height: auto !important;
    height: auto !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ИЗОЛЯЦИЯ: Анимация знака = */
.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; /* Скрываем если не в правильной секции */
}

/* ========================================
   RESPONSIVE DESIGN - OPTIMIZED FOR MacBook Pro 16"
   Добавлено: 2025-11-06
   ======================================== */

/* ═══════════════════════════════════════════════════════════════════ */
/* PROPORTIONAL SCALING FOR .three-blocks (BLOCK 2 - Transform Scale)   */
/* Всё масштабируется пропорционально как картинка                      */
/* 3 колонки ВСЕГДА сохраняются, layout НЕ меняется                    */
/* ═══════════════════════════════════════════════════════════════════ */

/* Уменьшенное окно MacBook Pro 16" (1440-1727px): 90% */

/* MacBook Air 13" / сильно уменьшенное окно (1280-1439px): 80% */

/* Очень узкое окно / iPad Pro горизонтально (1024-1279px): 75% (было 68%, увеличено для читаемости) */

/* iPad вертикально (768-1023px): 70% (было 58%, увеличено для читаемости) */

/* Мобильные устройства (480-767px): 65% (было 48%, увеличено для читаемости) */

/* Очень узкие мобильные (<480px): 60% (было 45%, увеличено для читаемости) */

/* ═══════════════════════════════════════════════════════════════════ */
/* END PROPORTIONAL SCALING FOR .three-blocks                            */
/* ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════ */
/* PROPORTIONAL SCALING FOR .system-grid (BLOCK 3 - Transform Scale)    */
/* ═══════════════════════════════════════════════════════════════════ */
/* 4 колонки ВСЕГДА сохраняются, layout НЕ меняется */

/* 1440-1727px: 90% */

/* 1280-1439px: 80% */

/* 1024-1279px: 68% */

/* 768-1023px: 58% */

/* 480-767px: 48% */

/* <480px: 45% */

/* ═══════════════════════════════════════════════════════════════════ */
/* END PROPORTIONAL SCALING FOR .system-grid                             */
/* ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════ */
/* PROPORTIONAL SCALING FOR .partners-grid (BLOCK 4 - Transform Scale)  */
/* ═══════════════════════════════════════════════════════════════════ */
/* 6 колонок ВСЕГДА сохраняются, layout НЕ меняется */

/* 1440-1727px: 90% */

/* 1280-1439px: 80% */

/* 1024-1279px: 68% */

/* 768-1023px: 58% */

/* 480-767px: 48% */

/* <480px: 45% */

/* ═══════════════════════════════════════════════════════════════════ */
/* END PROPORTIONAL SCALING FOR .partners-grid                           */
/* ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════ */
/* PROPORTIONAL SCALING FOR #partners .system-grid (BLOCK 5)             */
/* ═══════════════════════════════════════════════════════════════════ */
/* 4 колонки ВСЕГДА сохраняются, layout НЕ меняется */

/* 1440-1727px: 90% */

/* 1280-1439px: 80% */

/* 1024-1279px: 68% */

/* 768-1023px: 58% */

/* 480-767px: 48% */

/* <480px: 45% */

/* ═══════════════════════════════════════════════════════════════════ */
/* END PROPORTIONAL SCALING FOR #partners .system-grid                   */
/* ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════ */
/* PROPORTIONAL SCALING FOR .pricing-items (BLOCK 6)                     */
/* ═══════════════════════════════════════════════════════════════════ */
/* Вертикальная раскладка (flex column) - не меняется */

/* 1440-1727px: 90% */

/* 1280-1439px: 80% */

/* 1024-1279px: 68% */

/* 768-1023px: 58% */

/* 480-767px: 48% */

/* <480px: 45% */

/* ═══════════════════════════════════════════════════════════════════ */
/* END PROPORTIONAL SCALING FOR .pricing-items                           */
/* ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════ */
/* PROPORTIONAL SCALING FOR .impact-grid-cases (BLOCK 7)                 */
/* ═══════════════════════════════════════════════════════════════════ */
/* 3 колонки ВСЕГДА сохраняются, layout НЕ меняется */

/* 1440-1727px: 90% */

/* 1280-1439px: 80% */

/* 1024-1279px: 68% */

/* 768-1023px: 58% */

/* 480-767px: 48% */

/* <480px: 45% */

/* ═══════════════════════════════════════════════════════════════════ */
/* END PROPORTIONAL SCALING FOR .impact-grid-cases                       */
/* ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════ */
/* PROPORTIONAL SCALING FOR .steps-container (BLOCK 8)                   */
/* ═══════════════════════════════════════════════════════════════════ */
/* Auto-fit адаптивная сетка - не меняется, только масштабируется */

/* 1440-1727px: 90% */

/* 1280-1439px: 80% */

/* 1024-1279px: 68% */

/* 768-1023px: 58% */

/* 480-767px: 48% */

/* <480px: 45% */

/* ═══════════════════════════════════════════════════════════════════ */
/* END PROPORTIONAL SCALING FOR .steps-container                         */
/* ═══════════════════════════════════════════════════════════════════ */

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

/* ИЗОЛЯЦИЯ: Intro Section */
.intro-section {
    isolation: isolate;
    /* МОБИЛЬНАЯ ВЕРСИЯ: базовые стили уже заданы выше */
    display: flex;
    align-items: flex-start; /* МОБИЛЬНАЯ ВЕРСИЯ: контент сверху */
    justify-content: flex-start;
    padding-top: var(--space-xl); /* МОБИЛЬНАЯ ВЕРСИЯ: меньшие отступы */
    padding-left: var(--space-base);
    padding-right: var(--space-base);
    padding-bottom: var(--space-xl);
    position: relative;
    background: var(--color-bg-primary);
}

/* ДЕСКТОП: полный экран для intro-section */
    /* МОБИЛЬНАЯ ВЕРСИЯ: @media блок удален */

.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); /* ВСЕГДА 6 колонок - не меняется */
    gap: var(--space-lg) var(--space-xl);
    transform-style: preserve-3d;

    /* Transform origin для пропорционального масштабирования от центра */
    transform-origin: center center;
}

.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;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* PROPORTIONAL SCALING FOR .progress-words (BLOCK 1 - Transform Scale) */
/* Всё масштабируется пропорционально как картинка                      */
/* 6 колонок ВСЕГДА сохраняются, layout НЕ меняется                    */
/* ═══════════════════════════════════════════════════════════════════ */

/* Уменьшенное окно MacBook Pro 16" (1440-1727px): 90% */

/* MacBook Air 13" / сильно уменьшенное окно (1280-1439px): 80% */

/* Очень узкое окно / iPad Pro горизонтально (1024-1279px): 68% */

/* iPad вертикально (768-1023px): 58% */

/* Мобильные устройства (480-767px): 48% */

/* Очень узкие мобильные (<480px): 45% (минимальный scale для читаемости) */

/* ═══════════════════════════════════════════════════════════════════ */
/* END PROPORTIONAL SCALING FOR .progress-words                          */
/* ═══════════════════════════════════════════════════════════════════ */

/* 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 стек */
}

/* УДАЛЕНО: Этот селектор был неправильным и скрывал анимации даже внутри three-blocks-section */

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

/*
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) */

/* ========================================
   2K МОНИТОРЫ (2560×1440)
   Ограничиваем ширину для читабельности
========================================= */

/* ========================================
   УНИВЕРСАЛЬНОЕ ПРАВИЛО ДЛЯ INTRO-SECTION
   Применяется на всех разрешениях > 993px (кроме Full HD)
========================================= */

/* ========================================
   RETINA ДИСПЛЕИ (MacBook Pro 16" и подобные)
   Высокая плотность пикселей
========================================= */

/* ========================================
   МАЛЕНЬКИЕ НОУТБУКИ (1366×768)
   Компактные экраны ноутбуков
========================================= */

/* Success Modal Styles */
.success-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    animation: modalFadeIn 0.3s ease-out;
}

/* CSS классы для модального окна (замена inline стилей) */
body.modal-open {
    overflow: hidden !important;
}

.success-modal[hidden] {
    display: none !important;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.success-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.success-modal-content {
    position: relative;
    background: rgba(2, 183, 140, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid transparent;
    border-radius: 20px;
    padding: 3rem 2.5rem;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(2, 183, 140, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

/* Градиентная рамка как у кнопки */
.success-modal-content::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, #02B78C, #00FFA1, #e1ff00);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

@keyframes modalSlideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.success-modal-icon {
    margin: 0 auto 1.5rem;
    animation: iconPop 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

@keyframes iconPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-modal-icon svg {
    filter: drop-shadow(0 0 20px rgba(2, 183, 140, 0.6));
}

.success-modal-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 1rem;
    background: linear-gradient(135deg, #02B78C, #00FFA1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.success-modal-text {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0 0 2rem;
}

.success-modal-button {
    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;
    padding: 1rem 3rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(2, 183, 140, 0.2);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
}

/* Градиентная рамка кнопки */
.success-modal-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    padding: 2px;
    background: linear-gradient(135deg, #02B78C, #00FFA1, #e1ff00);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.success-modal-button:hover {
    background: rgba(2, 183, 140, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(2, 183, 140, 0.4);
}

.success-modal-button:active {
    transform: translateY(0);
}

/* ========================================
   ЭФФЕКТ "ЗВЕЗДЫ ЛЕТЯТ НА НАС" ДЛЯ CONTACT SECTION
   Автономное движение без привязки к скроллу
========================================= */

/* Основной контейнер с эффектами */
.contact-section {
    position: relative;
    overflow: hidden;
}

/* Canvas для эффекта частиц */
.consultation-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    
    /* ⚡ OPTIMIZATION: GPU ускорение для Canvas анимации */
    transform: translateZ(0);
    will-change: transform;
    contain: layout style; /* ⚡ OPTIMIZED: Убран paint - не нужен для элементов без overflow проблем */
    backface-visibility: hidden;
}

/* Убедиться что контент поверх canvas */
.contact-section .container {
    position: relative;
    z-index: 2;
}

.contact-content {
    position: relative;
    z-index: 2;
}

/* .contact-form уже имеет position: relative и z-index: 10 в основных стилях (строка 3119) */

/* ========================================
   ЧЕКБОКС СОГЛАСИЯ НА ОБРАБОТКУ ПЕРСОНАЛЬНЫХ ДАННЫХ
   152-ФЗ + GDPR compliance
========================================= */

/* Контейнер чекбокса */
.checkbox-group {
    margin-top: clamp(1rem, 3vw, 1.5rem); /* Адаптивный отступ сверху от поля сообщения */
    margin-bottom: var(--space-lg);
    padding: clamp(0.75rem, 2vw, 1rem) 0; /* Адаптивный внутренний отступ */
}

/* Label для чекбокса */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    cursor: pointer;
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    min-height: 44px; /* Touch target */
    padding: clamp(0.5rem, 1.5vw, 0.75rem) 0;
    line-height: 1.5;
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
    padding: 8px 0; /* Дополнительный отступ для кликабельной области */
}

.checkbox-label:hover {
    color: var(--color-text-primary);
}

/* Стили для самого чекбокса */
.checkbox-label input[type="checkbox"] {
    margin: 0;
    margin-top: 2px; /* Небольшое смещение для выравнивания с текстом */
    width: clamp(18px, 4.5vw, 20px); /* Минимум 18px для touch */
    height: clamp(18px, 4.5vw, 20px);
    min-width: 18px; /* Touch target */
    min-height: 18px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:hover {
    transform: scale(1.1);
}

.checkbox-label input[type="checkbox"]:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Ссылки в тексте согласия */
.checkbox-label a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color 0.2s ease;
    font-weight: 500;
}

.checkbox-label a:hover {
    color: var(--color-accent);
    text-decoration: none;
}

/* Стили для ошибки валидации */
.checkbox-group.error {
    background: rgba(255, 107, 107, 0.05);
    border-radius: 8px;
    padding: 12px 16px;
    border-left: 3px solid #ff6b6b;
}

.checkbox-group.error .checkbox-label {
    color: #ff6b6b;
}

.checkbox-group.error input[type="checkbox"] {
    accent-color: #ff6b6b;
}

/* Сообщение об ошибке */
.checkbox-group .error-message {
    color: #ff6b6b;
    font-size: 12px;
    margin-top: 4px;
    margin-left: 30px;
}

/* ========================================
   MOBILE RESPONSIVE FOUNDATION
   Полная адаптация для мобильных устройств
   Дата: 2025-11-01
========================================= */

/* ----------------------------------------
   1. CSS ПЕРЕМЕННЫЕ ДЛЯ МОБИЛЬНЫХ
---------------------------------------- */

/* Mobile (320px - 767px) */

/* Mobile Extra Small (320px - 374px) */

/* ----------------------------------------
   2. NAVIGATION (NAVBAR) - Дополнительная адаптация
---------------------------------------- */

/* ----------------------------------------
   3. HERO SECTION - Полная адаптация
---------------------------------------- */

/* Extra small */

/* ----------------------------------------
   4. TWO-BLOCKS SECTION (Powered by experience)
---------------------------------------- */

/* ----------------------------------------
   4. THREE-BLOCKS SECTION (0.99³⁶⁵ = 0.03)
---------------------------------------- */

/* ----------------------------------------
   5. INTRO SECTION (Нужны ли мы вам)
---------------------------------------- */

/* ----------------------------------------
   6. CARDS SECTIONS - Universal Grid Adaptation
   (Industries, Impact, Clients, How-it-works, System, Pricing, Partners)
---------------------------------------- */

/* ----------------------------------------
   7. CONTACT FORM
---------------------------------------- */

/* ----------------------------------------
   8. FOOTER - Проверка адаптации
---------------------------------------- */

/* ----------------------------------------
   9. UNIVERSAL TYPOGRAPHY - Адаптация всех заголовков и текста
---------------------------------------- */

/* ----------------------------------------
   10. ANIMATIONS OPTIMIZATION
---------------------------------------- */


/* ----------------------------------------
   11. MOBILE UTILITIES - Полезные классы
---------------------------------------- */

/* ========================================
   END OF MOBILE RESPONSIVE FOUNDATION
========================================= */

/* ========================================
   HYBRID MOBILE ADAPTATION SUPPORT
   Поддержка JavaScript адаптивной системы
   ======================================== */

/* 1. Touch Device Class - отключаем ненужные hover эффекты */
.touch-device *:hover {
    /* JavaScript добавит этот класс автоматически */
    /* Переопределяем transition для производительности */
}

/* 2. Viewport Width Attributes - специфичные стили для разных viewport */
html[data-viewport-width="980"] {
    /* iPhone SE и маленькие экраны */
    font-size: 14px; /* Базовый размер для малых устройств */
}

html[data-viewport-width="1100"] {
    /* iPhone 12/13/14 стандарт */
    font-size: 15px;
}

html[data-viewport-width="1150"] {
    /* iPhone Plus/XR/11 */
    font-size: 15.5px;
}

html[data-viewport-width="1200"] {
    /* iPhone Pro Max и большие экраны */
    font-size: 16px;
}

/* 3. Scale Factor Data Attributes - компенсация очень малых масштабов */
html[data-scale-factor^="0.3"],
html[data-scale-factor^="0.2"] {
    /* Экстремально малый масштаб - увеличиваем базовые размеры */
    font-size: 18px !important;
}

/* 4. Canvas Container Optimization для мобильных */

/* 5. Минимальные размеры интерактивных элементов (Apple HIG + Material) */

/* ========================================
   MOBILE UNIFICATION - ПРОФЕССИОНАЛЬНАЯ АДАПТАЦИЯ 1 в 1
   Мобильные = MacBook (без пустот)
   Дата: 2025-11-11 17:15
   ======================================== */

/* ========================================
   END OF HYBRID MOBILE ADAPTATION SUPPORT
========================================= */

/* ========================================
   MOBILE OPTIMIZATIONS - Интеграция mobile-optimized.css
   Отключение тяжелых эффектов для мобильных устройств
========================================= */

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Скрываем сложные SVG анимации */
.three-blocks-section .box-animation,
.three-blocks-section .decline-animation {
    display: none !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: скрываем сложную SVG анимацию (81 элемент) */
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: prefers-reduced-motion - отключаем анимации для пользователей с ограничениями */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* МОБИЛЬНЫЕ УСТРОЙСТВА: ≤768px */
@media (max-width: 768px) {
    /* Отключаем backdrop-filter для производительности */
    .navbar {
        background: rgba(10, 10, 10, 0.98) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    .hero-badge,
    .progress-bar {
        background: rgba(20, 20, 20, 0.98) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* УБРАНО: зеленый фон для кнопок - теперь кнопки имеют эффект навбара */
    /* .btn-primary,
    .btn-secondary {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(2, 183, 140, 0.2) !important;
    } */
    
    /* МОБИЛЬНАЯ ВЕРСИЯ: Убираем все анимации для стабильности */
    .hero-title,
    .title-line,
    .hero-subtitle,
    .title-gradient,
    .subtitle-highlight {
        animation: none !important;
        transform: translateY(0) translateZ(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Отключаем сложные анимации частиц */
    .floating-element {
        animation: none !important;
    }
    
    /* Уменьшаем размеры шрифтов для мобильных */
    .hero h1 {
        font-size: clamp(2rem, 8vw, 3rem) !important;
    }
    
    .hero h2 {
        font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    }
    
    /* Уменьшаем отступы секций */
    section {
        padding: var(--space-lg) var(--space-base) !important;
    }
    
    /* МОБИЛЬНАЯ ВЕРСИЯ: Убеждаемся, что весь текст виден */
    .hero {
        padding-top: clamp(4.5rem, 12vw, 6rem) !important; /* Компенсация высоты navbar */
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .hero-container,
    .hero-content,
    .hero-title {
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .hero-title {
        margin-top: 0 !important; /* Убираем margin-top для полной видимости */
        line-height: 1.3 !important; /* Увеличенный line-height для читаемости */
    }
}

/* ОЧЕНЬ УЗКИЕ ЭКРАНЫ: ≤414px */
@media (max-width: 414px) {
    /* Еще больше упрощаем для очень узких экранов */
    .hero-container,
    .two-blocks-section .split-screen-container {
        padding: 0 var(--space-sm) !important;
    }
    
    /* Уменьшаем размеры всех заголовков */
    h1 {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    }
    
    h2 {
        font-size: clamp(1.25rem, 5vw, 1.5rem) !important;
    }
    
    h3 {
        font-size: clamp(1rem, 4vw, 1.25rem) !important;
    }
    
    /* Уменьшаем отступы контейнеров */
    .container {
        padding: var(--space-lg) var(--space-base) !important;
    }
}

/* ========================================
   МОБИЛЬНАЯ ВЕРСИЯ AAA+: УПРОЩЁННЫЕ АНИМАЦИИ
   Замена сложных SVG на простые CSS-анимации
   ======================================== */

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Упрощённая анимация для Three Blocks (вместо сложной SVG) */
.three-blocks-section .animation-container {
    display: flex !important; /* МОБИЛЬНАЯ ВЕРСИЯ AAA+: показываем контейнер */
    justify-content: center !important;
    align-items: center !important;
    min-height: 150px !important;
    padding: var(--space-lg) 0 !important;
    gap: var(--space-md) !important;
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Упрощённые круги для decline анимации (красные) */
.three-blocks-section .simple-decline-animation {
    display: flex !important;
    gap: var(--space-md) !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 150px !important;
}

.three-blocks-section .simple-decline-animation .simple-circle {
    width: clamp(40px, 8vw, 60px) !important;
    height: clamp(40px, 8vw, 60px) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255, 68, 68, 0.8), rgba(255, 68, 68, 0.3)) !important;
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.5) !important;
    animation: simplePulse 2s ease-in-out infinite !important;
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Упрощённые круги для growth анимации (зелёные) */
.three-blocks-section .simple-growth-animation {
    display: flex !important;
    gap: var(--space-md) !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 150px !important;
}

.three-blocks-section .simple-growth-animation .simple-circle {
    width: clamp(40px, 8vw, 60px) !important;
    height: clamp(40px, 8vw, 60px) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(2, 183, 140, 0.8), rgba(2, 183, 140, 0.3)) !important;
    box-shadow: 0 0 20px rgba(2, 183, 140, 0.5) !important;
    animation: simplePulse 2s ease-in-out infinite !important;
}

/* МОБИЛЬНАЯ ВЕРСИЯ AAA+: Простая пульсация для упрощённых анимаций */
@keyframes simplePulse {
    0%, 100% { 
        opacity: 0.6; 
        transform: scale(1); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.1); 
    }
}

/* CSS классы для hero badges (замена inline стилей) */
#heroBadges.hidden-mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

#heroBadges.visible-desktop {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

/* Скрываем badges на мобильных и планшетах через CSS */
@media (max-width: 992px) {
    #heroBadges {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (min-width: 993px) {
    #heroBadges {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* ========================================
   МОБИЛЬНО-ОРИЕНТИРОВАННЫЕ КОНТЕЙНЕРЫ
   Разные подходы для разных типов контента
========================================= */

/* Полноэкранные секции (без контейнеров) - просто padding */
.section-padding {
    padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 1.5rem) !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Лёгкие карточки (минимальные эффекты) - для блоков контента */
.light-card {
    background: rgba(10, 10, 10, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1rem, 4vw, 1.5rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    /* БЕЗ box-shadow, БЕЗ backdrop-filter для производительности */
}

/* Акцентные контейнеры (только для важных секций) */
.accent-container {
    background: rgba(10, 10, 10, 0.7) !important;
    border: 1px solid rgba(2, 183, 140, 0.2) !important; /* Зелёная рамка - фирменный цвет */
    border-radius: 16px !important;
    padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; /* Лёгкая тень */
    /* БЕЗ backdrop-filter для производительности */
}

/* МОБИЛЬНАЯ ВЕРСИЯ: АБСОЛЮТНОЕ ПРАВИЛО В КОНЦЕ ФАЙЛА - гарантия что inverted логотипы яркие */
/* Это правило должно быть самым последним и иметь максимальную специфичность */
html body #clients.clients-section .container .clients-grid .client-logo.client-logo-inverted img,
html body #clients.clients-section .container .clients-grid .client-logo.client-logo-inverted picture img,
html body section#clients.clients-section .container .clients-grid .client-logo.client-logo-inverted img,
html body section#clients.clients-section .container .clients-grid .client-logo.client-logo-inverted picture img,
html body .clients-section .clients-grid .client-logo.client-logo-inverted img,
html body .clients-section .clients-grid .client-logo.client-logo-inverted picture img {
    /* МОБИЛЬНАЯ ВЕРСИЯ: убрано затемнение, убрана инверсия - логотипы яркие как обычные */
    filter: none !important;
    opacity: 1 !important;
    will-change: filter;
    isolation: isolate;
}

/* МОБИЛЬНАЯ ВЕРСИЯ: АБСОЛЮТНОЕ ПРАВИЛО В КОНЦЕ ФАЙЛА - amoCRM должен быть виден и выровнен */
html body #partners.clients-section .container .clients-grid .client-logo:nth-child(4) {
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body #partners.clients-section .container .clients-grid .client-logo:nth-child(4) img,
html body #partners.clients-section .container .clients-grid .client-logo:nth-child(4) picture img {
    /* Для квадратного изображения используем увеличенные размеры */
    /* Чтобы визуально он был такого же размера как прямоугольные логотипы */
    max-width: clamp(140px, 35vw, 220px) !important;
    max-height: clamp(70px, 20vw, 100px) !important;
    min-width: clamp(130px, 32vw, 190px) !important;
    min-height: clamp(60px, 18vw, 85px) !important;
    vertical-align: middle !important;
    display: block !important;
    margin: 0 auto !important;
}