/* Enhanced Custom Styles for ExploitUs */

/* Body background */
body {
    background: linear-gradient(180deg,
            #0a192f 12.51%,
            #062e4f 73.75%,
            #053f65 114.4%,
            #026392 157.4%);
    min-height: 100vh;
    scroll-behavior: smooth;
}

.exploitus-description {
    background: color(#18202B);
}

/* Enhanced Header Styles */
#header {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#header.scrolled {
    background: rgba(10, 25, 47, 0.98) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(84, 178, 245, 0.1);
    border-bottom: 1px solid rgba(84, 178, 245, 0.3);
}

/* Enhanced Navigation Links */
.nav-link {
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #54b2f5, #60a5fa);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::before {
    width: 100%;
}

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

/* Mobile Menu Animations */
#mobile-menu {
    transition: all 0.3s ease;
    max-height: 0;
    overflow: hidden;
}

#mobile-menu.open {
    max-height: 300px;
}

.mobile-menu-line {
    transform-origin: center;
    transition: all 0.3s ease;
}

#mobile-menu-toggle.active .mobile-menu-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

#mobile-menu-toggle.active .mobile-menu-line:nth-child(2) {
    opacity: 0;
}

#mobile-menu-toggle.active .mobile-menu-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Enhanced CTA Button */
.cta-button {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.cta-button:hover::before {
    left: 100%;
}

/* Enhanced Logo Animations */
.group:hover img {
    animation: logoFloat 2s ease-in-out infinite;
}

/* Neon CTA Button (sci-fi with side slashes) */
.cta-neon {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, #cfefff 100%);
    color: #0a3d66;
    box-shadow: 0 0 22px rgba(84, 178, 245, 0.45), inset 0 0 18px rgba(84, 178, 245, 0.35);
    border: 1px solid rgba(84, 178, 245, 0.5);
    clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
}

.cta-neon:hover {
    box-shadow: 0 0 28px rgba(84, 178, 245, 0.6), inset 0 0 22px rgba(84, 178, 245, 0.45);
    transform: translateY(-1px);
}

.cta-slash {
    position: absolute;
    top: 50%;
    width: 34px;
    height: 76%;
    transform: translateY(-50%) skewX(-12deg);
    background: linear-gradient(180deg, #e6f7ff 0%, #bde8ff 100%);
    box-shadow: 0 0 20px rgba(84, 178, 245, 0.5);
    filter: blur(0.2px);
    border: 1px solid rgba(84, 178, 245, 0.4);
}

.cta-slash-left {
    left: -22px;
}

.cta-slash-right {
    right: -22px;
}

.cta-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-12deg) translateX(-120%);
    transition: transform 0.8s ease;
}

.cta-neon:hover .cta-shimmer {
    transform: skewX(-12deg) translateX(120%);
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Are You section gradient */
.are-you-gradient {
    background: color(#06243F)
}

/* Text gradient effects */
.bg-cyber-text-gradient {
    background: linear-gradient(90deg,
            #6d1616 7.1%,
            #6c1d21 21.87%,
            #69313c 37.64%,
            #54b2f5 101.36%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-cyber-hero-gradient {
    background: linear-gradient(90deg,
            #6d1616 25.96%,
            #6c1d21 44.22%,
            #54b2f5 89.18%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Feature image effects */
.feature-image {
    transition:
        transform 0.3s ease,
        filter 0.3s ease;
    position: relative;
}

.feature-image:hover {
    transform: translateY(-10px);
}

.image-container {
    position: relative;
    overflow: hidden;
    /* Enhanced blur container */
    filter: drop-shadow(0 20px 40px rgba(84, 178, 245, 0.15));
}

/* Enhanced reflection blur effect */
.image-container::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 60px;
    background: linear-gradient(to bottom,
            rgba(84, 178, 245, 0.1) 0%,
            rgba(84, 178, 245, 0.05) 50%,
            transparent 100%);
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0.8;
    z-index: -1;
    transition: all 0.3s ease;
}

.image-container:hover::after {
    opacity: 1;
    filter: blur(25px);
    transform: translateX(-50%) scale(1.1);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
            rgba(84, 178, 245, 0.1) 0%,
            rgba(220, 39, 67, 0.1) 50%,
            rgba(96, 165, 250, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 1rem;
}

.image-container:hover .image-overlay {
    opacity: 1;
}

.feature-img {
    transition: transform 0.3s ease;
    /* Enhanced image blur effects */
    filter: drop-shadow(0 0 20px rgba(84, 178, 245, 0.1));
}

.image-container:hover .feature-img {
    transform: scale(1.05);
    filter: drop-shadow(0 0 30px rgba(84, 178, 245, 0.2));
}

/* Enhanced depth blur for overlapping phones */
.feature-image.overlapping {
    position: relative;
}

.feature-image.overlapping .image-container {
    filter: drop-shadow(0 25px 50px rgba(84, 178, 245, 0.2));
}

.feature-image.overlapping .image-container::after {
    bottom: -80px;
    height: 80px;
    filter: blur(30px);
    background: linear-gradient(to bottom,
            rgba(84, 178, 245, 0.15) 0%,
            rgba(84, 178, 245, 0.08) 40%,
            rgba(96, 165, 250, 0.05) 70%,
            transparent 100%);
}

/* Enhanced glow effect for feature images */
.feature-image::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(ellipse at center,
            rgba(84, 178, 245, 0.1) 0%,
            rgba(84, 178, 245, 0.05) 40%,
            transparent 70%);
    border-radius: inherit;
    filter: blur(15px);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.feature-image:hover::before {
    opacity: 1;
}

/* Sophisticated blur for phone reflections */
.phone-reflection {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 40px;
    background: linear-gradient(to bottom,
            rgba(84, 178, 245, 0.08) 0%,
            rgba(84, 178, 245, 0.04) 60%,
            transparent 100%);
    border-radius: 50%;
    filter: blur(18px);
    opacity: 0.6;
    z-index: -1;
}

/* Enhanced blur for overlapping phone effects */
.overlapping-phones .image-container:nth-child(1) {
    filter: drop-shadow(0 20px 40px rgba(84, 178, 245, 0.15));
}

.overlapping-phones .image-container:nth-child(2) {
    filter: drop-shadow(0 15px 30px rgba(84, 178, 245, 0.1));
}

/* Reflection blur animation */
@keyframes reflectionGlow {

    0%,
    100% {
        opacity: 0.6;
        filter: blur(18px);
    }

    50% {
        opacity: 0.8;
        filter: blur(22px);
    }
}

.phone-reflection {
    animation: reflectionGlow 4s ease-in-out infinite;
}

/* Additional sophisticated blur effects */
.feature-image {
    perspective: 1000px;
}

.image-container {
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced depth blur with multiple layers */
.image-container::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(ellipse at center,
            rgba(84, 178, 245, 0.08) 0%,
            rgba(84, 178, 245, 0.04) 30%,
            rgba(96, 165, 250, 0.02) 60%,
            transparent 80%);
    border-radius: inherit;
    filter: blur(25px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -2;
}

.image-container:hover::before {
    opacity: 1;
}

/* Sophisticated phone shadow blur */
.phone-shadow {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 50px;
    background: radial-gradient(ellipse at center,
            rgba(84, 178, 245, 0.12) 0%,
            rgba(84, 178, 245, 0.06) 40%,
            rgba(96, 165, 250, 0.03) 70%,
            transparent 100%);
    border-radius: 50%;
    filter: blur(35px);
    opacity: 0.7;
    z-index: -3;
}

/* Enhanced reflection with multiple blur layers */
.phone-reflection {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 40px;
    background: linear-gradient(to bottom,
            rgba(84, 178, 245, 0.08) 0%,
            rgba(84, 178, 245, 0.04) 60%,
            transparent 100%);
    border-radius: 50%;
    filter: blur(18px);
    opacity: 0.6;
    z-index: -1;
}

.phone-reflection::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 20px;
    background: linear-gradient(to bottom,
            rgba(84, 178, 245, 0.04) 0%,
            rgba(96, 165, 250, 0.02) 50%,
            transparent 100%);
    border-radius: 50%;
    filter: blur(25px);
    opacity: 0.4;
}

/* Floating animation for enhanced depth */
@keyframes floatDepth {

    0%,
    100% {
        transform: translateY(0px) translateZ(0px);
    }

    50% {
        transform: translateY(-5px) translateZ(10px);
    }
}

.feature-image:hover .image-container {
    animation: floatDepth 3s ease-in-out infinite;
}

/* Enhanced glow on hover */
.feature-image:hover .image-container::after {
    filter: blur(30px);
    background: linear-gradient(to bottom,
            rgba(84, 178, 245, 0.15) 0%,
            rgba(84, 178, 245, 0.08) 40%,
            rgba(96, 165, 250, 0.04) 70%,
            transparent 100%);
}

/* Mobile optimization for blur effects */
@media (max-width: 768px) {

    .phone-reflection,
    .phone-reflection::after,
    .phone-shadow {
        display: none;
    }

    .image-container::after,
    .image-container::before {
        display: none;
    }

    .feature-image:hover .image-container {
        animation: none;
    }
}

/* Enhanced FAQ Styles */
.faq-item {
    transition: all 0.3s ease;
    background: rgba(10, 25, 47, 0.6);
    border: 1px solid rgba(84, 178, 245, 0.2);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.faq-item:hover {
    border-color: rgba(84, 178, 245, 0.4);
    box-shadow: 0 8px 32px rgba(84, 178, 245, 0.1);
    transform: translateY(-2px);
}

.faq-item button {
    width: 100%;
    padding: 1.5rem 2rem;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-item button:hover {
    background: rgba(84, 178, 245, 0.05);
}

.faq-item h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
    padding-right: 3rem;
    line-height: 1.5;
}

.faq-item:hover h3 {
    color: #54b2f5;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    padding: 0 2rem;
}

.faq-answer.open {
    max-height: 300px;
    opacity: 1;
    padding: 0 2rem 1.5rem 2rem;
}

.faq-answer p {
    color: #94a3b8;
    line-height: 1.7;
    margin: 0;
    font-size: 0.95rem;
}

.faq-chevron {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(84, 178, 245, 0.1);
    border-radius: 50%;
    border: 1px solid rgba(84, 178, 245, 0.2);
}

.faq-chevron.rotated {
    transform: translateY(-50%) rotate(180deg);
    background: rgba(84, 178, 245, 0.2);
    border-color: rgba(84, 178, 245, 0.4);
}

.faq-chevron i {
    color: #54b2f5;
    font-size: 1.25rem;
}

/* FAQ Search Bar */
#faq-search {
    box-shadow: 0 4px 20px rgba(84, 178, 245, 0.1);
}

#faq-search:focus {
    box-shadow: 0 8px 32px rgba(84, 178, 245, 0.2);
}

/* FAQ Category Buttons */
.faq-category-btn {
    padding: 0.75rem 1.5rem;
    background: rgba(10, 25, 47, 0.6);
    border: 1px solid rgba(84, 178, 245, 0.2);
    border-radius: 12px;
    color: #94a3b8;
    font-family: 'Orbitron', monospace;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.faq-category-btn:hover {
    background: rgba(84, 178, 245, 0.1);
    border-color: rgba(84, 178, 245, 0.4);
    color: #54b2f5;
    transform: translateY(-2px);
}

.faq-category-btn.active {
    background: linear-gradient(135deg, rgba(84, 178, 245, 0.2), rgba(96, 165, 250, 0.2));
    border-color: rgba(84, 178, 245, 0.6);
    color: #54b2f5;
    box-shadow: 0 4px 20px rgba(84, 178, 245, 0.2);
}

/* Optimized FAQ Item Animations */
.faq-item {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
}

/* Reduced animation delays for better performance */
.faq-item:nth-child(odd) {
    animation: fadeInUp 0.4s ease forwards;
    animation-delay: 0.1s;
}

.faq-item:nth-child(even) {
    animation: fadeInUp 0.4s ease forwards;
    animation-delay: 0.2s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Form enhancements */
.form-group {
    position: relative;
}

.form-input:focus+.form-label,
.form-input:not(:placeholder-shown)+.form-label {
    transform: translateY(-1.5rem) scale(0.8);
    color: #54b2f5;
}

/* Smooth scrolling animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

/* Loading animation for rotating text */
@keyframes textRotate {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    10%,
    90% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.rotating-text {
    animation: textRotate 4s ease-in-out infinite;
}

/* Video placeholder enhancements */
.video-placeholder {
    background: linear-gradient(135deg, #0a192f 0%, #112240 100%);
    border: 2px solid rgba(84, 178, 245, 0.2);
}

.video-placeholder:hover {
    border-color: rgba(84, 178, 245, 0.5);
    background: linear-gradient(135deg, #112240 0%, #0a192f 100%);
}

/* Enhanced button styles */
.btn-primary {
    background: linear-gradient(135deg, #54b2f5 0%, #60a5fa 100%);
    box-shadow: 0 4px 15px rgba(84, 178, 245, 0.3);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #54b2f5 100%);
    box-shadow: 0 8px 25px rgba(84, 178, 245, 0.4);
    transform: translateY(-2px);
}

/* Enhanced Footer Styles */
footer {
    position: relative;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #DC2743 0%, #54B2F5 50%, #60A5FA 100%);
    opacity: 0.6;
}

/* Enhanced social link button */
.social-link {
    position: relative;
    isolation: isolate;
    background: linear-gradient(135deg, rgba(84, 178, 245, 0.12), rgba(96, 165, 250, 0.08));
    border: 1px solid rgba(84, 178, 245, 0.35);
    box-shadow: 0 6px 18px rgba(84, 178, 245, 0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    backdrop-filter: blur(6px);
}

.social-link::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    background: radial-gradient(40% 40% at 50% 50%, rgba(84, 178, 245, 0.25), transparent 70%);
    opacity: 0;
    transform: scale(0.9);
    filter: blur(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
    z-index: -1;
}

.social-link:hover {
    transform: translateY(-2px) scale(1.06);
    border-color: rgba(84, 178, 245, 0.6);
    box-shadow: 0 10px 26px rgba(84, 178, 245, 0.28);
    background: linear-gradient(135deg, rgba(84, 178, 245, 0.18), rgba(96, 165, 250, 0.14));
}

.social-link:hover::before {
    opacity: 1;
    transform: scale(1);
    filter: blur(14px);
}

.social-link i {
    transition: transform 0.25s ease, color 0.25s ease;
}

.social-link:hover i {
    transform: scale(1.08);
    color: #60A5FA;
}

/* Keyboard accessibility */
.social-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(84, 178, 245, 0.35), 0 8px 26px rgba(84, 178, 245, 0.25);
    border-color: rgba(84, 178, 245, 0.7);
}

/* Footer hover animations */
.footer-link {
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

.footer-link:hover {
    transform: translateX(8px);
    color: #54B2F5;
}

.footer-link::before {
    content: '→';
    position: absolute;
    left: -20px;
    opacity: 0;
    transition: all 0.3s ease;
    color: #54b2f5;
}

.footer-link:hover::before {
    opacity: 1;
    left: -15px;
}

/* Footer section headers */
footer h4 {
    position: relative;
}

footer h4::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 30px;
    height: 2px;
    background: currentColor;
    opacity: 0.6;
}

/* Tooltip enhancements */
.tooltip {
    z-index: 100;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(84, 178, 245, 0.2);
}

/* Contact icons animation */
.contact-icon {
    transition: all 0.3s ease;
}

.contact-icon:hover {
    background: rgba(84, 178, 245, 0.3) !important;
    transform: scale(1.1);
}

/* Geometric line art enhancements */
.geometric-art path {
    filter: drop-shadow(0 0 3px rgba(220, 39, 67, 0.4));
}

.geometric-art circle {
    filter: drop-shadow(0 0 2px currentColor);
}

/* Newsletter signup enhancements */
.newsletter-input:focus {
    box-shadow: 0 0 0 3px rgba(84, 178, 245, 0.1);
    border-color: #54b2f5;
}

/* Support note styling */
.support-note {
    background: rgba(10, 25, 47, 0.7);
    border: 1px solid rgba(84, 178, 245, 0.4);
    border-radius: 12px;
    padding: 1rem;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(84, 178, 245, 0.15);
    transition: all 0.3s ease;
}

.support-note:hover {
    border-color: rgba(84, 178, 245, 0.6);
    box-shadow: 0 8px 30px rgba(84, 178, 245, 0.25);
    transform: translateY(-2px);
}

/* Google Support Section Enhanced Styling */
.support-note:before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #54b2f5, #60a5fa, #54b2f5);
    border-radius: 14px;
    z-index: -1;
    opacity: 0.3;
    animation: borderGlow 3s ease-in-out infinite;
}

@keyframes borderGlow {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }
}

/* Google logo styling */
.google-logo {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: all 0.3s ease;
    vertical-align: middle;
}

.google-logo:hover {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    transform: scale(1.05);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a192f;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #54b2f5, #60a5fa);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #60a5fa, #54b2f5);
}

/* Vision Section Styles */
.vision-node {
    transition: all 0.3s ease;
    position: relative;
}

.vision-node:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(84, 178, 245, 0.2);
}

.central-node {
    position: relative;
    z-index: 10;
}

.central-node::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: linear-gradient(45deg, #54B2F5, #60A5FA, #DC2743);
    opacity: 0.3;
    z-index: -1;
    animation: nodeGlow 3s ease-in-out infinite;
}

@keyframes nodeGlow {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.5;
    }
}

/* Team Carousel Styles */
.team-carousel {
    position: relative;
}

.team-carousel-container {
    overflow: hidden;
    position: relative;
}

.team-carousel {
    width: 100%;
    overflow: hidden;
}

.team-track {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.team-slide {
    flex: 0 0 auto;
    width: 300px;
}

.team-card {
    transition: all 0.3s ease;
}

.team-card:hover {
    transform: translateY(-10px);
}

.carousel-dot {
    transition: all 0.3s ease;
    cursor: pointer;
}

.carousel-dot.active {
    background: #54B2F5 !important;
    transform: scale(1.2);
}

/* Team member glow effects */
.team-card .w-32.h-32:hover {
    box-shadow: 0 0 30px rgba(84, 178, 245, 0.4);
}

/* Who We Are Section */
#who-we-are {
    position: relative;
}

.geometric-pattern {
    animation: geometricFloat 8s ease-in-out infinite;
}

@keyframes geometricFloat {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-10px) rotate(1deg);
    }

    50% {
        transform: translateY(-5px) rotate(-1deg);
    }

    75% {
        transform: translateY(-15px) rotate(0.5deg);
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .feature-image {
        transform: none;
    }

    .feature-image:hover {
        transform: none;
    }

    .image-container:hover .feature-img {
        transform: none;
    }

    /* Vision diagram mobile layout */
    .vision-node {
        margin-bottom: 1rem;
    }

    /* Optimize animations on mobile */
    .faq-item {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Reduce backdrop blur on mobile for better performance */
    .backdrop-blur-sm {
        backdrop-filter: blur(5px);
    }

    .backdrop-blur-md {
        backdrop-filter: blur(8px);
    }

    .backdrop-blur-lg {
        backdrop-filter: blur(10px);
    }
}

/* Tablet optimizations */
@media (max-width: 1024px) and (min-width: 769px) {
    .team-card {
        margin-bottom: 1rem;
    }
}

/* Intersection Observer animations */
.animate-on-scroll {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s ease-out;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Optimized background animations */
@keyframes matrix-float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.matrix-bg {
    animation: matrix-float 8s ease-in-out infinite;
}

/* Reduce animation frequency on mobile */
@media (max-width: 768px) {
    .matrix-bg {
        animation: none;
    }

    .animate-pulse {
        animation: none;
    }
}

/* Section Title Gradients - Using same colors as hero $50B number */
.section-title-gradient {
    background: linear-gradient(90deg,
            #6d1616 7.1%,
            #6c1d21 21.87%,
            #69313c 37.64%,
            #54b2f5 101.36%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

/* Alternative gradient for different effects */
.section-title-gradient-alt {
    background: linear-gradient(135deg,
            #6d1616 25.96%,
            #6c1d21 44.22%,
            #54b2f5 89.18%);
    -webkit-background-clip: text;
    background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    text-fill-color: transparent;
}

/* Hover effect for gradient titles
.section-title-gradient:hover {
    background: linear-gradient(90deg,
            #54b2f5 0%,
            #69313c 25%,
            #6c1d21 75%,
            #6d1616 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    transition: all 0.3s ease;
} */

/* Optimized Team Grid */
.team-card {
    transition: all 0.3s ease;
    height: 100%;
}

.team-card>div {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.team-card .relative {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.team-card h3,
.team-card p {
    margin: 0;
    padding: 0;
}

/* Responsive team grid */
@media (max-width: 768px) {
    .team-card {
        margin-bottom: 1rem;
    }

    /* Carousel slide width on mobile */
    .team-slide {
        width: 260px;
    }
}

/* Custom Video Controls */
.custom-video-controls {
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(84, 178, 245, 0.2);
}

.custom-video-controls:hover {
    box-shadow: 0 12px 40px rgba(84, 178, 245, 0.3);
    transform: scale(1.05);
}

.video-control-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(84, 178, 245, 0.1);
    border: 2px solid rgba(84, 178, 245, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.video-control-btn:hover {
    background: rgba(84, 178, 245, 0.2);
    border-color: rgba(84, 178, 245, 0.6);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(84, 178, 245, 0.4);
}

.video-control-btn:active {
    transform: scale(0.95);
}

.video-control-btn.play-btn {
    width: 56px;
    height: 56px;
    background: rgba(84, 178, 245, 0.2);
    border-color: rgba(84, 178, 245, 0.5);
}

.video-control-btn.play-btn:hover {
    background: rgba(84, 178, 245, 0.3);
    border-color: rgba(84, 178, 245, 0.8);
}

/* Video progress bar */
#video-progress {
    transition: width 0.1s ease;
}

/* Video time display */
#video-time {
    font-family: 'Orbitron', monospace;
    font-size: 0.875rem;
}

/* Vision Timeline Styles */
.vision-timeline-item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 120px;
}

.vision-timeline-item::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #54B2F5, #60A5FA);
    border-radius: 50%;
    border: 3px solid #0a192f;
    box-shadow: 0 0 20px rgba(84, 178, 245, 0.6);
    z-index: 10;
}

.left-item {
    justify-content: flex-start;
    padding-right: 50%;
}

.right-item {
    justify-content: flex-end;
    padding-left: 50%;
}

.left-item .vision-node {
    margin-right: 2rem;
    transform: translateX(0);
    transition: all 0.3s ease;
}

.right-item .vision-node {
    margin-left: 2rem;
    transform: translateX(0);
    transition: all 0.3s ease;
}

.vision-timeline-item:hover .vision-node {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(84, 178, 245, 0.2);
}

/* Timeline line animation */
.vision-timeline-item::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #54B2F5, #60A5FA, #DC2743);
    opacity: 0.3;
    transform: translateX(-50%);
    z-index: 1;
}

/* Timeline animations */
.vision-timeline-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.vision-timeline-item.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.left-item.animate-in .vision-node {
    animation: slideInLeft 0.6s ease forwards;
}

.right-item.animate-in .vision-node {
    animation: slideInRight 0.6s ease forwards;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .vision-timeline-item {
        flex-direction: column;
        text-align: center;
        padding: 0 1rem;
    }

    .left-item,
    .right-item {
        padding: 0 1rem;
    }

    .left-item .vision-node,
    .right-item .vision-node {
        margin: 0;
        width: 100%;
    }

    .vision-timeline-item::before {
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
    }

    .left-item.animate-in .vision-node,
    .right-item.animate-in .vision-node {
        animation: slideInUp 0.6s ease forwards;
    }

    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

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