/* 
   ==========================================================================
   MAIN STYLESHEET
   ==========================================================================
   This file contains all the custom CSS for the website.
   It uses Tailwind CSS for layout, but these specific overrides 
   handle the dark theme, glass effects, and animations.
*/

/* --- A. CORE THEME --- */

/* Force Dark Mode on the whole site */
body { 
    background-color: #111821 !important; 
    color: #E2E8F0;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden; /* Prevent horizontal scroll on mobile */
}

/* Fixed Background Layer for Particles */
#global-particles-bg {
    position: fixed; /* Stays in place when scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Puts it BEHIND everything else */
    background: radial-gradient(circle at top, #111821 0%, #050a10 55%, #020406 100%);
    pointer-events: none; /* Allows clicking through to links behind it */
}

/* --- B. UTILITY CLASSES --- */

/* Custom Fonts */
.arabic-font { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.mono-font { font-family: 'Courier Prime', monospace; }

/* Glass Card Style - Used for boxes, cards, and highlighted sections */
.glass-card { 
    background: radial-gradient(circle at top left, rgba(44, 62, 80, 0.65), rgba(6, 12, 18, 0.98));
    backdrop-filter: blur(26px); 
    -webkit-backdrop-filter: blur(26px); 
    border: 1px solid rgba(248, 249, 250, 0.08); 
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8); 
}

/* Scroll Animation Base Class - Elements fade in and slide up when viewed */
.scroll-fx { 
    opacity: 0; 
    transform: translateY(30px) scale(0.99); 
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); 
}
.scroll-fx.active { opacity: 1; transform: translateY(0) scale(1); }

/* --- C. RESPONSIVE TEXT --- */
.fluid-header { 
    /* Scales size based on screen width: Min 2.5rem, Pref 6vw, Max 6rem */
    font-size: clamp(2.5rem, 6vw, 6rem); 
    white-space: nowrap; 
    line-height: 1.1;
}

/* --- D. ANIMATIONS --- */
.arrow-anim { animation: floatArrow 2s infinite ease-in-out; }
@keyframes floatArrow { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(5px); } 
}

/* --- E. MOBILE NAV OVERRIDE --- */
/* Ensures the mobile menu sits firmly ON TOP of the particles */
#mobile-menu-overlay {
    z-index: 9999 !important; 
}

/* --- F. TIMELINE STYLES (Used in Process Section) --- */
.timeline-container { position: relative; padding: 40px 0; }

.timeline-line-bg { 
    position: absolute; top: 0; bottom: 0; width: 1px; 
    background: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.1)); 
    left: 50%; transform: translateX(-50%); z-index: 0; 
}

.timeline-line-fill { 
    position: absolute; top: 0; width: 2px; 
    background: linear-gradient(to bottom, #1ABC9C, #16a085); 
    left: 50%; transform: translateX(-50%); 
    z-index: 1; height: 0px; 
    box-shadow: 0 0 15px #16a085; 
    transition: height 0.1s linear;
}

.step-dot { 
    width: 56px; height: 56px; 
    background: radial-gradient(circle at top, #0b1117, #050a10); 
    border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; 
    position: absolute; left: 50%; transform: translateX(-50%); 
    z-index: 2; display: flex; align-items: center; justify-content: center; 
    color: rgba(255,255,255,0.3); 
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

.step-dot.active { 
    border-color: #16a085; background: #16a085; color: white; 
    box-shadow: 0 0 30px rgba(22, 160, 133, 0.4); 
    transform: translateX(-50%) scale(1.1); 
}

/* Process Cards */
.step-card { width: 42%; position: relative; opacity: 0; transition: opacity 0.8s ease, transform 0.8s ease; }
.step-card.left { margin-right: auto; transform: translateX(-40px); text-align: right; }
.step-card.right { margin-left: auto; transform: translateX(40px); text-align: left; }
.step-card.active { opacity: 1; transform: translateX(0); }

/* 3D Tilt Wrapper */
.card-3d { position: relative; transform-style: preserve-3d; will-change: transform; transition: transform 0.1s ease-out; }

/* Mobile Adjustments for Timeline */
@media (max-width: 768px) {
    .timeline-line-bg, .timeline-line-fill { left: 24px; }
    .step-dot { left: 24px; width: 40px; height: 40px; }
    .step-dot svg { width: 20px; height: 20px; }
    .step-card { width: calc(100% - 70px); margin-left: 70px !important; text-align: left !important; margin-bottom: 40px; transform: translateX(20px); }
}

/* Pricing Card Special Styles */
.popular-card { border: 1px solid rgba(22, 160, 133, 0.4); z-index: 10; position: relative; }

.glow-bg { 
    position: absolute; inset: 0; 
    background: radial-gradient(circle at center, rgba(22, 160, 133, 0.15) 0%, transparent 70%); 
    z-index: -1; pointer-events: none; 
}

/* Hover Lift for Desktop */
@media (min-width: 769px) { 
    .popular-card { transform: scale(1.05); } 
}