@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600&display=swap');
body { font-family: 'Inter', system_ui, sans-serif; }
.title-font { font-family: 'Space Grotesk', sans-serif; }
.star-bg {
    background: radial-gradient(circle at 20% 30%, #1e2937 0%, #0f172a 40%, #020617 80%);
    position: relative;
}
.star-bg::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: transparent url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22 viewBox=%220 0 200 200%22%3E%3Ccircle fill=%22%23e0f2fe%22 cx=%2230%22 cy=%2230%22 r=%221%22/%3E%3Ccircle fill=%22%23e0f2fe%22 cx=%22120%22 cy=%2280%22 r=%221%22/%3E%3Ccircle fill=%22%23e0f2fe%22 cx=%22170%22 cy=%2230%22 r=%221%22/%3E%3C/svg%27') repeat;
    opacity: 0.15;
    pointer-events: none;
    animation: twinkle 8s infinite alternate;
    z-index: 0;
}
@keyframes twinkle { 0% { opacity: 0.15; } 100% { opacity: 0.4; } }
.glass { background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.05); }

/* Ensure z-index layers correctly over the stars */
.relative-layer { position: relative; z-index: 10; }