body {
    font-family: 'DM Sans', sans-serif;
    background-color: #f8fafc;
    color: #0f172a;
    transition: background-color 0.3s, color 0.3s;
}

.dark body {
    background-color: #020617;
    color: #f8fafc;
}

.playfair {
    font-family: 'Playfair Display', serif;
}

.glass-nav {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    transition: background-color 0.3s, border-color 0.3s;
}

.dark .glass-nav {
    background: rgba(2, 6, 23, 0.4);
    border-bottom: 1px solid rgba(30, 41, 59, 0.5);
}

.bg-grid-pattern {
    background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
    background-size: 32px 32px;
}

.dark .bg-grid-pattern {
    background-image: radial-gradient(#1e293b 1.5px, transparent 1.5px);
}

/* Gradient Mesh Animation */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(40px, -60px) scale(1.1); }
    66% { transform: translate(-30px, 30px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
    animation: blob 15s infinite alternate;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* Fade in animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }