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

:root {
    --bg: #030308;
    --glass: rgba(255, 255, 255, 0.06);
    --border: rgba(255, 255, 255, 0.10);
    --neon-blue: #00f3ff;
    --neon-pink: #d946ef;
    --neon-indigo: #818cf8;
    --ui-bg: rgba(10, 10, 14, 0.85);
    --danger: #ef4444;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    background-color: var(--bg);
    font-family: 'Rajdhani', 'Inter', sans-serif;
    color: white;
    -webkit-touch-callout: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#bg-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(99, 102, 241, 0.18), transparent 65%),
        radial-gradient(ellipse 60% 40% at 10% 10%, rgba(217, 70, 239, 0.10), transparent 70%),
        radial-gradient(ellipse 50% 40% at 90% 20%, rgba(0, 243, 255, 0.08), transparent 70%),
        radial-gradient(circle at 50% 120%, #171729, #050510 60%, #000 100%);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.05ms !important; }
}