@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Playfair+Display:wght@400;500;600;700&display=swap);
/* Локальные шрифты - теперь восстановлены! */

/* Montserrat - основной шрифт */
@font-face {
    font-family: 'Montserrat';
    src: url(/fonts/Montserrat-Light.a2ee2764f3e238372c1e.woff2) format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url(/fonts/Montserrat-Regular.06961cfc516ccad0003c.woff2) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url(/fonts/Montserrat-Medium.bcd43dff4d9963b1aa0e.woff2) format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url(/fonts/Montserrat-SemiBold.a8c25b2680603d2d21f2.woff2) format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Playfair Display - шрифт для заголовков */
@font-face {
    font-family: 'Playfair Display';
    src: url(/fonts/PlayfairDisplay-Regular.ac4533be98cdf2db83f9.woff2) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url(/fonts/PlayfairDisplay-Medium.07bcba9cbfc262fd0594.woff2) format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url(/fonts/PlayfairDisplay-SemiBold.18c444db39f2db4b0cd7.woff2) format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url(/fonts/PlayfairDisplay-Bold.d0b3f7b8d4f26d34e161.woff2) format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Google Fonts fallback - загружается если локальные недоступны */

/* ========================================
   CSS RESET & ОСНОВНЫЕ СТИЛИ
   Современный reset для фотографического сайта
   ======================================== */

/* Box model для всех элементов */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Сброс отступов и границ */
* {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Исключение для body - сохраняем возможность задать padding-top */
body {
    margin: 0;
    border: 0;
    padding: 0;
    min-width: 375px;
    /* padding остаётся управляемым через header.css */
}

/* Предотвращение перекрытия фиксированным хедером */
html {
    scroll-behavior: smooth;
}

main,
.main-content {
    position: relative;
    z-index: 1;
}

.header {
    z-index: 100;
}

/* HTML и Body настройки */
html {
    font-size: 16px;
    height: 100%;
    overflow-x: hidden; /* Предотвращение горизонтального скролла */
}

body {
    min-height: 100vh;
    line-height: 1.6;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden; /* Предотвращение горизонтального скролла */
    font-family: var(--font-primary);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    overflow-x: hidden;
}

/* Улучшенный рендеринг текста */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Списки */
ul, ol {
    list-style: none;
}

/* Ссылки */
a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/* Изображения */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Формы */
input, button, textarea, select {
    font: inherit;
    background: transparent;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
}

/* Таблицы */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Фокус для доступности */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ========================================
   CSS ПЕРЕМЕННЫЕ
   Современная дизайн-система для фотографа
   ======================================== */

:root {
    /* ========================================
       ЦВЕТОВАЯ ПАЛИТРА
       ======================================== */
    
    /* Основные цвета */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-400: #a3a3a3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --color-gray-700: #404040;
    --color-gray-800: #262626;
    --color-gray-900: #171717;
    
    /* Акцентные цвета */
    --color-accent: #2059bd;
    --color-accent-rgb: 201, 169, 110;
    --color-accent-light: #236ff3;
    --color-accent-dark: #133164;
    --color-accent-hover: #0b357e;
    
    /* Первичные цвета (алиасы для совместимости) */
    --color-primary: var(--color-accent);
    --color-primary-light: var(--color-accent-light);
    --color-primary-dark: var(--color-accent-dark);
    --color-primary-hover: var(--color-accent-hover);
    
    /* Семантические цвета */
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;
    
    /* Фоновые цвета */
    --color-bg-primary: var(--color-white);
    --color-bg-secondary: var(--color-gray-50);
    --color-bg-tertiary: var(--color-gray-100);
    --color-bg-dark: var(--color-gray-900);
    
    /* Цвета текста */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-text-tertiary: var(--color-gray-400);
    --color-text-inverse: var(--color-white);
    
    /* Цвета границ */
    --color-border: var(--color-gray-200);
    --color-border-light: var(--color-gray-200);
    --color-border-medium: var(--color-gray-300);
    --color-border-dark: var(--color-gray-400);
    
    /* Дополнительные цвета для совместимости */
    --color-background: var(--color-white);
    --color-background-alt: var(--color-gray-50);
    --color-background-light: var(--color-gray-50);
    --color-surface: var(--color-white);
    --color-surface-alt: var(--color-gray-50);
    --color-text: var(--color-text-primary);
    --color-text-light: var(--color-text-secondary);
    
    /* ========================================
       ТИПОГРАФИКА
       ======================================== */
    
    /* Шрифтовые семейства */
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    
    /* Размеры шрифтов */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */
    --font-size-4xl: 2.25rem;    /* 36px */
    --font-size-5xl: 3rem;       /* 48px */
    --font-size-6xl: 3.75rem;    /* 60px */
    --font-size-7xl: 4.5rem;     /* 72px */
    
    /* Дополнительные размеры шрифтов для совместимости */
    --font-size-md: var(--font-size-base);     /* 16px */
    
    /* Высота строк */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Веса шрифтов */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;
    
    /* ========================================
       РАССТОЯНИЯ И РАЗМЕРЫ
       ======================================== */
    
    /* Отступы */
    --spacing-0: 0;
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */
    --spacing-20: 5rem;     /* 80px */
    --spacing-24: 6rem;     /* 96px */
    --spacing-32: 8rem;     /* 128px */
    
    /* Радиусы скругления */
    --radius-none: 0;
    --radius-sm: 0.125rem;   /* 2px */
    --radius-base: 0.25rem;  /* 4px */
    --radius-md: 0.375rem;   /* 6px */
    --radius-lg: 0.5rem;     /* 8px */
    --radius-xl: 0.75rem;    /* 12px */
    --radius-2xl: 1rem;      /* 16px */
    --radius-3xl: 1.5rem;    /* 24px */
    --radius-full: 9999px;
    
    /* Дополнительные радиусы для совместимости */
    --border-radius-large: var(--radius-xl);   /* 12px */
    --border-radius-medium: var(--radius-lg);  /* 8px */

    /* Размеры контейнеров */
    --container-xs: 475px;
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    
    /* ========================================
       ТЕНИ И ЭФФЕКТЫ
       ======================================== */
    
    /* Классические тени */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    
    /* Многослойные glassmorphism тени */
    --shadow-glass-1: 
        0 1px 3px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.04),
        0 8px 16px rgba(0, 0, 0, 0.02);
    --shadow-glass-2: 
        0 2px 6px rgba(0, 0, 0, 0.12),
        0 8px 16px rgba(0, 0, 0, 0.06),
        0 16px 32px rgba(0, 0, 0, 0.04);
    --shadow-glass-3: 
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 12px 24px rgba(0, 0, 0, 0.08),
        0 24px 48px rgba(0, 0, 0, 0.06);
    --shadow-glass-4: 
        0 8px 24px rgba(0, 0, 0, 0.18),
        0 16px 32px rgba(0, 0, 0, 0.12),
        0 32px 64px rgba(0, 0, 0, 0.08);
    --shadow-glass-5: 
        0 16px 32px rgba(0, 0, 0, 0.2),
        0 24px 48px rgba(0, 0, 0, 0.15),
        0 48px 96px rgba(0, 0, 0, 0.1);
        
    /* Цветные тени с акцентом */
    --shadow-accent-light: 0 8px 32px rgba(var(--color-accent-rgb), 0.15);
    --shadow-accent-medium: 0 16px 48px rgba(var(--color-accent-rgb), 0.2);
    --shadow-accent-heavy: 0 24px 64px rgba(var(--color-accent-rgb), 0.25);
    
    /* Glassmorphism эффекты */
    --glass-bg-light: rgba(255, 255, 255, 0.85);
    --glass-bg-medium: rgba(255, 255, 255, 0.7);
    --glass-bg-dark: rgba(0, 0, 0, 0.3);
    --glass-bg-accent: rgba(var(--color-accent-rgb), 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-blur: blur(20px);
    --glass-blur-heavy: blur(40px);
    
    /* Переходы */
    --transition-micro: 100ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Z-индексы */
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-tooltip: 70;
    
    /* ========================================
       РАЗМЕРЫ КОМПОНЕНТОВ
       ======================================== */
    
    --header-height: 4rem;
    
    /* ========================================
       БРЕЙКПОИНТЫ
       ======================================== */
    
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ========================================
   ТИПОГРАФИКА
   Современная система шрифтов для фотографа
   ======================================== */

/* Заголовки */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: -0.025em;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
}

h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-black);
}

h2 {
    font-size: var(--font-size-3xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-base);
}

/* Адаптивные заголовки */
@media (min-width: 768px) {
    h1 {
        font-size: var(--font-size-6xl);
    }
    
    h2 {
        font-size: var(--font-size-4xl);
    }
    
    h3 {
        font-size: var(--font-size-3xl);
    }
}

/* Основной текст */
p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-4);
}

/* Лид-параграф */
.text-lead {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
}

/* Маленький текст */
.text-small {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* Крупный текст */
.text-large {
    font-size: var(--font-size-lg);
}

/* Стили начертания */
.text-light {
    font-weight: var(--font-weight-light);
}

.text-normal {
    font-weight: var(--font-weight-normal);
}

.text-medium {
    font-weight: var(--font-weight-medium);
}

.text-semibold {
    font-weight: var(--font-weight-semibold);
}

.text-bold {
    font-weight: var(--font-weight-bold);
}

/* Выравнивание текста */
.text-left {
    text-align: left;
}

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

.text-right {
    text-align: right;
}

/* Цвета текста */
.text-primary {
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-tertiary {
    color: var(--color-text-tertiary);
}

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

.text-white {
    color: var(--color-text-inverse);
}

/* Особые элементы */
blockquote {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-style: italic;
    padding: var(--spacing-6);
    border-left: 4px solid var(--color-accent);
    background-color: var(--color-bg-secondary);
    margin: var(--spacing-6) 0;
    border-radius: var(--radius-md);
}

/* Ссылки в тексте */
a {
    color: var(--color-accent);
    transition: var(--transition-fast);
}

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

/* Выделение текста */
mark, .highlight {
    background-color: var(--color-accent-light);
    color: var(--color-text-primary);
    padding: 0.125em 0.25em;
    border-radius: var(--radius-sm);
}

/* Код */
code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background-color: var(--color-bg-tertiary);
    padding: 0.125em 0.375em;
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
}

/* ========================================
   ПРЕМИАЛЬНАЯ СИСТЕМА КНОПОК
   Glassmorphism дизайн с микроанимациями
   ======================================== */

/* Система теней elevation */
:root {
    /* Elevation shadows */
    --elevation-1: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --elevation-2: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
    --elevation-3: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    --elevation-4: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
    --elevation-5: 0 25px 50px rgba(0,0,0,0.15), 0 12px 20px rgba(0,0,0,0.08);
    
    /* Glassmorphism base */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-blur: blur(10px);
    
    /* Modern transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Базовые стили современной кнопки */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 1;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none;
    border: 0;
    min-height: 2.75rem;
    white-space: nowrap;
    user-select: none;
    overflow: hidden;
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--elevation-1);
}

/* Микроанимации и hover эффекты */
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    z-index: 1;
}

.btn:hover::before {
    transform: translateX(100%);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--elevation-3);
}

.btn:active {
    transform: translateY(0);
    box-shadow: var(--elevation-1);
    transition: var(--transition-smooth);
}

.btn:focus {
    outline: none;
    box-shadow: var(--elevation-2), 0 0 0 3px rgba(var(--color-accent), 0.3);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

/* Варианты кнопок */
.btn--primary {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    color: var(--color-text-inverse);
    border: 1px solid var(--color-accent);
}

.btn--primary:hover {
    background: linear-gradient(135deg, var(--color-accent-hover) 0%, var(--color-accent-dark) 100%);
    color: var(--color-text-inverse);
    box-shadow: var(--elevation-4);
}

.btn--secondary {
    background: rgba(var(--color-text-primary), 0.05);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-dark);
    backdrop-filter: var(--glass-blur);
}

.btn--secondary:hover {
    background: rgba(var(--color-text-primary), 0.1);
    color: var(--color-text-primary);
    border-color: var(--color-text-primary);
}

.btn--outline {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    box-shadow: var(--elevation-1);
}

.btn--outline:hover {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
    box-shadow: var(--elevation-3);
}

.btn--outline:focus {
    box-shadow: var(--elevation-2), 0 0 0 3px rgba(var(--color-accent-rgb), 0.3);
}

/* Glassmorphism варианты */
.btn--glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--color-text-primary);
}

.btn--glass:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: var(--elevation-4);
}

.btn--ghost {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid transparent;
}

.btn--ghost:hover {
    background: rgba(var(--color-text-primary), 0.05);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

/* Размеры кнопок */
.btn--large {
    padding: 1rem 2rem;
    font-size: var(--font-size-lg);
    min-height: 3.25rem;
    border-radius: 16px;
}

.btn--medium {
    padding: 0.875rem 1.75rem;
    font-size: var(--font-size-base);
    min-height: 3rem;
    border-radius: 14px;
}

.btn--small {
    padding: 0.625rem 1.25rem;
    font-size: var(--font-size-sm);
    min-height: 2.5rem;
    border-radius: 10px;
}

/* Группа кнопок с современными эффектами */
.btn-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-group--vertical {
    flex-direction: column;
}

.btn-group--center {
    justify-content: center;
}

/* Floating Action Button */
.btn--fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 0;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    box-shadow: var(--elevation-4);
}

.btn--fab:hover {
    transform: scale(1.1);
    box-shadow: var(--elevation-5);
}

/* Magnetic button effect */
.btn--magnetic {
    transition: var(--transition-spring);
}

.btn--magnetic:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--elevation-5);
}

/* Ripple effect */
.btn--ripple {
    position: relative;
    overflow: hidden;
}

.btn--ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn--ripple:active::after {
    width: 300px;
    height: 300px;
}


.contPoloski {
    display: none;
    width: fit-content;
    height: fit-content;
    transition: transform 0.5s ease;
}

.poloski {
    width: 22px;
    height: 22px;
    fill: var(--color-accent-light);

}



.contPoloski.poloskiRotate {
    transform: rotate(90deg);
    
    
}

@media (width <= 850px) {
    .contPoloski {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.modalMenu {
    display: none;
    position: absolute;
    top: 90px;
    right: 45px;
    z-index: 2;
    width: fit-content;
    height: fit-content;
}

.modalMenu.active {
    display: flex;
}

.nav__list_menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    background-color: rgb(255,255,255, 0.6);
    border: solid 1px var(--color-accent-dark);
    border-radius: 10px;
    padding: 20px;
}



/* Специальные эффекты для flashback кнопок */
.flashback-card .btn {
    position: relative;
    z-index: 2;
}

.flashback-card .btn--primary {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
    box-shadow: 0 8px 24px rgba(var(--color-accent-rgb), 0.3);
}

.flashback-card .btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(var(--color-accent-rgb), 0.4);
}

.flashback-card .btn--outline {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
}

.flashback-card .btn--outline:hover {
    background: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-3px);
}


.card {
    position: relative;
    background: var(--glass-bg-light);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glass-2);
    overflow: hidden;
    transition: var(--transition-base);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    opacity: 0;
    transition: var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-glass-4);
    transform: translateY(-6px) scale(1.02);
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.4);
}

.card:hover::before {
    opacity: 1;
}

/* Части карточки */
.card__header {
    position: relative;
    padding: var(--spacing-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05)
    );
}

.card__body {
    padding: var(--spacing-6);
    backdrop-filter: blur(5px);
}

.card__footer {
    padding: var(--spacing-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.02)
    );
    backdrop-filter: blur(10px);
}

.card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: var(--transition-spring);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
}

.card:hover .card__image {
    transform: scale(1.08) rotate(1deg);
    filter: brightness(1.1) contrast(1.05);
}

/* Варианты карточек с glassmorphism */
.card--glass-accent {
    background: var(--glass-bg-accent);
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
    box-shadow: var(--shadow-accent-light);
}

.card--glass-accent:hover {
    box-shadow: var(--shadow-accent-medium);
    background: rgba(var(--color-accent-rgb), 0.15);
}

.card--glass-dark {
    background: var(--glass-bg-dark);
    color: var(--color-text-inverse);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card--glass-dark:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.card--elevated {
    box-shadow: var(--shadow-glass-3);
    transform: translateY(-2px);
}

.card--elevated:hover {
    box-shadow: var(--shadow-glass-5);
    transform: translateY(-8px) scale(1.03);
}

.card--floating {
    animation: cardFloat 6s ease-in-out infinite;
}

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

.card--glow {
    position: relative;
    overflow: visible;
}

.card--glow::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        45deg,
        rgba(var(--color-accent-rgb), 0.3),
        rgba(var(--color-accent-rgb), 0.1),
        rgba(var(--color-accent-rgb), 0.3)
    );
    border-radius: var(--radius-xl);
    z-index: -1;
    opacity: 0;
    transition: var(--transition-base);
    filter: blur(10px);
}

.card--glow:hover::after {
    opacity: 1;
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        filter: blur(10px);
    }
    50% {
        filter: blur(20px);
    }
}

.card--rounded-none {
    border-radius: 0;
}

.card--rounded-sm {
    border-radius: var(--radius-sm);
}

/* Карточка портфолио */
.card--portfolio {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
}

.card--portfolio .card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.card--portfolio:hover .card__image {
    transform: scale(1.1);
}

.card--portfolio .card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        transparent 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--spacing-6);
    opacity: 0;
    transition: var(--transition-base);
}

.card--portfolio:hover .card__overlay {
    opacity: 1;
}

.card--portfolio .card__title {
    color: var(--color-text-inverse);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
}

.card--portfolio .card__subtitle {
    color: var(--color-gray-300);
    font-size: var(--font-size-sm);
}

/* Карточка услуги */
.card--service {
    text-align: center;
    padding: var(--spacing-8);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.card--service::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.card--service:hover::before {
    transform: translateX(0);
}

.card--service:hover {
    border-color: var(--color-accent-light);
    background: var(--color-accent-light);
    transform: translateY(-8px);
}

.card--service .card__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--spacing-4);
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    font-size: var(--font-size-2xl);
    transition: all 0.3s ease;
}

.card--service:hover .card__icon {
    transform: scale(1.1) rotateY(360deg);
}

/* Карточка отзыва */
.card--testimonial {
    position: relative;
    padding: var(--spacing-8);
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    border-left: 4px solid var(--color-accent);
}

.card--testimonial::before {
    content: '"';
    position: absolute;
    top: var(--spacing-4);
    left: var(--spacing-4);
    font-size: 4rem;
    font-family: var(--font-display);
    color: var(--color-accent);
    opacity: 0.3;
    line-height: 1;
}

.card--testimonial .card__quote {
    font-style: italic;
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-6);
    position: relative;
    z-index: 1;
}

.card--testimonial .card__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.card--testimonial .card__avatar {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

/* Сетка карточек */
.cards-grid {
    display: grid;
    gap: var(--spacing-6);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cards-grid--2-cols {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.cards-grid--3-cols {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cards-grid--4-cols {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Адаптивность */
@media (min-width: 768px) {
    .cards-grid--2-cols {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cards-grid--3-cols {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .cards-grid--4-cols {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========================================
   ПРОДВИНУТЫЕ ЭФФЕКТЫ КАРТОЧЕК
   Современные hover-эффекты и анимации
   ======================================== */

/* Карточка с glass-эффектом */
.card--glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.card--glass:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Карточка с неоморфизмом */
.card--neumorphism {
    background: var(--color-bg-secondary);
    border: none;
    box-shadow: 
        12px 12px 24px rgba(163, 163, 163, 0.2),
        -12px -12px 24px rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.card--neumorphism:hover {
    box-shadow: 
        6px 6px 12px rgba(163, 163, 163, 0.2),
        -6px -6px 12px rgba(255, 255, 255, 0.8),
        inset 2px 2px 4px rgba(163, 163, 163, 0.1),
        inset -2px -2px 4px rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

/* Карточка с градиентной границей */
.card--gradient-border {
    position: relative;
    background: var(--color-bg-primary);
    border: none;
    padding: 2px;
    border-radius: var(--radius-xl);
}

.card--gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, var(--color-accent), var(--color-accent-hover), var(--color-accent));
    border-radius: inherit;
    z-index: -1;
}

.card--gradient-border .card__content {
    background: var(--color-bg-primary);
    border-radius: calc(var(--radius-xl) - 2px);
    height: 100%;
    position: relative;
    z-index: 1;
}

/* Карточка с флип-эффектом */
.card--flip {
    perspective: 1000px;
    height: 300px;
}

.card--flip .card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card--flip:hover .card__inner {
    transform: rotateY(180deg);
}

.card--flip .card__front,
.card--flip .card__back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: var(--spacing-6);
}

.card--flip .card__back {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    color: var(--color-text-inverse);
}

/* Карточка с магнитным эффектом */
.card--magnetic {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.card--magnetic:hover {
    transform: translateY(-12px) rotateX(5deg);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(201, 169, 110, 0.1);
}

/* Карточка с тилт-эффектом */
.card--tilt {
    transition: all 0.3s ease;
    transform-style: preserve-3d;
}

.card--tilt:hover {
    transform: perspective(1000px) rotateX(10deg) rotateY(-5deg) translateZ(20px);
    box-shadow: 
        20px 20px 40px rgba(0, 0, 0, 0.1),
        0 0 20px rgba(201, 169, 110, 0.2);
}

/* Карточка с волновой анимацией */
.card--wave {
    position: relative;
    overflow: hidden;
}

.card--wave::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.6s ease;
}

.card--wave:hover::before {
    left: 100%;
}

/* Сетка карточек с продвинутыми эффектами */
.cards-grid--masonry {
    columns: 3;
    column-gap: var(--spacing-6);
}

.cards-grid--masonry .card {
    break-inside: avoid;
    margin-bottom: var(--spacing-6);
}

@media (max-width: 768px) {
    .cards-grid--masonry {
        columns: 2;
    }
}

@media (max-width: 480px) {
    .cards-grid--masonry {
        columns: 1;
    }
}

/* Карточка с параллакс эффектом */
.card--parallax {
    position: relative;
    overflow: hidden;
    height: 400px;
}

.card--parallax .card__bg {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}

.card--parallax:hover .card__bg {
    transform: scale(1.1);
}

.card--parallax .card__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--spacing-6);
    background: linear-gradient(
        transparent 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.8) 100%
    );
    color: var(--color-text-inverse);
}

/* ========================================
   ПРЕМИАЛЬНЫЕ GLASSMORPHISM ФОРМЫ
   Современные стили с backdrop-filter эффектами
   ======================================== */

/* Группа полей формы */
.form-group {
    margin-bottom: var(--spacing-6);
    position: relative;
}

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

/* Лейблы с современным дизайном */
.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
    transition: var(--transition-fast);
}

.form-label--required::after {
    content: ' *';
    color: var(--color-error);
    font-weight: var(--font-weight-bold);
}

/* Glassmorphism поля ввода */
.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--spacing-4) var(--spacing-5);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background: var(--glass-bg-light);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    transition: var(--transition-base);
    appearance: none;
    position: relative;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-text-tertiary);
    transition: var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: rgba(var(--color-accent-rgb), 0.5);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 
        var(--shadow-glass-2),
        0 0 0 3px rgba(var(--color-accent-rgb), 0.1);
    transform: translateY(-1px);
}

.form-input:focus::placeholder,
.form-textarea:focus::placeholder {
    opacity: 0.7;
    transform: translateY(-2px);
}

/* Floating labels эффект */
.form-group--floating {
    position: relative;
}

.form-group--floating .form-label {
    position: absolute;
    top: 50%;
    left: var(--spacing-5);
    transform: translateY(-50%);
    font-size: var(--font-size-base);
    color: var(--color-text-tertiary);
    pointer-events: none;
    transition: var(--transition-base);
    background: linear-gradient(
        180deg,
        transparent 40%,
        var(--glass-bg-light) 40%,
        var(--glass-bg-light) 60%,
        transparent 60%
    );
    padding: 0 var(--spacing-2);
    z-index: 1;
}

.form-group--floating .form-input:focus + .form-label,
.form-group--floating .form-input:not(:placeholder-shown) + .form-label,
.form-group--floating .form-textarea:focus + .form-label,
.form-group--floating .form-textarea:not(:placeholder-shown) + .form-label {
    top: 0;
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    font-weight: var(--font-weight-medium);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-text-tertiary);
}

/* Текстовая область */
.form-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Состояния полей */
.form-input--error,
.form-textarea--error,
.form-select--error {
    border-color: var(--color-error);
}

.form-input--error:focus,
.form-textarea--error:focus,
.form-select--error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-input--success,
.form-textarea--success,
.form-select--success {
    border-color: var(--color-success);
}

.form-input--disabled,
.form-textarea--disabled,
.form-select--disabled {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-tertiary);
    cursor: not-allowed;
}

/* Размеры полей */
.form-input--small,
.form-textarea--small,
.form-select--small {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
}

.form-input--large,
.form-textarea--large,
.form-select--large {
    padding: var(--spacing-4) var(--spacing-5);
    font-size: var(--font-size-lg);
}

/* Группа с иконкой */
.form-input-group {
    position: relative;
}

.form-input-group .form-input {
    padding-left: var(--spacing-12);
}

.form-input-group .form-icon {
    position: absolute;
    left: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-lg);
    pointer-events: none;
}

.form-input-group .form-input:focus + .form-icon {
    color: var(--color-accent);
}

/* Чекбоксы и радиокнопки */
.form-checkbox,
.form-radio {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-border-dark);
    background-color: var(--color-bg-primary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.form-checkbox {
    border-radius: var(--radius-base);
}

.form-radio {
    border-radius: var(--radius-full);
}

.form-checkbox:checked,
.form-radio:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27m13.854 3.646-7.5 7.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6 10.293l7.146-7.147a.5.5 0 0 1 .708.708z%27/%3e%3c/svg%3e");
    background-size: 0.75rem;
    background-position: center;
    background-repeat: no-repeat;
}

.form-radio:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3ccircle cx=%278%27 cy=%278%27 r=%273%27/%3e%3c/svg%3e");
}

.form-checkbox:focus,
.form-radio:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* Лейбл для чекбокса/радио */
.form-check-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

/* Сообщения об ошибках */
.form-error {
    display: block;
    margin-top: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-error);
}

.form-help {
    display: block;
    margin-top: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* Форма контактов */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-8);
    background-color: var(--color-bg-primary);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
}

.contact-form .form-row {
    display: grid;
    gap: var(--spacing-4);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .contact-form .form-row--2-cols {
        grid-template-columns: 1fr 1fr;
    }
}

/* Анимация загрузки формы */
.form--loading {
    position: relative;
    pointer-events: none;
}

.form--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

/* Успешная отправка */
.form--success {
    border: 2px solid var(--color-success);
    background-color: rgba(34, 197, 94, 0.05);
}

.form-success-message {
    padding: var(--spacing-4);
    background-color: var(--color-success);
    color: var(--color-text-inverse);
    border-radius: var(--radius-lg);
    text-align: center;
    font-weight: var(--font-weight-medium);
}

/* ========================================
   ПРЕМИАЛЬНАЯ НАВИГАЦИЯ
   Glassmorphism дизайн с backdrop-filter
   ======================================== */

/* Переменные для glassmorphism навигации */
:root {
    --nav-bg: rgba(255, 255, 255, 0.95);
    --nav-bg-scrolled: rgba(255, 255, 255, 0.98);
    --nav-border: rgba(255, 255, 255, 0.2);
    --nav-blur: blur(20px);
    --nav-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Основная навигация с glassmorphism */
.nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: var(--nav-bg);
    backdrop-filter: var(--nav-blur);
    border-bottom: 1px solid var(--nav-border);
    transition: var(--nav-transition);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0.75rem 0;
}

/* Состояние навигации при скролле */
.nav--scrolled {
    background: var(--nav-bg-scrolled);
    backdrop-filter: blur(30px) saturate(180%);
    box-shadow: var(--elevation-2);
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.nav__list {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
}

.nav__link {
    position: relative;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: var(--nav-transition);
    backdrop-filter: blur(5px);
}

/* Современные hover эффекты */
.nav__link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--color-accent-rgb), 0.1);
    border-radius: 8px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__link:hover::before {
    opacity: 1;
    transform: scale(1);
}

.nav__link:hover {
    color: var(--color-accent);
    transform: translateY(-1px);
}

/* Убираем подчеркивание - оставляем только hover эффекты фона */
.nav__link:hover {
    color: var(--color-accent);
    transform: translateY(-1px);
}

/* Активная ссылка */
.nav__link--active {
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.1);
    backdrop-filter: blur(10px);
    font-weight: 600;
    position: relative;
}

/* Мобильное меню */
.mobile-nav {
    display: none;
}

.mobile-nav__toggle {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-2);
}

.mobile-nav__line {
    width: 24px;
    height: 2px;
    background-color: var(--color-text-primary);
    transition: var(--transition-fast);
    transform-origin: center;
}

.mobile-nav__toggle--active .mobile-nav__line:nth-child(1) {
    transform: rotate(45deg) translateY(6px);
}

.mobile-nav__toggle--active .mobile-nav__line:nth-child(2) {
    opacity: 0;
}

.mobile-nav__toggle--active .mobile-nav__line:nth-child(3) {
    transform: rotate(-45deg) translateY(-6px);
}

.mobile-nav__menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg-primary);
    background: #ffffff; /* Явный белый фон как fallback */
    backdrop-filter: blur(10px);
    z-index: var(--z-modal);
    padding: var(--spacing-20) var(--spacing-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    transform: translateX(-100%);
    transition: var(--transition-base);
}

.mobile-nav__menu--active {
    transform: translateX(0);
}

.mobile-nav__link {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}

.mobile-nav__link:hover,
.mobile-nav__link--active {
    color: var(--color-accent);
}

/* Dropdown меню */
.nav__dropdown {
    position: relative;
}

.nav__dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: var(--spacing-2);
    border-top: 4px solid currentColor;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    transition: var(--transition-fast);
}

.nav__dropdown:hover .nav__dropdown-toggle::after {
    transform: rotate(180deg);
}

.nav__dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition-fast);
    z-index: var(--z-dropdown);
}

.nav__dropdown:hover .nav__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__dropdown-link {
    display: block;
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--color-text-primary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    font-size: var(--font-size-sm);
}

.nav__dropdown-link:hover {
    background-color: var(--color-accent-light);
    color: var(--color-accent);
}

/* ========================================
   ПРОДВИНУТЫЕ ЭФФЕКТЫ НАВИГАЦИИ
   Современные hover-эффекты и анимации
   ======================================== */

/* Навигация с подчеркиванием */
.nav--underline .nav__link {
    position: relative;
    padding-bottom: var(--spacing-2);
}

.nav--underline .nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    transition: width 0.3s ease;
}

.nav--underline .nav__link:hover::after,
.nav--underline .nav__link--active::after {
    width: 100%;
}

/* Навигация с морфинг эффектом */
.nav--morph .nav__link {
    position: relative;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-lg);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav--morph .nav__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-accent-light);
    border-radius: inherit;
    transform: scale(0);
    transition: transform 0.3s ease;
    z-index: -1;
}

.nav--morph .nav__link:hover::before {
    transform: scale(1);
}

.nav--morph .nav__link:hover {
    color: var(--color-accent);
    transform: translateY(-2px);
}

/* Навигация с неоновым эффектом */
.nav--neon .nav__link {
    position: relative;
    color: var(--color-text-primary);
    transition: all 0.3s ease;
}

.nav--neon .nav__link:hover {
    color: var(--color-accent);
    text-shadow: 
        0 0 5px var(--color-accent),
        0 0 10px var(--color-accent),
        0 0 15px var(--color-accent);
}

/* Мега-меню с анимациями */
.nav__mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-primary);
    border-top: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-8);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: var(--z-dropdown);
}

.nav__dropdown:hover .nav__mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__mega-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-8);
    max-width: var(--container-xl);
    margin: 0 auto;
}

.nav__mega-section h3 {
    color: var(--color-accent);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-4);
}

.nav__mega-link {
    display: block;
    padding: var(--spacing-2);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.nav__mega-link:hover {
    background: var(--color-accent-light);
    color: var(--color-accent);
    transform: translateX(5px);
}

/* Индикатор активной страницы */
.nav__indicator {
    position: absolute;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    border-radius: var(--radius-full);
    transition: all 0.3s ease;
    opacity: 0;
}

.nav__list:hover .nav__indicator {
    opacity: 1;
}

/* Хлебные крошки */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4) 0;
    font-size: var(--font-size-sm);
}

.breadcrumb__item {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb__item:hover {
    color: var(--color-accent);
}

.breadcrumb__item--current {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.breadcrumb__separator {
    color: var(--color-text-tertiary);
    user-select: none;
}

/* Табы навигации */
.nav__tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border-light);
    position: relative;
}

.nav__tab {
    padding: var(--spacing-4) var(--spacing-6);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
}

.nav__tab:hover {
    color: var(--color-accent);
    background: var(--color-accent-light);
}

.nav__tab--active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.nav__tab-slider {
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: var(--color-accent);
    transition: all 0.3s ease;
    border-radius: var(--radius-full);
}

/* Сайдбар навигация */
.nav--sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-6);
}

.nav--sidebar .nav__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.nav--sidebar .nav__link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0;
    background: var(--color-accent);
    border-radius: var(--radius-full);
    transition: height 0.3s ease;
}

.nav--sidebar .nav__link:hover,
.nav--sidebar .nav__link--active {
    background: var(--color-accent-light);
    color: var(--color-accent);
    transform: translateX(8px);
}

.nav--sidebar .nav__link:hover::before,
.nav--sidebar .nav__link--active::before {
    height: 20px;
}

/* Навигация с прогресс-баром */
.nav--progress {
    position: relative;
}

.nav--progress::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    width: var(--progress, 0%);
    transition: width 0.3s ease;
    border-radius: var(--radius-full);
}

/* Анимация появления мобильного меню */
@keyframes mobileMenuSlide {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.mobile-nav__menu--animated {
    animation: mobileMenuSlide 0.3s ease-out;
}

/* Стильная социальная навигация */
.nav--social {
    display: flex;
    gap: var(--spacing-4);
}

.nav--social .nav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.nav--social .nav__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-accent);
    transform: scale(0);
    transition: transform 0.3s ease;
    border-radius: inherit;
}

.nav--social .nav__link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    color: var(--color-text-inverse);
}

.nav--social .nav__link:hover::before {
    transform: scale(1);
}

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

/* Десктопная версия */
@media (min-width: 769px) {
    .nav {
        display: flex;
    }
    
    .mobile-nav {
        display: none;
    }
    
    /* Исправляем подчеркивание активного элемента */
    .nav__link--active::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: var(--spacing-3);
        right: var(--spacing-3);
        width: calc(100% - var(--spacing-6));
        height: 2px;
        background-color: var(--color-accent);
        border-radius: var(--radius-full);
        transform: none;
    }
}

/* Планшеты и мобильные устройства */
@media (max-width: 768px) {
    .nav {
        display: none;
    }
    
    .mobile-nav {
        display: block;
    }
}

/* ========================================
   ДЕСКТОПНАЯ НАВИГАЦИЯ - УЛУЧШЕНИЯ
   ======================================== */

/* Медиа-запрос для десктопа - без подчеркивания */
@media (min-width: 768px) {
    .nav__link {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }
    
    /* Плавная анимация для активной ссылки */
    .nav__link--active {
        color: var(--color-accent);
    }
}



/* ========================================
   ПРЕМИАЛЬНЫЙ GLASSMORPHISM ЛАЙТБОКС
   Современный лайтбокс с backdrop-filter эффектами
   ======================================== */

:root {
    --lightbox-bg: rgba(0, 0, 0, 0.9);
    --lightbox-blur: blur(20px);
    --lightbox-glass-bg: rgba(255, 255, 255, 0.1);
    --lightbox-glass-border: rgba(255, 255, 255, 0.2);
    --lightbox-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: var(--lightbox-transition);
    background: var(--lightbox-bg);
    backdrop-filter: var(--lightbox-blur);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-lightbox--active {
    opacity: 1;
    visibility: visible;
}

.modern-lightbox__overlay {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.modern-lightbox__container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    max-width: 90vw;
    max-height: 90vh;
}

.modern-lightbox__content {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--elevation-5);
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-lightbox--active .modern-lightbox__content {
    transform: scale(1);
}

.modern-lightbox__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Кнопки управления */
.modern-lightbox__close,
.modern-lightbox__prev,
.modern-lightbox__next,
.modern-lightbox__zoom,
.modern-lightbox__share {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.modern-lightbox__close:hover,
.modern-lightbox__prev:hover,
.modern-lightbox__next:hover,
.modern-lightbox__zoom:hover,
.modern-lightbox__share:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.modern-lightbox__close {
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 48px;
    height: 48px;
    z-index: 10001;
}

.modern-lightbox__prev,
.modern-lightbox__next {
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    z-index: 10001;
}

.modern-lightbox__prev {
    left: var(--spacing-lg);
}

.modern-lightbox__next {
    right: var(--spacing-lg);
}

.modern-lightbox__zoom,
.modern-lightbox__share {
    width: 40px;
    height: 40px;
}

/* Контент */
.modern-lightbox__content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modern-lightbox__image-container {
    position: relative;
    max-width: 100%;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-lightbox__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    cursor: zoom-in;
}

.modern-lightbox__image:hover {
    transform: scale(1.02);
}

/* Загрузка */
.modern-lightbox__loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    align-items: center;
    justify-content: center;
}

.modern-lightbox__spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top: 3px solid var(--color-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Информация */
.modern-lightbox__info {
    margin-top: var(--spacing-lg);
    text-align: center;
    color: white;
    max-width: 600px;
}

.modern-lightbox__title {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: white;
}

.modern-lightbox__description {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-md);
}

.modern-lightbox__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-md);
}

.modern-lightbox__counter {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.modern-lightbox__actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Миниатюры */
.modern-lightbox__thumbnails {
    position: absolute;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    max-width: 90vw;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.modern-lightbox__thumbnails::-webkit-scrollbar {
    display: none;
}

.modern-lightbox__thumbnails-container {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
}

.modern-lightbox__thumbnail {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    opacity: 0.6;
}

.modern-lightbox__thumbnail:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.modern-lightbox__thumbnail--active {
    border-color: var(--color-accent);
    opacity: 1;
    transform: scale(1.1);
}

.modern-lightbox__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Уведомления */
.modern-lightbox__toast {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10002;
}

.modern-lightbox__toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Адаптивность */
@media (max-width: 768px) {
    .modern-lightbox__container {
        padding: var(--spacing-md);
    }
    
    .modern-lightbox__close {
        top: var(--spacing-md);
        right: var(--spacing-md);
        width: 44px;
        height: 44px;
    }
    
    .modern-lightbox__prev,
    .modern-lightbox__next {
        width: 48px;
        height: 48px;
    }
    
    .modern-lightbox__prev {
        left: var(--spacing-md);
    }
    
    .modern-lightbox__next {
        right: var(--spacing-md);
    }
    
    .modern-lightbox__content {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .modern-lightbox__image-container {
        max-height: 70vh;
    }
    
    .modern-lightbox__title {
        font-size: 1.25rem;
    }
    
    .modern-lightbox__description {
        font-size: 0.9rem;
    }
    
    .modern-lightbox__thumbnails {
        bottom: var(--spacing-md);
        max-width: 95vw;
    }
    
    .modern-lightbox__thumbnail {
        width: 50px;
        height: 50px;
    }
    
    .modern-lightbox__meta {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: center;
    }
}

@media (max-width: 480px) {
    .modern-lightbox__prev,
    .modern-lightbox__next {
        display: none;
    }
    
    .modern-lightbox__image-container {
        max-height: 60vh;
    }
    
    .modern-lightbox__thumbnails {
        display: none;
    }
}

/* ========================================
   GLASSMORPHISM МОДАЛЬНЫЕ ОКНА
   Современные модальные окна с backdrop-filter
   ======================================== */

/* Базовое модальное окно */
.glass-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
}

.glass-modal--active {
    opacity: 1;
    visibility: visible;
}

/* Подложка модального окна */
.glass-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: var(--glass-blur);
    cursor: pointer;
    animation: backdropFadeIn 0.3s ease-out;
}

@keyframes backdropFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: var(--glass-blur);
    }
}

/* Контейнер модального окна */
.glass-modal__container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    max-width: 500px;
    background: var(--glass-bg-light);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-glass-5);
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: var(--transition-spring);
}

.glass-modal--active .glass-modal__container {
    transform: scale(1) translateY(0);
}

/* Заголовок модального окна */
.glass-modal__header {
    padding: var(--spacing-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05)
    );
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.glass-modal__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.glass-modal__close {
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
}

.glass-modal__close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
    transform: scale(1.1);
}

/* Контент модального окна */
.glass-modal__body {
    padding: var(--spacing-6);
    backdrop-filter: blur(5px);
}

.glass-modal__footer {
    padding: var(--spacing-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.02)
    );
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end;
}


/* Анимации появления */
.glass-modal--slide-up .glass-modal__container {
    transform: translateY(100px);
}

.glass-modal--slide-up.glass-modal--active .glass-modal__container {
    transform: translateY(0);
}

.glass-modal--zoom .glass-modal__container {
    transform: scale(0.5);
}

.glass-modal--zoom.glass-modal--active .glass-modal__container {
    transform: scale(1);
}

.glass-modal--rotate .glass-modal__container {
    transform: scale(0.8) rotate(-5deg);
}

.glass-modal--rotate.glass-modal--active .glass-modal__container {
    transform: scale(1) rotate(0deg);
}

/* Адаптивность */
@media (max-width: 768px) {
    .glass-modal__container {
        max-width: 95vw;
        margin: var(--spacing-4);
    }
    
    .glass-modal__header,
    .glass-modal__body,
    .glass-modal__footer {
        padding: var(--spacing-4);
    }
    
    .glass-modal__title {
        font-size: var(--font-size-lg);
    }
}

/* Утилитарные классы для контента */
.glass-modal .form-group {
    margin-bottom: var(--spacing-4);
}

.glass-modal .btn {
    backdrop-filter: blur(10px);
}

/* =================================================================
   ENHANCED FORMS
   Современные интерактивные формы с плавающими лейблами
   ================================================================= */

/* Основные стили форм */
.form-group,
.input-wrapper {
  position: relative;
  margin-bottom: 1.5rem;
}

/* Базовые стили для полей ввода */
.form-group input,
.form-group textarea,
.form-group select,
.input-wrapper input,
.input-wrapper textarea,
.input-wrapper select {
  width: 100%;
  padding: 1rem 1rem 0.5rem 1rem;
  border: 2px solid var(--color-border, #e1e5e9);
  border-radius: 8px;
  background: var(--color-background-light, #ffffff);
  font-size: 1rem;
  font-family: var(--font-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

/* Плавающие лейблы */
.floating-label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  color: var(--color-text-muted, #6b7280);
  font-size: 1rem;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--color-background-light, #ffffff);
  padding: 0 0.25rem;
  z-index: 1;
}

.floating-label.active {
  top: -0.5rem;
  left: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-primary, #3b82f6);
  font-weight: 500;
}

/* Состояния фокуса */
.form-group.focused input,
.form-group.focused textarea,
.form-group.focused select,
.input-wrapper.focused input,
.input-wrapper.focused textarea,
.input-wrapper.focused select {
  border-color: var(--color-primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Состояние валидности */
.form-group.valid input,
.form-group.valid textarea,
.input-wrapper.valid input,
.input-wrapper.valid textarea {
  border-color: var(--color-success, #10b981);
}

.form-group.valid .floating-label,
.input-wrapper.valid .floating-label {
  color: var(--color-success, #10b981);
}

/* Состояние ошибки */
.form-group.invalid input,
.form-group.invalid textarea,
.input-wrapper.invalid input,
.input-wrapper.invalid textarea {
  border-color: var(--color-error, #ef4444);
}

.form-group.invalid .floating-label,
.input-wrapper.invalid .floating-label {
  color: var(--color-error, #ef4444);
}

/* Сообщения об ошибках */
.error-message {
  position: absolute;
  bottom: -1.25rem;
  left: 0;
  color: var(--color-error, #ef4444);
  font-size: 0.75rem;
  font-weight: 500;
  animation: shake 0.3s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* Сообщения об успехе */
.success-message {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border-radius: 12px;
  margin-top: 1rem;
  animation: slideInUp 0.4s ease-out;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.success-icon {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

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

/* Textarea специальные стили */
.form-group textarea,
.input-wrapper textarea {
  min-height: 120px;
  resize: vertical;
  padding-top: 1.5rem;
}

.form-group textarea ~ .floating-label,
.input-wrapper textarea ~ .floating-label {
  top: 1.5rem;
}

/* Кнопки отправки */
.submit-button,
button[type="submit"],
input[type="submit"] {
  position: relative;
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--color-primary, #3b82f6), var(--color-primary-dark, #2563eb));
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.submit-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.submit-button:active,
button[type="submit"]:active,
input[type="submit"]:active {
  transform: translateY(0);
}

/* Состояние загрузки */
.submit-button.loading,
button[type="submit"].loading,
input[type="submit"].loading {
  color: transparent;
  pointer-events: none;
}

.submit-button.loading::after,
button[type="submit"].loading::after,
input[type="submit"].loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Стили для чекбоксов и радиокнопок */
.checkbox-wrapper,
.radio-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"],
.radio-wrapper input[type="radio"] {
  width: auto;
  margin: 0;
  padding: 0;
}

/* Кастомные чекбоксы */
.custom-checkbox,
.custom-radio {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border, #e1e5e9);
  border-radius: 4px;
  background: var(--color-background-light, #ffffff);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.custom-radio {
  border-radius: 50%;
}

.checkbox-wrapper input[type="checkbox"]:checked + .custom-checkbox,
.radio-wrapper input[type="radio"]:checked + .custom-radio {
  background: var(--color-primary, #3b82f6);
  border-color: var(--color-primary, #3b82f6);
}

.custom-checkbox::after {
  content: '✓';
  position: absolute;
  top: -2px;
  left: 2px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.checkbox-wrapper input[type="checkbox"]:checked + .custom-checkbox::after {
  opacity: 1;
}

.custom-radio::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.radio-wrapper input[type="radio"]:checked + .custom-radio::after {
  opacity: 1;
}

/* Скрываем оригинальные чекбоксы и радиокнопки */
.checkbox-wrapper input[type="checkbox"],
.radio-wrapper input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
  .form-group,
  .input-wrapper {
    margin-bottom: 1.25rem;
  }
  
  .form-group input,
  .form-group textarea,
  .input-wrapper input,
  .input-wrapper textarea {
    padding: 0.875rem;
    font-size: 16px; /* Предотвращает зум на iOS */
  }
  
  .floating-label {
    font-size: 0.875rem;
  }
  
  .floating-label.active {
    font-size: 0.75rem;
  }
}

/**
 * Enhanced Gallery Styles - Улучшенные стили галереи
 * Стили для уведомлений, лоадеров и анимаций
 */

/* Уведомления */
.gallery-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    max-width: 400px;
    z-index: 10000;
    animation: slideInRight 0.3s ease-out;
    font-family: var(--font-primary, 'Montserrat', sans-serif);
}

.gallery-notification__content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.gallery-notification--success .gallery-notification__content {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.9));
    color: white;
}

.gallery-notification--error .gallery-notification__content {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9));
    color: white;
}

.gallery-notification--info .gallery-notification__content {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9));
    color: white;
}

.gallery-notification__icon {
    font-size: 18px;
    flex-shrink: 0;
}

.gallery-notification__message {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
}

.gallery-notification__close {
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.gallery-notification__close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Анимации для уведомлений */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Улучшенные стили для галереи */
.photo-gallery__item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.photo-gallery__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.photo-gallery__image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.photo-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
}

.photo-gallery__item.loading .photo-gallery__image {
    filter: blur(2px);
    opacity: 0.7;
}

.photo-gallery__item.loaded .photo-gallery__image {
    filter: none;
    opacity: 1;
}

.photo-gallery__item.error .photo-gallery__image {
    opacity: 0.3;
    filter: grayscale(100%);
}

/* Лоадер для изображений */
.photo-gallery__loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    animation: pulse 1.5s ease-in-out infinite;
    z-index: 2;
}

.photo-gallery__item.loaded .photo-gallery__loader,
.photo-gallery__item.error .photo-gallery__loader {
    display: none;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Placeholder для изображений */
.photo-gallery__item.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
    z-index: 1;
}

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

/* Ошибка загрузки */
.photo-gallery__item.error::after {
    content: '⚠️ Ошибка загрузки';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    z-index: 3;
}

/* Подписи к изображениям */
.photo-gallery__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
    padding: 20px 16px 16px;
    font-size: 14px;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.3s ease;
}

.photo-gallery__item:hover .photo-gallery__caption {
    opacity: 1;
    transform: translateY(0);
}

/* Прогресс загрузки галереи */
.gallery-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 9999;
}

.gallery-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent, #d4af37), var(--color-accent-light, #e6c555));
    width: 0%;
    transition: width 0.3s ease;
}

/* Адаптивность для уведомлений */
@media (max-width: 768px) {
    .gallery-notification {
        left: 20px;
        right: 20px;
        max-width: none;
    }
    
    .gallery-notification__content {
        padding: 12px 16px;
    }
    
    .gallery-notification__message {
        font-size: 13px;
    }
}

/* Темная тема */
@media (prefers-color-scheme: dark) {
    .photo-gallery__item.loading::before {
        background: linear-gradient(90deg, #2a2a2a 25%, #1a1a1a 50%, #2a2a2a 75%);
        background-size: 200% 100%;
    }
    
    .gallery-notification--info .gallery-notification__content {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.95));
    }
}

/* Высокие DPI экраны */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .photo-gallery__loader {
        font-size: 20px;
    }
}

/* Анимации появления */
.photo-gallery__item {
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.photo-gallery__item:nth-child(1) { animation-delay: 0.1s; }
.photo-gallery__item:nth-child(2) { animation-delay: 0.2s; }
.photo-gallery__item:nth-child(3) { animation-delay: 0.3s; }
.photo-gallery__item:nth-child(4) { animation-delay: 0.4s; }
.photo-gallery__item:nth-child(5) { animation-delay: 0.5s; }
.photo-gallery__item:nth-child(6) { animation-delay: 0.6s; }

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

/* Доступность */
.photo-gallery__item:focus {
    outline: 2px solid var(--color-accent, #d4af37);
    outline-offset: 2px;
}

.gallery-notification__close:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 1px;
}

/* Предпочтения пользователя - уменьшенная анимация */
@media (prefers-reduced-motion: reduce) {
    .photo-gallery__item,
    .gallery-notification,
    .photo-gallery__image,
    .photo-gallery__caption {
        animation: none;
        transition: none;
    }
    
    .photo-gallery__item:hover {
        transform: none;
    }
}

/**
 * Universal Gallery Styles
 * Стили для универсальной системы галерей
 */

/* Лайтбокс */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox--active {
    display: flex !important;
    opacity: 1;
    align-items: center;
    justify-content: center;
}

.lightbox__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.lightbox__container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    padding: 100px 80px;
    box-sizing: border-box;
}

.lightbox__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}

.lightbox__image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox__image {
    max-width: 100%;
    max-height: calc(100vh - 200px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.lightbox__counter {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    z-index: 10;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.lightbox__close {
    top: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    font-size: 24px;
    font-weight: bold;
}

.lightbox__prev,
.lightbox__next {
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    font-size: 24px;
    font-weight: bold;
}

.lightbox__prev {
    left: 30px;
}

.lightbox__next {
    right: 30px;
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Галерея */
.photo-gallery__item {
    cursor: pointer;
    transition: transform 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
}

.photo-gallery__item:hover {
    transform: scale(1.02);
}

.photo-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Состояния загрузки */
.gallery-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    font-size: 18px;
    color: #666;
}

.gallery-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    font-size: 18px;
    color: #d32f2f;
    background: #ffebee;
    border-radius: 8px;
    margin: 20px 0;
}

/* Адаптивные стили */
@media (max-width: 768px) {
    .lightbox__container {
        padding: 80px 20px;
    }

    .lightbox__image {
        max-height: calc(100vh - 160px);
    }

    .lightbox__close {
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .lightbox__prev,
    .lightbox__next {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .lightbox__prev {
        left: 20px;
    }

    .lightbox__next {
        right: 20px;
    }

    .lightbox__counter {
        bottom: -40px;
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* Анимации */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.delay-100 {
    animation-delay: 0.1s;
}

/* =================================================================
   PROGRESSIVE IMAGE LOADING
   Стили для прогрессивной загрузки и отображения изображений
   ================================================================= */

/* Базовые стили для прогрессивных изображений */
.progressive-image {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--color-background-light, #f8fafc);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Состояние с placeholder */
.progressive-image.placeholder-loaded {
  filter: blur(5px);
  transform: scale(1.02);
}

/* Состояние загрузки */
.progressive-image.loading {
  position: relative;
  overflow: hidden;
}

.progressive-image.loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: shimmer 1.5s infinite;
  z-index: 1;
}

.progressive-image.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid var(--color-primary, #3b82f6);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 2;
}

/* Состояние успешной загрузки */
.progressive-image.loaded {
  filter: none;
  transform: scale(1);
}

.progressive-image.loaded.placeholder-loaded {
  animation: fadeInSharp 0.6s ease-out;
}

/* Состояние ошибки */
.progressive-image.error {
  background-color: #f3f4f6;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.progressive-image.error::before,
.progressive-image.error::after {
  display: none;
}

/* Адаптивные изображения */
.responsive-image {
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Стили для изображений портфолио */
.portfolio-image.progressive-image {
  border-radius: 12px;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* Стили для изображений слайдера */
.slider-image.progressive-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Стили для аватаров */
.avatar.progressive-image {
  border-radius: 50%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* Hero изображения */
.hero-image.progressive-image {
  width: 100%;
  height: 60vh;
  min-height: 400px;
  object-fit: cover;
}

/* Thumbnail изображения */
.thumbnail.progressive-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

/* Анимации */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

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

@keyframes fadeInSharp {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: scale(1.02);
  }
  to {
    opacity: 1;
    filter: none;
    transform: scale(1);
  }
}

/* Lazy loading с Intersection Observer */
.lazy-image:not(.loaded) {
  opacity: 0;
  transform: translateY(20px);
}

.lazy-image.loaded {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Picture элементы */
picture {
  display: block;
  width: 100%;
}

picture img {
  width: 100%;
  height: auto;
  display: block;
}

/* Стили для галереи */
.gallery-image.progressive-image {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-image.progressive-image:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Оптимизация для retina дисплеев */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .progressive-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
  }
}

/* Поддержка WebP форматов обрабатывается в JavaScript */

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .progressive-image,
  .lazy-image {
    transition: none;
    animation: none;
  }
  
  .progressive-image.loading::before {
    animation: none;
  }
  
  .progressive-image.loading::after {
    animation: none;
  }
}

/* Состояния подключения */
@media (max-width: 768px) {
  .progressive-image.loading::after {
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border-width: 2px;
  }
}

/* Поддержка темной темы */
@media (prefers-color-scheme: dark) {
  .progressive-image {
    background-color: var(--color-background-dark, #1f2937);
  }
  
  .progressive-image.error {
    background-color: #374151;
    color: #d1d5db;
  }
  
  .progressive-image.loading::before {
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 100%
    );
  }
}

/* Специальные эффекты для изображений */
.image-glow.progressive-image.loaded {
  box-shadow: 
    0 0 20px rgba(59, 130, 246, 0.3),
    0 0 40px rgba(59, 130, 246, 0.1);
}

.image-zoom.progressive-image {
  overflow: hidden;
}

.image-zoom.progressive-image img {
  transition: transform 0.3s ease;
}

.image-zoom.progressive-image:hover img {
  transform: scale(1.1);
}

/* Skeleton loading для изображений */
.image-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-background-light, #f8fafc) 25%,
    var(--color-background-lighter, #f1f5f9) 50%,
    var(--color-background-light, #f8fafc) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

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

/* Стили для юридических модальных окон */
.legal-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease-out;
}

.legal-modal.show {
  display: block;
}

.legal-modal__content {
  position: relative;
  background-color: var(--color-background, #ffffff);
  margin: 2% auto;
  padding: 0;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.3s ease-out;
}

.legal-modal__header {
  background: linear-gradient(135deg, var(--color-accent, #c9a96e), var(--color-accent-dark, #a08749));
  color: white;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.legal-modal__header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.legal-modal__close {
  background: none;
  border: none;
  color: white;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.legal-modal__close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.legal-modal__body {
  padding: 30px;
  max-height: calc(90vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
  line-height: 1.6;
  color: var(--color-text, #333);
  font-size: 14px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.legal-modal__body h3 {
  color: var(--color-accent, #c9a96e);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 600;
  font-size: 1.1em;
}

.legal-modal__body h3:first-child {
  margin-top: 0;
}

.legal-modal__body p {
  margin-bottom: 1em;
  text-align: justify;
}

.legal-modal__body ul {
  margin: 0.5em 0 1em 1.2em;
  padding-left: 0;
}

.legal-modal__body li {
  margin-bottom: 0.3em;
}

.legal-modal__body strong {
  font-weight: 600;
  color: var(--color-text-dark, #222);
}

/* Анимации */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* Адаптивность */
@media (max-width: 768px) {
  .legal-modal__content {
    width: 95%;
    margin: 5% auto;
    max-height: 85vh;
  }
  
  .legal-modal__header {
    padding: 15px 20px;
  }
  
  .legal-modal__header h2 {
    font-size: 1.3rem;
  }
  
  .legal-modal__body {
    padding: 20px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .legal-modal__content {
    width: 98%;
    margin: 2% auto;
  }
  
  .legal-modal__body {
    padding: 15px;
  }
}
/* ========================================
   PHOTO OVERLAY COMPONENT
   Компонент для наложения на фотографии с эффектом увеличения
   ======================================== */

.photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-base, 0.3s ease);
    backdrop-filter: blur(2px);
    z-index: 2;
}

.photo-overlay__icon {
    color: var(--color-text-inverse, white);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
}

.photo-overlay__icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}

.photo-overlay__icon span {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
}

/* Состояния photo-lightbox */
.photo-lightbox {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-base, 0.3s ease);
}

.photo-lightbox:hover .photo-overlay {
    opacity: 1;
}

.photo-lightbox:hover .photo-lightbox__image,
.photo-lightbox:hover .about-home__image,
.photo-lightbox:hover .about-story__photo-img {
    transform: scale(1.05);
}

/* Базовые стили для изображений в lightbox */
.photo-lightbox__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-base, 0.3s ease);
}

/* ========================================
   АДАПТИВНЫЕ СТИЛИ
   ======================================== */

@media (max-width: 768px) {
    .photo-overlay__icon svg {
        width: 28px;
        height: 28px;
    }
    
    .photo-overlay__icon span {
        font-size: var(--font-size-xs, 0.75rem);
    }
}

@media (max-width: 480px) {
    .photo-overlay__icon svg {
        width: 24px;
        height: 24px;
    }
    
    .photo-overlay__icon span {
        font-size: 0.7rem;
    }
    
    .photo-overlay__icon {
        gap: var(--spacing-1, 0.25rem);
    }
}

/* Состояние для touch устройств */
@media (hover: none) {
    .photo-overlay {
        opacity: 0.8;
    }
    
    .photo-lightbox:active .photo-overlay {
        opacity: 1;
    }
}

/* ========================================
   ХЕДЕР
   Современный адаптивный заголовок сайта
   ======================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--z-fixed);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border-light);
    transition: var(--transition-fast);
    box-sizing: border-box;
}

.header--scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-md);
}

.header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-6);
    max-width: var(--container-xl);
    margin: 0 auto;
    min-height: 4rem;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Логотип */
.header__logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    text-decoration: none;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    transition: var(--transition-fast);
}

.header__logo:hover {
    color: var(--color-accent);
}

/* Навигация в хедере */
.header__nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
}

.header__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

/* CTA кнопка в хедере */
.header__cta {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: var(--transition-fast);
}

.header__cta:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-1px);
}

/* Социальные ссылки */
.header__social {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.header__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
}

.header__social-link:hover {
    color: var(--color-accent);
    background-color: var(--color-accent-light);
}

/* Отступ для контента под фиксированным хедером */
html {
    scroll-padding-top: 4rem;
}

body {
    padding-top: 4rem;
}

.main-content {
    padding-top: 0;
}

/* Слайдер без дополнительного отступа */
.slider {
    margin-top: -4rem;
    padding-top: 4rem;
}

/* ========================================
   МОБИЛЬНОЕ МЕНЮ И АДАПТИВНОСТЬ
   ======================================== */

/* Бургер-кнопка */
.header__burger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    z-index: 1001;
    box-sizing: border-box;
}
.header__burger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text-primary);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.header__burger--active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

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

.header__burger--active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Мобильное меню */
.header__mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-bg-primary);
    background-color: #ffffff; /* Явный белый фон как fallback */
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding-top: 5rem;
    overflow-y: auto;
}

.header__mobile-menu--active {
    transform: translateX(0);
}

.header__mobile-nav {
    flex: 1;
    padding: 2rem;
}

.header__mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.header__mobile-nav-item {
    border-bottom: 1px solid var(--color-border-light);
}

.header__mobile-nav-link {
    display: block;
    padding: 1rem 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.header__mobile-nav-link:hover,
.header__mobile-nav-link.nav__link--active {
    color: var(--color-accent);
}

/* Кнопки действий в мобильном меню */
.header__mobile-actions {
    padding: 2rem;
    border-top: 1px solid var(--color-border-light);
    margin-top: auto;
}

.header__mobile-actions .btn {
    width: 100%;
    justify-content: center;
}

.header__mobile-actions {
    padding: 2rem;
    border-top: 1px solid var(--color-border-light);
}

/* Блокировка прокрутки при открытом меню */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

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

/* Десктопная версия и планшеты (включая iPad Pro) */
@media (min-width: 769px) {
    .header .header__burger {
        display: none;
    }
    
    .header .header__mobile-menu {
        display: none;
    }
}

/* iPad Pro и больше */
@media (min-width: 1024px) {
    .header .header__burger {
        display: none !important;
    }
    
    .header .header__mobile-menu {
        display: none !important;
    }
}

/* Планшеты и мобильные устройства (исключая iPad Pro) */
@media (max-width: 850px) {
    .header__nav {
        display: none;
    }
    
    .header__actions {
        display: none;
    }
    
    .header__burger {
        display: flex;
        flex-shrink: 0;
        margin-left: auto;
    }
    
    .header__container {
        padding: 1rem;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .header__logo {
        flex-shrink: 0;
        margin-right: 0;
    }
    
    .slider {
        margin-top: -3.5rem;
        padding-top: 3.5rem;
    }
}





/* Маленькие мобильные экраны */
@media (max-width: 480px) {
    .header__container {
        padding: 0.75rem 1rem;
        max-width: 100%;
    }
    
    .header__burger {
        width: 22px;
        height: 16px;
    }
    
    .header__logo {
        font-size: var(--font-size-lg);
    }
    
    .slider {
        margin-top: -3rem;
        padding-top: 3rem;
    }
}

/* Темная версия хедера */
.header--dark {
    background-color: rgba(0, 0, 0, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.header--dark .header__logo,
.header--dark .nav__link {
    color: var(--color-text-inverse);
}

.header--dark .nav__link:hover {
    color: var(--color-accent);
}

.header--dark .header__social-link {
    color: rgba(255, 255, 255, 0.7);
}

.header--dark .header__social-link:hover {
    color: var(--color-accent);
}

/* Анимации появления */
@keyframes header-slide-down {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.header--animated {
    animation: header-slide-down 0.5s ease-out;
}

/* ========================================
   ФУТЕР
   Современный футер с контактами и социальными сетями
   ======================================== */

.footer {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    color: var(--color-text-inverse);
    padding: var(--spacing-20) 0 var(--spacing-8);
    margin-top: var(--spacing-32);
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(201, 169, 110, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(201, 169, 110, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.footer__container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--spacing-6);
    position: relative;
    z-index: 1;
}

.footer__content {
    display: grid;
    gap: var(--spacing-12);
    grid-template-columns: 1fr;
    margin-bottom: var(--spacing-12);
}

@media (min-width: 768px) {
    .footer__content {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

/* Основная информация */
.footer__main {
    max-width: 400px;
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    text-decoration: none;
    color: var(--color-text-inverse);
    transition: var(--transition-fast);
}

.footer__logo:hover {
    transform: translateY(-2px);
}

.footer__logo-text {
    font-size: var(--font-size-2xl);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    background: linear-gradient(135deg, var(--color-text-inverse) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer__description {
    color: rgba(255, 255, 255, 0.7);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-8);
    font-size: var(--font-size-lg);
}

/* Социальные сети */
.footer__social {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.footer__social-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.footer__social-link:hover::before {
    left: 100%;
}

.footer__social-link:hover {
    background: var(--color-accent);
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 15px 30px rgba(201, 169, 110, 0.4);
    border-color: var(--color-accent);
}

/* Навигация в футере */
.footer__nav h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-6);
    color: var(--color-text-inverse);
    position: relative;
}

.footer__nav h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--color-accent);
    border-radius: var(--radius-full);
}

.footer__nav-list {
    list-style: none;
}

.footer__nav-list li {
    margin-bottom: var(--spacing-3);
}

.footer__nav-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition-fast);
    font-size: var(--font-size-base);
    display: inline-block;
}

.footer__nav-link:hover {
    color: var(--color-accent);
    transform: translateX(5px);
}

/* Контактная информация */
.footer__contact {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    transition: all 0.3s ease;
}

.footer__contact:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.footer__contact h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-6);
    color: var(--color-text-inverse);
    position: relative;
}

.footer__contact h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--color-accent);
    border-radius: var(--radius-full);
}

.footer__contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    color: rgba(255, 255, 255, 0.7);
}

.footer__contact-item svg {
    flex-shrink: 0;
    color: var(--color-accent);
}

.footer__contact-link,
.footer__contact-text {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

.footer__contact-link:hover {
    color: var(--color-accent);
}

/* Нижняя часть футера */
.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--spacing-8);
    margin-top: var(--spacing-8);
}

.footer__bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.footer__copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-sm);
}

.footer__bottom-links {
    display: flex;
    gap: var(--spacing-6);
}

.footer__bottom-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
}

.footer__bottom-link:hover {
    color: var(--color-accent);
}

/* Подписка на новости */
.footer__newsletter {
    background-color: rgba(255, 255, 255, 0.05);
    padding: var(--spacing-8);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-12);
    text-align: center;
}

.footer__newsletter h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-2);
    color: var(--color-text-inverse);
}

.footer__newsletter p {
    color: var(--color-gray-300);
    margin-bottom: var(--spacing-6);
}

.footer__newsletter-form {
    display: flex;
    gap: var(--spacing-3);
    max-width: 400px;
    margin: 0 auto;
}

.footer__newsletter-input {
    flex: 1;
    padding: var(--spacing-3) var(--spacing-4);
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    color: var(--color-text-inverse);
    font-size: var(--font-size-base);
}

.footer__newsletter-input::placeholder {
    color: var(--color-gray-400);
}

.footer__newsletter-button {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
    padding: var(--spacing-3) var(--spacing-6);
    border: none;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-fast);
}

.footer__newsletter-button:hover {
    background-color: var(--color-accent-hover);
}

/* Адаптивность */
@media (max-width: 640px) {
    .footer {
        padding: var(--spacing-16) 0 var(--spacing-6);
    }
    
    .footer__content {
        gap: var(--spacing-8);
    }
    
    .footer__newsletter-form {
        flex-direction: column;
    }
    
    .footer__bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .footer__bottom-links {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .footer__content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-8);
    }
    
    .footer__main {
        max-width: none;
    }
    
    .footer__nav h3,
    .footer__contact h3 {
        margin-top: var(--spacing-6);
    }
    
    .footer__bottom-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer__bottom-links {
        flex-direction: column;
        gap: var(--spacing-2);
    }
}

/* ========================================
   СЕТКА И КОНТЕЙНЕРЫ
   Современная система layout'а
   ======================================== */

/* Основные контейнеры */
.container {
    width: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--spacing-6);
}

.container--sm {
    max-width: var(--container-sm);
}

.container--md {
    max-width: var(--container-md);
}

.container--lg {
    max-width: var(--container-lg);
}

.container--xl {
    max-width: var(--container-xl);
}

.container--2xl {
    max-width: var(--container-2xl);
}

.container--full {
    max-width: none;
}

.container--narrow {
    max-width: 800px;
}

/* Секции */
.section {
    padding: var(--spacing-20) 0;
}

.section--small {
    padding: var(--spacing-12) 0;
}

.section--large {
    padding: var(--spacing-32) 0;
}

.section--hero {
    padding: var(--spacing-32) 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* Сетки */
.grid {
    display: grid;
    gap: var(--spacing-6);
}

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

.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid--5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid--6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Адаптивные сетки */
.grid--responsive-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid--responsive-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid--responsive-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Сетка портфолио */
.grid--portfolio {
    display: grid;
    gap: var(--spacing-4);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (min-width: 640px) {
    .grid--portfolio {
        gap: var(--spacing-6);
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid--portfolio {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Flexbox утилиты */
.flex {
    display: flex;
}

.flex--column {
    flex-direction: column;
}

.flex--row {
    flex-direction: row;
}

.flex--wrap {
    flex-wrap: wrap;
}

.flex--nowrap {
    flex-wrap: nowrap;
}

/* Выравнивание по главной оси */
.justify-start {
    justify-content: flex-start;
}

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

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* Выравнивание по перекрестной оси */
.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.items-stretch {
    align-items: stretch;
}

.items-baseline {
    align-items: baseline;
}

/* Gap утилиты */
.gap-0 {
    gap: 0;
}

.gap-1 {
    gap: var(--spacing-1);
}

.gap-2 {
    gap: var(--spacing-2);
}

.gap-3 {
    gap: var(--spacing-3);
}

.gap-4 {
    gap: var(--spacing-4);
}

.gap-5 {
    gap: var(--spacing-5);
}

.gap-6 {
    gap: var(--spacing-6);
}

.gap-8 {
    gap: var(--spacing-8);
}

.gap-10 {
    gap: var(--spacing-10);
}

.gap-12 {
    gap: var(--spacing-12);
}

/* Особые layout'ы */
.layout-split {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 768px) {
    .layout-split {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-12);
    }
}

.layout-sidebar {
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .layout-sidebar {
        grid-template-columns: 1fr 300px;
        gap: var(--spacing-12);
    }
}

.layout-sidebar--reverse {
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .layout-sidebar--reverse {
        grid-template-columns: 300px 1fr;
    }
}

/* Стеки */
.stack {
    display: flex;
    flex-direction: column;
}

.stack > * + * {
    margin-top: var(--spacing-4);
}

.stack--small > * + * {
    margin-top: var(--spacing-2);
}

.stack--large > * + * {
    margin-top: var(--spacing-6);
}

/* Центрирование */
.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Aspect ratio */
.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-photo {
    aspect-ratio: 4 / 3;
}

.aspect-portrait {
    aspect-ratio: 3 / 4;
}

/* Адаптивность сеток */
@media (max-width: 768px) {
    .grid--2,
    .grid--3,
    .grid--4,
    .grid--5,
    .grid--6 {
        grid-template-columns: 1fr;
    }
    
    .grid--2.grid--mobile-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   ГЛАВНАЯ СТРАНИЦА
   Стили для домашней страницы фотографа
   ======================================== */

/* ========================================
   FLASHBACK PROMO SECTION - СОВРЕМЕННЫЙ ДИЗАЙН
   Секция обучения фотографии в современном стиле
   ======================================== */

/* Основная секция */
.flashback-promo {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    position: relative;
    z-index: 1;
    padding: 120px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    overflow: hidden;
}

.flashback-promo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(201, 169, 110, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(201, 169, 110, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Декоративная линия снизу для перехода к services */
.flashback-promo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(201, 169, 110, 0.1) 10%,
        rgba(201, 169, 110, 0.4) 25%,
        rgba(201, 169, 110, 0.7) 50%,
        rgba(201, 169, 110, 0.4) 75%,
        rgba(201, 169, 110, 0.1) 90%,
        transparent 100%);
    box-shadow: 0 1px 4px rgba(201, 169, 110, 0.3);
}

.flashback-promo * {
    visibility: visible;
    opacity: 1;
}

.flashback-promo .container {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    position: relative;
    z-index: 2;
}

/* Заголовок секции */
.flashback-promo__header {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    text-align: center;
    margin-bottom: 64px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.flashback-promo .section-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 24px;
    position: relative;
}

.flashback-promo .section-title::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
    border-radius: 2px;
}

.flashback-promo .section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    max-width: 500px;
    margin: 0 auto;
}

/* Современная карточка */
.flashback-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 0;
    box-shadow: 
        0 20px 40px -12px rgba(0, 0, 0, 0.08),
        0 4px 12px -4px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 0;
    align-items: stretch;
}

.flashback-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.06), transparent);
    transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.flashback-card:hover::before {
    left: 100%;
}

.flashback-card:hover {
    transform: translateY(-12px);
    box-shadow: 
        0 32px 64px -12px rgba(0, 0, 0, 0.12),
        0 8px 24px -4px rgba(0, 0, 0, 0.08);
}

/* Блок изображения */
.flashback-card__image {
    position: relative;
    border-radius: 24px 0 0 24px;
    overflow: hidden;
    height: 100%;
    min-height: 500px;
}

.flashback-card__badge {
    position: absolute;
    top: 24px;
    right: 24px;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
    color: var(--color-white);
    padding: 12px 20px;
    border-radius: 50px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(201, 169, 110, 0.3);
    backdrop-filter: blur(8px);
}

.flashback-card__badge .badge-icon {
    font-size: 18px;
}

.flashback-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.flashback-card:hover .flashback-card__image img {
    transform: scale(1.08);
}

/* Контент карточки */
.flashback-card__content {
    padding: 48px 40px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flashback-card__header {
    margin-bottom: 32px;
}

.flashback-card__title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 12px;
    line-height: 1.2;
}

.flashback-card__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-accent);
    font-weight: 500;
    line-height: 1.4;
}

.flashback-card__description {
    margin-bottom: 32px;
}

.flashback-card__description p {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-base);
}

/* Особенности курса */
.flashback-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.flashback-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(201, 169, 110, 0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(201, 169, 110, 0.12);
}

.flashback-feature:hover {
    background: rgba(201, 169, 110, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 169, 110, 0.15);
}

.flashback-feature__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(201, 169, 110, 0.1);
    border-radius: 10px;
    color: var(--color-accent);
    transition: all 0.3s ease;
}

.flashback-feature__icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

.flashback-feature:hover .flashback-feature__icon {
    background: rgba(201, 169, 110, 0.2);
    transform: scale(1.05);
}

.flashback-feature__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    font-weight: 500;
    line-height: 1.3;
}

/* Статистика */
.flashback-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.flashback-stat {
    text-align: center;
    padding: 20px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
    border-radius: 16px;
    border: 1px solid rgba(201, 169, 110, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.flashback-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
}

.flashback-stat:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7));
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(201, 169, 110, 0.2);
}

.flashback-stat__number {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-accent);
    display: block;
    margin-bottom: 8px;
    line-height: 1;
}

.flashback-stat__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Кнопки действий */
.flashback-card__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.flashback-card__actions .btn {
    padding: 16px 32px;
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.flashback-card__actions .btn--primary {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
    color: var(--color-white);
    border: none;
    box-shadow: 0 4px 12px rgba(201, 169, 110, 0.3);
}

.flashback-card__actions .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(201, 169, 110, 0.4);
}

.flashback-card__actions .btn--outline {
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}

.flashback-card__actions .btn--outline:hover {
    background: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 169, 110, 0.3);
}

/* Адаптивность */
@media (max-width: 1024px) {
    .flashback-card {
        grid-template-columns: 1fr;
        max-width: 600px;
    }
    
    .flashback-card__image {
        border-radius: 24px 24px 0 0;
        min-height: 300px;
    }
    
    .flashback-card__content {
        padding: 32px 24px;
    }
}

@media (max-width: 768px) {
    .flashback-promo {
        padding: 80px 0;
    }
    
    .flashback-promo__header {
        margin-bottom: 48px;
    }
    
    .flashback-features {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .flashback-stats {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .flashback-card__content {
        padding: 24px 20px;
    }
    
    .flashback-card__actions {
        flex-direction: column;
    }
    
    .flashback-card__actions .btn {
        width: 100%;
    }
}

/* Hero секция */
.hero {
    position: relative;
    min-height: calc(100vh - 4rem);
    margin-top: -4rem;
    padding-top: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
}

.hero__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.7) 100%
    );
    z-index: 1;
}

.hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: 0 var(--spacing-6);
}

.hero__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-accent);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-4);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hero__title {
    font-family: var(--font-display);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-6);
    background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero__description {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero__actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Статистика */
.hero__stats {
    margin-top: var(--spacing-16);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero__stat {
    text-align: center;
}

.hero__stat-number {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    display: block;
}

.hero__stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--spacing-1);
}

/* Секция услуг */
.services {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 50%, var(--color-bg-primary) 100%);
    position: relative;
    overflow: hidden;
}

.services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(201, 169, 110, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(201, 169, 110, 0.05) 0%, transparent 50%);
    z-index: 0;
}

.services__container {
    position: relative;
    z-index: 1;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--spacing-6);
}

.services__header {
    text-align: center;
    margin-bottom: var(--spacing-16);
}

.services__title {
    font-size: var(--font-size-4xl);
    font-family: var(--font-display);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
    position: relative;
}

.services__title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    border-radius: var(--radius-full);
}

.services__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: var(--line-height-relaxed);
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-16);
}


/* CTA секция услуг */
.services__cta {
    text-align: center;
    padding: var(--spacing-12);
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    border-radius: var(--radius-2xl);
    color: var(--color-text-inverse);
    position: relative;
    overflow: hidden;
}

.services__cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

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

.services__cta-content {
    position: relative;
    z-index: 1;
}

.services__cta-title {
    font-size: var(--font-size-3xl);
    font-family: var(--font-display);
    margin-bottom: var(--spacing-4);
    color: var(--color-text-inverse);
}

.services__cta-description {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

.services__cta-actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ========================================
   СЛАЙДЕР
   Современный адаптивный слайдер
   ======================================== */

.slider {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.slider__container {
    position: relative;
    width: 100%;
    max-width: 1232px;
    margin-inline: auto;
    height: 100%;
}

.slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 15vh;
}

.slider__slide--active {
    opacity: 1;
}

.slider__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.slider__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider__content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: var(--color-text-inverse);
    padding: var(--spacing-6);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    max-width: 600px;
    margin: 0 var(--spacing-4);
}

.slider__title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-4);
    color: var(--color-text-inverse);
}

.slider__description {
    font-size: var(--font-size-lg);
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.9);
}

/* Overlay для лучшей читаемости */
.slider__slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.1) 100%
    );
    z-index: 2;
}

/* Элементы управления слайдером */
.slider__controls {
    position: absolute;
    bottom: var(--spacing-8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--spacing-3);
    z-index: 4;
}

.slider__dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: var(--transition-fast);
}

.slider__dot--active {
    background: var(--color-accent);
    transform: scale(1.2);
}

/* Стрелки навигации */
.slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    cursor: pointer;
    z-index: 4;
    color: var(--color-text-inverse);
    font-size: var(--font-size-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.slider__arrow:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.slider__arrow--prev {
    left: var(--spacing-6);
}

.slider__arrow--next {
    right: var(--spacing-6);
}

/* Контейнер для стрелок */
.slider__arrows {
    position: relative;
    inset: 0 0;
    transform: translateY(-100%);
    margin-inline: auto;
    width: 100%;
    max-width: 1232px;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

.slider__arrows .slider__arrow {
    pointer-events: auto;
}

/* Индикаторы слайдера */
.slider__indicators {
    position: absolute;
    bottom: var(--spacing-8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--spacing-3);
    z-index: 4;
}

.slider__indicator {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: var(--transition-fast);
    border: 2px solid transparent;
}

.slider__indicator:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.1);
}

.slider__indicator--active {
    background: var(--color-accent);
    transform: scale(1.2);
    border-color: rgba(255, 255, 255, 0.3);
}



/* Адаптивные стили для слайдера */
@media (max-width: 768px) {
    .slider__arrow {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-lg);
    }
    
    .slider__arrow--prev {
        left: var(--spacing-4);
    }
    
    .slider__arrow--next {
        right: var(--spacing-4);
    }
    
    .slider__content {
        padding: var(--spacing-4);
        margin: 0 var(--spacing-3);
    }
    
    .slider__title {
        font-size: var(--font-size-2xl);
    }
    
    .slider__description {
        font-size: var(--font-size-base);
    }
    
    .slider__indicators {
        bottom: var(--spacing-6);
    }
    
    .slider__indicator {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .slider__arrow {
        width: 36px;
        height: 36px;
        font-size: var(--font-size-base);
    }
    
    .slider__arrow--prev {
        left: var(--spacing-3);
    }
    
    .slider__arrow--next {
        right: var(--spacing-3);
    }
    
    .slider__content {
        padding: var(--spacing-3);
        margin: 0 var(--spacing-2);
    }
    
    .slider__title {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-2);
    }
    
    .slider__description {
        font-size: var(--font-size-sm);
    }
    
    .slider__indicators {
        bottom: var(--spacing-4);
        gap: var(--spacing-2);
    }
    
    .slider__indicator {
        width: 8px;
        height: 8px;
    }
}

/* ========================================
   ABOUT HOME SECTION
   Специфичные стили для секции "О фотографе"
   ======================================== */

.about-home {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    position: relative;
    overflow: hidden;
}

/* Декоративная линия сверху */
.about-home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(201, 169, 110, 0.2) 20%,
        rgba(201, 169, 110, 0.5) 40%,
        rgba(201, 169, 110, 0.7) 50%,
        rgba(201, 169, 110, 0.5) 60%,
        rgba(201, 169, 110, 0.2) 80%,
        transparent 100%);
    box-shadow: 0 1px 4px rgba(201, 169, 110, 0.3);
}

/* Декоративная линия снизу */
.about-home::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.3), transparent);
}

.about-home .container {
    position: relative;
    z-index: 1;
}

/* Дополнительный фоновый узор */
.about-home {
    background-image: 
        radial-gradient(circle at 80% 20%, rgba(201, 169, 110, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(201, 169, 110, 0.05) 0%, transparent 50%);
}

.about-home__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16);
    align-items: center;
}

.about-home__photo {
    position: relative;
}

.about-home__photo-wrapper {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

.about-home__photo-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.about-home__image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.about-home__photo-wrapper:hover .about-home__image {
    transform: scale(1.05);
}

.about-home__info {
    padding: var(--spacing-8);
}

.about-home__title {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
}

.about-home__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-accent);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.about-home__text {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-8);
}

.about-home__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

.about-home__stat {
    text-align: center;
    padding: var(--spacing-4);
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(201, 169, 110, 0.2);
    transition: all 0.3s ease;
}

.about-home__stat:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.about-home__stat-number {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    display: block;
    margin-bottom: var(--spacing-1);
}

.about-home__stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--spacing-1);
}

.about-home__action {
    margin-top: var(--spacing-6);
}

/* Старые стили flashback удалены - используются новые современные стили выше */

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .about-home__content {
        grid-template-columns: 1fr;
        gap: var(--spacing-12);
        text-align: center;
    }
    
    .about-home__stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .about-home__title {
        font-size: var(--font-size-3xl);
    }
    
    .about-home__text {
        font-size: var(--font-size-base);
    }
}

/* Flashback промо-секция */
.flashback-promo {
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
    position: relative;
    overflow: hidden;
}

/* Гарантированная видимость для flashback-promo */
.flashback-promo {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.flashback-promo .flashback-promo__header {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.flashback-promo .flashback-card {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.flashback-promo .section-title,
.flashback-promo .section-subtitle {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* Высокоспецифичные селекторы для flashback-promo */
section.flashback-promo.section.section--light {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    padding: var(--spacing-20) 0;
}

section.flashback-promo.section.section--light .flashback-promo__header {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.flashback-promo.section.section--light .flashback-card {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* Высокоспецифичные селекторы для flashback-promo - максимальная видимость */
html body section.flashback-promo.section.section--light {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    padding: var(--spacing-20) 0;
    background: var(--color-bg-secondary);
    position: relative;
    z-index: 1;
    min-height: 100px;
}

html body section.flashback-promo.section.section--light .container {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    position: relative;
    z-index: 1;
}

html body section.flashback-promo.section.section--light .flashback-promo__header {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    text-align: center;
    margin-bottom: var(--spacing-12);
    position: relative;
    z-index: 1;
}

html body section.flashback-promo.section.section--light .flashback-card {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    position: relative;
    z-index: 1;
}

html body section.flashback-promo.section.section--light .section-title,
html body section.flashback-promo.section.section--light .section-subtitle {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    position: relative;
    z-index: 1;
}

/* Анимированные элементы в flashback-promo */
html body section.flashback-promo.section.section--light [class*="animate-"],
html body section.flashback-promo.section.section--light [class*="delay-"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    animation: none;
    transition: none;
    position: relative;
    z-index: 1;
}

/* Fallback для всех внутренних элементов */
html body section.flashback-promo.section.section--light * {
    visibility: visible;
    opacity: 1;
    position: relative;
    z-index: 1;
}

/* Принудительная видимость для всех дочерних элементов */
html body section.flashback-promo.section.section--light .flashback-card__image,
html body section.flashback-promo.section.section--light .flashback-card__content,
html body section.flashback-promo.section.section--light .flashback-card__header,
html body section.flashback-promo.section.section--light .flashback-card__title,
html body section.flashback-promo.section.section--light .flashback-card__subtitle,
html body section.flashback-promo.section.section--light .flashback-card__description,
html body section.flashback-promo.section.section--light .flashback-features,
html body section.flashback-promo.section.section--light .flashback-stats,
html body section.flashback-promo.section.section--light .flashback-card__actions {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    position: relative;
    z-index: 1;
}

/* Специальные стили для элементов с flex-раскладкой */
html body section.flashback-promo.section.section--light .flashback-features {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none;
}

html body section.flashback-promo.section.section--light .flashback-stats {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none;
}

html body section.flashback-promo.section.section--light .flashback-card__actions {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none;
}

html body section.flashback-promo.section.section--light .flashback-feature {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none;
}

html body section.flashback-promo.section.section--light .flashback-stat {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* Переопределение для псевдоэлементов */
html body section.flashback-promo.section.section--light::before,
html body section.flashback-promo.section.section--light::after {
    display: block;
    visibility: visible;
    opacity: 1;
}

html body section.flashback-promo.section.section--light .flashback-card::before,
html body section.flashback-promo.section.section--light .flashback-card::after {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Дополнительные стили для всех элементов flashback-card */
.flashback-card {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    position: relative;
    z-index: 1;
}

.flashback-card * {
    visibility: visible;
    opacity: 1;
    position: relative;
    z-index: 1;
}

.flashback-card__image {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.flashback-card__content {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.flashback-card__header {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.flashback-card__title {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.flashback-card__subtitle {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.flashback-card__description {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.flashback-features {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.flashback-stats {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.flashback-card__actions {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* Секция подхода к работе */
.approach__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-6);
    margin-top: var(--spacing-12);
}

.approach-card {
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.approach-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.approach-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.approach-card:hover::before {
    transform: scaleX(1);
}

.approach-card__icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-accent-light) 0%, rgba(var(--color-accent-rgb), 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
    color: var(--color-accent);
    flex-shrink: 0;
}

.approach-card__icon svg {
    width: 28px;
    height: 28px;
}

.approach-card__content {
    flex: 1;
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.approach-card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-3);
    line-height: 1.4;
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.approach-card__description {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-base);
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.approach-card__description strong {
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
}

.approach-card__guarantee {
    margin-top: var(--spacing-4);
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.guarantee-badge-mini {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.3);
}

/* Призыв к действию в секции подхода */
.approach__cta {
    text-align: center;
    margin-top: var(--spacing-16);
    padding: var(--spacing-8);
    background: linear-gradient(135deg, var(--color-accent-light) 0%, rgba(var(--color-accent-rgb), 0.1) 100%);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: all 0.3s ease-in-out;
}

.approach__cta:hover {
    transform: scale(1.03);
}

.approach__cta-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
}

.approach__cta-text {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-6);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Стабильность видимости для всех элементов approach */
.approach__grid {
    display: grid;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.approach-card {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

.approach-card * {
    visibility: visible;
    opacity: 1;
}

/* Стабильность видимости для services секции */
section.services {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    padding: var(--spacing-20) 0;
}

section.services .services__container {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.services .services__header {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    text-align: center;
    margin-bottom: var(--spacing-12);
}

section.services .services__title {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.services .services__subtitle {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.services .fade-in {
    opacity: 1;
    visibility: visible;
    transform: none;
    animation: none;
    transition: none;
}

section.services .slide-up {
    opacity: 1;
    visibility: visible;
    transform: none;
    animation: none;
    transition: none;
}

/* Принудительная видимость для всех дочерних элементов services */
section.services * {
    visibility: visible;
    opacity: 1;
}

/* Стабильность видимости для testimonials секции */
section.testimonials {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    padding: var(--spacing-20) 0;
    background: var(--color-bg-secondary);
}

section.testimonials .testimonials__container {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.testimonials .testimonials__header {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    text-align: center;
    margin-bottom: var(--spacing-12);
}

section.testimonials .testimonials__title,
section.testimonials .testimonials__subtitle {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.testimonials .testimonials__slider {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.testimonials .testimonial-card {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    position: relative;
}

section.testimonials .testimonial-card__content {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.testimonials .testimonial-card__author {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.testimonials .testimonial-card__rating {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.testimonials .testimonial-card__text {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.testimonials .testimonial-card__avatar {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.testimonials .testimonial-card__info {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.testimonials .testimonial-card__name,
section.testimonials .testimonial-card__service {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.testimonials .testimonial-card__star {
    display: inline-block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* Переопределение анимационных классов для testimonials */
section.testimonials .fade-in,
section.testimonials .zoom-in {
    opacity: 1;
    visibility: visible;
    transform: none;
    animation: none;
    transition: none;
}

/* Псевдоэлементы должны быть видны */
section.testimonials .testimonial-card::before,
section.testimonials .testimonial-card__text::before {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Принудительная видимость для всех дочерних элементов testimonials */
section.testimonials * {
    visibility: visible;
    opacity: 1;
}

/* ========================================
   FAQ SECTION - Высокая специфичность
   ======================================== */

/* Базовая видимость для секции FAQ */
section.faq {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    position: relative;
    z-index: 1;
}

section.faq .faq__container {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.faq .faq__header {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.faq .faq__title {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.faq .faq__subtitle {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* Конец файла */
/* ========================================
   СТРАНИЦА "О ФОТОГРАФЕ" - В СТИЛИСТИКЕ ГЛАВНОЙ СТРАНИЦЫ
   Современные стили в соответствии с дизайн-системой
   ======================================== */

/* История фотографа */
.about-story {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 50%, var(--color-bg-primary) 100%);
    position: relative;
    overflow: hidden;
}

.about-story::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 70%, rgba(201, 169, 110, 0.05) 0%, transparent 50%);
    z-index: 0;
}

.about-story__grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: var(--spacing-12);
    align-items: center;
    position: relative;
    z-index: 1;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--spacing-6);
}

.about-story__title {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-6);
    position: relative;
}

.about-story__title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    border-radius: var(--radius-full);
}

.about-story__text {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-4);
}

.about-story__text:last-child {
    margin-bottom: 0;
}

.about-story__photo {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-2xl);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 400px;
    max-width: 100%;
    width: auto;
    position: relative;
}

.about-story__photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(201, 169, 110, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: var(--radius-2xl);
    z-index: 1;
}

.about-story__photo:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-4xl);
}

.about-story__photo:hover::before {
    opacity: 1;
}

.about-story__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Лайтбокс для фото */
.photo-lightbox {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.about-story__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}

.photo-overlay__icon {
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.photo-overlay__icon svg {
    width: 32px;
    height: 32px;
}

.photo-overlay__icon span {
    font-size: 0.875rem;
    font-weight: 500;
}

.photo-lightbox:hover .photo-overlay {
    opacity: 1;
}

.photo-lightbox:hover .about-story__photo-img {
    transform: scale(1.05);
}

/* Полноэкранный лайтбокс */
.lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.lightbox-modal.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    backdrop-filter: blur(10px);
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-close svg {
    width: 20px;
    height: 20px;
}

/* Направления съемки */
.about-philosophy {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    position: relative;
    overflow: hidden;
}

.about-philosophy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 70% 30%, rgba(201, 169, 110, 0.08) 0%, transparent 50%);
    z-index: 0;
}

.about-philosophy__content-centered {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--spacing-6);
    text-align: center;
    position: relative;
    z-index: 1;
}

.about-philosophy__title {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
    position: relative;
}

.about-philosophy__title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    border-radius: var(--radius-full);
}

.about-philosophy__text {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-8);
    margin-top: var(--spacing-16);
}

.service-direction {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    padding: var(--spacing-8);
    border-radius: var(--radius-2xl);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.service-direction::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.service-direction:hover::before {
    transform: scaleX(1);
}

.service-direction:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
    background: rgba(255, 255, 255, 0.95);
}

.service-direction__icon {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-4);
    display: block;
    color: var(--color-accent);
}

.service-direction__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-3);
}

.service-direction__description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Фотошкола */
.flashback-info {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    padding: var(--spacing-10);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    margin: var(--spacing-12) 0;
    border: 1px solid rgba(201, 169, 110, 0.2);
    position: relative;
    overflow: hidden;
}

.flashback-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
}

.flashback-info__title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
}

.flashback-info__description {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-6);
}

.flashback-info__features {
    list-style: none;
    padding: 0;
    margin: var(--spacing-6) 0;
}

.flashback-info__features li {
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    position: relative;
    padding-left: var(--spacing-8);
}

.flashback-info__features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}

.flashback-info__features li:last-child {
    border-bottom: none;
}

.flashback-info__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    color: var(--color-white);
    padding: var(--spacing-4) var(--spacing-8);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    margin-top: var(--spacing-4);
    box-shadow: var(--shadow-lg);
}

.flashback-info__link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
    background: linear-gradient(135deg, var(--color-accent-hover) 0%, var(--color-accent-dark) 100%);
}

/* Преимущества */
.advantages-section {
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 50%, var(--color-bg-primary) 100%);
    padding: var(--spacing-20) 0;
    position: relative;
    overflow: hidden;
}

.advantages-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 60% 40%, rgba(201, 169, 110, 0.06) 0%, transparent 50%);
    z-index: 0;
}

.advantages-section__title {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
    position: relative;
    z-index: 1;
}

.advantages-section__title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    border-radius: var(--radius-full);
}

.advantages-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-8);
    max-width: var(--container-xl);
    margin: var(--spacing-16) auto 0;
    padding: 0 var(--spacing-6);
    position: relative;
    z-index: 1;
}

.advantage-item {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    padding: var(--spacing-8);
    border-radius: var(--radius-2xl);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.advantage-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.advantage-item:hover::before {
    transform: scaleX(1);
}

.advantage-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
    background: rgba(255, 255, 255, 0.95);
}

.advantage-item__icon {
    font-size: var(--font-size-5xl);
    margin-bottom: var(--spacing-6);
    display: block;
    color: var(--color-accent);
}

.advantage-item__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
}

.advantage-item__description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Факты */
.facts-section {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    position: relative;
    overflow: hidden;
}

.facts-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 60%, rgba(201, 169, 110, 0.05) 0%, transparent 50%);
    z-index: 0;
}

.about-facts__title {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
    position: relative;
    z-index: 1;
}

.about-facts__title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    border-radius: var(--radius-full);
}

.facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-8);
    max-width: var(--container-lg);
    margin: var(--spacing-16) auto 0;
    padding: 0 var(--spacing-6);
    position: relative;
    z-index: 1;
}

.fact-item {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    padding: var(--spacing-8);
    border-radius: var(--radius-2xl);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.fact-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(201, 169, 110, 0.05) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fact-item:hover::before {
    opacity: 1;
}

.fact-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
    border-color: rgba(201, 169, 110, 0.3);
}

.fact-item__icon {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-4);
    display: block;
    color: var(--color-accent);
}

.fact-item__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
}

.fact-item__description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* FAQ секция */
.about-faq {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 50%, var(--color-bg-primary) 100%);
    position: relative;
    overflow: hidden;
}

.about-faq::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 40% 80%, rgba(201, 169, 110, 0.05) 0%, transparent 50%);
    z-index: 0;
}

.about-faq__title {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
    position: relative;
    z-index: 1;
}

.about-faq__title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    border-radius: var(--radius-full);
}

.about-faq .faq-list {
    max-width: var(--container-lg);
    margin: var(--spacing-16) auto 0;
    padding: 0 var(--spacing-6);
    position: relative;
    z-index: 1;
}

.about-faq .faq-item {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-4);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-faq .faq-item:hover {
    box-shadow: var(--shadow-lg);
    border-color: rgba(201, 169, 110, 0.3);
}

.about-faq .faq-item__question {
    width: 100%;
    padding: var(--spacing-5) var(--spacing-6);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    transition: color 0.3s ease;
}

.about-faq .faq-item__question:hover {
    color: var(--color-accent);
}

.about-faq .faq-item__question span {
    flex: 1;
    margin-right: var(--spacing-3);
}

.about-faq .faq-item__icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: var(--color-text-tertiary);
}

.about-faq .faq-item.active .faq-item__icon {
    transform: rotate(180deg);
    color: var(--color-accent);
}

.about-faq .faq-item__answer {
    max-height: 0 !important;
    padding: 0 var(--spacing-6) !important;
    overflow: hidden !important;
    transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.3s ease !important;
    background: rgba(var(--color-accent-rgb), 0.02) !important;
}

.about-faq .faq-item__answer > * {
    min-height: 0;
}

.about-faq .faq-item.active .faq-item__answer {
    max-height: none !important;
    height: auto !important;
    padding: var(--spacing-5) var(--spacing-6) !important;
}

.about-faq .faq-item__answer p {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0;
    font-size: var(--font-size-base);
}

/* ========================================
   АДАПТИВНЫЙ ДИЗАЙН
   ======================================== */

@media (max-width: 768px) {
    .about-story {
        padding: var(--spacing-16) 0;
    }

    .about-story__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }

    .about-story__title {
        font-size: var(--font-size-3xl);
        text-align: center;
    }

    .about-story__photo {
        order: -1;
        height: 300px;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* iPad Air - фиксим сжатие фото */
@media (min-width: 769px) and (max-width: 900px) and (orientation: portrait),
       (min-width: 1150px) and (max-width: 1300px) and (orientation: landscape),
       (min-width: 800px) and (max-width: 850px) {
    .about-story__photo {
        max-width: 500px;
        width: auto;
        height: 450px;
        margin: 0 auto;
        aspect-ratio: 3/4;
    }
    
    .about-story__photo img {
        object-fit: cover;
        object-position: center;
    }
    
    .about-story__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-12);
        align-items: center;
    }
}

@media (max-width: 768px) {
    .about-philosophy {
        padding: var(--spacing-16) 0;
    }

    .about-philosophy__title {
        font-size: var(--font-size-3xl);
    }

    .about-philosophy__text {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }

    .service-direction {
        padding: var(--spacing-6);
    }

    .flashback-info {
        padding: var(--spacing-8);
        margin: var(--spacing-8) 0;
    }

    .flashback-info__title {
        font-size: var(--font-size-2xl);
    }

    .advantages-section {
        padding: var(--spacing-16) 0;
    }

    .advantages-section__title {
        font-size: var(--font-size-3xl);
    }

    .advantages-list {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }

    .advantage-item {
        padding: var(--spacing-6);
    }

    .facts-section {
        padding: var(--spacing-16) 0;
    }

    .about-facts__title {
        font-size: var(--font-size-3xl);
    }

    .facts-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }

    .fact-item {
        padding: var(--spacing-6);
    }

    .fact-item__icon {
        font-size: var(--font-size-3xl);
    }

    .about-faq {
        padding: var(--spacing-16) 0;
    }

    .about-faq__title {
        font-size: var(--font-size-3xl);
    }

    .about-faq .faq-item__question {
        padding: var(--spacing-4) var(--spacing-5);
        font-size: var(--font-size-sm);
    }

    .about-faq .faq-item.active .faq-item__answer {
        padding: var(--spacing-4) var(--spacing-5);
    }
}

@media (max-width: 480px) {
    .about-story,
    .about-philosophy,
    .advantages-section,
    .facts-section,
    .about-faq {
        padding: var(--spacing-12) 0;
    }

    .about-story__text,
    .flashback-info__description {
        font-size: var(--font-size-base);
    }

    .about-story__photo {
        height: 280px;
    }

    .about-story__grid {
        gap: var(--spacing-6);
    }

    .service-direction {
        padding: var(--spacing-5);
    }

    .flashback-info {
        padding: var(--spacing-6);
    }

    .advantage-item {
        padding: var(--spacing-5);
    }

    .fact-item {
        padding: var(--spacing-5);
    }
}

/* Планшеты включая iPad Air */
@media (min-width: 769px) and (max-width: 1024px) {
    .about-story__photo {
        max-width: none;
        width: auto;
        max-height: 450px;
        margin: 0 auto;
        order: initial;
        aspect-ratio: 3/4;
        object-fit: cover;
    }
    
    .about-story__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .about-story__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-12);
        align-items: center;
    }
}

/* iPad Pro - корректные пропорции фото */
@media (min-width: 1025px) and (max-width: 1400px) {
    .about-story__photo {
        width: auto;
        max-width: 600px;
        height: 500px;
        margin: 0 auto;
        aspect-ratio: 3/4;
    }
    
    .about-story__photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    .about-story__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-16);
        align-items: center;
    }
    
    .about-story {
        padding: var(--spacing-24) 0;
    }
}

/* ========================================
   ЛАЙТБОКС ДЛЯ ПОЛНОЭКРАННОГО ПРОСМОТРА
   ======================================== */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    padding: 20px;
    box-sizing: border-box;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lightbox-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-2xl);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    user-select: none;
    cursor: pointer;
    transform-origin: center center;
}

.lightbox-overlay.active .lightbox-image {
    transform: scale(1);
    transition: transform 0.3s ease;
}

.lightbox-close {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: var(--color-text-primary);
    z-index: 10000;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
}

.lightbox-close:hover {
    background: white;
    transform: scale(1.1);
    opacity: 1;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.lightbox-close svg {
    width: 22px;
    height: 22px;
}

/* Лоадер для лайтбокса */
.lightbox-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Подсказка для управления лайтбоксом */
.lightbox-hint {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 400;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.lightbox-overlay.active .lightbox-hint {
    opacity: 1;
}

.lightbox-overlay.show-hint .lightbox-hint {
    animation: fadeInOut 4s ease-in-out;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    20%, 80% { opacity: 1; }
}

/* Мобильная адаптация лайтбокса */
@media (max-width: 768px) {
    .lightbox-content {
        max-width: 95vw;
        max-height: 95vh;
        padding: 20px;
    }
    
    .lightbox-close {
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
    
    .lightbox-close svg {
        width: 20px;
        height: 20px;
    }
    
    .lightbox-hint span {
        display: none;
    }
    
    .lightbox-hint::after {
        content: "Свайп/выброс фото вверх/вниз — закрыть • Тап по фото — закрыть";
    }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
    .lightbox-close {
        top: 15px;
        right: 15px;
        background: rgba(0, 0, 0, 0.8);
        color: white;
        width: 36px;
        height: 36px;
    }
    
    .lightbox-close:hover {
        background: rgba(0, 0, 0, 0.9);
    }
    
    .lightbox-close svg {
        width: 18px;
        height: 18px;
    }
    
    .lightbox-content {
        padding: 50px 10px 20px;
    }
}

/* ========================================
   СТРАНИЦА КОНТАКТОВ
   ======================================== */

/* Герой секция */
.contact-hero {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
    text-align: center;
}

.contact-hero__content {
    max-width: 800px;
    margin: 0 auto;
}

.contact-hero__photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 30px;
    display: block;
    border: 4px solid var(--color-primary);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.1),
        0 0 0 8px rgba(214, 186, 140, 0.1);
    transition: all 0.3s ease;
    background: var(--color-bg-primary);
}

.contact-hero__photo:hover {
    transform: scale(1.05);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.15),
        0 0 0 8px rgba(214, 186, 140, 0.2);
}

.contact-hero__title {
    font-size: var(--font-size-5xl);
    font-weight: 700;
    margin-bottom: var(--spacing-4);
    color: var(--color-text-primary);
}

.contact-hero__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Контактная информация */
.contact-info {
    padding: var(--spacing-20) 0;
}

.contact-info__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-8);
    max-width: 1000px;
    margin: 0 auto;
}

.contact-card {
    text-align: center;
    padding: var(--spacing-8);
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.7s ease;
}

.contact-card.animate-in {
    opacity: 1;
    transform: translateX(0);
  }
  
  /* Необязательно: разные задержки */
  .contact-card.animate-in:nth-child(1) { transition-delay: 0s; }
  .contact-card.animate-in:nth-child(2) { transition-delay: 0.1s; }
  .contact-card.animate-in:nth-child(3) { transition-delay: 0.2s; }
  .contact-card.animate-in:nth-child(4) { transition-delay: 0.3s; }

.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-card__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.contact-card__icon img,
.contact-card__icon svg {
    width: 30px;
    height: 30px;
}


.contact-card__title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-2);
    color: var(--color-text-primary);
}

.contact-card__link {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    margin-bottom: var(--spacing-2);
    transition: color 0.3s ease;
}

.contact-card__link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.contact-card__note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Форма обратной связи */
.contact-form-section {
    padding: var(--spacing-20) 0;
    background: var(--color-bg-secondary);
}

.contact-form-wrapper {
    max-width: 600px;
    margin: 0 auto;
}

.contact-form__title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-4);
    color: var(--color-text-primary);
}

.contact-form__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: var(--spacing-8);
    line-height: 1.6;
}

.contact-form {
    background: var(--color-bg-primary);
    padding: var(--spacing-8);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
}

.form-group {
    margin-bottom: var(--spacing-6);
}

.form-label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--spacing-2);
    color: var(--color-text-primary);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-submit {
    width: 100%;
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-lg);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.form-submit:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

.form-submit:active {
    transform: translateY(0);
}

/* Адаптивность */
@media (max-width: 768px) {
    .contact-hero {
        padding: var(--spacing-16) 0;
    }
    
    .contact-hero__photo {
        width: 100px;
        height: 100px;
        margin-bottom: var(--spacing-6);
    }
    
    .contact-hero__title {
        font-size: var(--font-size-3xl);
    }
    
    .contact-info__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
    
    .contact-form {
        padding: var(--spacing-6);
    }
}

.contacts__info h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-6);
}

.contacts__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.contacts__icon {
    width: 2rem;
    height: 2rem;
    color: var(--color-accent);
}

@media (min-width: 1024px) {
    .contacts__content {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-20);
    }
}

/* ========================================
   ГАЛЕРЕЯ
   Отдельные галереи проектов
   ======================================== */

.gallery-page {
    padding-top: var(--spacing-8);
}

.gallery__header {
    text-align: center;
    padding: var(--spacing-16) 0;
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
}

.gallery__title {
    font-size: var(--font-size-5xl);
    margin-bottom: var(--spacing-4);
}

.gallery__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.gallery__content {
    padding: var(--spacing-12) 0;
}

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-4);
}

.gallery__item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-base);
}

.gallery__item:hover {
    transform: scale(1.02);
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .gallery__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-6);
    }
}

@media (min-width: 1024px) {
    .gallery__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Информация о галерее */
.gallery-info {
    padding: var(--spacing-16) 0;
    background: var(--color-bg-secondary);
}

.gallery-info__title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-8);
    text-align: center;
}

.gallery-info__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

.gallery-info__item {
    text-align: center;
    padding: var(--spacing-4);
}

.gallery-info__item h3 {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gallery-info__item p {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-primary);
}

.gallery-info__description {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.gallery-info__description p {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-4);
}

.gallery-info__description p:last-child {
    margin-bottom: 0;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .gallery-info__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-4);
    }
    
    .gallery-info__description p {
        font-size: var(--font-size-base);
    }
}

/* Лайтбокс */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.lightbox--active {
    opacity: 1;
    visibility: visible;
}

.lightbox__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.lightbox__container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 1;
}

.lightbox__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox__image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox__counter {
    margin-top: 1rem;
    color: white;
    font-size: 1rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: fixed;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.lightbox__close {
    top: 20px;
    right: 20px;
    font-size: 30px;
    line-height: 1;
    z-index: 10001;
}

.lightbox__prev {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-size: 28px;
    font-weight: bold;
}

.lightbox__next {
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 28px;
    font-weight: bold;
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .lightbox__container {
        max-width: 95vw;
        max-height: 95vh;
    }
    
    .lightbox__image {
        max-height: 75vh;
    }
    
    .lightbox__close,
    .lightbox__prev,
    .lightbox__next {
        width: 50px;
        height: 50px;
        font-size: 24px;
        border-width: 3px;
        background: rgba(0, 0, 0, 0.7);
        border-color: rgba(255, 255, 255, 0.8);
    }
    
    .lightbox__close {
        top: 15px;
        right: 15px;
        font-size: 30px;
        width: 55px;
        height: 55px;
        z-index: 10000;
    }
    
    .lightbox__prev {
        left: 15px;
        font-size: 28px;
    }
    
    .lightbox__next {
        right: 15px;
        font-size: 28px;
    }
    
    .lightbox__counter {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
        margin-top: 0.5rem;
    }
    
    /* Увеличиваем область клика для кнопок на мобильных */
    .lightbox__close::before {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        background: transparent;
    }
}

/* Анимации */
@keyframes lightboxFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.lightbox--active .lightbox__image {
    animation: lightboxFadeIn 0.3s ease-out;
}

/* ========================================
   ПОРТФОЛИО
   Стили для страницы портфолио и галерей
   ======================================== */

.portfolio-page {
    padding-top: var(--spacing-8);
}

.portfolio__header {
    text-align: center;
    margin-bottom: var(--spacing-16);
    padding: var(--spacing-12) 0;
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
}

.portfolio__title {
    font-size: var(--font-size-5xl);
    margin-bottom: var(--spacing-4);
}

.portfolio__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Фильтры категорий */
.portfolio__filters {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-12);
    flex-wrap: wrap;
}

.portfolio__filter {
    padding: var(--spacing-2) var(--spacing-4);
    background: transparent;
    border: 2px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-fast);
}

.portfolio__filter:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.portfolio__filter--active {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-inverse);
}

/* Сетка портфолио */
.portfolio__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-12);
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
}

.lightbox--active {
    opacity: 1;
    visibility: visible;
}

.lightbox__content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lightbox__close {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: var(--radius-full);
    width: 3rem;
    height: 3rem;
    color: white;
    font-size: var(--font-size-xl);
    cursor: pointer;
    transition: var(--transition-fast);
}

.lightbox__close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: var(--radius-full);
    width: 3rem;
    height: 3rem;
    color: white;
    font-size: var(--font-size-xl);
    cursor: pointer;
    transition: var(--transition-fast);
}

.lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox__prev {
    left: var(--spacing-4);
}

.lightbox__next {
    right: var(--spacing-4);
}

/* Масонри сетка для разнообразия */
.portfolio__masonry {
    columns: 1;
    column-gap: var(--spacing-6);
}

.portfolio__masonry .card--portfolio {
    break-inside: avoid;
    margin-bottom: var(--spacing-6);
    aspect-ratio: unset;
}

@media (min-width: 640px) {
    .portfolio__masonry {
        columns: 2;
    }
}

@media (min-width: 1024px) {
    .portfolio__masonry {
        columns: 3;
    }
}

@media (min-width: 1280px) {
    .portfolio__masonry {
        columns: 4;
    }
}

/* Загрузка больше */
.portfolio__load-more {
    text-align: center;
    margin-top: var(--spacing-8);
}

/* Анимации появления */
@keyframes portfolio-item-appear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.portfolio__item {
    animation: portfolio-item-appear 0.5s ease-out;
}

/* Адаптивность */
@media (max-width: 768px) {
    .portfolio__grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-4);
    }
    
    .portfolio__filters {
        gap: var(--spacing-1);
    }
    
    .portfolio__filter {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-sm);
    }
}

/* ========================================
   ПОРТФОЛИО - КАТЕГОРИИ СЪЕМОК
   Современный блок с типами фотосессий
   ======================================== */

/* Высокоспецифичные селекторы для предотвращения исчезновения элементов */
section.portfolio-categories {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    position: relative;
}

/* Декоративная линия сверху */
section.portfolio-categories::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(201, 169, 110, 0.15) 25%,
        rgba(201, 169, 110, 0.4) 45%,
        rgba(201, 169, 110, 0.6) 50%,
        rgba(201, 169, 110, 0.4) 55%,
        rgba(201, 169, 110, 0.15) 75%,
        transparent 100%);
    box-shadow: 0 1px 3px rgba(201, 169, 110, 0.2);
}

/* Декоративная линия снизу */
section.portfolio-categories::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.3), transparent);
}

section.portfolio-categories .portfolio-categories__header {
    text-align: center;
    margin-bottom: var(--spacing-16);
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.portfolio-categories .portfolio-categories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-16);
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* Карточка категории */
section.portfolio-categories .portfolio-category {
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-light);
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.portfolio-categories .portfolio-category:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

section.portfolio-categories .portfolio-category__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

section.portfolio-categories .portfolio-category__image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--color-gray-100);
}

section.portfolio-categories .portfolio-category__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
    display: block;
    opacity: 1;
}

/* Если изображение не загрузилось */
section.portfolio-categories .portfolio-category__image::after {
    content: "📷";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: var(--color-gray-400);
    display: none;
}

section.portfolio-categories .portfolio-category__image img[src=""]:after,
section.portfolio-categories .portfolio-category__image img:not([src]):after {
    display: block;
}

section.portfolio-categories .portfolio-category:hover .portfolio-category__image img {
    transform: scale(1.05);
}

section.portfolio-categories .portfolio-category__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.6) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--spacing-4);
    opacity: 0;
    transition: opacity var(--transition-base);
}

section.portfolio-categories .portfolio-category:hover .portfolio-category__overlay {
    opacity: 1;
}

section.portfolio-categories .portfolio-category__icon {
    color: var(--color-text-inverse);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

section.portfolio-categories .portfolio-category__count {
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-lg);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

section.portfolio-categories .portfolio-category__content {
    padding: var(--spacing-6);
}

section.portfolio-categories .portfolio-category__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
    transition: color var(--transition-fast);
}

section.portfolio-categories .portfolio-category:hover .portfolio-category__title {
    color: var(--color-accent);
}

section.portfolio-categories .portfolio-category__description {
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    line-height: 1.6;
    margin-bottom: var(--spacing-4);
}

section.portfolio-categories .portfolio-category__features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

section.portfolio-categories .portfolio-category__feature {
    background: var(--color-accent-light);
    color: var(--color-gray-100);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-accent-light);
}

/* Призыв к действию */
section.portfolio-categories .portfolio-categories__cta {
    text-align: center;
    padding: var(--spacing-12);
    background: var(--color-background);
    border-radius: var(--radius-xl);
    border: 2px dashed var(--color-border);
}

section.portfolio-categories .portfolio-categories__cta-text {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-6);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Адаптивность */
@media (max-width: 768px) {
    section.portfolio-categories .portfolio-categories__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
    
    section.portfolio-categories .portfolio-category__content {
        padding: var(--spacing-4);
    }
    
    section.portfolio-categories .portfolio-categories__cta {
        padding: var(--spacing-8);
    }
}

@media (max-width: 480px) {
    section.portfolio-categories {
        padding: var(--spacing-16) 0;
    }
    
    section.portfolio-categories .portfolio-categories__header {
        margin-bottom: var(--spacing-12);
    }
    
    section.portfolio-categories .portfolio-category__title {
        font-size: var(--font-size-lg);
    }
    
    section.portfolio-categories .portfolio-category__description {
        font-size: var(--font-size-sm);
    }
}

/* Темная тема */
@media (prefers-color-scheme: dark) {
    section.portfolio-categories {
        background: linear-gradient(135deg, var(--color-background-dark) 0%, var(--color-background-alt-dark) 100%);
    }
    
    section.portfolio-categories .portfolio-category {
        background: var(--color-background-dark);
        border-color: var(--color-border-dark);
    }
    
    section.portfolio-categories .portfolio-categories__cta {
        background: var(--color-background-dark);
        border-color: var(--color-border-dark);
    }
}

/* Fallback стили для элементов без JavaScript */
section.portfolio-categories {
    opacity: 1;
    transform: none;
}

section.portfolio-categories .portfolio-category {
    opacity: 1;
    transform: none;
}

section.portfolio-categories .portfolio-categories__header * {
    opacity: 1;
    transform: none;
}

/* Убеждаемся, что анимированные элементы видны */
.no-js section.portfolio-categories .animate-fade-in-up,
.no-js section.portfolio-categories [class*="animate-"],
.no-js section.portfolio-categories .fade-in,
.no-js section.portfolio-categories .slide-up,
.no-js section.portfolio-categories .slide-left,
.no-js section.portfolio-categories .slide-right,
.no-js section.portfolio-categories .zoom-in {
    opacity: 1;
    transform: none;
}

/* Гарантируем видимость CTA блока с высокой специфичностью */
section.portfolio-categories .portfolio-categories__cta.animate-fade-in-up {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s ease-out;
}

section.portfolio-categories .portfolio-categories__cta.animate-fade-in-up.animate-in {
    opacity: 1;
    transform: translateY(0);
}

section.portfolio-categories .portfolio-categories__cta {
    opacity: 1;
    transform: none;
    display: block;
    visibility: visible;
}

/* Дополнительное правило для случаев проблем с анимациями */
body.page-loaded section.portfolio-categories .portfolio-categories__cta.animate-fade-in-up,
body.force-visible section.portfolio-categories .portfolio-categories__cta.animate-fade-in-up,
.no-js section.portfolio-categories .portfolio-categories__cta.animate-fade-in-up {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    display: block;
}

/* Дополнительные стили для надежности отображения */
html.page-loaded section.portfolio-categories,
html.force-visible section.portfolio-categories,
.no-js section.portfolio-categories {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

html.page-loaded section.portfolio-categories .portfolio-categories__grid,
html.force-visible section.portfolio-categories .portfolio-categories__grid,
.no-js section.portfolio-categories .portfolio-categories__grid {
    display: grid;
    visibility: visible;
    opacity: 1;
    transform: none;
}

html.page-loaded section.portfolio-categories .portfolio-category,
html.force-visible section.portfolio-categories .portfolio-category,
.no-js section.portfolio-categories .portfolio-category {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* Обеспечиваем отображение заголовка */
html.page-loaded section.portfolio-categories .portfolio-categories__header,
html.force-visible section.portfolio-categories .portfolio-categories__header,
.no-js section.portfolio-categories .portfolio-categories__header {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

html.page-loaded section.portfolio-categories .section-title,
html.page-loaded section.portfolio-categories .section-subtitle,
html.force-visible section.portfolio-categories .section-title,
html.force-visible section.portfolio-categories .section-subtitle,
.no-js section.portfolio-categories .section-title,
.no-js section.portfolio-categories .section-subtitle {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* =================================================================
   SERVICES SECTION WITH VISUAL SEPARATION
   Стили для секции услуг с визуальным разделением
   ================================================================= */

.services {
  padding: 8rem 0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  position: relative;
  overflow: hidden;
}

/* Элегантный декоративный "забор" сверху */
.services::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(201, 169, 110, 0.1) 5%,
    rgba(201, 169, 110, 0.3) 25%,
    rgba(201, 169, 110, 0.5) 50%,
    rgba(201, 169, 110, 0.3) 75%,
    rgba(201, 169, 110, 0.1) 95%,
    transparent 100%);
  box-shadow: 0 2px 8px rgba(201, 169, 110, 0.2);
}

/* Декоративная линия снизу */
.services::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.3), transparent);
}

/* Декоративный фоновый паттерн */
.services {
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(201, 169, 110, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(201, 169, 110, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(201, 169, 110, 0.02) 0%, transparent 60%);
}

/* Контейнер с дополнительными отступами */

.services__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 2;
}

/* Добавляем декоративную рамку для секции */
.services__container::before {
  content: '';
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(201, 169, 110, 0.3);
}

.services__header {
  text-align: center;
  margin-bottom: 4rem;
}

.services__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.services__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 8rem; /* Увеличен отступ для лучшего разделения */
  position: relative;
}

/* Декоративное разделение между подходом и услугами */
.services__grid::before {
  content: '';
  position: absolute;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(201, 169, 110, 0.2) 20%,
    rgba(201, 169, 110, 0.6) 50%,
    rgba(201, 169, 110, 0.2) 80%,
    transparent 100%);
  border-radius: 1px;
}

/* Декоративные точки */
.services__grid::after {
  content: '• • •';
  position: absolute;
  top: -4.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-accent);
  font-size: 1.2rem;
  letter-spacing: 0.5rem;
  opacity: 0.7;
}

/* Заголовок блока услуг */
.services__services-title {
  text-align: center;
  margin: 6rem 0 3rem 0;
  position: relative;
}

.services__services-title h3 {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
}

.services__services-title h3::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  border-radius: 2px;
}

.services__services-title p {
  color: var(--color-text-light);
  font-size: 1.1rem;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Стабилизирующие стили для всех элементов service-card */
.service-card,
.service-card * {
  display: block;
  visibility: visible;
  opacity: 1;
}

.service-card__features {

  display: block;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.service-card__feature {
  display: block;
  padding: 0.5rem 0;
  color: var(--color-text-light);
  position: relative;
  padding-left: 1.5rem;
}

.service-card__action {
  display: inline-block;
  margin-top: auto;
  width: 100%;
}

.service-card__price-note {
  display: block;
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
  font-style: italic;
}

/* Service Cards */
.service-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--color-background);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-md);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}


.service-card:hover::before {
  transform: scaleX(1);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.service-card__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: transform 0.3s ease;
}

.service-card:hover .service-card__icon {
  transform: scale(1.1);
}

.service-card__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.service-card__description {
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 1.5rem;
 
}

.service-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  flex-grow: 1;
}

.service-card__features li {
  padding: 0.5rem 0;
  color: var(--color-text-light);
  position: relative;
  padding-left: 1.5rem;
}

.service-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: bold;
}

.service-card__price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

.service-card__btn {
  margin-top: auto;
  width: 100%;
}

/* Premium Service Card */
.service-card--premium {
  position: relative;
  border: 2px solid var(--color-primary);
  background: linear-gradient(135deg, 
    #ffffff 0%, 
    #fefefe 50%,
    #fdfdfd 100%);
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

.service-card--premium .service-card__icon {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  box-shadow: 0 4px 15px rgba(201, 169, 110, 0.3);
}

.service-card--premium .service-card__title {
  color: var(--color-primary);
  font-weight: 700;
}

.service-card--premium .service-card__description {
  color: var(--color-text) !important;
  font-weight: 500;
}

.service-card--premium .service-card__feature {
  color: var(--color-text-light) !important;
  font-weight: 400;
}

.service-card--premium .service-card__price {
  color: var(--color-primary);
  font-size: 1.75rem;
  font-weight: 700;
}

.service-card--premium .service-card__price-note {
  color: var(--color-text-light) !important;
  font-weight: 400;
}


.service-card--premium:hover {
  transform: scale(1.02) translateY(-12px);
  border-color: var(--color-accent);
  box-shadow: 0 20px 40px rgba(201, 169, 110, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
  .services {
    padding: 4rem 0;
  }
  
  .services__container {
    padding: 0 1rem;
  }
  
  .services__title {
    font-size: 2rem;
  }
  
  .services__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .service-card {
    padding: 1.5rem;
  }
  
  .service-card__icon {
    width: 60px;
    height: 60px;
  }
}

/* =================================================================
   PROCESS SECTION
   Стили для секции процесса работы
   ================================================================= */

.process {
  padding: 6rem 0;
  background: var(--color-bg-primary);
  position: relative;
}

/* Элегантная декоративная линия сверху */
.process::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(201, 169, 110, 0.2) 15%,
    rgba(201, 169, 110, 0.5) 35%,
    rgba(201, 169, 110, 0.8) 50%,
    rgba(201, 169, 110, 0.5) 65%,
    rgba(201, 169, 110, 0.2) 85%,
    transparent 100%);
  box-shadow: 0 2px 6px rgba(201, 169, 110, 0.3);
}

/* Декоративная линия снизу */
.process::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.3), transparent);
}

.process__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}

.process__header {
  text-align: center;
  margin-bottom: 4rem;
}

.process__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
}

.process__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.process__steps {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  position: relative;
}

.process__steps::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--color-accent),
    var(--color-accent-light),
    var(--color-accent)
  );
  transform: translateX(-50%);
  z-index: 0;
}

/* Process Steps */
.process-step {
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
  transform: translateX(-200%);
  transition: all 1s ease-in-out;

}

.process-step.animate-in {
    opacity: 1;
    transform: translateX(0);
  }
  
  /* Необязательно: разные задержки */
  .process-step.animate-in:nth-child(1) { transition-delay: 0s; }
  .process-step.animate-in:nth-child(2) { transition-delay: 0.2s; }
  .process-step.animate-in:nth-child(3) { transition-delay: 0.4s; }
  .process-step.animate-in:nth-child(4) { transition-delay: 0.6s; }
  .process-step.animate-in:nth-child(5) { transition-delay: 0.8s; }

.process-step:nth-child(even) {
  flex-direction: row-reverse;
}

.process-step:nth-child(even) .process-step__content {
  text-align: right;
}

.process-step__number {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 20px rgba(201, 169, 110, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-step:hover .process-step__number {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(201, 169, 110, 0.4);
}

.process-step__content {
  flex: 1;
  background: var(--color-bg-primary);
  padding: 2rem;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.process-step__content::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  transform: translateY(-50%);
}

.process-step:nth-child(odd) .process-step__content::before {
  left: -20px;
  border-right-color: var(--color-bg-primary);
}

.process-step:nth-child(even) .process-step__content::before {
  right: -20px;
  border-left-color: var(--color-bg-primary);
}

.process-step:hover .process-step__content {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}

.process-step__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
}

.process-step__description {
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .process {
    padding: 4rem 0;
  }
  
  .process__container {
    padding: 0 1rem;
  }
  
  .process__title {
    font-size: 2rem;
  }
  
  .process__steps {
    gap: 2rem;
  }
  
  .process__steps::before {
    left: 30px;
  }
  
  .process-step {
    flex-direction: column !important;
    align-items: flex-start;
    padding-left: 60px;
  }
  
  .process-step__content {
    text-align: left !important;
  }
  
  .process-step__content::before {
    display: none;
  }
  
  .process-step__number {
    position: absolute;
    left: 0;
    width: 60px;
    height: 60px;
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .process-step {
    padding-left: 80px;
  }
  
  .process-step__content {
    padding: 1.5rem;
  }
}

/* =================================================================
   TESTIMONIALS SECTION
   Стили для секции отзывов клиентов
   ================================================================= */

.testimonials {
  padding: 6rem 0;
  background: var(--color-background-light);
  position: relative;
}

/* Декоративная линия сверху */
.testimonials::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(201, 169, 110, 0.15) 20%,
    rgba(201, 169, 110, 0.4) 40%,
    rgba(201, 169, 110, 0.6) 50%,
    rgba(201, 169, 110, 0.4) 60%,
    rgba(201, 169, 110, 0.15) 80%,
    transparent 100%);
  box-shadow: 0 1px 4px rgba(201, 169, 110, 0.2);
}

/* Декоративная линия снизу */
.testimonials::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.3), transparent);
}

.testimonials__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.testimonials__header {
  text-align: center;
  margin-bottom: 4rem;
}

.testimonials__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.testimonials__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.testimonials__slider {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Testimonial Cards */
.testimonial-card {
  background: var(--color-background);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(59, 130, 246, 0.1) 0%,
    transparent 70%
  );
  transform: scale(0);
  transition: transform 0.6s ease;
}

.testimonial-card:hover::before {
  transform: scale(1);
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.testimonial-card__content {
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.testimonial-card__rating {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.testimonial-card__star {
  color: #fbbf24;
  font-size: 1.25rem;
}

.testimonial-card__text {
  color: var(--color-text-light);
  line-height: 1.7;
  font-size: 1rem;
  font-style: italic;
  position: relative;
}


.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.testimonial-card__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-background-light);
  flex-shrink: 0;
  border: 3px solid var(--color-primary);
}

.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card__info {
  flex-grow: 1;
}

.testimonial-card__name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.testimonial-card__service {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* Navigation */
.testimonials__navigation {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* Hide navigation on desktop */
@media (min-width: 1024px) {
  .testimonials__navigation {
    display: none;
  }
}

.testimonials__nav-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-background);
  border: 2px solid var(--color-border);
  color: var(--color-text-light);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonials__nav-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  transform: scale(1.1);
}

.testimonials__nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Slider Animation */
.testimonials__slider.sliding .testimonial-card {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slider functionality */
.testimonials__slides-container {
  overflow: hidden;
  border-radius: 16px;
}

.testimonials__slides-wrapper {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonials__slides-wrapper .testimonial-card {
  flex: 0 0 100%;
  margin-right: 0;
}

.testimonials__slides-wrapper .testimonial-card:not(.active) {
  opacity: 0.7;
}

/* Dots navigation */
.testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

/* Hide dots on desktop */
@media (min-width: 1024px) {
  .testimonials__dots {
    display: none;
  }
}

.testimonials__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.testimonials__dot:hover {
  background: var(--color-primary);
  transform: scale(1.2);
}

.testimonials__dot.active {
  background: var(--color-primary);
  width: 32px;
  border-radius: 6px;
}

/* Grid fallback when slider is not active */
@media (min-width: 1024px) {
  .testimonials__slider:not(.slider-active) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
  }
  
  .testimonials__slider:not(.slider-active) .testimonials__slides-container {
    display: contents;
  }
  
  .testimonials__slider:not(.slider-active) .testimonials__slides-wrapper {
    display: contents;
  }
}

/* Mobile slider improvements */
@media (max-width: 768px) {
  .testimonials__slider {
    overflow: hidden;
  }
  
  .testimonials__slides-wrapper .testimonial-card {
    flex: 0 0 100%;
  }
}

/* =================================================================
   FAQ SECTION
   Стили для секции часто задаваемых вопросов
   ================================================================= */

.faq {
  padding: 3rem 0;
  background: var(--color-background);
  position: relative;
}

/* Декоративная линия сверху */
.faq::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(201, 169, 110, 0.2) 25%,
    rgba(201, 169, 110, 0.5) 50%,
    rgba(201, 169, 110, 0.2) 75%,
    transparent 100%);
  box-shadow: 0 1px 3px rgba(201, 169, 110, 0.2);
}

/* Декоративная линия снизу */
.faq::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.3), transparent);
}

.faq__container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

.faq__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.faq__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.faq__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-light);
  line-height: 1.6;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* FAQ Items */
.faq-item {
  background: var(--color-background-light);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.faq-item.active {
  border-color: var(--color-primary);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1);
}

.faq-item__trigger {
  width: 100%;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  transition: all 0.3s ease;
  position: relative;
}

.faq-item__trigger:hover {
  background: rgba(59, 130, 246, 0.05);
}

.faq-item.active .faq-item__trigger {
  background: rgba(59, 130, 246, 0.1);
}

.faq-item__question {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

.faq-item__icon {
  flex-shrink: 0;
  color: var(--color-primary);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-item__icon {
  transform: rotate(180deg);
}

.faq-item__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--color-background);
  opacity: 1; /* Всегда видимый */
  transform: translateY(0); /* Убираем смещение */
}

.faq-item.active .faq-item__content {
  max-height: 500px; /* Увеличено с 300px */
  border-top: 1px solid var(--color-border-light);
}

.faq-item__answer {
  padding: 1rem 1.5rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin: 0;
}

/* Удаляем проблемные стили анимации */
/* .faq-item__content {
  opacity: 0;
  transform: translateY(-10px);
}

.faq-item.active .faq-item__content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
} */

/* Focus states */
.faq-item__trigger:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

/* Responsive */
@media (max-width: 768px) {
  .faq {
    padding: 2.5rem 0;
  }
  
  .faq__container {
    padding: 0 1rem;
  }
  
  .faq__title {
    font-size: 1.75rem;
  }
  
  .faq-item__trigger {
    padding: 0.875rem 1.25rem;
  }
  
  .faq-item__question {
    font-size: 0.95rem;
  }
  
  .faq-item__answer {
    padding: 0.875rem 1.25rem;
  }
}

/* Advanced animations */
@keyframes faqSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-item {
  animation: faqSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
}

.faq-item:nth-child(1) { animation-delay: 0.1s; }
.faq-item:nth-child(2) { animation-delay: 0.2s; }
.faq-item:nth-child(3) { animation-delay: 0.3s; }
.faq-item:nth-child(4) { animation-delay: 0.4s; }
.faq-item:nth-child(5) { animation-delay: 0.5s; }

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .faq-item {
    animation: none;
  }
  
  .faq-item__content,
  .faq-item__icon {
    transition: none;
  }
}

/* Enhanced hover effects */
.faq-item__trigger::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(59, 130, 246, 0.05) 50%,
    transparent 100%
  );
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.faq-item__trigger:hover::before {
  transform: scaleX(1);
}

/* Plus/minus icon animation */
.faq-item__icon svg {
  position: relative;
}

.faq-item__icon svg::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 12px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

.faq-item.active .faq-item__icon svg::before {
  opacity: 0;
}

/* FAQ highlight styles */
.faq-highlight {
  background: linear-gradient(120deg, var(--color-primary), var(--color-primary-light));
  color: white;
  padding: 0.1em 0.2em;
  border-radius: 3px;
  font-weight: 600;
}

/* =================================================================
   FAQ SECTION STABILIZATION
   Дополнительные стили для стабильной работы FAQ
   ================================================================= */

/* Базовые стили видимости для FAQ секции */
.faq,
.faq * {
  visibility: visible !important;
  display: block !important;
}

.faq__list {
  display: flex !important;
}

.faq-item__trigger {
  display: flex !important;
}

/* Гарантированная видимость элементов FAQ */
section.faq {
  opacity: 1;
  visibility: visible;
  display: block;
  position: static;
  overflow: visible;
}

.faq .faq__container,
.faq .faq__header,
.faq .faq__title,
.faq .faq__subtitle,
.faq .faq__list,
.faq .faq-item,
.faq .faq-item__trigger,
.faq .faq-item__question,
.faq .faq-item__icon,
.faq .faq-item__answer {
  opacity: 1;
  visibility: visible;
  display: block;
  position: static;
}

/* Специальные стили для flex элементов */
.faq .faq__list {
  display: flex;
  flex-direction: column;
}

.faq .faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Высокоспецифичные стили для анимаций */
.faq .faq-item.slide-up {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: all 0.3s ease;
}

.faq .faq-item.fade-in {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Устранение конфликтов с AOS */
.faq [data-aos] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.faq [data-aos].aos-animate {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Принудительная видимость после загрузки */
.page-loaded .faq,
.page-loaded .faq * {
  opacity: 1;
  visibility: visible;
}

/* Принудительная видимость */
.force-visible .faq,
.force-visible .faq * {
  opacity: 1 !important;
  visibility: visible !important;
}

/* =================================================================
   END FAQ STABILIZATION
   ================================================================= */

/* =================================================================
   CTA SECTION
   Стили для секции призыва к действию
   ================================================================= */

.cta {
  padding: 6rem 0;
  background: linear-gradient(135deg, 
    var(--color-primary) 0%, 
    var(--color-primary-dark) 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><circle cx=\"20\" cy=\"20\" r=\"2\" fill=\"rgba%28255,255,255,0.1%29\"/><circle cx=\"80\" cy=\"40\" r=\"1\" fill=\"rgba%28255,255,255,0.1%29\"/><circle cx=\"40\" cy=\"80\" r=\"1.5\" fill=\"rgba%28255,255,255,0.1%29\"/></svg>");
  animation: float 20s infinite linear;
}

@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(180deg); }
  100% { transform: translateY(0px) rotate(360deg); }
}

.cta__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.cta__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.cta__title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.cta__subtitle {
  font-size: 1.125rem;
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.cta__features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.cta__feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
}

.cta__feature svg {
  color: #10b981;
  flex-shrink: 0;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* CTA Buttons */
.cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
}

.cta__btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.cta__btn:hover::before {
  left: 100%;
}

.cta__btn--primary {
  background: white;
  color: var(--color-primary);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.cta__btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  background: #f8fafc;
}

.cta__btn--secondary {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
}

.cta__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
  transform: translateY(-3px);
}

.cta__btn-icon {
  transition: transform 0.3s ease;
}

.cta__btn:hover .cta__btn-icon {
  transform: scale(1.1);
}

/* CTA Image */
.cta__image {
  position: relative;
  text-align: center;
}

.cta__photo {
  width: 100%;
  max-width: 400px;
  height: 500px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 2;
}

.cta__image-decoration {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, #fbbf24, #f59e0b);
  border-radius: 50%;
  opacity: 0.8;
  z-index: 1;
  animation: pulse 3s infinite;
}

.cta__image-decoration::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 2s infinite;
}

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

@keyframes ripple {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* Statistics */
.cta__stats {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.cta__stat-item {
  text-align: center;
  padding: 1rem;
}

.cta__stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
  display: block;
}

.cta__stat-label {
  font-size: 0.875rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 1024px) {
  .cta__container {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  
  .cta__image {
    order: -1;
  }
}

@media (max-width: 768px) {
  .cta {
    padding: 4rem 0;
  }
  
  .cta__container {
    padding: 0 1rem;
    gap: 2rem;
  }
  
  .cta__title {
    font-size: 2rem;
  }
  
  .cta__actions {
    flex-direction: column;
  }
  
  .cta__btn {
    justify-content: center;
    width: 100%;
  }
  
  .cta__photo {
    height: 400px;
  }
  
  .cta__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
  }
  
  .cta__stat-number {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .cta__features {
    align-items: flex-start;
  }
  
  .cta__stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .cta__stat-item {
    padding: 0.5rem;
  }
}

/* Dark theme adjustments */
[data-theme="dark"] .cta__btn--primary {
  background: var(--color-background-light);
  color: var(--color-primary);
}

[data-theme="dark"] .cta__btn--primary:hover {
  background: var(--color-background);
}

/* Animation states */
.cta__content > * {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta__content > *.fade-in.animated {
  opacity: 1;
  transform: translateY(0);
}

.cta__image {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta__image.slide-right.animated {
  opacity: 1;
  transform: translateX(0);
}

/* Parallax effect for decoration */
@media (min-width: 768px) {
  .cta__image-decoration {
    will-change: transform;
  }
}

/* Enhanced button effects */
.cta__btn {
  position: relative;
  z-index: 1;
}

.cta__btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  z-index: -1;
}

.cta__btn:active::after {
  width: 300px;
  height: 300px;
}

/* Flashback School Styles */

/* Hero Section */
.flashback-hero {
    padding: 120px 0 80px;
    background: linear-gradient(135deg, var(--glass-bg-light) 0%, rgba(255, 255, 255, 0.8) 100%);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
}

.flashback-hero__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.flashback-hero__title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.flashback-hero__subtitle {
    font-size: 1.5rem;
    color: var(--color-accent, #c9a96e);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.flashback-hero__description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.flashback-hero__stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

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

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-accent, #c9a96e);
    font-family: var(--font-heading);
}

.stat-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.flashback-hero__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.flashback-hero__image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
}

.flashback-hero__image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.flashback-hero__image:hover img {
    transform: scale(1.05);
}

/* Instructor Section */
.flashback-instructor {
    padding: 80px 0;
    background: var(--bg-primary);
}

.flashback-instructor__content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: start;
}

.flashback-instructor__image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-glass);
}

.flashback-instructor__image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.flashback-instructor__text h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.flashback-instructor__text h3 {
    font-size: 2rem;
    color: var(--color-accent, #c9a96e);
    margin-bottom: 0.5rem;
}

.instructor-title {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-style: italic;
}

.instructor-bio p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.instructor-achievements {
    margin-top: 2rem;
    padding: 2rem;
    background: var(--glass-bg-light);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
}

.instructor-achievements h4 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.instructor-achievements ul {
    list-style: none;
}

.instructor-achievements li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.8rem;
    color: var(--text-secondary);
}

.instructor-achievements li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-accent, #c9a96e);
    font-weight: bold;
}

/* Courses Section */
.flashback-courses {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--glass-bg-light) 0%, rgba(255, 255, 255, 0.9) 100%);
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.course-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-glass), 0 20px 40px rgba(0, 0, 0, 0.1);
}

.course-card--featured {
    border: 2px solid var(--color-accent, #c9a96e);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, var(--glass-bg) 100%);
}

.course-card__badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--color-accent, #c9a96e);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.course-card__header {
    margin-bottom: 1.5rem;
}

.course-card__header h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.course-level {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: var(--color-accent-hover, #b8965d);
    color: white;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.course-duration {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.course-description p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.course-program {
    flex-grow: 1;
    margin-bottom: 2rem;
}

.course-program h4 {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.course-program ul {
    list-style: none;
}

.course-program li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.course-program li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-accent, #c9a96e);
    font-weight: bold;
}

.course-price {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}

.price-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-accent, #c9a96e);
    font-family: var(--font-heading);
}

.price-note {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}

/* Schedule Section */
.flashback-schedule {
    padding: 80px 0;
    background: var(--bg-primary);
}

/* Student Works */
.flashback-works {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--glass-bg-light) 0%, rgba(255, 255, 255, 0.9) 100%);
}


/* Testimonials */
.flashback-testimonials {
    padding: 80px 0;
    background: var(--bg-primary);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.testimonial-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.testimonial-card:hover {
    transform: translateY(-5px);
}

/* Accordion styles */
.testimonial-card.accordion {
    padding-bottom: 4rem;
}

.testimonial-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.testimonial-preview {
    flex: 1;
    margin-right: 1rem;
}

.testimonial-toggle {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: var(--color-accent, #c9a96e);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    z-index: 2;
}

.testimonial-toggle:hover {
    background: var(--color-accent-hover, #b8965d);
    transform: scale(1.1);
}

.testimonial-toggle.expanded {
    transform: rotate(180deg);
}

.testimonial-content {
    margin-bottom: 2rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.testimonial-content.collapsed {
    max-height: 4.8rem; /* Примерно 3 строки текста */
    position: relative;
}

.testimonial-content.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.5rem;
    background: linear-gradient(transparent, var(--glass-bg));
    pointer-events: none;
}

.testimonial-content.expanded {
    max-height: none;
}

.testimonial-content p {
    font-style: italic;
    line-height: 1.6;
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin: 0;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonial-author img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.author-info h4 {
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

.author-info span {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Success Story Section */
.flashback-success-story {
    padding: 80px 0;
    background: var(--bg-primary);
}

.success-story {
    margin-top: 3rem;
}

.success-story__content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: start;
}

.student-intro {
    margin-bottom: 3rem;
}

.student-intro h3 {
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
}

.student-status {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.achievement-badge {
    background: linear-gradient(135deg, var(--color-accent, #c9a96e), var(--color-accent-hover, #b8965d));
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.story-timeline {
    margin-bottom: 3rem;
}

.story-step {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    align-items: flex-start;
}

.story-step__marker {
    width: 60px;
    height: 60px;
    background: var(--glass-bg);
    border: 2px solid var(--color-accent, #c9a96e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.story-step__marker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-accent, #c9a96e), transparent);
    opacity: 0.1;
    border-radius: 50%;
    transition: opacity 0.3s ease;
}

.story-step:hover .story-step__marker::before {
    opacity: 0.2;
}

.story-step:hover .story-step__marker {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(201, 169, 110, 0.3);
}

.step-icon {
    width: 24px;
    height: 24px;
    color: var(--color-accent, #c9a96e);
    stroke-width: 2;
    transition: all 0.3s ease;
    z-index: 2;
    position: relative;
}

.story-step:hover .step-icon {
    color: var(--color-accent-light, #d4b77c);
    transform: scale(1.1);
}

.story-step__content h4 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 0.8rem;
    font-family: var(--font-heading);
}

.story-step__content p {
    color: var(--text-secondary);
    line-height: 1.6;
    font-style: italic;
}

.story-quote {
    background: var(--glass-bg-light);
    padding: 2rem;
    border-radius: 15px;
    border-left: 4px solid var(--color-accent, #c9a96e);
    margin-bottom: 2rem;
}

.story-quote blockquote {
    font-size: 1.1rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 1rem;
    font-style: italic;
}

.story-quote cite {
    color: var(--color-accent, #c9a96e);
    font-weight: 600;
    font-style: normal;
}

.story-results h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-family: var(--font-heading);
}

.story-results ul {
    list-style: none;
}

.story-results li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.story-results li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-accent, #c9a96e);
    font-weight: bold;
}

.success-story__photos {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.student-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.student-avatar img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--accent-color);
}



.student-portfolio {
    margin-bottom: 2rem;
}

.student-portfolio h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-family: var(--font-heading);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    border-radius: 10px;
    overflow: hidden;
}

.portfolio-item {
    aspect-ratio: 1;
    overflow: hidden;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.story-cta {
    background: var(--glass-bg-light);
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
}

.story-cta h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-family: var(--font-heading);
}

.story-cta p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.story-cta ul {
    list-style: none;
    text-align: left;
    margin-bottom: 1.5rem;
}

.story-cta li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.story-cta li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--color-accent, #c9a96e);
}

/* Contact Form */
/* Contact Section */
.flashback-contact {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--glass-bg-light) 0%, rgba(255, 255, 255, 0.9) 100%);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.contact-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-accent-dark);
    border-radius: 20px;
    box-shadow: var(--shadow-glass);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
}


.contact-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--color-accent-dark);
    background: rgba(255, 255, 255, 0.95);
}

.contact-card__content {
    padding: 2.5rem 2rem;
    text-align: center;
}



.contact-card__icon svg {
    width: 35px;
    height: 35px;
    fill: var(--color-accent);
    transition: all 0.3s ease;
}

.contact-card__icon img {
    width: 35px;
    height: 35px;
    transition: all 0.3s ease;
}

.contact-card__title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.contact-card__link {
    display: inline-block;
    font-size: 1.2rem;
    color: var(--color-accent, #c9a96e);
    text-decoration: none;
    margin-bottom: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.contact-card:hover .contact-card__link {
    color: var(--color-accent-hover, #b8965d);
    transform: scale(1.05);
}

.contact-card:hover .contact-card__icon svg {
    fill: var(--color-accent-hover, #b8965d);
    transform: scale(1.1);
}



.contact-card__note {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.contact-info-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.contact-studio-info,
.contact-schedule-info {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
}

.contact-studio-info h3,
.contact-schedule-info h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.contact-studio-info p,
.contact-schedule-info p {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.contact-studio-info p strong,
.contact-schedule-info p strong {
    color: var(--color-accent, #c9a96e);
    font-weight: 600;
}

.contact-studio-info .note,
.contact-schedule-info .note {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.5rem;
}

/* FAQ Section */
.flashback-faq {
    padding: 80px 0;
    background: var(--bg-primary);
}

.faq-list {
    max-width: 800px;
    margin: 3rem auto 0;
}

.faq-item {
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    margin-bottom: 1rem;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active {
    background: rgba(255, 255, 255, 0.9);
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 1.5rem 2rem;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.5);
}

.faq-icon {
    font-size: 1.5rem;
    color: var(--color-accent, #c9a96e);
    transition: transform 0.3s ease;
    font-weight: bold;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 2rem;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 200px;
    padding: 0 2rem 1.5rem;
}

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

/* Reading Progress Bar */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1000;
}

.reading-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent, #c9a96e), var(--color-accent-hover, #b8965d));
    width: 0%;
    transition: width 0.1s ease;
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 100;
    color: var(--color-accent, #c9a96e);
}

.scroll-to-top:hover {
    background: var(--color-accent, #c9a96e);
    color: white;
    transform: translateY(0) scale(1.1);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Instructor Stats Section */
.instructor-stats {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--glass-bg-light) 0%, rgba(255, 255, 255, 0.9) 100%);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

.instructor-stats__title {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-primary);
    margin-bottom: 3rem;
}

.instructor-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.instructor-stat {
    text-align: center;
    padding: 2rem;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    transition: all 0.3s ease;
}

.instructor-stat:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.instructor-stat__number {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-accent, #c9a96e);
    margin-bottom: 0.5rem;
    font-family: var(--font-heading);
}

.instructor-stat__label {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Course Timeline */
.course-timeline {
    margin-top: 1rem;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.timeline-item:hover {
    background: var(--glass-bg-light);
    border-color: var(--glass-border);
    transform: translateX(5px);
}

.timeline-item.active {
    background: var(--glass-bg);
    border-color: var(--color-accent, #c9a96e);
    box-shadow: var(--shadow-md);
}

.timeline-marker {
    width: 40px;
    height: 40px;
    background: var(--color-accent, #c9a96e);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 1rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-marker {
    transform: scale(1.1);
}

.timeline-content h5 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-weight: 600;
}

.timeline-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Course Progress Demo */
.course-progress-demo {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 3rem;
    margin-bottom: 3rem;
}

.course-progress-demo h3 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--text-primary);
    font-family: var(--font-heading);
}

.progress-timeline {
    margin-bottom: 1rem;
}

.progress-bar {
    margin-bottom: 1rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent, #c9a96e), var(--color-accent-hover, #b8965d));
    width: 16.66%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.progress-steps {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.progress-step {
    background: var(--glass-bg-light);
    border: 2px solid var(--glass-border);
    border-radius: 15px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    min-width: 120px;
}

.progress-step:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.progress-step.active {
    background: var(--color-accent, #c9a96e);
    border-color: var(--color-accent, #c9a96e);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(201, 169, 110, 0.3);
}

.step-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.step-title {
    font-size: 0.9rem;
    font-weight: 500;
}

.progress-content {
    min-height: 200px;
}

.week-content {
    display: none;
    padding: 2rem;
    background: var(--glass-bg-light);
    border-radius: 15px;
    border: 1px solid var(--glass-border);
}

.week-content.active {
    display: block;
    animation: fadeInUp 0.5s ease;
}

.week-content h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.week-content p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.week-content ul {
    list-style: none;
    padding: 0;
}

.week-content li {
    padding: 0.5rem 0;
    color: var(--text-secondary);
    position: relative;
    padding-left: 1.5rem;
}

.week-content li::before {
    content: '•';
    color: var(--color-accent, #c9a96e);
    position: absolute;
    left: 0;
    font-weight: bold;
}

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

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    .flashback-hero {
        padding: 100px 0 60px;
    }
    
    .flashback-hero__content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .flashback-hero__title {
        font-size: 2.5rem;
    }
    
    .flashback-hero__stats {
        justify-content: center;
        gap: 1.5rem;
    }
    
    .flashback-hero__actions {
        justify-content: center;
    }
    
    .flashback-instructor__content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .courses-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .contact-info-block {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .student-works-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    .success-story__content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .story-step {
        gap: 1rem;
    }
    
    .story-step__marker {
        width: 50px;
        height: 50px;
    }
    
    .step-icon {
        width: 20px;
        height: 20px;
    }

    .student-avatar img {
        width: 100px;
        height: 100px;
    }
    
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .flashback-hero__title {
        font-size: 2rem;
    }
    
    .flashback-hero__stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .course-card,
    .testimonial-card {
        padding: 1.5rem;
    }
    
    .contact-card__content {
        padding: 2rem 1.5rem;
    }
    
    .contact-card__icon {
        width: 70px;
        height: 70px;
        margin-bottom: 1rem;
    }
    
    .contact-card__icon svg,
    .contact-card__icon img {
        width: 30px;
        height: 30px;
    }
    
    .contact-card__title {
        font-size: 1.2rem;
    }
    
    .contact-card__link {
        font-size: 1.1rem;
    }
    
    .contact-studio-info,
    .contact-schedule-info {
        padding: 1.5rem;
    }
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .instructor-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .instructor-stat {
        padding: 1.5rem 1rem;
    }
    
    .instructor-stat__number {
        font-size: 2.5rem;
    }
    
    .instructor-stats__title {
        font-size: 2rem;
    }
    
    .progress-steps {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .progress-step {
        min-width: 100px;
        padding: 0.8rem;
    }
    
    .course-progress-demo {
        padding: 2rem 1rem;
    }
    
    .timeline-item {
        margin-bottom: 1rem;
        padding: 0.8rem;
    }
    
    .timeline-marker {
        width: 35px;
        height: 35px;
        margin-right: 0.8rem;
    }
    
    .scroll-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }

    .student-avatar img {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .instructor-stats__grid {
        grid-template-columns: 1fr;
    }
    
    .instructor-stat__number {
        font-size: 2rem;
    }
    
    .instructor-stats__title {
        font-size: 1.8rem;
    }
    
    .progress-steps {
        justify-content: flex-start;
        flex-direction: row;
        gap: 0.5rem;
        overflow-x: auto;
        padding: 0.5rem 0;
        -webkit-overflow-scrolling: touch;
    }
    
    .progress-step {
        min-width: 60px;
        max-width: 60px;
        padding: 0.3rem;
        margin-bottom: 0;
        flex-shrink: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .step-number {
        font-size: 1.2rem;
        margin-bottom: 0;
    }
    
    .step-title {
        display: none;
    }
    
    .progress-step.active {
        background: var(--color-accent, #c9a96e);
        border-color: var(--color-accent, #c9a96e);
        color: white;
    }
    
    .progress-step.active .step-number {
        color: white;
    }
    
    .week-content {
        padding: 1.5rem;
    }
    
    .course-progress-demo {
        padding: 1rem 0.5rem;
    }
    
    .course-progress-demo h3 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    
    .student-intro h3 {
        font-size: 1.5rem;
    }
    
    .story-step {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .story-step__marker {
        width: 40px;
        height: 40px;
        align-self: center;
    }
    
    .story-step__marker .step-icon {
        width: 16px;
        height: 16px;
    }
    
    .story-quote {
        padding: 1.5rem;
    }
    
    .story-cta {
        padding: 1.5rem;
    }
    
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

/* Lightbox стили для изображений */
[data-lightbox] {
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

[data-lightbox]:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

[data-lightbox]::before {
    content: "🔍";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

[data-lightbox]:hover::before {
    opacity: 1;
}

/* Адаптивные стили для lightbox */
@media (max-width: 768px) {
    [data-lightbox]::before {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

/* ========================================
   УТИЛИТЫ ОТСТУПОВ
   Spacing utilities
   ======================================== */

/* Margin утилиты */
.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-5 { margin: var(--spacing-5); }
.m-6 { margin: var(--spacing-6); }
.m-8 { margin: var(--spacing-8); }
.m-10 { margin: var(--spacing-10); }
.m-12 { margin: var(--spacing-12); }
.m-16 { margin: var(--spacing-16); }
.m-20 { margin: var(--spacing-20); }
.m-24 { margin: var(--spacing-24); }
.m-32 { margin: var(--spacing-32); }

/* Margin Top */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }
.mt-10 { margin-top: var(--spacing-10); }
.mt-12 { margin-top: var(--spacing-12); }
.mt-16 { margin-top: var(--spacing-16); }
.mt-20 { margin-top: var(--spacing-20); }

/* Margin Bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }
.mb-10 { margin-bottom: var(--spacing-10); }
.mb-12 { margin-bottom: var(--spacing-12); }
.mb-16 { margin-bottom: var(--spacing-16); }
.mb-20 { margin-bottom: var(--spacing-20); }

/* Margin Left */
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--spacing-1); }
.ml-2 { margin-left: var(--spacing-2); }
.ml-3 { margin-left: var(--spacing-3); }
.ml-4 { margin-left: var(--spacing-4); }
.ml-5 { margin-left: var(--spacing-5); }
.ml-6 { margin-left: var(--spacing-6); }
.ml-8 { margin-left: var(--spacing-8); }
.ml-auto { margin-left: auto; }

/* Margin Right */
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--spacing-1); }
.mr-2 { margin-right: var(--spacing-2); }
.mr-3 { margin-right: var(--spacing-3); }
.mr-4 { margin-right: var(--spacing-4); }
.mr-5 { margin-right: var(--spacing-5); }
.mr-6 { margin-right: var(--spacing-6); }
.mr-8 { margin-right: var(--spacing-8); }
.mr-auto { margin-right: auto; }

/* Margin X (горизонтальные) */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }
.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
.mx-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); }
.mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
.mx-5 { margin-left: var(--spacing-5); margin-right: var(--spacing-5); }
.mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }
.mx-8 { margin-left: var(--spacing-8); margin-right: var(--spacing-8); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Margin Y (вертикальные) */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
.my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }
.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.my-5 { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); }
.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }
.my-8 { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }
.my-12 { margin-top: var(--spacing-12); margin-bottom: var(--spacing-12); }

/* Padding утилиты */
.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-5 { padding: var(--spacing-5); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }
.p-10 { padding: var(--spacing-10); }
.p-12 { padding: var(--spacing-12); }
.p-16 { padding: var(--spacing-16); }
.p-20 { padding: var(--spacing-20); }

/* Padding Top */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--spacing-1); }
.pt-2 { padding-top: var(--spacing-2); }
.pt-3 { padding-top: var(--spacing-3); }
.pt-4 { padding-top: var(--spacing-4); }
.pt-5 { padding-top: var(--spacing-5); }
.pt-6 { padding-top: var(--spacing-6); }
.pt-8 { padding-top: var(--spacing-8); }
.pt-12 { padding-top: var(--spacing-12); }
.pt-16 { padding-top: var(--spacing-16); }
.pt-20 { padding-top: var(--spacing-20); }

/* Padding Bottom */
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--spacing-1); }
.pb-2 { padding-bottom: var(--spacing-2); }
.pb-3 { padding-bottom: var(--spacing-3); }
.pb-4 { padding-bottom: var(--spacing-4); }
.pb-5 { padding-bottom: var(--spacing-5); }
.pb-6 { padding-bottom: var(--spacing-6); }
.pb-8 { padding-bottom: var(--spacing-8); }
.pb-12 { padding-bottom: var(--spacing-12); }
.pb-16 { padding-bottom: var(--spacing-16); }
.pb-20 { padding-bottom: var(--spacing-20); }

/* Padding Left */
.pl-0 { padding-left: 0; }
.pl-1 { padding-left: var(--spacing-1); }
.pl-2 { padding-left: var(--spacing-2); }
.pl-3 { padding-left: var(--spacing-3); }
.pl-4 { padding-left: var(--spacing-4); }
.pl-5 { padding-left: var(--spacing-5); }
.pl-6 { padding-left: var(--spacing-6); }
.pl-8 { padding-left: var(--spacing-8); }

/* Padding Right */
.pr-0 { padding-right: 0; }
.pr-1 { padding-right: var(--spacing-1); }
.pr-2 { padding-right: var(--spacing-2); }
.pr-3 { padding-right: var(--spacing-3); }
.pr-4 { padding-right: var(--spacing-4); }
.pr-5 { padding-right: var(--spacing-5); }
.pr-6 { padding-right: var(--spacing-6); }
.pr-8 { padding-right: var(--spacing-8); }

/* Padding X (горизонтальные) */
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
.px-8 { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }

/* Padding Y (вертикальные) */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
.py-8 { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }
.py-12 { padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); }
.py-16 { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); }
.py-20 { padding-top: var(--spacing-20); padding-bottom: var(--spacing-20); }

/* ========================================
   УТИЛИТЫ ДЛЯ ТЕКСТА И КОНТЕНТА
   Дополнительные классы для оформления
   ======================================== */

/* Текстовые утилиты */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: 1px;
}

.text-gradient {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Цветовые утилиты */
.text-primary {
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

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

.text-inverse {
    color: var(--color-text-inverse);
}

.bg-primary {
    background-color: var(--color-bg-primary);
}

.bg-secondary {
    background-color: var(--color-bg-secondary);
}

.bg-accent {
    background-color: var(--color-accent);
}

.bg-gradient {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
}

/* Border утилиты */
.border {
    border: 1px solid var(--color-border-light);
}

.border-accent {
    border: 1px solid var(--color-accent);
}

.border-radius {
    border-radius: var(--radius-lg);
}

.border-radius-full {
    border-radius: var(--radius-full);
}

/* Shadow утилиты */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow {
    box-shadow: var(--shadow-base);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

/* Flexbox утилиты */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.gap-sm {
    gap: var(--spacing-2);
}

.gap {
    gap: var(--spacing-4);
}

.gap-lg {
    gap: var(--spacing-8);
}

/* Padding утилиты */
.p-0 {
    padding: 0;
}

.p-sm {
    padding: var(--spacing-2);
}

.p {
    padding: var(--spacing-4);
}

.p-lg {
    padding: var(--spacing-8);
}

.px {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

.py {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
}

/* Margin утилиты */
.m-0 {
    margin: 0;
}

.m-auto {
    margin: auto;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mt {
    margin-top: var(--spacing-4);
}

.mb {
    margin-bottom: var(--spacing-4);
}

.mb-lg {
    margin-bottom: var(--spacing-8);
}

/* Overflow утилиты */
.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-auto {
    overflow: auto;
}

/* Z-index утилиты */
.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-50 {
    z-index: 50;
}

/* Утилиты для изображений */
.img-cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.img-contain {
    object-fit: contain;
}

.img-rounded {
    border-radius: var(--radius-lg);
}

.img-circle {
    border-radius: var(--radius-full);
}

/* Hover эффекты */
.hover-scale:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

.hover-rotate:hover {
    transform: rotate(5deg);
    transition: transform 0.3s ease;
}

/* Утилиты видимости */
.visible {
    visibility: visible;
    opacity: 1;
}

.invisible {
    visibility: hidden;
    opacity: 0;
}

.fade-in {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fade-in.active {
    opacity: 1;
}

/* Pointer events */
.pointer-events-none {
    pointer-events: none;
}

.pointer-events-auto {
    pointer-events: auto;
}

/* User select */
.select-none {
    user-select: none;
}

.select-text {
    user-select: text;
}

/* Курсор */
.cursor-pointer {
    cursor: pointer;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

/* =================================================================
   ДЕКОРАТИВНЫЕ ПЕРЕХОДЫ МЕЖДУ СЕКЦИЯМИ
   Универсальные стили для визуального разделения
   ================================================================= */

/* Элегантный переход с градиентной линией */
.section-separator {
  position: relative;
  margin: 0;
  padding: 2rem 0;
  background: transparent;
}

.section-separator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(201, 169, 110, 0.1) 10%,
    rgba(201, 169, 110, 0.3) 25%,
    rgba(201, 169, 110, 0.6) 40%,
    rgba(201, 169, 110, 0.8) 50%,
    rgba(201, 169, 110, 0.6) 60%,
    rgba(201, 169, 110, 0.3) 75%,
    rgba(201, 169, 110, 0.1) 90%,
    transparent 100%);
  transform: translateY(-50%);
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(201, 169, 110, 0.2);
}

/* Декоративный элемент с точками */
.section-separator::after {
  content: '⬥ ⬥ ⬥';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-background, #ffffff);
  padding: 0.5rem 1rem;
  color: var(--color-accent, #c9a96e);
  font-size: 1rem;
  letter-spacing: 0.5rem;
  opacity: 0.8;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.8);
}

/* Вариант с более тонкой линией */
.section-separator--thin::before {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.4), transparent);
  box-shadow: none;
}

.section-separator--thin::after {
  content: '• • •';
  font-size: 0.8rem;
  letter-spacing: 0.3rem;
}

/* =================================================================
   УЛУЧШЕНИЯ ОТСТУПОВ МЕЖДУ СЕКЦИЯМИ
   ================================================================= */

/* Добавляем стандартные отступы между секциями */
.section + .section {
  margin-top: 0;
}

/* Особые отступы для важных переходов */
.flashback-promo + .services {
  margin-top: 0;
}

.services + .process {
  margin-top: 0;
}

.process + .testimonials {
  margin-top: 0;
}

.testimonials + .faq {
  margin-top: 0;
}

/* ========================================
   АНИМАЦИИ
   Современные плавные анимации
   ======================================== */

/* Базовые анимации */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -10px, 0);
    }
    70% {
        transform: translate3d(0, -5px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

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

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

/* Классы анимаций */
.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-fade-in-down {
    animation: fadeInDown 0.6s ease-out;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.6s ease-out;
}

.animate-fade-in-right {
    animation: fadeInRight 0.6s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.4s ease-out;
}

.animate-slide-in-up {
    animation: slideInUp 0.5s ease-out;
}

.animate-slide-in-down {
    animation: slideInDown 0.5s ease-out;
}

.animate-slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.5s ease-out;
}

.animate-bounce {
    animation: bounce 1s ease-in-out;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Задержки анимаций */
.animate-delay-100 {
    animation-delay: 100ms;
}

.animate-delay-200 {
    animation-delay: 200ms;
}

.animate-delay-300 {
    animation-delay: 300ms;
}

.animate-delay-500 {
    animation-delay: 500ms;
}

.animate-delay-700 {
    animation-delay: 700ms;
}

.animate-delay-1000 {
    animation-delay: 1000ms;
}

/* Hover эффекты */
.hover-scale:hover {
    transform: scale(1.05);
    transition: var(--transition-base);
}

.hover-scale-sm:hover {
    transform: scale(1.02);
    transition: var(--transition-base);
}

.hover-scale-lg:hover {
    transform: scale(1.1);
    transition: var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    transition: var(--transition-base);
}

.hover-lift-sm:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.hover-glow:hover {
    box-shadow: 0 0 20px var(--color-accent-light);
    transition: var(--transition-base);
}

.hover-rotate:hover {
    transform: rotate(5deg);
    transition: var(--transition-base);
}

.hover-brightness:hover {
    filter: brightness(1.1);
    transition: var(--transition-base);
}

/* Переходы */
.transition-none {
    transition: none;
}

.transition-all {
    transition: all var(--transition-base);
}

.transition-colors {
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.transition-opacity {
    transition: opacity var(--transition-fast);
}

.transition-shadow {
    transition: box-shadow var(--transition-base);
}

.transition-transform {
    transition: transform var(--transition-base);
}

/* Продолжительности */
.duration-75 {
    transition-duration: 75ms;
}

.duration-100 {
    transition-duration: 100ms;
}

.duration-150 {
    transition-duration: 150ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-500 {
    transition-duration: 500ms;
}

.duration-700 {
    transition-duration: 700ms;
}

.duration-1000 {
    transition-duration: 1000ms;
}

/* Тайминги */
.ease-linear {
    transition-timing-function: linear;
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Intersection Observer анимации */
.animate-on-scroll {
    opacity: 1;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Parallax эффект */
.parallax {
    transform: translateZ(0);
    transition: transform 0.1s ease-out;
}

/* Загрузчики */
.loading-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--color-border-light);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-dots::after {
    content: '';
    display: inline-block;
    animation: loading-dots 1.5s linear infinite;
}

@keyframes loading-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

/* Preferred motion настройки */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   ПРОДВИНУТЫЕ АНИМАЦИИ
   Сложные и красивые эффекты появления
   ======================================== */

/* Анимации с эластичностью */
@keyframes elasticIn {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    60% {
        transform: scale(1.1) rotate(-10deg);
    }
    80% {
        transform: scale(0.95) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes rubberBand {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.25, 0.75);
    }
    40% {
        transform: scale(0.75, 1.25);
    }
    50% {
        transform: scale(1.15, 0.85);
    }
    65% {
        transform: scale(0.95, 1.05);
    }
    75% {
        transform: scale(1.05, 0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* Анимации с отскоком */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }
    60% {
        opacity: 1;
        transform: translateY(-20px);
    }
    80% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Анимации с вращением */
@keyframes rotateIn {
    0% {
        opacity: 0;
        transform: rotate(-200deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0);
    }
}

@keyframes flipInX {
    0% {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }
    40% {
        transform: perspective(400px) rotateX(-20deg);
    }
    60% {
        transform: perspective(400px) rotateX(10deg);
    }
    80% {
        transform: perspective(400px) rotateX(-5deg);
    }
    100% {
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }
}

@keyframes flipInY {
    0% {
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }
    40% {
        transform: perspective(400px) rotateY(-20deg);
    }
    60% {
        transform: perspective(400px) rotateY(10deg);
    }
    80% {
        transform: perspective(400px) rotateY(-5deg);
    }
    100% {
        opacity: 1;
        transform: perspective(400px) rotateY(0deg);
    }
}

/* Анимации с качанием */
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes wobble {
    0% {
        transform: none;
    }
    15% {
        transform: translate3d(-25%, 0, 0) rotate(-5deg);
    }
    30% {
        transform: translate3d(20%, 0, 0) rotate(3deg);
    }
    45% {
        transform: translate3d(-15%, 0, 0) rotate(-3deg);
    }
    60% {
        transform: translate3d(10%, 0, 0) rotate(2deg);
    }
    75% {
        transform: translate3d(-5%, 0, 0) rotate(-1deg);
    }
    100% {
        transform: none;
    }
}

/* Анимации с эффектом печатания */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    0%, 50% {
        border-color: transparent;
    }
    51%, 100% {
        border-color: var(--color-accent);
    }
}

/* Анимации с градиентами */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/* Анимация с морфингом */
@keyframes morphing {
    0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
    25% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
    }
    50% {
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    }
    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }
    100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
}

/* Классы продвинутых анимаций */
.animate-elastic-in {
    animation: elasticIn 0.8s ease-out;
}

.animate-rubber-band {
    animation: rubberBand 0.8s ease-in-out;
}

.animate-bounce-in {
    animation: bounceIn 0.6s ease-out;
}

.animate-bounce-in-up {
    animation: bounceInUp 0.8s ease-out;
}

.animate-rotate-in {
    animation: rotateIn 0.6s ease-out;
}

.animate-flip-in-x {
    animation: flipInX 0.8s ease-out;
}

.animate-flip-in-y {
    animation: flipInY 0.8s ease-out;
}

.animate-swing {
    animation: swing 0.8s ease-in-out;
}

.animate-wobble {
    animation: wobble 0.8s ease-in-out;
}

.animate-typing {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--color-accent);
    animation: typing 3.5s steps(30, end), blink 0.75s step-end infinite;
}

.animate-gradient-shift {
    background: linear-gradient(-45deg, var(--color-accent), var(--color-accent-hover), var(--color-accent), var(--color-accent-hover));
    background-size: 400% 400%;
    animation: gradientShift 3s ease infinite;
}

.animate-shimmer {
    position: relative;
    overflow: hidden;
}

.animate-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: shimmer 2s infinite;
}

.animate-morphing {
    animation: morphing 6s ease-in-out infinite;
}

/* BEM-стиль анимационных классов */
.animate--fade-in-up,
.animate--fade-in-down,
.animate--fade-in-left,
.animate--fade-in-right,
.animate--scale-in {
    opacity: 1; /* Предотвращаем исчезновение элементов */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate--fade-in-up.animate {
    animation: fadeInUp 0.6s ease-out;
}

.animate--fade-in-down.animate {
    animation: fadeInDown 0.6s ease-out;
}

.animate--fade-in-left.animate {
    animation: fadeInLeft 0.6s ease-out;
}

.animate--fade-in-right.animate {
    animation: fadeInRight 0.6s ease-out;
}

.animate--scale-in.animate {
    animation: scaleIn 0.4s ease-out;
}

/* Дополнительные анимационные классы для полной поддержки */
.animate-fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

/* КРИТИЧНОЕ ИСПРАВЛЕНИЕ: Gallery-hero элементы должны быть всегда видимы */
section.gallery-hero .animate-fade-in-up,
section.gallery-hero .gallery-hero__title.animate-fade-in-up,
section.gallery-hero .gallery-hero__subtitle.animate-fade-in-up {
    opacity: 1;
    transform: translateY(0);
    transition: none;
}

.animate-fade-in-up.animate-in,
.animate-fade-in-up.animate {
    opacity: 1;
    transform: translateY(0);
    animation-fill-mode: forwards;
}

.animate-fade-in-down {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.6s ease-out;
}

.animate-fade-in-down.animate-in,
.animate-fade-in-down.animate {
    opacity: 1;
    transform: translateY(0);
    animation-fill-mode: forwards;
}

.animate-fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s ease-out;
}

.animate-fade-in-left.animate-in,
.animate-fade-in-left.animate {
    opacity: 1;
    transform: translateX(0);
    animation-fill-mode: forwards;
}

.animate-fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.6s ease-out;
}

.animate-fade-in-right.animate-in,
.animate-fade-in-right.animate {
    opacity: 1;
    transform: translateX(0);
    animation-fill-mode: forwards;
}

/* Задержки для анимаций */
.animate--delay-1 { animation-delay: 0.1s; }
.animate--delay-2 { animation-delay: 0.2s; }
.animate--delay-3 { animation-delay: 0.3s; }
.animate--delay-4 { animation-delay: 0.4s; }
.animate--delay-5 { animation-delay: 0.5s; }
.animate--delay-6 { animation-delay: 0.6s; }
.animate--delay-7 { animation-delay: 0.7s; }
.animate--delay-8 { animation-delay: 0.8s; }

/* Задержки анимаций */
.delay-100 {
    animation-delay: 0.1s;
    transition-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
    transition-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
    transition-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
    transition-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
    transition-delay: 0.5s;
}

.delay-600 {
    animation-delay: 0.6s;
    transition-delay: 0.6s;
}

.delay-700 {
    animation-delay: 0.7s;
    transition-delay: 0.7s;
}

.delay-800 {
    animation-delay: 0.8s;
    transition-delay: 0.8s;
}

.delay-900 {
    animation-delay: 0.9s;
    transition-delay: 0.9s;
}

.delay-1000 {
    animation-delay: 1s;
    transition-delay: 1s;
}

.delay-1000 {
    animation-delay: 1s;
}

/* Анимации при скролле */
.scroll-animation {
    opacity: 1; /* Изменено с 0 на 1 для предотвращения исчезновения */
    transform: translateY(50px);
    transition: all 0.6s ease-out;
}

.scroll-animation.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Hover анимации */
.hover-float:hover {
    animation: float 2s ease-in-out infinite;
}

.hover-pulse:hover {
    animation: pulse 1s ease-in-out infinite;
}

.hover-shake:hover {
    animation: shake 0.5s ease-in-out;
}

/* Анимация загрузки */
@keyframes loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-border-light);
    border-top: 4px solid var(--color-accent);
    border-radius: 50%;
    animation: loading 1s linear infinite;
}

/* Анимация прогресс-бара */
@keyframes progressFill {
    from {
        width: 0%;
    }
    to {
        width: var(--progress, 100%);
    }
}

.animate-progress {
    animation: progressFill 2s ease-out;
}

/* Эффект пишущей машинки для заголовков */
.typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--color-accent);
    animation: 
        typing 4s steps(40, end),
        blink 0.75s step-end infinite;
}

/* Анимация появления элементов списка */
.animate-list-item {
    opacity: 1;
    transform: translateX(-20px);
    animation: fadeInLeft 0.5s ease-out forwards;
}

.animate-list-item:nth-child(1) { animation-delay: 0.1s; }
.animate-list-item:nth-child(2) { animation-delay: 0.2s; }
.animate-list-item:nth-child(3) { animation-delay: 0.3s; }
.animate-list-item:nth-child(4) { animation-delay: 0.4s; }
.animate-list-item:nth-child(5) { animation-delay: 0.5s; }

/* Fade-in анимации через IntersectionObserver - ИСПРАВЛЕНО */
.fade-in {
    opacity: 1; /* Изменено с 0 на 1 для стабильности */
    transform: translateY(0); /* Изменено с 30px на 0 */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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



/* Гарантируем видимость CTA блока в портфолио с высокой специфичностью */
section#portfolio.portfolio-categories .portfolio-categories__cta.animate-fade-in-up {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    display: block;
}

/* Правило для всех анимированных элементов в портфолио после загрузки */
body.page-loaded section.portfolio-categories .animate-fade-in-up,
body.force-visible section.portfolio-categories .animate-fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

/* Стабильность видимости для flashback-promo */
section.flashback-promo {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    position: relative;
    z-index: auto;
    overflow: visible;
}

section.flashback-promo .flashback-promo__header {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.flashback-promo .flashback-card {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.flashback-promo .section-title,
section.flashback-promo .section-subtitle {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* Высокоспецифичные селекторы для анимированных элементов flashback-promo */
html.page-loaded section.flashback-promo [class*="animate-"],
html.force-visible section.flashback-promo [class*="animate-"],
.no-js section.flashback-promo [class*="animate-"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    animation-fill-mode: both;
}

html.page-loaded section.flashback-promo [class*="delay-"],
html.force-visible section.flashback-promo [class*="delay-"],
.no-js section.flashback-promo [class*="delay-"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    animation-fill-mode: both;
}

/* Переопределяем начальные состояния анимаций для flashback-promo */
html.page-loaded section.flashback-promo .animate-fade-in-up,
html.force-visible section.flashback-promo .animate-fade-in-up,
.no-js section.flashback-promo .animate-fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

html.page-loaded section.flashback-promo .animate-fade-in-up.animate-in,
html.force-visible section.flashback-promo .animate-fade-in-up.animate-in,
.no-js section.flashback-promo .animate-fade-in-up.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Стабильность видимости для approach секции */
section.services .approach__grid {
    display: grid;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.services .approach-card {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.services .approach-card__content {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.services .approach-card__title,
section.services .approach-card__description,
section.services .approach-card__guarantee {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.services .approach-card__icon {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.services .guarantee-badge-mini {
    display: inline-block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* =================================================================
   FAQ ANIMATIONS STABILIZATION
   Стабилизация анимаций для FAQ секции
   ================================================================= */

/* Базовые стили видимости для FAQ */
section.faq {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.faq .faq__container {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.faq .faq__header {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.faq .faq__list {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.faq .faq-item {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.faq .faq-item__trigger {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.faq .faq-item__question {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.faq .faq-item__icon {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.faq .faq-item__content {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

section.faq .faq-item__answer {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
}

/* Высокоспецифичные селекторы для анимированных элементов FAQ */
html.page-loaded section.faq .slide-up,
html.force-visible section.faq .slide-up,
.no-js section.faq .slide-up {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    animation-fill-mode: both;
}

html.page-loaded section.faq .fade-in,
html.force-visible section.faq .fade-in,
.no-js section.faq .fade-in {
    opacity: 1;
    visibility: visible;
    transform: none;
    animation-fill-mode: both;
}

/* Переопределяем начальные состояния анимаций для FAQ */
html.page-loaded section.faq .faq-item,
html.force-visible section.faq .faq-item,
.no-js section.faq .faq-item,
section.faq .faq-item {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

section.faq .faq-item.slide-up {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Принудительная видимость для FAQ после загрузки */
.page-loaded section.faq,
.page-loaded section.faq * {
    opacity: 1;
    visibility: visible;
}

.force-visible section.faq,
.force-visible section.faq * {
    opacity: 1;
    visibility: visible;
}

/* =================================================================
   END FAQ ANIMATIONS STABILIZATION
   ================================================================= */

/* =================================================================
   CONTACT INFO STABILIZATION
   Стабилизация видимости блока контактной информации
   ================================================================= */

/* Базовые стили видимости для contact-info */
.contact-info {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: static !important;
}

/* Высокоспецифичные селекторы для contact-info */
section .contact-info,
section .contact-info.animate-fade-in-up,
section .contact-info.delay-600 {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Принудительная видимость после загрузки */
.page-loaded .contact-info,
.force-visible .contact-info {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Устранение конфликтов с AOS */
.contact-info[data-aos] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* =================================================================
   END CONTACT INFO STABILIZATION
   ================================================================= */

/* =============================================
   ФИНАЛЬНОЕ РЕШЕНИЕ ДЛЯ GALLERY-HERO
   Максимальная специфичность без !important
   ============================================= */

/* Переопределяем все анимации для gallery-hero навсегда */
html body main section.gallery-hero,
html body main section.gallery-hero .container,
html body main section.gallery-hero .gallery-hero__content,
html body main section.gallery-hero .gallery-hero__title,
html body main section.gallery-hero .gallery-hero__subtitle,
html body main section.gallery-hero h1,
html body main section.gallery-hero p {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    animation: none;
    transition: none;
    display: block;
}

/* Все анимированные элементы в gallery-hero */
html body main section.gallery-hero .animate-fade-in-up,
html body main section.gallery-hero .animate-fade-in-up.delay-100,
html body main section.gallery-hero .animate-fade-in-up.delay-200,
html body main section.gallery-hero h1.gallery-hero__title.animate-fade-in-up,
html body main section.gallery-hero p.gallery-hero__subtitle.animate-fade-in-up {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    animation: none;
    transition: none;
}

/* Защита от JavaScript изменений */
html body main section.gallery-hero *[class*="animate"],
html body main section.gallery-hero *[class*="delay"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ========================================
   АДАПТИВНОСТЬ
   Responsive utilities и media queries
   ======================================== */

/* Display утилиты */
.hidden {
    display: none;
}

.block {
    display: block;
}

.inline {
    display: inline;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.grid {
    display: grid;
}

.inline-grid {
    display: inline-grid;
}

/* Позиционирование */
.static {
    position: static;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.sticky {
    position: sticky;
}

/* Width */
.w-auto {
    width: auto;
}

.w-full {
    width: 100%;
}

.w-3\/4 {
    width: 75%;
}

/* Height */
.h-auto {
    height: auto;
}

.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

/* Overflow */
.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

/* Адаптивные префиксы для мобильных */
@media (max-width: 639px) {
    .sm\:hidden {
        display: none;
    }
    
    .sm\:block {
        display: block;
    }
    
    .sm\:flex {
        display: flex;
    }
    
    .sm\:grid {
        display: grid;
    }
    
    .sm\:w-full {
        width: 100%;
    }
    
    .sm\:text-center {
        text-align: center;
    }
    
    .sm\:text-left {
        text-align: left;
    }
    
    .sm\:px-4 {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }
    
    .sm\:py-8 {
        padding-top: var(--spacing-8);
        padding-bottom: var(--spacing-8);
    }
}

/* Планшеты */
@media (min-width: 640px) {
    .sm\:hidden {
        display: none;
    }
    
    .sm\:block {
        display: block;
    }
    
    .sm\:flex {
        display: flex;
    }
    
    .sm\:grid {
        display: grid;
    }
    
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .sm\:w-1\/2 {
        width: 50%;
    }
    
    .sm\:w-auto {
        width: auto;
    }
}

/* Средние экраны */
@media (min-width: 768px) {
    .md\:hidden {
        display: none;
    }
    
    .md\:block {
        display: block;
    }
    
    .md\:flex {
        display: flex;
    }
    
    .md\:grid {
        display: grid;
    }
    
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .md\:w-1\/2 {
        width: 50%;
    }
    
    .md\:w-1\/3 {
        width: 33.333333%;
    }
    
    .md\:w-2\/3 {
        width: 66.666667%;
    }
    
    .md\:text-left {
        text-align: left;
    }
    
    .md\:text-center {
        text-align: center;
    }
    
    .md\:px-6 {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }
    
    .md\:py-12 {
        padding-top: var(--spacing-12);
        padding-bottom: var(--spacing-12);
    }
}

/* Большие экраны */
@media (min-width: 1024px) {
    .lg\:hidden {
        display: none;
    }
    
    .lg\:block {
        display: block;
    }
    
    .lg\:flex {
        display: flex;
    }
    
    .lg\:grid {
        display: grid;
    }
    
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .lg\:w-1\/3 {
        width: 33.333333%;
    }
    
    .lg\:w-1\/4 {
        width: 25%;
    }
    
    .lg\:w-auto {
        width: auto;
    }
    
    .lg\:px-8 {
        padding-left: var(--spacing-8);
        padding-right: var(--spacing-8);
    }
    
    .lg\:py-16 {
        padding-top: var(--spacing-16);
        padding-bottom: var(--spacing-16);
    }
}

/* XL экраны */
@media (min-width: 1280px) {
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .xl\:grid-cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .xl\:grid-cols-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .xl\:w-1\/4 {
        width: 25%;
    }
    
    .xl\:w-1\/5 {
        width: 20%;
    }
}

/* 2XL экраны */
@media (min-width: 1536px) {
    .\\32xl\\:grid-cols-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .\\32xl\\:px-0 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Утилиты для скрытия на разных размерах */
.show-mobile {
    display: block;
}

.show-tablet {
    display: none;
}

.show-desktop {
    display: none;
}

@media (min-width: 640px) {
    .show-mobile {
        display: none;
    }
    
    .show-tablet {
        display: block;
    }
}

@media (min-width: 1024px) {
    .show-tablet {
        display: none;
    }
    
    .show-desktop {
        display: block;
    }
}

/* Container queries (для современных браузеров) */
@container (min-width: 400px) {
    .container-sm\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (min-width: 600px) {
    .container-md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Landscape/Portrait */
@media (orientation: landscape) {
    .landscape\:h-screen {
        height: 100vh;
    }
}

@media (orientation: portrait) {
    .portrait\:h-auto {
        height: auto;
    }
}

/* Print стили */
@media print {
    .print\:hidden {
        display: none;
    }
    
    .print\:block {
        display: block;
    }
}

/* Dark mode готовность */
@media (prefers-color-scheme: dark) {
    .dark\:bg-gray-900 {
        background-color: var(--color-gray-900);
    }
    
    .dark\:text-white {
        color: var(--color-white);
    }
}

/* ========================================
   КНОПКА "НАВЕРХ" И СКРОЛЛ-ЭФФЕКТЫ
   Удобная навигация по сайту
   ======================================== */

/* Кнопка наверх */
.scroll-to-top {
    position: fixed;
    bottom: var(--spacing-6);
    right: var(--spacing-6);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    border: none;
    border-radius: var(--radius-full);
    color: var(--color-text-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    z-index: var(--z-fixed);
    transition: all 0.3s ease;
    transform: translateY(100px);
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 8px 25px rgba(201, 169, 110, 0.3);
}

.scroll-to-top.visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 15px 35px rgba(201, 169, 110, 0.4);
}

.scroll-to-top:active {
    transform: translateY(-1px) scale(1.05);
}

/* Индикатор прогресса чтения */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(201, 169, 110, 0.2);
    z-index: var(--z-fixed);
}

.reading-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    width: 0%;
    transition: width 0.1s ease;
}

/* Плавная прокрутка для всего сайта */
html {
    scroll-behavior: smooth;
}

/* Улучшенные стили для прокрутки */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgb(35, 111, 243, 0.4);

}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--color-accent-hover) 0%, var(--color-accent-dark) 100%);
}

/* =================================================================
   SCROLL ANIMATIONS
   Анимации элементов при прокрутке страницы
   ================================================================= */

/* Базовые состояния для анимаций */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Специфичные анимации */
.fade-in.animate-on-scroll {
  transform: none;
}

.fade-in.animate-on-scroll.animated {
  opacity: 1;
}

.slide-up.animate-on-scroll {
  transform: translateY(50px);
}

.slide-up.animate-on-scroll.animated {
  transform: translateY(0);
}

.slide-left.animate-on-scroll {
  transform: translateX(-50px);
}

.slide-left.animate-on-scroll.animated {
  transform: translateX(0);
}

.slide-right.animate-on-scroll {
  transform: translateX(50px);
}

.slide-right.animate-on-scroll.animated {
  transform: translateX(0);
}

.zoom-in.animate-on-scroll {
  transform: scale(0.8);
}

.zoom-in.animate-on-scroll.animated {
  transform: scale(1);
}

/* Анимации для портфолио */
.portfolio-item.animate-on-scroll {
  transform: translateY(40px) scale(0.95);
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item.animate-on-scroll.animated {
  transform: translateY(0) scale(1);
}

/* Анимации для статистических карточек */
.stat-card.animate-on-scroll {
  transform: translateY(30px) scale(0.9);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card.animate-on-scroll.animated {
  transform: translateY(0) scale(1);
}

/* Анимации для заголовков */
.section-title.animate-on-scroll {
  transform: translateY(40px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.section-title.animate-on-scroll.animated {
  transform: translateY(0);
}

.section-subtitle.animate-on-scroll {
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.section-subtitle.animate-on-scroll.animated {
  transform: translateY(0);
}

/* Каскадные анимации для групп элементов */
.portfolio-grid .portfolio-item.animate-on-scroll {
  transition-delay: var(--animation-delay, 0s);
}

.portfolio-grid .portfolio-item:nth-child(1) { --animation-delay: 0s; }
.portfolio-grid .portfolio-item:nth-child(2) { --animation-delay: 0.1s; }
.portfolio-grid .portfolio-item:nth-child(3) { --animation-delay: 0.2s; }
.portfolio-grid .portfolio-item:nth-child(4) { --animation-delay: 0.3s; }
.portfolio-grid .portfolio-item:nth-child(5) { --animation-delay: 0.4s; }
.portfolio-grid .portfolio-item:nth-child(6) { --animation-delay: 0.5s; }
.portfolio-grid .portfolio-item:nth-child(7) { --animation-delay: 0.6s; }
.portfolio-grid .portfolio-item:nth-child(8) { --animation-delay: 0.7s; }
.portfolio-grid .portfolio-item:nth-child(9) { --animation-delay: 0.8s; }

/* Responsive анимации */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 768px) {
  .animate-on-scroll {
    transform: translateY(20px);
    transition-duration: 0.4s;
  }
  
  .portfolio-grid .portfolio-item.animate-on-scroll {
    transition-delay: 0s;
  }
}

/* Анимации загрузки контента */
.loading-skeleton {
  background: linear-gradient(90deg, 
    var(--color-background-light) 25%, 
    var(--color-background-lighter) 50%, 
    var(--color-background-light) 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

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

/* Pulse анимация для кнопок и интерактивных элементов */
.pulse-on-scroll.animate-on-scroll.animated {
  animation: gentle-pulse 2s infinite;
}

@keyframes gentle-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* ========================================
   СИСТЕМА ELEVATION И ТЕНЕЙ
   Glassmorphism и многослойные тени
   ======================================== */

/* Утилитарные классы elevation */
.elevation-1 {
    box-shadow: var(--shadow-glass-1);
}

.elevation-2 {
    box-shadow: var(--shadow-glass-2);
}

.elevation-3 {
    box-shadow: var(--shadow-glass-3);
}

.elevation-4 {
    box-shadow: var(--shadow-glass-4);
}

.elevation-5 {
    box-shadow: var(--shadow-glass-5);
}

/* Hover эффекты для теней */
.elevation-hover-1 {
    box-shadow: var(--shadow-glass-1);
    transition: var(--transition-base);
}

.elevation-hover-1:hover {
    box-shadow: var(--shadow-glass-2);
    transform: translateY(-1px);
}

.elevation-hover-2 {
    box-shadow: var(--shadow-glass-2);
    transition: var(--transition-base);
}

.elevation-hover-2:hover {
    box-shadow: var(--shadow-glass-3);
    transform: translateY(-2px);
}

.elevation-hover-3 {
    box-shadow: var(--shadow-glass-3);
    transition: var(--transition-base);
}

.elevation-hover-3:hover {
    box-shadow: var(--shadow-glass-4);
    transform: translateY(-3px);
}

.elevation-hover-4 {
    box-shadow: var(--shadow-glass-4);
    transition: var(--transition-base);
}

.elevation-hover-4:hover {
    box-shadow: var(--shadow-glass-5);
    transform: translateY(-4px);
}

/* Специальные эффекты теней */
.shadow-accent-light {
    box-shadow: var(--shadow-accent-light);
}

.shadow-accent-medium {
    box-shadow: var(--shadow-accent-medium);
}

.shadow-accent-heavy {
    box-shadow: var(--shadow-accent-heavy);
}

/* Анимированные тени */
.shadow-pulse {
    animation: shadowPulse 3s ease-in-out infinite;
}

@keyframes shadowPulse {
    0%, 100% {
        box-shadow: var(--shadow-glass-2);
    }
    50% {
        box-shadow: var(--shadow-glass-4);
    }
}

.shadow-glow {
    animation: shadowGlow 2s ease-in-out infinite alternate;
}

@keyframes shadowGlow {
    0% {
        box-shadow: var(--shadow-glass-3);
    }
    100% {
        box-shadow: var(--shadow-accent-medium);
    }
}

/* Тени для карточек */
.card-shadow {
    box-shadow: var(--shadow-glass-2);
    transition: var(--transition-base);
}

.card-shadow:hover {
    box-shadow: var(--shadow-glass-4);
    transform: translateY(-4px) scale(1.02);
}

/* Тени для модалов */
.modal-shadow {
    box-shadow: var(--shadow-glass-5);
    backdrop-filter: var(--glass-blur-heavy);
}

/* Тени для навигации */
.nav-shadow {
    box-shadow: var(--shadow-glass-2);
    backdrop-filter: var(--glass-blur);
}

/* Тени для лайтбокса */
.lightbox-shadow {
    box-shadow: var(--shadow-glass-5);
    backdrop-filter: var(--glass-blur-heavy);
}

/* Glassmorphism утилиты */
.glass-light {
    background: var(--glass-bg-light);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}

.glass-medium {
    background: var(--glass-bg-medium);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}

.glass-dark {
    background: var(--glass-bg-dark);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}

.glass-accent {
    background: var(--glass-bg-accent);
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
}

/* Комбинированные эффекты */
.glass-card {
    background: var(--glass-bg-light);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass-2);
    border-radius: var(--radius-xl);
    transition: var(--transition-base);
}

.glass-card:hover {
    box-shadow: var(--shadow-glass-4);
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.95);
}

/* ========================================
   GLASSMORPHISM УТИЛИТЫ
   Современные стили для премиального UI
   ======================================== */

/* Базовые glassmorphism классы */
.glass {
    background: var(--glass-bg-light);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}

.glass-heavy {
    background: var(--glass-bg-medium);
    backdrop-filter: var(--glass-blur-heavy);
    border: 1px solid var(--glass-border);
}

.glass-dark {
    background: var(--glass-bg-dark);
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-text-inverse);
}

.glass-accent {
    background: var(--glass-bg-accent);
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
}

/* Эффекты глубины */
.depth-1 { box-shadow: var(--shadow-glass-1); }
.depth-2 { box-shadow: var(--shadow-glass-2); }
.depth-3 { box-shadow: var(--shadow-glass-3); }
.depth-4 { box-shadow: var(--shadow-glass-4); }
.depth-5 { box-shadow: var(--shadow-glass-5); }

/* Hover эффекты глубины */
.depth-hover {
    transition: var(--transition-base);
}

.depth-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glass-4);
}

/* Магнитные эффекты */
.magnetic {
    transition: var(--transition-base);
    cursor: pointer;
}

.magnetic:hover {
    transform: translateY(-2px) scale(1.02);
}

/* Морфинг эффекты */
.morph-gentle {
    transition: var(--transition-spring);
    border-radius: var(--radius-xl);
}

.morph-gentle:hover {
    border-radius: var(--radius-2xl);
    transform: scale(1.05);
}

/* Цветные акценты */
.accent-glow {
    position: relative;
    overflow: visible;
}

.accent-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(
        45deg,
        rgba(var(--color-accent-rgb), 0.2),
        rgba(var(--color-accent-rgb), 0.1),
        rgba(var(--color-accent-rgb), 0.2)
    );
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: var(--transition-base);
    filter: blur(8px);
}

.accent-glow:hover::before {
    opacity: 1;
}

/* Анимации появления */
.fade-in {
    animation: fadeIn 0.6s ease-out;
}

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

.slide-up {
    animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.zoom-in {
    animation: zoomIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Floating эффекты */
.float {
    animation: float 6s ease-in-out infinite;
}

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

.float-gentle {
    animation: floatGentle 4s ease-in-out infinite;
}

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

/* Pulse эффекты */
.pulse-soft {
    animation: pulseSoft 2s ease-in-out infinite;
}

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

.pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: var(--shadow-glass-2);
    }
    50% {
        box-shadow: var(--shadow-accent-medium);
    }
}

/* Ripple эффект */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.ripple:active::before {
    width: 300px;
    height: 300px;
}

/* Parallax эффекты */
.parallax-gentle {
    transform-style: preserve-3d;
    transition: var(--transition-base);
}

.parallax-gentle:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
}

/* Градиентные акценты */
.gradient-accent {
    background: linear-gradient(
        135deg,
        rgba(var(--color-accent-rgb), 0.1),
        rgba(var(--color-accent-rgb), 0.05)
    );
}

.gradient-shimmer {
    position: relative;
    overflow: hidden;
}

.gradient-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.8s ease-in-out;
}

.gradient-shimmer:hover::before {
    left: 100%;
}

/* Состояния интерактивности */
.interactive {
    cursor: pointer;
    transition: var(--transition-base);
    user-select: none;
}

.interactive:hover {
    transform: translateY(-2px);
}

.interactive:active {
    transform: translateY(0);
    transition-duration: var(--transition-micro);
}

/* Специальные borders */
.border-gradient {
    position: relative;
    background: var(--glass-bg-light);
    border-radius: var(--radius-xl);
}

.border-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    background: linear-gradient(
        45deg,
        rgba(var(--color-accent-rgb), 0.3),
        rgba(var(--color-accent-rgb), 0.1),
        rgba(var(--color-accent-rgb), 0.3)
    );
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* Дополнительные утилиты */
.blur-light { backdrop-filter: blur(5px); }
.blur-medium { backdrop-filter: blur(10px); }
.blur-heavy { backdrop-filter: blur(20px); }
.blur-extreme { backdrop-filter: blur(40px); }

.rounded-glass { border-radius: var(--radius-xl); }
.rounded-glass-large { border-radius: var(--radius-2xl); }
.rounded-glass-full { border-radius: var(--radius-full); }

/* ========================================
   СТРАНИЦЫ ГАЛЕРЕЙ
   Стили для отдельных страниц портфолио
   ======================================== */

/* Хлебные крошки */
.breadcrumbs {
    padding: var(--spacing-6) 0;
    background: var(--color-background-alt);
    border-bottom: 1px solid var(--color-border-light);
}

.breadcrumbs__nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.breadcrumbs__link {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumbs__link:hover {
    color: var(--color-accent);
}

.breadcrumbs__separator {
    color: var(--color-text-tertiary);
}

.breadcrumbs__current {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

/* Герой галереи */
.gallery-hero {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, var(--color-background) 0%, var(--color-background-alt) 100%);
    text-align: center;
}

.gallery-hero__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
}

.gallery-hero__subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto var(--spacing-8);
}

.gallery-hero__stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-8);
    flex-wrap: wrap;
}

.gallery-hero__stat {
    text-align: center;
}

.gallery-hero__stat-number {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    margin-bottom: var(--spacing-1);
}

.gallery-hero__stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Галерея фотографий */
.photo-gallery {
    padding: var(--spacing-20) 0;
    display: block;
    visibility: visible;
    opacity: 1;
}

.photo-gallery__grid {
    display: grid;
    visibility: visible;
    opacity: 1;
    grid-template-columns: repeat(auto-fill, minmax(350px, 400px));
    gap: var(--spacing-6);
    justify-content: center;
}

.photo-gallery__item {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: block;
    visibility: visible;
    opacity: 1;
}

.photo-gallery__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.photo-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.photo-gallery__item:hover img {
    transform: scale(1.05);
}

.photo-gallery__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    color: white;
    padding: 1.5rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 2;
}

.photo-gallery__item:hover .photo-gallery__overlay {
    transform: translateY(0);
}

.photo-gallery__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: white;
}

.photo-gallery__description {
    font-size: 0.875rem;
    opacity: 0.9;
    color: white;
}

/* Информация о съемке */
.service-info {
    padding: var(--spacing-20) 0;
    background: var(--color-background-alt);
}

.service-info__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-12);
    align-items: start;
}

.service-info__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-6);
}

.service-info__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-info__list li {
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--color-border-light);
    position: relative;
    padding-left: var(--spacing-6);
}

.service-info__list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
}

.service-info__list li:last-child {
    border-bottom: none;
}

.service-info__prices-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-6);
    text-align: center;
}

/* Карточки цен */
.price-card {
    background: var(--color-background);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-4);
    border: 2px solid var(--color-border-light);
    transition: all var(--transition-normal);
}

.price-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.price-card--featured {
    border-color: var(--color-accent);
    position: relative;
}

.price-card--featured:before {
    content: "Популярный";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: var(--color-text-inverse);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.price-card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
    text-align: center;
}

.price-card__price {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    text-align: center;
    margin-bottom: var(--spacing-4);
}

.price-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.price-card__features li {
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-border-light);
    position: relative;
    padding-left: var(--spacing-5);
    font-size: var(--font-size-sm);
}

.price-card__features li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

.price-card__features li:last-child {
    border-bottom: none;
}

/* Индивидуальный расчет стоимости */
.pricing-info {
    background: var(--color-surface);
    border-radius: var(--border-radius-large);
    padding: var(--spacing-8);
    border: 2px solid var(--color-border);
    transition: all 0.3s ease;
}

.pricing-info:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.pricing-info__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
    text-align: center;
}

.pricing-info__description {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: var(--spacing-6);
    line-height: 1.6;
}

.pricing-factors {
    margin-bottom: var(--spacing-6);
}

.pricing-factors__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-4);
}

.pricing-factors__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-factors__list li {
    position: relative;
    padding: var(--spacing-3) 0 var(--spacing-3) var(--spacing-6);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.pricing-factors__list li:before {
    content: "→";
    position: absolute;
    left: 0;
    top: var(--spacing-3);
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
}

.pricing-factors__list li:last-child {
    border-bottom: none;
}

.pricing-factors__list li strong {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.pricing-contact {
    background: rgba(var(--color-accent-rgb), 0.1);
    border-radius: var(--border-radius-medium);
    padding: var(--spacing-6);
    text-align: center;
}

.pricing-contact__text {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-4);
    line-height: 1.6;
}

.pricing-contact__text strong {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

/* CTA секция */
.cta-section {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    color: var(--color-text-inverse);
    text-align: center;
}

.cta-content__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-4);
}

.cta-content__text {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-8);
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-content__actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

/* Кнопка "Загрузить еще" */
.photo-gallery__load-more {
    text-align: center;
    margin-top: var(--spacing-12);
}

/* Информация о съемке */
.service-info__technical {
    background: var(--color-background-alt);
    padding: var(--spacing-8);
    border-radius: 12px;
    border: 1px solid var(--color-border-light);
}

.service-info__technical-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-6);
}

.technical-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.technical-info__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.technical-info__item:last-child {
    border-bottom: none;
}

.technical-info__label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.technical-info__value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.gallery-hero__meta {
    display: flex;
    justify-content: center;
    gap: var(--spacing-6);
    margin-top: var(--spacing-6);
}

.gallery-hero__count,
.gallery-hero__type {
    background: rgba(255, 255, 255, 0.1);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-light);
}

/* Стабильные стили для photo-gallery, предотвращаем исчезновение */
.photo-gallery {
    display: block;
    visibility: visible;
    opacity: 1;
}

.photo-gallery .photo-gallery__grid {
    display: grid;
    visibility: visible;
    opacity: 1;
}

.photo-gallery .photo-gallery__item {
    display: block;
    visibility: visible;
    opacity: 1;
    position: relative;
}

/* Высокая специфичность для стабильности элементов галереи */
section.photo-gallery {
    display: block;
    visibility: visible;
    opacity: 1;
}

section.photo-gallery .photo-gallery__grid {
    display: grid;
    visibility: visible;
    opacity: 1;
}

section.photo-gallery .photo-gallery__item {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Специфичные селекторы для анимированных элементов */
section.photo-gallery .photo-gallery__item[class*="animate-"] {
    opacity: 1;
    visibility: visible;
}

section.photo-gallery .photo-gallery__item[class*="delay-"] {
    opacity: 1;
    visibility: visible;
}

/* Переопределяем начальные состояния анимаций для галереи */
section.photo-gallery .photo-gallery__item.animate-fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

section.photo-gallery .photo-gallery__item.animate-fade-in-up.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Адаптивность */
@media (max-width: 768px) {
    .gallery-hero {
        padding: var(--spacing-16) 0;
    }
    
    .gallery-hero__stats {
        gap: var(--spacing-6);
    }
    
    .photo-gallery {
        padding: var(--spacing-16) 0;
    }
    
    .photo-gallery__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .service-info {
        padding: var(--spacing-16) 0;
    }
    
    .service-info__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }
    
    .cta-section {
        padding: var(--spacing-16) 0;
    }
    
    .cta-content__actions {
        flex-direction: column;
        align-items: center;
    }
    
    .lightbox__container {
        max-width: 95vw;
        max-height: 85vh;
    }
    
    .lightbox__close {
        top: -60px;
        right: 0;
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
    
    .lightbox__prev,
    .lightbox__next {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }
    
    .lightbox__prev {
        left: -60px;
    }
    
    .lightbox__next {
        right: -60px;
    }
    
    .lightbox__counter {
        bottom: -60px;
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .gallery-hero__meta {
        flex-direction: column;
        gap: var(--spacing-3);
        align-items: center;
    }
}

@media (max-width: 480px) {
    .breadcrumbs__nav {
        flex-wrap: wrap;
        gap: var(--spacing-1);
    }
    
    .gallery-hero__stats {
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    .photo-gallery__grid {
        grid-template-columns: 1fr;
    }
    
    .lightbox__prev {
        left: 10px;
        top: 20px;
        transform: none;
    }
    
    .lightbox__next {
        right: 10px;
        top: 20px;
        transform: none;
    }
    
    .lightbox__close {
        top: 10px;
        right: 10px;
    }
    
    .lightbox__counter {
        bottom: 20px;
    }
}