:root { color-scheme: dark; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #020617; color: #cbd5e1; margin: 0; overflow-x: hidden; }

a, button, div, span {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-glow { 
    position: fixed; 
    inset: 0; 
    background: radial-gradient(circle at 50% 20%, rgba(59, 130, 246, 0.12) 0%, transparent 50%), 
                radial-gradient(circle at 10% 80%, rgba(168, 85, 247, 0.08) 0%, transparent 40%); 
    z-index: -1; 
    pointer-events: none; 
    animation: pulseGlow 12s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.03); }
}

.bento-card { 
    background: rgba(30, 41, 59, 0.35); 
    backdrop-filter: blur(12px); 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
    position: relative; 
    overflow: hidden; 
}
.bento-card:hover { 
    border-color: rgba(59, 130, 246, 0.4); 
    background: rgba(30, 41, 59, 0.55); 
    transform: translateY(-8px) scale(1.01); 
    box-shadow: 0 40px 100px -20px rgba(59, 130, 246, 0.15), 0 20px 40px -15px rgba(0, 0, 0, 0.7); 
}

.text-gradient { 
    background: linear-gradient(to right, #60a5fa, #a855f7, #60a5fa); 
    background-size: 200% auto;
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    animation: gradientMove 6s linear infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.interactive-link { position: relative; }
.interactive-link::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: #60a5fa; transition: width 0.3s ease;
}
.interactive-link:hover::after { width: 100%; }

.fade-in-up { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}