/* Шрифти */
@font-face { font-family: 'UAF Sans'; src: url('UAF Sans/UAFSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'UAF Sans'; src: url('UAF Sans/UAFSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'UAF Sans'; src: url('UAF Sans/UAFSans-WideSemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-stretch: expanded; }
@font-face { font-family: 'UAF Sans'; src: url('UAF Sans/UAFSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }

:root {
    --tactical-black: #0B0B0D;
    --engineering-white: #F2F2F2;
    --signal-orange: #FF5A1F;
    --steel-grey: #3A3F44;
    --concrete-grey: #9AA0A6;
    --grid-size: clamp(45px, 8vw, 60px);
}

body {
    margin: 0; padding: 0;
    background-color: var(--tactical-black);
    color: var(--engineering-white);
    font-family: 'UAF Sans', sans-serif;
    overflow: hidden; 
    height: 100dvh; 
}

/* ФОН ТА СІТКА */
.grid-bg {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;
    background-image: linear-gradient(var(--steel-grey) 1px, transparent 1px), linear-gradient(90deg, var(--steel-grey) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    opacity: 0.45; z-index: 1; 
}

.vignette {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;
    background: radial-gradient(circle at center, transparent 10%, var(--tactical-black) 90%);
    z-index: 2; pointer-events: none;
}

#interactiveGrid { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; z-index: 3; pointer-events: none; }

/* ГОЛОВНИЙ КОНТЕЙНЕР */
.main-wrapper {
    position: relative; width: 100%; height: 100dvh; 
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    z-index: 10; 
    padding-bottom: clamp(40px, 8vh, 120px); 
    box-sizing: border-box;
}

/* ШАР ГЕРОЇВ (Збільшено для великих екранів) */
.heroes-layer {
    position: absolute;
    bottom: clamp(18vh, 24vh, 350px); 
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: clamp(300px, 90vw, 1400px); /* Було 1200, стало 1400 */
    height: clamp(300px, 65vh, 900px); /* Було 750, стало 900 */
    z-index: 1; /* ЖОРСТКО ПОЗАДУ ТЕКСТУ */
    pointer-events: none;
}

.aura {
    position: absolute; bottom: -10%; left: 50%; transform: translateX(-50%);
    width: clamp(300px, 100vw, 900px); height: clamp(300px, 100vw, 900px); border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 90, 31, 0.4) 0%, rgba(255, 90, 31, 0.05) 45%, transparent 70%);
    z-index: 1;
}

.hero {
    position: absolute; bottom: 0; height: 100%; width: 52%;
    object-fit: contain; object-position: bottom center; transform-origin: bottom center;
}

.hero-back { left: 60%; transform: translateX(-50%); z-index: 2; filter: brightness(0.85) drop-shadow(0 0 10px rgba(0,0,0,0.5)); }
.hero-front { left: 42%; transform: translateX(-50%); z-index: 3; filter: drop-shadow(0 0 20px rgba(11, 11, 13, 0.8)); }

.hero-bottom-shade {
    position: absolute; bottom: -5px; left: 0; width: 100%; height: clamp(60px, 15vh, 150px);
    background: linear-gradient(to top, var(--tactical-black) 0%, rgba(11, 11, 13, 0.9) 30%, transparent 100%); z-index: 4;
}

/* ШАР ТЕКСТУ ТА ЛОГОТИПІВ */
.content-layer {
    position: relative; 
    z-index: 10; /* ЖОРСТКО ПОПЕРЕДУ ГЕРОЇВ */
    display: flex; flex-direction: column; align-items: center; width: 100%;
}

/* === ДОДАНО ЗАТЕМНЕННЯ ПІД ЛОГОТИПАМИ === */
.logos-section { 
    position: relative; /* Потрібно для позиціонування градієнта */
    display: flex; flex-direction: column; align-items: center; 
    margin-bottom: clamp(2vh, 4vh, 40px); 
}

/* Радіальний градієнт для затемнення фону під логотипами */
.logos-section::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(350px, 150%, 800px); 
    height: 130%; 
    background: radial-gradient(ellipse at center, rgba(11, 11, 13, 0.85) 0%, rgba(11, 11, 13, 0.4) 45%, transparent 75%);
    z-index: -1; /* Ховаємо градієнт під самі картинки логотипів */
    pointer-events: none;
}

.logo-top { max-width: clamp(120px, 20vw, 250px); height: auto; }
.logo-bottom { max-width: clamp(200px, 35vw, 450px); height: auto; }
.transition-text { font-size: clamp(12px, 2vw, 18px); font-weight: 700; margin: clamp(5px, 1vh, 15px) 0; color: var(--engineering-white); }
.orange-arrow { color: var(--signal-orange); font-weight: 900; margin: 0 5px; }

/* ТЕКСТОВІ ФІЧІ */
.features-section {
    display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 3vw, 30px);
    margin-bottom: clamp(1vh, 2vh, 25px); width: 100%;
}
.feature-col { display: flex; flex-direction: column; align-items: center; width: clamp(80px, 18vw, 200px); }
.dot-circle {
    width: clamp(8px, 1vw, 12px); height: clamp(8px, 1vw, 12px); border: 2px solid var(--signal-orange); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin-bottom: clamp(5px, 1vh, 15px);
    box-shadow: 0 0 10px rgba(255, 90, 31, 0.5);
}
.dot-circle::after { content: ''; width: clamp(2px, 0.5vw, 4px); height: clamp(2px, 0.5vw, 4px); background-color: var(--signal-orange); border-radius: 50%; }
.feature-sub { font-size: clamp(10px, 1.5vw, 16px); font-weight: 500; margin-bottom: 5px; }
.feature-main { font-size: clamp(16px, 2.8vw, 32px); font-weight: 700; color: var(--signal-orange); text-transform: uppercase; }
.feature-divider { width: 2px; height: clamp(30px, 6vh, 70px); background-color: rgba(154, 160, 166, 0.3); margin-bottom: 5px; }

/* КНОПКА ТА АКЦЕНТИ */
.action-section { display: flex; flex-direction: column; align-items: center; z-index: 20; }

@keyframes btnBreath { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }

.btn-wrapper {
    position: relative; width: clamp(280px, 40vw, 450px); aspect-ratio: 500 / 100;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 29.17%), calc(100% - 7%) 100%, 0 100%);
    margin-bottom: clamp(5px, 1vh, 15px); animation: btnBreath 2s infinite ease-in-out; 
}

.btn-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.btn-bg { fill: url(#btnGradient); stroke: rgba(255, 255, 255, 0.3); stroke-width: 2; transition: fill 0.3s; }

@keyframes neonPulse {
    0% { filter: drop-shadow(0 0 5px rgba(255, 90, 31, 0.4)); stroke-width: 2px; }
    50% { filter: drop-shadow(0 0 20px rgba(255, 90, 31, 1)); stroke-width: 4px; }
    100% { filter: drop-shadow(0 0 5px rgba(255, 90, 31, 0.4)); stroke-width: 2px; }
}
.neon-corner { fill: none; stroke: var(--signal-orange); animation: neonPulse 2s infinite ease-in-out; }

.btn-content { 
    position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; 
    gap: clamp(10px, 2vw, 20px); width: 100%; box-sizing: border-box;
    font-size: clamp(14px, 2.2vw, 24px); font-weight: 700; pointer-events: none; 
}
.v2-text { color: var(--signal-orange); }
.icon svg { width: clamp(16px, 2.5vw, 24px); height: clamp(16px, 2.5vw, 24px); stroke: var(--signal-orange); }

.btn-wrapper:hover { animation-play-state: paused; transform: scale(1.05); }
.btn-wrapper:hover .btn-bg { fill: url(#btnGradientHover); stroke: rgba(255, 255, 255, 0.6); }
.btn-wrapper:active { transform: scale(0.95); }

@keyframes autoGlint { 0%, 70% { left: -150%; } 100% { left: 150%; } }
.glint { 
    position: absolute; top: 0; left: -150%; width: 100%; height: 100%; 
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.8), transparent); 
    transform: skewX(-25deg); pointer-events: none; z-index: 5; animation: autoGlint 3s infinite ease-in-out; 
}
.footer-text { font-size: clamp(10px, 1.2vw, 14px); color: var(--concrete-grey); letter-spacing: 2px; }

/* ========================================= */
/* АДАПТАЦІЯ ДЛЯ МОБІЛЬНИХ                   */
/* ========================================= */
@media (max-width: 768px) {
    .hero { width: 75%; }
    .hero-back { left: 65%; } 
    .hero-front { left: 35%; }
    
    /* === ПРОПОРЦІЙНЕ ЗБІЛЬШЕННЯ ЛОГОТИПІВ === */
    .logos-section { margin-bottom: 2vh; }
    .logo-top { max-width: 40vw; } /* Збільшено лого */
    .logo-bottom { max-width: 70vw; } /* Збільшено головне лого */
    .transition-text { font-size: 3.5vw; margin: 1vh 0; }

    /* === ПРОПОРЦІЙНЕ ЗБІЛЬШЕННЯ БЛОКУ ФІЧ === */
    .features-section { 
        width: 85vw; /* Загальна ширина чітко як у кнопки */
        gap: 2vw; 
    }
    .feature-col { 
        width: auto; 
        flex: 1; 
    }
    /* Переводимо всі розміри у vw, щоб вони росли як єдиний організм */
    .dot-circle { width: 3.5vw; height: 3.5vw; border-width: 1.5px; margin-bottom: 1vh; }
    .dot-circle::after { width: 1.2vw; height: 1.2vw; }
    .feature-sub { font-size: 2.8vw; margin-bottom: 3px; }
    .feature-main { font-size: 5.5vw; } /* Розмір тексту фіч = розміру тексту кнопки */
    .feature-divider { height: 6vh; }
    /* ========================================= */

    .btn-wrapper { width: 85vw; }
    .btn-content { font-size: 5.5vw; gap: 3vw; padding: 0 6vw; }
    .icon svg { width: 6vw; height: 6vw; }
    .footer-text { font-size: 2.5vw; margin-top: 1vh; }
}


.countdown-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.countdown-dots {
    display: flex;
    gap: 8px;
}

.countdown-dot {
    width: 10px;
    height: 10px;
    border: 1px solid rgba(255, 90, 31, 0.4);
    background: transparent;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    border-radius: 50%; /* ← ось це додай */
}

.countdown-dot.active {
    background: var(--signal-orange);
    box-shadow: 0 0 8px rgba(255, 90, 31, 0.9);
}

.countdown-text {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
}

.countdown-text span {
    color: var(--signal-orange);
    font-weight: 700;
}