:root {
    /* Modern Light Theme with Cool Accents */
    --primary-color: #4f46e5;
    /* Indigo */
    --primary-hover: #4338ca;
    --primary-glow: rgba(79, 70, 229, 0.3);
    --primary-gradient: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);

    --bg-dark: #f1f5f9;
    /* Light background */
    --bg-card: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.8);
    --card-glass: rgba(255, 255, 255, 0.9);

    --text-main: #0f172a;
    /* Dark text */
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    --border-color: #e2e8f0;
    --border-hover: #cbd5e1;

    --header-bg: linear-gradient(135deg, #00BFFF 0%, #1E90FF 100%);
    /* Sky Blue Header */
    --header-text: #ffffff;

    --success-color: #10b981;
    --danger-color: #ef4444;

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;

    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.15);

    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-dark);
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Floating Background Blobs */
body::before,
body::after {
    content: '';
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
    opacity: 0.4;
    animation: floatBlob 20s infinite alternate ease-in-out;
}

body::before {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%);
    top: -10%;
    left: -10%;
}

body::after {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15), transparent 70%);
    bottom: -10%;
    right: -10%;
    animation-delay: -10s;
}

/* Utility */
.wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 64px;
}

.hidden {
    display: none !important;
}

.wide {
    width: 100%;
}

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

/* Animations */
@keyframes floatBlob {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(50px, 50px) scale(1.1);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulseGlow {
    0% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}