/* =========================================
   01. ПЕРЕМЕННЫЕ И БАЗОВЫЕ НАСТРОЙКИ (ТЕМА)
   ========================================= */
:root {
    --primary: #0ea5e9;       
    --primary-hover: #0284c7;
    --primary-light: #e0f2fe;
    --accent: #10b981;        
    --danger: #e11d48; /* Приглушенный красный */       
    --dark: #0f172a;
    --text-main: #334155;
    --text-light: #64748b;
    --bg-body: #f8fafc;
    --bg-white: #ffffff;
    --border: #e2e8f0;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    
    /* === ПЕРЕМЕННЫЕ ДЛЯ ГЛАССМОРФИЗМА === */
    --glass-bg-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    --glass-bg-solid: rgba(255, 255, 255, 0.75); /* Для более плотных карточек */
    --glass-filter: blur(25px) saturate(160%);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    
    /* Нейтральные тени для базовых элементов */
    --shadow-card: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.03);
    /* Цветные тени для акцентов (hover, active) */
    --shadow-hover: 0 25px 35px -5px rgba(14, 165, 233, 0.15), 0 15px 15px -5px rgba(14, 165, 233, 0.05);
    --shadow-glow: 0 0 20px rgba(14, 165, 233, 0.3);
    
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Переменные для кейсов */
    --viscous-duration: 1.2s; 
    --viscous-ease: cubic-bezier(0.19, 1.62, 0.2, 0.95); 
}

[data-theme="dark"] {
    --bg-body: #0f172a;
    --bg-white: #1e293b;
    --text-main: #f8fafc;
    --text-light: #94a3b8;
    --border: #334155;
    --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

/* Font Awesome (cdnjs) не задаёт font-display в своих @font-face, из-за чего
   иконки невидимы, пока шрифт не догрузится (PageSpeed: "Используемые шрифты").
   Мы не управляем CDN-стилем, но т.к. этот <link> в head раньше style.css,
   по спецификации побеждает последнее совпавшее правило — переобъявляем
   те же семейства/начертания с font-display: swap на тех же самых файлах. */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2') format('woff2');
}
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2') format('woff2');
}

html, body {
    scroll-behavior: smooth;
    overflow-x: hidden !important; 
    width: 100%;
    position: relative;
    overflow-anchor: none; /* Запрещаем браузеру цепляться за элементы и прыгать */
}

* { margin: 0; padding: 0; box-sizing: border-box; } /* box-sizing применяется ко всему */

body {
    font-family: 'Manrope', sans-serif;
    color: var(--text-main);
    background-color: var(--bg-body);
    line-height: 1.7; 
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.section-header { text-align: center; margin-bottom: 4rem; }
.section-header h2 { font-size: 2.75rem; font-weight: 800; color: var(--dark); margin-bottom: 1rem; }
.section-header p { font-size: 1.1rem; color: var(--text-light); max-width: 600px; margin: 0 auto; }
section { padding: 50px 0; }

/* Умный Скролл-бар */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-hover); }

/* =========================================
   02. ГРУППИРОВКА ПОВТОРЯЮЩИХСЯ СТИЛЕЙ
   ========================================= */

/* Общие стили блоков страниц (Герой, Калькулятор, Гарантии) */
.hero, .calculator, .interactive-bg-section {
    position: relative;
    overflow: hidden;
    margin: 15px;
    width: 98%;
    z-index: 1;
    border-radius: 27px;
    align-items: center;
}

.calculator, .interactive-bg-section {
    padding: 40px 0;
    border: 1px solid rgb(155 155 155 / 30%);
    box-shadow: 0 4px 30px rgb(0 0 0 / 25%);
}

.step-indicator, .choice-card, .slider-group, .extra-box,
.counter-item, .summary-receipt, .contact-input-wizard, .bottom-bar {
    backdrop-filter: var(--glass-filter);
    -webkit-backdrop-filter: var(--glass-filter);
    border-radius: 20px;
}

/* Общая рамка для элементов калькулятора */
.choice-card, .slider-group, .extra-box, .counter-item,
.contact-input-wizard, .bottom-bar {
    border: 2px solid #8d8d8d42;
}

/* =========================================
   03. КНОПКИ
   ========================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(135deg, #0ea5e9b8, #0284c742); 
    color: #ffffff; padding: 16px 36px;
    border-radius: 50px; font-weight: 700; font-size: 1.1rem; border: none; cursor: pointer;
    transition: var(--transition); box-shadow: 0 10px 20px -5px rgba(14, 165, 233, 0.5);
    position: relative; overflow: hidden;
}
.btn::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: auto-glow 6s infinite ease-in-out;
}
.btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 25px -5px rgba(14, 165, 233, 0.4); }
.btn:active { transform: translateY(1px) scale(0.98); box-shadow: 0 5px 10px -5px rgba(14, 165, 233, 0.4); }

.btn-outline { background: transparent; border: 2px solid var(--bg-white); box-shadow: none; }
.btn-outline:hover { background: var(--bg-white); color: var(--dark); }

.magnetic-btn { transition: transform 0.1s linear, box-shadow 0.3s ease; }

/* =========================================
   04. НАВИГАЦИЯ (ШАПКА)
   ========================================= */
.navbar {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(46px);
    z-index: 1000;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
    padding: 15px 0;
    transition: var(--transition);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    position: fixed;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 98%;
    margin-top: 15px;
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 15px; /* Задает аккуратный отступ между кнопкой и переключателем языка */
}
.nav-container {
    position: relative; /* Добавляем это для абсолютного центрирования меню */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px; /* Задаст минимальный зазор в 15px между всеми соседними элементами в набаре */
}
.logo { font-size: 1.75rem; font-weight: 800; color: var(--primary); display: flex; align-items: center; gap: 8px; }
.logo i { animation: float 3s ease-in-out infinite; }
.logo-img { height: 35px; width: auto; object-fit: contain; }

.nav-menu { 
    display: flex; 
    gap: 32px; 
    font-weight: 600; 
    /* Новые свойства для строгого центрирования: */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.nav-menu a { color: var(--text-main); transition: var(--transition); position: relative; }
.nav-menu a::after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0;
    background-color: var(--primary); transition: width 0.3s ease;
}
.nav-menu a:hover { color: var(--primary); }
.nav-menu a:hover::after { width: 100%; }
.nav-menu .nav-link-active { color: var(--primary); }
.nav-menu .nav-link-active::after { width: 100%; }

/* Адаптивная навигация (Заменена на кнопку звонка) */
.mobile-phone-btn { display: none; }
.mobile-menu-toggle { display: none; }
.mobile-only-btn { display: none; }

@media (max-width: 992px) {
    .navbar { width: 90%; }
    .desktop-btn { display: none; }
    
    /* Стили новой круглой кнопки с телефоном */
    .mobile-phone-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: linear-gradient(135deg, #0ea5e96e, #0284c7a1);
        color: #ffffff;
        border: none;
        border-radius: 50%;
        font-size: 1.15rem;
        cursor: pointer;
        z-index: 1001;
        box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        /* Легкая пульсация фона */
        animation: pulse-tag 2s infinite; 
    }
    
    /* Подхватываем кинематографичную анимацию звонка, которую мы делали ранее */
    .mobile-phone-btn i {
        display: inline-block;
        transform-origin: center center;
        animation: global-phone-ring 2.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
    }

    .mobile-phone-btn:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
    }

    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.45);
        color: var(--dark);
        font-size: 1.2rem;
        cursor: pointer;
        z-index: 1002;
    }
}

@media (max-width: 992px) {
    .mobile-toggle { display: block; }
    .navbar { width: 90%; }
    .desktop-btn { display: none; }
    .nav-menu {
        /* Открытие/закрытие анимируем через transform, а НЕ через right —
           в Safari/WebKit анимация right/left/top на position:fixed элементе
           с backdrop-filter даёт баг компоновки: элемент в закрытом состоянии
           мог оставаться кликабельным поверх шапки, перехватывая тапы по
           .mobile-menu-toggle (в Chrome та же связка рендерится нормально).
           transform — GPU-композитный и chromium/webkit-совместимый способ. */
        position: fixed; top: 90px; right: 14px; width: 280px;
        max-height: min(66vh, 480px);
        left: auto; /* <-- Добавить этот сброс */
        transform: translateX(120%);
        will-change: transform;
        visibility: hidden;
        pointer-events: none;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(32px) saturate(160%); -webkit-backdrop-filter: blur(32px) saturate(160%);
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 26px;
        flex-direction: column; justify-content: center; align-items: center; gap: 22px;
        padding: 28px 20px;
        overflow-y: auto;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.4s;
        opacity: 0;
        /* z-index выше, чем у .navbar (1000) — теперь #navMenu вне стек-контекста
           навбара (см. портал в script.js), поэтому сравнивается напрямую с ним. */
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18); z-index: 1050; display: flex;
    }
    .nav-menu.active {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
    }
    .mobile-only-btn { display: inline-flex; margin-top: 20px; }
    body.menu-open { overflow: hidden; }
}

:where(a, button, input, textarea, select, [role="button"]):focus-visible {
    outline: 3px solid rgba(14, 165, 233, 0.75);
    outline-offset: 3px;
}

.service-mega-card { scroll-margin-top: 120px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================
   05. HERO СЕКЦИИ (ГЛАВНАЯ И УСЛУГИ)
   ========================================= */
.hero {
    display: flex; box-shadow: 0 4px 30px rgb(0 0 0 / 62%);
    height: calc(100svh - 20px);
    padding: 40px 0;
    background: #0f172a; /* запасний фон, якщо зображення не завантажилось */
    color: #ffffff;
    overflow: hidden;
    position: relative;
}
/* Рухомий шар фону (для ефекту паралаксу). Фон і градієнт тепер тут, тому паралакс реально працює. */
.hero-bg {
    position: absolute; top: -5%; left: -5%; width: 110%; height: 110%;
    z-index: 0; transition: transform 0.1s ease-out;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.7) 45%, rgba(15, 23, 42, 0.2) 100%),
    url('Photo/Hero.webp') center/cover;
}
.hero .container { position: relative; z-index: 1; }
.hero-content { max-width: 750px; width: 100%; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; line-height: 1.15; margin-bottom: 24px; }
.hero h1 span { color: var(--primary); text-shadow: 0 0 30px rgba(14, 165, 233, 0.4); }
.hero p { font-size: clamp(1rem, 1.5vw, 1.25rem); margin-bottom: 40px; color: #e2e8f0; font-weight: 400; line-height: 1.6; }
.hero-actions { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 50px; }
.hero-badges { display: flex; gap: 20px; flex-wrap: wrap; }
.badge {
    background: rgba(255,255,255,0.05); padding: 10px 20px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; transition: var(--transition);
}
.badge:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); }

@media (max-width: 600px) {
    .hero-actions .btn { width: 100%; }
}

/* Герой страницы Услуги */
.hero-services {
    height: 40svh; min-height: 350px; margin-bottom: 0;
    border-radius: 0 0 40px 40px;
}

/* =========================================
   06. АНИМИРОВАННЫЕ ФОНЫ И СОЕДИНИТЕЛИ
   ========================================= */
/* Динамический градиент (Сгустки) */
.ambient-gradient-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; pointer-events: none; background: #f8fafc; }
.glow-orbit { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; display: flex; align-items: center; justify-content: center; }
.orbit-1 { animation: orbit-rotate 10s linear infinite; }
.orbit-2 { animation: orbit-rotate 18s linear infinite reverse; }
.orbit-3 { animation: orbit-rotate 15s linear infinite; }

.ambient-glow { position: absolute; border-radius: 50%; opacity: 0.66; mix-blend-mode: multiply; animation: glow-expand 3s ease-in-out infinite alternate; will-change: scale, opacity; }
.glow-1 { width: 900px; height: 900px; background: radial-gradient(circle, var(--primary) 0%, transparent 65%); transform: translate3d(300px, -200px, 0); animation-delay: 0s; }
.glow-2 { width: 800px; height: 800px; background: radial-gradient(circle, var(--accent) 0%, transparent 65%); transform: translate3d(-350px, 250px, 0); animation-delay: -2s; }
.glow-3 { width: 700px; height: 700px; background: radial-gradient(circle, #38bdf8 0%, transparent 65%); transform: translate3d(200px, 350px, 0); animation-delay: -4s; opacity: 0.3; }

/* Живой переливающийся фон (Fluid Mesh) */
.light-ambient-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; pointer-events: none; background: linear-gradient(120deg, #ffffff, #f0f9ff, #f8fafc, #e0f2fe); background-size: 300% 300%; animation: bg-shimmer 15s ease-in-out infinite; }
.fluid-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.7; mix-blend-mode: multiply; animation: fluid-flow 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.fluid-1 { width: 800px; height: 800px; background: rgba(14, 165, 233, 0.35); top: -20%; left: -10%; }
.fluid-2 { width: 700px; height: 700px; background: rgba(16, 185, 129, 0.3); bottom: -20%; right: -10%; animation-delay: -5s; animation-duration: 25s; }
.fluid-3 { width: 600px; height: 600px; background: rgba(139, 92, 246, 0.25); top: 40%; left: 30%; animation-delay: -10s; animation-duration: 18s; }
.interactive-glow { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(14, 165, 233, 0.2) 30%, transparent 70%); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; transition: opacity 0.5s ease; opacity: 0; z-index: 1; mix-blend-mode: screen; will-change: left, top; }
.bg-grid-overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background-image: linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px); 
    background-size: 40px 40px; z-index: 2; 
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); 
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    pointer-events: none !important; /* <-- ИСПРАВЛЕНО: Теперь сетка полностью прозрачна для кликов мыши! */
}

/* SVG Коннекторы */
.connector-container { 
    width: 100%; 
    max-width: 1240px; 
    margin: 30px auto -100px; /* ИСПРАВЛЕНО: -100px убирают пустоту и прижимают стрелку к заголовку */
    height: auto !important; 
    aspect-ratio: 1000 / 120 !important; 
    position: relative; 
    z-index: 10; 
    pointer-events: none !important;
}
.connector-container svg { width: 100%; height: 100%; overflow: visible; }
.conn-line { fill: none; stroke: url(#line-grad); stroke-width: 3; stroke-dasharray: 8 8; stroke-linecap: round; animation: flow-down 1.5s linear infinite; vector-effect: non-scaling-stroke; }
.main-trunk { stroke-width: 4; stroke: var(--primary); }
.conn-arrow { fill: var(--primary); filter: drop-shadow(0 4px 8px rgba(14, 165, 233, 0.6)); }

/* aspect-ratio вместо фиксированной height: viewBox 1000x300 = 10/3, поэтому
   контейнер всегда сохраняет те же пропорции, что и path внутри SVG — раньше
   preserveAspectRatio="none" растягивал кривую по-разному на каждой ширине
   экрана (искажение усиливалось на мобильных, где height задавали вручную). */
.wave-connector-container { width: 100%; max-width: 1240px; aspect-ratio: 1000 / 300; margin: -60px auto 20px; position: relative; z-index: 5; }
.wave-connector-container svg { width: 100%; height: 100%; overflow: visible; }
.wave-path { fill: none; stroke: url(#wave-grad); stroke-width: 3; stroke-dasharray: 10 12; stroke-linecap: round; animation: wave-flow 3s linear infinite; }
.wave-pulse { mix-blend-mode: screen; filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.7)); }
.wave-arrow-vertical { filter: drop-shadow(0 0 8px rgba(14, 165, 233, 0.6)); animation: arrow-bounce-vertical 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }

@media (max-width: 1024px) {
    .side-line { display: none; }
    .connector-container { margin-top: 10px; } /* Лишний height удален */
}
@media (max-width: 768px) {
    .wave-connector-container { margin-top: 30px; }
}

/* =========================================
   07. КАЛЬКУЛЯТОР WIZARD (МАКЕТ И ПРОГРЕСС)
   ========================================= */
.calculator::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(14,165,233,0.05) 0%, transparent 70%); border-radius: 50%; }
.wizard-wrapper { max-width: 950px; margin: 0 auto; width: 100%; position: relative; z-index: 2; }
@media (max-width: 768px) { .wizard-wrapper { padding: 30px 20px; } }

.progress-container { display: flex; justify-content: space-between; margin-bottom: 50px; position: relative; padding: 0 20px; }
.progress-line { position: absolute; top: 50%; left: 20px; right: 20px; height: 6px; background: #e2e8f0; transform: translateY(-50%); z-index: 1; border-radius: 6px; }
.progress-line-fill { position: absolute; top: 50%; left: 20px; height: 6px; background: linear-gradient(90deg, var(--primary), #38bdf8); transform: translateY(-50%); z-index: 1; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 6px; box-shadow: 0 0 10px rgba(14,165,233,0.4); }

.step-indicator {
    width: 48px; height: 48px; border: 3px solid #e2e8f0;
    display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text-light); font-size: 1.1rem;
    position: relative; z-index: 2; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.step-indicator.active { border-color: var(--primary); background: var(--primary); color: white; transform: scale(1.2); box-shadow: var(--shadow-glow); }
.step-indicator.completed { border-color: var(--primary); background: var(--bg-white); color: var(--primary); }

.step-card { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transform: translateX(30px); transition: all 0.65s cubic-bezier(0.16, 1, 0.3, 1); }
.step-card.active-step { opacity: 1; visibility: visible; transform: translateX(0); position: relative; }
.step-card.exit-step { transform: translateX(-30px); }
.step-title { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-bottom: 40px; text-align: center; }

/* =========================================
   08. КАЛЬКУЛЯТОР (КАРТОЧКИ, ПОЛЗУНКИ И ДР)
   ========================================= */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; }
.choice-grid:has(.choice-card:hover) .choice-card:not(:hover) { opacity: 0.6; transform: scale(0.98); filter: grayscale(20%); }

.choice-card {
    padding: 35px 25px; text-align: center; cursor: pointer; transition: var(--transition);
    position: relative; overflow: hidden; background: var(--glass-bg-gradient);
}
.choice-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary-light), transparent); opacity: 0; transition: opacity 0.3s ease; }
.choice-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: #cbd5e1; }
.choice-card.selected { border-color: var(--primary); box-shadow: 0 10px 20px rgba(14, 165, 233, 0.15); transform: translateY(-5px) scale(1.02); animation: card-pulse 2s infinite; }
.choice-card.selected::before { opacity: 1; }
.choice-card i { font-size: 2.5rem; color: #94a3b8; margin-bottom: 15px; transition: var(--transition); position: relative; z-index: 1; }
.choice-card.selected i { color: var(--primary); transform: scale(1.1); animation: float 3s ease-in-out infinite; }
.choice-card h4 { font-size: 1.05rem; color: var(--dark); font-weight: 800; margin-bottom: 8px; line-height: 1.3; position: relative; z-index: 1; }
.choice-card p { font-size: 0.85rem; color: var(--text-light); position: relative; z-index: 1; font-weight: 500; }

.choice-card[data-clean="fire"].selected { border-color: var(--danger); box-shadow: 0 10px 20px rgba(225, 29, 72, 0.15); }
.choice-card[data-clean="fire"].selected::before { background: linear-gradient(135deg, #ffe4e6, transparent); }
.choice-card[data-clean="fire"].selected i { color: var(--danger); }

/* =======================================================
   СТИЛИ И КИНЕМАТИЧЕСКАЯ АНИМАЦИЯ ДЛЯ СПЕЦИАЛЬНОЙ УБОРКИ
   ======================================================= */
/* Контейнер-обертка для позиционирования руки и сердца (компактный размер под узкую иконочную колонку) */
.special-heart-wrapper {
    position: relative;
    width: 100%;
    height: 28px;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Базовое состояние руки */
.special-heart-wrapper .special-hand {
    position: absolute;
    font-size: 1.4rem;
    color: #94a3b8;
    bottom: 0;
    transform-origin: bottom center;
    transition: var(--transition);
}

/* Базовое состояние сердца (лежит на ладони) */
.special-heart-wrapper .special-heart {
    position: absolute;
    font-size: 0.8rem;
    color: #94a3b8;
    bottom: 13px; /* Исходная высота над рукой, пропорционально уменьшенной */
    transform-origin: bottom center;
    transition: var(--transition);
}

/* --- СОСТОЯНИЕ АКТИВАЦИИ (КОГДА КАРТОЧКА ВЫБРАНА) --- */
.choice-card[data-clean="special"].selected { 
    border-color: #8b5cf6; 
    box-shadow: 0 10px 20px rgba(139, 92, 246, 0.15); 
}
.choice-card[data-clean="special"].selected::before { 
    background: linear-gradient(135deg, #ede9fe, transparent); 
}

/* Запуск анимации руки: толчок вверх */
.choice-card.selected .special-hand {
    color: #8b5cf6;
    animation: hand-push 2.5s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

/* Запуск анимации сердца: полет, парение и мягкое приземление */
.choice-card.selected .special-heart {
    color: #8b5cf6;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6));
    animation: heart-float 2.5s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

/* --- КЛЮЧЕВЫЕ КАДРЫ ТЯГУЧЕЙ АНИМАЦИИ --- */

/* 1. Рука: слегка приседает, резко выталкивает и плавно возвращается */
@keyframes hand-push {
    0%, 100% { transform: translateY(0) scaleY(1); }
    12% { transform: translateY(3px) scaleY(0.85); }   /* Замах / Приседание перед толчком */
    22% { transform: translateY(-5px) scaleY(1.05); }  /* Резкий импульс / Выталкивание вверх */
    32% { transform: translateY(0) scaleY(1); }       /* Возврат ладони в исходную точку */
    75% { transform: translateY(0) scaleY(1); }       /* Ожидание мягко падающего сердца */
}

/* 2. Сердце: падает вместе с рукой, взлетает, зависает в воздухе и плавно садится */
@keyframes heart-float {
    0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
    12% { transform: translateY(2px) scale(0.95); }                /* Падает вместе с ладонью при замахе */
    22% { transform: translateY(-10px) scale(1.15); }              /* Момент отрыва и вылета вверх */
    40% { transform: translateY(-17px) scale(1) rotate(-8deg); }   /* Верхняя точка (апекс), заваливание влево */
    52% { transform: translateY(-15px) scale(1) rotate(6deg); }    /* Легкое парение / зависание со смещением вправо */
    70% { transform: translateY(0) scale(1) rotate(0deg); }        /* Мягкая и аккуратная посадка обратно в руку */
}

/* Ползунки */
.slider-group { margin-bottom: 45px; padding: 30px; background: var(--glass-bg-gradient); }

/* Step 2: два ползунка в одну строку, чтобы шаг влезал на экран ноутбука */
.slider-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.slider-row .slider-group { margin-bottom: 0; }
@media (max-width: 640px) { .slider-row { grid-template-columns: 1fr; gap: 14px; } }
.slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-weight: 700; font-size: 1.2rem; }
.slider-value { font-size: 2.2rem; font-weight: 800; color: var(--primary); text-shadow: 0 4px 10px rgba(14,165,233,0.2); }

input[type=range] {
    -webkit-appearance: none; width: 100%; background: transparent; height: 30px; outline: none;
    --thumb-x: 0px; --thumb-skew: 0deg; --thumb-s-x: 1; --thumb-s-y: 1;
    --thumb-trans: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background 0.3s ease;
}
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8px; cursor: pointer; background: var(--track-bg, #e2e8f0); border-radius: 4px; transition: background 0.1s; }
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; height: 28px; width: 28px; border-radius: 50%; background: var(--primary); cursor: grab; margin-top: -10px;
    box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.2), 0 4px 10px rgba(0,0,0,0.1); 
    transform: translateX(var(--thumb-x)) skewX(var(--thumb-skew)) scaleX(var(--thumb-s-x)) scaleY(var(--thumb-s-y)); transition: var(--thumb-trans);
}
input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; background: var(--primary-hover); box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.4), 0 2px 4px rgba(0,0,0,0.2); }

/* Доп. услуги */
.extra-category-title { font-size: 1.3rem; font-weight: 800; color: var(--dark); margin-bottom: 25px; display: flex; align-items: center; gap: 12px; }
.extra-category-title i { color: var(--bg-white); background: var(--primary); padding: 10px; border-radius: 12px; font-size: 1.1rem; box-shadow: 0 4px 10px rgba(14,165,233,0.3); }
.extras-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 15px; }
.extra-box { display: flex; align-items: center; padding: 18px; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; }
.extra-box::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: rgba(14, 165, 233, 0.4); transition: var(--transition); }
.extra-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.extra-box:hover::before { background: #cbd5e1; }
.extra-box.selected { border-color: var(--primary); box-shadow: 0 8px 15px rgba(14, 165, 233, 0.1); }
.extra-box.selected::before { background: var(--primary); width: 100%; opacity: 0.05; }
.extra-box i { font-size: 1.5rem; color: #94a3b8; margin-right: 15px; width: 28px; text-align: center; transition: var(--transition); z-index: 1; }
.extra-box.selected i { color: var(--primary); }
.extra-info { z-index: 1; }
.extra-info h5 { font-size: 1.05rem; color: var(--dark); font-weight: 800; line-height: 1.2; }
.extra-info p { font-size: 0.9rem; color: var(--primary); font-weight: 700; margin-top: 5px; }

/* Счетчики */
.counter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; }
.counter-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; }
.counter-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: #cbd5e1; }
.counter-info h5 { font-size: 1.05rem; color: var(--dark); font-weight: 800; margin-bottom: 4px;}
.counter-info p { font-size: 0.9rem; color: var(--text-light); font-weight: 800; }
.counter-controls { display: flex; align-items: center; gap: 12px; background: transparent; padding: 0; }
.counter-btn { width: 34px; height: 34px; border: none; background: #f1f5f9; border-radius: 50%; font-size: 1.2rem; font-weight: bold; cursor: pointer; color: var(--text-main); transition: var(--transition); display: flex; align-items: center; justify-content: center; }
.counter-btn:hover { background: var(--primary); color: white; transform: scale(1.05); }
.counter-btn:active { transform: scale(0.95); }
.counter-value { font-size: 1.2rem; font-weight: 800; width: 24px; text-align: center; color: var(--dark); }

/* =========================================
   КОМПАКТНІ КАРТКИ З ІКОНКАМИ (ДЛЯ ВІКОН)
   ========================================= */
.compact-grid {
    gap: 10px; /* Зменшуємо відстань між елементами */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* Трохи ущільнюємо колонки */
}

.compact-item {
    padding: 10px 14px; /* Зменшуємо внутрішні відступи */
}

/* Налаштування блоку з текстом і іконкою */
.counter-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Стиль самої іконки */
.counter-icon {
    font-size: 1.2rem;
    color: #94a3b8;
    background: #dfe5ec38;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}

/* Ефект при наведенні миші на картку */
.counter-item:hover .counter-icon,
.extra-box:hover .counter-icon i {
    color: var(--primary);
    background: var(--primary-light);
    transform: scale(1.05);
}

/* Зменшуємо шрифти для компактних карток */
.compact-item .counter-info h5,
.compact-item .extra-info h5 {
    font-size: 0.95rem;
    margin-bottom: 2px;
    line-height: 1.2;
}

.compact-item .counter-info p,
.compact-item .extra-info p {
    font-size: 0.85rem;
}

/* Зменшуємо кнопки +/- */
.compact-item .counter-btn {
    width: 30px;
    height: 30px;
    font-size: 1rem;
}
.compact-item .counter-value {
    font-size: 1.1rem;
}

/* Чек и Форма */
.summary-receipt { padding: 40px; position: relative; border: 2px dashed #8d8d8d42; }
.summary-receipt::before, .summary-receipt::after { content: ''; position: absolute; width: 30px; height: 30px; background: var(--bg-body); border-radius: 50%; top: -15px; }
.summary-receipt::before { left: -15px; border-right: 2px dashed #cbd5e1; border-bottom: 2px dashed #cbd5e1; transform: rotate(-45deg); }
.summary-receipt::after { right: -15px; border-left: 2px dashed #cbd5e1; border-bottom: 2px dashed #cbd5e1; transform: rotate(45deg); }
.receipt-line { display: flex; justify-content: space-between; margin-bottom: 15px; color: var(--text-main); font-size: 1.05rem; font-weight: 500; }
.receipt-line.total { margin-top: 30px; padding-top: 30px; border-top: 2px dashed #cbd5e1; font-size: 1.5rem; font-weight: 800; color: var(--dark); }
.receipt-line span.price { font-weight: 800; color: var(--dark); }
.receipt-line.total span.price { color: var(--primary); font-size: 2rem; text-shadow: 0 4px 10px rgba(14,165,233,0.2); }

.contact-form-wizard { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .contact-form-wizard { grid-template-columns: 1fr; } }
.contact-input-wizard { width: 100%; padding: 18px 20px; font-size: 1.05rem; outline: none; transition: var(--transition); font-family: inherit; background: #ffffff12; }
.contact-input-wizard:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1); }

/* Липкая нижняя панель */
.bottom-bar { position: sticky; bottom: 20px; padding: 20px 30px; z-index: 100; margin-top: 40px; display: flex; justify-content: space-between; align-items: center; transition: var(--transition); background: var(--glass-bg-gradient); }
.stats-display { display: flex; gap: 40px; align-items: center; }
.stat-item { display: flex; flex-direction: column; }
.stat-label { font-size: 0.8rem; color: var(--text-light); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.stat-value { font-size: 2rem; font-weight: 800; color: var(--dark); line-height: 1; }
.stat-value small { font-size: 1.1rem; color: var(--text-light); }
.stat-value.highlight { color: var(--primary); }
.nav-buttons { display: flex; gap: 20px; }
.btn-prev { background: var(--bg-body); color: var(--text-main); border: 2px solid var(--border); box-shadow: none; }
.btn-prev:hover { background: #f8fafca3; border-color: #cbd5e1; transform: translateX(-5px); box-shadow: none; }
.btn-prev::after { display: none; }

@media (max-width: 768px) {
    .step-card { padding: 30px 20px; width: 120%; margin-left: -30px; }
    .bottom-bar { padding: 15px 20px; bottom: 10px; flex-direction: column; gap: 15px; }
    .stats-display { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; width: 100%; gap: 10px; margin-bottom: 5px; }
    .stat-item { border-left: none !important; padding-left: 0 !important; align-items: flex-start; }
    .stat-label { font-size: 0.7rem; margin-bottom: 2px; }
    .stat-value { font-size: 1.3rem; }
    .stat-value small { font-size: 0.85rem; }
    #barCleaners { font-size: 1rem !important; padding-top: 0 !important; }
    .nav-buttons { width: 100%; display: flex; gap: 10px; }
    .nav-buttons .btn { flex: 1; text-align: center; padding: 14px 10px; font-size: 1rem; }
    
    .hero-content {
        margin-bottom: -55% !important;
    }

    .bottom-bar.is-floating {
        position: fixed !important;
        display: block !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        width: 96% !important;
        margin: 2% !important;
        box-sizing: border-box !important;
        padding: 15px 20px calc(15px + env(safe-area-inset-bottom)) !important;
        border-radius: 25px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(46px);
        -webkit-backdrop-filter: blur(46px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 -10px 30px rgba(14, 165, 233, 0.2) !important;

        /* Плавное тягучее появление/зникнення: display не анимируется и раньше
           обрывал переход мгновенно (display:none -> block). Теперь панель
           всегда display:block, а видимость управляется opacity/transform —
           visibility выключает её из tab-order только ПОСЛЕ завершения ухода. */
        visibility: hidden;
        opacity: 0;
        pointer-events: none !important;
        transform: translateY(45px) scale(0.96);
        transition: opacity var(--viscous-duration) var(--viscous-ease),
                    transform var(--viscous-duration) var(--viscous-ease),
                    visibility 0s linear var(--viscous-duration);
    }

    /* Сдвиг кнопки заказа вверх, когда показан калькулятор */
    .bottom-bar.is-floating.show ~ .fab-container {
        /* Высота панели (70px) + отступ от нее (15px) = 85px */
        bottom: 225px;
        /* Добавляем плавность перемещения */
        transition: transform var(--transition), bottom 0.4s ease-out;
    }

    .bottom-bar.is-floating.show {
        visibility: visible;
        opacity: 1 !important;
        pointer-events: all !important;
        transform: translateY(0) scale(1) !important;
        transition: opacity var(--viscous-duration) var(--viscous-ease),
                    transform var(--viscous-duration) var(--viscous-ease),
                    visibility 0s linear 0s;
    }
}

/* =========================================
   09. АНИМАЦИИ (ГЛОБАЛЬНЫЕ И ИКОНКИ КАЛЬКУЛЯТОРА)
   ========================================= */
@keyframes auto-glow { 0% { left: -100%; } 15% { left: 100%; } 100% { left: 100%; } }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0px); } }
@keyframes card-pulse { 0% { box-shadow: 0 10px 20px rgba(14, 165, 233, 0.15), 0 0 0 0 rgba(14, 165, 233, 0.4); } 70% { box-shadow: 0 10px 20px rgba(14, 165, 233, 0.15), 0 0 0 15px rgba(14, 165, 233, 0); } 100% { box-shadow: 0 10px 20px rgba(14, 165, 233, 0.15), 0 0 0 0 rgba(14, 165, 233, 0); } }
@keyframes orbit-rotate { from { transform: rotate(0deg) translateZ(0); } to { transform: rotate(360deg) translateZ(0); } }
@keyframes glow-expand { 0% { scale: 1; opacity: 0.4; } 100% { scale: 1.8; opacity: 0.7; } }
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes pulse-tag { 0% { box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3); } 50% { box-shadow: 0 4px 20px rgba(16, 185, 129, 0.6); } 100% { box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3); } }
@keyframes flow-down { to { stroke-dashoffset: -16; } }
@keyframes wave-flow { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
@keyframes arrow-bounce-vertical { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes bg-shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes fluid-flow { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 33% { transform: translate(150px, -100px) scale(1.15) rotate(15deg); } 66% { transform: translate(-100px, 150px) scale(0.85) rotate(-15deg); } 100% { transform: translate(100px, 100px) scale(1.2) rotate(5deg); } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-fab { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); } 70% { box-shadow: 0 0 0 20px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }

/* Специфические анимации иконок калькулятора */
@keyframes sweep { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-15deg); } 75% { transform: rotate(15deg); } }
@keyframes clink-left { 0%, 100% { transform: rotate(0deg); } 40%, 60% { transform: rotate(20deg); } }
@keyframes clink-right { 0%, 100% { transform: rotate(0deg); } 40%, 60% { transform: rotate(-20deg); } }
@keyframes zap { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 5% { transform: scale(1.2) rotate(-15deg); opacity: 0.8; } 10% { transform: scale(1.1) rotate(10deg); opacity: 1; } 15% { transform: scale(1.3) rotate(-5deg); opacity: 0.9; } 20% { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes sparkle-magic { 0% { transform: scale(1) rotate(0deg); opacity: 0.8; } 50% { transform: scale(1.25) rotate(90deg); opacity: 1; filter: drop-shadow(0 0 12px rgba(14, 165, 233, 0.9)); } 100% { transform: scale(1) rotate(180deg); opacity: 0.8; } }
@keyframes bounce-leaf { 0%, 100% { transform: translateY(0) rotate(0deg) scale(1); } 50% { transform: translateY(-12px) rotate(15deg) scale(1.1); } }
@keyframes box-bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.05); } }
@keyframes fly-out-p1 { 0% { transform: translate(-50%, 0) scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(-12px, -18px) rotate(45deg) scale(1); opacity: 0; } }
@keyframes fly-out-p2 { 0% { transform: translate(-50%, 0) scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(0px, -24px) rotate(-20deg) scale(1); opacity: 0; } }
@keyframes fly-out-p3 { 0% { transform: translate(-50%, 0) scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(9px, -12px) rotate(110deg) scale(1); opacity: 0; } }
@keyframes hammer-strike { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-45deg); } 40% { transform: rotate(25deg); } 50% { transform: rotate(-10deg); } 60% { transform: rotate(0deg); } }
@keyframes drop-drip { 0% { transform: translateY(-10px) scaleY(0.8); opacity: 0; } 20% { transform: translateY(-5px) scaleY(1.1); opacity: 1; } 50% { transform: translateY(15px) scaleY(1.3) scaleX(0.8); opacity: 1; } 60% { transform: translateY(15px) scaleY(0.5) scaleX(1.5); opacity: 0; } 100% { transform: translateY(15px); opacity: 0; } }
@keyframes burn-flicker { 0%, 100% { transform: scale(1) skewX(0deg); color: var(--danger); filter: drop-shadow(0 0 5px rgba(225, 29, 72, 0.5)); } 25% { transform: scale(1.15) scaleY(1.1) skewX(-5deg); color: #ea580c; filter: drop-shadow(0 -6px 10px rgba(234, 88, 12, 0.7)); } 50% { transform: scale(0.95) scaleY(0.9) skewX(3deg); color: #f59e0b; filter: drop-shadow(0 -2px 6px rgba(245, 158, 11, 0.6)); } 75% { transform: scale(1.1) scaleY(1.05) skewX(-2deg); color: #ea580c; filter: drop-shadow(0 -5px 12px rgba(234, 88, 12, 0.8)); } }

/* Применение анимаций иконок калькулятора */
.clinking-glasses { display: flex; justify-content: center; gap: 2px; height: 28px; margin-bottom: 0; position: relative; z-index: 1; }
.clinking-glasses i { font-size: 1.4rem; color: #94a3b8; transition: var(--transition); transform-origin: bottom center; }
.choice-card.selected .clinking-glasses i { color: #f59e0b; }
.choice-card.selected .left-glass { animation: clink-left 1s ease-in-out infinite; }
.choice-card.selected .right-glass { animation: clink-right 1s ease-in-out infinite; }
.choice-card.selected i.fa-champagne-glasses { animation: clink 0.8s ease-in-out infinite; color: #f59e0b; }
.choice-card.selected i.fa-bolt { animation: zap 2s linear infinite; color: #eab308; filter: drop-shadow(0 0 8px rgba(234, 179, 8, 0.6)); }
.choice-card.selected i.fa-wand-magic-sparkles { animation: sparkle-magic 2.5s ease-in-out infinite; color: var(--primary); }
.choice-card.selected i.fa-leaf { animation: bounce-leaf 1.5s ease-in-out infinite; color: var(--accent); filter: drop-shadow(0 5px 8px rgba(16, 185, 129, 0.4)); }
.moving-box-wrapper { position: relative; display: flex; align-items: center; justify-content: center; height: 28px; margin-bottom: 0; }
.moving-box-wrapper .fa-box-open { font-size: 1.5rem; }
.choice-card.selected .fa-box-open { animation: box-bounce 0.8s ease-in-out infinite; color: #a16207; }
.box-particle { position: absolute; width: 4px; height: 4px; background: #a16207; border-radius: 2px; opacity: 0; top: 6px; left: 50%; }
.choice-card.selected .p1 { animation: fly-out-p1 1s ease-out infinite; }
.choice-card.selected .p2 { animation: fly-out-p2 1s ease-out infinite 0.2s; } 
.choice-card.selected .p3 { animation: fly-out-p3 1s ease-out infinite 0.4s; }
.choice-card.selected i.fa-broom { animation: sweep 1s ease-in-out infinite; }
.choice-card.selected i.fa-hammer { transform-origin: bottom left; animation: hammer-strike 1.5s ease-in-out infinite; color: #f97316; filter: drop-shadow(0 4px 6px rgba(249, 115, 22, 0.3)); }
/* Компактный кластер капель: разного размера, на разных уровнях,
   абсолютным позиционированием вмещается в узкую иконочную колонку плитки. */
.dripping-drops { position: relative; width: 30px; height: 32px; margin-bottom: 0; }
.dripping-drops i { position: absolute; font-size: 0.7rem; color: #94a3b8; transition: var(--transition); }
.choice-card.selected .dripping-drops i { color: #0ea5e9; filter: drop-shadow(0 3px 4px rgba(14, 165, 233, 0.4)); }
.dripping-drops .drop-1 { left: 0; top: 7px; font-size: 0.66rem; }
.dripping-drops .drop-2 { left: 10px; top: 12px; font-size: 0.92rem; }
.dripping-drops .drop-3 { left: 20px; top: 1px; font-size: 0.62rem; }
.choice-card.selected .drop-1 { animation: drop-drip 1.8s infinite 0s; }
.choice-card.selected .drop-2 { animation: drop-drip 1.8s infinite 0.6s; }
.choice-card.selected .drop-3 { animation: drop-drip 1.8s infinite 1.2s; }
.choice-card.selected i.fa-fire { transform-origin: bottom center; animation: burn-flicker 0.6s infinite; }

/* =========================================
   10. СЕКЦИИ: ЦЕНЫ И ГАРАНТИИ
   ========================================= */
.pricing { background: var(--bg-body); padding-bottom: 20px; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.pricing-grid:has(.price-card:hover) .price-card:not(:hover) { opacity: 0.7; transform: scale(0.98); }
.price-card { background: var(--bg-white); border-radius: var(--radius-lg); padding: 50px 40px; border: 1px solid var(--border); transition: var(--transition); position: relative; overflow: hidden; box-shadow: var(--shadow-card); z-index: 1; }
.price-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--border); transition: var(--transition); }
.price-card:hover { transform: translateY(-15px); box-shadow: var(--shadow-hover); border-color: var(--primary); }
.price-card:hover::before { background: var(--primary); }
.popular-tag { position: absolute; top: 25px; right: -40px; background: linear-gradient(135deg, var(--accent), #059669); color: white; padding: 8px 45px; transform: rotate(45deg); font-size: 0.85rem; font-weight: 800; letter-spacing: 1px; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3); animation: pulse-tag 2s infinite; }
.price-card h3 { font-size: 1.75rem; color: var(--dark); margin-bottom: 15px; }
.price-card .price { font-size: 3rem; font-weight: 800; color: var(--primary); margin-bottom: 30px; line-height: 1; }
.price-card .price span { font-size: 1.1rem; color: var(--text-light); font-weight: 500; }
.price-list li { margin-bottom: 18px; display: flex; align-items: flex-start; gap: 12px; font-weight: 500; }
.price-list li i { color: var(--accent); margin-top: 6px; font-size: 1.1rem; background: rgba(16, 185, 129, 0.1); padding: 4px; border-radius: 50%; }

/* Гарантии */
.guarantees-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.guarantee-card { background: var(--glass-bg-solid); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); padding: 40px 30px; border-radius: var(--radius-lg); text-align: center; border: 1px solid rgba(255, 255, 255, 0.8); transition: var(--transition); position: relative; overflow: hidden; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05); z-index: 3; }
.guarantee-card::before { content: ''; position: absolute; top: -50px; left: 50%; transform: translateX(-50%) scale(0.5); width: 200px; height: 200px; border-radius: 50%; filter: blur(50px); opacity: 0; z-index: -1; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease; }
.guarantee-card:hover { transform: translateY(-10px); border-color: #ffffff; box-shadow: 0 20px 40px -10px rgba(14, 165, 233, 0.15); }
.guarantee-card:hover::before { opacity: 0.15; transform: translateX(-50%) scale(1.2); }
.guarantee-icon { width: 75px; height: 75px; margin: 0 auto 25px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #94a3b8; background: #ffffff; border-radius: 22px; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.guarantee-card:hover .guarantee-icon { transform: translateY(-10px) scale(1.1); background: var(--bg-white); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); }
.card-shield::before { background: var(--primary); } .card-shield:hover .guarantee-icon { color: var(--primary); }
.card-eco::before { background: var(--accent); } .card-eco:hover .guarantee-icon { color: var(--accent); }
.card-wallet::before { background: #f59e0b; } .card-wallet:hover .guarantee-icon { color: #f59e0b; }
.card-user::before { background: #8b5cf6; } .card-user:hover .guarantee-icon { color: #8b5cf6; }
.guarantee-card h4 { font-size: 1.25rem; color: var(--dark); margin-bottom: 15px; font-weight: 800; transition: var(--transition); }
.guarantee-card p { color: var(--text-light); font-size: 0.95rem; line-height: 1.6; }
.guarantee-card:hover h4 { color: var(--primary); }

/* =========================================
   11. СЕКЦИИ: FAQ И УСЛУГИ (КАРТОЧКИ)
   ========================================= */
.faq { padding: 80px 0; overflow: hidden; }
.faq-layout { display: grid; grid-template-columns: 300px 1fr; gap: 50px; align-items: start; }
.faq-sidebar { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 120px; }
.faq-tab { background: transparent; border: 1px solid var(--border); padding: 16px 20px; border-radius: var(--radius-md); font-family: inherit; font-size: 1.05rem; font-weight: 700; color: var(--text-light); text-align: left; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 12px; }
.faq-tab i { font-size: 1.2rem; transition: var(--transition); }
.faq-tab:hover { background: var(--bg-body); color: var(--dark); border-color: #cbd5e1; }
.faq-tab.active { background: var(--primary); color: white; border-color: var(--primary); box-shadow: var(--shadow-glow); transform: translateX(10px); }
.faq-content-area { position: relative; }
.faq-pane { display: none; animation: fade-in-up 0.4s ease-out forwards; }
.faq-pane.active { display: flex; flex-direction: column; gap: 15px; }
.faq-item { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); }
.faq-item:hover { border-color: var(--primary-light); box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.faq-item.active { border-color: var(--primary); background: var(--bg-white); box-shadow: var(--shadow-hover); }
.faq-question { padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 20px; }
.faq-question h4 { font-size: 1.1rem; color: var(--dark); font-weight: 700; margin: 0; line-height: 1.4; transition: var(--transition); }
.faq-item.active .faq-question h4 { color: var(--primary); }
.faq-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-white); display: flex; align-items: center; justify-content: center; color: var(--text-light); flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s, color 0.3s; }
.faq-item:hover .faq-icon { background: var(--primary-light); color: var(--primary); }
.faq-item.active .faq-icon { transform: rotate(180deg); background: var(--primary); color: white; }
.faq-answer-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-item.active .faq-answer-wrapper { max-height: 600px; }
.faq-answer p { padding: 0 25px 25px; color: var(--text-light); font-size: 1.05rem; line-height: 1.6; margin: 0; opacity: 0; transition: opacity 0.4s ease; }
.faq-item.active .faq-answer p { opacity: 1; transition-delay: 0.1s; }

/* Услуги (Карточки) */
.srv-card { display: flex; align-items: center; gap: 40px; background: var(--glass-bg-solid); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: blur(25px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 40px; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05); transition: var(--transition); position: relative; z-index: 5; }
.srv-card.reverse { flex-direction: row-reverse; }
.srv-card:hover { box-shadow: 0 20px 40px -10px rgba(14, 165, 233, 0.15); border-color: #ffffff; transform: translateY(-5px); }
.srv-img-box { flex: 0 0 45%; aspect-ratio: 4/3; border-radius: calc(var(--radius-lg) - 10px); overflow: hidden; position: relative; box-shadow: var(--shadow-md); }
.srv-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.srv-card:hover .srv-img-box img { transform: scale(1.08); }
.srv-badge { position: absolute; top: 20px; left: 20px; background: var(--accent); color: white; padding: 8px 16px; border-radius: 30px; font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transform: translateY(-10px); opacity: 0; transition: all 0.4s ease; }
.srv-card:hover .srv-badge { transform: translateY(0); opacity: 1; }
.srv-info { flex: 1; padding: 20px; }
.srv-info h3 { font-size: 2.2rem; color: var(--dark); margin-bottom: 15px; font-weight: 800; }
.srv-desc { font-size: 1.1rem; color: var(--text-light); margin-bottom: 25px; line-height: 1.6; }
.srv-list { margin-bottom: 35px; }
.srv-list li { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 15px; font-weight: 600; color: var(--text-main); transition: var(--transition); padding: 10px; border-radius: var(--radius-sm); }
.srv-list li i { color: var(--primary); margin-top: 4px; font-size: 1.1rem; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.srv-list li:hover { background: rgba(255,255,255,0.8); transform: translateX(10px); box-shadow: 0 4px 10px rgba(0,0,0,0.03); color: var(--primary); }
.srv-list li:hover i { transform: scale(1.3) rotate(10deg); }
.srv-action { display: flex; align-items: center; gap: 30px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.05); }
.srv-price { font-size: 1.5rem; font-weight: 800; color: var(--dark); }

@media (max-width: 992px) {
    .srv-card, .srv-card.reverse { flex-direction: column; padding: 15px; gap: 20px; }
    .srv-img-box { width: 100%; flex: auto; }
    .srv-info { padding: 10px; }
    .srv-info h3 { font-size: 1.8rem; }
    .srv-action { flex-direction: column; align-items: flex-start; gap: 15px; }
    .srv-action .btn { width: 100%; }
}

/* =========================================
   12. СЕКЦИИ: ГАЛЕРЕЯ, МОДАЛЬНОЕ ОКНО И КЕЙСЫ
   ========================================= */
.gallery { background: var(--bg-body); }
/* Бенто-раскладка: первая карточка — крупный «герой», 2-я и 3-я — стопкой
   справа. Подпись теперь всегда видна (градиент-подложка), а не только по
   ховеру — так превью читается с одного взгляда, без наведения мыши. */
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 20px; }
.gallery-item { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); cursor: pointer; transition: transform 0.5s var(--viscous-ease), box-shadow 0.5s var(--viscous-ease); }
.gallery-item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.gallery-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.gallery-item:nth-child(3) { grid-column: 2; grid-row: 2; }
.gallery-item:hover { transform: translateY(-6px); box-shadow: 0 25px 55px rgba(14, 165, 233, 0.18); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease; opacity: 0; }
.gallery-item img.loaded { opacity: 1; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, 0.82) 100%); pointer-events: none; }
.gallery-label { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; color: #fff; font-weight: 800; font-size: 1.08rem; letter-spacing: -0.01em; transition: transform 0.5s var(--viscous-ease); }
.gallery-item:hover .gallery-label { transform: translateY(-3px); }
.gallery-item::after { content: '\f0b2'; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 16px; right: 16px; z-index: 2; background: rgba(15, 23, 42, 0.5); color: white; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(-6px); transition: all 0.5s var(--viscous-ease); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); }
.gallery-item:hover::after { opacity: 1; transform: translateY(0); }

.gallery-view-all { display: flex; justify-content: center; margin-top: 34px; }
.gallery-view-all-link { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border: 2px solid var(--border); border-radius: 50px; color: var(--dark); font-weight: 800; font-size: 0.98rem; transition: var(--transition); }
.gallery-view-all-link i { transition: transform 0.3s ease; }
.gallery-view-all-link:hover { border-color: var(--primary); color: var(--primary-hover); background: var(--primary-light); }
.gallery-view-all-link:hover i { transform: translateX(4px); }

@media (max-width: 860px) {
    .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .gallery-item, .gallery-item:nth-child(1), .gallery-item:nth-child(2), .gallery-item:nth-child(3) { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 3; }
}

/* Pop-up окно кейсов */
.case-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; padding: 20px; perspective: 2000px; transition: opacity var(--viscous-duration) ease, visibility var(--viscous-duration) ease, backdrop-filter 1.5s ease; }
.case-modal.active { opacity: 1; visibility: visible; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.case-modal-content { background: var(--bg-white); width: 100%; max-width: 1000px; border-radius: var(--radius-lg); overflow: hidden; position: relative; box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.6); transform: translateY(150px) scale(0.6) rotateX(-25deg); opacity: 0; transform-origin: bottom center; transition: transform var(--viscous-duration) var(--viscous-ease), opacity var(--viscous-duration) ease; will-change: transform, opacity; }
.case-modal.active .case-modal-content { transform: translateY(0) scale(1) rotateX(0deg); opacity: 1; }
.case-modal-close { position: absolute; top: 15px; right: 15px; z-index: 10; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--bg-body); color: var(--text-main); font-size: 1.2rem; cursor: pointer; transition: 0.5s var(--viscous-ease); }
.case-modal-close:hover { background: var(--danger); color: white; transform: rotate(180deg) scale(1.1); }
.case-layout { display: grid; grid-template-columns: 1.2fr 1fr; }
.case-gallery { background: #f8fafc; padding: 25px; border-right: 1px solid var(--border); }
.case-main-img-box { width: 100%; aspect-ratio: 16/10; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow-md); }
.case-main-img-box img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease; }
.case-thumbnails { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.case-thumbnails::-webkit-scrollbar { height: 6px; }
.case-thumbnails::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 3px; }
.case-thumb { width: 90px; height: 70px; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; border: 3px solid transparent; transition: 0.4s var(--viscous-ease); opacity: 0.6; flex-shrink: 0; }
.case-thumb img { width: 100%; height: 100%; object-fit: cover; }
.case-thumb:hover { opacity: 0.9; }
.case-thumb.active { border-color: var(--primary); opacity: 1; transform: translateY(-3px) scale(1.03); }
.case-info { padding: 50px 40px; display: flex; flex-direction: column; }
.case-info h3 { font-size: 2.2rem; color: var(--dark); margin-bottom: 12px; font-weight: 800; line-height: 1.1; }
.case-meta { color: var(--primary); font-weight: 700; font-size: 1.1rem; margin-bottom: 25px; display: flex; align-items: center; gap: 8px; }
.case-divider { width: 50px; height: 5px; background: var(--accent); margin-bottom: 25px; border-radius: 2.5px; }
.case-info p { color: var(--text-light); font-size: 1.1rem; line-height: 1.8; font-weight: 500; flex-grow: 1; }
.case-order-btn { width: 100%; margin-top: 40px; text-align: center; justify-content: center; }

@media (max-width: 768px) {
    .case-layout { grid-template-columns: 1fr; }
    .case-gallery { border-right: none; border-bottom: 1px solid var(--border); padding: 15px; }
    .case-main-img-box { aspect-ratio: 16/9; margin-bottom: 15px; }
    .case-thumbnails { gap: 10px; }
    .case-thumb { width: 70px; height: 55px; }
    .case-info { padding: 30px 20px; }
    .case-info h3 { font-size: 1.8rem; }
}

/* =========================================
   13. СЕКЦИИ: КОМАНДА, КОНТАКТЫ И ФУТЕР
   ========================================= */
/* Команда */
.team { background: var(--bg-white); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.team-card { text-align: center; padding: 40px 30px; border: 1px solid var(--border); border-radius: var(--radius-lg); transition: var(--transition); background: var(--bg-white); box-shadow: var(--shadow-card); }
.team-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-10px); border-color: var(--primary-light); }
.team-photo { width: 140px; height: 140px; border-radius: 50%; margin: 0 auto 25px; background: var(--border); overflow: hidden; border: 4px solid var(--primary-light); transition: var(--transition); }
.team-card:hover .team-photo { border-color: var(--primary); transform: scale(1.05); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h4 { font-size: 1.4rem; color: var(--dark); font-weight: 800; margin-bottom: 5px; }
.team-card p { color: var(--text-light); font-weight: 600; font-size: 1rem; margin-bottom: 15px; }
.stars { color: #f59e0b; font-size: 1.1rem; background: #fffbeb; padding: 6px 12px; border-radius: 20px; display: inline-block; font-weight: 700; }

/* Контакты */
.contact { background: linear-gradient(135deg, var(--dark), #1e293b); background-color: var(--dark); color: var(--bg-white); position: relative; overflow: hidden; }
.contact::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4='); }
.contact .section-header h2 { color: var(--bg-white); }
.contact-form-main { max-width: 650px; margin: 0 auto; background: rgba(255,255,255,0.03); padding: 50px; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: relative; z-index: 1; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.contact-input-main { width: 100%; padding: 18px 20px; margin-bottom: 25px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); color: white; font-family: inherit; font-size: 1.1rem; outline: none; transition: var(--transition); }
.contact-input-main::placeholder { color: #94a3b8; }
.contact-input-main:focus { border-color: var(--primary); background: rgba(255,255,255,0.1); box-shadow: 0 0 15px rgba(14, 165, 233, 0.3), inset 0 2px 4px rgba(0,0,0,0.1); transform: translateY(-2px); }

/* Подвал */
footer { background: #020617; color: #94a3b8; padding: 80px 0 30px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 50px; margin-bottom: 50px; }
.footer-title { color: white; font-size: 1.3rem; margin-bottom: 25px; font-weight: 800;}
.footer-links li { margin-bottom: 15px; }
.footer-links a { transition: var(--transition); display: inline-block; }
.footer-links a:hover { color: var(--primary); transform: translateX(5px); }
.copyright { text-align: center; padding-top: 30px; border-top: 1px solid #1e293b; font-size: 0.9rem; }

/* =========================================
   FAB: МЕНЮ МЕССЕНДЖЕРОВ
   ========================================= */
.fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fab {
    width: 65px;
    height: 65px;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.4s ease;
    animation: pulse-fab 2s infinite;
    position: relative;
    z-index: 2;
}

.fab i {
    transition: transform 0.4s ease;
}

/* Состояние, когда меню открыто */
.fab-container.active .fab {
    animation: none;
    background: var(--danger); /* Краснеет */
    box-shadow: 0 5px 15px rgba(225, 29, 72, 0.4);
}

.fab-container.active .fab i {
    /* Меняем иконку диалога на импровизированный крестик через поворот */
    transform: rotate(135deg) scale(1.2);
    content: "\f00d"; /* Иконка крестика FontAwesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.fab-menu {
    position: absolute;
    bottom: 80px; /* Выше главной кнопки */
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.fab-container.active .fab-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.fab-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fab-item:hover {
    transform: scale(1.15);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

/* Фирменные цвета мессенджеров */
.fab-telegram { background: #229ED9; }
.fab-viber { background: #7360F2; }
.fab-whatsapp { background: #25D366; }
.fab-phone { background: var(--primary); }

@media (max-width: 768px) {
    .fab-container {
        right: 15px;
        bottom: 15px;
    }
}

/* =========================================
   15. ДОПОЛНИТЕЛЬНАЯ АДАПТАЦИЯ ДЛЯ СМАРТФОНОВ
   ========================================= */
@media (max-width: 768px) {
    /* 1. Глобальные отступы и типографика */
    section { 60px 0 !important; }
    .section-header { margin-bottom: 2.5rem; }
    .section-header h2 { font-size: 2rem; margin-bottom: 0.5rem; }
    .container { padding: 0 16px; }

    /* 2. Решаем проблему 98% + margin (чтобы блоки не распирали экран) */
    .hero, .calculator, .interactive-bg-section {
        width: calc(100% - 20px) !important;
        margin: 10px auto !important;
    }

    /* 3. Жестко фиксируем Navbar, чтобы он не уплывал вправо */
    .navbar {
        width: calc(100% - 20px) !important;
        left: 10px !important;
        transform: none !important;
        margin-top: 10px;
    }

    /* 4. Защита текста от вылезания в нижней панели калькулятора */
    .stats-display { gap: 5px !important; }
    .stat-item { min-width: 0; flex-shrink: 1; border-left: none !important; padding-left: 0 !important;}
    .stat-value { font-size: 1.1rem !important; }
    .stat-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .nav-buttons .btn { padding: 12px 10px; font-size: 0.95rem; }

    /* 5. Исправляем возможный вылет полей в форме обратной связи */
    .contact-form-wizard, .contact-form-main { max-width: 100%; overflow: hidden; box-sizing: border-box; }

    /* 6. Секция FAQ: горизонтальный свайп-бар */
    .faq-layout { grid-template-columns: 1fr; gap: 20px; }
    .faq-sidebar {
        position: relative; top: 0; flex-direction: row; overflow-x: auto;
        padding-bottom: 10px; -ms-overflow-style: none; scrollbar-width: none;
    }
    .faq-sidebar::-webkit-scrollbar { display: none; }
    .faq-tab { white-space: nowrap; flex-shrink: 0; padding: 12px 16px; font-size: 0.95rem; }

    /* 7. Калькулятор: улучшаем карточки и счетчики */
    .choice-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
    .choice-card { padding: 20px 10px; }
    .choice-card i { font-size: 1.5rem; }
    .counter-grid, .extras-grid { grid-template-columns: 1fr; }
    .counter-item { padding: 12px 15px; }

    /* 8. Тарифы и Гарантии */
    .price-card { padding: 40px 25px; }
    .popular-tag { right: -50px; font-size: 0.75rem; padding: 6px 40px; }
    .guarantee-card { padding: 30px 20px; }
    .tilt-card { transform: none !important; }

    /* 9. Подвал и Контакты */
    .contact-form-main { padding: 35px 20px; }
    .footer-grid { gap: 30px; text-align: center; }
    .footer-grid > div { display: flex; flex-direction: column; align-items: center; }
    .footer-links a { display: block; padding: 5px 0; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1rem; }
    
    .progress-container { padding: 0 5px; }
    .step-indicator { width: 36px; height: 36px; font-size: 0.9rem; }
    .step-indicator.active { transform: scale(1.1); }
    .progress-line, .progress-line-fill { left: 15px; right: 15px; }

    .summary-receipt { padding: 25px 15px; }
    .receipt-line { font-size: 0.9rem; }
    .receipt-line.total { font-size: 1.2rem; }
    .receipt-line.total span.price { font-size: 1.5rem; }
}

/* =========================================
   СТИЛИ ДЛЯ РУЧНОГО ВВОДА (INPUT NUMBER)
   ========================================= */
.slider-input-wrapper {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.slider-num-input {
    width: 75px;
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    text-shadow: 0 4px 10px rgba(14,165,233,0.2);
    background: transparent;
    border: none;
    border-bottom: 2px dashed transparent;
    outline: none;
    font-family: inherit;
    padding: 0;
    transition: var(--transition);
}

.slider-num-input:focus {
    border-bottom: 2px dashed var(--primary); /* Подчеркивание при вводе */
}

/* Убираем стандартные стрелочки у input type="number" во всех браузерах */
.slider-num-input::-webkit-outer-spin-button,
.slider-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.slider-num-input[type=number] {
    -moz-appearance: textfield;
}

/* =======================================================
   ОБНОВЛЕННАЯ КНОПКА ЗАКАЗА С ПУЛЬСИРУЮЩИМ СИЯНИЕМ
   ======================================================= */
.btn-order {
    position: fixed;
    bottom: 35px;
    right: 130px;
    border-radius: 50px;
    border: none;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    animation: global-btn-pulse 2s infinite;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    background: linear-gradient(135deg, #0ea5e9b8, #0284c742);
    color: #ffffff;
    padding: 16px 36px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    backdrop-filter: blur(46px);
}

/* Эффект при наведении мыши (приостанавливает агрессивный пульс и делает кнопку статично ярче) */
.btn-order:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 15px 30px rgba(14, 165, 233, 0.6);
    animation-play-state: paused; /* Пауза анимации при ховере для удобства клика */
}

.btn-order i {
    display: inline-block; /* Обязательно, чтобы корректно работали наклоны и масштабирование */
    transform-origin: center center;
    /* Запускаем детальный цикл звонка каждые 2.5 секунды */
    animation: global-phone-ring 2.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}

/* =======================================================
   ДЕТАЛЬНАЯ КИНЕМАТОГРАФИЧНАЯ АНИМАЦИЯ ТЕЛЕФОННОГО ЗВОНКА
   ======================================================= */
@keyframes global-phone-ring {
    /* 0% - 35%: Фаза активного вибрирующего звонка */
    0%, 35% { transform: rotate(0) scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
    3% { transform: rotate(-18deg) scale(1.25); filter: drop-shadow(0 0 8px rgba(255,255,255,0.6)); }
    6% { transform: rotate(16deg) scale(1.25); }
    9% { transform: rotate(-16deg) scale(1.25); }
    12% { transform: rotate(14deg) scale(1.25); }
    15% { transform: rotate(-14deg) scale(1.25); }
    18% { transform: rotate(12deg) scale(1.25); }
    21% { transform: rotate(-12deg) scale(1.25); }
    24% { transform: rotate(10deg) scale(1.2); }
    27% { transform: rotate(-10deg) scale(1.2); }
    30% { transform: rotate(5deg) scale(1.1); }
    33% { transform: rotate(-5deg) scale(1.1); }
    
    /* 36% - 100%: Тягучая естественная пауза ("ожидание гудка") с эффектом мягкого покачивания */
    36% { transform: rotate(0) scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
    50% { transform: translateY(-3px) scale(1.05); } /* Трубка слегка приподнимается */
    65% { transform: translateY(0) scale(1); }
    100% { transform: rotate(0) scale(1); }
}
.btn-order-text {
    display: inline;
}

/* КИНЕМАТОГРАФИЧНЫЙ ПУЛЬС: Создает расширяющуюся световую волну вокруг кнопки */
@keyframes global-btn-pulse {
    0% {
        box-shadow: 0 10px 25px rgba(14, 165, 233, 0.4), 
                    0 0 0 0 rgba(14, 165, 233, 0.5);
    }
    70% {
        box-shadow: 0 15px 30px rgba(14, 165, 233, 0.5), 
                    0 0 0 18px rgba(14, 165, 233, 0); /* Волна увеличивается и полностью тает */
    }
    100% {
        box-shadow: 0 10px 25px rgba(14, 165, 233, 0.4), 
                    0 0 0 0 rgba(14, 165, 233, 0);
    }
}

/* Адаптация под смартфоны */
@media (max-width: 768px) {
    .btn-order {
        right: 30px;
        bottom: 110px; /* Ровно НАД кнопкой Whatsapp */
        width: 65px;
        height: 65px;
        border-radius: 50%; /* На мобилке превращается в идеальный пульсирующий круг */
        padding: 0;
        justify-content: center;
        font-size: 1.4rem;
    }
    
    .btn-order-text {
        display: none; /* Скрываем текст на смартфонах */
    }

    /* Умный сдвиг вверх, когда на смартфоне всплывает нижняя панель калькулятора */
    body:has(.bottom-bar.show) .fab {
        transform: translateY(-130px); /* Поднимаем еще выше */
        z-index: 10000 !important; /* Принудительно вытаскиваем поверх панели */
    }
    body:has(.bottom-bar.show) .btn-order {
        transform: translateY(-130px); /* Поднимаем еще выше */
        z-index: 10000 !important; /* Принудительно вытаскиваем поверх панели */
    }
    body:has(.bottom-bar.show) .btn-order:hover {
        transform: translateY(-133px) scale(1.03);
        z-index: 10000 !important;
    }
}

/* =======================================================
   СТИЛИ ДЛЯ ИНТЕРАКТИВНОЙ БЕНТО-МАТРИЦЫ КАЧЕСТВА (LIGHT)
   ======================================================= */
.bento-matrix {
    display: grid;
    grid-template-columns: 1.3fr 1fr; /* Создаем красивую асимметрию колонок */
    gap: 25px;
    margin-top: 30px;
}

.bento-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 35px;
    position: relative;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Тягучая плавная анимация раскрытия на 0.6 секунды */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease;
}

/* Переливающийся неоновый контур-рамка, активирующийся на ховере */
.bento-card-glow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: inherit;
    pointer-events: none;
    border: 2px solid transparent;
    background: linear-gradient(135deg, var(--primary), var(--accent)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 3;
}

/* Широкие блоки Bento */
.bento-wide {
    grid-column: span 1; /* Базовое состояние */
}

.bento-num {
    position: absolute;
    top: 25px; right: 35px;
    font-family: monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-light);
    opacity: 0.4;
}

.bento-header-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.bento-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--bg-body);
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.4s ease;
}

.bento-card h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--dark);
}

.bento-preview-text {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.5;
    transition: opacity 0.3s ease, transform 0.4s ease;
}

/* СКРЫТЫЙ КОНТЕНТ (Изначально свернут в 0 и прозрачен) */
.bento-hidden-content {
    max-height: 0;
    opacity: 0;
    transform: translateY(10px);
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease,
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =======================================================
   СОСТОЯНИЕ АКТИВАЦИИ (РАСКРЫТИЕ ТОЛЬКО ПО КЛИКУ)
   ======================================================= */
/* Легкая подсветка и подъем карточки при наведении мыши ИЛИ при клике */
.bento-card:hover, .bento-card.active-bento {
    border-color: transparent;
    box-shadow: 0 30px 60px -15px rgba(14, 165, 233, 0.12);
    transform: translateY(-4px);
}

.bento-card:hover .bento-card-glow, 
.bento-card.active-bento .bento-card-glow {
    opacity: 1;
}

.bento-card:hover .bento-icon,
.bento-card.active-bento .bento-icon {
    background: var(--primary);
    color: #ffffff;
    transform: scale(1.05) rotate(4deg);
    box-shadow: var(--shadow-glow);
}

/* РАЗВОРАЧИВАЕМ ТЕКСТ СТРОГО ПО КЛИКУ (.active-bento) */
.bento-card.active-bento .bento-hidden-content {
    max-height: 300px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed var(--border);
}

.bento-card.active-bento .bento-preview-text {
    opacity: 0;
    transform: translateY(-5px);
    position: absolute; /* Убираем из потока, чтобы освободить место */
}

/* =======================================================
   АДАПТИВНОСТЬ ДЛЯ СМАРТФОНОВ И ПЛАНШЕТОВ
   ======================================================= */
@media (max-width: 992px) {
    .bento-matrix {
        grid-template-columns: 1fr; /* Выстраиваем Bento в одну колонку */
        gap: 20px;
    }
    
    .bento-card {
        padding: 25px 20px;
    }
    
    /* На мобильных разворот будет происходить поочередно по тапу */
    .bento-card:hover {
        transform: none; /* Отключаем ховер эффекты на тач-экранах во избежание залипаний */
    }
    
    .bento-card.active-bento .bento-hidden-content {
        max-height: 800px; /* С запасом для вертикального контента мобилок */
    }
    
    .bento-split-grid {
        grid-template-columns: 1fr; /* Сплит-колонки Угроза/Защита встают друг под друга */
        gap: 15px;
    }
}

/* =======================================================
   ДОРАБОТКА СТРЕЛОЧЕК И ШАПКИ ДЛЯ БЕНТО-КАРТ
   ======================================================= */
.bento-header-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    width: 100%;
    position: relative;
}

.bento-chevron {
    margin-left: auto; /* Автоматически отжимаем стрелочку к правому краю */
    font-size: 1.1rem;
    color: var(--text-light);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-body);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* При раскрытии карточки (ТОЛЬКО ПО КЛИКУ)
   стрелочка плавно переворачивается и окрашивается в акцентный цвет */
.bento-card.active-bento .bento-chevron {
    transform: rotate(-180deg);
    background: var(--primary);
    color: #ffffff;
    box-shadow: var(--shadow-glow);
}

/* На мобильных экранах делаем стрелочку чуть крупнее для удобства тапа пальцем */
@media (max-width: 768px) {
    .bento-chevron {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
        background: var(--primary-light); /* На мобилках делаем её изначально чуть ярче */
        color: var(--primary);
    }
}

/* =======================================================
   ЧИСТЫЙ CSS-КОННЕКТОР ДЛЯ МОБИЛЬНОЙ ВЕРСИИ (БЕЗ SVG БАГОВ)
   ======================================================= */
@media (max-width: 768px) {
    /* Прячем ломающийся и сжимающийся десктопный SVG на смартфонах */
    .connector-container svg {
        display: none !important;
    }
    
    /* Превращаем сам контейнер в идеальную вертикальную дорожку */
    .connector-container {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        height: 70px !important; /* Фиксированная комфортная высота отступа */
        margin: 25px auto 15px !important;
        position: relative;
        width: 100% !important;
        aspect-ratio: unset !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Рисуем безупречную вертикальную пунктирную линию */
    .connector-container::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 12px; /* Оставляем зазор для наконечника стрелки */
        width: 4px; /* Толщина линии */
        /* Создаем пунктир через CSS градиент */
        background-image: linear-gradient(to bottom, var(--primary) 50%, transparent 50%);
        background-size: 4px 12px; 
        /* Запускаем бесконечный тягучий поток лазера вниз */
        animation: mobile-line-flow 0.8s linear infinite;
    }
    
    /* Создаем четкую треугольную стрелочку в самом низу линии */
    .connector-container::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 11px solid var(--primary); /* Наконечник стрелки */
        filter: drop-shadow(0 2px 5px rgba(14, 165, 233, 0.4));
    }
}

/* Анимация движения пунктира на телефонах */
@keyframes mobile-line-flow {
    from { background-position: 0 0; }
    to { background-position: 0 12px; }
}

/* =======================================================
   ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКОВ (LANG SWITCHER)
   ======================================================= */
.lang-switcher {
    position: relative;
    margin-left: 0; /* <-- Убираем лишний отступ */
    z-index: 1005;
}

.lang-current {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--dark);
    font-weight: 700;
    font-size: 0.95rem;
    transition: var(--transition);
}

.lang-current:hover {
    background: rgba(255, 255, 255, 0.6);
}

.lang-current img, .lang-option img {
    width: 22px;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.lang-current i {
    font-size: 0.75rem;
    color: var(--text-light);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lang-switcher.active .lang-current i {
    transform: rotate(180deg);
}

.lang-dropdown {
    position: absolute;
    top: 130%;
    right: 0; /* ИСПРАВЛЕНО: выравниваем по правому краю, чтобы меню не уходило за экран */
    background: var(--bg-white);
    border-radius: var(--radius-md);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.1);
    border: 1px solid var(--border);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 160px;
}

.lang-switcher.active .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
    transition: background 0.2s, color 0.2s;
}

.lang-option:hover, .lang-option.selected {
    background: var(--primary-light);
    color: var(--primary);
}

/* Адаптивность для мобильных */
@media (max-width: 992px) {
    .lang-switcher {
        margin-right: 15px;
        margin-left: auto; /* Прижимаем к кнопке телефона на мобильных */
    }
    .lang-current span { display: none; } /* Скрываем текст UK/EN на смартфонах */
    .lang-current { padding: 8px 10px; }
    .lang-dropdown { left: auto; right: 0; } 
}

/* =======================================================
   СТИЛІ ДЛЯ ЮРИДИЧНОГО ТЕКСТУ (ОФЕРТА)
   ======================================================= */
.legal-text-container {
    max-height: 40vh; /* Займає не більше 40% висоти екрану */
    overflow-y: auto;
    padding-right: 15px;
    margin: 20px 0 25px 0;
    color: var(--text-main);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: left;
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
    padding-top: 15px;
    padding-bottom: 15px;
}

.legal-text-container h4 {
    margin: 15px 0 5px;
    color: var(--dark);
    font-weight: 700;
    font-size: 1.05rem;
}

.legal-text-container h4:first-child {
    margin-top: 0;
}

.legal-text-container p {
    margin-bottom: 10px;
    color: var(--text-light);
}

/* Кастомний скроллбар спеціально для тексту договору */
.legal-text-container::-webkit-scrollbar {
    width: 6px;
}
.legal-text-container::-webkit-scrollbar-track {
    background: var(--bg-body);
    border-radius: 4px;
}
.legal-text-container::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

/* =======================================================
   ВИЗУАЛЬНАЯ ПОДСКАЗКА ДЛЯ ГАЛЕРЕИ НА МОБИЛЬНЫХ (TAP TO VIEW)
   ======================================================= */
@media (max-width: 768px) {
    /* На тачскрине ховера нет — иконка расширения видна всегда, с мягкой
       пульсацией как подсказка «натисни, щоб переглянути». */
    .gallery-item::after {
        opacity: 1 !important;
        transform: translateY(0) !important;
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        animation: pulse-gallery-icon 2s infinite ease-in-out;
        background: rgba(14, 165, 233, 0.85);
    }

    .gallery-label { font-size: 0.92rem; bottom: 14px; left: 16px; right: 16px; }
}

/* Анимация пульсации белым свечением для иконки галереи */
@keyframes pulse-gallery-icon {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* =======================================================
   ФИКС ПЕРЕКРЫТИЯ: ПРЯЧЕМ НИЖНЮЮ ПАНЕЛЬ ПРИ ОТКРЫТИИ ОФЕРТЫ
   ======================================================= */
body:has(#legalModal.active) .bottom-bar.is-floating.show {
    transform: translateY(150%) !important; /* Плавно уводим панель вниз за экран */
    opacity: 0 !important;                  /* Растворяем её */
    pointer-events: none !important;        /* Отключаем любые случайные клики по ней */
}

/* =======================================================
   ФИКС МОБИЛЬНОГО ЧЕКА (КРАСИВАЯ ВЕРСТКА ДЛЯ ШАГА 5)
   ======================================================= */
@media (max-width: 768px) {
    .summary-receipt {
        padding: 25px 15px; /* Делаем внутренние отступы компактнее */
    }

    .receipt-line {
        display: flex;
        justify-content: space-between;
        align-items: flex-start; /* Прижимаем к верху, если текст слева идет в 2-3 строки */
        gap: 15px; /* Гарантированный отступ между текстом и ценой */
        line-height: 1.4;
    }

    /* Левая часть (Название услуги) */
    .receipt-line span:first-child {
        flex: 1 1 auto; /* Разрешаем занимать всё доступное место */
        text-align: left;
        word-break: break-word; /* Аккуратно переносим длинные названия на новые строки */
    }

    /* Правая часть (Цена или количество) */
    .receipt-line span:last-child,
    .receipt-line span.price {
        flex: 0 0 auto; /* КАТЕГОРИЧЕСКИ запрещаем цене сжиматься */
        white-space: nowrap; /* ЗАПРЕЩАЕМ перенос цены на новую строку! */
        text-align: right;
    }

    /* Центрируем строку "Разом до сплати" */
    .receipt-line.total {
        align-items: center; 
        margin-top: 20px;
    }
    
    /* Делаем шрифт полей формы более читаемым на смартфонах */
    .contact-input-wizard {
        font-size: 1rem; 
        padding: 16px 15px;
    }
}

/* =======================================================
   АККОРДЕОН ДЛЯ КАТЕГОРИЙ ДОП. УСЛУГ (ШАГ 4)
   ======================================================= */
.extra-category-title {
    cursor: pointer;
    user-select: none;
    margin-bottom: 0 !important; /* Сбрасываем фиксированный отступ */
    padding: 12px 0;
    transition: var(--transition);
}

/* Динамическая стрелочка, которую мы добавим через JS */
.category-chevron {
    margin-left: auto; /* Прижимаем стрелку к правому краю */
    font-size: 1.1rem;
    color: var(--text-light);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Состояние, когда категория раскрыта */
.extra-category.active-category .category-chevron {
    transform: rotate(-180deg);
    color: var(--primary);
}

/* Анимация плавного схлопывания/раскрытия списков */
.extra-category .counter-grid,
.extra-category .extras-grid {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.6s ease,
                margin 0.6s ease;
    margin-top: 0;
}

/* Раскрытое состояние контейнеров (с запасом по высоте) */
.extra-category.active-category .counter-grid,
.extra-category.active-category .extras-grid {
    max-height: 2500px; /* Высота с запасом для больших сеток вроде кухни */
    opacity: 1;
    margin-top: 25px; /* Возвращаем красивый отступ только при открытии */
}

/* =======================================================
   ФИКС НАЛОЖЕНИЯ ПАНЕЛИ НА МОБИЛЬНУЮ КЛАВИАТУРУ (ШАГ 5)
   ======================================================= */
@media (max-width: 768px) {
    .bottom-bar.hide-for-keyboard {
        transform: translateY(150%) !important; /* Уводим плавно вниз за экран */
        opacity: 0 !important;                  /* Растворяем */
        pointer-events: none !important;        /* Блокируем клики */
        visibility: hidden !important;
        /* Клавиатура должна прятать панель быстро, а не тягуче — иначе панель
           будет заметно наезжать на поле ввода, пока идёт долгая анимация. */
        transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0.25s !important;
    }
}
/* =========================================
   UX: более конверсионный первый экран
   ========================================= */
.hero-proof-line {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: -20px 0 32px;
}

.hero-proof-line div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #f8fafc;
    font-weight: 700;
    font-size: 0.95rem;
}

.hero-proof-line i {
    color: var(--accent);
}

@media (max-width: 600px) {
    .hero-proof-line {
        flex-direction: column;
        margin-top: -10px;
    }

    .hero-proof-line div {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================
   UX: группировка типов уборки на шаге 3
   ========================================= */
.cleaning-group {
    margin-bottom: 34px;
}

.cleaning-group:last-child {
    margin-bottom: 0;
}

.cleaning-group-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-hover);
    font-weight: 800;
    font-size: 0.95rem;
}

.cleaning-group-title i {
    color: var(--primary);
}

.cleaning-choice-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

/* Прямоугольные компактные плитки формата прибирання (шаг 3):
   иконка слева, заголовок + описание — в два ряда справа.
   CSS Grid с явным размещением, разметку карточек не трогаем. */
.cleaning-choice-grid .choice-card {
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 1px;
    align-items: center;
    text-align: left;
    padding: 12px 16px;
}

.cleaning-choice-grid .choice-card > i,
.cleaning-choice-grid .choice-card > .moving-box-wrapper,
.cleaning-choice-grid .choice-card > .clinking-glasses,
.cleaning-choice-grid .choice-card > .dripping-drops,
.cleaning-choice-grid .choice-card > .special-heart-wrapper {
    grid-column: 1;
    grid-row: 1 / 3;
    justify-self: center;
    margin-bottom: 0;
}

.cleaning-choice-grid .choice-card > i {
    font-size: 1.7rem;
}

.cleaning-choice-grid .choice-card h4 {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    font-size: 0.95rem;
}

.cleaning-choice-grid .choice-card p {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.76rem;
}

@media (max-width: 600px) {
    .cleaning-group-title {
        width: 100%;
        justify-content: center;
    }
    .cleaning-choice-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* =========================================
   UX: финальная форма и доверие
   ========================================= */
.field-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-wrap.full {
    grid-column: 1 / -1;
}

.field-wrap textarea.contact-input-wizard {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

.field-error {
    min-height: 18px;
    color: var(--danger);
    font-size: 0.85rem;
    font-weight: 700;
    padding-left: 6px;
}

.offer-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
}

.offer-check input {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    accent-color: var(--primary);
    flex-shrink: 0;
}

.offer-check button {
    border: none;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.offer-error {
    display: block;
    margin-top: 4px;
}

/* =========================================
   FIX: стрелка категорий на шаге 4 без Font Awesome
   ========================================= */
.extra-category-title {
    cursor: pointer;
}

.category-chevron {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    background: rgba(14, 165, 233, 0.1);
    color: var(--primary);
    font-family: Arial, sans-serif !important;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;

    transition: transform 0.3s ease, background 0.3s ease;
}

.extra-category.active-category .category-chevron {
    transform: rotate(180deg);
    background: rgba(14, 165, 233, 0.18);
}

/* =========================================
   UX: зоны обслуживания
   ========================================= */
.service-area {
    position: relative;
    overflow: hidden;
}

.section-kicker {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.1);
    color: var(--primary-hover);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.service-area-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 24px;
}

.service-area-card {
    display: flex;
    gap: 20px;
    padding: 30px;
    border: 1px solid rgba(14, 165, 233, 0.14);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-card);
}

.service-area-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 12px 24px rgba(14, 165, 233, 0.2);
    font-size: 1.25rem;
}

.service-area-card h3 {
    margin-bottom: 10px;
    color: var(--dark);
    font-size: 1.25rem;
}

.service-area-card p {
    color: var(--text-light);
    line-height: 1.65;
}

.area-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 12px;
}

.area-chips span {
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary-hover);
    font-weight: 800;
}

.service-area-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    color: var(--text-main);
    font-weight: 700;
}

.service-area-cta i,
.service-area-cta a { color: var(--primary); }
.service-area-cta a { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* =========================================
   UX: поля, ошибки и сообщения форм
   ========================================= */
.form-label {
    display: block;
    margin: 0 0 7px 4px;
    color: var(--text-main);
    font-size: 0.88rem;
    font-weight: 800;
}

select.contact-input-wizard { appearance: auto; cursor: pointer; }
.contact-input-wizard.field-invalid,
.contact-input-main.field-invalid {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1) !important;
}

.form-status {
    display: none;
    width: 100%;
    margin-top: 14px;
    padding: 13px 15px;
    border-radius: 13px;
    font-size: 0.92rem;
    font-weight: 750;
    line-height: 1.45;
}

.form-status.is-visible { display: flex; align-items: flex-start; gap: 9px; }
.form-status.is-error { color: #9f1239; background: #fff1f2; border: 1px solid #fecdd3; }
.form-status.is-success { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
.form-status-dark.is-error { color: #fecdd3; background: rgba(225, 29, 72, 0.16); border-color: rgba(251, 113, 133, 0.35); }
.form-status-dark.is-success { color: #a7f3d0; background: rgba(16, 185, 129, 0.16); border-color: rgba(52, 211, 153, 0.35); }

.contact-field { width: 100%; }
.contact-field .contact-input-main { margin-bottom: 5px; }
.contact-field .field-error { display: block; margin-bottom: 12px; color: #fda4af; }
.modal-schedule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.mobile-menu-contact { display: none; }

/* =========================================
   UX: переработанный мобильный первый экран и шапка
   ========================================= */
@media (max-width: 992px) {
    .mobile-phone-btn { display: none !important; }
    .nav-right { gap: 8px; }
    .nav-menu { width: min(300px, calc(100% - 24px)); }
    .mobile-menu-contact {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: var(--primary) !important;
        font-weight: 800;
    }
}

@media (max-width: 600px) {
    .navbar { border-radius: 22px; }
    .navbar .nav-container { gap: 8px; }
    .navbar .logo-img { height: 32px; max-width: 118px; }
    .lang-current { padding: 10px 11px; }
    .mobile-menu-toggle { border-radius: 13px; }

    body .hero:not(.hero-services) {
        /* На мобильном не привязываем высоту к vh/svh-юнитам — в Safari iOS
           комбинация flex + min-height в svh даёт баг с неверным расчётом
           высоты, из-за которого нижняя кнопка обрезалась overflow:hidden.
           Высота теперь целиком определяется контентом — обрезать нечего. */
        height: auto !important;
        min-height: 0;
        padding: 112px 0 38px !important;
        align-items: stretch;
    }

    body .hero:not(.hero-services) .container {
        display: flex;
        align-items: center;
    }

    body .hero:not(.hero-services) .hero-content {
        margin: 0 !important;
        padding: 0;
    }

    body .hero:not(.hero-services) h1 {
        margin-bottom: 18px;
        font-size: clamp(2rem, 10vw, 2.35rem);
        line-height: 1.12;
    }

    body .hero:not(.hero-services) p {
        margin-bottom: 26px;
        line-height: 1.55;
    }

    body .hero:not(.hero-services) .hero-proof-line {
        gap: 8px;
        margin: 0 0 24px;
    }

    body .hero:not(.hero-services) .hero-proof-line div {
        padding: 9px 14px;
        font-size: 0.88rem;
    }

    body .hero:not(.hero-services) .hero-actions {
        gap: 11px;
        margin: 0;
    }

    body .hero:not(.hero-services) .hero-actions .btn {
        min-height: 52px;
        padding: 14px 18px;
    }

    .service-area-grid { grid-template-columns: 1fr; gap: 14px; }
    .service-area-card { gap: 14px; padding: 20px; }
    .service-area-icon { width: 46px; height: 46px; flex-basis: 46px; border-radius: 14px; }
    .service-area-card h3 { font-size: 1.1rem; }
    .service-area-card p { font-size: 0.92rem; }
    .service-area-cta { align-items: flex-start; flex-wrap: wrap; text-align: center; }
    .modal-schedule-grid { grid-template-columns: 1fr; }

    .fab-container {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(18px) scale(0.9);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    }
    .fab-container.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }
    body:has(.bottom-bar.show) .fab-container,
    body:has(.case-modal.active) .fab-container,
    body.menu-open .fab-container {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media (max-width: 420px) {
    .lang-current span { display: none; }
    .lang-current { min-width: 44px; justify-content: center; gap: 6px; }
}

@media (max-width: 350px) {
    body .hero:not(.hero-services) {
        min-height: auto;
        padding-top: 104px !important;
        padding-bottom: 28px !important;
    }
    body .hero:not(.hero-services) h1 { font-size: 1.9rem; }
    body .hero:not(.hero-services) p { font-size: 0.94rem; }
    body .hero:not(.hero-services) .hero-actions .btn { font-size: 0.92rem; }
}

/* =========================================
   UI refresh: логотип, компактный checkout и popup-окна
   ========================================= */
.navbar .logo-img {
    width: auto;
    height: 44px;
    max-width: 156px;
    object-fit: contain;
}

.footer-grid .logo-img {
    width: auto;
    height: 50px;
    max-width: 180px;
}

#step-5 .step-title {
    margin-bottom: 20px;
    font-size: 1.55rem;
}

.checkout-compact-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.35fr);
    align-items: start;
    gap: 20px;
}

.checkout-compact-grid .summary-receipt {
    padding: 22px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
}

.checkout-compact-grid .summary-receipt::before,
.checkout-compact-grid .summary-receipt::after {
    width: 20px;
    height: 20px;
    top: -10px;
}

.checkout-compact-grid .summary-receipt::before { left: -10px; }
.checkout-compact-grid .summary-receipt::after { right: -10px; }

.checkout-compact-grid .receipt-line {
    gap: 12px;
    margin-bottom: 9px;
    font-size: 0.92rem;
    line-height: 1.35;
}

.checkout-compact-grid .receipt-line.total {
    margin-top: 16px;
    padding-top: 16px;
    font-size: 1.05rem;
}

.checkout-compact-grid .receipt-line.total span.price {
    font-size: 1.45rem;
}

.checkout-compact-grid .contact-form-wizard {
    margin-top: 0;
    gap: 11px 12px;
}

#step-5 .contact-input-wizard {
    padding: 12px 14px;
    font-size: 0.94rem;
    border-radius: 13px;
}

#step-5 textarea.contact-input-wizard {
    min-height: 68px;
    resize: vertical;
}

#step-5 .form-label {
    margin-bottom: 4px;
    font-size: 0.78rem;
}

#step-5 .field-error { font-size: 0.76rem; }
#step-5 .offer-check { margin-top: 14px; }
#step-5 .form-status { margin-top: 8px; }

/* --- Step 5: понятная структура чекаута --- */
/* Breakout: делаем чекаут шире родительского wizard-wrapper (950px),
   т.к. форма справа была слишком узкой. Применяем только к активному шагу. */
#step-5.active-step {
    width: min(94vw, 1080px);
    left: 50%;
    margin-left: max(-47vw, -540px);
    margin-right: 0;
}

#step-5 .step-title { margin-bottom: 8px; }

.checkout-lead {
    max-width: 640px;
    margin: 0 auto 26px;
    text-align: center;
    color: var(--text-light);
    font-size: 0.98rem;
    line-height: 1.5;
    font-weight: 500;
}

.checkout-col { display: flex; flex-direction: column; }

.checkout-block-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.checkout-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    color: #fff;
    font-size: 1.05rem;
    background: linear-gradient(135deg, var(--primary), #06b6d4);
    box-shadow: 0 6px 14px rgba(14, 165, 233, 0.28);
}

.checkout-block-titles h4 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.2;
}

.checkout-block-titles p {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--text-light);
    line-height: 1.3;
}

.checkout-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 2px 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-light);
}

.checkout-note i { color: var(--primary); font-size: 0.95rem; }

.label-optional { color: var(--text-light); font-weight: 500; }

.extra-category-title {
    min-height: 58px;
    padding: 9px 10px 9px 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.extra-category-title:focus-visible {
    outline: 3px solid rgba(14, 165, 233, 0.24);
    outline-offset: 3px;
}

.category-chevron {
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 13px;
    background: #fff;
    color: var(--primary);
    box-shadow: 0 6px 14px rgba(14, 165, 233, 0.1);
    transform: none;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.category-chevron i {
    font-size: 0.9rem;
    transition: transform 0.25s ease;
}

.extra-category-title:hover .category-chevron {
    transform: translateY(-2px);
    border-color: rgba(14, 165, 233, 0.42);
}

.extra-category.active-category .category-chevron {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary), #38bdf8);
    transform: none;
}

.case-modal {
    padding: clamp(12px, 3vw, 32px);
    overflow: hidden;
    background: rgba(2, 6, 23, 0.76);
}

.case-modal-content {
    max-width: 1120px;
    max-height: calc(100dvh - 40px);
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 28px;
    transform: translateY(24px) scale(0.96);
    transform-origin: center;
    scrollbar-width: thin;
}

.case-modal.active .case-modal-content {
    transform: translateY(0) scale(1);
}

.case-modal-close {
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.case-gallery-modal-content { max-width: 1180px; }
.case-gallery-modal-content .case-layout { grid-template-columns: 1.45fr 0.85fr; }
.case-gallery-modal-content .case-gallery { padding: 20px; }
.case-gallery-modal-content .case-main-img-box { margin-bottom: 14px; aspect-ratio: 16 / 9; }
.case-gallery-modal-content .case-info { padding: 38px 34px 30px; }
.case-gallery-modal-content .case-info h3 { font-size: clamp(1.65rem, 2.4vw, 2.15rem); }
.case-gallery-modal-content .case-meta,
.case-gallery-modal-content .case-divider { margin-bottom: 16px; }
.case-gallery-modal-content .case-info p { font-size: 1rem; line-height: 1.6; }
.case-gallery-modal-content .case-order-btn { margin-top: 24px; }

.order-modal-content {
    width: min(960px, 100%);
    max-width: 960px;
    overflow: hidden;
}

.order-modal-layout {
    display: grid;
    grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
}

.order-modal-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 34px;
    color: #fff;
    background:
        radial-gradient(circle at 15% 15%, rgba(56, 189, 248, 0.34), transparent 40%),
        linear-gradient(145deg, #0f172a, #12375a);
}

.order-modal-icon,
.legal-modal-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 12px 26px rgba(14, 165, 233, 0.26);
}

.order-modal-intro h3 {
    margin-bottom: 10px;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1.15;
}

.order-modal-intro p {
    margin-bottom: 24px;
    color: #cbd5e1;
    font-size: 0.94rem;
    line-height: 1.6;
}

.order-modal-benefits { display: flex; flex-direction: column; gap: 10px; }
.order-modal-benefits span { display: flex; align-items: center; gap: 9px; color: #e2e8f0; font-size: 0.86rem; font-weight: 700; }
.order-modal-benefits i { color: #67e8f9; }

.order-modal-form {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
    padding: 30px 34px;
    background: #fff;
}

.order-modal-form .modal-schedule-grid,
.order-modal-form textarea,
.order-modal-form .order-modal-submit,
.order-modal-form .form-status { grid-column: 1 / -1; }

.order-modal-form .contact-input-wizard { padding: 13px 14px; font-size: 0.94rem; }
.order-modal-form textarea { min-height: 72px; resize: vertical; font-family: inherit; }
.order-modal-submit,
.legal-accept-btn {
    width: 100%;
    padding: 14px 18px;
    border: 0;
    background: linear-gradient(135deg, var(--accent), #059669);
    font-size: 1rem;
}

.legal-modal-content {
    width: min(1060px, 100%);
    max-width: 1060px;
    padding: 28px 32px 26px;
}

.legal-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 48px;
}

.legal-modal-icon { flex: 0 0 52px; margin: 0; }
.legal-modal-header h3 { margin-bottom: 4px; color: var(--dark); font-size: 1.65rem; }
.legal-modal-header p { color: var(--text-light); font-size: 0.9rem; }

.legal-modal-content .legal-text-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-height: 48dvh;
    margin: 18px 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #f8fafc;
}

.legal-clause {
    padding: 13px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
}

.legal-text-container .legal-clause h4 { margin: 0 0 5px; font-size: 0.92rem; }
.legal-text-container .legal-clause p { margin: 0; font-size: 0.82rem; line-height: 1.48; }
.legal-accept-btn { display: flex; width: fit-content; margin-left: auto; }

@media (max-width: 800px) {
    .checkout-compact-grid { grid-template-columns: 1fr; gap: 14px; }
    .checkout-compact-grid .summary-receipt { padding: 18px; }
}

@media (max-width: 720px) {
    .navbar .logo-img { height: 36px; max-width: 126px; }
    .case-modal { align-items: center; padding: 8px; }
    .case-modal-content { max-height: calc(100dvh - 16px); border-radius: 22px; margin: 2%;}
    .case-modal-close { top: 10px; right: 10px; width: 38px; height: 38px; }

    .case-gallery-modal-content .case-layout { grid-template-columns: 1fr; }
    .case-gallery-modal-content .case-gallery { padding: 12px; }
    .case-gallery-modal-content .case-main-img-box { margin-bottom: 10px; }
    .case-gallery-modal-content .case-info { padding: 22px 18px 20px; }
    .case-gallery-modal-content .case-info h3 { padding-right: 34px; }

    .order-modal-layout { grid-template-columns: 1fr; }
    .order-modal-intro { padding: 22px 20px 18px; }
    .order-modal-icon { width: 42px; height: 42px; margin-bottom: 10px; border-radius: 13px; }
    .order-modal-intro h3 { padding-right: 36px; font-size: 1.45rem; }
    .order-modal-intro p { margin-bottom: 12px; font-size: 0.86rem; }
    .order-modal-benefits { flex-direction: row; flex-wrap: wrap; gap: 8px 14px; }
    .order-modal-form { grid-template-columns: 1fr; gap: 10px; padding: 18px 16px 20px; }
    .order-modal-form .modal-schedule-grid { grid-template-columns: 1fr 1fr; display: none; }

    .legal-modal-content { padding: 20px 16px 16px; }
    .legal-modal-header { gap: 11px; padding-right: 38px; }
    .legal-modal-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; }
    .legal-modal-header h3 { font-size: 1.25rem; }
    .legal-modal-header p { font-size: 0.8rem; line-height: 1.35; }
    .legal-modal-content .legal-text-container { grid-template-columns: 1fr; max-height: 50dvh; margin: 12px 0; padding: 9px; }
    .legal-accept-btn { width: 100%; margin: 0; justify-content: center; font-size: 0.88rem; }
}

@media (max-width: 420px) {
    #step-5 .step-title { font-size: 1.3rem; }
    .checkout-compact-grid .contact-form-wizard { grid-template-columns: 1fr; }
    .order-modal-form .modal-schedule-grid { grid-template-columns: 1fr; }
    .order-modal-benefits span { font-size: 0.78rem; }
}

/* =========================================
   Step 4 refresh: компактный аккордеон услуг
   ========================================= */
/* Breakout: делаем шаг шире родительского wizard-wrapper (950px),
   чтобы комфортно поместить 3 колонки. ВАЖНО: применяем только к
   активному шагу, иначе неактивный (высокий) step-4 остаётся в потоке
   и добавляет пустой отступ на всех остальных шагах.
   Позицию НЕ переопределяем — она приходит из .step-card(.active-step). */
#step-4.active-step {
    width: min(94vw, 1140px);
    left: 50%;
    margin-left: max(-47vw, -570px);
    margin-right: 0;
}

/* Ширина/смещение breakout применяются мгновенно — анимируем только
   появление (fade + slide), иначе блок «раздувается» при смене шага. */
#step-4.active-step,
#step-5.active-step {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#step-4 .step-title {
    margin-bottom: 28px;
    font-size: clamp(1.45rem, 3vw, 1.8rem);
}

#step-4 .extra-category {
    margin-bottom: 12px;
}
#step-4 .extra-category:last-child { margin-bottom: 0; }

#step-4 .extra-category-title {
    min-height: 48px;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(46px);
    -webkit-backdrop-filter: blur(46px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.045);
    font-size: 1rem;
    line-height: 1.25;
}

#step-4 .extra-category-title > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #06b6d4);
    box-shadow: 0 6px 12px rgba(14, 165, 233, 0.22);
    font-size: 0.9rem;
}

#step-4 .category-chevron {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 2px solid rgba(14, 165, 233, 0.16);
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #0284c7);
    box-shadow: 0 5px 12px rgba(14, 165, 233, 0.22);
}

#step-4 .category-chevron i { font-size: 0.8rem; }
#step-4 .extra-category-title:hover { border-color: rgba(14, 165, 233, 0.35); transform: translateY(-1px); }
#step-4 .extra-category-title:hover .category-chevron { transform: none; }
#step-4 .extra-category.active-category .extra-category-title {
    border-color: rgba(14, 165, 233, 0.4);
    background: rgba(240, 249, 255, 0.92);
}

#step-4 .extra-category .counter-grid,
#step-4 .extra-category .extras-grid {
    max-height: 0;
    margin: 0;
    padding: 0 6px;
    overflow: hidden;
    scrollbar-width: thin;
}

#step-4 .extra-category.active-category .counter-grid,
#step-4 .extra-category.active-category .extras-grid {
    max-height: min(52vh, 480px);
    margin-top: 5px;
    padding: 12px 8px 10px;
    overflow-y: auto;
}

#step-4 .counter-grid,
#step-4 .extras-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#step-4 .counter-item,
#step-4 .extra-box {
    min-height: 60px;
    padding: 10px 13px;
    border-radius: 13px;
}

#step-4 .counter-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

#step-4 .counter-controls { gap: 7px; }
#step-4 .counter-btn { width: 28px; height: 28px; }

/* Внутренняя группировка услуг по типу внутри категории (напр. cat-sofa:
   дивани / матраци / крісла-стільці / текстиль) — заголовок на всю ширину грида. */
.counter-grid .service-subgroup-title,
.extras-grid .service-subgroup-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 2px;
    padding-bottom: 6px;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.35);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--primary-hover, var(--primary));
}
.counter-grid .service-subgroup-title:first-child,
.extras-grid .service-subgroup-title:first-child {
    margin-top: 0;
}
.counter-grid .service-subgroup-title i,
.extras-grid .service-subgroup-title i {
    font-size: 0.85rem;
    color: var(--primary);
}

.wizard-wrapper:has(#step-4.active-step) .bottom-bar {
    margin-top: 24px;
    padding: 14px 24px;
    border-radius: 18px;
}

/* На 5 шаге делаем нижнюю панель шире (под ширину чекаута ~1080px),
   центрируем симметричными margin, чтобы не ломать position: sticky. */
.wizard-wrapper:has(#step-5.active-step) .bottom-bar {
    width: min(94vw, 1080px);
    margin-left: calc((950px - min(94vw, 1080px)) / 2);
    margin-right: calc((950px - min(94vw, 1080px)) / 2);
    box-sizing: border-box;
}

@media (max-width: 992px) {
    /* Планшет: убираем breakout, возвращаем ширину в рамки wrapper и 2 колонки */
    #step-4.active-step { width: 100%; left: auto; margin-left: 0; margin-right: 0; }
    #step-4 .counter-grid,
    #step-4 .extras-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    #step-4.active-step { width: calc(100% + 40px); left: auto; margin-left: -20px; margin-right: -20px; }
    #step-4 .step-title { margin-bottom: 14px; font-size: 1.25rem; }
    #step-4 .extra-category { margin-bottom: 8px; }
    #step-4 .extra-category:last-child { margin-bottom: 0; }
    #step-4 .extra-category-title { min-height: 44px; gap: 6px; padding: 5px 6px; font-size: 0.8rem; line-height: 1.15; }
    #step-4 .extra-category-title > i,
    #step-4 .category-chevron { width: 28px; height: 28px; flex-basis: 28px; }
    #step-4 .counter-grid,
    #step-4 .extras-grid { grid-template-columns: 1fr; }
    #step-4 .extra-category.active-category .counter-grid,
    #step-4 .extra-category.active-category .extras-grid { max-height: 46vh; }
    .wizard-wrapper:has(#step-4.active-step) .bottom-bar { margin-top: 16px; padding: 12px 14px; }
}

/* Исправление закрытия формы заказа: кнопка не должна перекрывать первое поле. */
#orderModal .case-modal-content {
    position: relative;
}

#orderModal .case-modal-close {
    top: 12px;
    right: 12px;
    z-index: 20;
    background: #ffffff;
    color: var(--dark);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
}

#orderModal .order-modal-form {
    padding-top: 76px;
}

@media (max-width: 720px) {
    #orderModal .order-modal-intro {
        padding-top: 58px;
    }

    #orderModal .order-modal-form {
        padding-top: 18px;
    }
}

/* =========================================================
   КОНСТРУКТОР: визуальные улучшения (2026)
   ========================================================= */

/* ---- 1. Плавное поочерёдное появление контента шага ---- */
@keyframes wizItemIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.step-card.active-step > .step-title,
.step-card.active-step > .service-search,
.step-card.active-step .choice-card,
.step-card.active-step > .cleaning-group,
.step-card.active-step > .slider-row,
.step-card.active-step > .slider-group,
.step-card.active-step > p,
.step-card.active-step > .extra-category,
.step-card.active-step > .checkout-lead,
.step-card.active-step .checkout-col,
.step-card.active-step > .trust-badges {
    animation: wizItemIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
/* Лесенка задержек */
.step-card.active-step > .step-title { animation-delay: 0.02s; }
.step-card.active-step > .service-search { animation-delay: 0.08s; }
.step-card.active-step > .checkout-lead { animation-delay: 0.08s; }
/* choice-card (шаги 1, 3) — по порядку внутри своей сетки */
.step-card.active-step .choice-card:nth-child(1) { animation-delay: 0.10s; }
.step-card.active-step .choice-card:nth-child(2) { animation-delay: 0.16s; }
.step-card.active-step .choice-card:nth-child(3) { animation-delay: 0.22s; }
.step-card.active-step .choice-card:nth-child(4) { animation-delay: 0.28s; }
.step-card.active-step .choice-card:nth-child(5) { animation-delay: 0.34s; }
.step-card.active-step .choice-card:nth-child(6) { animation-delay: 0.40s; }
/* группы шага 3 (title = 1-й ребёнок, группы — 2-й и 3-й) */
.step-card.active-step > .cleaning-group:nth-child(2) { animation-delay: 0.10s; }
.step-card.active-step > .cleaning-group:nth-child(3) { animation-delay: 0.18s; }
/* колонки чекаута (шаг 5) */
.step-card.active-step .checkout-col:nth-child(1) { animation-delay: 0.12s; }
.step-card.active-step .checkout-col:nth-child(2) { animation-delay: 0.18s; }
.step-card.active-step > .trust-badges { animation-delay: 0.28s; }
/* категории шага 4: перед ними стоят title + поиск + пустое-сообщение,
   поэтому первая категория — это 4-й ребёнок */
.step-card.active-step > .extra-category:nth-child(4)  { animation-delay: 0.12s; }
.step-card.active-step > .extra-category:nth-child(5)  { animation-delay: 0.17s; }
.step-card.active-step > .extra-category:nth-child(6)  { animation-delay: 0.22s; }
.step-card.active-step > .extra-category:nth-child(7)  { animation-delay: 0.27s; }
.step-card.active-step > .extra-category:nth-child(8)  { animation-delay: 0.32s; }
.step-card.active-step > .extra-category:nth-child(9)  { animation-delay: 0.37s; }
.step-card.active-step > .extra-category:nth-child(10) { animation-delay: 0.42s; }

/* ---- 2. Подписи под шагами в прогресс-баре ---- */
.step-caption {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-light);
    transition: color 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.step-indicator.active .step-caption { color: var(--primary); font-weight: 700; }
.step-indicator.completed .step-caption { color: var(--primary); }
@media (max-width: 600px) {
    .step-caption { font-size: 0.62rem; top: calc(100% + 5px); }
}
@media (max-width: 420px) {
    /* Показываем подпись только у активного шага, чтобы не наезжали друг на друга */
    .step-caption { opacity: 0; }
    .step-indicator.active .step-caption { opacity: 1; }
}

/* ---- 3. Поиск/фильтр услуг (шаг 4) ---- */
.service-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 auto 18px;
    max-width: 520px;
}
.service-search-icon {
    position: absolute;
    left: 16px;
    color: var(--primary);
    font-size: 0.95rem;
    pointer-events: none;
}
.service-search-input {
    width: 100%;
    padding: 13px 42px 13px 42px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--dark);
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.service-search-input:focus {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12);
}
.service-search-clear {
    position: absolute;
    right: 10px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.18);
    color: var(--text-main);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.service-search-clear:hover { background: rgba(14, 165, 233, 0.18); transform: scale(1.08); }
.service-search-empty {
    margin: 4px auto 14px;
    text-align: center;
    color: var(--text-light);
    font-size: 0.92rem;
    font-weight: 500;
}
/* ---- 4. Явное состояние выбранных counter-item / toggle-box ---- */
#step-4 .counter-item.has-count,
#step-4 .extra-box.selected {
    border-color: var(--primary);
    background: rgba(14, 165, 233, 0.08);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.16);
}
#step-4 .counter-item.has-count .counter-icon,
#step-4 .extra-box.selected i {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #06b6d4);
}
#step-4 .counter-item.has-count .counter-icon i { color: #fff; }
#step-4 .counter-item.has-count .counter-value {
    color: var(--primary);
    font-weight: 800;
}
/* маленькая «галочка» на выбранном тогле */
#step-4 .extra-box { position: relative; }
#step-4 .extra-box.selected::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.72rem;
    color: var(--primary);
}

/* ---- 5. Живой счётчик выбора на заголовках категорий ---- */
.cat-count-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    margin-left: auto;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), #06b6d4);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.35);
}
.cat-count-badge.show {
    display: inline-flex;
    animation: badgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badgePop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
/* шеврон встаёт вплотную к бейджу только когда бейдж показан */
#step-4 .extra-category-title .cat-count-badge.show + .category-chevron { margin-left: 8px; }

/* ---- 6. Пульс цены в нижней панели ---- */
#barTotal { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); display: inline-block; }
#barTotal.price-pulse { transform: scale(1.12); }

/* ---- 7. Trust-бейджи над кнопкой (шаг 5) ---- */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    margin-top: 16px;
}
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}
.trust-badge i { color: var(--primary); font-size: 0.9rem; }
@media (max-width: 480px) {
    .trust-badge { padding: 7px 11px; font-size: 0.78rem; }
}

/* ---- Уважение к prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
    .step-card.active-step > .step-title,
    .step-card.active-step > .service-search,
    .step-card.active-step .choice-card,
    .step-card.active-step > .cleaning-group,
    .step-card.active-step > .slider-row,
    .step-card.active-step > .slider-group,
    .step-card.active-step > p,
    .step-card.active-step > .extra-category,
    .step-card.active-step > .checkout-lead,
    .step-card.active-step .checkout-col,
    .step-card.active-step > .trust-badges { animation: none; }
    .cat-count-badge.show { animation: none; }
    #barTotal { transition: none; }
}

/* ---- Тонкий noise/grain-оверлей: убирает «плоскость» градиентов ---- */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { body::after { opacity: 0.025; } }

/* ---- Конфетти-канвас при успешной заявке ---- */
.confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10050;
    pointer-events: none;
}

/* ---- Cookie-банер ---- */
.cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%) translateY(20px);
    z-index: 10040;
    width: min(94vw, 720px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-banner.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 16px 20px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}
.cookie-banner-text {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 300px;
    font-size: 0.9rem;
    color: var(--text-main);
    line-height: 1.4;
}
.cookie-banner-text i { color: var(--primary); font-size: 1.3rem; flex-shrink: 0; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
    padding: 10px 18px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cookie-btn-decline { border: 1px solid rgba(148, 163, 184, 0.4); background: transparent; color: var(--text-main); }
.cookie-btn-decline:hover { background: rgba(148, 163, 184, 0.12); }
.cookie-btn-accept { border: none; background: linear-gradient(135deg, var(--primary), #0284c7); color: #fff; box-shadow: 0 8px 18px rgba(14, 165, 233, 0.3); }
.cookie-btn-accept:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(14, 165, 233, 0.4); }
@media (max-width: 560px) {
    .cookie-banner { bottom: 12px; }
    .cookie-banner-inner { padding: 14px 16px; }
    .cookie-banner-actions { width: 100%; }
    .cookie-btn { flex: 1; }
}

/* ---- Honeypot (ловушка для ботов): полностью скрыт от людей ---- */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* =========================================================
   Адаптивный контраст текста верхнего меню (стеклянный навбар):
   тёмный фон под меню -> белый текст, светлый фон -> тёмный.
   JS выставляет класс .nav-on-dark / .nav-on-light на .navbar.
   Только для десктопа: на мобиле меню — отдельная панель-оверлей.
   ========================================================= */
@media (min-width: 993px) {
    .navbar .nav-menu > a:not(.btn),
    .navbar .lang-current > span { transition: color .35s ease; }

    .navbar.nav-on-dark .nav-menu > a:not(.btn),
    .navbar.nav-on-dark .lang-current > span { color: #ffffff !important; }

    .navbar.nav-on-light .nav-menu > a:not(.btn),
    .navbar.nav-on-light .lang-current > span { color: #0f172a !important; }

    /* активный пункт всегда акцентный, в обоих режимах */
    .navbar.nav-on-dark .nav-menu > a.nav-link-active,
    .navbar.nav-on-light .nav-menu > a.nav-link-active { color: var(--primary) !important; }
}