/* === PRELOADER & SMOOTH LOADING === */
/* Прелоадер */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1f2937;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

.page-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(220, 38, 38, 0.3);
    border-top-color: #dc2626;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Плавное появление контента */
.main-content-wrapper {
    opacity: 0;
    transition: opacity 0.6s ease-in;
}

.main-content-wrapper.loaded {
    opacity: 1;
}

/* Плавное появление изображений */
img:not([src]) {
    opacity: 0;
}

img {
    transition: opacity 0.3s ease-in;
}

img.loaded {
    opacity: 1;
}

/* Плавное появление видео */
.hero-video {
    opacity: 0;
    transition: opacity 0.8s ease-in;
}

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

/* Пользовательский стиль для основного шрифта и анимаций */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa;
    /* Плавная прокрутка для webkit */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Плавная прокрутка для всех элементов */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Контейнер для псевдостраниц - убираем overflow */
#main-content {
    position: relative;
}

/* СТИЛЬ ДЛЯ СЕКЦИЙ */
.main-section {
    min-height: 100vh;
    
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* СТИЛЬ ДЛЯ ПРОСТЫХ ШАПОК */
.page-header {
    background-color: #1f2937; /* gray-800 */
    color: white;
    text-align: center;
    padding: 4rem 1rem; /* py-16 px-4 */
    padding-top: calc(4rem + 80px); /* отступ + высота header */
}

/* Компенсация фиксированного header для всех страниц */
@media (max-width: 768px) {
    .page-header {
        padding-top: calc(4rem + 70px); /* меньший отступ на мобильных */
    }
}

.page-header p {
    color: #d1d5db; /* gray-300 */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Стиль для "липкого" хедера */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Эффект для карточек при наведении */
.card-hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover-effect:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Видео на фоне */
.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 20, 40, 0.7);
}

/* Стили для переключателя языка */
.lang-switcher button {
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease-in-out;
}
.lang-switcher button.active {
    background-color: rgba(220, 38, 38, 0.7);
    font-weight: bold;
}

/* СТИЛИ ДЛЯ ГОРИЗОНТАЛЬНОЙ ПРОКРУТКИ */
.capabilities-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.capabilities-container::-webkit-scrollbar {
    display: none;
}
.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.8);
    color: #1f2937;
    border-radius: 9999px;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}
.scroll-btn:hover {
    background-color: white;
    transform: translateY(-50%) scale(1.1);
}
.scroll-btn.left-0 {
    left: -1.5rem;
}
.scroll-btn.right-0 {
    right: -1.5rem;
}
.hidden {
    display: none;
}

/* Улучшенная прокрутка для мобильных устройств */
@media (max-width: 768px) {
    .main-section {
        /* Оптимизация для iOS */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        /* Улучшенная инерционная прокрутка */
        -webkit-overflow-scrolling: touch;
        /* Предотвращение bounce эффекта */
        overscroll-behavior-y: contain;
    }
    
    /* Убираем hover эффекты на мобильных */
    .card-hover-effect:hover {
        transform: none;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
}

/* Стили для активной навигации */
.nav-link {
    position: relative;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #dc2626; /* red-600 */
    transition: width 0.3s ease;
}

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

/* Убираем подчеркивание для логотипа */
.logo-font::after {
    display: none !important;
}

/* Стили для мобильной навигации */
#mobile-menu .nav-link {
    position: relative;
}

#mobile-menu .nav-link::after {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #dc2626;
}

#mobile-menu .nav-link.active::after {
    width: 80%;
}

.hero-height {
    height: 70vh;
    min-height: 500px; /* минимальная высота для мобильных */
}

/* Скрытие скроллбара для партнеров */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.logo-font {
    font-family: 'Space Grotesk', sans-serif; /* или другой выбранный шрифт */
    font-weight: 500;
    letter-spacing: -0.025em; /* слегка сжимает буквы */
    text-transform: lowercase;
}

/* Центрирование карусели способностей */
#capabilities-container {
    scroll-snap-type: x mandatory !important;
}

/* Временно скрыть все должности команды */
[data-lang^="team_"][data-lang$="_role"] {
    display: none !important;
}

/* Увеличиваем расстояние между строками в подзаголовке capabilities */
[data-lang="capabilities_subtitle"] br {
    display: block;
    margin-bottom: 1rem; /* или любое другое значение, например 0.5rem, 1.5rem */
    content: "";
}

.team-photo {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.team-photo:hover {
    filter: grayscale(0%);
    transform: scale(1.05); /* Легкое увеличение при наведении */
}

/* === SWIPE NAVIGATION === */
.swipe-indicator {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background-color: rgba(220, 38, 38, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-out;
    z-index: 9998;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.swipe-indicator.visible {
    opacity: 0.8;
}

.swipe-indicator.swipe-left {
    right: 20px;
}

.swipe-indicator.swipe-right {
    left: 20px;
}

.swipe-indicator.swipe-right .swipe-arrow {
    transform: rotate(180deg);
}

.swipe-arrow {
    width: 32px;
    height: 32px;
    color: white;
    animation: swipe-pulse 1s ease-in-out infinite;
}

@keyframes swipe-pulse {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}

.swipe-indicator.swipe-right .swipe-arrow {
    animation: swipe-pulse-reverse 1s ease-in-out infinite;
}

@keyframes swipe-pulse-reverse {
    0%, 100% {
        transform: translateX(0) rotate(180deg);
    }
    50% {
        transform: translateX(-5px) rotate(180deg);
    }
}

/* Плавный fade для перехода между страницами */
#main-content {
    transition: opacity 0.3s ease-out;
}

/* Отключаем индикатор на десктопах */
@media (min-width: 1024px) {
    .swipe-indicator {
        display: none !important;
    }
}

/* Отключаем браузерный свайп навигации */
body {
    overscroll-behavior-x: none;
    
}

/* Разрешаем горизонтальный скролл только для каруселей */
.capabilities-container,
#partners-container {
    touch-action: pan-x pan-y;
}