/* ==========================================================================
   Saudi EX Global Stylesheet (V1 Dark High-Tech)
   Single Source of Truth - FULL SYSTEM RESET
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Inter:wght@400;600;700;800&display=swap');

html { scroll-behavior: smooth; }
body { 
    background-color: #020617; /* Pure Deep Navy/Black */
    color: #ffffff;
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    font-family: 'Cairo', 'Inter', sans-serif;
}

/* Global Clean: No blurry text shadow overlays anywhere */
* { text-shadow: none !important; }

/* ==========================================================================
   PURE WHITE TYPOGRAPHY (Global Override)
   ========================================================================== */
/* Headings use theme colors */
h1, h2, h3, h4, h5, h6 { color: inherit; }
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
    color: inherit;
    background: transparent !important;
}

/* Fix "Tiny text next to big words" */
h1 span, h2 span, h3 span {
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
}

/* Force all text paragraphs, lists, and spans to pure white */
p, li, span.text-gray-300, span.text-gray-400, span.text-gray-500, p.text-gray-300, p.text-gray-400, p.text-gray-500, div.text-gray-300, div.text-gray-400, div.text-gray-500 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* ==========================================================================
   ONE ACCENT COLOR (Saudi EX Bright Cyan #00d4ff)
   ========================================================================== */
/* Safely map all colored text utilities to Bright Cyan */
[class*="text-yellow-"], [class*="text-purple-"], [class*="text-indigo-"], [class*="text-pink-"], 
[class*="text-emerald-"], [class*="text-orange-"], [class*="text-red-"], [class*="text-green-"], 
[class*="text-blue-5"], [class*="text-blue-4"], [class*="text-teal-"], [class*="text-cyan-"], 
[class*="text-sky-"], [class*="text-rose-"], [class*="text-fuchsia-"], [class*="text-violet-"], [class*="text-amber-"], [class*="text-lime-"] {
    color: #00d4ff !important;
    -webkit-text-fill-color: #00d4ff !important;
}

/* Force all Lucide icons to Cyan */
i[data-lucide], .lucide {
    color: #00d4ff !important;
    -webkit-text-fill-color: #00d4ff !important; /* overrides the h1/h2 white text-fill rule */
}
/* Exception: Ensure icons inside headings are cyan */
h1 i[data-lucide], h2 i[data-lucide], h3 i[data-lucide] {
    color: #00d4ff !important;
    -webkit-text-fill-color: #00d4ff !important;
}
/* Exception: Ensure icons inside active buttons are high-contrast navy */
button i[data-lucide], a.bg-yellow-500 i, a.bg-cyan-500 i, a.bg-blue-600 i, .bg-white i, .text-white i, a[class*="bg-"][class*="500"] i {
    color: #020617 !important;
    -webkit-text-fill-color: #020617 !important;
}

/* Map colored backgrounds (buttons, badges) to Cyan */
[class*="bg-yellow-500"], [class*="bg-purple-500"], [class*="bg-indigo-500"], [class*="bg-pink-500"], 
[class*="bg-emerald-500"], [class*="bg-orange-500"], [class*="bg-red-500"], [class*="bg-green-500"], 
[class*="bg-blue-500"], [class*="bg-teal-500"], [class*="bg-cyan-500"], [class*="bg-sky-500"] {
    background-color: #00d4ff !important;
    color: #020617 !important; /* Navy text on cyan button */
    -webkit-text-fill-color: #020617 !important;
    border: none !important;
}
/* Active Buttons hover */
[class*="bg-yellow-500"]:hover, [class*="bg-purple-500"]:hover, [class*="bg-indigo-500"]:hover, [class*="bg-cyan-500"]:hover {
    background-color: #ffffff !important;
    color: #00d4ff !important;
    -webkit-text-fill-color: #00d4ff !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.4) !important;
}
button:hover i[data-lucide], a[class*="bg-"][class*="500"]:hover i[data-lucide] {
    color: #00d4ff !important;
    -webkit-text-fill-color: #00d4ff !important;
}

/* Map colored transparent boxes to completely transparent (Fixes gray/muddy overlays) */
[class*="bg-[rgba"], [class*="bg-yellow-500/"], [class*="bg-purple-500/"], [class*="bg-indigo-500/"], 
[class*="bg-emerald-500/"], [class*="bg-pink-500/"], [class*="bg-orange-500/"], [class*="bg-blue-500/"] {
    background-color: transparent !important; 
}

/* Gradual cleanup: Gradients are allowed globally */

/* Map colored borders to Cyan */
[class*="border-yellow-"], [class*="border-purple-"], [class*="border-indigo-"], [class*="border-pink-"], 
[class*="border-emerald-"], [class*="border-orange-"], [class*="border-blue-"] {
    border-color: #00d4ff !important;
}


/* ==========================================================================
   UNIFIED HEADER & FOOTER
   ========================================================================== */
.glass-nav {
    background: rgba(2, 6, 23, 0.85) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
    padding-top: 1rem !important; 
    padding-bottom: 1rem !important;
}

.glass-dropdown {
    background: rgba(2, 6, 23, 0.95) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    padding: 1.25rem !important; 
    width: 650px !important; 
}
.glass-dropdown a {
    padding: 0.5rem 0.75rem !important; 
    gap: 0.75rem !important; 
    border: 1px solid transparent !important; /* Removes inner box grids */
    background: transparent !important; /* Removes inner box backgrounds */
}
.glass-dropdown .font-bold {
    font-size: 0.9rem !important; 
}

.glass-dropdown a .text-white, .glass-dropdown a .font-bold, .glass-dropdown a .text-gray-300 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
.glass-dropdown a:hover .font-bold, .glass-dropdown a:hover .text-white, .glass-dropdown a:hover .text-gray-300 {
    color: #00d4ff !important;
    -webkit-text-fill-color: #00d4ff !important;
}

.glass-footer {
    background: #020617 !important;
    border-top: 1px solid rgba(0, 212, 255, 0.2) !important;
}

/* Global Phone Call Action */
a[href^="tel:"] {
    background: rgba(0, 212, 255, 0.1) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    color: #00d4ff !important;
    -webkit-text-fill-color: #00d4ff !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
}
a[href^="tel:"]:hover {
    background: #00d4ff !important;
    color: #020617 !important;
    -webkit-text-fill-color: #020617 !important;
}


/* ==========================================================================
   PREMIUM CARDS (Sleek, Clean, High Contrast)
   ========================================================================== */
.premium-card, .glass-card {
    background: #020617 !important; /* Pure solid contrast layer, eliminates all light muddy gray */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
}
.premium-card:hover, .glass-card:hover {
    border-color: #00d4ff !important;
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.2) !important;
    transform: translateY(-4px) !important;
}


/* ==========================================================================
   ANIMATIONS & GRAPHICS
   ========================================================================== */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; opacity: 0; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }


.gps-radar-container {
    border-radius: 50%;
    overflow: hidden !important; 
    border: 1px solid rgba(0, 212, 255, 0.3);
    background: radial-gradient(circle, rgba(2,6,23,0) 40%, rgba(0, 212, 255, 0.1) 100%);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
}
.gps-grid {
    background-image: 
        linear-gradient(rgba(0, 212, 255, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.2) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center center;
    border-radius: 50%;
    z-index: 1;
}

.sonar-ring {
    border: 1px solid rgba(0, 212, 255, 0.6);
    border-radius: 50%;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0;
    width: 100%; height: 100%;
    animation: sonar-pulse 4s linear infinite;
    z-index: 3;
}
.sonar-ring.delay-1 { animation-delay: 1.3s; }
.sonar-ring.delay-2 { animation-delay: 2.6s; }

@keyframes sonar-pulse {
    0% { transform: translate(-50%, -50%) scale(0.1); opacity: 0; border-width: 2px; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; border-width: 1px; }
}

.radar-sweep {
    position: absolute;
    top: 50%; left: 50%;
    width: 50%; height: 50%;
    background: conic-gradient(from 0deg, rgba(0, 212, 255, 0) 70%, rgba(0, 212, 255, 0.4) 100%);
    transform-origin: 0 0; 
    animation: radar-spin 4s linear infinite;
    z-index: 4;
    border-right: 2px solid rgba(0, 212, 255, 0.8); 
}
@keyframes radar-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Logos and Image Layers */
.logo-crisp, img[alt^="Saudi EX Logo"], img[alt^="Saudi EX Core"] {
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    z-index: 9999 !important;
    position: relative;
    /* Do not apply CSS filters that dull the logo */
}

/* ==========================================================================
   MOBILE UI OPTIMIZATION (Global Card Resizing Policy)
   ========================================================================== */
@media (max-width: 768px) {
    .tech-card, .premium-card, .glass-card {
        padding-top: 1.2rem !important; /* 40% reduction from 2rem */
        padding-bottom: 1.2rem !important;
        padding-left: 1.2rem !important;
        padding-right: 1.2rem !important;
    }
    .tech-card h3, .premium-card h3, .glass-card h3, 
    .tech-card h2, .premium-card h2, .glass-card h2 {
        font-size: 1.1rem !important; /* Reduced heading font size */
        margin-bottom: 0.5rem !important;
    }
    .tech-card .rounded-xl.bg-blue-50, .tech-card .rounded-xl.flex, 
    .tech-card .w-12.h-12, .tech-card .w-14.h-14, 
    .glass-card .w-12.h-12, .glass-card .w-14.h-14, 
    .premium-card .w-12.h-12, .premium-card .w-14.h-14, 
    .glass-card .rounded-xl {
        width: 2.5rem !important; /* Icon container scaled down */
        height: 2.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    .tech-card i.lucide, .tech-card i[data-lucide], 
    .glass-card i.lucide, .glass-card i[data-lucide], 
    .premium-card i.lucide, .premium-card i[data-lucide] {
        width: 1.2rem !important; /* Glowing icons scaled down by 20% */
        height: 1.2rem !important;
    }
    .tech-card p, .glass-card p, .premium-card p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    /* --- HIGH-PERFORMANCE MOBILE OVERRIDES --- */
    /* 1. GPU Acceleration & Layer Promotion */
    .tech-card, .premium-card, .glass-card, [data-lucide], .lucide, img, .hub-core, .orbit-icon {
        will-change: transform, opacity;
        backface-visibility: hidden;
        transform: translateZ(0);
    }

    /* 2. Disable Hardware-Intensive Blurs & Filters */
    .glass-nav, .glass-dropdown, .tech-card, .premium-card, .glass-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(2, 6, 23, 0.98) !important; /* Fallback to solid navy */
    }
    
    /* Lightification: Reduce heavy GPU effects */
    .fixed.inset-0 .blur-\[120px\], .blur-\[100px\], .blur-\[80px\], .blur-\[120px\] { 
        filter: blur(50px) !important; 
        opacity: 0.1 !important; 
    }
    .absolute.inset-0.bg-\[url\(\'https\:\/\/grainy-gradients\.vercel\.app\/noise\.svg\'\)\] {
        display: none !important; 
    }
    
    /* Disable mix-blend-mode on mobile as it's heavy on GPU */
    [class*="mix-blend-"], .mix-blend-screen, .mix-blend-overlay, .mix-blend-multiply {
        mix-blend-mode: normal !important;
    }

    /* 3. Instant Scrolling Content Visibility (Kill AOS site-wide on mobile) */
    [data-aos], .aos-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        visibility: visible !important;
    }
    
    /* Force immediate display for everything that might have fade-in classes */
    .fade-in-section, .animate-fade-in-up, [class*="delay-"], .animate-pulse {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        visibility: visible !important;
    }

    /* 4. Shadow Optimization (Drop-shadow is 10x heavier than box-shadow) */
    .glow-cyan, .text-cyan-400, [class*="text-[#00d4ff]"], i[data-lucide], .lucide {
        text-shadow: none !important;
        filter: none !important;
        box-shadow: none !important; /* FIX: Prevents dark boxes behind text */
        contain: layout; /* Lightification: isolate painting */
    }
    .tech-card, .premium-card, .glass-card, [class*="shadow-"], [class*="drop-shadow-"] {
        box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2) !important;
    }
    
    /* 5. Smooth Scroll Disable (prevents main thread stuttering on older devices) */
    html { scroll-behavior: auto !important; }
}

/* ==========================================================================
   NUCLEAR OPTION: FORCE STATIC MOBILE SITE (max-width: 768px)
   NO ANIMATIONS, NO FADES, NO BLANK GAPS.
   ========================================================================== */
@media (max-width: 768px) {
   [data-aos] {
       opacity: 1 !important;
       transform: translate(0) scale(1) !important;
       transition: none !important;
       visibility: visible !important;
       display: block !important;
   }
   .fade-in, .slide-up, .zoom-in, .fade-in-section, .animate-fade-in-up, .animated-list-item { 
       animation: none !important; 
       opacity: 1 !important; 
       transform: none !important;
       transition: none !important;
       visibility: visible !important;
   }
   /* Force immediate populate for all sections */
   section, div, img, h1, h2, h3, h4, p, span {
       animation-delay: 0s !important;
       transition-delay: 0s !important;
   }
}