*, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { overflow-x: hidden; background: #f8fafc; color: #1e293b; font-family: 'Inter', sans-serif; }

        :root {
            --brand-dark: #1e293b;
            --brand-accent: #d4af37;
            --brand-accent-light: #e8c97a;
        }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #0f172a; }
        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #d4af37; }

        /* Header */
        #main-header { transition: background 0.4s, padding 0.4s, box-shadow 0.4s; }
        #main-header.scrolled {
            background: #1e293b !important;
            box-shadow: 0 4px 30px rgba(0,0,0,0.3);
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
        }

        .brand-accent { color: var(--brand-accent); }
        .bg-brand-accent { background-color: var(--brand-accent); }
f        .brand-dark { color: var(--brand-dark); }
        .bg-brand-dark { background-color: var(--brand-dark); }
        .brand-accent-light { color: var(--brand-accent-light); }
        .bg-brand-accent-light { background-color: var(--brand-accent-light); }