body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #e2e8f0;
}
.hero-bg {
    background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.card {
    background: rgba(51, 65, 85, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(148, 163, 184, 0.1);
    transition: all 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}
.typewriter {
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid #3b82f6;
    animation: typing 4s steps(40) 1s both, blink 1s step-end infinite;
}
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}
@keyframes blink {
    from, to { border-color: transparent; }
    50% { border-color: #3b82f6; }
}
.nav-active {
    border-bottom: 2px solid #3b82f6;
}
.skill-bar {
    animation: fill 2s ease-in-out;
}
@keyframes fill {
    from { width: 0%; }
}
#darkModeToggle {
    transition: transform 0.3s ease;
}
#darkModeToggle:hover {
    transform: scale(1.1);
}