/* ═══ HERO GRADIENT ═══ */
.hero-gradient {
    background: linear-gradient(135deg, #0B2545 0%, #13476B 40%, #1B998B 100%);
}

/* ═══ HERO CTA BACKGROUND ═══ */
.cta-bg {
    background: radial-gradient(ellipse 80% 60% at 50% 50%, #0F2E52 0%, #0B2545 40%, #060E1A 100%);
}

/* Floating orb animations */
.cta-orb-float {
    animation: orbFloat 12s ease-in-out infinite;
}
.cta-orb-float-reverse {
    animation: orbFloat 15s ease-in-out infinite reverse;
}
@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(30px, -20px); }
    66% { transform: translate(-20px, 15px); }
}

/* ═══ HERO SHAPES (subtle floating elements) ═══ */
.hero-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(46, 196, 182, 0.06);
    filter: blur(40px);
}
.shape-1 {
    width: 600px; height: 600px;
    top: -200px; right: -100px;
    animation: float 20s ease-in-out infinite;
}
.shape-2 {
    width: 400px; height: 400px;
    bottom: -100px; left: -50px;
    animation: float 25s ease-in-out infinite reverse;
}
.shape-3 {
    width: 300px; height: 300px;
    top: 40%; right: 10%;
    animation: float 15s ease-in-out infinite 5s;
}

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

/* ═══ NAVBAR ═══ */
#navbar {
    background: transparent;
}
#navbar.scrolled {
    background: rgba(6, 14, 26, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}
#navbar.scrolled .nav-logo-text {
    color: white;
}
/* Keep navbar transparent while over hero video */
#navbar.over-hero {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* ═══ HERO TEXT CROSSFADE ═══ */
.hero-text-fade {
    transition: opacity 0.6s ease;
}

/* ═══ SINKING TEXT ═══ */
.sink-content {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.sink-block.in-view .sink-content {
    opacity: 1;
    transform: translateY(0);
}
.sink-block.past-view .sink-content {
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.6s ease-in,
                transform 0.6s ease-in;
}

/* ═══ SCROLL REVEAL ═══ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }

/* ═══ FAQ ACCORDION ═══ */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.active .faq-content {
    max-height: 300px;
}
.faq-item.active .faq-icon {
    transform: rotate(180deg);
}
.faq-trigger:hover {
    background: #F4F7FA;
}

/* ═══ COUNTER ═══ */
.counter {
    display: inline-block;
    min-width: 2ch;
}

/* ═══ SMOOTH SCROLL ═══ */
html {
    scroll-behavior: smooth;
}

/* ═══ SELECTION ═══ */
::selection {
    background: #2EC4B6;
    color: white;
}

/* ═══ RESPONSIVE TWEAKS ═══ */
@media (max-width: 640px) {
    .hero-shape {
        display: none;
    }
}