/**
 * Advanced Architectural Design System Tokens
 */
:root {
    --brand-slate: #12161A;
    --brand-concrete: #F4F5F6;
    --brand-accent: #D4A373;
    --brand-raw: #8A9099;
}

/* Base resets & layout smooth handling */
#main-header.glass-header {
    background-color: #ffffff !important; /* Pure solid white base fallback */
    background: rgba(255, 255, 255, 0.98) !important; /* Extremely high solid density */
    opacity: 1 !important; /* Defeats any cascading opacity leakage */
    box-shadow: 0 4px 20px -5px rgba(18, 22, 26, 0.08) !important; /* Clean structural edge line */
    border-b: 1px solid #e2e8f0 !important; /* Visible split divider line */
}

/* Ensure the wrapper brand typography stays 100% solid opacity */
#main-header * {
    opacity: 1 !important;
}

/* Keep navigation links absolutely solid slate text */
.nav-link {
    color: #12161A !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}
/* Parallax structural landscape layout */
.hero-clip {
    background: linear-gradient(135deg, rgba(18, 22, 26, 0.85) 30%, rgba(18, 22, 26, 0.4) 100%), url('../../image_5a007b.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Micro grid structural texture blueprint */
.framework-grid-bg {
    background-image: url('data:image/svg+xml,%3Csvg width=\'30\' height=\'30\' viewBox=\'0 0 30 30\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M0 0h15v15H0V0zm15 15h15v15H15V15z\' fill=\'%23FFF\' fill-opacity=\'.02\' fill-rule=\'evenodd\'/%3E%3C/svg%3E');
}

/* Interactive link transitions */
/*.nav-link {*/
/*    position: relative;*/
/*    transition: color 0.3s ease;*/
/*}*/
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--brand-accent);
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-link:hover::after {
    width: 100%;
}

/* Custom Soft Shadows for Cards */
.premium-shadow {
    box-shadow: 0 20px 40px -15px rgba(18, 22, 26, 0.04);
}
.panel-shadow {
    box-shadow: 0 30px 60px -20px rgba(18, 22, 26, 0.15);
}