/* =====================================================
   M&DOMS CONSTRUCTION - PREMIUM DESIGN SYSTEM
   Modern Construction Materials Theme
   ===================================================== */

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Основные стили для интерактивных элементов */
a, button, .btn, .nav-link, .project-btn, .filter-btn, 
.modal-close, .nav-toggle, .btn-project-details {
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Overlay элементы не должны блокировать клики - удалено дублирование */

:root {
    /* Material-Inspired Color Palette */
    --glass-clear: rgba(255, 255, 255, 0.1);
    --glass-frosted: rgba(255, 255, 255, 0.05);
    --glass-shadow: rgba(0, 0, 0, 0.1);
    
    --metal-chrome: #C0C0C0;
    --metal-steel: #71797E;
    --metal-dark: #36454F;
    --metal-light: #E5E4E2;
    --metal-gradient: linear-gradient(135deg, #C0C0C0, #71797E);
    
    --wood-light: #DEB887;
    --wood-medium: #A0522D;
    --wood-dark: #654321;
    --wood-walnut: #5C4033;
    --wood-gradient: linear-gradient(135deg, #DEB887, #8B4513);
    
    --brick-red: #B22222;
    --brick-orange: #CC5500;
    --brick-clay: #BC5A45;
    --brick-dark: #8B3A3A;
    --brick-gradient: linear-gradient(135deg, #CC5500, #8B3A3A);
    
    /* Modern Neutrals */
    --black-pure: #000000;
    --black-soft: #1A1A1A;
    --gray-900: #212121;
    --gray-800: #424242;
    --gray-700: #616161;
    --gray-600: #757575;
    --gray-500: #9E9E9E;
    --gray-400: #BDBDBD;
    --gray-300: #E0E0E0;
    --gray-200: #EEEEEE;
    --gray-100: #F5F5F5;
    --white-pure: #FFFFFF;
    --white-soft: #FAFAFA;
    
    /* Accent Colors */
    --accent-gold: #FFD700;
    --accent-copper: #B87333;
    --accent-bronze: #CD7F32;
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
    
    /* Spacing System */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    
    /* Layout */
    --container-max: 1400px;
    --section-padding: clamp(60px, 10vw, 120px);
    
    /* Borders & Shadows */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Glass Effects */
    --glass-blur: blur(20px);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    --glass-border: 1px solid rgba(255, 255, 255, 0.18);
    
    /* Transitions */
    --transition-fast: 150ms 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.68, -0.55, 0.265, 1.55);
}

/* Global Styles */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    font-size: 16px;
    /* Отключаем восстановление позиции прокрутки браузером */
    overscroll-behavior: none;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--gray-200);
    /* Принудительно начинаем страницу с верха */
    scroll-behavior: smooth;
    overscroll-behavior: none;
    background: 
        linear-gradient(135deg, 
            rgba(26, 26, 26, 0.95) 0%, 
            rgba(34, 34, 34, 0.92) 25%, 
            rgba(31, 31, 31, 0.95) 50%, 
            rgba(38, 38, 38, 0.92) 75%, 
            rgba(28, 28, 28, 0.95) 100%
        );
    background-attachment: fixed;
    background-size: 200% 200%;
    animation: backgroundShift 20s ease infinite;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

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

/* Premium Construction Material Background Pattern */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Строительная сетка с золотыми акцентами */
        radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(184, 115, 51, 0.03) 0%, transparent 50%),
        /* Премиум металлическая сетка */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 60px,
            rgba(255, 255, 255, 0.03) 60px,
            rgba(255, 255, 255, 0.03) 61px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 60px,
            rgba(255, 255, 255, 0.03) 60px,
            rgba(255, 255, 255, 0.03) 61px
        ),
        /* Диагональная текстура */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 120px,
            rgba(255, 215, 0, 0.015) 120px,
            rgba(255, 215, 0, 0.015) 122px
        ),
        /* Деревянная текстура */
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 180px,
            rgba(184, 115, 51, 0.01) 180px,
            rgba(184, 115, 51, 0.01) 181px
        );
    opacity: 1;
    pointer-events: none;
    z-index: -1;
    animation: patternFloat 30s ease-in-out infinite;
}

@keyframes patternFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(1px, -1px) rotate(0.1deg); }
    50% { transform: translate(-1px, 1px) rotate(-0.1deg); }
    75% { transform: translate(1px, 1px) rotate(0.05deg); }
}

/* Typography System */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--gray-100);
    /* WebKit оптимизация */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 { 
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
}

h2 { 
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
}

h3 { 
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
}

h4 { 
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
}

p {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.8;
    color: var(--gray-300);
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

/* Mobile responsive adjustments for container */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--space-lg);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-md);
    }
}

/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: 
        linear-gradient(135deg, 
            var(--black-soft) 0%, 
            #2a2a2a 50%, 
            var(--black-soft) 100%
        );
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}

.preloader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Строительная сетка */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 60px,
            rgba(255, 215, 0, 0.05) 60px,
            rgba(255, 215, 0, 0.05) 61px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 60px,
            rgba(255, 215, 0, 0.05) 60px,
            rgba(255, 215, 0, 0.05) 61px
        );
    animation: gridMove 4s linear infinite;
    pointer-events: none;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}



.preloader-content {
    text-align: center;
    position: relative;
    animation: slideInFromBottom 1s ease-out;
}

@keyframes slideInFromBottom {
    0% { 
        opacity: 0;
        transform: translateY(50px);
    }
    100% { 
        opacity: 1;
        transform: translateY(0);
    }
}

.logo-animation {
    position: relative;
    margin-bottom: var(--space-2xl);
}

.preloader-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: var(--radius-lg);
    animation: constructionBuild 2s ease-in-out infinite;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.3);
}

@keyframes constructionBuild {
    0% { 
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    25% { 
        transform: scale(1.1) rotate(5deg);
        filter: brightness(1.2);
    }
    50% { 
        transform: scale(1) rotate(-5deg);
        filter: brightness(1.1);
    }
    75% { 
        transform: scale(1.05) rotate(3deg);
        filter: brightness(1.15);
    }
    100% { 
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
}

.loading-bar {
    width: 250px;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
    margin: 0 auto var(--space-lg);
}

.loading-progress {
    height: 100%;
    background: var(--wood-gradient);
    border-radius: var(--radius-full);
    position: relative;
    animation: loadingSlide 2s ease-in-out infinite;
    overflow: hidden;
}

.loading-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: shimmer 1s linear infinite;
}

@keyframes loadingSlide {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.loading-text {
    color: var(--white-pure);
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.8;
    letter-spacing: 0.05em;
    animation: fadeInOut 3s ease-in-out infinite;
}

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

/* Плавное появление контента после preloader */
body:not(.loaded) .hero,
body:not(.loaded) .navbar,
body:not(.loaded) main {
    opacity: 0;
    transform: translateY(20px);
}

body.loaded .hero,
body.loaded .navbar,
body.loaded main {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s ease-out;
}

/* Modern Navigation with Glass Effect */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: 
        linear-gradient(135deg, 
            rgba(26, 26, 26, 0.95) 0%, 
            rgba(45, 45, 45, 0.95) 50%, 
            rgba(31, 31, 31, 0.95) 100%
        );
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 2px solid var(--accent-copper);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 1000;
    transition: all var(--transition-base);
    /* Поддержка iPhone с вырезом */
    padding-top: env(safe-area-inset-top);
}

.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: 
        /* Subtle mesh pattern */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 40px,
            rgba(255, 255, 255, 0.02) 40px,
            rgba(255, 255, 255, 0.02) 40.5px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 40px,
            rgba(255, 255, 255, 0.02) 40px,
            rgba(255, 255, 255, 0.02) 40.5px
        ),
        /* Diagonal lines */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 80px,
            rgba(255, 255, 255, 0.01) 80px,
            rgba(255, 255, 255, 0.01) 81px
        );
    pointer-events: none;
}

.navbar.scrolled {
    background: 
        linear-gradient(135deg, 
            rgba(26, 26, 26, 0.98) 0%, 
            rgba(45, 45, 45, 0.98) 50%, 
            rgba(31, 31, 31, 0.98) 100%
        );
    box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.nav-container {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-md) 0;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
}

/* Desktop navigation layout */
@media (min-width: 769px) {
    .nav-container {
        justify-content: flex-start;
        gap: var(--space-2xl);
    }
    
    .nav-logo {
        order: 1;
    }
    
    .nav-menu {
        order: 2;
        flex: 1;
        justify-content: flex-end;
        margin: 0;
    }
    
    .nav-toggle {
        order: 3;
    }
    
    .nav-bottom-actions {
        padding: var(--space-md) var(--space-xl);
    }
    
    .nav-bottom-btn {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.9rem;
        min-height: 52px;
        gap: var(--space-xs);
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .nav-bottom-btn .btn-text {
        font-size: 0.85em;
        line-height: 1.2;
        margin-top: var(--space-xs);
        text-align: center;
        width: 100%;
        display: block;
    }
    
    .nav-bottom-btn .btn-icon {
        font-size: 1.3em;
        margin-bottom: var(--space-xs);
        text-align: center;
        width: 100%;
        display: block;
    }
}

/* Компактная навигация для iPhone */
@media (max-width: 420px) {
    .nav-container {
        padding: 20px var(--space-md) !important;
        min-height: 80px !important;
        justify-content: flex-start;
        gap: var(--space-sm);
    }
    
    .navbar {
        min-height: 140px !important;
    }
    
    .nav-logo {
        order: 1;
    }
    
    .logo {
        width: 35px !important;
        height: 35px !important;
    }
    
    .logo-text {
        font-size: 1.3rem !important;
    }
    
    .nav-toggle {
        padding: 4px !important;
        order: 2;
        margin-left: auto;
    }
    
    .nav-toggle .bar {
        width: 18px !important;
        height: 2px !important;
    }
    
    .nav-bottom-actions {
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-xs);
    }
    
    .nav-bottom-btn {
        padding: 6px 4px; /* Уменьшено с var(--space-sm) var(--space-xs) */
        font-size: 0.65rem; /* Уменьшено с 0.7rem */
        min-height: 42px; /* Уменьшено с 48px */
        border-radius: var(--radius-md);
        margin: 0 2px;
        gap: 1px; /* Уменьшено с 2px */
    }
    
    .nav-bottom-btn .btn-text {
        display: block;
        font-weight: 700;
        letter-spacing: -0.01em;
        font-size: 0.65em; /* Уменьшено с 0.7em */
        line-height: 1.1;
        text-align: center;
        margin-top: 1px; /* Уменьшено с 2px */
        width: 100%;
    }
    
    .nav-bottom-btn .btn-icon {
        font-size: 1.0em; /* Уменьшено с 1.1em */
        margin-bottom: 0;
        margin-left: 0;
    }
}

/* Ultra compact for very small screens */
@media (max-width: 375px) {
    .nav-bottom-btn {
        padding: 5px 2px; /* Уменьшено с 6px 3px */
        font-size: 0.55rem; /* Уменьшено с 0.6rem */
        min-height: 40px; /* Уменьшено с 44px */
        margin: 0 1px;
        gap: 1px;
    }
    
    .nav-bottom-btn .btn-text {
        font-size: 0.6em; /* Уменьшено с 0.65em */
        line-height: 1;
        letter-spacing: -0.02em;
        margin-top: 1px;
        width: 100%;
        text-align: center;
    }
    
    .nav-bottom-btn .btn-icon {
        font-size: 0.9em; /* Уменьшено с 1em */
        margin-bottom: 0;
        margin-left: 0;
    }
}

/* Larger mobile phones */
@media (max-width: 480px) and (min-width: 421px) {
    .nav-bottom-btn {
        padding: 8px 6px; /* Уменьшено с var(--space-sm) var(--space-sm) */
        font-size: 0.7rem; /* Уменьшено с 0.75rem */
        min-height: 46px; /* Уменьшено с 50px */
        margin: 0 var(--space-xs);
        gap: 2px; /* Уменьшено с var(--space-xs) */
    }
    
    .nav-bottom-btn .btn-text {
        font-size: 0.65em; /* Уменьшено с 0.7em */
        line-height: 1.1;
        margin-top: 1px; /* Уменьшено с 2px */
    }
    
    .nav-bottom-btn .btn-icon {
        font-size: 1.1em; /* Уменьшено с 1.2em */
        margin-bottom: 0;
    }
}

/* Medium mobile screens */
@media (max-width: 768px) and (min-width: 421px) {
    .nav-container {
        justify-content: flex-start;
        gap: var(--space-lg);
    }
    
    .nav-logo {
        order: 1;
    }
    
    .nav-toggle {
        order: 2;
        margin-left: auto;
    }
    
    .nav-bottom-actions {
        padding: var(--space-md) var(--space-lg);
    }
    
    .nav-bottom-btn {
        padding: 8px 10px; /* Уменьшено с var(--space-sm) var(--space-md) */
        font-size: 0.75rem; /* Уменьшено с 0.8rem */
        min-height: 48px; /* Уменьшено с 52px */
        border-radius: var(--radius-lg);
        margin: 0 var(--space-xs);
        gap: 2px; /* Уменьшено с var(--space-xs) */
    }
    
    .nav-bottom-btn .btn-text {
        display: block;
        font-size: 0.7em; /* Уменьшено с 0.75em */
        line-height: 1.2;
        margin-top: 2px; /* Уменьшено с var(--space-xs) */
    }
    
    .nav-bottom-btn .btn-icon {
        font-size: 1.2em; /* Уменьшено с 1.3em */
        margin-bottom: 0;
    }
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
    transition: all var(--transition-base);
}

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

.logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-base);
}

.nav-logo:hover .logo {
    transform: rotate(-5deg) scale(1.05);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15);
}

.logo-text {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-copper), var(--wood-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

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

.nav-link {
    text-decoration: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    position: relative;
    transition: all var(--transition-base);
    padding: var(--space-sm) 0;
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(255, 255, 255, 0.1);
    letter-spacing: 0.02em;
    pointer-events: auto;
    cursor: pointer;
    z-index: 1001;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(135deg, 
        var(--accent-gold) 0%, 
        var(--accent-copper) 50%, 
        var(--accent-bronze) 100%
    );
    transition: width var(--transition-base);
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.nav-link:hover {
    color: var(--accent-gold);
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(255, 215, 0, 0.3),
        0 0 25px rgba(255, 215, 0, 0.1);
    transform: translateY(-1px);
}

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

.nav-link.active {
    color: var(--accent-gold);
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(255, 215, 0, 0.3),
        0 0 25px rgba(255, 215, 0, 0.1);
    /* Убираем transform для активного состояния, чтобы избежать постоянной анимации */
}

.nav-link.active::before {
    width: 100%;
    /* Убираем transition для активного состояния */
    transition: none;
    background: var(--accent-gold);
}



/* Mobile Navigation */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    padding: var(--space-sm);
}

.nav-toggle .bar {
    width: 24px;
    height: 3px;
    background: #ffffff;
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(255, 255, 255, 0.2);
}

.nav-toggle.active .bar:nth-child(1) {
    transform: rotate(45deg) translateY(7px);
}

.nav-toggle.active .bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active .bar:nth-child(3) {
    transform: rotate(-45deg) translateY(-7px);
}

/* Navigation Bottom Action Buttons */
.nav-bottom-actions {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md) var(--space-md);
    background: linear-gradient(135deg, 
        rgba(255, 140, 0, 0.3) 0%, 
        rgba(255, 165, 0, 0.25) 50%,
        rgba(255, 140, 0, 0.3) 100%
    );
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border-top: 2px solid rgba(255, 140, 0, 0.4);
    position: relative;
    z-index: 1000;
    min-height: 70px;
    max-width: 100%;
    margin: 0 auto;
    place-items: center;
}

.nav-bottom-actions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(255, 215, 0, 0.3) 25%,
        rgba(255, 140, 0, 0.4) 50%,
        rgba(255, 215, 0, 0.3) 75%,
        transparent
    );
}

.nav-bottom-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-sm);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: var(--font-primary);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    z-index: 1001;
    min-height: 52px;
    line-height: 1.3;
    border-radius: var(--radius-lg);
    margin: 0 var(--space-xs);
    text-align: center;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    width: 100%;
}

.nav-bottom-btn .btn-text {
    position: relative;
    z-index: 2;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.85em;
    line-height: 1.2;
    text-align: center;
    color: inherit;
    display: block;
    width: 100%;
    margin: 0 auto;
}

.nav-bottom-btn .btn-icon {
    font-size: 1.3em;
    position: relative;
    z-index: 2;
    margin-bottom: var(--space-xs);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    text-align: center;
    display: block;
    width: 100%;
}

.nav-bottom-btn-primary {
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.9) 0%, 
        rgba(255, 140, 0, 0.8) 25%, 
        rgba(255, 165, 0, 0.85) 50%,
        rgba(218, 165, 32, 0.9) 75%,
        rgba(255, 215, 0, 0.95) 100%
    );
    color: #000000;
    border: 2px solid transparent;
    background-clip: padding-box;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px) saturate(1.5);
    -webkit-backdrop-filter: blur(15px) saturate(1.5);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(255, 215, 0, 0.4),
        0 4px 16px rgba(255, 140, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    animation: primaryGlow 3s ease-in-out infinite alternate;
    transform-style: preserve-3d;
}

.nav-bottom-btn-primary::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        #FFD700 0%, 
        #FFA500 25%, 
        #FF8C00 50%, 
        #DAA520 75%, 
        #FFD700 100%);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    animation: borderGlow 4s linear infinite;
}

.nav-bottom-btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.nav-bottom-btn-primary:hover::after {
    left: 100%;
}

.nav-bottom-btn-primary:hover {
    transform: translateY(-4px) scale(1.05) rotateX(10deg);
    box-shadow: 
        0 16px 48px rgba(255, 215, 0, 0.6),
        0 8px 24px rgba(255, 140, 0, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.6),
        inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    text-shadow: 0 2px 6px rgba(255, 255, 255, 0.5);
    animation: primaryHover 0.6s ease-in-out infinite alternate;
}

.nav-bottom-btn-primary:active {
    transform: translateY(-2px) scale(1.02) rotateX(5deg);
    transition: all 0.1s ease;
}

.nav-bottom-btn-outline {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.1) 25%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.08) 75%,
        rgba(255, 255, 255, 0.15) 100%
    );
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(15px) saturate(1.3);
    -webkit-backdrop-filter: blur(15px) saturate(1.3);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.2),
        0 3px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    animation: outlineGlow 3.5s ease-in-out infinite alternate;
    transform-style: preserve-3d;
}

.nav-bottom-btn-outline::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        rgba(255, 255, 255, 0.3) 0%, 
        rgba(255, 215, 0, 0.2) 25%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 215, 0, 0.2) 75%, 
        rgba(255, 255, 255, 0.3) 100%);
    background-size: 300% 300%;
    border-radius: inherit;
    z-index: -1;
    animation: outlineBorderGlow 3s linear infinite;
}

.nav-bottom-btn-outline::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.nav-bottom-btn-outline:hover::after {
    left: 100%;
}

.nav-bottom-btn-outline:hover {
    transform: translateY(-4px) scale(1.05) rotateX(10deg);
    box-shadow: 
        0 12px 36px rgba(0, 0, 0, 0.4),
        0 6px 18px rgba(0, 0, 0, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.8);
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
    animation: outlineHover 0.6s ease-in-out infinite alternate;
}

.nav-bottom-btn-outline:active {
    transform: translateY(-2px) scale(1.02) rotateX(5deg);
    transition: all 0.1s ease;
}

/* Анимации для кнопок навигации */
@keyframes primaryGlow {
    0% { 
        box-shadow: 
            0 8px 32px rgba(255, 215, 0, 0.3),
            0 4px 16px rgba(255, 140, 0, 0.2),
            inset 0 2px 0 rgba(255, 255, 255, 0.4),
            inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    }
    100% { 
        box-shadow: 
            0 12px 48px rgba(255, 215, 0, 0.5),
            0 6px 24px rgba(255, 140, 0, 0.3),
            inset 0 2px 0 rgba(255, 255, 255, 0.6),
            inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    }
}

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

@keyframes primaryHover {
    0% { 
        filter: brightness(1) saturate(1);
        transform: translateY(-4px) scale(1.05) rotateX(10deg);
    }
    100% { 
        filter: brightness(1.1) saturate(1.2);
        transform: translateY(-5px) scale(1.06) rotateX(12deg);
    }
}

@keyframes outlineGlow {
    0% { 
        box-shadow: 
            0 6px 24px rgba(0, 0, 0, 0.2),
            0 3px 12px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    }
    100% { 
        box-shadow: 
            0 10px 36px rgba(0, 0, 0, 0.3),
            0 5px 18px rgba(0, 0, 0, 0.2),
            inset 0 2px 0 rgba(255, 255, 255, 0.3),
            inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    }
}

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

@keyframes outlineHover {
    0% { 
        filter: brightness(1) saturate(1);
        transform: translateY(-4px) scale(1.05) rotateX(10deg);
    }
    100% { 
        filter: brightness(1.15) saturate(1.3);
        transform: translateY(-5px) scale(1.06) rotateX(12deg);
    }
}

/* Профессиональные стили для текста и иконок в кнопках - пропорциональные тексту сайта */
.nav-bottom-btn .btn-text {
    font-size: 0.85em !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    position: relative;
    z-index: 3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-bottom-btn .btn-icon {
    font-size: 1.3em !important;
    position: relative;
    z-index: 3;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: iconPulse 2s ease-in-out infinite;
}

.nav-bottom-btn:hover .btn-text {
    font-size: 0.9em !important;
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
    transform: translateY(-1px);
}

.nav-bottom-btn:hover .btn-icon {
    font-size: 1.4em !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
    transform: translateY(-2px) scale(1.1);
    animation: iconBounce 0.6s ease-in-out infinite;
}

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

@keyframes iconBounce {
    0%, 100% { transform: translateY(-2px) scale(1.1); }
    50% { transform: translateY(-4px) scale(1.15); }
}

/* Hero Section with Material Design */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 0; /* Убираем отступ - видео начинается сразу после шапки */
    background: transparent; /* Убираем фоновое затемнение для яркого видео */
}

.hero-video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    /* Оптимизация производительности */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity;
}

.hero-video.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* Полностью убираем затемнение для яркого видео */
    z-index: 1;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: clamp(60px, 8vh, 100px) 0;
    padding-top: 140px; /* Отступ для навигации - контент начинается после шапки */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    width: 100%;
}

.hero-text {
    max-width: 900px;
    position: relative;
    z-index: 3;
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.hero-title-line {
    display: block;
    position: relative;
}

.hero-title-line.accent {
    background: linear-gradient(
        135deg, 
        var(--accent-gold) 0%,
        #FFD700 25%,
        var(--accent-copper) 50%,
        #CD853F 75%,
        var(--accent-gold) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: gradientShift 4s ease-in-out infinite;
    text-shadow: 
        0 0 40px rgba(255, 215, 0, 0.3),
        0 0 80px rgba(255, 215, 0, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.3);
    position: relative;
}

.hero-title-line.accent::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        transparent 0%,
        rgba(255, 215, 0, 0.1) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.hero-title-line.accent:hover::after {
    opacity: 1;
}

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

.hero-subtitle {
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    color: var(--gray-200);
    margin: 0 auto var(--space-2xl) auto;
    line-height: 1.8;
    opacity: 0.95;
    font-weight: 400;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    max-width: 600px;
    position: relative;
    text-align: center;
    width: 100%;
}

.hero-subtitle::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--accent-gold) 20%,
        var(--accent-gold) 80%,
        transparent 100%
    );
    border-radius: 2px;
    opacity: 0.7;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(8px, 1.5vw, 12px);
    margin: clamp(30px, 5vh, 50px) auto;
    padding: 0;
    max-width: 600px;
    width: 100%;
    
    /* Полностью прозрачный фон для максимальной видимости видео */
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    justify-self: center;
    text-align: center;
}

.stat-item {
    text-align: center;
    padding: clamp(12px, 2.5vw, 16px) clamp(8px, 1.5vw, 12px);
    
    /* Минимальный полупрозрачный фон только для текста */
    background: 
        radial-gradient(
            circle at center,
            rgba(0, 0, 0, 0.4) 0%,
            rgba(0, 0, 0, 0.2) 70%,
            transparent 100%
        );
    backdrop-filter: blur(8px) saturate(1.2);
    
    /* Элегантная округлая форма */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    
    /* Плавные переходы */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    
    /* Мягкая тень только для читаемости */
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stat-item::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        135deg,
        rgba(255, 215, 0, 0.6) 0%,
        rgba(255, 165, 0, 0.4) 25%,
        rgba(218, 165, 32, 0.6) 50%,
        rgba(255, 215, 0, 0.4) 75%,
        rgba(255, 215, 0, 0.6) 100%
    );
    border-radius: 52px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    filter: blur(3px);
}

.stat-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: 
        radial-gradient(
            circle at center,
            rgba(255, 215, 0, 0.05) 0%,
            transparent 70%
        );
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    border-radius: 50%;
}

.stat-item:hover {
    /* Более яркий фон при ховере для лучшей читаемости */
    background: 
        radial-gradient(
            circle at center,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.3) 70%,
            transparent 100%
        );
    
    /* Элегантная анимация */
    transform: translateY(-6px) scale(1.05);
    
    /* Золотая рамка при ховере */
    border-color: rgba(255, 215, 0, 0.4);
    
    /* Улучшенная тень */
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.stat-item:hover::before {
    opacity: 1;
}

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

.stat-number {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 900;
    background: linear-gradient(
        135deg,
        #FFD700 0%,
        #FFA500 25%,
        #FFD700 50%,
        #DAA520 75%,
        #FFD700 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: var(--font-display);
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 0 10px rgba(255, 215, 0, 0.3);
    position: relative;
    display: inline-block;
    margin-bottom: var(--space-xs);
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4));
}

.stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-top: var(--space-xs);
    opacity: 0.9;
    transition: all 0.3s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    line-height: 1.2;
}

.stat-item:hover .stat-label {
    color: rgba(255, 255, 255, 1);
    opacity: 1;
    transform: translateY(-2px);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.hero-actions {
    display: flex;
    gap: clamp(16px, 3vw, 24px);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: clamp(32px, 5vh, 48px) auto 0 auto;
    text-align: center;
}

/* Ultra Modern Button Design */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 2.5vw, 18px) clamp(24px, 4vw, 32px);
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    font-weight: 600;
    text-decoration: none;
    border-radius: clamp(25px, 3vw, 35px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer !important;
    border: none;
    outline: none;
    min-width: clamp(180px, 25vw, 220px);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    pointer-events: auto;
    z-index: 10;
    backdrop-filter: blur(10px);
    font-family: var(--font-primary);
}

.btn-primary {
    background: 
        linear-gradient(135deg, 
            #A0522D 0%,
            #CD853F 25%,
            #D2691E 50%,
            #B8860B 75%,
            #A0522D 100%
        );
    color: var(--white-pure);
    box-shadow: 
        0 8px 32px rgba(160, 82, 45, 0.4),
        0 4px 16px rgba(205, 133, 63, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left var(--transition-slow);
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 12px 40px rgba(160, 82, 45, 0.5),
        0 8px 24px rgba(205, 133, 63, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.35),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2);
    background: 
        linear-gradient(135deg, 
            #B8860B 0%,
            #D2691E 25%,
            #CD853F 50%,
            #DAA520 75%,
            #B8860B 100%
        );
}

.btn-outline {
    background: 
        linear-gradient(135deg, 
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.02) 50%,
            rgba(255, 255, 255, 0.05) 100%
        );
    color: var(--white-pure);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    position: relative;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-outline::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: 
        linear-gradient(135deg, 
            var(--accent-gold) 0%,
            #FFD700 25%,
            #FFA500 50%,
            #DAA520 75%,
            var(--accent-gold) 100%
        );
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    border-radius: inherit;
    box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.3);
}

.btn-outline:hover {
    color: var(--black-soft);
    border-color: var(--accent-gold);
    box-shadow: 
        0 8px 32px rgba(255, 215, 0, 0.3),
        0 4px 16px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.btn-outline:hover::after {
    width: 100%;
}

/* Video Controls - Removed */



/* Hero Scroll Indicator */
.hero-scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    color: var(--white-pure);
    opacity: 0.7;
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-arrow {
    width: 24px;
    height: 24px;
    border: 2px solid var(--white-pure);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

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

/* Section Styles */
section {
    padding: var(--section-padding) 0;
    position: relative;
}

/* Mobile responsive adjustments for sections */
@media (max-width: 768px) {
    section {
        padding: calc(var(--section-padding) * 0.7) 0;
    }
    
    .section-header {
        margin-bottom: var(--space-2xl);
    }
}

@media (max-width: 480px) {
    section {
        padding: calc(var(--section-padding) * 0.5) 0;
    }
    
    .section-header {
        margin-bottom: var(--space-xl);
    }
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-4xl);
}

.section-title {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    margin-bottom: var(--space-lg);
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--brick-gradient);
    border-radius: var(--radius-full);
}

.section-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    text-align: center;
}

/* Mobile responsive adjustments for section headers */
@media (max-width: 768px) {
    .section-title {
        font-size: clamp(2rem, 6vw, 2.8rem);
        margin-bottom: var(--space-md);
        padding: 0 var(--space-md);
        text-align: center;
        word-wrap: break-word;
        hyphens: auto;
    }
    
    .section-subtitle {
        font-size: clamp(0.9rem, 3vw, 1.1rem);
        padding: 0 var(--space-lg);
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
        margin-bottom: var(--space-sm);
        padding: 0 var(--space-sm);
        line-height: 1.2;
    }
    
    .section-subtitle {
        font-size: clamp(0.85rem, 4vw, 1rem);
        padding: 0 var(--space-md);
        line-height: 1.5;
    }
}

/* Dark section overrides */
.contact .section-title {
    color: var(--white-pure);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.contact .section-title::after {
    background: var(--wood-gradient);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.contact .section-subtitle {
    color: var(--gray-300);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

/* About Section with Material Theme */
.about {
    background: 
        linear-gradient(135deg, 
            rgba(30, 30, 30, 0.95) 0%, 
            rgba(35, 35, 35, 0.92) 50%, 
            rgba(32, 32, 32, 0.95) 100%
        );
    position: relative;
    overflow: hidden;
}

.about::before {
    content: '';
    position: absolute;
    top: 0;
    right: -20%;
    width: 40%;
    height: 100%;
    background: 
        radial-gradient(circle at center, var(--wood-light) 0%, transparent 70%);
    opacity: 0.03;
    pointer-events: none;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}

.about-text h3 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    margin-bottom: var(--space-xl);
    color: var(--gray-900);
}

.about-text p {
    margin-bottom: var(--space-2xl);
    font-size: 1.125rem;
    line-height: 1.8;
}

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

.feature-item {
    padding: var(--space-xl);
    background: 
        linear-gradient(135deg, 
            rgba(45, 45, 45, 0.95) 0%, 
            rgba(50, 50, 50, 0.92) 50%, 
            rgba(47, 47, 47, 0.95) 100%
        );
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 215, 0, 0.2);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--metal-gradient);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
}

.feature-item:hover::before {
    transform: translateX(0);
}

.feature-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.feature-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-clear);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    color: var(--brick-orange);
}

.feature-icon svg {
    width: 24px;
    height: 24px;
}

.feature-item h4 {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
    color: var(--gray-100);
}

.feature-item p {
    font-size: 0.95rem;
    color: var(--gray-300);
    line-height: 1.6;
}

.about-visual {
    position: relative;
}

.image-stack {
    position: relative;
    height: 600px;
}

.stack-img-1,
.stack-img-2 {
    position: absolute;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.stack-img-1 {
    width: 70%;
    height: 80%;
    top: 0;
    left: 0;
    z-index: 2;
}

.stack-img-2 {
    width: 60%;
    height: 60%;
    bottom: 0;
    right: 0;
    z-index: 1;
    border: 8px solid var(--white-pure);
}

.stack-img-1 img,
.stack-img-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.stack-img-1:hover img,
.stack-img-2:hover img {
    transform: scale(1.05);
}

/* CEO Presentation Section */
.ceo-presentation {
    background: 
        linear-gradient(135deg, 
            rgba(28, 28, 28, 0.95) 0%, 
            rgba(35, 35, 35, 0.92) 50%, 
            rgba(30, 30, 30, 0.95) 100%
        );
    position: relative;
    overflow: hidden;
}

.ceo-presentation::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 30% 30%, var(--glass-clear) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, var(--glass-frosted) 0%, transparent 40%);
    pointer-events: none;
    opacity: 0.5;
}

.presentation-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: start;
}

.presentation-video-container {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--black-soft);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    /* Отключаем transition эффекты */
    transition: none !important;
}

.presentation-video-container:hover,
.presentation-video-container:focus,
.presentation-video-container:active {
    /* Полностью отключаем hover эффекты на контейнере */
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3) !important;
    background: var(--black-soft) !important;
}

/* Стили для полноэкранного видео */
.presentation-video:fullscreen,
.presentation-video:-webkit-full-screen,
.presentation-video:-moz-full-screen,
.presentation-video:-ms-fullscreen {
    filter: none !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    opacity: 1 !important;
    brightness: 1 !important;
    contrast: 1 !important;
}

.presentation-video:fullscreen:hover,
.presentation-video:-webkit-full-screen:hover,
.presentation-video:-moz-full-screen:hover,
.presentation-video:-ms-fullscreen:hover {
    filter: none !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    opacity: 1 !important;
    brightness: 1 !important;
    contrast: 1 !important;
    transform: none !important;
}

.presentation-video {
    width: 100%;
    height: auto;
    display: block;
    /* Отключаем эффекты затемнения при наведении */
    transition: none !important;
    filter: none !important;
    opacity: 1 !important;
    /* Отключаем изменение яркости */
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    /* Отключаем transform эффекты */
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
}

.presentation-video:hover,
.presentation-video:focus,
.presentation-video:active {
    /* Полностью отключаем hover/focus/active эффекты */
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    brightness: 1 !important;
    contrast: 1 !important;
    saturate: 1 !important;
    /* Отключаем outline */
    outline: none !important;
    /* Отключаем box-shadow */
    box-shadow: none !important;
}

/* Полностью отключаем затемнение браузерных контролов видео */
.presentation-video::-webkit-media-controls,
.presentation-video::-webkit-media-controls-panel,
.presentation-video::-webkit-media-controls-overlay-play-button {
    filter: none !important;
    opacity: 1 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.presentation-video::-webkit-media-controls:hover,
.presentation-video::-webkit-media-controls-panel:hover,
.presentation-video::-webkit-media-controls-overlay-play-button:hover {
    filter: none !important;
    opacity: 1 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Стили для встроенных контролов видео - прозрачный фон */
.presentation-video::-webkit-media-controls-panel {
    background-color: transparent !important;
    border-radius: 8px;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.presentation-video::-webkit-media-controls-play-button,
.presentation-video::-webkit-media-controls-pause-button {
    background-color: var(--accent-gold);
    border-radius: 50%;
}

.presentation-video::-webkit-media-controls-volume-slider,
.presentation-video::-webkit-media-controls-timeline {
    background-color: rgba(255, 215, 0, 0.3);
    border-radius: 4px;
}

.presentation-video::-webkit-media-controls-current-time-display,
.presentation-video::-webkit-media-controls-time-remaining-display {
    color: white;
    font-family: var(--font-primary);
}

/* СУПЕР АГРЕССИВНОЕ отключение любых затемнений видео */
.presentation-video,
.presentation-video * {
    filter: none !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Отключаем псевдоэлементы */
.presentation-video::before,
.presentation-video::after,
.presentation-video-container::before,
.presentation-video-container::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    background: none !important;
}

/* Принудительно прозрачный фон для всех контролов */
.presentation-video::-webkit-media-controls,
.presentation-video::-webkit-media-controls-panel,
.presentation-video::-webkit-media-controls-enclosure,
.presentation-video::-webkit-media-controls-overlay-enclosure {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}



/* Responsive styles for presentation video */
@media (max-width: 768px) {
    .presentation-video-container {
        margin: 0 var(--space-md);
    }
}

@media (max-width: 480px) {
    .presentation-video-container {
        margin: 0 var(--space-sm);
    }
    
    .presentation-badges {
        bottom: 10px;
        left: 10px;
        gap: var(--space-sm);
    }
    
    .badge-item {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.75rem;
    }
}

.presentation-badges {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    gap: var(--space-md);
}

.badge-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
}

.badge-icon {
    font-size: 1.25rem;
}

.presentation-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.presenter-card {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-xl);
    background: 
        linear-gradient(135deg, 
            rgba(45, 45, 45, 0.95) 0%, 
            rgba(50, 50, 50, 0.92) 50%, 
            rgba(47, 47, 47, 0.95) 100%
        );
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.presenter-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--brick-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-pure);
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}

.presenter-details h3 {
    font-size: 1.5rem;
    margin-bottom: var(--space-xs);
}

.presenter-role {
    color: var(--gray-300);
    margin-bottom: var(--space-sm);
}

.presenter-contact a {
    color: var(--brick-orange);
    text-decoration: none;
    font-weight: 600;
}

.presentation-highlights {
    background: 
        linear-gradient(135deg, 
            rgba(42, 42, 42, 0.95) 0%, 
            rgba(48, 48, 48, 0.92) 50%, 
            rgba(45, 45, 45, 0.95) 100%
        );
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.presentation-highlights h4 {
    font-size: 1.25rem;
    margin-bottom: var(--space-xl);
    color: var(--gray-100);
}

.highlight-item {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.highlight-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.highlight-content h5 {
    font-size: 1rem;
    margin-bottom: var(--space-xs);
    color: var(--gray-100);
}

.highlight-content p {
    font-size: 0.875rem;
    color: var(--gray-300);
}

.presentation-benefits {
    background: 
        linear-gradient(135deg, 
            rgba(42, 42, 42, 0.95) 0%, 
            rgba(48, 48, 48, 0.92) 50%, 
            rgba(45, 45, 45, 0.95) 100%
        );
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.presentation-benefits h4 {
    font-size: 1.25rem;
    margin-bottom: var(--space-lg);
}

.presentation-benefits ul {
    list-style: none;
}

.presentation-benefits li {
    padding: var(--space-sm) 0;
    padding-left: var(--space-xl);
    position: relative;
}

.presentation-benefits li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--brick-orange);
    font-weight: 700;
}

.presentation-cta {
    background: 
        linear-gradient(135deg, 
            rgba(42, 42, 42, 0.95) 0%, 
            rgba(48, 48, 48, 0.92) 50%, 
            rgba(45, 45, 45, 0.95) 100%
        );
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 2px solid var(--accent-gold);
}

.cta-text {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-xl);
    color: var(--gray-100);
}

.trust-indicators {
    display: flex;
    justify-content: center;
    gap: var(--space-2xl);
    margin-top: var(--space-xl);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--gray-600);
}

.trust-icon {
    font-size: 1.25rem;
}

/* Projects Section */
.projects {
    background: 
        linear-gradient(135deg, 
            rgba(34, 34, 34, 0.95) 0%, 
            rgba(40, 40, 40, 0.92) 50%, 
            rgba(36, 36, 36, 0.95) 100%
        );
    position: relative;
}

/* Projects Database Info */
.projects-database-info {
    margin: var(--space-xl) 0;
    padding: 0 var(--space-md);
}

.database-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(247, 250, 252, 0.98) 100%);
    border-radius: 20px;
    padding: var(--space-xl);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.database-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        #d69e2e 0%, 
        #f6e05e 50%, 
        #d69e2e 100%);
    animation: gradientShift 3s ease-in-out infinite;
}

.database-card:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.15),
        0 8px 20px rgba(0, 0, 0, 0.1);
}

.database-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, 
        #d69e2e 0%, 
        #f6e05e 100%);
    border-radius: 50%;
    margin: 0 auto var(--space-md);
    color: white;
    box-shadow: 0 8px 20px rgba(214, 158, 46, 0.3);
    animation: iconFloat 3s ease-in-out infinite;
}

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

.database-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2d3748;
    text-align: center;
    margin-bottom: var(--space-md);
    background: linear-gradient(135deg, 
        #d69e2e 0%, 
        #f6e05e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.database-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #2d3748;
    text-align: center;
    margin-bottom: var(--space-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

.database-description .highlight-text {
    color: #d69e2e;
    font-weight: 700;
    background: linear-gradient(135deg, 
        #d69e2e 0%, 
        #f6e05e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.database-features {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    transition: transform 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: rgba(214, 158, 46, 0.1);
    border-radius: 50%;
    border: 2px solid rgba(214, 158, 46, 0.3);
    transition: all 0.3s ease;
}

.feature-item:hover .feature-icon {
    background: rgba(214, 158, 46, 0.2);
    border-color: rgba(214, 158, 46, 0.5);
    transform: scale(1.1);
}

.feature-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4a5568;
}



.btn-icon {
    font-size: 1.2rem;
}

/* Mobile Styles for Database Info */
@media (max-width: 768px) {
    .projects-database-info {
        padding: 0 var(--space-sm);
    }
    
    .database-card {
        padding: var(--space-lg);
        margin: var(--space-md) 0;
    }
    
    .database-title {
        font-size: 1.4rem;
    }
    
    .database-description {
        font-size: 1rem;
    }
    
    .database-features {
        gap: var(--space-md);
    }
    

}

@media (max-width: 480px) {
    .database-features {
        flex-direction: column;
        gap: var(--space-md);
    }
    
    .database-icon {
        width: 60px;
        height: 60px;
    }
    
    .database-title {
        font-size: 1.2rem;
    }
    
    .database-description {
        font-size: 0.9rem;
    }
    
    .database-card {
        padding: var(--space-md);
    }
}



/* Database Info in About Section */
.project-database-highlight {
    margin: var(--space-xl) 0;
}

.database-info-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(247, 250, 252, 0.98) 100%);
    border: 1px solid rgba(214, 158, 46, 0.3);
    border-radius: 16px;
    padding: var(--space-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.database-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(214, 158, 46, 0.15);
    border-color: rgba(214, 158, 46, 0.3);
}

.database-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #d69e2e 0%, #f6e05e 100%);
    border-radius: 50%;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(214, 158, 46, 0.3);
}

.database-info-content h4 {
    color: #0f1419;
    margin-bottom: var(--space-sm);
    font-size: 1.2rem;
    font-weight: 700;
}

.database-info-content p {
    color: #1a202c;
    margin-bottom: var(--space-md);
    line-height: 1.6;
    font-weight: 500;
}



/* Hero Database Banner */
.hero-database-banner {
    margin-top: var(--space-xl);
    padding: 0 var(--space-md);
}

.database-banner-content {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(247, 250, 252, 0.15) 100%);
    border-radius: 20px;
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.05),
        0 8px 32px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(214, 158, 46, 0.1);
    backdrop-filter: blur(5px);
    position: relative;
    overflow: hidden;
}

.database-banner-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(214, 158, 46, 0.05) 50%, 
        transparent 100%);
    animation: shimmer 3s ease-in-out infinite;
}

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

.database-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #d69e2e 0%, #f6e05e 100%);
    border-radius: 50%;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(214, 158, 46, 0.3);
    position: relative;
    z-index: 1;
}

.database-banner-text {
    flex: 1;
    position: relative;
    z-index: 1;
}

.database-banner-text h3 {
    color: #0f1419;
    font-size: 1.4rem;
    margin-bottom: var(--space-xs);
    font-weight: 700;
}

.database-banner-text p {
    color: #1a202c;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

/* Desktop styles for macOS Safari compatibility */
@media (min-width: 1024px) {
    .database-banner-content {
        /* Принудительное отображение для macOS Safari */
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: var(--space-lg) var(--space-xl) !important;
        min-height: 80px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        /* Исправления для WebKit */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
        position: relative;
        z-index: 1;
    }
    
    .database-banner-text {
        flex: 1;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .database-banner-icon {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Исправление смещения контактов в footer для MacBook */
    .footer-content {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: var(--space-2xl) !important;
        text-align: left !important;
    }
    
    .footer-section {
        align-items: flex-start !important;
        text-align: left !important;
    }
    
    .footer-contacts {
        text-align: left !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    .footer-contacts li {
        justify-content: flex-start !important;
        text-align: left !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}

/* Mobile styles for hero database banner */
@media (max-width: 768px) {
    .database-banner-content {
        flex-direction: column;
        text-align: center;
        padding: var(--space-md);
    }
    
    .database-banner-text h3 {
        font-size: 1.2rem;
    }
    
    .database-banner-text p {
        font-size: 0.9rem;
    }
}

/* Mobile styles for database info in about */
@media (max-width: 768px) {
    .database-info-card {
        flex-direction: column;
        text-align: center;
        padding: var(--space-md);
    }
}

.projects-filter {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-3xl);
}

.filter-btn {
    padding: var(--space-sm) var(--space-xl);
    background: transparent;
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: var(--radius-full);
    color: var(--gray-300);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--brick-gradient);
    transition: left var(--transition-base);
    z-index: -1;
}

.filter-btn:hover::before,
.filter-btn.active::before {
    left: 0;
}

.filter-btn:hover,
.filter-btn.active {
    color: var(--white-pure);
    border-color: transparent;
    transform: translateY(-2px);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-2xl);
}

/* Featured Project Styles */
.project-card.featured-project {
    border: 2px solid var(--accent-gold);
    background: linear-gradient(
        135deg,
        rgba(255, 215, 0, 0.05) 0%,
        rgba(255, 215, 0, 0.02) 50%,
        rgba(255, 215, 0, 0.05) 100%
    );
    box-shadow: 
        0 20px 40px rgba(255, 215, 0, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.3);
    transform: scale(1.02);
}

.project-status-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.project-badge.completed {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.project-location {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--accent-gold);
    font-weight: 500;
}

.location-icon {
    font-size: 1.1rem;
}

.project-materials {
    margin: 20px 0;
}

.project-materials h4 {
    color: var(--gray-200);
    margin-bottom: 12px;
    font-size: 1rem;
}

.materials-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.material-tag {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: var(--accent-gold);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
}

.price-note {
    font-size: 0.9rem;
    color: var(--gray-300);
    margin-top: 8px;
    font-style: italic;
}

.btn-buy-house.vk-link {
    background: linear-gradient(135deg, #4680C2, #5181b8);
    border-color: #4680C2;
}

.btn-buy-house.vk-link:hover {
    background: linear-gradient(135deg, #5181b8, #6192c9);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(70, 128, 194, 0.4);
}

/* Guarantee List Styles */
.founders-info {
    margin: 24px 0;
    padding: 20px;
    background: linear-gradient(
        135deg,
        rgba(255, 215, 0, 0.05) 0%,
        rgba(255, 215, 0, 0.02) 100%
    );
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.founders-info h4 {
    color: var(--accent-gold);
    margin-bottom: 16px;
    font-size: 1.1rem;
}

.guarantee-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guarantee-list li {
    padding: 8px 0;
    color: var(--gray-200);
    font-size: 0.95rem;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

/* Responsive styles for projects section */
@media (max-width: 768px) {
    .projects-filter {
        flex-wrap: wrap;
        gap: var(--space-sm);
        margin-bottom: var(--space-2xl);
        padding: 0 var(--space-md);
    }
    
    .filter-btn {
        padding: var(--space-sm) var(--space-lg);
        font-size: 0.9rem;
        white-space: nowrap;
        min-width: auto;
    }
    
    .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--space-lg);
        padding: 0 var(--space-md);
        justify-items: center;
    }
}

@media (max-width: 480px) {
    .projects-filter {
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
        margin-bottom: var(--space-xl);
    }
    
    .filter-btn {
        width: 100%;
        max-width: 280px;
        padding: var(--space-md) var(--space-lg);
        font-size: 1rem;
        text-align: center;
        justify-content: center;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: 0 var(--space-sm);
        justify-items: center;
    }
}

.project-card {
    background: 
        linear-gradient(135deg, 
            rgba(42, 42, 42, 0.95) 0%, 
            rgba(48, 48, 48, 0.92) 50%, 
            rgba(45, 45, 45, 0.95) 100%
        );
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    position: relative;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--wood-gradient);
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: 1;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.project-image {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.project-card:hover .project-image img {
    transform: scale(1.1);
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-xl);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.project-card:hover .project-overlay {
    opacity: 1;
}

.project-info h3 {
    color: var(--white-pure);
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}

.project-info p {
    color: var(--gray-300);
    margin-bottom: var(--space-md);
}

.project-specs {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.project-specs span {
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--white-pure);
}

.project-btn {
    display: inline-flex;
    align-items: center;
    padding: var(--space-sm) var(--space-lg);
    background: rgba(45, 45, 45, 0.8);
    color: var(--gray-200);
    border-radius: var(--radius-full);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-base);
    align-self: flex-start;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.project-btn:hover {
    background: var(--accent-gold);
    transform: translateX(4px);
}

.project-details {
    padding: var(--space-xl);
}

.project-details h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
    color: var(--gray-100);
}

.project-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: var(--space-xs);
}

.project-rate {
    font-size: 0.875rem;
    color: var(--gray-300);
    margin-bottom: var(--space-sm);
}

.project-area {
    font-size: 0.95rem;
    color: var(--gray-300);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .presentation-content {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }
    
    .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    /* Обеспечиваем правильный темный фон для мобильных устройств */
    body {
        background: 
            linear-gradient(135deg, 
                rgba(26, 26, 26, 0.95) 0%, 
                rgba(34, 34, 34, 0.92) 25%, 
                rgba(31, 31, 31, 0.95) 50%, 
                rgba(38, 38, 38, 0.92) 75%, 
                rgba(28, 28, 28, 0.95) 100%
            ) !important;
    }
    
    /* Убеждаемся что фоновый паттерн виден на мобильных */
    body::before {
        opacity: 0.8 !important;
        display: block !important;
    }
    
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        width: 100%;
        height: calc(100vh - 70px);
        background: 
            linear-gradient(135deg, 
                rgba(26, 26, 26, 0.98) 0%, 
                rgba(45, 45, 45, 0.98) 50%, 
                rgba(31, 31, 31, 0.98) 100%
            );
        flex-direction: column;
        padding: var(--space-2xl);
        gap: var(--space-lg);
        transition: left var(--transition-base);
        backdrop-filter: var(--glass-blur);
        border-top: 2px solid var(--accent-copper);
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    
    .nav-menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            /* Subtle mesh pattern */
            repeating-linear-gradient(
                0deg,
                transparent,
                transparent 40px,
                rgba(255, 255, 255, 0.02) 40px,
                rgba(255, 255, 255, 0.02) 40.5px
            ),
            repeating-linear-gradient(
                90deg,
                transparent,
                transparent 40px,
                rgba(255, 255, 255, 0.02) 40px,
                rgba(255, 255, 255, 0.02) 40.5px
            ),
            /* Diagonal lines */
            repeating-linear-gradient(
                45deg,
                transparent,
                transparent 80px,
                rgba(255, 255, 255, 0.01) 80px,
                rgba(255, 255, 255, 0.01) 81px
            );
        pointer-events: none;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-toggle {
        display: flex;
    }
    
    /* Mobile Navigation - bottom buttons are handled by base nav-bottom-actions styles */
    
    .hero-title {
        font-size: clamp(2rem, 6vw, 3rem);
        margin-bottom: var(--space-lg);
    }
    
    /* НОВЫЙ ДИЗАЙН СТАТИСТИЧЕСКИХ БЛОКОВ ДЛЯ МОБИЛЬНЫХ */
    .hero-stats {
        /* Возвращаем в обычный поток документа */
        position: static;
        transform: none;
        width: 100%;
        max-width: 100%;
        
        /* Компактная горизонтальная сетка 2x2 */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(6px, 1.5vw, 10px);
        padding: 0;
        margin: var(--space-xl) 0 var(--space-2xl) 0;
        
        /* Полностью прозрачный фон для максимальной видимости видео */
        background: transparent !important;
        backdrop-filter: none;
        border-radius: 0;
        border: none;
        box-shadow: none;
        z-index: auto;
        
        /* Добавляем разделитель снизу */
        position: relative;
    }
    
    .hero-stats::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 2px;
        background: linear-gradient(90deg, 
            transparent, 
            var(--accent-gold), 
            transparent);
        border-radius: 2px;
    }
    
    .stat-item {
        /* Полупрозрачные компактные карточки с округлой формой */
        padding: clamp(10px, 2vw, 14px) clamp(6px, 1.5vw, 10px) !important;
        margin: 0;
        text-align: center;
        
        /* Минимальный полупрозрачный фон для читаемости */
        background: 
            radial-gradient(
                circle at center,
                rgba(0, 0, 0, 0.5) 0%,
                rgba(0, 0, 0, 0.25) 70%,
                transparent 100%
            ) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 40px;
        box-shadow: 
            0 3px 15px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        
        /* Плавные переходы */
        transition: all 0.3s ease;
        backdrop-filter: blur(8px) saturate(1.2);
        position: relative;
        overflow: visible;
    }
    
    .stat-item:hover {
        transform: translateY(-6px) scale(1.05);
        background: 
            radial-gradient(
                circle at center,
                rgba(0, 0, 0, 0.7) 0%,
                rgba(0, 0, 0, 0.35) 70%,
                transparent 100%
            ) !important;
        box-shadow: 
            0 6px 25px rgba(0, 0, 0, 0.3),
            0 2px 8px rgba(255, 215, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 215, 0, 0.4);
    }
    
    .stat-icon {
        font-size: clamp(18px, 4vw, 24px) !important;
        margin-bottom: var(--space-xs);
        display: block;
        opacity: 1;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    }
    
    .stat-number {
        font-size: clamp(18px, 4vw, 26px) !important;
        font-weight: 900;
        line-height: 1.2;
        margin-bottom: var(--space-xs);
        
        background: linear-gradient(
            135deg,
            #FFD700 0%,
            #FFA500 25%,
            #FFD700 50%,
            #DAA520 75%,
            #FFD700 100%
        ) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        text-shadow: 
            0 2px 4px rgba(0, 0, 0, 0.6),
            0 0 10px rgba(255, 215, 0, 0.3);
        filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4));
        font-family: var(--font-display);
    }
    
    .stat-label {
        font-size: clamp(11px, 2.5vw, 13px) !important;
        color: rgba(255, 255, 255, 0.95) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        line-height: 1.2;
        font-weight: 700;
        margin-top: var(--space-xs);
        opacity: 0.9;
        transition: all 0.3s ease;
        
        /* Обеспечиваем читаемость */
        white-space: normal;
        word-wrap: break-word;
        hyphens: auto;
    }
    
    .stat-item:hover .stat-label {
        color: rgba(255, 255, 255, 1) !important;
        opacity: 1;
        transform: translateY(-2px);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
        margin-bottom: 0; /* Убираем отступ, так как статистика теперь в потоке */
        gap: var(--space-md);
    }
    
    .btn {
        width: 100%;
        padding: var(--space-md) var(--space-lg);
        font-size: 0.95rem;
    }
    
    .image-stack {
        height: 400px;
    }
    
    .presenter-card {
        flex-direction: column;
        text-align: center;
    }
    
    .trust-indicators {
        flex-direction: column;
        gap: var(--space-md);
    }
}

/* Gallery Section */
.gallery {
    background: 
        linear-gradient(135deg, 
            rgba(34, 34, 34, 0.95) 0%, 
            rgba(40, 40, 40, 0.92) 50%, 
            rgba(36, 36, 36, 0.95) 100%
        );
    padding: var(--section-padding) 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    align-items: start;
    grid-auto-rows: max-content;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    height: 400px;
    cursor: pointer;
    transition: all var(--transition-base);
}

.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-xl);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay h3 {
    color: var(--white-pure);
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
}

.gallery-overlay p {
    color: var(--gray-300);
    font-size: 0.875rem;
}

/* Team Section */
.team {
    position: relative;
    background: 
        linear-gradient(135deg, 
            rgba(32, 32, 32, 0.95) 0%, 
            rgba(38, 38, 38, 0.92) 50%, 
            rgba(34, 34, 34, 0.95) 100%
        );
    overflow: hidden;
}

.team::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="4" height="4" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="0.5" fill="%23DEB887" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

.team-member {
    background: 
        linear-gradient(135deg, 
            rgba(48, 48, 48, 0.95) 0%, 
            rgba(52, 52, 52, 0.92) 50%, 
            rgba(50, 50, 50, 0.95) 100%
        );
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.2);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.team-member::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: var(--wood-gradient);
    opacity: 0;
    transition: all var(--transition-slow);
    transform: rotate(45deg);
}

.team-member:hover::before {
    opacity: 0.05;
}

.team-member:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.member-photo {
    width: 250px;
    height: 320px;
    border-radius: var(--radius-md);
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 4px solid var(--wood-light);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.member-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.member-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--metal-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--white-pure);
    margin: 0 auto var(--space-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.member-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-100);
    margin-bottom: var(--space-sm);
    text-align: center;
}

.member-role {
    color: var(--accent-gold);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--space-md);
    font-size: 1.1rem;
}

.member-bio {
    color: var(--gray-300);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
    text-align: center;
    flex-grow: 1;
}

.member-achievements {
    list-style: none;
    margin: var(--space-lg) 0;
}

.member-achievements li {
    padding: var(--space-sm) 0;
    color: var(--gray-300);
    position: relative;
    padding-left: var(--space-lg);
}

.member-achievements li::before {
    content: '🏆';
    position: absolute;
    left: 0;
    top: var(--space-sm);
}

.member-contact {
    text-align: center;
    margin-top: var(--space-lg);
}

.member-contact a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--wood-dark);
    text-decoration: none;
    font-weight: 600;
    padding: var(--space-sm) var(--space-lg);
    border: 2px solid var(--wood-light);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    cursor: pointer;
}

.member-contact a:hover {
    background: var(--wood-dark);
    color: var(--white-pure);
    border-color: var(--wood-dark);
}

.member-experience {
    margin: var(--space-lg) 0;
    text-align: left;
    margin-top: auto;
}

.member-experience h4 {
    color: var(--accent-gold);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    text-align: center;
    position: relative;
}

.member-experience h4::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--accent-gold);
}

.member-career {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 215, 0, 0.2);
}

.career-path {
    color: var(--gray-300);
    line-height: 1.7;
    text-align: center;
    font-style: italic;
    margin: 0;
    padding: var(--space-md);
    background: rgba(255, 215, 0, 0.05);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent-gold);
}

/* Dark Premium Contact Section */
.contact {
    background: 
        linear-gradient(135deg, 
            #1a1a1a 0%, 
            #2d2d2d 50%, 
            #1f1f1f 100%
        );
    padding: var(--section-padding) 0;
    position: relative;
    overflow: hidden;
}

.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Subtle mesh pattern */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 40px,
            rgba(255, 255, 255, 0.02) 40px,
            rgba(255, 255, 255, 0.02) 40.5px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 40px,
            rgba(255, 255, 255, 0.02) 40px,
            rgba(255, 255, 255, 0.02) 40.5px
        ),
        /* Diagonal lines */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 80px,
            rgba(255, 255, 255, 0.01) 80px,
            rgba(255, 255, 255, 0.01) 81px
        );
    pointer-events: none;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: start;
}

.contact-info h3 {
    font-size: 2rem;
    margin-bottom: var(--space-xl);
    color: var(--white-pure);
    position: relative;
    z-index: 1;
}

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

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    position: relative;
    z-index: 1;
}

.contact-icon {
    width: 48px;
    height: 48px;
    background: 
        linear-gradient(135deg, 
            var(--accent-gold) 0%, 
            var(--accent-copper) 100%
        );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black-soft);
    box-shadow: 
        0 4px 15px rgba(255, 215, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.4);
}

.contact-icon svg {
    width: 24px;
    height: 24px;
}

.contact-details h4 {
    font-size: 1.125rem;
    margin-bottom: var(--space-xs);
    color: var(--white-pure);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.contact-details p,
.contact-details a {
    color: var(--gray-300);
    text-decoration: none;
}

.contact-details span {
    color: var(--gray-400);
    font-size: 0.9rem;
}

.contact-details a:hover {
    color: var(--accent-gold);
    text-shadow: 0 1px 2px rgba(255, 215, 0, 0.3);
}

/* Contact form styles removed */

/* Dark Premium Footer */
.footer {
    background: 
        linear-gradient(135deg, 
            #1a1a1a 0%, 
            #2d2d2d 50%, 
            #1f1f1f 100%
        );
    color: var(--white-pure);
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--accent-copper);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 -8px 32px rgba(0, 0, 0, 0.3);
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Subtle mesh pattern */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 40px,
            rgba(255, 255, 255, 0.02) 40px,
            rgba(255, 255, 255, 0.02) 40.5px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 40px,
            rgba(255, 255, 255, 0.02) 40px,
            rgba(255, 255, 255, 0.02) 40.5px
        ),
        /* Diagonal lines */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 80px,
            rgba(255, 255, 255, 0.01) 80px,
            rgba(255, 255, 255, 0.01) 81px
        );
    pointer-events: none;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-3xl);
    padding: var(--space-4xl) 0;
    position: relative;
    z-index: 1;
}

.footer-section {
    display: flex;
    flex-direction: column;
}

.footer-description {
    color: var(--gray-300);
    line-height: 1.6;
    margin-top: var(--space-md);
    font-size: 0.95rem;
}

.footer-contacts {
    list-style: none;
    padding: 0;
}

.footer-contacts li {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    color: var(--gray-300);
}

.footer-contacts i {
    color: var(--accent-copper);
    font-size: 1.1rem;
    width: 20px;
}

.footer-contacts a {
    color: var(--gray-300);
    text-decoration: none;
    transition: color var(--transition-base);
}

.footer-contacts a:hover {
    color: var(--white-pure);
}

.footer-social {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.1);
    color: var(--white-pure);
    text-decoration: none;
    transition: all var(--transition-base);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.social-link.whatsapp:hover {
    background: #25D366;
    border-color: #25D366;
}

.social-link.telegram:hover {
    background: #0088cc;
    border-color: #0088cc;
}

.social-link.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    border-color: #e6683c;
}

.footer-section h4 {
    color: var(--white-pure);
    margin-bottom: var(--space-lg);
    font-family: var(--font-display);
    font-size: 1.25rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    position: relative;
    padding-bottom: var(--space-sm);
}

.footer-section h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--wood-gradient);
    border-radius: var(--radius-full);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.footer-logo img {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.footer-logo span {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-copper), var(--wood-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: var(--space-md);
}

.footer-links a {
    color: var(--gray-300);
    text-decoration: none;
    transition: all var(--transition-base);
    position: relative;
}

.footer-links a::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--wood-gradient);
    transition: width var(--transition-base);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

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

.footer-links a:hover::before {
    width: 100%;
}

.footer-bottom {
    border-top: 2px solid var(--metal-steel);
    padding: var(--space-2xl) 0;
    position: relative;
    z-index: 1;
    background: 
        linear-gradient(135deg, 
            rgba(0, 0, 0, 0.3) 0%, 
            rgba(54, 69, 79, 0.2) 100%
        );
    color: var(--gray-300);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 -4px 20px rgba(0, 0, 0, 0.2);
}

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

.footer-legal {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
    justify-self: start;
}

.footer-legal a {
    color: var(--gray-300);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all var(--transition-base);
    position: relative;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-legal a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--accent-copper);
    transition: width var(--transition-base);
    border-radius: var(--radius-full);
}

.footer-legal a:hover {
    color: var(--white-pure);
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-2px);
}

.footer-legal a:hover::after {
    width: 80%;
}

.footer-legal-info {
    justify-self: center;
    text-align: center;
    padding: var(--space-lg);
    background: 
        linear-gradient(135deg, 
            rgba(255, 255, 255, 0.08) 0%, 
            rgba(255, 255, 255, 0.04) 100%
        );
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 215, 0, 0.2);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    max-width: 500px;
}

.footer-legal-info p {
    margin: var(--space-xs) 0;
    font-size: 0.9rem;
    color: var(--gray-200);
    line-height: 1.5;
    font-weight: 500;
}

.footer-legal-info p:first-child {
    color: var(--accent-copper);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.footer-legal-info p:last-child {
    font-size: 0.85rem;
    color: var(--gray-400);
    margin-top: var(--space-sm);
}

.footer-copyright {
    font-size: 0.9rem;
    margin: 0;
}

/* Footer Copyright Section */
.footer-copyright-section {
    justify-self: end;
    text-align: center;
    padding: var(--space-lg);
    background: 
        linear-gradient(135deg, 
            rgba(255, 255, 255, 0.08) 0%, 
            rgba(255, 255, 255, 0.03) 100%
        );
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 215, 0, 0.15);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    min-width: 200px;
}

.footer-copyright-section .footer-copyright {
    margin: 0 0 var(--space-xs) 0;
    color: var(--white-pure);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.footer-rights {
    margin: 0;
    color: var(--gray-300);
    font-size: 0.85rem;
    font-style: italic;
    opacity: 0.8;
}

/* Footer Legal Icons */
.footer-legal a i {
    margin-right: var(--space-xs);
    font-size: 1rem;
    color: var(--accent-copper);
    transition: all var(--transition-base);
    display: inline-block;
    width: 16px;
    text-align: center;
}

.footer-legal a:hover i {
    color: var(--accent-gold);
    transform: scale(1.1);
}

/* Cookie Consent Banner */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: 
        linear-gradient(135deg, 
            rgba(26, 26, 26, 0.98) 0%, 
            rgba(45, 45, 45, 0.98) 100%
        );
    backdrop-filter: blur(20px);
    border-top: 2px solid var(--accent-copper);
    box-shadow: 
        0 -8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 10000;
    transform: translateY(100%);
    transition: transform var(--transition-slow);
}

.cookie-consent.show {
    transform: translateY(0);
}

.cookie-content {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    flex-wrap: wrap;
}

.cookie-text h4 {
    color: var(--white-pure);
    margin-bottom: var(--space-sm);
    font-size: 1.1rem;
    font-weight: 600;
}

.cookie-text p {
    color: var(--gray-300);
    line-height: 1.5;
    margin: 0;
    font-size: 0.95rem;
}

.cookie-text a {
    color: var(--accent-copper);
    text-decoration: none;
    transition: color var(--transition-base);
}

.cookie-text a:hover {
    color: var(--accent-gold);
}

.cookie-buttons {
    display: flex;
    gap: var(--space-md);
    flex-shrink: 0;
}

.cookie-buttons .btn {
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.9rem;
    min-width: 100px;
    white-space: nowrap;
}

.btn-outline {
    background: transparent;
    color: var(--gray-300);
    border: 1px solid var(--gray-600);
    transition: all var(--transition-base);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white-pure);
    border-color: var(--gray-400);
}

/* Responsive Improvements */
@media (max-width: 1200px) {
    .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: var(--space-xl);
    }
}

@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 0 var(--space-md);
    }
    
    .project-specs-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    .project-cta {
        flex-direction: column;
    }
    
    .btn-favorite {
        width: 100%;
        height: 48px;
    }
    
    .gallery-filter {
        gap: var(--space-sm);
    }
    
    .gallery-filter-btn {
        padding: var(--space-sm) var(--space-lg);
        font-size: 0.9rem;
    }
    
    .contact-form-container {
        padding: var(--space-xl);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        text-align: center;
    }
    
    .footer-bottom-content {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        text-align: center;
        padding: 0 var(--space-md);
    }
    
    .footer-legal {
        justify-self: center;
        flex-direction: column;
        gap: var(--space-md);
        width: 100%;
    }
    
    .footer-legal a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-md) var(--space-lg);
        margin: 0 auto;
        max-width: 280px;
        width: 100%;
    }
    
    .footer-legal-info {
        justify-self: center;
        margin: var(--space-lg) 0;
        padding: var(--space-md);
        max-width: 100%;
        width: 100%;
    }
    
    .footer-legal-info p {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    .footer-copyright-section {
        justify-self: center;
        min-width: auto;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .footer-copyright-section .footer-copyright {
        font-size: 0.9rem;
    }
    
    .footer-rights {
        font-size: 0.8rem;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .cookie-content {
        flex-direction: column;
        text-align: center;
        gap: var(--space-lg);
    }
    
    .cookie-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .cookie-buttons .btn {
        flex: 1;
        min-width: 120px;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

.slide-up {
    animation: slideUp 0.8s ease-out forwards;
}

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

/* Scroll Progress Bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--brick-gradient);
    z-index: 9999;
    transition: width 0.1s ease;
}

/* Loading States */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* =====================================================
   ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ ЕДИНОГО ДИЗАЙНА
   ===================================================== */

/* Enhanced Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-2xl);
    margin-top: var(--space-3xl);
}

.project-card {
    background: 
        linear-gradient(135deg, 
            rgba(42, 42, 42, 0.95) 0%, 
            rgba(48, 48, 48, 0.92) 50%, 
            rgba(45, 45, 45, 0.95) 100%
        );
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: all var(--transition-base);
    position: relative;
    border: 1px solid rgba(255, 215, 0, 0.2);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--brick-gradient);
    opacity: 0;
    transition: all var(--transition-base);
}

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

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
}

.project-gallery {
    position: relative;
    height: 280px;
    overflow: hidden;
}

.project-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all var(--transition-slow);
}

.project-thumbnails {
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-md);
    right: var(--space-md);
    display: flex;
    gap: var(--space-sm);
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--transition-base);
}

.project-card:hover .project-thumbnails {
    opacity: 1;
    transform: translateY(0);
}

.project-thumbnail {
    width: 50px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    cursor: pointer;
    border: 2px solid var(--white-pure);
    transition: all var(--transition-fast);
    opacity: 0.7;
}

.project-thumbnail:hover,
.project-thumbnail.active {
    opacity: 1;
    border-color: var(--accent-gold);
}

.project-content {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
}

.project-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-100);
    margin-bottom: var(--space-sm);
}

.project-badge {
    background: var(--brick-gradient);
    color: var(--white-pure);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.project-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.spec-item {
    text-align: center;
    padding: var(--space-md);
    background: 
        linear-gradient(135deg, 
            rgba(42, 42, 42, 0.95) 0%, 
            rgba(48, 48, 48, 0.92) 50%, 
            rgba(45, 45, 45, 0.95) 100%
        );
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.spec-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brick-orange);
    display: block;
}

.spec-label {
    font-size: 0.875rem;
    color: var(--gray-300);
    margin-top: var(--space-xs);
}

.project-highlights {
    margin-bottom: var(--space-lg);
    flex: 1;
    min-height: 180px;
}

.highlight-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.highlight-list li {
    padding: var(--space-sm) 0;
    color: var(--gray-700);
    position: relative;
    padding-left: var(--space-lg);
    font-size: 0.9rem;
}

.highlight-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--brick-orange);
    font-weight: bold;
}

.project-price-section {
    border-top: 1px solid var(--gray-200);
    padding-top: var(--space-lg);
    text-align: center;
}

.price-main {
    font-size: 2rem;
    font-weight: 800;
    color: var(--brick-orange);
    font-family: var(--font-display);
}

.price-per-sqm {
    color: var(--gray-600);
    font-size: 0.9rem;
    margin-top: var(--space-xs);
}

.project-cta {
    margin-top: auto;
    display: flex;
    gap: var(--space-md);
}

.btn-project-details {
    flex: 1;
    background: var(--brick-gradient);
    color: var(--white-pure);
    padding: var(--space-md) var(--space-lg);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-project-details:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn-buy-house {
    flex: 1;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: var(--black-pure);
    padding: var(--space-md) var(--space-lg);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

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

.btn-buy-house:hover::before {
    left: 100%;
}

.btn-buy-house:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 28px rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, #FFF700, #FF8C00);
}

.btn-buy-house:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 6px 16px rgba(255, 215, 0, 0.3);
}

.btn-favorite {
    width: 48px;
    height: 48px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    background: rgba(45, 45, 45, 0.8);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--gray-300);
}

.btn-favorite:hover,
.btn-favorite.active {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    background: rgba(255, 215, 0, 0.1);
}

/* Enhanced Gallery */
.gallery-filter {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-3xl);
    flex-wrap: wrap;
}

.gallery-filter-btn {
    padding: var(--space-md) var(--space-xl);
    border: 2px solid rgba(255, 215, 0, 0.3);
    background: rgba(45, 45, 45, 0.8);
    color: var(--gray-300);
    border-radius: var(--radius-full);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.gallery-filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--wood-gradient);
    transition: all var(--transition-base);
    z-index: -1;
}

.gallery-filter-btn:hover::before,
.gallery-filter-btn.active::before {
    left: 0;
}

.gallery-filter-btn:hover,
.gallery-filter-btn.active {
    border-color: var(--wood-dark);
    color: var(--white-pure);
}

/* Social Media Buttons */
.btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: var(--white-pure) !important;
    border: none;
}

.btn-whatsapp:hover {
    background: linear-gradient(135deg, #128C7E, #075E54);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

.btn-telegram {
    background: linear-gradient(135deg, #0088cc, #0066aa);
    color: var(--white-pure) !important;
    border: none;
}

.btn-telegram:hover {
    background: linear-gradient(135deg, #0066aa, #004488);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 136, 204, 0.3);
}

.btn-instagram {
    background: linear-gradient(135deg, #E4405F, #C13584, #833AB4);
    color: var(--white-pure) !important;
    border: none;
}

.btn-instagram:hover {
    background: linear-gradient(135deg, #C13584, #833AB4, #5851DB);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(228, 64, 95, 0.3);
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --gray-900: #000000;
        --gray-100: #FFFFFF;
        --brick-orange: #FF6600;
        --accent-gold: #FFAA00;
    }
}

/* Safari iOS Specific Fixes */
@supports (-webkit-touch-callout: none) {
    .hero-stats {
        background: 
            linear-gradient(135deg, 
                rgba(15, 15, 15, 0.98) 0%,
                rgba(25, 25, 25, 0.95) 50%,
                rgba(20, 20, 20, 0.98) 100%
            ) !important;
        border: 2px solid rgba(255, 215, 0, 0.25) !important;
        box-shadow: 
            0 10px 30px rgba(0, 0, 0, 0.7),
            inset 0 1px 0 rgba(255, 215, 0, 0.2) !important;
    }
    
    .stat-item {
        background: 
            linear-gradient(135deg, 
                rgba(20, 20, 20, 0.98) 0%,
                rgba(30, 30, 30, 0.95) 50%,
                rgba(25, 25, 25, 0.98) 100%
            ) !important;
        border: 2px solid rgba(255, 215, 0, 0.4) !important;
        box-shadow: 
            0 8px 24px rgba(0, 0, 0, 0.8),
            inset 0 1px 0 rgba(255, 215, 0, 0.3),
            inset 0 -1px 0 rgba(0, 0, 0, 0.4) !important;
    }
    
    .stat-number {
        background: linear-gradient(
            135deg,
            #FFD700 0%,
            #FFA500 25%,
            #FF8C00 50%,
            #DAA520 75%,
            #FFD700 100%
        ) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9));
        font-weight: 900 !important;
    }
    
    .stat-label {
        color: rgba(255, 255, 255, 0.98) !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
        font-weight: 700 !important;
    }
}

/* WebKit browsers fix for transparent backgrounds */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .stat-item {
        background: 
            linear-gradient(135deg, 
                rgba(25, 25, 25, 0.99) 0%,
                rgba(35, 35, 35, 0.97) 50%,
                rgba(30, 30, 30, 0.99) 100%
            ) !important;
        border: 1px solid rgba(255, 215, 0, 0.35) !important;
    }
    
    .hero-stats {
        background: 
            linear-gradient(135deg, 
                rgba(18, 18, 18, 0.95) 0%,
                rgba(28, 28, 28, 0.92) 50%,
                rgba(23, 23, 23, 0.95) 100%
            ) !important;
    }
}

/* Dark Mode Support */
/* Удален медиа-запрос темной темы для обеспечения консистентного фона */

/* Performance Optimizations */
.project-image img,
.gallery-item img {
    will-change: transform;
}

.hero-video {
    will-change: opacity;
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus Styles */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 3px solid var(--brick-orange);
    outline-offset: 2px;
}

/* Skip to Content */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--black-soft);
    color: var(--white-pure);
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    border-radius: var(--radius-md);
    z-index: 9999;
}

.skip-to-content:focus {
    top: 10px;
}

/* Custom Selection */
::selection {
    background: var(--brick-orange);
    color: var(--white-pure);
}

::-moz-selection {
    background: var(--brick-orange);
    color: var(--white-pure);
}

/* Enhanced Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    overflow-y: auto;
    backdrop-filter: blur(8px);
    -webkit-overflow-scrolling: touch;
}

.modal.active {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-xl);
    padding-top: max(60px, var(--space-xl));
}

.modal-content {
    background: 
        linear-gradient(135deg, 
            rgba(42, 42, 42, 0.95) 0%, 
            rgba(48, 48, 48, 0.92) 50%, 
            rgba(45, 45, 45, 0.95) 100%
        );
    border-radius: var(--radius-xl);
    max-width: 1200px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.2);
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.modal-close {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--white-pure);
    transition: all var(--transition-base);
    z-index: 10001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.modal-close:hover {
    background: rgba(231, 76, 60, 0.9);
    border-color: rgba(231, 76, 60, 0.5);
    color: var(--white-pure);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

.project-modal-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    padding: var(--space-2xl);
}

.project-modal-gallery {
    position: relative;
}

.modal-main-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-base);
    cursor: pointer;
}

.modal-main-image:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
}

.modal-main-image:active {
    transform: scale(0.98);
}

.modal-thumbnails {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    overflow-x: auto;
    padding-bottom: var(--space-sm);
}

.modal-thumbnail {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0.7;
    transition: all var(--transition-base);
    border: 2px solid transparent;
    flex-shrink: 0;
}

.modal-thumbnail:hover,
.modal-thumbnail.active {
    opacity: 1;
    border-color: var(--brick-orange);
    transform: scale(1.05);
}

.project-modal-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.modal-header-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-lg);
}

.modal-header-info h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--gray-100);
}

.project-category-badge {
    background: var(--brick-gradient);
    color: var(--white-pure);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.modal-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    background: 
        linear-gradient(135deg, 
            rgba(42, 42, 42, 0.95) 0%, 
            rgba(48, 48, 48, 0.92) 50%, 
            rgba(45, 45, 45, 0.95) 100%
        );
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.modal-spec-item {
    text-align: center;
}

.modal-spec-item .spec-label {
    display: block;
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: var(--space-xs);
}

.modal-spec-item .spec-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brick-orange);
}

.modal-description,
.modal-features {
    margin-bottom: var(--space-lg);
}

.modal-description h3,
.modal-features h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-100);
    margin-bottom: var(--space-md);
}

.modal-description p {
    color: var(--gray-300);
    line-height: 1.8;
}

.modal-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal-features li {
    padding: var(--space-sm) 0;
    color: var(--gray-300);
    position: relative;
    padding-left: var(--space-lg);
}

.modal-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--brick-orange);
    font-weight: bold;
}

.modal-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: auto;
    justify-content: center;
}

.modal-actions .btn {
    flex: 1;
    text-align: center;
    text-decoration: none;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-base);
    max-width: none;
}

/* Специальная анимированная кнопка "Заказать проект" */
.btn-order-project {
    background: linear-gradient(135deg, 
        #FFD700 0%, 
        #FFA500 25%, 
        #FF8C00 50%, 
        #DAA520 75%, 
        #FFD700 100%);
    background-size: 300% 300%;
    color: #1a1a1a !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    padding: 18px 36px !important;
    border: 2px solid transparent;
    border-radius: 16px !important;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 
        0 8px 25px rgba(255, 215, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    animation: orderButtonGradient 3s ease-in-out infinite alternate,
               orderButtonGlow 2s ease-in-out infinite alternate;
    transition: all 0.3s ease;
}

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

.btn-order-project:hover::before {
    left: 100%;
}

.btn-order-project:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 15px 40px rgba(255, 215, 0, 0.4),
        0 5px 15px rgba(255, 140, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-order-project:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 
        0 8px 20px rgba(255, 215, 0, 0.5),
        inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

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

@keyframes orderButtonGlow {
    0% {
        box-shadow: 
            0 8px 25px rgba(255, 215, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 
            0 12px 35px rgba(255, 215, 0, 0.5),
            0 0 20px rgba(255, 215, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }
}

/* Notification Styles */
.notification {
    position: fixed;
    top: var(--space-xl);
    right: var(--space-xl);
    background: var(--brick-gradient);
    color: var(--white-pure);
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 10001;
    font-weight: 600;
    max-width: 300px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.notification.show {
    transform: translateX(0);
}

/* Loading States */
img.loading {
    background: var(--gray-200);
    position: relative;
    overflow: hidden;
}

img.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: shimmer 1.5s infinite;
}

img.error {
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
}

img.error::after {
    content: '🖼️';
    font-size: 2rem;
}

/* Enhanced form styles removed */

/* Animation keyframes */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animate in class */
.animate-in {
    animation: slideInUp 0.8s ease-out forwards;
}

/* Mobile styles for about section text contrast */
@media (max-width: 768px) {
    .about-text h3 {
        color: var(--white-pure) !important;
        text-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.8),
            0 0 8px rgba(0, 0, 0, 0.6),
            0 0 16px rgba(0, 0, 0, 0.4);
        background: linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.5) 50%,
            rgba(0, 0, 0, 0.7) 100%
        );
        padding: var(--space-md) var(--space-lg);
        border-radius: var(--radius-lg);
        border: 1px solid rgba(255, 215, 0, 0.3);
        backdrop-filter: blur(10px);
        margin-bottom: var(--space-xl);
    }
}

@media (max-width: 480px) {
    .about-text h3 {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        padding: var(--space-sm) var(--space-md);
        text-shadow: 
            2px 2px 6px rgba(0, 0, 0, 0.9),
            0 0 10px rgba(0, 0, 0, 0.7),
            0 0 20px rgba(0, 0, 0, 0.5);
    }
}

/* Mobile Responsive Improvements */
@media (max-width: 768px) {
    .modal {
        padding: 0;
        align-items: flex-start;
    }
    
    .modal.active {
        padding: 0;
        padding-top: 60px; /* Уменьшено для лучшего позиционирования */
    }
    
    .modal-content {
        margin: 10px;
        max-height: calc(100vh - 80px); /* Увеличено доступное пространство */
        width: calc(100vw - 20px);
        border-radius: 16px;
    }
    
    .modal-close {
        position: fixed !important; /* Принудительно fixed для мобильных */
        top: 15px !important;
        right: 15px !important;
        width: 50px !important; /* Увеличено для лучшего тапа */
        height: 50px !important;
        font-size: 1.4rem !important;
        z-index: 10005 !important; /* Максимальный z-index для iOS Safari */
        background: rgba(0, 0, 0, 0.95) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
        border: 2px solid rgba(255, 255, 255, 0.8) !important; /* Яркая рамка */
        backdrop-filter: blur(10px) !important;
        color: #ffffff !important;
    }
    
    .project-modal-content {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: var(--space-lg);
    }
    
    .modal-main-image {
        height: 200px;
    }
    
    .modal-specs {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
    
    .modal-actions {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .modal-thumbnails {
        justify-content: center;
        gap: var(--space-xs);
    }
    
    .modal-thumbnail {
        width: 60px;
        height: 45px;
    }
    
    .notification {
        top: var(--space-md);
        right: var(--space-md);
        left: var(--space-md);
        max-width: none;
    }
}

/* Enhanced scrollbar for modal */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: rgba(45, 45, 45, 0.8);
    border-radius: var(--radius-full);
}

.modal-content::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: var(--radius-full);
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* Focus trap for modal */
.modal.active .modal-content {
    animation: fadeInScale 0.3s ease-out;
}

/* Print styles for modals */
@media print {
    .modal {
        display: none !important;
    }
}

/* Дополнительные мобильные стили */
@media (max-width: 480px) {
    .modal-close {
        position: fixed !important; /* Принудительно fixed для мобильных */
        top: 10px !important;
        right: 10px !important;
        width: 48px !important; /* Увеличено для лучшего тапа */
        height: 48px !important;
        font-size: 1.3rem !important;
        z-index: 10005 !important; /* Максимальный z-index для iOS Safari */
        background: rgba(0, 0, 0, 0.95) !important;
        border: 2px solid rgba(255, 255, 255, 0.9) !important; /* Яркая рамка */
        color: #ffffff !important;
        transition: all 0.2s ease;
    }
    
    .modal-close:active {
        transform: scale(0.95);
    }
    
    .modal-content {
        margin: 8px;
        max-height: calc(100vh - 70px); /* Увеличено доступное пространство */
        width: calc(100vw - 16px);
        border-radius: 12px;
    }
    
    .modal.active {
        padding-top: 50px; /* Уменьшено для лучшего позиционирования */
    }
    
    .project-modal-content {
        padding: var(--space-md);
        gap: var(--space-md);
    }
    
    .modal-main-image {
        height: 180px;
        border-radius: 8px;
        touch-action: pan-y;
    }
    
    .modal-specs {
        grid-template-columns: 1fr;
        padding: var(--space-md);
    }
    
    .modal-header-info h2 {
        font-size: 1.5rem;
    }
    
    .modal-thumbnails {
        gap: 4px;
        margin-top: var(--space-sm);
        touch-action: pan-x;
    }
    
    .modal-thumbnail {
        width: 50px;
        height: 38px;
        touch-action: manipulation;
    }
}

/* Очень маленькие экраны */
@media (max-width: 375px) {
    .modal-close {
        position: fixed !important; /* Принудительно fixed для мобильных */
        top: 8px !important;
        right: 8px !important;
        width: 46px !important; /* Увеличено для лучшего тапа */
        height: 46px !important;
        font-size: 1.2rem !important;
        z-index: 10005 !important; /* Максимальный z-index для iOS Safari */
        background: rgba(0, 0, 0, 0.95) !important;
        border: 2px solid rgba(255, 255, 255, 0.9) !important; /* Яркая рамка */
        color: #ffffff !important;
    }
    
    .modal-content {
        margin: 6px;
        max-height: calc(100vh - 60px); /* Увеличено доступное пространство */
        width: calc(100vw - 12px);
    }
    
    .modal.active {
        padding-top: 45px; /* Уменьшено для лучшего позиционирования */
    }
    
    .project-modal-content {
        padding: 12px;
        gap: 12px;
    }
    
    .modal-main-image {
        height: 160px;
    }
    
    .modal-header-info h2 {
        font-size: 1.3rem;
        line-height: 1.2;
    }
}

/* Lightbox styles */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    display: none; /* Изначально скрыт */
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: -50px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 30px;
    cursor: pointer;
    padding: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 10001;
}

.lightbox-close:hover {
    background: rgba(231, 76, 60, 0.9);
    border-color: rgba(231, 76, 60, 0.5);
    color: white;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.lightbox-prev {
    left: -80px;
}

.lightbox-next {
    right: -80px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 215, 0, 0.9);
    border-color: rgba(255, 215, 0, 0.5);
    color: black;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.lightbox-caption {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 16px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
    .lightbox {
        -webkit-overflow-scrolling: touch;
        overflow: hidden;
    }
    
    .lightbox-close {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 28px;
        background: rgba(0, 0, 0, 0.9);
        z-index: 10002;
        border: 2px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .lightbox-prev,
    .lightbox-next {
        font-size: 24px;
        padding: 12px 16px;
        opacity: 1;
        background: rgba(0, 0, 0, 0.9);
        border: 2px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
        width: 50px;
        height: 50px;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .lightbox-prev {
        left: 20px;
    }
    
    .lightbox-next {
        right: 20px;
    }
    
    .lightbox-content {
        max-width: 95%;
        max-height: 85%;
        margin: 0 auto;
        padding: 60px 20px 20px 20px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .lightbox-image {
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        pointer-events: none;
    }
    
    .lightbox-caption {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        font-size: 16px;
        padding: 12px 20px;
        background: rgba(0, 0, 0, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        text-align: center;
        transform: none;
        max-width: calc(100% - 40px);
    }
}

/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 480px) {
    .lightbox-close {
        position: fixed;
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 24px;
        background: rgba(0, 0, 0, 0.95);
        z-index: 10003;
        border: 2px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.9);
    }
    
    .lightbox-prev,
    .lightbox-next {
        font-size: 20px;
        padding: 10px 14px;
        width: 45px;
        height: 45px;
        background: rgba(0, 0, 0, 0.95);
        border: 2px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.9);
    }
    
    .lightbox-prev {
        left: 15px;
    }
    
    .lightbox-next {
        right: 15px;
    }
    
    .lightbox-content {
        max-width: 100%;
        max-height: 90%;
        margin: 0;
        padding: 70px 10px 80px 10px;
    }
    
    .lightbox-image {
        max-width: 100%;
        max-height: 100%;
        border-radius: 6px;
        object-fit: contain;
    }
    
    .lightbox-caption {
        position: fixed;
        bottom: 15px;
        left: 15px;
        right: 15px;
        font-size: 14px;
        padding: 10px 16px;
        background: rgba(0, 0, 0, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 10px;
        text-align: center;
        transform: none;
        max-width: calc(100% - 30px);
    }
}

/* Специальные стили для iPhone */
@media (max-width: 414px) and (-webkit-min-device-pixel-ratio: 2) {
    .lightbox {
        height: 100vh;
        height: -webkit-fill-available;
    }
    
    .lightbox-content {
        padding: 80px 15px 90px 15px;
    }
    
    .lightbox-close {
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
    
    .lightbox-prev,
    .lightbox-next {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    
    .lightbox-prev {
        left: 10px;
    }
    
    .lightbox-next {
        right: 10px;
    }
}

/* Специальные стили для Android */
@media (max-width: 480px) and (orientation: portrait) {
    .lightbox {
        height: 100vh;
        height: 100dvh;
    }
}

/* Отключение выделения и контекстного меню */
.lightbox * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

/* Планшеты портрет */
@media (max-width: 768px) and (orientation: portrait) {
    .modal-close {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 10003;
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(10px);
    }
    
    .modal-content {
        max-height: calc(100vh - 80px);
        margin: 10px;
    }
}

/* Планшеты альбом */
@media (max-width: 1024px) and (orientation: landscape) {
    .modal-close {
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 10003;
    }
    
    .modal.active {
        padding-top: 50px;
    }
    
    .modal-content {
        max-height: calc(100vh - 60px);
        margin: 5px;
    }
}

/* Стили для десктопа */
@media (min-width: 1025px) {
    .modal-close {
        position: absolute;
        top: var(--space-lg);
        right: var(--space-lg);
        width: 50px;
        height: 50px;
        z-index: 10001;
    }
    
    .modal.active {
        align-items: center;
        padding: var(--space-md);
        padding-top: var(--space-md);
    }
    
    .modal-content {
        max-height: 95vh;
        margin: 0;
        width: 100%;
        max-width: 1600px;
    }
    
    .project-modal-content {
        padding: var(--space-2xl);
        gap: var(--space-2xl);
    }
    
    .modal-main-image {
        height: 500px;
    }
}

/* High contrast mode for modals */
@media (prefers-contrast: high) {
    .modal {
        background: rgba(0, 0, 0, 0.95);
    }
    
    .modal-content {
        border: 3px solid var(--gray-900);
    }
}

/* ДОПОЛНИТЕЛЬНЫЕ ИСПРАВЛЕНИЯ ДЛЯ ОЧЕНЬ МАЛЕНЬКИХ ЭКРАНОВ */
@media (max-width: 480px) {
    .hero {
        padding-top: 90px !important;
        min-height: 100vh;
        min-height: 100dvh;
    }
    
    .hero-content {
        padding: clamp(15px, 6vh, 30px) 0 !important;
    }
    
    /* КОМПАКТНЫЕ ЗАГОЛОВКИ */
    .hero-title {
        font-size: clamp(1.8rem, 6vw, 2.2rem) !important;
        margin-bottom: clamp(8px, 2vw, 12px) !important;
    }
    
    .hero-title-line:first-child {
        font-size: clamp(1.8rem, 6vw, 2.2rem) !important;
        margin-bottom: 6px !important;
    }
    
    .hero-title-line:last-child {
        font-size: clamp(2rem, 7vw, 2.6rem) !important;
        margin-top: 6px !important;
    }
    
    .hero-subtitle {
        font-size: clamp(0.9rem, 3vw, 1.1rem) !important;
        margin-bottom: clamp(8px, 2vw, 12px) !important;
    }
    
    /* КОМПАКТНАЯ ВЕРСИЯ СТАТИСТИКИ */
    .hero-stats {
        max-width: 95% !important;
        gap: clamp(6px, 1.5vw, 8px) !important;
        margin: clamp(12px, 3vw, 16px) auto clamp(16px, 4vw, 24px) auto !important;
        padding: clamp(8px, 2vw, 12px) !important;
    }
    
    .stat-item {
        padding: clamp(10px, 2.5vw, 12px) clamp(6px, 1.5vw, 8px) !important;
        border-radius: 12px !important;
    }
    
    .stat-number {
        font-size: clamp(1.2rem, 3.5vw, 1.5rem) !important;
        margin-bottom: 1px !important;
    }
    
    .stat-label {
        font-size: clamp(0.6rem, 2vw, 0.75rem) !important;
        line-height: 1.1 !important;
    }
    
    .stat-icon {
        font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
        margin-bottom: 2px !important;
    }
    
    /* КОМПАКТНЫЙ ЗНАЧОК */
    .hero-badge {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
        margin-bottom: clamp(8px, 2vw, 12px) !important;
    }
    
    /* КОМПАКТНЫЕ ИКОНКИ */
    .feature-icon-mini {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
    }
    
    .subtitle-icons {
        gap: 6px !important;
        margin-top: clamp(8px, 2vw, 12px) !important;
    }
}

.stat-item {
        padding: clamp(8px, 1.5vw, 12px) clamp(4px, 1vw, 8px) !important;
        border-radius: 30px !important;
        background: 
            radial-gradient(
                circle at center,
                rgba(0, 0, 0, 0.6) 0%,
                rgba(0, 0, 0, 0.3) 70%,
                transparent 100%
            ) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(6px) saturate(1.2) !important;
        box-shadow: 
            0 2px 12px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
        position: relative;
        overflow: visible;
        transition: all 0.3s ease;
    }
    
    .stat-icon {
        font-size: clamp(16px, 3.5vw, 20px) !important;
        margin-bottom: 4px !important;
    }
    
    .stat-number {
        font-size: clamp(16px, 3.5vw, 22px) !important;
        font-weight: 900 !important;
        margin-bottom: 4px !important;
        background: linear-gradient(
            135deg,
            #FFD700 0%,
            #FFA500 25%,
            #FFD700 50%,
            #DAA520 75%,
            #FFD700 100%
        ) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        text-shadow: 
            0 1px 3px rgba(0, 0, 0, 0.6),
            0 0 8px rgba(255, 215, 0, 0.3) !important;
        filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4)) !important;
        font-family: var(--font-display) !important;
    }
    
    .stat-label {
        font-size: clamp(10px, 2vw, 12px) !important;
        color: rgba(255, 255, 255, 0.95) !important;
        letter-spacing: 0.08em !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
        margin-top: 2px !important;
        opacity: 0.9 !important;
        transition: all 0.3s ease !important;
    }
    
    .stat-item:hover {
        transform: translateY(-4px) scale(1.03) !important;
        background: 
            radial-gradient(
                circle at center,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(0, 0, 0, 0.4) 70%,
                transparent 100%
            ) !important;
        border-color: rgba(255, 215, 0, 0.5) !important;
        box-shadow: 
            0 4px 20px rgba(0, 0, 0, 0.35),
            0 1px 6px rgba(255, 215, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }
    
    .stat-item:hover .stat-label {
        color: rgba(255, 255, 255, 1) !important;
        opacity: 1 !important;
        transform: translateY(-1px) !important;
        text-shadow: 0 2px 3px rgba(0, 0, 0, 0.8) !important;
    }
    
    .hero-actions {
        gap: var(--space-sm) !important;
        flex-direction: row !important;
        justify-content: center !important;
    }
    
    .btn {
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
        border-radius: 16px !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        min-width: auto !important;
        max-width: 150px !important;
    }
    
    /* Прозрачные кнопки для мобильных 480px */
    .btn-primary.btn-modern {
        background: rgba(212, 175, 55, 0.22) !important;
        border: 1px solid rgba(212, 175, 55, 0.45) !important;
        color: rgba(255, 255, 255, 0.92) !important;
        box-shadow: 0 2px 10px rgba(212, 175, 55, 0.18) !important;
    }
    
    .btn-outline.btn-modern {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.22) !important;
        color: rgba(255, 255, 255, 0.85) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
    }
    
    .btn-text {
        font-size: 0.72rem !important;
    }
    
    .btn-icon {
        font-size: 0.8rem !important;
    }

/* Профессиональные размеры для кнопок навигации - пропорциональные тексту сайта */
@media (max-width: 420px) {
    .nav-bottom-btn .btn-text {
        font-size: 0.7em !important; /* Пропорционально основному тексту */
    }
    
    .nav-bottom-btn .btn-icon {
        font-size: 1.0em !important; /* Пропорционально основному тексту */
    }
}

@media (max-width: 375px) {
    .nav-bottom-btn .btn-text {
        font-size: 0.65em !important; /* Пропорционально основному тексту */
    }
    
    .nav-bottom-btn .btn-icon {
        font-size: 0.95em !important; /* Пропорционально основному тексту */
    }
}

/* Дополнительные размеры для средних мобильных экранов */
@media (max-width: 480px) and (min-width: 421px) {
    .nav-bottom-btn .btn-text {
        font-size: 0.75em !important; /* Пропорциональный размер */
    }
    
    .nav-bottom-btn .btn-icon {
        font-size: 1.05em !important; /* Пропорциональный размер */
    }
}

/* Принудительное обеспечение правильного темного фона */
@media (max-width: 1024px) {
    html {
        background: 
            linear-gradient(135deg, 
                rgba(26, 26, 26, 0.95) 0%, 
                rgba(34, 34, 34, 0.92) 25%, 
                rgba(31, 31, 31, 0.95) 50%, 
                rgba(38, 38, 38, 0.92) 75%, 
                rgba(28, 28, 28, 0.95) 100%
            ) !important;
    }
    
    body {
        background: 
            linear-gradient(135deg, 
                rgba(26, 26, 26, 0.95) 0%, 
                rgba(34, 34, 34, 0.92) 25%, 
                rgba(31, 31, 31, 0.95) 50%, 
                rgba(38, 38, 38, 0.92) 75%, 
                rgba(28, 28, 28, 0.95) 100%
            ) !important;
        color: var(--gray-200) !important;
    }
}

/* Premium Hero Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.15) 0%, 
        rgba(184, 115, 51, 0.1) 100%);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: var(--radius-full);
    padding: var(--space-sm) var(--space-lg);
    margin: 0 auto var(--space-xl) auto;
    color: var(--accent-gold);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    animation: badgeGlow 3s ease-in-out infinite alternate;
    box-shadow: 
        0 4px 20px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

@keyframes badgeGlow {
    0% { 
        box-shadow: 
            0 4px 20px rgba(255, 215, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    100% { 
        box-shadow: 
            0 8px 40px rgba(255, 215, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

.badge-icon {
    font-size: 1.2em;
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-3px); }
    60% { transform: translateY(-2px); }
}

/* Enhanced Hero Title */
.hero-title {
    font-size: clamp(2.8rem, 6vw, 5.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin: 0 auto clamp(20px, 3vh, 32px) auto;
    color: var(--white-pure);
    letter-spacing: -0.03em;
    text-align: center;
    text-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.8),
        0 2px 6px rgba(0, 0, 0, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 3;
    width: 100%;
}

/* Typewriter Effect */
.hero-typewriter {
    position: relative;
    overflow: hidden;
}

.typewriter-text {
    display: inline-block;
    animation: typewriter 2s steps(15) 1s forwards;
    width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.typewriter-cursor {
    display: inline-block;
    animation: blink 1s infinite;
    color: var(--accent-gold);
    font-weight: 400;
}

@keyframes typewriter {
    0% { width: 0; }
    100% { width: 100%; }
}

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

.separator {
    display: inline-block;
    margin: 0 var(--space-sm);
    color: var(--accent-gold);
    animation: separatorPulse 2s ease-in-out infinite;
}

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

/* Text Gradient */
.text-gradient {
    background: linear-gradient(135deg, 
        var(--white-pure) 0%, 
        var(--gray-200) 50%, 
        var(--accent-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.title-decoration {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-copper));
    border-radius: 2px;
    animation: decorationGrow 2s ease-out 1.2s forwards;
}

@keyframes decorationGrow {
    0% { width: 0; }
    100% { width: 100%; }
}

/* Enhanced Subtitle */
.hero-subtitle-container {
    margin: 0 auto var(--space-2xl) auto;
    text-align: center;
}

.premium-description {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--gray-100);
    line-height: 1.7;
    margin: 0 auto clamp(20px, 3vh, 24px) auto;
    text-align: center;
    text-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.7),
        0 1px 4px rgba(0, 0, 0, 0.5);
    font-weight: 400;
    opacity: 0.95;
    max-width: 650px;
}

.highlight-number {
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-copper));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
    font-size: 1.2em;
    text-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

.location-highlight {
    color: var(--accent-gold);
    font-weight: 600;
    position: relative;
}

.location-highlight::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-gold), transparent);
    border-radius: 1px;
}

.price-highlight {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 1.1em;
}

.guarantee-highlight {
    color: var(--accent-gold);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--accent-gold);
    text-underline-offset: 3px;
}

/* Subtitle Icons */
.subtitle-icons {
    display: flex;
    gap: var(--space-md);
    margin: var(--space-lg) auto 0 auto;
    justify-content: center;
}

.feature-icon-mini {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.15), 
        rgba(184, 115, 51, 0.1));
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold);
    cursor: pointer;
    transition: all var(--transition-base);
    animation: iconFloat 3s ease-in-out infinite;
}

.feature-icon-mini:nth-child(1) { animation-delay: 0s; }
.feature-icon-mini:nth-child(2) { animation-delay: 0.5s; }
.feature-icon-mini:nth-child(3) { animation-delay: 1s; }

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

.feature-icon-mini:hover {
    transform: translateY(-3px) scale(1.1);
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.25), 
        rgba(184, 115, 51, 0.2));
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}

.feature-icon-mini svg {
    width: 20px;
    height: 20px;
}

/* Enhanced Stats */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(8px, 1.5vw, 12px);
    margin: clamp(30px, 5vh, 50px) auto;
    padding: 0;
    max-width: 600px;
    
    /* Полностью прозрачный фон для максимальной видимости видео */
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    justify-self: center;
}

.stat-item {
    text-align: center;
    padding: clamp(12px, 2.5vw, 16px) clamp(8px, 1.5vw, 12px);
    
    /* Минимальный полупрозрачный фон только для текста */
    background: 
        radial-gradient(
            circle at center,
            rgba(0, 0, 0, 0.4) 0%,
            rgba(0, 0, 0, 0.2) 70%,
            transparent 100%
        );
    backdrop-filter: blur(8px) saturate(1.2);
    
    /* Элегантная округлая форма */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    
    /* Плавные переходы */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    
    /* Мягкая тень только для читаемости */
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stat-item::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        135deg,
        rgba(255, 215, 0, 0.6) 0%,
        rgba(255, 165, 0, 0.4) 25%,
        rgba(218, 165, 32, 0.6) 50%,
        rgba(255, 215, 0, 0.4) 75%,
        rgba(255, 215, 0, 0.6) 100%
    );
    border-radius: 52px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    filter: blur(3px);
}

.stat-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: 
        radial-gradient(
            circle at center,
            rgba(255, 215, 0, 0.05) 0%,
            transparent 70%
        );
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    border-radius: 50%;
}

.stat-item:hover {
    /* Более яркий фон при ховере для лучшей читаемости */
    background: 
        radial-gradient(
            circle at center,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.3) 70%,
            transparent 100%
        );
    
    /* Элегантная анимация */
    transform: translateY(-6px) scale(1.05);
    
    /* Золотая рамка при ховере */
    border-color: rgba(255, 215, 0, 0.4);
    
    /* Улучшенная тень */
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.stat-item:hover::before {
    opacity: 1;
}

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

.stat-number {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 900;
    background: linear-gradient(
        135deg,
        #FFD700 0%,
        #FFA500 25%,
        #FFD700 50%,
        #DAA520 75%,
        #FFD700 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: var(--font-display);
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 0 10px rgba(255, 215, 0, 0.3);
    position: relative;
    display: inline-block;
    margin-bottom: var(--space-xs);
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4));
}

.stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-top: var(--space-xs);
    opacity: 0.9;
    transition: all 0.3s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    line-height: 1.2;
}

.stat-item:hover .stat-label {
    color: rgba(255, 255, 255, 1);
    opacity: 1;
    transform: translateY(-2px);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Modern Buttons */
.btn-modern {
    position: relative;
    overflow: hidden;
    min-width: 220px;
    padding: var(--space-lg) var(--space-2xl);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    transition: all var(--transition-base);
}

.btn-text {
    position: relative;
    z-index: 2;
    transition: transform var(--transition-base);
}

.btn-icon {
    position: relative;
    z-index: 2;
    font-size: 1.2em;
    transition: transform var(--transition-base);
}

.btn-modern:hover .btn-text {
    transform: translateX(-3px);
}

.btn-modern:hover .btn-icon {
    transform: translateX(3px) scale(1.1);
}

/* Enhanced Primary Button */
.btn-primary.btn-modern {
    background: linear-gradient(135deg, 
        var(--accent-gold) 0%, 
        var(--accent-copper) 50%, 
        var(--accent-bronze) 100%);
    background-size: 200% 200%;
    animation: buttonShine 3s ease-in-out infinite;
}

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

.btn-primary.btn-modern::before {
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent);
}

/* Enhanced Outline Button */
.btn-outline.btn-modern {
    background: transparent;
    border: 2px solid var(--accent-gold);
    color: var(--accent-gold);
}

.btn-outline.btn-modern::after {
    background: linear-gradient(135deg, 
        var(--accent-gold), 
        var(--accent-copper));
}

.btn-outline.btn-modern:hover {
    color: var(--black-soft);
    border-color: var(--accent-gold);
}

/* Адаптация для планшетов и больших телефонов */
@media (max-width: 1024px) and (min-width: 769px) {
    .hero-content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .hero-text {
        text-align: center;
        margin: 0 auto;
        max-width: 900px;
    }
    
    .hero-title {
        text-align: center;
    }
    
    .hero-subtitle {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-badge {
        margin: 0 auto var(--space-xl) auto;
        text-align: center;
    }
    
    .hero-subtitle-container {
        text-align: center;
        margin: 0 auto var(--space-2xl) auto;
    }
    
    .premium-description {
        text-align: center;
        margin: 0 auto clamp(20px, 3vh, 24px) auto;
    }
    
    .hero-stats {
        max-width: 600px;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-md);
        padding: var(--space-lg);
        margin: 0 auto;
        text-align: center;
        justify-self: center;
        
        /* Слегка менее навязчивый фон для планшетов */
        background: 
            linear-gradient(135deg, 
                rgba(8, 8, 8, 0.90) 0%,
                rgba(12, 12, 12, 0.85) 50%,
                rgba(10, 10, 10, 0.90) 100%
            ) !important;
        backdrop-filter: blur(25px);
        border-radius: 18px;
    }
    
    .stat-item {
        padding: var(--space-md) var(--space-sm) !important;
    }
    
    .stat-number {
        font-size: clamp(1.5rem, 3vw, 2rem) !important;
    }
    
    .stat-label {
        font-size: 0.75rem !important;
    }
    
    .hero-actions {
        margin-bottom: 100px;
        justify-content: center;
        text-align: center;
        margin: clamp(32px, 5vh, 48px) auto 100px auto;
    }
    
    .subtitle-icons {
        justify-content: center;
        text-align: center;
        margin: var(--space-lg) auto 0 auto;
    }
}

/* =====================================================
   СОВРЕМЕННЫЙ МОБИЛЬНЫЙ ДИЗАЙН - ИСПРАВЛЕНИЕ ПРОБЛЕМ
   ===================================================== */

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero {
        padding-top: 80px;
        min-height: 100vh;
        min-height: 100dvh;
    }
    
    .hero-content {
        padding: clamp(20px, 8vh, 40px) 0;
        position: relative;
        z-index: 2;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hero-text {
        text-align: center;
        padding: 0 var(--space-md);
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* СТИЛЬНЫЕ МОБИЛЬНЫЕ ЗАГОЛОВКИ */
    .hero-title {
        font-size: clamp(2.2rem, 7vw, 2.8rem) !important;
        line-height: 1.1 !important;
        margin-bottom: var(--space-lg) !important;
        text-align: center;
        font-weight: 800;
        letter-spacing: -0.02em;
    }
    
    .hero-title-line {
        display: block;
        margin: 0 auto;
        text-align: center;
    }
    
    /* Первая линия - "Каркасные дома" */
    .hero-title-line:first-child {
        font-size: clamp(2.2rem, 7vw, 2.8rem) !important;
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.98) 0%, 
            rgba(255, 215, 0, 0.95) 40%, 
            rgba(255, 140, 0, 0.9) 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        text-shadow: 0 2px 8px rgba(255, 140, 0, 0.3);
        margin-bottom: 8px !important;
    }
    
    /* Вторая линия - "под ключ" ИСПРАВЛЕНИЕ */
    .hero-title-line:last-child {
        font-size: clamp(2.4rem, 8vw, 3.2rem) !important; /* Увеличенный размер для читаемости */
        font-weight: 900 !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
        position: relative;
        z-index: 3;
    }
    
    .hero-title-line:last-child .text-gradient {
        background: linear-gradient(135deg, 
            rgba(255, 215, 0, 0.98) 0%, 
            rgba(255, 140, 0, 0.95) 50%, 
            rgba(255, 69, 0, 0.9) 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        text-shadow: 
            0 2px 8px rgba(255, 140, 0, 0.4),
            0 0 20px rgba(255, 215, 0, 0.2) !important;
        font-size: inherit !important;
        font-weight: 900 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
        position: relative;
        z-index: 5;
    }
    
    /* ИСПРАВЛЕНИЕ ПОДЧЕРКИВАНИЯ */
    .title-decoration {
        display: none !important; /* Убираем проблемное подчеркивание */
    }
    
    /* АЛЬТЕРНАТИВНОЕ СТИЛЬНОЕ ПОДЧЕРКИВАНИЕ */
    .hero-title-line:last-child::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(255, 140, 0, 0.8) 20%, 
            rgba(255, 215, 0, 0.9) 50%, 
            rgba(255, 140, 0, 0.8) 80%, 
            transparent 100%);
        border-radius: 2px;
        box-shadow: 0 2px 8px rgba(255, 140, 0, 0.3);
    }
    
    /* СТИЛЬНЫЙ СУБТИТУЛ */
    .hero-subtitle-container {
        margin: var(--space-xl) 0 var(--space-lg) 0;
        text-align: center;
    }
    
    .hero-subtitle {
        font-size: clamp(1rem, 3.5vw, 1.3rem) !important;
        line-height: 1.4 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
        margin: 0 auto !important;
        max-width: 90% !important;
        font-weight: 400 !important;
        letter-spacing: 0.02em !important;
    }
    
    .location-highlight {
        color: rgba(255, 215, 0, 0.95) !important;
        font-weight: 600 !important;
    }
    
    .guarantee-highlight {
        color: rgba(255, 140, 0, 0.95) !important;
        font-weight: 600 !important;
    }
    
    /* СОВРЕМЕННЫЕ СТАТИСТИЧЕСКИЕ БЛОКИ */
    .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(8px, 2vw, 12px) !important;
        margin: var(--space-xl) auto var(--space-2xl) auto !important;
        padding: var(--space-md) !important;
        max-width: 90% !important;
        text-align: center;
        
        /* СТИЛЬНЫЙ ПОЛУПРОЗРАЧНЫЙ ФОН */
        background: 
            linear-gradient(135deg, 
                rgba(0, 0, 0, 0.6) 0%,
                rgba(0, 0, 0, 0.3) 50%,
                rgba(0, 0, 0, 0.6) 100%
            ) !important;
        backdrop-filter: blur(15px) saturate(1.3) !important;
        -webkit-backdrop-filter: blur(15px) saturate(1.3) !important;
        border: 1px solid rgba(255, 140, 0, 0.2) !important;
        border-radius: 20px !important;
        
        /* СТИЛЬНАЯ ТЕНЬ */
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.4),
            0 2px 8px rgba(255, 140, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }
    
    .stat-item {
        padding: clamp(12px, 3vw, 16px) clamp(8px, 2vw, 12px) !important;
        text-align: center !important;
        
        /* СТИЛЬНЫЙ ГРАДИЕНТНЫЙ ФОН */
        background: 
            linear-gradient(135deg, 
                rgba(255, 140, 0, 0.08) 0%,
                rgba(255, 69, 0, 0.04) 50%,
                rgba(255, 140, 0, 0.08) 100%
            ) !important;
        border: 1px solid rgba(255, 140, 0, 0.15) !important;
        border-radius: 16px !important;
        
        /* СТИЛЬНАЯ ТЕНЬ */
        box-shadow: 
            0 4px 16px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        
        /* АНИМАЦИЯ HOVER */
        transition: all 0.3s ease !important;
    }
    
    .stat-item:hover {
        transform: translateY(-2px) scale(1.02) !important;
        background: 
            linear-gradient(135deg, 
                rgba(255, 140, 0, 0.12) 0%,
                rgba(255, 69, 0, 0.08) 50%,
                rgba(255, 140, 0, 0.12) 100%
            ) !important;
        border-color: rgba(255, 140, 0, 0.3) !important;
        box-shadow: 
            0 8px 24px rgba(0, 0, 0, 0.3),
            0 2px 8px rgba(255, 140, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }
    
    /* СТИЛЬНЫЕ ИКОНКИ */
    .stat-icon {
        font-size: clamp(1.2rem, 3vw, 1.5rem) !important;
        margin-bottom: 4px !important;
        filter: drop-shadow(0 1px 2px rgba(255, 140, 0, 0.3)) !important;
    }
    
    /* СТИЛЬНЫЕ ЦИФРЫ */
    .stat-number {
        font-size: clamp(1.4rem, 4vw, 1.8rem) !important;
        font-weight: 900 !important;
        margin-bottom: 2px !important;
        
        /* ГРАДИЕНТНЫЙ ТЕКСТ */
        background: linear-gradient(135deg, 
            rgba(255, 215, 0, 0.95) 0%, 
            rgba(255, 140, 0, 0.9) 50%, 
            rgba(255, 69, 0, 0.85) 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        text-shadow: 0 2px 4px rgba(255, 140, 0, 0.3) !important;
    }
    
    /* СТИЛЬНЫЕ ПОДПИСИ */
    .stat-label {
        font-size: clamp(0.7rem, 2.2vw, 0.9rem) !important;
        line-height: 1.2 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        text-transform: uppercase !important;
    }
    
    /* СТИЛЬНЫЙ ЗНАЧОК */
    .hero-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 16px !important;
        margin: 0 auto var(--space-lg) auto !important;
        
        /* СТИЛЬНЫЙ ФОН */
        background: 
            linear-gradient(135deg, 
                rgba(255, 140, 0, 0.15) 0%,
                rgba(255, 69, 0, 0.1) 50%,
                rgba(255, 140, 0, 0.15) 100%
            ) !important;
        backdrop-filter: blur(10px) saturate(1.2) !important;
        -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
        border: 1px solid rgba(255, 140, 0, 0.3) !important;
        border-radius: 25px !important;
        
        /* СТИЛЬНАЯ ТЕНЬ */
        box-shadow: 
            0 4px 16px rgba(0, 0, 0, 0.2),
            0 1px 4px rgba(255, 140, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        
        /* СТИЛЬНЫЙ ТЕКСТ */
        color: rgba(255, 215, 0, 0.95) !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
    }
    
    /* СТИЛЬНЫЕ МИНИ-ИКОНКИ */
    .subtitle-icons {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: var(--space-md) !important;
    }
    
    .feature-icon-mini {
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* СТИЛЬНЫЙ ФОН */
        background: 
            linear-gradient(135deg, 
                rgba(255, 140, 0, 0.1) 0%,
                rgba(255, 69, 0, 0.05) 50%,
                rgba(255, 140, 0, 0.1) 100%
            ) !important;
        border: 1px solid rgba(255, 140, 0, 0.2) !important;
        border-radius: 12px !important;
        
        /* СТИЛЬНАЯ ТЕНЬ */
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        
        /* СТИЛЬНЫЙ ЦВЕТ */
        color: rgba(255, 215, 0, 0.9) !important;
        font-size: 14px !important;
        
        /* АНИМАЦИЯ */
        transition: all 0.3s ease !important;
    }
    
    .feature-icon-mini:hover {
        transform: translateY(-2px) scale(1.05) !important;
        background: 
            linear-gradient(135deg, 
                rgba(255, 140, 0, 0.15) 0%,
                rgba(255, 69, 0, 0.1) 50%,
                rgba(255, 140, 0, 0.15) 100%
            ) !important;
        border-color: rgba(255, 140, 0, 0.4) !important;
        box-shadow: 
            0 4px 12px rgba(0, 0, 0, 0.3),
            0 1px 4px rgba(255, 140, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }
    
    /* ДОПОЛНИТЕЛЬНЫЕ НАСТРОЙКИ */
    .premium-description {
        text-align: center;
        font-size: 1rem;
        margin-bottom: var(--space-lg);
    }
    
    .hero-actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--space-sm);
        margin-top: var(--space-lg) !important;
    }
}

/* Performance Optimizations */
.hero-title-line,
.stat-item,
.feature-icon-mini,
.btn-modern {
    will-change: transform;
}

/* Cross-browser compatibility for text gradients */
.premium-text,
.highlight-number,
.text-gradient,
.stat-number {
    /* Fallback for browsers that don't support background-clip: text */
    color: var(--accent-gold);
}

/* Enhanced focus states for accessibility */
.btn-modern:focus,
.feature-icon-mini:focus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

/* Remove focus outline from navigation links */
.nav-link:focus {
    outline: none;
    box-shadow: none;
}

/* Remove all possible outline and border effects for navigation */
.nav-link:focus,
.nav-link:active,
.nav-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Remove browser default focus styles */
a:focus,
button:focus {
    outline: none;
}

/* Ensure no orange/default browser focus styles */
*:focus {
    outline: none;
    box-shadow: none;
}

/* Remove any webkit focus ring */
*:focus:not(.btn-modern):not(.feature-icon-mini) {
    outline: none;
    -webkit-focus-ring-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

/* Lightbox styles */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    display: none; /* Изначально скрыт */
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: -50px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 30px;
    cursor: pointer;
    padding: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 10001;
}

.lightbox-close:hover {
    background: rgba(231, 76, 60, 0.9);
    border-color: rgba(231, 76, 60, 0.5);
    color: white;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.lightbox-prev {
    left: -80px;
}

.lightbox-next {
    right: -80px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 215, 0, 0.9);
    border-color: rgba(255, 215, 0, 0.5);
    color: black;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.lightbox-caption {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 16px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
    .lightbox {
        -webkit-overflow-scrolling: touch;
        overflow: hidden;
    }
    
    .lightbox-close {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 28px;
        background: rgba(0, 0, 0, 0.9);
        z-index: 10002;
        border: 2px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .lightbox-prev,
    .lightbox-next {
        font-size: 24px;
        padding: 12px 16px;
        opacity: 1;
        background: rgba(0, 0, 0, 0.9);
        border: 2px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
        width: 50px;
        height: 50px;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .lightbox-prev {
        left: 20px;
    }
    
    .lightbox-next {
        right: 20px;
    }
    
    .lightbox-content {
        max-width: 95%;
        max-height: 85%;
        margin: 0 auto;
        padding: 60px 20px 20px 20px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .lightbox-image {
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        pointer-events: none;
    }
    
    .lightbox-caption {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        font-size: 16px;
        padding: 12px 20px;
        background: rgba(0, 0, 0, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        text-align: center;
        transform: none;
        max-width: calc(100% - 40px);
    }
}

/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 480px) {
    .lightbox-close {
        position: fixed;
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 24px;
        background: rgba(0, 0, 0, 0.95);
        z-index: 10003;
        border: 2px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.9);
    }
    
    .lightbox-prev,
    .lightbox-next {
        font-size: 20px;
        padding: 10px 14px;
        width: 45px;
        height: 45px;
        background: rgba(0, 0, 0, 0.95);
        border: 2px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.9);
    }
    
    .lightbox-prev {
        left: 15px;
    }
    
    .lightbox-next {
        right: 15px;
    }
    
    .lightbox-content {
        max-width: 100%;
        max-height: 90%;
        margin: 0;
        padding: 70px 10px 80px 10px;
    }
    
    .lightbox-image {
        max-width: 100%;
        max-height: 100%;
        border-radius: 6px;
        object-fit: contain;
    }
    
    .lightbox-caption {
        position: fixed;
        bottom: 15px;
        left: 15px;
        right: 15px;
        font-size: 14px;
        padding: 10px 16px;
        background: rgba(0, 0, 0, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 10px;
        text-align: center;
        transform: none;
        max-width: calc(100% - 30px);
    }
}

/* Специальные стили для iPhone */
@media (max-width: 414px) and (-webkit-min-device-pixel-ratio: 2) {
    .lightbox {
        height: 100vh;
        height: -webkit-fill-available;
    }
    
    .lightbox-content {
        padding: 80px 15px 90px 15px;
    }
    
    .lightbox-close {
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
    
    .lightbox-prev,
    .lightbox-next {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    
    .lightbox-prev {
        left: 10px;
    }
    
    .lightbox-next {
        right: 10px;
    }
}

/* Специальные стили для Android */
@media (max-width: 480px) and (orientation: portrait) {
    .lightbox {
        height: 100vh;
        height: 100dvh;
    }
}

/* Отключение выделения и контекстного меню */
.lightbox * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

.lightbox-caption {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 16px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
    .lightbox {
        -webkit-overflow-scrolling: touch;
        overflow: hidden;
    }
    
    .lightbox-close {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 28px;
        background: rgba(0, 0, 0, 0.9);
        z-index: 10002;
        border: 2px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .lightbox-prev,
    .lightbox-next {
        font-size: 24px;
        padding: 12px 16px;
        opacity: 1;
        background: rgba(0, 0, 0, 0.9);
        border: 2px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
        width: 50px;
        height: 50px;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .lightbox-prev {
        left: 20px;
    }
    
    .lightbox-next {
        right: 20px;
    }
    
    .lightbox-content {
        max-width: 95%;
        max-height: 85%;
        margin: 0 auto;
        padding: 60px 20px 20px 20px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .lightbox-image {
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        pointer-events: none;
    }
    
    .lightbox-caption {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        font-size: 16px;
        padding: 12px 20px;
        background: rgba(0, 0, 0, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        text-align: center;
        transform: none;
        max-width: calc(100% - 40px);
    }
}

/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 480px) {
    .lightbox-close {
        position: fixed;
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 24px;
        background: rgba(0, 0, 0, 0.95);
        z-index: 10003;
        border: 2px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.9);
    }
    
    .lightbox-prev,
    .lightbox-next {
        font-size: 20px;
        padding: 10px 14px;
        width: 45px;
        height: 45px;
        background: rgba(0, 0, 0, 0.95);
        border: 2px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.9);
    }
    
    .lightbox-prev {
        left: 15px;
    }
    
    .lightbox-next {
        right: 15px;
    }
    
    .lightbox-content {
        max-width: 100%;
        max-height: 90%;
        margin: 0;
        padding: 70px 10px 80px 10px;
    }
    
    .lightbox-image {
        max-width: 100%;
        max-height: 100%;
        border-radius: 6px;
        object-fit: contain;
    }
    
    .lightbox-caption {
        position: fixed;
        bottom: 15px;
        left: 15px;
        right: 15px;
        font-size: 14px;
        padding: 10px 16px;
        background: rgba(0, 0, 0, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 10px;
        text-align: center;
        transform: none;
        max-width: calc(100% - 30px);
    }
}

/* Специальные стили для iPhone */
@media (max-width: 414px) and (-webkit-min-device-pixel-ratio: 2) {
    .lightbox {
        height: 100vh;
        height: -webkit-fill-available;
    }
    
    .lightbox-content {
        padding: 80px 15px 90px 15px;
    }
    
    .lightbox-close {
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
    
    .lightbox-prev,
    .lightbox-next {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    
    .lightbox-prev {
        left: 10px;
    }
    
    .lightbox-next {
        right: 10px;
    }
}

/* Специальные стили для Android */
@media (max-width: 480px) and (orientation: portrait) {
    .lightbox {
        height: 100vh;
        height: 100dvh;
    }
}

/* Отключение выделения и контекстного меню */
.lightbox * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .hero-typewriter .typewriter-text,
    .premium-text,
    .feature-icon-mini,
    .stat-item,
    .hero-badge {
        animation: none !important;
    }
    
    .typewriter-cursor {
        animation: none !important;
        opacity: 1;
    }
    
    .btn-modern:hover {
        transform: none;
    }
}

/* Print styles */
@media print {
    .hero-badge,
    .feature-icon-mini,
    .hero-actions {
        display: none;
    }
    
    .hero-title,
    .premium-description {
        color: #000 !important;
        background: none !important;
        -webkit-text-fill-color: #000 !important;
    }
}

/* =====================================================
   PORTFOLIO GALLERY STYLES - MODERN CATEGORIZATION
   ===================================================== */

/* Portfolio Categories */
.portfolio-categories {
    margin: var(--space-4xl) 0;
}

.portfolio-category {
    margin-bottom: var(--space-3xl);
}

.category-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
    padding: var(--space-lg);
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.1) 0%, 
        rgba(184, 115, 51, 0.05) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.category-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: var(--space-sm);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.category-description {
    font-size: 1.1rem;
    color: var(--gray-300);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Enhanced Gallery Filters */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-3xl);
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-xl);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
}

.gallery-filter-btn {
    padding: var(--space-md) var(--space-xl);
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    color: var(--gray-300);
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--transition-base);
    backdrop-filter: var(--glass-blur);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.gallery-filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 215, 0, 0.3), 
        transparent);
    transition: left var(--transition-slow);
}

.gallery-filter-btn:hover {
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.2) 0%, 
        rgba(184, 115, 51, 0.1) 100%);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.25);
}

.gallery-filter-btn:hover::before {
    left: 100%;
}

.gallery-filter-btn.active {
    background: linear-gradient(135deg, 
        var(--accent-gold) 0%, 
        var(--accent-copper) 100%);
    border-color: var(--accent-gold);
    color: var(--black-soft);
    font-weight: 600;
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(255, 215, 0, 0.4);
}

/* Enhanced Gallery Items */
.gallery-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--gray-900);
    cursor: pointer;
    transition: all var(--transition-base);
    border: 2px solid transparent;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.gallery-item:hover {
    transform: scale(1.02) translateY(-5px);
    border-color: var(--accent-gold);
    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.3);
}

.gallery-item img,
.gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.gallery-item:hover img,
.gallery-item:hover video {
    transform: scale(1.1);
}

/* Enhanced Gallery Overlay */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.6) 50%,
        rgba(0, 0, 0, 0.9) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--space-lg);
    opacity: 0;
    transition: all var(--transition-base);
    backdrop-filter: blur(2px);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay h4 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: var(--space-sm);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.gallery-overlay p {
    color: var(--gray-200);
    font-size: 0.95rem;
    margin-bottom: var(--space-md);
    line-height: 1.4;
}

.gallery-zoom,
.gallery-play {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
    display: block;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8));
    animation: pulse 2s infinite;
}

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

/* Gallery Badges */
.gallery-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
    margin-top: var(--space-sm);
}

.gallery-badges span {
    padding: var(--space-xs) var(--space-sm);
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.9) 0%, 
        rgba(184, 115, 51, 0.8) 100%);
    color: var(--black-soft);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    white-space: nowrap;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Specialized Badge Colors */
.badge-video {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%) !important;
}

.badge-construction {
    background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%) !important;
}

.badge-interior {
    background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%) !important;
}

.badge-bathroom {
    background: linear-gradient(135deg, #42a5f5 0%, #2196f3 100%) !important;
}

.badge-kitchen {
    background: linear-gradient(135deg, #ab47bc 0%, #9c27b0 100%) !important;
}

.badge-bedroom {
    background: linear-gradient(135deg, #ec407a 0%, #e91e63 100%) !important;
}

.badge-exterior {
    background: linear-gradient(135deg, #26c6da 0%, #00bcd4 100%) !important;
}

.badge-architecture {
    background: linear-gradient(135deg, #8d6e63 0%, #795548 100%) !important;
}

.badge-materials,
.badge-insulation,
.badge-heating,
.badge-room,
.badge-ceiling,
.badge-frame,
.badge-utilities,
.badge-interior-work,
.badge-finishing {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%) !important;
}

.badge-entrance,
.badge-terrace,
.badge-evening,
.badge-siemens,
.badge-minimal,
.badge-luxury {
    background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%) !important;
}

/* Responsive Gallery Grid */
.portfolio-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-xl);
    padding: var(--space-lg) 0;
    align-items: start;
    grid-auto-rows: max-content;
}

/* Gallery Video Styles - ИСПРАВЛЕНИЕ ДЛЯ ЧЕРНЫХ КАРТОЧЕК */
.gallery-video {
    width: 100%;
    height: 300px;
    object-fit: cover;
    background: var(--gray-800);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    position: relative;
    display: block;
}

.gallery-video:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
}

/* Обеспечиваем правильное отображение видео элементов в галерее */
.gallery-item video.gallery-video {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    background-color: var(--gray-800);
    border: none;
    outline: none;
}

/* Исправление для Safari и WebKit браузеров */
.gallery-item video.gallery-video::-webkit-media-controls {
    display: none !important;
}

.gallery-item video.gallery-video::-webkit-media-controls-enclosure {
    display: none !important;
}

/* Дополнительные стили для poster изображений видео */
.gallery-item video[poster] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Убеждаемся что видео не отображается прозрачным или черным */
.gallery-item video.gallery-video {
    opacity: 1;
    filter: none;
    -webkit-filter: none;
    background-image: none;
}

/* Стили для placeholder изображений видео */
.gallery-video-placeholder {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    background-color: var(--gray-800);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    display: block;
    opacity: 1;
}

.gallery-video-placeholder:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
}

/* Принудительная видимость для всех видео элементов */
.gallery-item video {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    background: transparent !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Особое правило для отображения poster изображений */
.gallery-item video[poster] {
    background-image: attr(poster);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
}

/* Дополнительная проверка для правильного отображения poster */
video.gallery-video::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    display: block;
    z-index: -1;
}

/* Убираем черный фон и принудительно показываем poster */
.gallery-item video.gallery-video {
    background-color: transparent !important;
    object-position: center !important;
}

/* Стили для замененных video элементов (резервное решение) */
.gallery-video-replaced {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    cursor: pointer;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.gallery-video-replaced:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
}

/* Принудительная видимость и правильное отображение всех изображений в галерее */
.gallery-item img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: transparent;
    border: none;
    outline: none;
}

/* Стили для обработки ошибок загрузки изображений */
.gallery-item img[src*="404"], 
.gallery-item img[src=""], 
.gallery-item img:not([src]) {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjNDQ0Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxOCIgZmlsbD0iI2ZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPtCY0LfQvtCx0YDQsNC20LXQvdC40LU8L3RleHQ+PC9zdmc+');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Убираем любые эффекты затемнения или фильтры с изображений */
.gallery-item img {
    filter: none !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Media Queries for Gallery */
@media (max-width: 1200px) {
    .portfolio-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--space-lg);
    }
}

@media (max-width: 768px) {
    .gallery-filters {
        gap: var(--space-sm);
        padding: var(--space-md);
    }
    
    .gallery-filter-btn {
        padding: var(--space-sm) var(--space-lg);
        font-size: 0.85rem;
    }
    
    .portfolio-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: var(--space-md);
    }
    
    .category-header {
        padding: var(--space-md);
    }
    
    .category-title {
        font-size: 1.8rem;
    }
    
    .category-description {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .portfolio-gallery-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .gallery-filters {
        flex-direction: column;
        align-items: center;
    }
    
    .gallery-filter-btn {
        width: 100%;
        max-width: 250px;
        justify-content: center;
    }
}

/* Privacy Policy Styles */
.privacy-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 100px;
    margin-bottom: 50px;
    font-family: 'Roboto', sans-serif;
}

.privacy-container h1 {
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 30px;
    font-size: 2.8rem;
    font-weight: 700;
}

.privacy-container h2 {
    color: var(--primary-color);
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    border-left: 5px solid var(--accent-color);
    font-size: 1.4rem;
    font-weight: 600;
}

.privacy-container p {
    line-height: 1.8;
    margin-bottom: 18px;
    color: #444;
    font-size: 1.05rem;
}

.privacy-container ul {
    margin-bottom: 25px;
    padding-left: 0;
}

.privacy-container li {
    margin-bottom: 12px;
    line-height: 1.7;
    padding: 8px 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 3px solid var(--accent-color);
    list-style: none;
    font-size: 1.02rem;
}

.last-updated {
    background: linear-gradient(135deg, var(--accent-color), #ffd700);
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 30px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.intro-section {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 30px;
    border: 1px solid #90caf9;
}

.intro-section p {
    margin: 0;
    font-size: 1.1rem;
    color: #1565c0;
    font-weight: 500;
    text-align: center;
}

.contact-info {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 25px;
    border-radius: 15px;
    margin: 25px 0;
    border: 2px solid var(--primary-color);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.contact-info p {
    margin-bottom: 12px;
    font-size: 1.05rem;
}

.contact-info strong {
    color: var(--primary-color);
    font-weight: 600;
}

.footer-note {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    padding: 20px;
    border-radius: 10px;
    margin-top: 30px;
    text-align: center;
}

.footer-note p {
    margin-bottom: 8px;
    color: #856404;
}

.footer-note em {
    font-style: italic;
    color: #6c757d;
}

/* Responsive adjustments for privacy policy */
@media (max-width: 768px) {
    .privacy-container {
        margin-top: 80px;
        padding: 30px 15px;
        border-radius: 10px;
    }
    
    .privacy-container h1 {
        font-size: 2.2rem;
    }
    
    .privacy-container h2 {
        font-size: 1.2rem;
        padding: 12px 15px;
        margin-top: 30px;
    }
    
    .privacy-container li {
        padding: 6px 12px;
        font-size: 1rem;
    }
    
    .contact-info {
        padding: 20px;
    }
    
    .intro-section {
        padding: 20px;
    }
}

/* =====================================================
   MODERN CONTACT SECTION STYLES
   ===================================================== */

/* Contact Info Card Styles */
.contact-info-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
}

.contact-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-gold);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.contact-info-header {
    margin-bottom: 2rem;
    text-align: center;
}

.contact-info-header h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white-pure);
    margin-bottom: 0.5rem;
}

.contact-info-header p {
    color: var(--gray-400);
    font-size: 0.95rem;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-method {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.contact-method::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.05) 0%, 
        transparent 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.contact-method:hover::before {
    opacity: 1;
}

.contact-method:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.contact-method-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.contact-method-icon.phone {
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.contact-method-icon.email {
    background: linear-gradient(135deg, #2196F3, #1565C0);
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}

.contact-method-icon.location {
    background: linear-gradient(135deg, #FF9800, #F57C00);
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
}

.contact-method-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.contact-method-details h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--white-pure);
    margin-bottom: 0.25rem;
}

.contact-method-details p {
    color: var(--gray-200);
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.contact-method-details p a {
    color: var(--accent-gold);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-method-details p a:hover {
    color: var(--white-pure);
}

.contact-method-details span {
    color: var(--gray-400);
    font-size: 0.9rem;
    font-style: italic;
}

/* Form Header styles removed */

/* Modern Form Styles removed */

/* Contact Alternatives */
.contact-alternatives {
    margin-top: 2rem;
    text-align: center;
}

.contact-alternatives p {
    color: var(--gray-400);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.social-contact-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.social-contact-buttons .btn.modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn-whatsapp.modern {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    border: none;
}

.btn-telegram.modern {
    background: linear-gradient(135deg, #229ED9, #0088cc);
    color: white;
    border: none;
}

.btn-instagram.modern {
    background: linear-gradient(135deg, #E4405F, #C13584, #833AB4);
    color: white;
    border: none;
}

.btn-vk.modern {
    background: linear-gradient(135deg, #4680C2, #5181B8);
    color: white;
    border: none;
}

.social-contact-buttons .btn.modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.social-contact-buttons .btn.modern svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contact-info-card,
    .contact-form.modern {
        padding: 1.5rem;
    }
    
    .contact-method {
        padding: 1rem;
    }
    
    .contact-method-icon {
        width: 40px;
        height: 40px;
    }
    
    .contact-method-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .social-contact-buttons {
        gap: 0.5rem;
    }
    
    .social-contact-buttons .btn.modern {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* Social Media Icons */
.icon-whatsapp::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.893 3.488'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-telegram::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-instagram::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-vk::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M15.684 0H8.316C1.592 0 0 1.592 0 8.316v7.368C0 22.408 1.592 24 8.316 24h7.368C22.408 24 24 22.408 24 15.684V8.316C24 1.592 22.408 0 15.684 0zm3.692 17.123h-1.744c-.66 0-.864-.525-2.05-1.727-1.033-1.01-1.49-.9-1.744-.9-.356 0-.458.102-.458.593v1.575c0 .424-.135.678-1.253.678-1.846 0-3.896-1.118-5.335-3.202C4.624 10.857 4.03 8.57 4.03 8.096c0-.254.102-.491.593-.491h1.744c.441 0 .61.203.78.677.863 2.49 2.303 4.675 2.896 4.675.22 0 .322-.102.322-.66V9.721c-.068-1.186-.695-1.287-.695-1.71 0-.204.169-.407.44-.407h2.744c.373 0 .508.203.508.643v3.473c0 .372.169.508.271.508.22 0 .407-.136.813-.542 1.254-1.406 2.151-3.574 2.151-3.574.119-.254.322-.491.763-.491h1.744c.525 0 .644.271.525.643-.22 1.017-2.354 4.031-2.354 4.031-.186.305-.254.44 0 .78.186.254.796.779 1.203 1.253.745.847 1.32 1.558 1.473 2.05.17.49-.085.744-.576.744z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Social Links Styling */
.footer-social {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.social-link.whatsapp:hover {
    background: rgba(37, 211, 102, 0.2);
    border-color: rgba(37, 211, 102, 0.4);
}

.social-link.telegram:hover {
    background: rgba(0, 136, 204, 0.2);
    border-color: rgba(0, 136, 204, 0.4);
}

.social-link.instagram:hover {
    background: linear-gradient(45deg, rgba(225, 48, 108, 0.2), rgba(255, 204, 0, 0.2));
    border-color: rgba(225, 48, 108, 0.4);
}

.social-link.vk:hover {
    background: rgba(70, 130, 180, 0.2);
    border-color: rgba(70, 130, 180, 0.4);
}

/* Дублирующийся медиа-запрос удален для предотвращения конфликтов */

/* =====================================================
   ИСПРАВЛЕНИЯ ДЛЯ ВИДЕО ФОНА НА МОБИЛЬНЫХ УСТРОЙСТВАХ
   Устранение проблемы сильного кропа
   ===================================================== */

/* Дополнительные стили для видео на мобильных устройствах */
@media (max-width: 768px) {
    .hero-video-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 0;
        overflow: hidden;
        /* Исправление для iOS Safari */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .hero-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Стабильное кадрирование для мобильных */
        object-fit: cover;
        object-position: center center;
        opacity: 0;
        transition: opacity 1s ease-in-out;
        
        /* Оптимизация производительности */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        will-change: opacity;
    }
}

/* Стили для портретной ориентации мобильных */
@media (max-width: 768px) and (orientation: portrait) {
    .hero-video {
        /* На портретных экранах используем более консервативное кадрирование */
        object-fit: cover;
        object-position: center 35%;
        min-width: 120%; /* Слегка увеличиваем для покрытия экрана */
        min-height: 100%;
    }
}

/* Стили для альбомной ориентации мобильных */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-video {
        object-fit: cover;
        object-position: center 45%;
        min-width: 100%;
        min-height: 120%; /* Слегка увеличиваем по высоте */
    }
}

/* Особые настройки для очень узких экранов */
@media (max-width: 480px) {
    .hero-video {
        /* На очень маленьких экранах используем щадящее кадрирование */
        object-fit: cover;
        object-position: center 30%;
        min-width: 100%;
        min-height: 100%;
        /* Альтернативный подход для старых браузеров */
        width: 100vw;
        height: 100vh;
    }
}

/* Специальные настройки для iPhone с вырезом */
@media (max-width: 414px) and (min-height: 812px) {
    .hero-video-container {
        min-height: 100vh;
        min-height: 100dvh; /* Динамическая высота viewport */
    }
    
    .hero-video {
        object-position: center 25%; /* Еще выше для iPhone X и новее */
        min-height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
    }
}

/* Настройки для больших планшетов */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-video {
        object-fit: cover;
        object-position: center 45%;
    }
    
    /* Альбомная ориентация планшетов */
    @media (orientation: landscape) {
        .hero-video {
            object-position: center center;
            min-width: 100%;
            min-height: 100%;
        }
    }
    
    /* Портретная ориентация планшетов */
    @media (orientation: portrait) {
        .hero-video {
            object-position: center 40%;
            min-width: 120%;
            min-height: 100%;
        }
    }
}

/* Fallback для браузеров без поддержки object-fit */
@supports not (object-fit: cover) {
    .hero-video {
        background-size: cover;
        background-position: center 40%;
        background-repeat: no-repeat;
    }
}

/* =====================================================
   ENHANCED HERO VISUAL EFFECTS - MODERN DESIGN
   ===================================================== */

/* Hero hover effects */
.hero-stats:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.12),
        0 6px 20px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

/* Enhanced button animations */
.btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 12px 36px rgba(160, 82, 45, 0.25),
        0 6px 18px rgba(205, 133, 63, 0.2);
}

.btn:active {
    transform: translateY(0) scale(0.98);
}

/* СТИЛЬНЫЕ ПРОЗРАЧНЫЕ СТАТИСТИЧЕСКИЕ БЛОКИ ДЛЯ ДЕСКТОПА */
@media (min-width: 1025px) {
    .hero-content {
        transform: translateZ(0);
        will-change: transform;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    
    .hero-text {
        text-align: center;
        margin: 0 auto;
        max-width: 900px;
        width: 100%;
    }
    
    /* ОГНЕННЫЕ ЗАГОЛОВКИ ДЛЯ ДЕСКТОПА */
    .hero-title {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(3.5rem, 5.5vw, 4.5rem) !important;
        line-height: 1.1 !important;
        margin-bottom: var(--space-xl) !important;
        font-weight: 800;
        letter-spacing: -0.02em;
    }
    
    .hero-title-line {
        display: block;
        margin: 0 auto;
        text-align: center;
    }
    
    /* Первая линия - "Каркасные дома" */
    .hero-title-line:first-child {
        font-size: clamp(3.5rem, 5.5vw, 4.5rem) !important;
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.98) 0%, 
            rgba(255, 215, 0, 0.95) 40%, 
            rgba(255, 140, 0, 0.9) 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        text-shadow: 0 4px 16px rgba(255, 140, 0, 0.4);
        margin-bottom: 12px !important;
    }
    
    /* Вторая линия - "под ключ" */
    .hero-title-line:last-child {
        font-size: clamp(3.8rem, 6vw, 5rem) !important;
        font-weight: 900 !important;
        margin-top: 12px !important;
        margin-bottom: 0 !important;
        position: relative;
        z-index: 3;
    }
    
    .hero-title-line:last-child .text-gradient {
        background: linear-gradient(135deg, 
            rgba(255, 215, 0, 0.98) 0%, 
            rgba(255, 140, 0, 0.95) 50%, 
            rgba(255, 69, 0, 0.9) 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        text-shadow: 
            0 4px 16px rgba(255, 140, 0, 0.5),
            0 2px 8px rgba(255, 69, 0, 0.4),
            0 0 24px rgba(255, 215, 0, 0.3) !important;
        font-size: inherit !important;
        font-weight: 900 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
        position: relative;
        z-index: 5;
    }
    
    /* СТИЛЬНОЕ ПОДЧЕРКИВАНИЕ ДЛЯ ДЕСКТОПА */
    .hero-title-line:last-child::after {
        content: '';
        position: absolute;
        bottom: -16px;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 4px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(255, 140, 0, 0.8) 20%, 
            rgba(255, 215, 0, 0.9) 50%, 
            rgba(255, 140, 0, 0.8) 80%, 
            transparent 100%);
        border-radius: 3px;
        box-shadow: 0 4px 16px rgba(255, 140, 0, 0.4);
    }
    
    /* ОГНЕННЫЙ СУБТИТУЛ */
    .hero-subtitle {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(1.3rem, 2.5vw, 1.7rem) !important;
        line-height: 1.5 !important;
        color: rgba(255, 255, 255, 0.92) !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
        margin: var(--space-xl) auto !important;
        max-width: 800px !important;
        font-weight: 400 !important;
        letter-spacing: 0.02em !important;
        position: relative !important;
        z-index: 8 !important;
    }
    
    .location-highlight {
        color: rgba(255, 215, 0, 0.95) !important;
        font-weight: 600 !important;
    }
    
    .guarantee-highlight {
        color: rgba(255, 140, 0, 0.95) !important;
        font-weight: 600 !important;
    }
    
    /* ОГНЕННЫЙ ПРЕМИУМ ЗНАЧОК */
    .hero-badge {
        margin: 0 auto var(--space-xl) auto;
        text-align: center;
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 24px !important;
        
        /* СТИЛЬНЫЙ ФОН */
        background: 
            linear-gradient(135deg, 
                rgba(255, 140, 0, 0.15) 0%,
                rgba(255, 69, 0, 0.1) 50%,
                rgba(255, 140, 0, 0.15) 100%
            ) !important;
        backdrop-filter: blur(12px) saturate(1.2) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
        border: 1px solid rgba(255, 140, 0, 0.3) !important;
        border-radius: 30px !important;
        
        /* СТИЛЬНАЯ ТЕНЬ */
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.2),
            0 2px 8px rgba(255, 140, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        
        /* СТИЛЬНЫЙ ТЕКСТ */
        color: rgba(255, 215, 0, 0.95) !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
    }
    
    .hero-subtitle-container {
        text-align: center;
        margin: 0 auto var(--space-2xl) auto;
    }
    
    /* ОГНЕННОЕ ОПИСАНИЕ */
    .premium-description {
        text-align: center;
        margin: 0 auto clamp(20px, 3vh, 24px) auto;
        font-size: clamp(1.1rem, 2vw, 1.3rem) !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
        max-width: 700px !important;
        font-weight: 500 !important;
        letter-spacing: 0.02em !important;
    }
    
    /* СТИЛЬНЫЕ МИНИ-ИКОНКИ ДЛЯ ДЕСКТОПА */
    .subtitle-icons {
        display: flex !important;
        justify-content: center !important;
        gap: 16px !important;
        margin-top: var(--space-lg) !important;
    }
    
    .feature-icon-mini {
        width: 48px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* СТИЛЬНЫЙ ФОН */
        background: 
            linear-gradient(135deg, 
                rgba(255, 140, 0, 0.12) 0%,
                rgba(255, 69, 0, 0.08) 50%,
                rgba(255, 140, 0, 0.12) 100%
            ) !important;
        border: 1px solid rgba(255, 140, 0, 0.25) !important;
        border-radius: 16px !important;
        
        /* СТИЛЬНАЯ ТЕНЬ */
        box-shadow: 
            0 4px 16px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        
        /* СТИЛЬНЫЙ ЦВЕТ */
        color: rgba(255, 215, 0, 0.9) !important;
        font-size: 20px !important;
        
        /* АНИМАЦИЯ */
        transition: all 0.3s ease !important;
    }
    
    .feature-icon-mini:hover {
        transform: translateY(-4px) scale(1.08) !important;
        background: 
            linear-gradient(135deg, 
                rgba(255, 140, 0, 0.18) 0%,
                rgba(255, 69, 0, 0.12) 50%,
                rgba(255, 140, 0, 0.18) 100%
            ) !important;
        border-color: rgba(255, 140, 0, 0.4) !important;
        box-shadow: 
            0 8px 24px rgba(0, 0, 0, 0.3),
            0 2px 8px rgba(255, 140, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }
    
    /* СОВРЕМЕННЫЕ ПРОЗРАЧНЫЕ СТАТИСТИЧЕСКИЕ БЛОКИ */
    .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: clamp(16px, 2vw, 24px) !important;
        margin: clamp(30px, 5vh, 50px) auto !important;
        padding: clamp(20px, 2.5vw, 32px) !important;
        max-width: 900px !important;
        text-align: center;
        justify-self: center;
        
        /* СТИЛЬНЫЙ ПОЛУПРОЗРАЧНЫЙ ФОН */
        background: 
            radial-gradient(
                circle at center,
                rgba(0, 0, 0, 0.4) 0%,
                rgba(0, 0, 0, 0.2) 70%,
                transparent 100%
            ) !important;
        backdrop-filter: blur(15px) saturate(1.3) !important;
        -webkit-backdrop-filter: blur(15px) saturate(1.3) !important;
        border: 1px solid rgba(255, 140, 0, 0.2) !important;
        border-radius: 24px !important;
        
        /* СТИЛЬНАЯ ТЕНЬ */
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.3),
            0 2px 8px rgba(255, 140, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        
        /* АНИМАЦИЯ */
        animation: statsFloat 6s ease-in-out infinite;
        transition: all 0.3s ease;
        position: relative;
        z-index: 2;
    }
    
    .stat-item {
        padding: clamp(16px, 2.5vw, 20px) clamp(12px, 2vw, 16px) !important;
        text-align: center !important;
        
        /* СТИЛЬНЫЙ ГРАДИЕНТНЫЙ ФОН */
        background: 
            linear-gradient(135deg, 
                rgba(255, 140, 0, 0.08) 0%,
                rgba(255, 69, 0, 0.04) 50%,
                rgba(255, 140, 0, 0.08) 100%
            ) !important;
        border: 1px solid rgba(255, 140, 0, 0.15) !important;
        border-radius: 18px !important;
        
        /* СТИЛЬНАЯ ТЕНЬ */
        box-shadow: 
            0 4px 16px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        
        /* АНИМАЦИЯ HOVER */
        transition: all 0.3s ease !important;
        position: relative;
        overflow: visible;
    }
    
    .stat-item::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(
            135deg,
            rgba(255, 215, 0, 0.4) 0%,
            rgba(255, 140, 0, 0.3) 25%,
            rgba(255, 69, 0, 0.4) 50%,
            rgba(255, 140, 0, 0.3) 75%,
            rgba(255, 215, 0, 0.4) 100%
        );
        border-radius: 20px;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
        filter: blur(2px);
    }
    
    .stat-item:hover {
        transform: translateY(-4px) scale(1.03) !important;
        background: 
            linear-gradient(135deg, 
                rgba(255, 140, 0, 0.12) 0%,
                rgba(255, 69, 0, 0.08) 50%,
                rgba(255, 140, 0, 0.12) 100%
            ) !important;
        border-color: rgba(255, 140, 0, 0.3) !important;
        box-shadow: 
            0 8px 24px rgba(0, 0, 0, 0.25),
            0 2px 8px rgba(255, 140, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }
    
    .stat-item:hover::before {
        opacity: 1;
    }
    
    /* СТИЛЬНЫЕ ИКОНКИ */
    .stat-icon {
        font-size: clamp(1.8rem, 3vw, 2.2rem) !important;
        margin-bottom: 8px !important;
        filter: drop-shadow(0 2px 4px rgba(255, 140, 0, 0.3)) !important;
        color: rgba(255, 215, 0, 0.9) !important;
    }
    
    /* СТИЛЬНЫЕ ЦИФРЫ */
    .stat-number {
        font-size: clamp(2rem, 3vw, 2.5rem) !important;
        font-weight: 900 !important;
        margin-bottom: 4px !important;
        
        /* ГРАДИЕНТНЫЙ ТЕКСТ */
        background: linear-gradient(135deg, 
            rgba(255, 215, 0, 0.95) 0%, 
            rgba(255, 140, 0, 0.9) 50%, 
            rgba(255, 69, 0, 0.85) 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        text-shadow: 0 2px 4px rgba(255, 140, 0, 0.4) !important;
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5)) !important;
    }
    
    /* СТИЛЬНЫЕ ПОДПИСИ */
    .stat-label {
        font-size: clamp(0.75rem, 1.5vw, 0.9rem) !important;
        line-height: 1.2 !important;
        color: rgba(255, 255, 255, 0.95) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
        font-weight: 700 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        opacity: 0.9;
        transition: all 0.3s ease;
    }
    
    .stat-item:hover .stat-label {
        color: rgba(255, 255, 255, 1) !important;
        opacity: 1;
        transform: translateY(-2px);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    }
    
    .hero-actions {
        justify-content: center;
        text-align: center;
        margin: clamp(32px, 5vh, 48px) auto 0 auto;
    }
    
    .subtitle-icons {
        justify-content: center;
        text-align: center;
        margin: var(--space-lg) auto 0 auto;
    }
}

/* Центрирование для очень больших экранов (FullHD и выше) */
@media (min-width: 1440px) {
    .hero-content {
        max-width: 1200px;
        margin: 0 auto;
        text-align: center;
    }
    
    .hero-text {
        max-width: 1000px;
        text-align: center;
        margin: 0 auto;
    }
    
    .hero-title {
        font-size: clamp(3.5rem, 5vw, 6rem);
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-subtitle {
        font-size: clamp(1.3rem, 2vw, 1.6rem);
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        max-width: 800px;
    }
    
    .hero-stats {
        max-width: 800px;
        margin: clamp(40px, 6vh, 60px) auto;
        text-align: center;
        justify-self: center;
    }
    
    .hero-actions {
        max-width: 600px;
        margin: clamp(40px, 6vh, 60px) auto 0 auto;
        justify-content: center;
    }
}

/* Центрирование для 4K экранов */
@media (min-width: 1920px) {
    .hero-content {
        max-width: 1400px;
        margin: 0 auto;
        text-align: center;
    }
    
    .hero-text {
        max-width: 1100px;
        text-align: center;
        margin: 0 auto;
    }
    
    .hero-title {
        font-size: clamp(4rem, 4vw, 7rem);
        text-align: center;
    }
    
    .hero-subtitle {
        font-size: clamp(1.4rem, 1.5vw, 1.8rem);
        text-align: center;
        max-width: 900px;
        margin: 0 auto;
    }
    
    .hero-stats {
        max-width: 900px;
        margin: clamp(50px, 7vh, 80px) auto;
        text-align: center;
        justify-self: center;
    }
    
    .hero-actions {
        max-width: 700px;
        margin: clamp(50px, 7vh, 80px) auto 0 auto;
        justify-content: center;
    }
}

/* Subtle parallax effect for hero content */
@media (min-width: 769px) {
    .hero-content {
        transform: translateZ(0);
        will-change: transform;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    
    .hero-text {
        text-align: center;
        margin: 0 auto;
        max-width: 900px;
        width: 100%;
    }
    
    .hero-title {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-subtitle {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-badge {
        margin: 0 auto var(--space-xl) auto;
        text-align: center;
    }
    
    .hero-subtitle-container {
        text-align: center;
        margin: 0 auto var(--space-2xl) auto;
    }
    
    .premium-description {
        text-align: center;
        margin: 0 auto clamp(20px, 3vh, 24px) auto;
    }
    
    .hero-stats {
        animation: statsFloat 6s ease-in-out infinite;
        margin: clamp(30px, 5vh, 50px) auto;
        text-align: center;
        justify-self: center;
    }
    
    .hero-actions {
        justify-content: center;
        text-align: center;
        margin: clamp(32px, 5vh, 48px) auto 0 auto;
    }
    
    .subtitle-icons {
        justify-content: center;
        text-align: center;
        margin: var(--space-lg) auto 0 auto;
    }
}

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

/* Enhanced text readability on video background */
.hero-title,
.premium-description,
.stat-number,
.stat-label {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Improved responsive spacing */
@media (max-width: 768px) {
    .hero {
        padding-top: 80px; /* Увеличенный отступ для мобильной навигации */
    }
    
    .hero-content {
        padding: clamp(40px, 8vh, 80px) 0;
    }
    
    .hero-stats {
        margin: clamp(24px, 4vh, 40px) 0;
        padding: clamp(16px, 3vw, 24px);
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(8px, 2vw, 16px);
    }
    
    .stat-item {
        padding: clamp(12px, 2.5vw, 20px) clamp(8px, 1.5vw, 12px);
    }
    
    .hero-actions {
        margin-top: clamp(24px, 4vh, 32px);
        gap: clamp(12px, 2vw, 20px);
    }
    
    .btn {
        min-width: clamp(160px, 40vw, 200px);
        padding: clamp(12px, 2vw, 16px) clamp(20px, 3vw, 28px);
    }
}

@media (max-width: 480px) {
    .hero {
        padding-top: 85px; /* Увеличенный отступ для маленьких экранов */
    }
    
    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(4px, 1vw, 8px) !important;
        padding: 0 !important;
        margin: var(--space-lg) 0 var(--space-2xl) 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .stat-item {
        padding: clamp(8px, 1.5vw, 12px) clamp(4px, 1vw, 8px) !important;
        border-radius: 30px !important;
        background: 
            radial-gradient(
                circle at center,
                rgba(0, 0, 0, 0.6) 0%,
                rgba(0, 0, 0, 0.3) 70%,
                transparent 100%
            ) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(6px) saturate(1.2) !important;
        box-shadow: 
            0 2px 12px rgba(0, 0, 0, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }
}

/* Дополнительные стили для кнопок управления видео на мобильных */
@media (max-width: 768px) {
    .video-controls {
        bottom: 15px !important;
        gap: 4px !important;
        padding: 4px 8px !important;
    }
    

}

@media (max-width: 480px) {
    .video-controls {
        bottom: 10px !important;
        gap: 3px !important;
        padding: 3px 6px !important;
    }
    

}

/* Принудительные стили для исправления наезжания шапки */
@media (max-width: 768px) {
    .hero {
        padding-top: 0 !important; /* Убираем отступ - видео начинается сразу после шапки */
        margin-top: 0 !important;
    }
    
    .hero-content {
        padding-top: 100px !important; /* Контент начинается после шапки */
    }
    
    /* Отступы для всех остальных секций */
    section:not(.hero) {
        padding-top: 80px !important;
    }
    
    .about, .projects, .gallery, .team, .contact, .ceo-presentation {
        padding-top: 80px !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 480px) {
    .hero {
        padding-top: 0 !important; /* Убираем отступ - видео начинается сразу после шапки */
        margin-top: 0 !important;
    }
    
    .hero-content {
        padding-top: 110px !important; /* Контент начинается после шапки */
    }
    
    /* Отступы для всех остальных секций на мобильных */
    section:not(.hero) {
        padding-top: 85px !important;
    }
    
    .about, .projects, .gallery, .team, .contact, .ceo-presentation {
        padding-top: 85px !important;
        margin-top: 0 !important;
    }
}

/* Дополнительные стили для iPhone и других устройств с вырезом */
@media (max-width: 414px) {
    .hero {
        padding-top: 0 !important; /* Убираем отступ - видео начинается сразу после шапки */
        margin-top: 0 !important;
    }
    
    .hero-content {
        padding-top: 190px !important; /* Контент начинается после шапки + safe area */
        padding-top: max(190px, env(safe-area-inset-top) + 170px) !important;
    }
    
    /* Отступы для всех секций на iPhone с вырезом */
    section:not(.hero) {
        padding-top: 180px !important;
        margin-top: 0 !important;
    }
    
    .about, .projects, .gallery, .team, .contact, .ceo-presentation {
        padding-top: 180px !important;
        margin-top: 0 !important;
    }
}

/* Специальные стили для iPhone в портретном режиме */
@media (max-width: 390px) and (orientation: portrait) {
    .hero {
        padding-top: 175px !important;
        margin-top: 0 !important;
    }
    
    .hero-content {
        padding-top: 40px !important;
    }
    
    .hero-text {
        margin-top: 20px !important;
    }
    
    /* Отступы для всех секций */
    section:not(.hero) {
        padding-top: 175px !important;
        margin-top: 0 !important;
    }
    
    .about, .projects, .gallery, .team, .contact, .ceo-presentation {
        padding-top: 175px !important;
        margin-top: 0 !important;
    }
}

/* Для iPhone Pro Max и других больших iPhone */
@media (max-width: 430px) and (min-height: 800px) {
    .hero {
        padding-top: 185px !important;
        padding-top: max(185px, env(safe-area-inset-top) + 165px) !important;
    }
    
    /* Отступы для всех секций на больших iPhone */
    section:not(.hero) {
        padding-top: 185px !important;
        margin-top: 0 !important;
    }
    
    .about, .projects, .gallery, .team, .contact, .ceo-presentation {
        padding-top: 185px !important;
        margin-top: 0 !important;
    }
}

/* Суперсильные стили для iPhone Safari */
@media screen and (max-width: 420px) {
    .hero {
        padding-top: 170px !important;
        margin-top: 0 !important;
    }
    
    .hero-content {
        padding-top: 40px !important;
        margin-top: 0 !important;
        padding-bottom: 20px !important;
    }
    
    .hero-text {
        margin-top: 0 !important;
        transform: translateY(0) !important;
    }
    
    /* ОГНЕННЫЕ КОМПАКТНЫЕ ЗАГОЛОВКИ */
    .hero-title {
        font-size: clamp(1.6rem, 5.5vw, 2rem) !important;
        line-height: 1 !important;
        margin-bottom: 4px !important;
        text-shadow: 
            0 2px 6px rgba(255, 140, 0, 0.2),
            0 1px 3px rgba(255, 69, 0, 0.15),
            0 0 10px rgba(255, 215, 0, 0.1) !important;
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.95) 0%, 
            rgba(255, 215, 0, 0.9) 50%, 
            rgba(255, 140, 0, 0.8) 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }
    
    .hero-subtitle {
        font-size: clamp(0.8rem, 2.8vw, 1rem) !important;
        margin-bottom: 8px !important;
        line-height: 1.2 !important;
        color: rgba(255, 255, 255, 0.85) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    }
    
    /* ОГНЕННЫЕ КОМПАКТНЫЕ СТАТИСТИЧЕСКИЕ БЛОКИ */
    .hero-stats {
        margin: 8px 0 !important;
        padding: 4px !important;
        gap: 3px !important;
        grid-template-columns: repeat(2, 1fr) !important;
        background: rgba(0, 0, 0, 0.08) !important;
        backdrop-filter: blur(6px) !important;
        border: 1px solid rgba(255, 140, 0, 0.08) !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 3px rgba(255, 69, 0, 0.05) !important;
        position: relative !important;
        z-index: 2 !important;
        max-width: 85% !important;
    }
    
    .stat-item {
        padding: 4px 2px !important;
        margin: 0 !important;
        min-height: auto !important;
        background: rgba(255, 140, 0, 0.02) !important;
        border: 1px solid rgba(255, 140, 0, 0.05) !important;
        border-radius: 4px !important;
    }
    
    .stat-number {
        font-size: clamp(0.85rem, 3.5vw, 1rem) !important;
        margin-bottom: 1px !important;
        color: rgba(255, 215, 0, 0.9) !important;
        text-shadow: 0 1px 2px rgba(255, 140, 0, 0.2) !important;
        font-weight: 900 !important;
    }
    
    .stat-label {
        font-size: clamp(0.5rem, 2vw, 0.6rem) !important;
        line-height: 1 !important;
        opacity: 0.75 !important;
        color: rgba(255, 255, 255, 0.8) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
    }
    
    /* ОГНЕННЫЙ МИНИМАЛИЗМ ДЛЯ ВИДЕОФОНА */
    .hero-actions {
        margin-top: 5px !important;
        gap: 6px !important;
        justify-content: center !important;
        position: absolute !important;
        bottom: 12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 10 !important;
    }
    
    .btn {
        padding: 3px 8px !important;
        font-size: 0.6rem !important;
        min-width: auto !important;
        min-height: auto !important;
        border-radius: 12px !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }
    
    /* Огненная primary кнопка */
    .btn-primary.btn-modern {
        background: linear-gradient(135deg, rgba(255, 140, 0, 0.12), rgba(255, 69, 0, 0.08)) !important;
        border: 1px solid rgba(255, 140, 0, 0.25) !important;
        color: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 1px 4px rgba(255, 140, 0, 0.15) !important;
    }
    
    .btn-primary.btn-modern:hover {
        background: linear-gradient(135deg, rgba(255, 140, 0, 0.18), rgba(255, 69, 0, 0.12)) !important;
        border-color: rgba(255, 140, 0, 0.4) !important;
        color: rgba(255, 255, 255, 1) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(255, 140, 0, 0.25) !important;
    }
    
    /* Прозрачная outline кнопка */
    .btn-outline.btn-modern {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: rgba(255, 255, 255, 0.85) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    }
    
    .btn-outline.btn-modern:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        color: rgba(255, 255, 255, 1) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(255, 255, 255, 0.12) !important;
    }
    
    /* Компактный текст кнопок */
    .btn-text {
        font-weight: 600 !important;
        font-size: 0.55rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    .btn-icon {
        font-size: 0.7rem !important;
        margin-left: 3px !important;
    }
    
    /* ОГНЕННЫЙ ПРЕМИУМ ЗНАЧОК */
    .hero-badge {
        margin-bottom: 4px !important;
        margin-top: 20px !important;
        padding: 2px 6px !important;
        font-size: 0.6rem !important;
        background: linear-gradient(135deg, 
            rgba(255, 140, 0, 0.08), 
            rgba(255, 69, 0, 0.05)) !important;
        border: 1px solid rgba(255, 140, 0, 0.15) !important;
        border-radius: 12px !important;
        backdrop-filter: blur(4px) !important;
        box-shadow: 0 1px 3px rgba(255, 140, 0, 0.1) !important;
        color: rgba(255, 215, 0, 0.9) !important;
        text-shadow: 0 1px 2px rgba(255, 140, 0, 0.2) !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
    }
    
    /* ОГНЕННЫЕ МИНИ-ИКОНКИ */
    .subtitle-icons {
        margin: 3px 0 !important;
        gap: 4px !important;
        opacity: 0.7 !important;
    }
    
    .feature-icon-mini {
        width: 14px !important;
        height: 14px !important;
        font-size: 8px !important;
        background: rgba(255, 140, 0, 0.08) !important;
        border: 1px solid rgba(255, 140, 0, 0.15) !important;
        color: rgba(255, 215, 0, 0.8) !important;
        box-shadow: 0 1px 2px rgba(255, 140, 0, 0.1) !important;
    }
    
    /* МИНИМАЛЬНЫЕ ОТСТУПЫ ДЛЯ ВИДЕОФОНА */
    .hero-subtitle::before {
        display: none !important;
    }
    
    .hero-subtitle-container {
        margin: 3px 0 !important;
        opacity: 0.9 !important;
    }
    
    /* Убираем лишние элементы для максимального видеофона */
    .premium-description {
        font-size: clamp(0.75rem, 2.5vw, 0.9rem) !important;
        line-height: 1.1 !important;
        margin-bottom: 5px !important;
        opacity: 0.85 !important;
    }
    
    /* МАКСИМАЛЬНО НЕЗАМЕТНЫЕ КНОПКИ ВИДЕО */
    .video-controls {
        bottom: 4px !important;
        gap: 1px !important;
        padding: 1px 2px !important;
        background: rgba(0, 0, 0, 0.15) !important;
        border-radius: 6px !important;
        opacity: 0.6 !important;
        backdrop-filter: blur(2px) !important;
    }
    
    .video-control-btn {
        width: 2px !important;
        height: 2px !important;
        min-width: 2px !important;
        min-height: 2px !important;
        max-width: 2px !important;
        max-height: 2px !important;
        border: none !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.2) !important;
    }
    
    /* Отступы для ВСЕХ секций на iPhone */
    section:not(.hero) {
        padding-top: 170px !important;
        margin-top: 0 !important;
    }
    
    .about, .projects, .gallery, .team, .contact, .ceo-presentation {
        padding-top: 170px !important;
        margin-top: 0 !important;
    }
    
    /* Заголовки секций тоже нужно сдвинуть */
    .section-header, .section-title {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Для очень маленьких iPhone */
@media screen and (max-width: 375px) {
    .hero {
        padding-top: 165px !important;
        min-height: calc(100vh - 165px) !important;
    }
    
    /* Отступы для всех секций на маленьких iPhone */
    section:not(.hero) {
        padding-top: 165px !important;
        margin-top: 0 !important;
    }
    
    .about, .projects, .gallery, .team, .contact, .ceo-presentation {
        padding-top: 165px !important;
        margin-top: 0 !important;
    }
}

/* =====================================================
   ИСПРАВЛЕНИЯ ДЛЯ iPhone - ПРОБЛЕМЫ С "ПОД КЛЮЧ"
   ===================================================== */

@media (max-width: 420px) {
    /* ПРИНУДИТЕЛЬНОЕ ИСПРАВЛЕНИЕ "ПОД КЛЮЧ" */
    .hero-title-line:last-child {
        font-size: clamp(2.2rem, 7.5vw, 2.8rem) !important;
        font-weight: 900 !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        position: relative !important;
        z-index: 10 !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    .hero-title-line:last-child .text-gradient {
        background: linear-gradient(135deg, 
            rgba(255, 215, 0, 0.98) 0%, 
            rgba(255, 140, 0, 0.95) 50%, 
            rgba(255, 69, 0, 0.9) 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        text-shadow: 
            0 3px 8px rgba(255, 140, 0, 0.5),
            0 1px 4px rgba(255, 69, 0, 0.4),
            0 0 16px rgba(255, 215, 0, 0.3) !important;
        font-size: inherit !important;
        font-weight: 900 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        position: relative !important;
        z-index: 15 !important;
        display: inline-block !important;
        line-height: 1.1 !important;
    }
    
    /* ПОЛНОЕ УДАЛЕНИЕ ПРОБЛЕМНОГО ПОДЧЕРКИВАНИЯ */
    .title-decoration,
    .hero-title-line .title-decoration,
    .hero-title-line:last-child .title-decoration {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* НОВОЕ СТИЛЬНОЕ ПОДЧЕРКИВАНИЕ */
    .hero-title-line:last-child::after {
        content: '';
        position: absolute;
        bottom: -15px !important;
        left: 50%;
        transform: translateX(-50%);
        width: 100px !important;
        height: 4px !important;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(255, 140, 0, 0.9) 20%, 
            rgba(255, 215, 0, 0.95) 50%, 
            rgba(255, 140, 0, 0.9) 80%, 
            transparent 100%) !important;
        border-radius: 3px !important;
        box-shadow: 
            0 2px 8px rgba(255, 140, 0, 0.5),
            0 0 12px rgba(255, 215, 0, 0.3) !important;
        z-index: 5 !important;
    }
    
    /* ИСПРАВЛЕНИЕ СУБТИТУЛА */
    .hero-subtitle {
        font-size: clamp(1rem, 3.5vw, 1.3rem) !important;
        line-height: 1.4 !important;
        color: rgba(255, 255, 255, 0.92) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
        margin: 0 auto 12px auto !important;
        max-width: 95% !important;
        position: relative !important;
        z-index: 8 !important;
    }
    
    /* УБИРАЕМ ЛЮБЫЕ ПОДЧЕРКИВАНИЯ ИЗ СУБТИТУЛА */
    .hero-subtitle::before,
    .hero-subtitle::after {
        display: none !important;
    }
}

@media (max-width: 375px) {
    .hero-title-line:last-child {
        font-size: clamp(2rem, 7vw, 2.4rem) !important;
    }
    
    .hero-title-line:last-child .text-gradient {
        letter-spacing: 0.08em !important;
    }
    
    .hero-title-line:last-child::after {
        width: 80px !important;
        bottom: -12px !important;
    }
}

/* === ИСПРАВЛЕНИЕ ВИДЕО ФОНА - НЕ ЗАХОДИТ ПОД НАВИГАЦИЮ === */

/* === СТАБИЛЬНАЯ СИСТЕМА ВИДЕОФОНА === */
/* Единое позиционирование для всех устройств - видео на весь экран */
@media screen {
    .hero-video-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        z-index: 0 !important;
        overflow: hidden !important;
    }
}

/* === ПРИНУДИТЕЛЬНОЕ УМЕНЬШЕНИЕ КНОПОК НАВИГАЦИИ ДЛЯ ANDROID И iOS === */
/* Максимальный приоритет - применяется в последнюю очередь */

@media screen and (max-width: 768px) {
    .nav-bottom-actions .nav-bottom-btn .btn-text {
        font-size: 0.75em !important;
        transform: scale(1.0) !important;
    }
    
    .nav-bottom-actions .nav-bottom-btn .btn-icon {
        font-size: 1.1em !important;
        transform: scale(1.0) !important;
    }
    
    .nav-bottom-actions .nav-bottom-btn {
        min-height: 48px !important;
        padding: 10px 8px !important;
        margin: 0 1px !important;
    }
}

@media screen and (max-width: 480px) {
    body .navbar .nav-bottom-actions .nav-bottom-btn .btn-text {
        font-size: 0.7em !important;
        line-height: 1.0 !important;
        transform: scale(1.0) !important;
    }
    
    body .navbar .nav-bottom-actions .nav-bottom-btn .btn-icon {
        font-size: 1.05em !important;
        transform: scale(1.0) !important;
    }
    
    body .navbar .nav-bottom-actions .nav-bottom-btn {
        min-height: 46px !important;
        padding: 9px 7px !important;
        font-size: 0.65rem !important;
    }
}

@media screen and (max-width: 420px) {
    html body .navbar .nav-bottom-actions .nav-bottom-btn .btn-text {
        font-size: 0.65em !important;
        line-height: 0.9 !important;
        transform: scale(1.0) !important;
        letter-spacing: -0.02em !important;
    }
    
    html body .navbar .nav-bottom-actions .nav-bottom-btn .btn-icon {
        font-size: 1.0em !important;
        transform: scale(1.0) !important;
    }
    
    html body .navbar .nav-bottom-actions .nav-bottom-btn {
        min-height: 44px !important;
        padding: 8px 6px !important;
        font-size: 0.6rem !important;
        gap: 3px !important;
    }
}

@media screen and (max-width: 375px) {
    html body .navbar .nav-bottom-actions .nav-bottom-btn .btn-text {
        font-size: 0.6em !important;
        line-height: 0.8 !important;
        transform: scale(1.0) !important;
    }
    
    html body .navbar .nav-bottom-actions .nav-bottom-btn .btn-icon {
        font-size: 0.95em !important;
        transform: scale(1.0) !important;
    }
    
    html body .navbar .nav-bottom-actions .nav-bottom-btn {
        min-height: 42px !important;
        padding: 7px 5px !important;
        font-size: 0.55rem !important;
    }
}

/* =======================================================================
   МАКСИМАЛЬНО АГРЕССИВНОЕ ОТКЛЮЧЕНИЕ ЭФФЕКТОВ ЗАТЕМНЕНИЯ НА ВИДЕО ПРЕЗЕНТАЦИИ
   ======================================================================= */

video#presentation-video,
.presentation-video,
.presentation-video-container video {
    /* Принудительно отключаем ВСЕ возможные эффекты */
    filter: none !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    -o-filter: none !important;
    opacity: 1 !important;
    brightness: 1 !important;
    contrast: 1 !important;
    saturate: 1 !important;
    hue-rotate: 0deg !important;
    invert: 0 !important;
    grayscale: 0 !important;
    sepia: 0 !important;
    blur: 0px !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -ms-animation: none !important;
    -o-animation: none !important;
}

video#presentation-video:hover,
video#presentation-video:focus,
video#presentation-video:active,
video#presentation-video:visited,
.presentation-video:hover,
.presentation-video:focus,
.presentation-video:active,
.presentation-video:visited,
.presentation-video-container:hover video,
.presentation-video-container:focus video,
.presentation-video-container:active video {
    /* НИКАКИХ эффектов при любом взаимодействии */
    filter: none !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    -o-filter: none !important;
    opacity: 1 !important;
    brightness: 1 !important;
    contrast: 1 !important;
    saturate: 1 !important;
    hue-rotate: 0deg !important;
    invert: 0 !important;
    grayscale: 0 !important;
    sepia: 0 !important;
    blur: 0px !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
}

/* Полноэкранный режим - НИКАКОГО затемнения */
video#presentation-video:fullscreen,
video#presentation-video:-webkit-full-screen,
video#presentation-video:-moz-full-screen,
video#presentation-video:-ms-fullscreen,
.presentation-video:fullscreen,
.presentation-video:-webkit-full-screen,
.presentation-video:-moz-full-screen,
.presentation-video:-ms-fullscreen {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    brightness: 1 !important;
    contrast: 1 !important;
    background: black !important;
}

video#presentation-video:fullscreen:hover,
video#presentation-video:-webkit-full-screen:hover,
video#presentation-video:-moz-full-screen:hover,
video#presentation-video:-ms-fullscreen:hover,
.presentation-video:fullscreen:hover,
.presentation-video:-webkit-full-screen:hover,
.presentation-video:-moz-full-screen:hover,
.presentation-video:-ms-fullscreen:hover {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    brightness: 1 !important;
    contrast: 1 !important;
    transform: none !important;
}

/* === ИСПРАВЛЕНИЕ МОДАЛЬНОГО ОКНА ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ === */
/* МАКСИМАЛЬНЫЙ ПРИОРИТЕТ - КНОПКА ЗАКРЫТИЯ ВСЕГДА ВИДНА */

@media screen and (max-width: 768px) {
    .modal .modal-close {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 1.4rem !important;
        z-index: 99999 !important;
        background: rgba(0, 0, 0, 0.95) !important;
        border: 3px solid rgba(255, 255, 255, 0.9) !important;
        border-radius: 50% !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    .modal .modal-close:hover {
        background: rgba(231, 76, 60, 0.9) !important;
        border-color: rgba(231, 76, 60, 0.5) !important;
        transform: rotate(90deg) scale(1.1) !important;
    }
    
    .modal .modal-close:active {
        transform: scale(0.9) !important;
    }
    
    /* УЛУЧШЕНИЕ РАЗМЕРОВ МОДАЛЬНОГО ОКНА */
    .modal.active {
        padding-top: 60px !important;
    }
    
    .modal-content {
        max-height: calc(100vh - 80px) !important;
        margin: 10px !important;
        width: calc(100vw - 20px) !important;
    }
}

@media screen and (max-width: 480px) {
    .modal .modal-close {
        top: 10px !important;
        right: 10px !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 1.3rem !important;
    }
    
    .modal.active {
        padding-top: 50px !important;
    }
    
    .modal-content {
        max-height: calc(100vh - 70px) !important;
        margin: 8px !important;
        width: calc(100vw - 16px) !important;
    }
}

@media screen and (max-width: 375px) {
    .modal .modal-close {
        top: 8px !important;
        right: 8px !important;
        width: 46px !important;
        height: 46px !important;
        font-size: 1.2rem !important;
    }
    
    .modal.active {
        padding-top: 45px !important;
    }
    
    .modal-content {
        max-height: calc(100vh - 60px) !important;
        margin: 6px !important;
        width: calc(100vw - 12px) !important;
    }
}

/* СПЕЦИАЛЬНЫЕ ИСПРАВЛЕНИЯ ДЛЯ iOS SAFARI */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
    .modal .modal-close {
        z-index: 999999 !important;
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }
}

/* ПРИНУДИТЕЛЬНОЕ ВОЗВРАЩЕНИЕ НА ГЛАВНУЮ ПРИ ОБНОВЛЕНИИ СТРАНИЦЫ */
html, body {
    /* Отключаем восстановление позиции скролла в истории браузера */
    scroll-restoration: manual !important;
    /* Убираем возможность "отскока" при прокрутке */
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
    overscroll-behavior-x: none !important;
    /* Принудительно начинаем с верха */
    scroll-snap-type: none !important;
}

/* Отключаем якорные ссылки при загрузке */
html:target {
    scroll-padding-top: 0 !important;
}

/* Принудительная прокрутка к верху при обновлении */
html {
    scroll-top: 0 !important;
}

body {
    scroll-top: 0 !important;
}