body {
    background-color: #F8FAFC;
    color: #0F172A;
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

.dark body {
    background-color: #0B0B15;
    color: #F8FAFC;
}

h1,
h2,
h3,
h4,
.font-display {
    font-family: 'Outfit', sans-serif;
}

.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.dark .glass {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-hover:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
}

.dark .glass-hover:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
}

.text-gradient {
    background: linear-gradient(135deg, #60A5FA 0%, #A78BFA 50%, #F472B6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-gradient-main {
    background: radial-gradient(circle at top center, #1e1b4b 0%, #0B0B15 60%);
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}