/* --- VARIABLES --- */
:root {
    --bg-dark: #0a192f; /* Midnight Navy */
    --panel-bg: #112240;
    --gold: #FFD700;
    --gold-glow: rgba(255, 215, 0, 0.4);
    --text-white: #e6f1ff;
    --text-gray: #8892b0;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: 'Lato', sans-serif;
    overflow-x: hidden;
}

.font-header { font-family: 'Playfair Display', serif; letter-spacing: 1px; }
.font-body { font-family: 'Lato', sans-serif; }

/* --- BACKGROUND MAP --- */
.world-map-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg');
    background-size: cover; background-position: center; opacity: 0.05; filter: invert(1); z-index: -2;
}
.overlay-gold {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 20%, var(--bg-dark) 90%);
    z-index: -1; pointer-events: none;
}

/* --- UTILS --- */
.text-gold { color: var(--gold); text-shadow: 0 0 15px var(--gold-glow); }
.bg-navy { background-color: #0f2545; }
.bg-darker { background-color: #020c1b; }
.bg-panel { background: var(--panel-bg); }

.border-y-gold { border-top: 1px solid rgba(255, 215, 0, 0.2); border-bottom: 1px solid rgba(255, 215, 0, 0.2); }
.border-end-gold { border-right: 1px solid rgba(255, 215, 0, 0.2); }
.border-gold { border: 1px solid var(--gold); }

@media (max-width: 768px) { .border-end-gold { border-right: none; border-bottom: 1px solid rgba(255,215,0,0.2); padding-bottom: 20px; } }

/* --- HERO --- */
.biz-hero { padding: 120px 0 100px;margin-top: 50px;  position: relative; }
.badge-gold {
    border: 1px solid var(--gold); color: var(--gold); padding: 8px 16px; border-radius: 4px;
    font-family: 'Lato'; display: inline-block; margin-bottom: 20px; background: rgba(255, 215, 0, 0.1); text-transform: uppercase; letter-spacing: 1px;
}

.btn-gold {
    background: var(--gold); color: #0a192f; padding: 12px 35px; border-radius: 4px; font-weight: 700; text-decoration: none; border: none; transition: 0.3s;
}
.btn-gold:hover { background: #fff; box-shadow: 0 0 20px var(--gold-glow); transform: translateY(-2px); color: #0a192f; }

.btn-outline-gold {
    border: 2px solid var(--gold); color: var(--text-white); padding: 12px 35px; border-radius: 4px; text-decoration: none; font-weight: 700; transition: 0.3s;
}
.btn-outline-gold:hover { background: var(--gold); color: #0a192f; }

/* 3D CHESS VISUAL */
.chess-stage { position: relative; width: 300px; height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.chess-piece { font-size: 4rem; color: #fff; position: absolute; text-shadow: 0 10px 20px rgba(0,0,0,0.5); transition: 0.5s; }
.king { z-index: 3; color: var(--gold); animation: floatKing 4s infinite ease-in-out; }
.queen { left: 20px; opacity: 0.5; transform: scale(0.8); z-index: 2; }
.rook { right: 20px; opacity: 0.5; transform: scale(0.8); z-index: 2; }

@keyframes floatKing { 0% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

.data-ring {
    position: absolute; width: 100%; height: 100%; border: 1px solid rgba(255,255,255,0.1); border-radius: 50%;
    transform: rotateX(60deg); box-shadow: 0 0 20px rgba(255,215,0,0.1); animation: spin 10s infinite linear;
}
@keyframes spin { 100% { transform: rotateX(60deg) rotate(360deg); } }

.floating-card {
    position: absolute; top: 0; right: -20px; background: rgba(255,255,255,0.1); padding: 10px 20px;
    border-radius: 8px; backdrop-filter: blur(5px); border-left: 3px solid var(--gold);
}

/* --- SIMULATION LAB --- */
.sim-console { background: var(--panel-bg); border-radius: 12px; overflow: hidden; max-width: 900px; margin: 0 auto; border: 1px solid #333; min-height: 450px; }
.custom-range { accent-color: var(--gold); }

.kpi-box { flex: 1; text-align: center; background: rgba(255,255,255,0.05); padding: 10px; margin: 0 5px; border-radius: 8px; }
.graph-area { height: 200px; border-bottom: 2px solid #555; border-left: 2px solid #555; position: relative; padding: 0 20px; display: flex; align-items: flex-end; justify-content: center; }

.bar-group { display: flex; gap: 20px; align-items: flex-end; height: 100%; width: 50%; }
.bar { width: 40px; border-radius: 4px 4px 0 0; position: relative; transition: height 0.5s ease-out; }
.cost-bar { background: #555; }
.rev-bar { background: var(--gold); box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); }
.bar span { position: absolute; bottom: -25px; width: 100%; text-align: center; font-size: 0.8rem; color: #888; }

.trend-line {
    position: absolute; top: 20%; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,0.1); border-top: 1px dashed #777;
}

/* --- TOOLS --- */
.tool-tile {
    background: var(--panel-bg); padding: 30px; border-radius: 12px; text-align: center; border: 1px solid transparent; transition: 0.3s; height: 100%;
}
.tool-tile:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: 0 10px 30px rgba(255,215,0,0.1); }

/* --- CAREER --- */
.role-list { display: flex; flex-direction: column; gap: 15px; }
.role-item { font-size: 1.1rem; color: var(--text-white); background: rgba(255,255,255,0.05); padding: 10px 20px; border-radius: 4px; }
.salary-card { border: 1px solid var(--gold); }