:root {
            --bg: #050505; --surface: #0a0a0a; --nav-h: 72px; --mobile-cta-h: 58px;
            --gold: #D4AF37; --bronze: #cd7f32; --text: #fff; --text-dim: #d0d0d0; --border: #222;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
            color: var(--text);
            font-family: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
            min-height: 100vh;
            line-height: 1.6;
        }
        .page-header { text-align: center; padding: 48px 24px 24px; }
        .page-header h1 { font-family: Oswald, sans-serif; font-size: clamp(2rem, 5vw, 3rem); text-transform: uppercase; }
        .hero-gold-gradient { background: linear-gradient(135deg, #fff 0%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .page-lead { color: var(--text-dim); max-width: 720px; margin: 12px auto 0; font-size: 1.15rem; }
        .dept-badge {
            display: inline-block; margin-bottom: 14px;
            font-family: 'Roboto Mono', monospace; font-size: 0.72rem; letter-spacing: 3px;
            color: #b5b5b5; text-transform: uppercase;
        }
        .container { max-width: 960px; margin: 0 auto; padding: 0 24px 64px; }
        .card {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 12px; padding: 28px 32px; margin-bottom: 24px;
        }
        .section-title { font-family: Oswald, sans-serif; color: var(--gold); text-transform: uppercase; margin-bottom: 14px; font-size: 1.35rem; }
        .sub-heading { color: var(--bronze); text-transform: uppercase; letter-spacing: 1px; font-size: 0.95rem; margin: 20px 0 10px; }
        p { color: var(--text-dim); margin-bottom: 12px; }
        p strong { color: #fff; }
        .score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0; }
        .score-card {
            border: 1px solid #333; border-radius: 10px; padding: 16px;
            background: rgba(255,255,255,0.02);
        }
        .score-card h4 { color: var(--gold); font-family: 'Roboto Mono', monospace; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
        .score-card p { font-size: 0.95rem; margin: 0; }
        table {
            width: 100%; border-collapse: collapse; margin: 16px 0;
            font-family: 'Roboto Mono', monospace; font-size: 0.82rem;
        }
        th, td { padding: 10px 12px; border-bottom: 1px solid #222; text-align: left; }
        th { color: var(--gold); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 0.72rem; }
        td { color: #ccc; }
        .gap-low { color: #4ade80; }
        .gap-mid { color: #fbbf24; }
        .gap-high { color: #f87171; }
        .formula-box {
            background: #111; border-left: 3px solid var(--gold);
            padding: 14px 18px; font-family: 'Roboto Mono', monospace;
            font-size: 0.85rem; color: #aaa; margin: 14px 0;
        }
        .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
        .btn-primary, .btn-secondary {
            display: inline-block; padding: 12px 22px; border-radius: 8px;
            text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
        }
        .btn-primary { background: linear-gradient(135deg, var(--gold), var(--bronze)); color: #000; }
        .btn-secondary { border: 1px solid #444; color: #ccc; }
        footer { text-align: center; padding: 40px 24px; border-top: 1px solid #222; color: #555; font-size: 0.85rem; }
        @media (max-width: 768px) {
            .score-grid { grid-template-columns: 1fr; }
            table { font-size: 0.72rem; }
            th, td { padding: 8px 6px; }
        }
