* {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }



        body {

            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

            background: #000000;

            color: #ffffff;

            overflow-x: hidden;

            min-height: 100vh;

            position: relative;

        }



        /* Advanced animated mesh gradient background */

        .background-container {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            z-index: 0;

            overflow: hidden;

            pointer-events: none;

        }



        .mesh-gradient {

            position: absolute;

            width: 100%;

            height: 100%;

            background: 

                radial-gradient(at 20% 30%, rgba(220, 38, 38, 0.15) 0px, transparent 50%),

                radial-gradient(at 80% 70%, rgba(153, 27, 27, 0.15) 0px, transparent 50%),

                radial-gradient(at 50% 50%, rgba(127, 29, 29, 0.1) 0px, transparent 50%);

            animation: meshMove 20s ease-in-out infinite;

        }



        @keyframes meshMove {

            0%, 100% { transform: translate(0, 0) scale(1); }

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

            66% { transform: translate(-50px, 50px) scale(0.9); }

        }



        .gradient-orb {

            position: absolute;

            border-radius: 50%;

            filter: blur(100px);

            opacity: 0.4;

            animation: float 25s infinite ease-in-out;

        }



        .orb-1 {

            width: 600px;

            height: 600px;

            background: radial-gradient(circle, #dc2626 0%, transparent 70%);

            top: -15%;

            left: -15%;

            animation-delay: 0s;

        }



        .orb-2 {

            width: 500px;

            height: 500px;

            background: radial-gradient(circle, #991b1b 0%, transparent 70%);

            bottom: -15%;

            right: -15%;

            animation-delay: -8s;

        }



        .orb-3 {

            width: 400px;

            height: 400px;

            background: radial-gradient(circle, #7f1d1d 0%, transparent 70%);

            top: 50%;

            left: 50%;

            animation-delay: -16s;

        }



        @keyframes float {

            0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }

            33% { transform: translate(120px, -120px) scale(1.15) rotate(120deg); }

            66% { transform: translate(-120px, 120px) scale(0.85) rotate(240deg); }

        }



        /* Enhanced particle system */

        .particles {

            position: absolute;

            width: 100%;

            height: 100%;

        }



        .particle {

            position: absolute;

            background: rgba(220, 38, 38, 0.6);

            border-radius: 50%;

            pointer-events: none;

        }



        .particle-small {

            width: 2px;

            height: 2px;

            animation: particleFloat 20s infinite ease-in-out;

        }



        .particle-medium {

            width: 4px;

            height: 4px;

            animation: particleFloat 25s infinite ease-in-out;

        }



        .particle-large {

            width: 6px;

            height: 6px;

            animation: particleFloat 30s infinite ease-in-out;

            box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);

        }



        @keyframes particleFloat {

            0%, 100% { 

                transform: translateY(0) translateX(0) scale(1); 

                opacity: 0; 

            }

            10% { opacity: 1; }

            90% { opacity: 1; }

            100% { 

                transform: translateY(-120vh) translateX(100px) scale(0.5); 

                opacity: 0; 

            }

        }



        /* Cursor glow effect */

        .cursor-glow {

            position: fixed;

            width: 400px;

            height: 400px;

            background: radial-gradient(circle, rgba(220, 38, 38, 0.15) 0%, transparent 70%);

            pointer-events: none;

            z-index: 9999;

            transform: translate(-50%, -50%);

            transition: opacity 0.3s ease;

            opacity: 0;

        }



        /* Main Container */

        .main-container {

            position: relative;

            z-index: 1;

            min-height: 100vh;

            padding: 120px 20px 80px;

        }



        .content-wrapper {

            max-width: 900px;

            margin: 0 auto;

        }



        /* Enhanced page header with better animations */

        .page-header {

            text-align: center;

            margin-bottom: 80px;

            animation: fadeInDown 1s cubic-bezier(0.16, 1, 0.3, 1);

        }



        .page-title {

            font-size: clamp(2.5rem, 6vw, 4rem);

            font-weight: 900;

            margin-bottom: 24px;

            background: linear-gradient(135deg, #ffffff 0%, #dc2626 50%, #991b1b 100%);

            background-size: 200% 200%;

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

            letter-spacing: -0.03em;

            animation: shimmer 4s ease-in-out infinite, fadeInDown 1s cubic-bezier(0.16, 1, 0.3, 1);

        }



        @keyframes shimmer {

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

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

        }



        .page-subtitle {

            font-size: clamp(1.05rem, 2.5vw, 1.25rem);

            color: rgba(255, 255, 255, 0.65);

            max-width: 700px;

            margin: 0 auto;

            line-height: 1.7;

            font-weight: 400;

        }



        /* Premium login gate with 3D effects */

        .login-gate {

            background: rgba(15, 15, 15, 0.7);

            backdrop-filter: blur(30px);

            border: 1px solid rgba(255, 255, 255, 0.08);

            border-radius: 32px;

            padding: 70px 50px;

            text-align: center;

            position: relative;

            overflow: hidden;

            animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;

            transform-style: preserve-3d;

            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

        }



        .login-gate::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            height: 2px;

            background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.6), transparent);

            animation: slideGlow 3s ease-in-out infinite;

        }



        @keyframes slideGlow {

            0%, 100% { transform: translateX(-100%); opacity: 0; }

            50% { opacity: 1; }

            100% { transform: translateX(100%); opacity: 0; }

        }



        .login-gate::after {

            content: '';

            position: absolute;

            top: 50%;

            left: 50%;

            width: 300px;

            height: 300px;

            background: radial-gradient(circle, rgba(220, 38, 38, 0.1) 0%, transparent 70%);

            transform: translate(-50%, -50%);

            animation: pulse 3s ease-in-out infinite;

        }



        @keyframes pulse {

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

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

        }



        /* Animated login icon with custom SVG */

        .login-icon {

            width: 100px;

            height: 100px;

            margin: 0 auto 32px;

            background: linear-gradient(135deg, rgba(220, 38, 38, 0.25), rgba(153, 27, 27, 0.25));

            border-radius: 24px;

            display: flex;

            align-items: center;

            justify-content: center;

            position: relative;

            z-index: 1;

            animation: iconFloat 3s ease-in-out infinite;

            box-shadow: 0 10px 40px rgba(220, 38, 38, 0.3);

        }



        @keyframes iconFloat {

            0%, 100% { transform: translateY(0) rotate(0deg); }

            50% { transform: translateY(-10px) rotate(5deg); }

        }



        .login-icon svg {

            filter: drop-shadow(0 4px 8px rgba(220, 38, 38, 0.4));

        }



        .login-icon .lock-body {

            animation: lockShake 2s ease-in-out infinite;

            transform-origin: center;

        }



        @keyframes lockShake {

            0%, 100% { transform: rotate(0deg); }

            25% { transform: rotate(-3deg); }

            75% { transform: rotate(3deg); }

        }



        .login-gate h2 {

            font-size: clamp(1.75rem, 4vw, 2.5rem);

            margin-bottom: 20px;

            color: #ffffff;

            font-weight: 800;

            position: relative;

            z-index: 1;

            letter-spacing: -0.02em;

        }



        .login-gate p {

            font-size: clamp(1rem, 2.5vw, 1.125rem);

            color: rgba(255, 255, 255, 0.7);

            margin-bottom: 40px;

            line-height: 1.7;

            position: relative;

            z-index: 1;

            max-width: 600px;

            margin-left: auto;

            margin-right: auto;

        }



        /* Premium button group with better animations */

        .button-group {

            display: flex;

            flex-direction: column;

            gap: 16px;

            max-width: 450px;

            margin: 0 auto 40px;

            position: relative;

            z-index: 1;

        }



        .btn {

            padding: 18px 40px;

            border-radius: 16px;

            font-size: 1.05rem;

            font-weight: 700;

            border: none;

            cursor: pointer;

            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

            position: relative;

            overflow: hidden;

            text-decoration: none;

            display: inline-block;

            text-align: center;

            letter-spacing: 0.02em;

        }



        .btn-primary {

            background: linear-gradient(135deg, #dc2626, #991b1b);

            color: white;

            box-shadow: 0 8px 32px rgba(220, 38, 38, 0.4);

        }



        .btn-primary::before {

            content: '';

            position: absolute;

            top: 0;

            left: -100%;

            width: 100%;

            height: 100%;

            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

            transition: left 0.6s ease;

        }



        .btn-primary:hover {

            transform: translateY(-4px) scale(1.02);

            box-shadow: 0 12px 48px rgba(220, 38, 38, 0.5);

        }



        .btn-primary:hover::before {

            left: 100%;

        }



        .btn-primary:active {

            transform: translateY(-2px) scale(1);

        }



        .btn-secondary {

            background: rgba(255, 255, 255, 0.06);

            color: white;

            border: 1.5px solid rgba(255, 255, 255, 0.12);

            backdrop-filter: blur(10px);

        }



        .btn-secondary:hover {

            background: rgba(255, 255, 255, 0.1);

            border-color: rgba(220, 38, 38, 0.5);

            transform: translateY(-4px) scale(1.02);

            box-shadow: 0 8px 32px rgba(220, 38, 38, 0.2);

        }



        .btn-secondary:active {

            transform: translateY(-2px) scale(1);

        }



        /* Divider */

        .divider {

            display: flex;

            align-items: center;

            margin: 50px 0;

            color: rgba(255, 255, 255, 0.4);

            font-size: 0.9rem;

            font-weight: 600;

            position: relative;

            z-index: 1;

        }



        .divider::before,

        .divider::after {

            content: '';

            flex: 1;

            height: 1px;

            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);

        }



        .divider span {

            padding: 0 24px;

            letter-spacing: 0.1em;

        }



        /* Enhanced support section with better styling */

        .support-section {

            background: rgba(15, 15, 15, 0.5);

            border: 1px solid rgba(255, 255, 255, 0.06);

            border-radius: 20px;

            padding: 40px;

            position: relative;

            z-index: 1;

            backdrop-filter: blur(20px);

        }



        .support-section h3 {

            font-size: 1.4rem;

            margin-bottom: 16px;

            color: #ffffff;

            font-weight: 700;

            letter-spacing: -0.01em;

        }



        .support-section p {

            color: rgba(255, 255, 255, 0.65);

            margin-bottom: 24px;

            line-height: 1.7;

            font-size: 1.05rem;

        }



        .support-links {

            display: flex;

            flex-wrap: wrap;

            gap: 14px;

        }



        .support-link {

            display: inline-flex;

            align-items: center;

            gap: 10px;

            padding: 14px 24px;

            background: rgba(255, 255, 255, 0.06);

            border: 1px solid rgba(255, 255, 255, 0.1);

            border-radius: 12px;

            color: rgba(255, 255, 255, 0.85);

            text-decoration: none;

            font-size: 0.95rem;

            font-weight: 600;

            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        }



        .support-link:hover {

            background: rgba(220, 38, 38, 0.15);

            border-color: rgba(220, 38, 38, 0.4);

            color: #dc2626;

            transform: translateY(-3px);

            box-shadow: 0 8px 24px rgba(220, 38, 38, 0.2);

        }



        .support-link svg {

            transition: transform 0.3s ease;

        }



        .support-link:hover svg {

            transform: scale(1.1) rotate(5deg);

        }



        /* Premium info cards with 3D magnetic effects */

        .info-cards {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

            gap: 24px;

            margin-top: 60px;

            animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;

        }



        .info-card {

            background: rgba(15, 15, 15, 0.6);

            backdrop-filter: blur(20px);

            border: 1px solid rgba(255, 255, 255, 0.08);

            border-radius: 24px;

            padding: 36px 28px;

            position: relative;

            overflow: hidden;

            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

            cursor: pointer;

            transform-style: preserve-3d;

        }



        .info-card::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(220, 38, 38, 0.15) 0%, transparent 60%);

            opacity: 0;

            transition: opacity 0.4s ease;

        }



        .info-card:hover {

            transform: translateY(-8px) scale(1.02);

            border-color: rgba(220, 38, 38, 0.4);

            box-shadow: 0 20px 60px rgba(220, 38, 38, 0.25);

        }



        .info-card:hover::before {

            opacity: 1;

        }



        /* Animated icon containers with custom SVG animations */

        .info-card-icon {

            width: 64px;

            height: 64px;

            background: linear-gradient(135deg, rgba(220, 38, 38, 0.25), rgba(153, 27, 27, 0.25));

            border-radius: 16px;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-bottom: 24px;

            position: relative;

            z-index: 1;

            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

            box-shadow: 0 8px 24px rgba(220, 38, 38, 0.2);

        }



        .info-card:hover .info-card-icon {

            transform: scale(1.1) rotate(5deg);

            box-shadow: 0 12px 32px rgba(220, 38, 38, 0.4);

        }



        /* Bug icon animation */

        .bug-antenna {

            animation: antennaWiggle 2s ease-in-out infinite;

            transform-origin: bottom center;

        }



        @keyframes antennaWiggle {

            0%, 100% { transform: rotate(0deg); }

            25% { transform: rotate(-10deg); }

            75% { transform: rotate(10deg); }

        }



        /* Settings icon animation */

        .settings-gear {

            animation: gearRotate 8s linear infinite;

            transform-origin: center;

        }



        @keyframes gearRotate {

            from { transform: rotate(0deg); }

            to { transform: rotate(360deg); }

        }



        /* Feature icon animation */

        .feature-star {

            animation: starTwinkle 2s ease-in-out infinite;

        }



        @keyframes starTwinkle {

            0%, 100% { opacity: 1; transform: scale(1); }

            50% { opacity: 0.6; transform: scale(0.9); }

        }



        .info-card h4 {

            font-size: 1.3rem;

            margin-bottom: 12px;

            color: #ffffff;

            font-weight: 700;

            position: relative;

            z-index: 1;

            letter-spacing: -0.01em;

        }



        .info-card p {

            font-size: 0.975rem;

            color: rgba(255, 255, 255, 0.65);

            line-height: 1.6;

            position: relative;

            z-index: 1;

        }



        /* Animations */

        @keyframes fadeInDown {

            from {

                opacity: 0;

                transform: translateY(-40px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }



        @keyframes fadeInUp {

            from {

                opacity: 0;

                transform: translateY(40px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }



        /* Mobile Optimization */

        @media (max-width: 768px) {

            .main-container {

                padding: 80px 16px 60px;

            }



            .page-header {

                margin-bottom: 50px;

            }



            .login-gate {

                padding: 50px 28px;

                border-radius: 24px;

            }



            .login-icon {

                width: 80px;

                height: 80px;

            }



            .button-group {

                max-width: 100%;

            }



            .support-section {

                padding: 28px;

            }



            .support-links {

                flex-direction: column;

            }



            .support-link {

                justify-content: center;

            }



            .info-cards {

                grid-template-columns: 1fr;

                gap: 20px;

                margin-top: 40px;

            }



            .gradient-orb {

                filter: blur(70px);

            }



            .cursor-glow {

                display: none;

            }

        }



        @media (max-width: 480px) {

            .login-gate {

                padding: 40px 20px;

            }



            .button-group {

                gap: 12px;

            }



            .btn {

                padding: 16px 32px;

                font-size: 1rem;

            }



            .info-card {

                padding: 28px 20px;

            }

        }



        /* Reduced Motion */

        @media (prefers-reduced-motion: reduce) {

            *,

            *::before,

            *::after {

                animation-duration: 0.01ms !important;

                animation-iteration-count: 1 !important;

                transition-duration: 0.01ms !important;

            }

        }