/* APEX SOLUTIONS - Corporate Identity CSS */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Inter:wght@300;400;500;600&display=swap');

:root {
    /* New Theme: Modern Tech (Dark Slate & Electric Blue) */
    --navy-deep: #0f172a; /* Slate 900 */
    --navy-light: #1e293b; /* Slate 800 */
    --gold-metallic: #3b82f6; /* Blue 500 (Replacing Gold) */
    --gold-soft: #eff6ff; /* Blue 50 */
    --slate-light: #f8fafc;
}

/* Base */
body { font-family: 'Inter', sans-serif; color: #334155; background-color: #ffffff; overflow-x: hidden; }
h1, h2, h3, h4, .serif { font-family: 'Outfit', sans-serif; letter-spacing: -0.02em; }

/* Utilities (Mapping old class names to new colors for compatibility) */
.text-gold { color: var(--gold-metallic); }
.bg-gold { background-color: var(--gold-metallic); }
.border-gold { border-color: var(--gold-metallic); }
.bg-navy { background-color: var(--navy-deep); }
.text-navy { color: var(--navy-deep); }

/* Animations */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }

/* Navigation */
.nav-item { position: relative; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; font-weight: 700; color: #475569; }
.nav-item::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0%; height: 2px; background: var(--gold-metallic); transition: width 0.3s; }
.nav-item:hover::after, .nav-item.active::after { width: 100%; }
.nav-item.active { color: var(--navy-deep); }

/* Components */
.sector-card { transition: all 0.4s ease; }
.sector-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -10px rgba(10, 25, 47, 0.2); }

.service-tab { cursor: pointer; }
.service-tab.active { border-color: var(--navy-deep); color: var(--navy-deep); }

/* Loader */
.loader { border-top-color: var(--gold-metallic); animation: spinner 1.5s linear infinite; }
@keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }