@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Manrope:wght@300;400;600;700&display=swap');

:root {
    --cream: #F7F4EE;
    --white: #FFFFFF;
    --light-grey: #EAEAEA;
    --dark-grey: #444444;
    --premium-blue: #1E4FFF;
    --deep-obsidian: #0B0B0C;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--cream);
    color: var(--deep-obsidian);
    overflow-x: hidden;
}

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

.font-sans-display {
    font-family: 'Manrope', sans-serif;
}

.glass-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(234, 234, 234, 0.6);
}

.glass-nav {
    background: rgba(247, 244, 238, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(68, 68, 68, 0.08);
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--cream);
}
::-webkit-scrollbar-thumb {
    background: rgba(68, 68, 68, 0.2);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--premium-blue);
}

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

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

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

.grid-bg {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(68, 68, 68, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(68, 68, 68, 0.03) 1px, transparent 1px);
}

img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}
img[loading="lazy"].loaded {
    opacity: 1;
}