/* ==========================================
   Base Styles
   ========================================== */
body {
    background-color: #020617; /* Deep Slate */
    color: #f8fafc;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    margin: 0;
}
h1, h2, h3, h4 { 
    font-family: 'Poppins', sans-serif; 
}

/* ==========================================
   Glassmorphism Classes
   ========================================== */
.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.glass-highlight {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(56, 189, 248, 0.3);
}
.text-gradient {
    background: linear-gradient(to right, #38bdf8, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.glass-dropdown {
    background: radial-gradient(black, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}


/* ==========================================
   Blob Animations
   ========================================== */
@keyframes float1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(150px, 100px) scale(1.2); }
}

@keyframes float2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-150px, -100px) scale(1.1); }
}

@keyframes float3 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(150px, -150px) scale(1.2); }
}

.animate-blob1 { animation: float1 15s infinite alternate ease-in-out; }
.animate-blob2 { animation: float2 20s infinite alternate ease-in-out; }
.animate-blob3 { animation: float3 18s infinite alternate ease-in-out; }