* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

img,
svg {
    max-width: 100%;
    height: auto;
}

:root {
    --primary: #7c3aed;
    --primary-dark: #6d28d9;
    --primary-light: #8b5cf6;
    --secondary: #06b6d4;
    --secondary-dark: #0891b2;
    --accent: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    --accent-light: #fbbf24;
    --dark: #0a0e23;
    --darker: #070a1a;
    --light: #f8fafc;
    --gray: #6c757d;
    --gradient: linear-gradient(135deg, #7c3aed, #06b6d4);
    --gradient-dark: linear-gradient(135deg, #6d28d9, #0891b2);
    --gradient-gold: linear-gradient(135deg, #ffd700, #ffed4e);
    --gradient-purple: linear-gradient(135deg, #8b5cf6, #7c3aed);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 40px rgba(124, 58, 237, 0.3);
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    background: linear-gradient(135deg, var(--darker), #1d2b53, #2d1b69);
    color: var(--light);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    background-attachment: fixed;
}

@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }
}