/* Core Styling */
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #02040a; scroll-behavior: smooth; }

/* Grid Backdrop */
.grid-lines {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(circle at 50% 50%, black, transparent);
}

.text-gradient {
    background: linear-gradient(to right, #38bdf8, #818cf8, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Kinetic Logo */
.logo-stack { width: 40px; height: 40px; position: relative; display: flex; align-items: center; justify-content: center; }
.logo-node { width: 6px; height: 6px; background: #0ea5e9; box-shadow: 0 0 20px #0ea5e9; border-radius: 1px; transform: rotate(45deg); z-index: 2; }
.logo-ring { position: absolute; width: 22px; height: 22px; border: 1px solid rgba(14, 165, 233, 0.3); border-radius: 4px; animation: rotate 8s linear infinite; }
.logo-ring-outer { position: absolute; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 6px; animation: rotate 20s linear reverse infinite; }

@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Portfolio Cards */
.agent-box { background: #040814; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; overflow: hidden; transition: 0.4s ease; }
.agent-box:hover { border-color: #38bdf8; transform: translateY(-8px); }
.box-visual { height: 200px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.05); }
.box-visual img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); opacity: 0.4; transition: 0.8s; }
.agent-box:hover img { filter: grayscale(0%); opacity: 1; transform: scale(1.05); }

.industry-tag { font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: #38bdf8; background: rgba(56, 189, 248, 0.1); padding: 3px 10px; border-radius: 4px; display: inline-block; margin-bottom: 12px; }

/* Infrastructure Cards (The Neural Backbone) */
.infra-card { background: rgba(255,255,255,0.01); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; overflow: hidden; transition: 0.4s ease; }
.infra-card:hover { border-color: rgba(56, 189, 248, 0.4); background: rgba(255,255,255,0.03); transform: translateY(-4px); }
.infra-header { height: 140px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.05); }
.infra-header img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) brightness(0.7); transition: 0.8s; }
.infra-card:hover .infra-header img { filter: grayscale(0%) brightness(1); }

.node-tag { font-family: monospace; font-size: 8px; letter-spacing: 3px; color: #0ea5e9; margin-bottom: 8px; }