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

:root {
    --accent: #2563eb;
    --dark: #0f172a;
    --text: #334155;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    scroll-behavior: smooth;
}

h1, h2, h3, .font-display {
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.02em;
    color: var(--dark);
}

.reveal-element {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}

img {
    filter: saturate(0.8) contrast(1.1);
    transition: all 0.6s ease;
}

img:hover {
    filter: saturate(1) contrast(1);
    transform: scale(1.02);
}

#cookie-popup {
    transition: opacity 0.5s ease;
}

.shadow-3xl {
    box-shadow: 0 50px 100px -20px rgba(37, 99, 235, 0.25);
}

header {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px);
}

::selection {
    background: var(--accent);
    color: white;
}

.reveal-element img {
    border-radius: 1.5rem;
    transition: filter 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.25);
}