/* =============================================================
   1. CORE LAYOUT & UTILITIES
   ============================================================= */
:root {
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
}

main { 
    padding-top: 80px; 
    min-height: 100vh;
}

/* FIX: The .hidden override was removed here to allow Tailwind's md:flex to work */

.no-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}
.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}

.hero-overlay {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.4));
    transition: background var(--transition-base);
}

/* =============================================================
   2. UNIFIED TYPOGRAPHY
   ============================================================= */
.uni-header, .page-title {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}
.dark .uni-header, .dark .page-title { color: #ffffff; }

.uni-header { font-size: 2.5rem; }
.page-title { font-size: clamp(2.75rem, 6vw, 3.25rem); margin-bottom: 0.75rem; }

.uni-body, .page-subtitle {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #64748b;
}
.dark .uni-body, .dark .page-subtitle { color: #94a3b8; }

/* =============================================================
   3. SERVICE COLOR SYSTEM (LOCKED)
   ============================================================= */
.service-icon {
    transition: all var(--transition-base);
}

/* RED – Tech */
.service-red-icon { background: #FEF2F2; color: #E53935; }
.group:hover .service-red-icon { background: #E53935; color: #ffffff; }
.service-red-hover:hover { color: #E53935; }

/* ORANGE – Branding */
.service-orange-icon { background: #FFF7ED; color: #F97316; }
.group:hover .service-orange-icon { background: #F97316; color: #ffffff; }

/* GREY – Commerce */
.service-grey-icon { background: #F1F5F9; color: #334155; }
.group:hover .service-grey-icon { background: #1E293B; color: #ffffff; }

/* =============================================================
   4. MOBILE NAVIGATION & RESPONSIVENESS
   ============================================================= */
.logo { 
    flex-shrink: 0; 
    max-width: 150px; 
    height: auto; 
    object-fit: contain; 
}

/* Mobile Menu Positioning */
@media (max-width: 768px) {
    [data-nav-menu] {
        position: absolute; 
        top: 100%;          
        left: 0;
        width: 100%;
        height: auto;
        
        /* Visual Styles */
        background-color: #ffffff;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        padding: 1.5rem;
        z-index: 40; 
    }

    .dark [data-nav-menu] { 
        background-color: #0f172a; 
        border-bottom: 1px solid #334155; 
    }
    
    [data-nav-menu] a { 
        width: 100%; 
        padding: 1rem 0; 
        border-bottom: 1px solid #f1f5f9; 
        transition: color var(--transition-fast);
    }
    
    .dark [data-nav-menu] a { 
        border-bottom-color: #1e293b; 
        color: #f1f5f9;
    }
}