        :root {
            --slate: #37353E;
            --gold: #EBCB90;
            --white: #FFFFFF;
            --black: #000000;
        }

        body {
            background-color: var(--slate);
            color: var(--white);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        h1, h2, h3, h4, .font-serif {
            font-family: 'Gideon Roman', serif;
        }

        .bg-slate { background-color: var(--slate); }
        .text-gold { color: var(--gold); }
        .border-gold { border-color: var(--gold); }
        
        /* Boxed Navigation Styling */
        .nav-box {
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            background: var(--slate);
        }

        .nav-box:hover {
            border-color: var(--gold);
            box-shadow: 0 0 15px rgba(235, 203, 144, 0.2);
            color: var(--gold);
        }

        /* Hero Text Animation */
        .hero-reveal {
            animation: revealUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes revealUp {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Floating Overlay Logic */
        .overlay-container {
            position: relative;
            z-index: 10;
            margin-top: -15vh;
        }

        .fixed-bg {
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--slate); }
        ::-webkit-scrollbar-thumb { background: var(--gold); }

        /* Page Transitions */
        .page-content {
            display: none;
            animation: fadeIn 0.8s ease-out;
        }

        .page-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Mobile Nav */
        #mobile-menu {
            transform: translateY(-100%);
            transition: transform 0.5s ease;
        }
        #mobile-menu.open {
            transform: translateY(0);
        }

        .divider-line {
            height: 1px;
            background: rgba(0,0,0,0.1);
            width: 0;
            transition: width 1.5s ease;
        }
        .active-line { width: 100%; }
