/* Custom CSS variables for consistent theming, extending Tailwind defaults */
        :root {
            --bg-dark: #0A0A0C;
            --card-bg: #1C1C1E;
            --text-primary: #FFFFFF;
            --text-secondary: #AEAEB2;
            --border-color: #3A3A3C;
            --accent-purple: #5856d6;
            --accent-blue: #007AFF;
            --accent-green: #34C759;
            --accent-orange: #FF9500;
            --accent-pink: #FF2D55;
            --accent-vibrant-purple: #9900FF;
            --modal-bg-overlay: rgba(0, 0, 0, 0.8);
            --modal-blur-strength: 15px;
        }

        /* Base body styles, ensuring full height and custom font */
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden; /* Prevent horizontal scroll */
            position: relative; /* For background gradient positioning */
            padding-bottom: 50px; /* Space for potential footer or content */
        }

        /* Global background gradient overlay for visual depth */
        .background-gradient-overlay {
            position: fixed;
            inset: 0; /* Covers the entire viewport */
            pointer-events: none; /* Allows clicks/interactions on elements beneath it */
            opacity: 0.15; /* Subtle transparency */
            z-index: -1; /* Sends it to the back */
            background: radial-gradient(circle at top left, var(--accent-purple) 0%, transparent 25%),
                        radial-gradient(circle at bottom right, var(--accent-blue) 0%, transparent 25%);
        }

        /* Keyframe animations for dynamic UI elements */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

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

        @keyframes float {
            0% { transform: translateY(0px) translateX(0px) rotate(0deg); opacity: 0.7; }
            25% { transform: translateY(-5px) translateX(5px) rotate(1deg); opacity: 0.8; }
            50% { transform: translateY(0px) translateX(0px) rotate(0deg); opacity: 0.7; }
            75% { transform: translateY(5px) translateX(-5px) rotate(-1deg); opacity: 0.8; }
            100% { transform: translateY(0px) translateX(0px) rotate(0deg); opacity: 0.7; }
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }

        /* Applying animations with delays for a staggered effect */
        .animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }
        .animate-slide-in-up { animation: slideInUp 0.8s ease-out forwards; }
        .animate-scale-in { animation: scaleIn 0.5s ease-out forwards; }
        .animate-float { animation: float 6s ease-in-out infinite; }
        .animate-bounce { animation: bounce 2s infinite; }

        /* Custom scrollbar for a sleek look (WebKit browsers) */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #1C1C1E;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb {
            background: var(--accent-blue);
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #0056b3;
        }

        /* Styling for the disclaimer modal */
        .disclaimer-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--modal-bg-overlay); /* Semi-transparent dark background */
            backdrop-filter: blur(var(--modal-blur-strength)); /* Blur the background content */
            -webkit-backdrop-filter: blur(var(--modal-blur-strength)); /* Safari support */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000; /* High z-index to appear on top */
            visibility: hidden; /* Hidden by default */
            opacity: 0;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Smooth transition */
        }

        .disclaimer-modal-overlay.visible {
            visibility: visible;
            opacity: 1;
        }

        .disclaimer-modal-content {
            background-color: var(--card-bg);
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            max-width: 500px;
            width: 90%; /* Responsive width */
            box-sizing: border-box; /* Include padding in width calculation */
            transform: translateY(20px); /* Start slightly below for slide-up animation */
            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
            border: 1px solid var(--border-color); /* Subtle border */
        }

        .disclaimer-modal-overlay.visible .disclaimer-modal-content {
            transform: translateY(0); /* Slide up on visible */
            opacity: 1;
        }

        /* Hero text glow effect */
        .hero-text-glow {
            text-shadow:
                0 0 5px rgba(0, 122, 255, 0.5), /* Blue glow */
                0 0 10px rgba(88, 86, 214, 0.4); /* Purple glow */
        }

        /* Floating background shapes */
        .floating-shape {
            position: absolute;
            background: radial-gradient(circle at center, var(--color) 0%, transparent 70%);
            opacity: 0.1; /* Very subtle */
            filter: blur(30px);
            border-radius: 50%;
            pointer-events: none;
            animation: float var-duration ease-in-out infinite;
        }
        /* Specific positions and sizes for floating shapes */
        .floating-shape-1 {
            width: 150px; height: 150px;
            top: 10%; left: 5%;
            --color: var(--accent-purple);
            --duration: 7s;
            animation-delay: 0s;
        }
        .floating-shape-2 {
            width: 200px; height: 200px;
            top: 70%; left: 80%;
            --color: var(--accent-blue);
            --duration: 8s;
            animation-delay: 1s;
        }
        .floating-shape-3 {
            width: 100px; height: 100px;
            top: 30%; left: 90%;
            --color: var(--accent-green);
            --duration: 6s;
            animation-delay: 2s;
        }
        .floating-shape-4 {
            width: 180px; height: 180px;
            top: 50%; left: 15%;
            --color: var(--accent-orange);
            --duration: 7.5s;
            animation-delay: 0.5s;
        }