/* --- VARIABLES --- */
:root {
    --bg-dark: #0a0a0a;
    --panel-bg: #111111;
    --magma: #f97316;
    --magma-glow: rgba(249, 115, 22, 0.5);
    --blue: #3b82f6;
    --green: #22c55e;
    --text-white: #f3f4f6;
    --text-gray: #9ca3af;
}

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

.font-tech { font-family: 'Share Tech Mono', monospace; }

/* --- BACKGROUND --- */
.circuit-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(rgba(249, 115, 22, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249, 115, 22, 0.05) 1px, transparent 1px);
    background-size: 50px 50px; z-index: -2;
}
.overlay {
    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-magma { color: var(--magma); text-shadow: 0 0 15px var(--magma-glow); }
.text-success { color: var(--green); }
.bg-darker { background-color: #050505; }
.bg-darker-panel { background: #0f0f0f; }

.bg-dark-glass { background: rgba(20, 20, 20, 0.8); backdrop-filter: blur(10px); }
.border-y-magma { border-top: 1px solid rgba(249, 115, 22, 0.3); border-bottom: 1px solid rgba(249, 115, 22, 0.3); }
.border-end-magma { border-right: 1px solid rgba(249, 115, 22, 0.3); }
.border-magma { border: 1px solid var(--magma); }

@media (max-width: 768px) { .border-end-magma { border-right: none; border-bottom: 1px solid rgba(249,115,22,0.3); padding-bottom: 20px; } }

/* --- HERO --- */
.devops-hero { padding: 120px 0 80px; margin-top: 50px; position: relative; overflow: hidden; }
.badge-devops {
    border: 1px solid var(--magma); color: var(--magma); padding: 8px 16px; border-radius: 4px;
    font-family: 'Share Tech Mono'; display: inline-block; margin-bottom: 20px; background: rgba(249, 115, 22, 0.1);
}

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

/* 3D INFINITY LOOP */
.infinity-container { position: relative; width: 300px; height: 150px; margin: 0 auto; }
.infinity-svg { width: 100%; height: 100%; overflow: visible; }
.moving-path { stroke-dasharray: 20; stroke-dashoffset: 200; animation: dash 3s linear infinite; }
@keyframes dash { to { stroke-dashoffset: 0; } }

.floating-icon {
    position: absolute; background: #111; padding: 5px 15px; border: 1px solid var(--magma);
    color: var(--text-white); font-family: 'Share Tech Mono'; font-size: 0.9rem;
    box-shadow: 0 0 15px var(--magma-glow);
}
.dev { top: 0; left: 0; animation: floatLeft 3s ease-in-out infinite; }
.ops { bottom: 0; right: 0; animation: floatRight 3s ease-in-out infinite; }
@keyframes floatLeft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes floatRight { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* --- PIPELINE LAB --- */
.pipeline-console { background: #0f0f0f; border: 1px solid #333; border-radius: 8px; overflow: hidden; max-width: 900px; margin: 0 auto; }
.console-header { background: #1a1a1a; padding: 10px 20px; border-bottom: 1px solid #333; }
.console-body { padding: 30px; }

.pipeline-flow { display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 30px; }
.stage { text-align: center; position: relative; z-index: 2; opacity: 0.5; transition: 0.3s; }
.stage.active { opacity: 1; transform: scale(1.1); }
.stage-icon {
    width: 60px; height: 60px; background: #222; border: 2px solid #444; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 10px; color: #fff;
}
.active .stage-icon { border-color: var(--magma); color: var(--magma); box-shadow: 0 0 15px var(--magma-glow); }
.status-dot { width: 10px; height: 10px; background: #444; border-radius: 50%; margin: 5px auto 0; }
.active .status-dot { background: var(--magma); box-shadow: 0 0 5px var(--magma); }
.success .stage-icon { border-color: var(--green); color: var(--green); }
.success .status-dot { background: var(--green); }

.connector { flex-grow: 1; height: 2px; background: #333; margin: 0 10px; position: relative; top: -25px; z-index: 1; }
.connector.filled { background: var(--magma); transition: background 0.5s; }

.logs-window {
    background: #000; border: 1px solid #333; height: 150px; padding: 15px; font-family: monospace; color: var(--green); font-size: 0.85rem; overflow-y: auto;
}

/* --- CARDS --- */
.problem-card { background: rgba(255,255,255,0.05); padding: 20px; border-radius: 8px; border-left: 4px solid var(--magma); }
.icon-gear { font-size: 1.5rem; color: var(--magma); margin-right: 15px; }

.tool-grid { background: rgba(255,255,255,0.02); }
.tool-box { background: #1a1a1a; padding: 15px; border-radius: 4px; border: 1px solid #333; color: #ccc; transition: 0.3s; }
.tool-box:hover { border-color: var(--magma); color: white; transform: translateY(-3px); }
.tool-box i { font-size: 1.5rem; margin-bottom: 5px; display: block; color: var(--magma); }

.tech-card { background: var(--panel-bg); padding: 30px; border-radius: 4px; transition: 0.3s; height: 100%; border: 1px solid transparent; }
.tech-card:hover { border-color: var(--magma); transform: translateY(-5px); background: rgba(249, 115, 22, 0.05); }

.outcome-tag { background: rgba(255,255,255,0.05); padding: 12px 20px; border-radius: 4px; font-family: monospace; border: 1px solid #333; }
.cert-box { border-radius: 12px; }