/* ========================================
   ANIMATED BLOB GRADIENTS BACKGROUND
   MASTER BACKGROUND - OVERRIDES ALL OTHERS
   ======================================== */

/* FORCE OVERRIDE - Remove ALL other backgrounds */
html,
html.theme-solid-dark,
html.theme-solid-midnight,
html.theme-image-gemini,
html.blob-bg-active,
html[data-theme="light"],
html[data-theme="dark"] {
    background: #051515 !important;
    background-color: #051515 !important;
    background-image: none !important;
}

body,
body.blob-bg,
body.has-grid,
body[data-theme="light"],
body[data-theme="dark"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Remove any pseudo-element backgrounds */
body::before,
body::after,
html::before,
html::after {
    background: transparent !important;
    background-image: none !important;
    display: none !important;
}

/* Remove particle network if present */
#particle-network {
    display: none !important;
}

/* Main blob container - THIS IS THE ONLY BACKGROUND */
.blob-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(145deg, #0a1a1a 0%, #0d2525 50%, #051515 100%);
    overflow: hidden;
}

/* Individual animated blobs */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    mix-blend-mode: screen;
    animation: blobFloat 20s ease-in-out infinite;
}

/* Blob 1 - Large cyan, top left */
.blob-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 220, 230, 0.7) 0%, rgba(0, 180, 190, 0.3) 50%, transparent 70%);
    top: -10%;
    left: -5%;
    animation-delay: 0s;
    animation-duration: 25s;
}

/* Blob 2 - Medium teal, top right */
.blob-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 200, 210, 0.6) 0%, rgba(0, 160, 170, 0.25) 50%, transparent 70%);
    top: 5%;
    right: -10%;
    animation-delay: -5s;
    animation-duration: 22s;
}

/* Blob 3 - Small bright cyan, center */
.blob-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.5) 0%, rgba(0, 200, 220, 0.2) 50%, transparent 70%);
    top: 40%;
    left: 30%;
    animation-delay: -10s;
    animation-duration: 18s;
}

/* Blob 4 - Large teal, bottom left */
.blob-4 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(0, 180, 190, 0.55) 0%, rgba(0, 140, 150, 0.2) 50%, transparent 70%);
    bottom: -15%;
    left: 10%;
    animation-delay: -15s;
    animation-duration: 28s;
}

/* Blob 5 - Medium cyan, bottom right */
.blob-5 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(0, 210, 220, 0.5) 0%, rgba(0, 170, 180, 0.2) 50%, transparent 70%);
    bottom: 10%;
    right: 5%;
    animation-delay: -8s;
    animation-duration: 20s;
}

/* Blob 6 - Small accent, floating */
.blob-6 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(100, 255, 255, 0.4) 0%, rgba(50, 220, 230, 0.15) 50%, transparent 70%);
    top: 25%;
    right: 25%;
    animation-delay: -12s;
    animation-duration: 24s;
}

/* Blob 7 - Extra blob for wide screens */
.blob-7 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 190, 200, 0.5) 0%, rgba(0, 150, 160, 0.2) 50%, transparent 70%);
    top: 50%;
    right: 10%;
    animation-delay: -3s;
    animation-duration: 26s;
}

/* Blob 8 - Extra blob for wide screens */
.blob-8 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(0, 230, 240, 0.45) 0%, rgba(0, 190, 200, 0.18) 50%, transparent 70%);
    top: 10%;
    left: 45%;
    animation-delay: -18s;
    animation-duration: 21s;
}

/* Floating animation */
@keyframes blobFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    25% {
        transform: translate(30px, -40px) scale(1.05) rotate(5deg);
    }
    50% {
        transform: translate(-20px, 30px) scale(0.95) rotate(-3deg);
    }
    75% {
        transform: translate(40px, 20px) scale(1.08) rotate(8deg);
    }
}

/* Subtle noise overlay for texture */
.blob-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
}

/* Ensure content stays above blobs */
.site-header,
.mobile-app-header,
.hero,
.section,
main,
footer,
nav,
header,
article,
.content {
    position: relative;
    z-index: 1;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .blob {
        animation: none;
    }
}

/* ========================================
   GLOBAL CARD CONTRAST FIX
   Ensure all cards stand out from blob background
   ======================================== */

/* Generic card overrides for better contrast */
.card,
.service-card,
.feature-card,
.stat-card,
.contact-card,
.blog-card,
.pricing-card,
[class*="-card"] {
    background: rgba(8, 20, 20, 0.88) !important;
    border-color: rgba(0, 255, 224, 0.3) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

[class*="-card"]:hover {
    background: rgba(10, 28, 28, 0.94) !important;
    border-color: rgba(0, 255, 224, 0.5) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 255, 224, 0.1) !important;
}

/* Form containers and inputs */
.form-container,
.contact-form,
form[class*="form"] {
    background: rgba(5, 15, 15, 0.92) !important;
    border: 1px solid rgba(0, 255, 224, 0.25) !important;
    backdrop-filter: blur(10px);
}

/* Sections with backgrounds */
.section,
[class*="section"] {
    position: relative;
}

/* Feature boxes and info containers */
.info-box,
.feature-box,
.stat-box,
.highlight-box,
[class*="-box"] {
    background: rgba(8, 20, 20, 0.85) !important;
    border: 1px solid rgba(0, 255, 224, 0.2) !important;
}

/* Navigation - ensure visibility */
.nav,
header,
.header {
    background: rgba(5, 12, 12, 0.95) !important;
    backdrop-filter: blur(20px) !important;
}

/* Footer contrast */
footer,
.footer {
    background: rgba(3, 10, 10, 0.98) !important;
    border-top: 1px solid rgba(0, 255, 224, 0.15) !important;
}

/* Mobile - smaller blobs, less blur */
@media (max-width: 768px) {
    /* Override mobile.css and mobile-command-center.css */
    html, body {
        background: #051515 !important;
        background-color: #051515 !important;
        background-image: none !important;
    }
    
    .blob {
        filter: blur(60px);
        opacity: 0.5;
    }
    
    .blob-1 { width: 350px; height: 350px; }
    .blob-2 { width: 300px; height: 300px; }
    .blob-3 { width: 250px; height: 250px; }
    .blob-4 { width: 320px; height: 320px; }
    .blob-5 { width: 280px; height: 280px; }
    .blob-6 { width: 200px; height: 200px; }
}

/* Desktop wide screens - larger, more spread blobs */
@media (min-width: 1200px) {
    .blob {
        filter: blur(100px);
        opacity: 0.7;
    }
    
    .blob-1 { width: 800px; height: 800px; top: -15%; left: -10%; }
    .blob-2 { width: 700px; height: 700px; top: 0%; right: -15%; }
    .blob-3 { width: 500px; height: 500px; top: 35%; left: 40%; }
    .blob-4 { width: 750px; height: 750px; bottom: -20%; left: 5%; }
    .blob-5 { width: 600px; height: 600px; bottom: 5%; right: 0%; }
    .blob-6 { width: 400px; height: 400px; top: 20%; right: 30%; }
    .blob-7 { width: 550px; height: 550px; top: 45%; right: 5%; }
    .blob-8 { width: 450px; height: 450px; top: 8%; left: 50%; }
}

/* Ultra-wide screens - even larger coverage */
@media (min-width: 1600px) {
    .blob {
        filter: blur(120px);
        opacity: 0.75;
    }
    
    .blob-1 { width: 1000px; height: 1000px; }
    .blob-2 { width: 900px; height: 900px; }
    .blob-3 { width: 600px; height: 600px; }
    .blob-4 { width: 950px; height: 950px; }
    .blob-5 { width: 800px; height: 800px; }
    .blob-6 { width: 500px; height: 500px; }
    .blob-7 { width: 700px; height: 700px; }
    .blob-8 { width: 550px; height: 550px; }
}