/* =========================================
   1. Hero Section - Abstract Waves (Pink/Blue/Purple)
   ========================================= */
.hero-bg-animated {
    position: relative;
    background: #0f172a;
    /* Dark base */
    overflow: hidden;
    z-index: 1;
}

.hero-bg-animated::before,
.hero-bg-animated::after {
    content: '';
    position: absolute;
    width: 140%;
    height: 140%;
    top: -20%;
    left: -20%;
    z-index: -1;
    filter: blur(80px);
    opacity: 0.8;
    animation: flow 15s infinite ease-in-out alternate;
}

.hero-bg-animated::before {
    background: radial-gradient(circle at 50% 50%, rgba(79, 70, 229, 0.4), transparent 60%),
        radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.4), transparent 50%);
}

.hero-bg-animated::after {
    background: radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.4), transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(147, 51, 234, 0.4), transparent 60%);
    animation-direction: alternate-reverse;
    animation-duration: 20s;
}

@keyframes flow {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    50% {
        transform: translate(-2%, 5%) rotate(5deg) scale(1.1);
    }

    100% {
        transform: translate(5%, -5%) rotate(-5deg) scale(1);
    }
}

/* Ensure text is readable on dark background */
.hero-bg-animated h1,
.hero-bg-animated p,
.hero-bg-animated span {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-bg-animated .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* =========================================
   2. Features Section - Tech Hexagons (Dark Blue/Purple)
   ========================================= */
.tech-bg-animated {
    position: relative;
    background-color: #111827;
    background-image:
        radial-gradient(circle at 50% 0%, #312e81 0%, transparent 70%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
        linear-gradient(315deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 100% 100%, 40px 40px, 40px 40px, 40px 40px, 40px 40px;
    background-repeat: no-repeat, repeat, repeat, repeat, repeat;
    color: white;
}

/* Scanline effect */
.tech-bg-animated::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to bottom, transparent 50%, rgba(79, 70, 229, 0.05) 50%);
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 1;
}

.tech-bg-animated h2,
.tech-bg-animated p {
    color: white !important;
}

.tech-bg-animated .feature-card {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.tech-bg-animated .feature-card p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* =========================================
   3. CTA/Stats Section - Space Particles (Blue Dark)
   ========================================= */
.particles-bg-container {
    position: relative;
    background: #000428;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #004e92, #000428);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #004e92, #000428);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: white;
    z-index: 1;
}

.particles-bg-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.particles-bg-container h2,
.particles-bg-container p,
.particles-bg-container .display-6,
.particles-bg-container .lead {
    color: white !important;
    text-shadow: 0 0 20px rgba(0, 191, 255, 0.5);
}

.particles-bg-container .btn-light {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
}