/* ================================================
   ZXY — Движущиеся волны, Светлый Deep Blue (ИСПРАВЛЕННАЯ ВЕРСИЯ)
   ================================================ */

:root { --base-bg: #111827; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; background: var(--base-bg); color: #cbd5e1; }
.bg-base { background-color: var(--base-bg); }

::selection { background: rgba(59, 130, 246, 0.3); color: #fff; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--base-bg); }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.4); border-radius: 3px; }

/* 1. Анимированный МЕШ-ФОН */
.animated-mesh-bg { background-color: var(--base-bg); }
.bg-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; will-change: transform; animation: blob-float 20s ease-in-out infinite alternate; }
.bg-blob--1 { width: 50vw; height: 50vw; background: radial-gradient(circle, rgba(37, 99, 235, 0.4), transparent 70%); top: -15%; left: -10%; animation-duration: 25s; }
.bg-blob--2 { width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(8, 145, 178, 0.3), transparent 70%); bottom: -20%; right: -20%; animation-duration: 30s; animation-delay: -5s; animation-direction: alternate-reverse; }
.bg-blob--3 { width: 40vw; height: 40vw; background: radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent 70%); top: 40%; left: 30%; animation-duration: 22s; animation-delay: -10s; }

@keyframes blob-float {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(50px, -30px) scale(1.1); }
    50% { transform: translate(-20px, 40px) scale(0.95); }
    75% { transform: translate(30px, 20px) scale(1.05); }
    100% { transform: translate(-40px, -10px) scale(1); }
}

/* 2. ДВИЖУЩИЕСЯ ВОЛНЫ (ИСПРАВЛЕНО) */
/* Важно: у родительского блока в HTML должно быть: position: relative; overflow: hidden; */
.infinite-ocean { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 35vh; 
    z-index: 1; 
    pointer-events: none; 
    overflow: hidden; 
}

.ocean-layer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 200%; 
    height: 100%; 
    display: flex; 
    font-size: 0;       /* ИСПРАВЛЕНИЕ: Убирает невидимые отступы между SVG */
    line-height: 0;     /* ИСПРАВЛЕНИЕ: Убирает отступы снизу строчных элементов */
}

.ocean-layer svg { 
    width: 100%; 
    height: 100%; 
    flex-shrink: 0; 
    display: block;     /* ИСПРАВЛЕНИЕ: Гарантирует, что SVG ведут себя как блоки, без лишних пробелов */
    min-height: 100%;   /* ИСПРАВЛЕНИЕ: Принудительно растягивает волну по высоте контейнера */
}

.ocean-layer--1 { animation: wave-slide 30s linear infinite; bottom: 3vh; opacity: 0.6; }
.ocean-layer--2 { animation: wave-slide 25s linear infinite reverse; bottom: 4vh; opacity: 0.8;}
.ocean-layer--3 { animation: wave-slide 20s linear infinite; bottom: 5vh; opacity: 1;}

@keyframes wave-slide { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); } 
}

/* 3. ПУЗЫРЬКИ КУРСОРА */
.cursor-bubble { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(147, 197, 253, 0.2) 40%, transparent 70%); border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.4); pointer-events: none; will-change: transform, opacity; animation: bubble-rise ease-out forwards; }
@keyframes bubble-rise { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.9; } 100% { transform: translateY(-180px) translateX(var(--drift-x, 20px)) scale(0.2); opacity: 0; } }

/* 4. НАВИГАЦИЯ */
.nav-scrolled .nav-inner { background: rgba(17, 24, 39, 0.9) !important; border-color: rgba(51, 65, 85, 0.6) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; }
.nav-link { position: relative; transition: all 0.3s ease; }
.nav-link::after { content: ''; position: absolute; bottom: 4px; left: 50%; width: 0; height: 2px; background: linear-gradient(90deg, #3b82f6, #22d3ee); border-radius: 1px; transition: all 0.3s ease; transform: translateX(-50%); }
.nav-link:hover::after, .nav-link.active::after { width: 60%; }
.nav-link.active { color: #fff; }

/* 5. КАРТОЧКИ */
.service-card { position: relative; overflow: hidden; }
.service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0), transparent); transition: background 0.5s ease; }
.service-card:hover::before { background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), transparent); }

/* 6. АНИМАЦИИ */
@keyframes fade-in-up { from { opacity: 0; transform: translateY(30px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.animate-fade-in-up { animation: fade-in-up 1s ease-out both; }
.animation-delay-100 { animation-delay: 100ms; } .animation-delay-200 { animation-delay: 200ms; } .animation-delay-300 { animation-delay: 300ms; }

.scroll-animate { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease; filter: blur(6px); }
.scroll-animate.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }

#submitBtn:not(:disabled) { animation: btn-glow 3s ease-in-out infinite; }
@keyframes btn-glow { 0%, 100% { box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3); } 50% { box-shadow: 0 10px 40px rgba(37, 99, 235, 0.5); } }
#submitBtn:hover:not(:disabled) { animation: none; box-shadow: 0 15px 40px rgba(37, 99, 235, 0.5); }
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* 7. АДАПТИВНОСТЬ */
@media (max-width: 768px) {
    .infinite-ocean { height: 25vh; }
    .bg-blob { filter: blur(60px); opacity: 0.3; }
    #bubbles-container { display: none; }
    .scroll-animate { opacity: 1; transform: none; filter: none; transition: none; }
    .animate-fade-in-up { animation: none; opacity: 1; transform: none; filter: none; }
    #submitBtn:not(:disabled) { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .scroll-animate { opacity: 1; transform: none; filter: none; }
    #bubbles-container { display: none; }
}