/* Mos Holding - Global Institutional Design System (Light Theme) */
:root {
    --brand-navy: #161522; /* Rich Blue text */
    --brand-navy-dark: #161522; /* Rich Blue text */
    --accent-gold: #AF9A74; /* Official Brand Gold */
    --mos-grey: #A7A9AC; /* Official Grey */
    --support-grey: #f4f5f5;
    
    /* 🎨 SECONDARY BRAND PALETTE (Standardized) */

    --mos-indigo: #4C3B94;
    --mos-purple: #7A1FA2;
    --mos-navy: #182C4F;
    --mos-emerald: #2E8B78;
    --banner-blue: #3c659e; /* New Banner Color */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto Flex', sans-serif;
}

/* 🏅 GOLDE SIDE SCROLLBAR */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f4f5f5; /* Light Institutional Gray */
}

::-webkit-scrollbar-thumb {
    background: var(--accent-gold);
    border: 2px solid #f4f5f5;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    filter: brightness(0.9);
}

body {
    font-family: 'Roboto Flex', sans-serif;
    background-color: #ffffff;
    color: var(--brand-navy);
    font-weight: 200; /* Extra Light for body */
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

@media (min-width: 1024px) {
    body, a, button, [role="button"], input, select, textarea {
        cursor: none !important;
    }
}

.serif-font {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 300; /* Regular to Light */
    font-variation-settings: "wdth" 120, "wght" 300, "opsz" 144;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300 !important; /* Force global light weights */
}

/* 🏢 HEADER GLASSMORPHISM */
#main-header {
    background: transparent;
    transition: all 0.5s ease;
    border-bottom: 1px solid transparent;
}

#main-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-bottom: 1px solid rgba(175, 154, 116, 0.3);
    padding: 1rem 0;
}

/* 🏙️ THREE.JS ENVIRONMENT */
#three-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: radial-gradient(circle at center, #1B263B 0%, #0B1B3D 100%);
    pointer-events: none;
}

/* 🔘 INSTITUTIONAL BUTTONS */
.btn-primary {
    background: var(--brand-navy);
    color: var(--accent-gold);
    padding: 1rem 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    transition: all 0.4s ease;
}

.btn-primary:hover {
    background: var(--accent-gold);
    color: #ffffff;
    transform: translateY(-2px);
}

.btn-outline {
    border: 1px solid var(--accent-gold);
    padding: 1rem 2.5rem;
    color: var(--brand-navy);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    transition: all 0.4s ease;
}

.btn-outline:hover {
    background: var(--accent-gold);
    color: #ffffff;
}

/* 🌑 GLOBAL CLEANUP: REMOVE BLACK */
.bg-black {
    background-color: #ffffff !important;
}

.text-black {
    color: var(--brand-navy) !important;
}



/* 🖱️ INSTITUTIONAL CURSOR SYSTEM (CSS-Variable Driven v3.0) */
:root {
    --mouse-x: -100px;
    --mouse-y: -100px;
    --follower-x: -100px;
    --follower-y: -100px;
    --cursor-scale: 1;
}

#mos-cursor {
    width: 8px;
    height: 8px;
    background: var(--accent-gold);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;
    will-change: transform;
    opacity: 0;
    transform: translate3d(calc(var(--mouse-x) - 4px), calc(var(--mouse-y) - 4px), 0) scale(var(--cursor-scale));
    transition: opacity 0.3s ease;
}

#mos-follower {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(175, 154, 116, 0.3);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9998;
    will-change: transform;
    opacity: 0;
    transform: translate3d(calc(var(--follower-x) - 20px), calc(var(--follower-y) - 20px), 0) scale(var(--cursor-scale));
    transition: 
        background-color 0.4s ease, 
        border-color 0.4s ease, 
        opacity 0.3s ease;
}

#mos-follower.cursor-hover {
    background-color: rgba(175, 154, 116, 0.15);
    border-color: rgba(175, 154, 116, 1);
    --cursor-scale: 1.8;
}

/* AOS Tweaks */
[data-aos] {
    pointer-events: none;
}
.aos-animate {
    pointer-events: auto;
}

/* 📈 LIVE MARKET TICKER */
@keyframes scroll-ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-ticker {
    display: inline-flex;
    animation: scroll-ticker 25s linear infinite;
    width: max-content;
}

.animate-ticker:hover {
    animation-play-state: paused;
}

/* 💠 SECONDARY SYSTEM HELPERS */
.bg-mos-navy { background-color: var(--mos-navy); }

.bg-mos-indigo { background-color: var(--mos-indigo); }

.text-on-dark { color: #f4f5f5 !important; }
.text-on-dark span:not(.text-accent) { color: #ffffff !important; }
.text-on-dark p { color: rgba(255, 255, 255, 0.7) !important; }
.text-on-dark h2 { color: #ffffff !important; }
.text-on-dark h3 { color: #ffffff !important; }
.text-on-dark .border-primary\/10 { border-color: rgba(255, 255, 255, 0.1) !important; }

/* 📱 GLOBAL RESPONSIVE REFINEMENTS (V5.1) */
@media (max-width: 768px) {
    section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    h1 { font-size: 2.75rem !important; }
    h2 { font-size: 2.1rem !important; }
    h3 { font-size: 1.7rem !important; }
    
    .hero-content {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 2.25rem !important; }
    h2 { font-size: 1.85rem !important; }
    
    .btn-primary, .btn-outline {
        padding: 0.8rem 1.2rem !important;
        width: 100%;
        text-align: center;
        margin-bottom: 0.5rem;
    }
}