/* --- VARIABLES --- */
:root {
    --bg-dark: #0f172a; /* Slate */
    --panel-bg: #1e293b;
    --blue: #2563eb;
    --blue-glow: rgba(37, 99, 235, 0.5);
    --mint: #00e676;
    --text-white: #f8fafc;
    --text-gray: #94a3b8;
}

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

.font-tech { font-family: 'Lexend', sans-serif; }

/* --- BACKGROUND GRAPH --- */
.graph-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -2;
}
.vignette {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 40%, var(--bg-dark) 90%);
    z-index: -1; pointer-events: none;
}

/* --- UTILS --- */
.text-blue { color: var(--blue); text-shadow: 0 0 15px var(--blue-glow); }
.text-mint { color: var(--mint); }
.bg-darker { background-color: #0b1120; }
.bg-dark-glass { background: rgba(30, 41, 59, 0.8); backdrop-filter: blur(10px); }
.bg-panel { background: var(--panel-bg); }

.border-y-blue { border-top: 1px solid rgba(37, 99, 235, 0.3); border-bottom: 1px solid rgba(37, 99, 235, 0.3); }
.border-end-blue { border-right: 1px solid rgba(37, 99, 235, 0.3); }
.border-blue { border: 1px solid var(--blue); }
@media (max-width: 768px) { .border-end-blue { border-right: none; border-bottom: 1px solid rgba(37,99,235,0.3); padding-bottom: 20px; } }

/* --- HERO --- */
.analytics-hero { padding: 120px 0 100px;margin-top: 50px; position: relative; }
.badge-blue {
    border: 1px solid var(--blue); color: var(--blue); padding: 8px 16px; border-radius: 4px;
    font-family: 'Lexend'; display: inline-block; margin-bottom: 20px; background: rgba(37, 99, 235, 0.1);
}

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

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

/* 3D DASHBOARD STACK */
.dashboard-stack { position: relative; width: 350px; height: 350px; margin: 0 auto; perspective: 1000px; }
.dash-layer {
    position: absolute; width: 100%; height: 200px; background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; transition: 0.5s;
}
.layer-1 { top: 100px; z-index: 3; transform: rotateX(10deg) translateZ(50px); border-color: var(--mint); }
.layer-2 { top: 50px; z-index: 2; transform: rotateX(10deg) translateZ(0px) scale(0.9); opacity: 0.8; }
.layer-3 { top: 0px; z-index: 1; transform: rotateX(10deg) translateZ(-50px) scale(0.8); opacity: 0.5; }

.dashboard-stack:hover .layer-1 { transform: rotateX(0) translateZ(50px) translateY(20px); }
.dashboard-stack:hover .layer-2 { transform: rotateX(0) translateZ(0) scale(0.95); opacity: 1; }
.dashboard-stack:hover .layer-3 { transform: rotateX(0) translateZ(-50px) scale(0.9) translateY(-20px); opacity: 0.8; }

.mock-card { display: flex; gap: 15px; align-items: center; }
.mock-pie { width: 50px; height: 50px; background: conic-gradient(var(--mint) 70%, #333 0); border-radius: 50%; }
.mock-stat h3 { margin: 0; color: var(--text-white); }

/* --- CLEANING LAB --- */
.etl-console { background: #0f0f0f; border: 1px solid #333; border-radius: 12px; overflow: hidden; max-width: 900px; margin: 0 auto; }
.etl-header { background: #1a1a1a; padding: 10px 20px; display: flex; justify-content: space-between; border-bottom: 1px solid #333; }
.bg-messy { background: #150505; }
.bg-clean { background: #05150a; }

.clean-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8);
    display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--text-gray); gap: 10px;
}

/* --- TOOL BOXES --- */
.tool-box {
    background: var(--panel-bg); padding: 30px; border-radius: 12px; text-align: center; border: 1px solid transparent; transition: 0.3s; height: 100%;
}
.tool-box:hover { transform: translateY(-5px); background: rgba(37, 99, 235, 0.05); }
.border-green { border-bottom: 4px solid #22c55e; }
.border-blue { border-bottom: 4px solid #2563eb; }
.border-yellow { border-bottom: 4px solid #eab308; }
.border-white { border-bottom: 4px solid #fff; }

/* --- CAREER --- */
.career-stack { display: flex; flex-direction: column; gap: 10px; }
.job-row { background: #1a1a1a; padding: 15px; border-radius: 4px; display: flex; justify-content: space-between; border-left: 3px solid var(--blue); }
.cert-card { border: 1px solid var(--blue); }