/* Theme Name: B2B Solutions Elite
*/

/* --- 1. БАЗА (Вытаскиваем из тьмы) --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: #ffffff !important; /* БЕЛЫЙ ФОН */
    color: #1d1d1f !important;           /* ТЕМНЫЙ ТЕКСТ (как у Apple) */
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Убираем синий мусор */
a { text-decoration: none !important; color: inherit; transition: 0.3s; }
ul, li { list-style: none !important; }










/* --- 2. ХЕДЕР-КАПСУЛА (LIGHT GLASS) --- */
.main-header {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1200px;
    z-index: 10000;
}

.header-container {
    /* Светлое матовое стекло */
    background: rgba(255, 255, 255, 0.7) !important; 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* Тонкая темная кайма вместо светлой */
    border: 1px solid rgba(0, 0, 0, 0.05) !important; 
    border-radius: 100px;
    padding: 12px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Мягкая тень для объема на белом фоне */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.03) !important;
}

/* Логотип теперь темный */
.logo-text { 
    font-size: 22px; 
    font-weight: 800; 
    letter-spacing: -1px; 
    color: #1d1d1f !important; 
}
.logo-text span { color: #0052FF; }

.main-nav-list { display: flex; gap: 25px; align-items: center; }

/* Ссылки меню — темные с прозрачностью */
.main-nav-list a { 
    font-size: 13px; 
    font-weight: 700; 
    text-transform: uppercase; 
    color: rgba(29, 29, 31, 0.7) !important; 
}

.main-nav-list a:hover { 
    color: #0052FF !important; 
}




/* --- 2. МОБИЛЬНОЕ МЕНЮ (LIGHT & SEXY) --- */

/* Кнопка бургера */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    width: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10001;
    padding: 5px;
}

/* Полоски бургера — теперь ТЕМНЫЕ, чтобы их было видно на белом фоне хедера */
.menu-toggle span {
    width: 100%;
    height: 2px;
    background: #1d1d1f !important; /* ТЕМНЫЙ ЦВЕТ */
    border-radius: 10px;
    transition: 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* Анимация в крестик (полоски остаются темными при открытии на светлом меню) */
.menu-toggle.active span { background: #1d1d1f !important; }
.menu-toggle.active span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 991px) {
    .menu-toggle { display: flex; }
    .header-right { display: none !important; }

    .main-nav-list {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        /* Светлый фон с размытием */
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center;
        gap: 25px !important;
        padding: 60px 50px;
        transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 10000;
        /* Мягкая тень вместо темной */
        box-shadow: -10px 0 40px rgba(0,0,0,0.05) !important;
    }

    .main-nav-list.active { right: 0; }

    .main-nav-list a {
        font-size: 22px !important;
        color: #1d1d1f !important; /* ТЕМНЫЙ ТЕКСТ */
        opacity: 0;
        transform: translateX(30px);
        transition: 0.4s ease forwards;
        font-weight: 800;
        letter-spacing: -1px;
    }

    .main-nav-list.active a { opacity: 1; transform: translateX(0); }

    /* Stagger эффект */
    .main-nav-list.active li:nth-child(1) a { transition-delay: 0.1s; }
    .main-nav-list.active li:nth-child(2) a { transition-delay: 0.2s; }
    .main-nav-list.active li:nth-child(3) a { transition-delay: 0.3s; }
    .main-nav-list.active li:nth-child(4) a { transition-delay: 0.4s; }

    /* Маленькая кнопка консультации внутри */
    .mobile-only-btn {
        display: block !important;
        margin-top: 15px;
        opacity: 0;
        animation: fadeIn 0.5s 0.5s forwards;
    }

    .mobile-only-btn .btn-primary-glow {
        padding: 12px 25px !important;
        font-size: 14px !important;
        display: inline-block !important;
    }
}

.mobile-only-btn { display: none; }

@keyframes fadeIn {
    to { opacity: 1; }
}















/* --- HERO PREMIUM DARK (CENTERED) --- */
.hero-premium.dark-version {
    position: relative;
    height: 100vh;
    min-height: 850px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000; /* Глубокий черный фон */
    overflow: hidden;
}

.hero-bg-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-static-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4; /* Увеличили видимость картинки */
    filter: grayscale(100%) brightness(0.6); /* Затемнение через яркость */
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* Затемняем края к центру, чтобы сфокусировать внимание */
    background: radial-gradient(circle, rgba(0,0,0,0.2) 0%, #000 100%);
    z-index: 2;
}

.hero-centered {
    position: relative;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-content {
    max-width: 900px;
}

.hero-label {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 5px;
    color: #0052FF;
    margin-bottom: 25px;
    display: block;
}

.hero-content h1 {
    font-size: clamp(40px, 6vw, 85px);
    line-height: 1.1;
    font-weight: 800;
    color: #fff !important; /* Текст белый */
    margin-bottom: 30px;
    letter-spacing: -0.03em;
}

.hero-lead {
    font-size: clamp(18px, 1.5vw, 24px);
    color: rgba(255, 255, 255, 0.7); /* Светло-серый текст */
    max-width: 700px;
    margin: 0 auto 50px;
}

.hero-btns {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 60px;
}

/* Настраиваем стеклянную кнопку под темный фон */
.btn-glass-premium.light {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.hero-features {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.h-feature {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 3D Куб на заднем плане */
.hero-3d-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    opacity: 0.3; /* Куб еле виден, создает объем */
    pointer-events: none;
}

.cube-face {
    background: rgba(0, 82, 255, 0.02) !important;
    border: 1px solid rgba(0, 82, 255, 0.2) !important;
    box-shadow: 0 0 30px rgba(0, 82, 255, 0.1);
}

/* Адаптив */
@media (max-width: 991px) {
    .hero-features {
        flex-direction: column;
        gap: 15px;
    }
    .hero-btns {
        flex-direction: column;
    }
}














/* --- 4. ТЕ САМЫЕ КНОПКИ (Улучшенные) --- */
.btn-primary-glow {
    position: relative;
    background: linear-gradient(135deg, #0052FF 0%, #003db3 100%) !important;
    color: #fff !important;
    padding: 20px 45px;
    border-radius: 100px;
    font-weight: 800;
    font-size: 16px;
    display: inline-block;
    box-shadow: 0 10px 25px rgba(0, 82, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden; /* Важно для эффекта блика */
    border: none;
    cursor: pointer;
}

/* Эффект блика при наведении */
.btn-primary-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.5s;
}

.btn-primary-glow:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 82, 255, 0.5);
    background: #0046e6 !important;
}

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

/* Вторая кнопка (стеклянная), если она нужна рядом */
.btn-glass-premium {
    position: relative;
    padding: 20px 45px;
    border-radius: 100px;
    font-weight: 800;
    font-size: 16px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.4) !important;
    color: #1d1d1f !important;
    border: 1px solid rgba(0, 82, 255, 0.2) !important; /* Легкий синий контур */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.btn-glass-premium:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: #0052FF !important; /* При наведении рамка становится четче */
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 82, 255, 0.15);
}






























/* --- 7. FOOTER (LIGHT PREMIUM) --- */
.main-footer {
    background: #fbfbfd !important; /* Светлый премиальный фон */
    padding: 80px 0 30px;
    color: #1d1d1f !important;    /* Темный текст */
    width: 100vw !important;
    margin-left: calc(-50vw + 50%);
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.05); /* Тонкая линия разделения */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-tagline {
    margin-top: 20px;
    font-size: 14px;
    color: rgba(29, 29, 31, 0.6); /* Приглушенный темный */
    max-width: 300px;
    line-height: 1.6;
}

.footer-links h4, .footer-contacts h4 {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    color: #0052FF; /* Синий акцент оставляем */
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links a {
    font-size: 14px;
    color: rgba(29, 29, 31, 0.7) !important;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #0052FF !important; /* Синий при наведении */
    padding-left: 5px;
}

.footer-email {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f !important;
    display: block;
    margin-bottom: 25px;
}

.footer-socials {
    display: flex;
    gap: 15px;
}

.social-link {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Темная рамка */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #1d1d1f;
    transition: 0.3s;
}

.social-link:hover {
    background: #0052FF;
    border-color: #0052FF;
    color: #fff; /* Текст иконки белым при ховере */
    transform: translateY(-3px);
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(29, 29, 31, 0.4);
}

.footer-legal a {
    margin-left: 20px;
    color: rgba(29, 29, 31, 0.4) !important;
}

.footer-legal a:hover {
    color: #0052FF !important;
}

/* Адаптив для мобилок */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-tagline { margin: 20px auto; }
    .footer-socials { justify-content: center; }
    .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }
}

















/* --- СЕКЦИЯ КОМПЕТЕНЦИИ (LIGHT PREMIUM) --- */
.competencies {
    padding: 120px 0;
    background: #ffffff !important; /* ЧИСТЫЙ БЕЛЫЙ */
    overflow: hidden;
    width: 100%;
}

.competencies .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

/* ИСПРАВЛЕННАЯ СЕТКА: ОДИН РАЗ, 4 КОЛОНКИ */
.competencies-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px; 
}

.section-label {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #0052FF;
    margin-bottom: 15px;
    text-align: center;
    display: block;
}

.section-title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    color: #1d1d1f !important; /* ТЕМНЫЙ ТЕКСТ APPLE */
    text-align: center;
    margin-bottom: 80px;
    letter-spacing: -2px;
}

/* Карточка — светлый Glassmorphism */
.comp-card {
    position: relative;
    background: #fbfbfd !important; /* Мягкий серый фон */
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 30px;
    padding: 50px 40px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Акцентная карточка — легкое синее свечение на светлом */
.comp-card.accent {
    background: rgba(0, 82, 255, 0.03) !important;
    border-color: rgba(0, 82, 255, 0.1) !important;
}

.comp-card:hover {
    transform: translateY(-15px);
    background: #ffffff !important;
    border-color: rgba(0, 82, 255, 0.3) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05) !important; /* Мягкая тень */
}

/* Номер-иконка — инвертируем градиент, чтобы читался на светлом */
.comp-icon {
    font-size: 48px;
    font-weight: 900;
    background: linear-gradient(180deg, #1d1d1f 0%, rgba(29,29,31,0.1) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin-bottom: 30px;
    opacity: 0.2; /* Делаем цифру фоновой */
    transition: 0.3s;
}

.comp-card:hover .comp-icon {
    opacity: 0.5;
    transform: scale(1.1);
}

.comp-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1d1d1f !important; /* ТЕМНЫЙ ТЕКСТ */
    margin-bottom: 20px;
}

.comp-card p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(29, 29, 31, 0.6) !important; /* СЕРЫЙ ТЕКСТ */
    margin-bottom: 40px;
    flex-grow: 1;
}

.comp-link {
    font-size: 14px;
    font-weight: 700;
    color: #0052FF;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    transition: 0.3s;
}

.comp-link:hover {
    color: #1d1d1f !important; /* При ховере ссылка чернеет */
    gap: 12px;
}

/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 1200px) {
    .competencies-grid {
        grid-template-columns: repeat(2, 1fr); /* 2х2 на планшетах */
    }
}

/* Фикс для мобилок */
@media (max-width: 768px) {
    .competencies-grid {
        grid-template-columns: 1fr; /* В одну колонку */
    }
}
























/* --- БЛОК "ПОЧЕМУ МЫ" (WHY US) --- */
.why-us {
    padding: 100px 0;
    background: #ffffff !important;
    position: relative;
}

/* ДОБАВИЛ ЭТОТ БЛОК: Ограничиваем ширину и даем отступы */
.why-us .container {
    max-width: 1400px; /* Максимальная ширина как у всего сайта */
    margin: 0 auto;    /* Центрируем блок */
    padding: 0 60px;   /* Отступы от краев экрана */
    width: 100%;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 карточки в ряд */
    gap: 20px;
}

/* Карточка */
.why-card {
    background: #fbfbfd; /* Светло-серый фон */
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 24px; /* Скругленные углы */
    padding: 35px 30px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%; /* Чтобы все карточки были одной высоты */
}

/* Ховер эффект для карточки */
.why-card:hover {
    background: #ffffff;
    border-color: rgba(0, 82, 255, 0.3);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

/* Иконка */
.why-icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 82, 255, 0.05);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: 0.3s;
    color: #0052FF;
}

.why-card:hover .why-icon {
    background: #0052FF;
    color: #ffffff;
    transform: scale(1.1);
}

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

/* Тексты */
.why-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: #1d1d1f;
    margin-bottom: 12px;
}

.why-card p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(29, 29, 31, 0.65);
    margin: 0;
}

/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 1200px) {
    .why-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 на планшетах */
    }
}

@media (max-width: 991px) {
    /* На мобилках уменьшаем боковые отступы контейнера */
    .why-us .container {
        padding: 0 25px;
    }
}

@media (max-width: 768px) {
    .why-grid {
        grid-template-columns: 1fr; /* Одна колонка на телефонах */
        gap: 15px;
    }
    
    .why-card {
        padding: 30px 25px;
    }
}











/* --- БЛОК ГЕОГРАФИИ (HOTSPOT MAP) --- */
.geography-section {
    padding: 120px 0;
    background: #ffffff !important;
    position: relative;
    overflow: hidden;
}

.geography-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

.geo-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

/* ЛЕВАЯ ЧАСТЬ */
.geo-content {
    flex: 0 0 35%;
}

.geo-description {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(29, 29, 31, 0.7);
    margin-bottom: 40px;
}

/* Теги стран */
.geo-country-list {
    list-style: none;
    padding: 0;
    margin: 0 0 50px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.geo-country-list li {
    padding: 8px 16px;
    background: #f5f5f7;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    color: #1d1d1f;
    cursor: default;
    transition: 0.3s;
}

.geo-country-list li:hover {
    background: #0052FF;
    color: #fff;
    transform: translateY(-2px);
}

/* ПРАВАЯ ЧАСТЬ: КАРТА */
.geo-map-visual {
    flex: 1;
    position: relative;
    /* Создаем красивое свечение вокруг карты */
    background: radial-gradient(circle, rgba(0,82,255,0.05) 0%, transparent 70%);
    border-radius: 40px;
}

.map-container {
    position: relative;
    width: 100%;
    /* Фиксируем соотношение сторон, чтобы точки не съезжали */
    padding-bottom: 60%; 
    border-radius: 30px;
    overflow: hidden;
}

/* Картинка карты */
.world-map-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Делаем карту стильной: серой и чуть бледной */
    opacity: 0.6; 
    filter: grayscale(100%) contrast(0.8);
}

/* --- ТОЧКИ (HOTSPOTS) --- */
.hotspot {
    position: absolute;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%); /* Центрируем точку по координатам */
    cursor: pointer;
    z-index: 10;
}

/* Центральная точка */
.dot-center {
    width: 8px;
    height: 8px;
    background: #0052FF;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px #0052FF;
    z-index: 2;
}

/* Пульсирующее кольцо */
.dot-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: rgba(0, 82, 255, 0.4);
    border-radius: 50%;
    animation: pulseRadar 2s infinite;
    z-index: 1;
}

@keyframes pulseRadar {
    0% { width: 8px; height: 8px; opacity: 1; }
    100% { width: 40px; height: 40px; opacity: 0; }
}

/* ТУЛТИП (Название города при наведении) */
.hotspot-tooltip {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #1d1d1f;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Стрелочка тултипа */
.hotspot-tooltip::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px 4px 0;
    border-style: solid;
    border-color: #1d1d1f transparent transparent transparent;
}

/* Показываем тултип при наведении */
.hotspot:hover .hotspot-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.hotspot:hover .dot-center {
    transform: translate(-50%, -50%) scale(1.5);
    background: #fff; /* Точка белеет при наведении */
}

/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991px) {
    .geography-section .container { padding: 0 25px; }
    .geo-wrapper { flex-direction: column-reverse; gap: 40px; }
    .geo-content { flex: 1; width: 100%; text-align: center; }
    
    .geo-country-list { justify-content: center; }
    .geo-btn-wrap { display: flex; justify-content: center; }

    /* На мобилках карту чуть увеличиваем по высоте, чтобы попасть в точки */
    .map-container { padding-bottom: 70%; }
}











/* --- БЛОК ИНФРАСТРУКТУРЫ (ULTRA PREMIUM - FIXED) --- */
.infra-section {
    padding: 120px 0;
    background: #ffffff !important;
    position: relative;
    overflow: hidden;
}

.infra-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

/* АСИММЕТРИЧНАЯ СЕТКА */
.infra-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 280px);
    gap: 30px;
    margin-bottom: 60px;
}

.infra-card.tall { grid-row: span 2; }
.infra-card.wide { grid-column: span 2; }

/* БАЗОВЫЙ СТИЛЬ КАРТОЧКИ */
.infra-card {
    position: relative;
    background: #fbfbfd;
    border-radius: 40px;
    padding: 40px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #0052FF; 
}

.infra-card:hover {
    background: #ffffff;
    border-color: rgba(0, 82, 255, 0.4);
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 82, 255, 0.15), 
                inset 0 0 0 2px rgba(0, 82, 255, 0.05);
}

/* ВИЗУАЛ (SVG) */
.card-bg-visual {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.5;
    transition: all 0.6s ease;
    mix-blend-mode: multiply;
}

.card-bg-visual svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.infra-card:hover .card-bg-visual svg {
    transform: scale(1.2) rotate(5deg);
    opacity: 0.8;
    color: #0052FF;
}

.transport:hover .card-bg-visual svg { transform: scale(1.2) rotate(90deg); }
.experts:hover .card-bg-visual svg { transform: scale(1.3); }

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

/* ОГРОМНЫЕ ЦИФРЫ */
.infra-number {
    font-size: clamp(48px, 6vw, 80px);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 20px;
    letter-spacing: -2px;
    background: linear-gradient(135deg, #1d1d1f 30%, #0052FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.6s ease;
    /* Важно: предотвращаем обрезание текста */
    word-wrap: break-word; 
}

/* --- ФИКС: Уменьшаем шрифт для карточки Экспертов --- */
.infra-card.experts .infra-number {
    font-size: clamp(32px, 4vw, 56px); /* Чуть меньше макс. размер */
}

/* Эффект ховера */
.infra-card:hover .infra-number {
    background: linear-gradient(135deg, #0052FF 0%, #00FFC2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: scale(1.05);
    text-shadow: 0 10px 30px rgba(0, 82, 255, 0.3);
}

.infra-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 8px;
    line-height: 1.4;
}

.infra-address {
    font-size: 13px;
    color: rgba(29, 29, 31, 0.7);
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.5;
}
.infra-address svg { color: #0052FF; width: 14px; height: 14px; }

.infra-btn-wrapper {
    text-align: center;
    margin-top: 50px;
}

/* АДАПТИВНОСТЬ */
@media (max-width: 991px) {
    .infra-section .container { padding: 0 25px; }
    
    .infra-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 20px;
    }

    .infra-card.tall, .infra-card.wide {
        grid-column: span 1;
        grid-row: span 1;
        min-height: 300px;
    }

    .infra-number { font-size: 56px; }
    
    /* На мобилке возвращаем размер, там места больше по вертикали */
    .infra-card.experts .infra-number { font-size: 56px; } 
}











/* --- БЛОК ПРОЦЕССА (KINETIC PIPELINE) --- */
.process-section {
    padding: 120px 0;
    background: #ffffff !important;
    position: relative;
    overflow: hidden;
}

.process-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

/* Обертка для всего конвейера */
.process-pipeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 70px;
    position: relative;
}

/* Обертка модуля (для правильного позиционирования) */
.process-module-wrap {
    position: relative;
    flex: 1;
    height: 180px;
    perspective: 1000px; /* Создаем глубину для 3D */
}

/* --- СТЕКЛЯННЫЙ МОДУЛЬ --- */
.process-module {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fbfbfd; /* Светлый фон в покое */
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    padding: 30px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Базовый цвет для внутренних элементов */
    color: #0052FF; 
    transform-style: preserve-3d; /* Важно для 3D эффектов */
}

/* --- ХОВЕР НА МОДУЛЬ --- */
.process-module-wrap:hover .process-module {
    background: #ffffff;
    border-color: rgba(0, 82, 255, 0.5);
    /* Модуль "всплывает" и немного наклоняется */
    transform: translateY(-10px) rotateX(5deg);
    box-shadow: 0 25px 50px rgba(0, 82, 255, 0.15),
                inset 0 0 20px rgba(0, 82, 255, 0.05);
}

/* --- ВНУТРЕННЕЕ 3D ЯДРО (Вращающаяся фигура) --- */
.module-3d-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%; /* Чуть больше модуля */
    height: 120%;
    pointer-events: none;
    opacity: 0.15; /* Бледное в покое */
    transition: all 0.5s ease;
}

.module-3d-core svg {
    width: 100%;
    height: 100%;
    /* Медленное вращение в покое */
    animation: rotate3D 20s infinite linear;
}

/* Ховер на ядро: ускоряется и становится ярче */
.process-module-wrap:hover .module-3d-core {
    opacity: 0.6;
}

.process-module-wrap:hover .module-3d-core svg {
    /* Ускоряем вращение при наведении */
    animation: rotate3D 5s infinite linear;
    color: #0052FF;
}

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

/* --- КОНТЕНТ МОДУЛЯ --- */
.module-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.module-num {
    font-size: 32px;
    font-weight: 900;
    /* Градиентный номер */
    background: linear-gradient(135deg, #1d1d1f 0%, #0052FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    transition: 0.3s;
}

.process-module-wrap:hover .module-num {
    /* При ховере номер становится ярко-неоновым */
    background: linear-gradient(135deg, #0052FF 0%, #00FFC2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: scale(1.1);
}

.module-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.3;
}

/* --- КОННЕКТОР (Стрелка между модулями) --- */
.process-connector {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(29, 29, 31, 0.1); /* Бледная в покое */
    transition: all 0.4s ease;
}

.process-connector svg {
    width: 24px;
    height: 24px;
}

/* Магия: когда наводим на модуль, следующая за ним стрелка загорается */
.process-module-wrap:hover + .process-connector {
    color: #0052FF;
    transform: translateX(5px) scale(1.1);
    filter: drop-shadow(0 0 8px rgba(0, 82, 255, 0.5));
}

/* Кнопка по центру */
.process-btn-wrapper {
    text-align: center;
}

/* --- АДАПТИВНОСТЬ (МОБИЛКИ) --- */
@media (max-width: 991px) {
    .process-section .container { padding: 0 25px; }

    /* На мобилках конвейер становится вертикальным */
    .process-pipeline {
        flex-direction: column;
        gap: 10px;
    }

    .process-module-wrap {
        width: 100%;
        height: auto;
        min-height: 140px;
    }

    .process-module {
        flex-direction: row; /* Контент в ряд */
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
        padding: 25px;
        text-align: left;
    }

    .module-3d-core {
        width: 150px;
        height: 150px;
        left: 85%; /* Сдвигаем 3D фигуру вправо */
    }

    .module-num {
        font-size: 42px;
        margin-bottom: 0;
    }

    .module-content h3 {
        font-size: 18px;
    }

    /* Поворачиваем стрелки вниз */
    .process-connector {
        transform: rotate(90deg);
        margin: 10px 0;
    }
    
    /* Адаптируем ховер для стрелок в вертикальном режиме */
    .process-module-wrap:hover + .process-connector {
        transform: rotate(90deg) translateY(5px) scale(1.1);
    }
}












/* --- CTA PREMIUM: LIGHT RADIANCE (FINAL VERSION) --- */
.cta-premium {
    padding: 100px 0 160px;
    background: #ffffff !important; /* Чистый белый фон сайта */
    position: relative;
    overflow: hidden;
}

.cta-premium .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

.cta-wrapper {
    position: relative;
    /* Фон: Светлый Apple-style + мягкий радиальный градиент */
    background: radial-gradient(circle at 50% 0%, rgba(0, 82, 255, 0.03), transparent 70%), #f5f5f7 !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 60px;
    padding: 100px 40px;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    /* Тонкая тень для объема */
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.05);
}

/* Анимированная сетка на фоне */
.cta-grid-overlay {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px) !important;
    background-size: 60px 60px;
    mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
    z-index: 0;
    pointer-events: none;
}

/* Плавающие неоновые сферы (Ambient Light) */
.cta-blur-sphere {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.4 !important;
    animation: floatSphere 12s infinite alternate ease-in-out;
}

.sphere-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #0052FF 0%, transparent 70%);
    top: -150px; right: -100px;
}

.sphere-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #00FFC2 0%, transparent 70%);
    bottom: -100px; left: -100px;
    animation-delay: -4s;
}

@keyframes floatSphere {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-50px, 30px) scale(1.1); }
}

/* --- КОНТЕНТ --- */
.cta-content {
    position: relative;
    z-index: 10;
    max-width: 900px;
    margin: 0 auto;
}

.cta-badge {
    display: inline-block;
    padding: 10px 24px;
    background: #ffffff !important;
    border: 1px solid rgba(0, 82, 255, 0.1) !important;
    border-radius: 100px;
    color: #0052FF !important;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 35px;
    box-shadow: 0 10px 20px rgba(0, 82, 255, 0.05);
}

.cta-title {
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 900;
    color: #1d1d1f !important;
    line-height: 1.05;
    letter-spacing: -2px;
    margin-bottom: 30px;
}

/* Перелив заголовка (Shimmer Effect) */
.text-glow {
    background: linear-gradient(90deg, #0052FF, #00C2FF, #0052FF) !important;
    background-size: 200% auto;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: textShine 5s linear infinite;
}

@keyframes textShine {
    to { background-position: 200% center; }
}

.cta-description {
    font-size: clamp(18px, 1.5vw, 22px);
    color: rgba(29, 29, 31, 0.6) !important;
    max-width: 700px;
    margin: 0 auto 50px;
    line-height: 1.6;
}

/* --- КНОПКИ (ACTION AREA) --- */
.cta-action-area {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 40px;
}

/* БАЗОВАЯ КНОПКА (Общие стили) */
.btn-ultra {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px 50px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    border-radius: 100px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    min-width: 240px; /* Чтобы кнопки были одинаковой ширины */
}

/* 1. ЧЕРНАЯ КНОПКА (Primary) */
.btn-ultra:not(.transparent) {
    background: #1d1d1f !important;
    color: #ffffff !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid transparent;
}

.btn-ultra:not(.transparent):hover {
    background: #0052FF !important;
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 82, 255, 0.3) !important;
}

/* 2. ПРОЗРАЧНАЯ КНОПКА (Secondary) */
.btn-ultra.transparent {
    background: transparent !important;
    border: 2px solid rgba(29, 29, 31, 0.1) !important; /* Тонкая рамка */
    color: #1d1d1f !important;
    box-shadow: none !important;
}

.btn-ultra.transparent:hover {
    border-color: #0052FF !important;
    color: #0052FF !important;
    background: rgba(0, 82, 255, 0.03) !important;
    transform: translateY(-5px);
}

/* Анимация стрелки */
.btn-ultra svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s;
}
.btn-ultra:hover svg {
    transform: translateX(5px);
}

/* --- АДАПТИВНОСТЬ (МОБИЛКИ) --- */
@media (max-width: 991px) {
    .cta-premium .container { padding: 0 20px; }
    .cta-wrapper { padding: 60px 25px; border-radius: 40px; }
    
    .cta-action-area {
        flex-direction: column; /* Кнопки друг под другом */
        gap: 15px;
        width: 100%;
    }

    .btn-ultra {
        width: 100%; /* На всю ширину */
        padding: 20px;
    }
}

/* Интерактивный курсор (Оставляем, если есть JS) */
.cta-cursor-glow {
    position: absolute;
    top: var(--y, -500px);
    left: var(--x, -500px);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 82, 255, 0.08) 0%, transparent 60%) !important;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: overlay;
    transition: opacity 0.3s;
}



































/* --- HERO SECTION (INFRASTRUCTURE PREMIUM CENTERED 3D) --- */
.infra-hero {
    position: relative;
    height: 90vh; /* Максимальный воздух */
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center; /* Центрируем по горизонтали */
    background: #ffffff;
    overflow: hidden;
    perspective: 1000px; /* Включаем 3D перспективу для сцены */
}

/* 1. Атмосферный фон (Живые пятна) */
.infra-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

/* Пятно 1 (Синее справа) */
.infra-hero-bg::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, rgba(0, 82, 255, 0.08) 0%, transparent 60%);
    filter: blur(80px);
    animation: heroPulse 10s infinite alternate ease-in-out;
}

/* Пятно 2 (Бирюзовое слева) */
.infra-hero-bg::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 70vw;
    height: 70vw;
    background: radial-gradient(circle, rgba(0, 255, 194, 0.05) 0%, transparent 60%);
    filter: blur(100px);
    animation: heroPulse 12s infinite alternate-reverse ease-in-out;
}

/* 2. 3D СЕТКА (FLOOR) - Эффект объема */
.infra-hero-bg .grid-3d {
    position: absolute;
    bottom: -30%;
    left: -50%;
    width: 200%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 82, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 82, 255, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    transform: rotateX(60deg); /* Ключевой момент 3D */
    mask-image: linear-gradient(to top, black, transparent 80%);
    pointer-events: none;
    animation: gridFloat 20s linear infinite;
}

@keyframes gridFloat {
    0% { transform: rotateX(60deg) translateY(0); }
    100% { transform: rotateX(60deg) translateY(80px); }
}

@keyframes heroPulse {
    0% { transform: scale(1) translate(0, 0); opacity: 0.8; }
    100% { transform: scale(1.1) translate(20px, -20px); opacity: 0.5; }
}

/* 3. Контент хиро-секции (Центр) */
.infra-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding-top: 20px;
    text-align: center; /* Центрируем текст */
    margin: 0 auto;
    
    /* Анимация появления */
    opacity: 0;
    transform: translateY(40px);
    animation: fadeInUpHero 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes fadeInUpHero {
    to { opacity: 1; transform: translateY(0); }
}

/* --- ТИПОГРАФИКА --- */

/* Лейбл */
.hero-label {
    display: inline-block;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 6px; /* Чуть шире */
    text-transform: uppercase;
    color: #0052FF;
    margin-bottom: 30px;
    background: rgba(0, 82, 255, 0.05);
    padding: 10px 20px;
    border-radius: 100px;
    border: 1px solid rgba(0, 82, 255, 0.1);
}

/* Главный заголовок */
.infra-hero-content h1 {
    font-size: clamp(50px, 7vw, 100px); /* Еще крупнее и мощнее */
    font-weight: 900;
    line-height: 1.05;
    color: #1d1d1f;
    letter-spacing: -2px;
    margin-bottom: 30px;
}

/* Градиентный текст с переливом */
.infra-hero-content h1 .text-gradient {
    background: linear-gradient(90deg, #1d1d1f 0%, #0052FF 50%, #1d1d1f 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 6s linear infinite;
}

@keyframes textShimmer {
    to { background-position: 200% center; }
}

/* Подзаголовок */
.hero-lead {
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 1.6;
    color: rgba(29, 29, 31, 0.65);
    max-width: 700px;
    margin: 0 auto 50px; /* auto по бокам для центровки */
    font-weight: 500;
}

/* Центровка кнопок */
.hero-btns {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991px) {
    .infra-hero {
        height: auto;
        min-height: auto;
        padding: 140px 0 100px;
    }
    
    .infra-hero-content {
        padding: 0 20px;
    }
    
    .hero-lead {
        font-size: 18px;
    }
    
    /* Скрываем сложную 3D сетку на мобилках для скорости */
    .infra-hero-bg .grid-3d {
        display: none;
    }
}














/* --- TRADING HOUSE (FLAGSHIP FIXED) --- */
.trading-house-section {
    padding: 120px 0; /* Комфортные отступы сверху/снизу */
    background: #ffffff;
    position: relative;
    /* Убираем overflow: visible, чтобы не появлялась горизонтальная прокрутка, 
       но даем достаточно padding внутри контейнеров для теней */
    overflow: hidden; 
}

.trading-house-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px; /* ТЕ САМЫЕ ПРЕМИАЛЬНЫЕ ОТСТУПЫ ПО БОКАМ */
}

/* Обертка */
.th-wrapper {
    display: flex;
    align-items: center; /* Центрируем по вертикали */
    justify-content: space-between;
    gap: 80px; /* Отступ между текстом и картинкой */
}

/* --- ЛЕВАЯ ЧАСТЬ (ТЕКСТ) --- */
.th-content {
    flex: 1; /* Занимает половину ширины */
    position: relative;
    z-index: 5; /* Текст поверх всего */
    padding-right: 20px; /* Небольшой зазор справа */
}

.section-label {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #0052FF;
    margin-bottom: 15px;
    display: block;
}

.th-content h2 {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 800;
    color: #1d1d1f;
    line-height: 1.1;
    margin-bottom: 40px;
    letter-spacing: -1px;
}

/* Список */
.th-features {
    list-style: none;
    padding: 0;
    margin: 0 0 50px 0;
}

.th-features li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
    font-size: 18px;
    color: rgba(29, 29, 31, 0.7);
    line-height: 1.5;
}

.check-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: rgba(0, 82, 255, 0.1);
    color: #0052FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
}

/* --- КАРТОЧКА АДРЕСА --- */
.address-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    max-width: 480px;
    transition: 0.3s;
}

.address-card:hover {
    border-color: rgba(0, 82, 255, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 82, 255, 0.12);
}

.ac-icon {
    width: 50px;
    height: 50px;
    background: #0052FF;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.ac-text { display: flex; flex-direction: column; }
.ac-label { font-size: 13px; color: rgba(29, 29, 31, 0.5); margin-bottom: 4px; text-transform: uppercase; }
.ac-label strong { color: #0052FF; }
.ac-addr { font-size: 15px; font-weight: 700; color: #1d1d1f; line-height: 1.4; }

/* --- ПРАВАЯ ЧАСТЬ (3D IMAGE) - ИСПРАВЛЕННАЯ --- */
.th-visual {
    flex: 1;
    position: relative;
    height: 600px; /* Фиксируем высоту для контейнера 3D */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Включаем перспективу на родителе - ЭТО ВАЖНО для правильного 3D */
    perspective: 2000px; 
}

.th-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f0f0f5 0%, #eaeaec 100%);
    border-radius: 40px;
    position: relative;
    /* Исправленный 3D поворот: */
    /* Меньший угол (-8deg) чтобы не выглядело криво */
    transform: rotateY(-8deg) rotateX(2deg); 
    transform-style: preserve-3d; /* Сохраняем объем */
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 30px 20px 60px rgba(0, 0, 0, 0.1); /* Тень идет вправо-вниз */
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* При наведении выравниваем */
.th-wrapper:hover .th-image-placeholder {
    transform: rotateY(0deg) rotateX(0deg) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 82, 255, 0.15);
}

/* Оверлей внутри картинки */
.th-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.3), transparent 50%);
    border-radius: 40px;
}

/* Бэджик */
.th-badge {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background: #ffffff;
    padding: 10px 24px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: #1d1d1f;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    /* Выдвигаем бэджик чуть вперед в 3D пространстве */
    transform: translateZ(30px); 
}

/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991px) {
    .trading-house-section .container {
        padding: 0 25px; /* Уменьшаем боковые отступы на планшетах */
    }

    .th-wrapper {
        flex-direction: column;
        gap: 50px;
    }

    .th-content {
        width: 100%;
        padding-right: 0;
        text-align: center;
    }

    .th-features li {
        justify-content: center;
        text-align: left;
    }

    .address-card {
        margin: 0 auto;
        text-align: left;
    }

    .th-visual {
        width: 100%;
        height: 400px;
        perspective: none; /* Отключаем 3D на мобилке */
    }

    .th-image-placeholder {
        transform: none !important; /* Прямая картинка */
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }
}












/* --- GRID SYSTEM (BENTO PREMIUM FIXED) --- */
.resources-grid-section {
    padding: 0 0 140px;
    background: #ffffff;
    overflow: hidden;
}

.resources-grid-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

.section-title.center {
    text-align: center;
    margin-bottom: 60px;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    letter-spacing: -1px;
}

/* СЕТКА */
.res-grid {
    display: grid;
    /* 3 равные колонки */
    grid-template-columns: repeat(3, 1fr);
    /* Ряды подстраиваются под контент, но не меньше 340px */
    grid-auto-rows: minmax(340px, auto); 
    gap: 30px;
}

/* --- КАРТОЧКА (BASE) --- */
.res-card {
    background: #fbfbfd;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 32px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    /* Это растягивает контент внутри карточки */
    justify-content: space-between; 
    height: 100%; /* Занимаем всю высоту ячейки */
}

/* Ховер */
.res-card:hover {
    background: #ffffff;
    border-color: rgba(0, 82, 255, 0.3);
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 30px 60px rgba(0, 82, 255, 0.12), 
                0 0 0 1px rgba(0, 82, 255, 0.05);
    z-index: 10;
}

/* Размеры (Оставляем только Wide для логистики) */
.res-card.wide { grid-column: span 2; }
/* .tall убрали, чтобы сетка сама решала высоту */

/* Типографика */
.res-number {
    font-size: clamp(48px, 4vw, 72px);
    font-weight: 900;
    background: linear-gradient(135deg, #1d1d1f 30%, #0052FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    line-height: 1;
    transition: 0.4s ease;
}

.res-number .unit {
    font-size: 0.4em;
    color: #1d1d1f;
    -webkit-text-fill-color: #1d1d1f;
    font-weight: 700;
    margin-left: 5px;
}

.res-card h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #1d1d1f;
    transition: 0.3s;
}

.res-card p {
    font-size: 16px;
    color: rgba(29, 29, 31, 0.6);
    line-height: 1.6;
    font-weight: 500;
}

/* --- МАЛЕНЬКИЕ КАРТОЧКИ (ПАРКИ и ОФИСЫ) --- */
/* Магия центровки: делаем контент по центру, если карточка простая */
.res-card.simple {
    justify-content: center; /* Центр по вертикали */
    align-items: flex-start; /* Текст слева */
    min-height: 100%; /* Растягиваемся на высоту соседа */
}

/* Декоративный элемент для простых карточек, чтобы не были пустыми */
.res-card.simple::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(0,82,255,0.03) 0%, transparent 70%);
    border-radius: 50%;
    transition: 0.5s;
}
.res-card.simple:hover::after {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0,82,255,0.08) 0%, transparent 70%);
}

/* --- КАРТОЧКА КАНАЛЫ (CHANNELS) --- */
.channel-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    flex-grow: 1; /* Список занимает доступное место */
}

.channel-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    font-weight: 600;
    color: #1d1d1f;
}

.dot {
    width: 8px;
    height: 8px;
    background: #e5e5ea;
    border-radius: 50%;
    transition: 0.4s;
}

/* Бегущий огонь по точкам при ховере */
.res-card:hover .channel-list li:nth-child(1) .dot { background: #0052FF; box-shadow: 0 0 10px #0052FF; transition-delay: 0.05s; }
.res-card:hover .channel-list li:nth-child(2) .dot { background: #0052FF; box-shadow: 0 0 10px #0052FF; transition-delay: 0.1s; }
.res-card:hover .channel-list li:nth-child(3) .dot { background: #0052FF; box-shadow: 0 0 10px #0052FF; transition-delay: 0.15s; }
.res-card:hover .channel-list li:nth-child(4) .dot { background: #0052FF; box-shadow: 0 0 10px #0052FF; transition-delay: 0.2s; }

/* График */
.channels-visual {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    align-items: flex-end;
    height: 100px;
}

.bar {
    flex: 1;
    background: #f0f0f5;
    border-radius: 8px 8px 0 0;
    height: 20%;
    transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.res-card:hover .bar-1 { height: 50%; background: #0052FF; }
.res-card:hover .bar-2 { height: 75%; background: #0085FF; }
.res-card:hover .bar-3 { height: 100%; background: #00C2FF; }

/* --- ЛОГИСТИКА (WIDE) --- */
.res-content.row-layout {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    height: 100%;
}
.log-item { text-align: center; }
.divider-vertical {
    width: 1px;
    height: 80px;
    background: rgba(0,0,0,0.08);
    transition: 0.4s;
}
.res-card:hover .divider-vertical { background: #0052FF; height: 100px; box-shadow: 0 0 15px rgba(0,82,255,0.5); }

/* --- ЭКСПЕРТЫ (ФОН) --- */
.res-bg-icon {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 180px;
    height: 180px;
    color: #f0f0f5;
    transform: rotate(-20deg);
    transition: 0.6s;
    z-index: 0;
}
.res-card:hover .res-bg-icon { color: rgba(0,82,255,0.08); transform: rotate(10deg) scale(1.1); }
.res-content { position: relative; z-index: 1; }

/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991px) {
    .resources-grid-section .container { padding: 0 25px; }
    .res-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 20px; }
    .res-card { min-height: auto; }
    .res-card.wide { grid-column: span 1; }
    .res-content.row-layout { grid-template-columns: 1fr; gap: 30px; }
    .divider-vertical { width: 100%; height: 1px; }
    .res-card:hover .divider-vertical { width: 100%; height: 2px; }
    .channels-visual { display: none; }
}






































/* --- HERO SECTION (INDUSTRIES PREMIUM) --- */
.ind-hero {
    position: relative;
    /* Увеличил отступы, чтобы было больше воздуха для огромного текста */
    padding: 200px 0 120px; 
    background: #ffffff;
    overflow: hidden;
    text-align: center;
}

.ind-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Плавающие пузыри на фоне */
.ind-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px); /* Сделал блюр мягче (100px) */
    opacity: 0.6;
    animation: blobFloat 10s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.blob-1 { width: 700px; height: 700px; background: rgba(0, 82, 255, 0.08); top: -300px; left: -100px; }
.blob-2 { width: 600px; height: 600px; background: rgba(0, 255, 194, 0.06); bottom: -200px; right: -100px; animation-delay: -5s; }

@keyframes blobFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, 40px) scale(1.1); }
}

.ind-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px; /* Сделал шире для большого текста */
    margin: 0 auto;
    opacity: 0;
    animation: fadeInUp 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

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

/* --- ТИПОГРАФИКА HERO (PREMIUM) --- */

/* 1. ЛЕЙБЛ (Pill Shape) */
.hero-label {
    display: inline-block;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #0052FF;
    margin-bottom: 30px;
    /* Дорогой стиль плашки */
    background: rgba(0, 82, 255, 0.05);
    padding: 12px 28px;
    border-radius: 100px;
    border: 1px solid rgba(0, 82, 255, 0.1);
}

/* 2. ОГРОМНЫЙ ЗАГОЛОВОК */
.ind-hero-content h1 {
    font-size: clamp(50px, 7vw, 96px); /* Очень крупный шрифт */
    font-weight: 900;
    line-height: 1.05;
    color: #1d1d1f;
    letter-spacing: -2px;
    margin-bottom: 30px;
}

/* 3. ГРАДИЕНТНЫЙ ПЕРЕЛИВ (SHIMMER) */
.ind-hero-content h1 .text-gradient {
    /* Градиент: Темный -> Синий -> Темный */
    background: linear-gradient(90deg, #1d1d1f 0%, #0052FF 50%, #1d1d1f 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Анимация блеска */
    animation: textShimmer 6s linear infinite;
}

@keyframes textShimmer {
    to { background-position: 200% center; }
}

/* 4. ПОДЗАГОЛОВОК */
.hero-lead {
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 1.6;
    color: rgba(29, 29, 31, 0.65);
    max-width: 700px;
    margin: 0 auto 50px;
    font-weight: 500;
}

/* Кнопки по центру */
.hero-btns {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Адаптив */
@media (max-width: 991px) {
    .ind-hero {
        padding: 140px 0 80px;
    }
    .ind-hero-content {
        padding: 0 20px;
    }
}

/* --- INDUSTRIES GRID (СЕТКА) --- */
.industries-section {
    padding: 0 0 120px;
    background: #ffffff;
}

.industries-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px; /* Отступы с краев */
}

/* Flex-wrapper для умной сетки */
.ind-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Центрируем карточки (важно для последнего ряда) */
    gap: 30px;
}

/* Карточка отрасли */
.ind-card {
    /* Расчет ширины: (100% - 2 отступа по 30px) / 3 */
    flex: 0 1 calc(33.333% - 20px); 
    min-width: 320px; /* Чтобы не сжимались слишком сильно */
    
    background: #fbfbfd;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 30px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Ховер карточки */
.ind-card:hover {
    background: #ffffff;
    transform: translateY(-12px);
    box-shadow: 0 25px 60px rgba(0, 82, 255, 0.12);
    border-color: rgba(0, 82, 255, 0.3);
}

/* Иконка */
.ind-icon-box {
    width: 60px;
    height: 60px;
    background: #ffffff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d1d1f;
    margin-bottom: 25px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: 0.4s;
    border: 1px solid rgba(0,0,0,0.05);
}

.ind-icon-box svg { width: 32px; height: 32px; }

.ind-card:hover .ind-icon-box {
    background: #0052FF;
    color: #ffffff;
    transform: rotate(-10deg) scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 82, 255, 0.3);
}

/* Текст карточки */
.ind-card h3 {
    font-size: 20px;
    font-weight: 800;
    color: #1d1d1f;
    margin-bottom: 12px;
}

.ind-card p {
    font-size: 15px;
    color: rgba(29, 29, 31, 0.6);
    line-height: 1.5;
    margin-bottom: 30px;
    flex-grow: 1; /* Прижимает стрелку вниз */
}

/* Стрелочка внизу */
.ind-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d1d1f;
    transition: 0.3s;
    font-weight: 700;
}

.ind-card:hover .ind-arrow {
    background: #1d1d1f;
    color: #ffffff;
    border-color: #1d1d1f;
    transform: translateX(10px);
}

/* --- REQUIREMENTS SECTION (ТРЕБОВАНИЯ) --- */
.req-section {
    padding: 80px 0 140px;
    background: #ffffff;
}

.req-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

.req-header {
    margin-bottom: 60px;
    max-width: 700px;
}
.req-header h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    color: #1d1d1f;
    margin-bottom: 20px;
}
.req-header p {
    font-size: 18px;
    color: rgba(29, 29, 31, 0.6);
}

/* Сетка требований */
.req-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.req-item {
    background: #fbfbfd;
    padding: 30px 20px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid transparent;
    transition: 0.4s;
}

.req-item:hover {
    background: #ffffff;
    border-color: rgba(0, 82, 255, 0.2);
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    transform: translateY(-5px);
}

.req-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    color: #0052FF;
    background: rgba(0, 82, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s;
}

.req-item:hover .req-icon {
    background: #0052FF;
    color: #ffffff;
    transform: scale(1.1);
}

.req-icon svg { width: 28px; height: 28px; }

.req-item h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
}

/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 1100px) {
    /* На планшетах делаем 2 колонки */
    .ind-card {
        flex: 0 1 calc(50% - 15px);
    }
    
    .req-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .industries-section .container,
    .req-section .container {
        padding: 0 25px;
    }

    /* На мобилках 1 колонка */
    .ind-card {
        flex: 0 1 100%;
    }
    
    .req-grid {
        grid-template-columns: 1fr;
    }
    
    .req-item {
        display: flex;
        align-items: center;
        text-align: left;
        padding: 20px;
        gap: 20px;
    }
    
    .req-icon {
        margin: 0;
        width: 50px;
        height: 50px;
        flex-shrink: 0;
    }
}






































/* --- HERO SECTION (PROCESS) --- */
.process-hero {
    position: relative;
    padding: 200px 0 120px;
    background: #ffffff;
    overflow: hidden;
    text-align: center;
}

/* Энергетические волны на фоне */
.energy-wave {
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 82, 255, 0.03) 0%, transparent 60%);
    border-radius: 40%;
    animation: waveRotate 15s infinite linear;
    z-index: 0;
}
.wave-1 { top: -90%; left: -50%; animation-duration: 20s; }
.wave-2 { bottom: -90%; right: -50%; background: radial-gradient(circle, rgba(0, 255, 194, 0.03) 0%, transparent 60%); animation-direction: reverse; }

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

.process-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    animation: fadeInUp 1s ease forwards;
}

.process-hero-content h1 {
    font-size: clamp(50px, 7vw, 96px);
    font-weight: 900;
    line-height: 1.05;
    color: #1d1d1f;
    letter-spacing: -2px;
    margin-bottom: 30px;
}

.process-hero-content .text-gradient {
    background: linear-gradient(90deg, #1d1d1f 0%, #0052FF 50%, #1d1d1f 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 6s linear infinite;
}

/* --- TIMELINE SECTION (SUPER SEXY) --- */
.timeline-section {
    padding: 0 0 160px;
    background: #ffffff;
    overflow: hidden;
}

.timeline-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
}

.timeline-wrapper {
    position: relative;
    padding: 60px 0;
}

/* Центральная линия */
.timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: rgba(0, 0, 0, 0.05);
    transform: translateX(-50%);
    border-radius: 4px;
    /* Градиент заполнения (можно анимировать JS-ом при скролле, но пока статика) */
    background: linear-gradient(to bottom, #0052FF 0%, rgba(0,82,255,0.1) 100%);
}

/* Обертка шага */
.timeline-item {
    position: relative;
    width: 50%; /* Занимает половину экрана */
    padding: 40px;
    box-sizing: border-box;
}

/* Зиг-заг расстановка */
.timeline-item.left { left: 0; text-align: right; }
.timeline-item.right { left: 50%; text-align: left; }

/* Маркер на линии (Точка) */
.timeline-marker {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 4px solid #0052FF;
    border-radius: 50%;
    z-index: 2;
    transition: 0.4s;
    box-shadow: 0 0 0 4px rgba(0, 82, 255, 0.1);
}

.timeline-item.left .timeline-marker { right: -12px; } /* Позиция для левых */
.timeline-item.right .timeline-marker { left: -12px; } /* Позиция для правых */

/* Эффект при наведении на карточку - загорается точка */
.timeline-item:hover .timeline-marker {
    background: #0052FF;
    box-shadow: 0 0 20px #0052FF, 0 0 40px rgba(0, 82, 255, 0.5);
    transform: scale(1.3);
}

/* --- СТЕКЛЯННАЯ КАРТОЧКА ШАГА --- */
.timeline-card {
    background: #fbfbfd;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 30px;
    padding: 40px;
    position: relative;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    /* 3D настройки */
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Тень и подъем при наведении */
.timeline-card:hover {
    background: #ffffff;
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 82, 255, 0.15);
    border-color: rgba(0, 82, 255, 0.3);
    z-index: 10;
}

/* Фоновое неоновое пятно внутри карточки */
.card-glow-bg {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 82, 255, 0.1) 0%, transparent 70%);
    filter: blur(60px);
    transition: 0.6s;
    opacity: 0;
}
.timeline-card:hover .card-glow-bg {
    opacity: 1;
    transform: translate(-20px, 20px);
}

/* ОГРОМНЫЙ НОМЕР */
.step-number {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    color: rgba(0, 0, 0, 0.03); /* Почти прозрачный */
    transition: 0.5s;
    z-index: 0;
}

/* Номер загорается при ховере */
.timeline-card:hover .step-number {
    color: transparent;
    -webkit-text-stroke: 2px rgba(0, 82, 255, 0.2); /* Контур */
    transform: scale(1.1) rotate(-5deg);
    text-shadow: 0 0 30px rgba(0, 82, 255, 0.1);
}

/* Контент */
.step-content {
    position: relative;
    z-index: 2;
}

.timeline-card h3 {
    font-size: 24px;
    font-weight: 800;
    color: #1d1d1f;
    margin-bottom: 15px;
}

.timeline-card p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(29, 29, 31, 0.7);
}

/* Разные цвета для ховеров четных/нечетных (для разнообразия) */
.timeline-item.right .timeline-card:hover {
    box-shadow: 0 30px 60px rgba(0, 255, 194, 0.15);
    border-color: rgba(0, 255, 194, 0.4);
}
.timeline-item.right .timeline-card:hover .step-number {
    -webkit-text-stroke: 2px rgba(0, 255, 194, 0.3);
}
.timeline-item.right .timeline-marker {
    border-color: #00FFC2;
}
.timeline-item.right:hover .timeline-marker {
    background: #00FFC2;
    box-shadow: 0 0 20px #00FFC2;
}

/* --- АДАПТИВНОСТЬ (MOBILE REVOLUTION) --- */
@media (max-width: 991px) {
    .timeline-section .container { padding: 0 25px; }
    
    /* Убираем центральную линию влево */
    .timeline-line {
        left: 25px; 
    }
    
    /* Делаем все блоки на всю ширину и сдвигаем вправо от линии */
    .timeline-item {
        width: 100%;
        padding-left: 60px; /* Отступ от линии слева */
        padding-right: 0;
        text-align: left; /* Все тексты слева */
        margin-bottom: 20px;
    }
    
    .timeline-item.left, .timeline-item.right {
        left: 0;
    }
    
    /* Маркеры ставим на линию слева */
    .timeline-marker {
        left: 15px !important; /* Центрируем на линии (25px - 10px половина маркера) */
        right: auto !important;
    }
    
    /* Номер делаем меньше */
    .step-number {
        font-size: 60px;
        top: 20px;
    }
    
    .timeline-card {
        padding: 30px 25px;
    }
}
























/* --- HERO SECTION (ABOUT - ORBITAL) --- */
.about-hero {
    position: relative;
    padding: 220px 0 140px;
    background: #ffffff;
    overflow: hidden;
    text-align: center;
}

.about-hero-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    pointer-events: none;
}

/* ОРБИТЫ */
.orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 82, 255, 0.08);
    transform: rotateX(60deg) rotateY(0deg);
    animation: orbitSpin 20s infinite linear;
}

.orbit-1 { width: 600px; height: 600px; border-color: rgba(0, 82, 255, 0.1); animation-duration: 30s; }
.orbit-2 { width: 900px; height: 900px; animation-duration: 45s; animation-direction: reverse; border-style: dashed; }
.orbit-3 { width: 1200px; height: 1200px; border-color: rgba(0, 255, 194, 0.05); animation-duration: 60s; }

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

.about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    animation: fadeInUp 1s ease forwards;
}

.about-hero-content h1 {
    font-size: clamp(50px, 7vw, 96px);
    font-weight: 900;
    line-height: 1.05;
    color: #1d1d1f;
    letter-spacing: -2px;
    margin-bottom: 30px;
}

/* --- IDENTITY & MISSION (SPLIT BLOCK) --- */
.identity-section {
    padding: 100px 0;
    background: #ffffff;
}

.identity-section .container {
    max-width: 1400px;
    padding: 0 60px;
    margin: 0 auto;
}

.identity-wrapper {
    display: flex;
    align-items: stretch; /* Одинаковая высота блоков */
    gap: 60px;
}

.id-block {
    flex: 1;
    border-radius: 40px;
    padding: 60px;
}

/* ЛЕВАЯ ЧАСТЬ (ТЕКСТ) */
.text-block {
    background: #ffffff;
    padding-left: 0; /* Убираем паддинг слева для выравнивания */
}

.text-block h2 {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    color: #1d1d1f;
    margin-bottom: 30px;
    line-height: 1.1;
}

.id-text p {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(29, 29, 31, 0.7);
    margin-bottom: 20px;
}

.id-text strong { color: #0052FF; }

/* ПРАВАЯ ЧАСТЬ (МИССИЯ - АКЦЕНТ) */
.mission-block {
    background: #1d1d1f; /* Темный контрастный блок */
    color: #ffffff;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}

/* Светящийся фон миссии */
.mission-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 82, 255, 0.2) 0%, transparent 60%);
    animation: pulseGlow 5s infinite alternate;
}

@keyframes pulseGlow {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.1); opacity: 0.8; }
}

.mission-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.mission-icon {
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    color: #0052FF;
}
.mission-icon svg { width: 40px; height: 40px; }

.mission-block h3 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mission-block p {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255,255,255,0.8);
}

/* --- VALUES (MONOLITHS) --- */
.values-section {
    padding: 100px 0 160px;
    background: #ffffff;
}

.values-section .container {
    max-width: 1400px;
    padding: 0 60px;
    margin: 0 auto;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* КАРТОЧКА ЦЕННОСТИ (МОНОЛИТ) */
.value-card {
    position: relative;
    background: #fbfbfd;
    border-radius: 30px;
    padding: 40px 25px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(0,0,0,0.03);
    text-align: center;
    cursor: default;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Фон, который заливается цветом при ховере */
.v-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0052FF 0%, #001f60 100%);
    opacity: 0;
    transition: 0.5s ease;
    z-index: 0;
}

/* Ховер эффект: карточка темнеет, текст белеет */
.value-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 50px rgba(0, 82, 255, 0.2);
    border-color: transparent;
}

.value-card:hover .v-bg { opacity: 1; }

.v-icon {
    position: relative;
    z-index: 2;
    width: 70px;
    height: 70px;
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d1d1f;
    margin-bottom: 30px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: 0.5s;
}

.value-card:hover .v-icon {
    transform: scale(1.1) rotate(360deg);
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    backdrop-filter: blur(10px);
}

.value-card h3 {
    position: relative;
    z-index: 2;
    font-size: 20px;
    font-weight: 800;
    color: #1d1d1f;
    margin-bottom: 15px;
    transition: 0.3s;
    line-height: 1.3;
}

.value-card p {
    position: relative;
    z-index: 2;
    font-size: 15px;
    color: rgba(29,29,31,0.6);
    line-height: 1.5;
    transition: 0.3s;
}

/* Меняем цвет текста на белый при ховере */
.value-card:hover h3, 
.value-card:hover p {
    color: #ffffff;
}

.value-card:hover p { opacity: 0.8; }

/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 1200px) {
    .values-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}

@media (max-width: 991px) {
    .about-hero { padding: 140px 0 80px; }
    
    .identity-section .container,
    .values-section .container { padding: 0 25px; }

    .identity-wrapper { flex-direction: column; gap: 40px; }
    .id-block { padding: 40px 30px; }
    .text-block { padding: 0; text-align: center; }
    .mission-block { text-align: center; }

    .values-grid { grid-template-columns: 1fr; }
    
    /* Орбиты на мобилке чуть меньше */
    .orbit-1 { width: 300px; height: 300px; }
    .orbit-2 { width: 500px; height: 500px; }
    .orbit-3 { display: none; }
}











/* --- СТИЛИ ДЛЯ ИНТЕРАКТИВНОГО КУКСОРА (GLOW) --- */
.cta-cursor-glow {
    position: absolute;
    /* Если JS не передал координаты, прячем круг далеко */
    top: var(--y, -1000px); 
    left: var(--x, -1000px);
    
    width: 600px;
    height: 600px;
    /* Цвет свечения: Синий с прозрачностью */
    background: radial-gradient(circle, rgba(0, 82, 255, 0.15) 0%, transparent 60%);
    
    /* Центрируем круг относительно курсора */
    transform: translate(-50%, -50%); 
    
    /* Слой: выше фона, но ниже текста */
    z-index: 2; 
    pointer-events: none; /* Чтобы мышка сквозь него кликала на кнопки */
    
    /* Плавность появления, но НЕ движения (иначе будет лагать за мышкой) */
    transition: opacity 0.3s; 
    
    /* Режим наложения для красивого свечения */
    mix-blend-mode: overlay; 
}

/* Убедимся, что контейнер готов к позиционированию */
#cta-interactive {
    position: relative;
    overflow: hidden; /* Чтобы круг не вылезал за границы блока */
}




























/* --- CONTACTS PAGE (PREMIUM) --- */
.contacts-section {
    position: relative;
    padding: 180px 0 140px;
    background: #ffffff;
    overflow: hidden;
}

.contacts-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

/* Фон (пузыри) */
.contacts-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.c-blob-1 {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(0, 82, 255, 0.06) 0%, transparent 70%);
    filter: blur(100px);
}
.c-blob-2 {
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 255, 194, 0.05) 0%, transparent 70%);
    filter: blur(80px);
}

/* Обертка (Сплит) */
.contacts-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 80px;
}

/* --- ЛЕВАЯ КОЛОНКА (INFO) --- */
.contacts-info {
    flex: 1;
    max-width: 600px;
    padding-top: 20px;
}

.contacts-title {
    font-size: clamp(48px, 5vw, 72px);
    font-weight: 900;
    line-height: 1;
    color: #1d1d1f;
    letter-spacing: -2px;
    margin-bottom: 20px;
}

.contacts-subtitle {
    font-size: 18px;
    color: rgba(29, 29, 31, 0.7);
    line-height: 1.6;
    margin-bottom: 50px;
    max-width: 450px;
}

/* Контактные данные */
.contact-details {
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.cd-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cd-icon {
    width: 50px;
    height: 50px;
    background: #fbfbfd;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0052FF;
    border: 1px solid rgba(0,0,0,0.05);
}
.cd-icon svg { width: 24px; height: 24px; }

.cd-text {
    display: flex;
    flex-direction: column;
}

.cd-label {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(0,0,0,0.4);
    margin-bottom: 4px;
}

.cd-text a, .cd-text span {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    text-decoration: none;
    transition: 0.3s;
}

.cd-text a:hover { color: #0052FF; }

/* БЫСТРЫЕ КАРТОЧКИ (QUICK ACTIONS) */
.quick-actions h3 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 25px;
}

.qa-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.qa-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.qa-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 82, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 82, 255, 0.1);
}

.qa-icon {
    width: 40px;
    height: 40px;
    background: rgba(0, 82, 255, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0052FF;
    transition: 0.3s;
}

.qa-card:hover .qa-icon {
    background: #0052FF;
    color: #ffffff;
}

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

.qa-card span {
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
    line-height: 1.3;
}

/* --- ПРАВАЯ КОЛОНКА (FORM) --- */
.contacts-form-wrap {
    flex: 1;
    max-width: 600px;
}

.main-form {
    background: #ffffff;
    padding: 50px;
    border-radius: 40px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.08); /* Глубокая тень */
    border: 1px solid rgba(0,0,0,0.03);
    position: relative;
    /* Анимация появления */
    animation: fadeInUp 1s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(30px);
}

.form-header h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 30px;
}

/* Поля */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.form-group label {
    font-size: 13px;
    font-weight: 700;
    color: rgba(0,0,0,0.5);
    margin-bottom: 8px;
    margin-left: 10px; /* Выравнивание по скруглению */
}

.main-form input,
.main-form select {
    width: 100%;
    background: #fbfbfd;
    border: 2px solid transparent; /* Для будущего фокуса */
    border-radius: 16px;
    padding: 18px 20px;
    font-size: 16px;
    font-weight: 500;
    color: #1d1d1f;
    transition: 0.3s ease;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);
}

.main-form input:focus,
.main-form select:focus {
    background: #ffffff;
    border-color: #0052FF;
    box-shadow: 0 10px 30px rgba(0, 82, 255, 0.1);
    transform: translateY(-2px);
}

/* Кастомная стрелка для селекта */
.custom-select-wrapper { position: relative; }
.main-form select { appearance: none; cursor: pointer; }
.select-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #0052FF;
    pointer-events: none;
}

/* Кнопка на всю ширину */
.btn-ultra.full-width {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.form-note {
    font-size: 12px;
    color: rgba(0,0,0,0.4);
    text-align: center;
    margin-top: 20px;
}

/* --- АДАПТИВНОСТЬ --- */
@media (max-width: 991px) {
    .contacts-section { padding: 120px 0 80px; }
    .contacts-section .container { padding: 0 25px; }
    
    .contacts-wrapper {
        flex-direction: column; /* Вертикально */
        gap: 60px;
    }
    
    .contacts-info { max-width: 100%; }
    
    /* Форма на мобилке */
    .contacts-form-wrap { max-width: 100%; }
    .main-form { padding: 30px 25px; }
    .form-row { flex-direction: column; gap: 0; }
    
    .qa-grid {
        grid-template-columns: 1fr; /* Одна колонка для кнопок */
    }
}


























/* --- CASES GRID SYSTEM --- */
.cases-hero {
    padding: 180px 0 80px;
    text-align: center;
    background: #ffffff;
}

.cases-grid-section {
    padding: 0 0 140px;
    background: #ffffff;
}

.cases-grid-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 колонки для мощи */
    gap: 30px;
}

/* КАРТОЧКА КЕЙСА */
.case-item {
    height: 550px;
    border-radius: 40px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    perspective: 1000px;
}

.case-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.case-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.case-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.8) 100%);
    transition: background 0.5s ease;
}

/* КОНТЕНТ ВНУТРИ */
.case-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 50px;
    box-sizing: border-box;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.case-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #00C2FF; /* Акцентный голубой */
    margin-bottom: 15px;
    transform: translateY(0);
    transition: 0.5s ease;
}

.case-location svg { width: 16px; height: 16px; }

.case-title {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    margin: 0;
    transition: 0.5s ease;
}

/* СКРЫТАЯ ЧАСТЬ */
.case-info-hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: translateY(20px);
}

.case-description {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    margin: 20px 0 30px;
}

/* Кнопка внутри карточки */
.btn-ultra.mini {
    padding: 12px 30px;
    font-size: 14px;
}

/* --- HOVER EFFECTS (МАГИЯ) --- */
.case-item:hover .case-image {
    transform: scale(1.1);
}

.case-item:hover .case-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.9) 100%);
}

.case-item:hover .case-info-hidden {
    max-height: 300px;
    opacity: 1;
    transform: translateY(0);
}

/* Поднимаем заголовок при ховере */
.case-item:hover .case-content {
    transform: translateY(-20px);
}

/* АДАПТИВНОСТЬ */
@media (max-width: 1100px) {
    .cases-grid { grid-template-columns: 1fr; }
    .case-item { height: 450px; }
}

@media (max-width: 991px) {
    .cases-grid-section .container { padding: 0 25px; }
    .case-content { padding: 30px; }
    
    /* На мобилках показываем часть инфы сразу, чтобы было удобно */
    .case-info-hidden {
        max-height: none;
        opacity: 1;
        transform: translateY(0);
        display: block;
    }
    .case-item:hover .case-content { transform: none; }
}