@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --accent: #3b82f6;
    --bg: #020617;
}

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background-color: var(--bg);
    overflow-x: hidden;
    margin: 0;
}

/* Background Layers */
#bg-canvas { opacity: 0.4; pointer-events: none; }

.blob-bg {
    position: fixed; inset: 0;
    background: radial-gradient(circle at 10% 10%, #1e40af15 0%, transparent 40%),
                radial-gradient(circle at 90% 90%, #3b82f610 0%, transparent 40%);
    z-index: -2;
}

.grid-overlay {
    position: fixed; inset: 0;
    background-image: linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: -1;
}

/* Nav & Links */
.nav-link {
    position: relative;
    color: #94a3b8;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-link:hover { color: white; transform: translateY(-1px); }
.nav-link::after {
    content: ''; position: absolute; bottom: -8px; left: 50%;
    width: 0; height: 2px; background: var(--accent);
    transition: all 0.3s ease; transform: translateX(-50%);
}
.nav-link:hover::after { width: 100%; }

/* Fade In Animation */
.page-enter-anim {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); filter: blur(10px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.glass { background: rgba(2, 6, 23, 0.8); backdrop-filter: blur(20px); }
.glass-dark { background: rgba(2, 6, 23, 0.95); backdrop-filter: blur(40px); }

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }

input, textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}