/* style.css */

/* Base Styles */
body {
    background-color: #0B1120; /* deep-900 */
    color: #E2E8F0; /* slate-200 */
}

/* Linear.app Style Elements */
.glass-card {
    background: rgba(30, 41, 59, 0.4); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-nav {
    background: rgba(11, 17, 32, 0.8); 
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

/* Micro-interaction/Tech Badge (Visual/Byte Effect) */
.tech-badge {
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(56, 189, 248, 0.05);
}

.tech-badge:hover {
    background: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
    transform: translateY(-2px) scale(1.02);
}

/* Subtle pulse animation for Hero text (The "Byte" effect) */
@keyframes pulse-glow {
    0%, 100% {
        text-shadow: 0 0 5px rgba(56, 189, 248, 0.2), 0 0 10px rgba(14, 165, 233, 0.1);
    }
    50% {
        text-shadow: 0 0 10px rgba(56, 189, 248, 0.4), 0 0 20px rgba(14, 165, 233, 0.3);
    }
}
.hero-glow-pulse {
    animation: pulse-glow 4s ease-in-out infinite;
}

/* Z-index fix for particles.js */
#particles-js {
    z-index: 0;
}