/* --- VARIABLES --- */
:root {
    --bg-dark: #0f172a;
    --panel-bg: #1e293b;
    --gold: #fbbf24;
    --gold-glow: rgba(251, 191, 36, 0.5);
    --cyan: #22d3ee;
    --text-white: #ffffff;
    --text-gray: #94a3b8;
}

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

/* FONTS */
.font-tech { font-family: 'Chakra Petch', sans-serif; letter-spacing: 0.5px; }

/* --- BACKGROUND HEX GRID --- */
.hex-grid {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill-opacity='0.03' fill='%23fbbf24' fill-rule='evenodd'/%3E%3C/svg%3E");
    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-gold { color: var(--gold); text-shadow: 0 0 15px var(--gold-glow); }
.text-cyan { color: var(--cyan); }
.text-orange { color: #f97316; }
.text-success { color: #22c55e; }
.text-gray { color: var(--text-gray); }

.bg-dark-glass { background: rgba(30, 41, 59, 0.8); backdrop-filter: blur(10px); }
.bg-darker-panel { background: #020617; }
.border-y-gold { border-top: 1px solid rgba(251, 191, 36, 0.3); border-bottom: 1px solid rgba(251, 191, 36, 0.3); }
.border-end-gold { border-right: 1px solid rgba(251, 191, 36, 0.3); }
.border-gold { border: 1px solid var(--gold); }

@media (max-width: 768px) { .border-end-gold { border-right: none; border-bottom: 1px solid rgba(251,191,36,0.3); padding-bottom: 20px; } }

/* --- HERO --- */
.micro-hero { padding: 80px 0; min-height: 90vh; display: flex; align-items: center; }
.badge-micro { border: 1px solid var(--gold); color: var(--gold); display: inline-block; padding: 5px 20px; border-radius: 4px; font-family: 'Chakra Petch'; text-transform: uppercase; margin-bottom: 20px; font-size: 0.8rem; background: rgba(251, 191, 36, 0.1); }

.btn-gold {
    background: var(--gold); color: #000; padding: 15px 40px; font-weight: 700; text-decoration: none; border-radius: 4px; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px;
}
.btn-gold:hover { background: #f59e0b; box-shadow: 0 0 30px var(--gold-glow); transform: translateY(-2px); color: #000; }

/* --- 3D CONTAINER VISUAL --- */
.dock-stack { position: relative; width: 300px; height: 350px; margin: 0 auto; perspective: 1000px; }
.container-box {
    width: 200px; height: 60px; background: rgba(30, 41, 59, 0.9); border: 2px solid var(--cyan); border-radius: 4px;
    position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 10px; font-family: 'Chakra Petch'; color: var(--cyan);
    box-shadow: 0 10px 30px rgba(34, 211, 238, 0.2); animation: hoverStack 4s infinite ease-in-out;
}
.box-3 { bottom: 60px; animation-delay: 0s; }
.box-2 { bottom: 130px; animation-delay: 0.5s; }
.box-1 { bottom: 200px; border-color: var(--gold); color: var(--gold); animation-delay: 1s; }

.platform-base {
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) rotateX(45deg);
    width: 250px; height: 150px; background: rgba(34, 211, 238, 0.1); border: 2px solid var(--cyan);
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; font-size: 0.8rem; color: var(--cyan);
}

@keyframes hoverStack { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } }

/* --- SCALE LAB --- */
.scale-console { background: #0f172a; border: 1px solid #333; border-radius: 8px; overflow: hidden; max-width: 900px; margin: 0 auto; }
.console-header { background: #1e293b; padding: 10px 20px; font-family: 'Chakra Petch'; border-bottom: 1px solid #333; }
.console-body { padding: 30px; }

.cluster-visual { position: relative; margin-top: 30px; display: flex; justify-content: space-between; align-items: flex-start; min-height: 200px; }
.load-balancer { width: 80px; height: 80px; background: var(--text-white); color: #000; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: bold; z-index: 2; position: relative; }

.traffic-flow { flex-grow: 1; height: 80px; position: relative; overflow: hidden; }
.packet { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; position: absolute; top: 36px; animation: movePacket 1s linear infinite; }
.packet.fast { animation-duration: 0.2s; background: #ef4444; }
@keyframes movePacket { from { left: 0; opacity: 1; } to { left: 100%; opacity: 0; } }

.node-grid { display: flex; flex-direction: column; gap: 10px; width: 120px; }
.server-node { background: #1e293b; border: 1px solid #333; padding: 10px; border-radius: 4px; text-align: center; opacity: 0; transition: 0.5s; transform: scale(0.9); }
.server-node.active { opacity: 1; transform: scale(1); border-color: var(--cyan); }
.cpu-bar { width: 100%; height: 4px; background: #333; margin-top: 5px; border-radius: 2px; }
.fill { height: 100%; background: var(--cyan); transition: width 0.2s; }

/* --- ARCHITECTURE --- */
.arch-flow { display: flex; flex-direction: column; align-items: center; text-align: center; }
.service-box { background: var(--panel-bg); border: 1px solid #444; padding: 10px 20px; border-radius: 4px; color: white; width: 150px; }
.mq-box { background: #f97316; color: white; padding: 15px 30px; border-radius: 4px; font-weight: bold; width: 200px; margin: 10px 0; }
.arrow-down { margin: 5px 0; font-size: 1.2rem; }
.small-box { width: 120px; font-size: 0.9rem; }

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

.tech-hex { background: var(--panel-bg); padding: 30px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); transition: 0.3s; height: 100%; }
.tech-hex:hover { background: rgba(251, 191, 36, 0.1); transform: translateY(-5px); }

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