:root {
     --brand-primary: #af0101;
     --brand-secondary: #900000;
     --bg-gradient-top: #313131;
     --bg-gradient-bottom: #313131;
     --surface-contrast: #313131;
     --text-white: #ffffff;
 }

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

 html,
 body {
     height: 100%;
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 }

 body {
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
     background: linear-gradient(168deg, var(--bg-gradient-top) -0.32%, var(--bg-gradient-bottom) 121.06%);
     color: #ffffff;
     overflow: hidden;
     position: relative;
 }
 
 body::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background:
         radial-gradient(ellipse at 20% 30%, color-mix(in srgb, var(--brand-primary) 12%, transparent) 0%, transparent 50%),
         radial-gradient(ellipse at 80% 70%, color-mix(in srgb, var(--brand-secondary) 10%, transparent) 0%, transparent 50%),
         radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--brand-primary) 6%, transparent) 0%, transparent 60%);
     animation: aurora 20s ease-in-out infinite;
 }

 @keyframes aurora {

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

     50% {
         transform: rotate(180deg) scale(1.1);
     }
 }

 /* Grid pattern overlay */
 body::after {
     content: '';
     position: absolute;
     inset: 0;
     background-image:
         linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
     background-size: 60px 60px;
     pointer-events: none;
 }

 .container {
     position: relative;
     z-index: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 3rem;
     padding: 2rem;
     text-align: center;
     animation: fadeInUp 0.8s ease-out;
 }

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

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

 .logo-wrapper {
     position: relative;
     padding: 2rem;
 }

 .logo-wrapper::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 20%, transparent) 0%, transparent 70%);
     border-radius: 50%;
     filter: blur(40px);
     animation: pulse 4s ease-in-out infinite;
 }

 @keyframes pulse {

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

     50% {
         opacity: 0.8;
         transform: scale(1.1);
     }
 }

 .logo {
     position: relative;
     max-width: 220px;
     max-height: 110px;
     width: auto;
     height: auto;
     filter: drop-shadow(0 0 40px color-mix(in srgb, var(--brand-primary) 40%, transparent));
     animation: logoFloat 6s ease-in-out infinite;
 }

 @keyframes logoFloat {

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

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

 .content {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1rem;
 }

 .coming-soon {
     font-size: clamp(2.5rem, 8vw, 4rem);
     font-weight: 700;
     letter-spacing: -0.02em;
     background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--brand-primary) 70%, white) 50%, var(--brand-primary) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: shimmer 3s ease-in-out infinite;
 }

 @keyframes shimmer {

     0%,
     100% {
         filter: brightness(1);
     }

     50% {
         filter: brightness(1.2);
     }
 }

 .subtitle {
     font-size: 1.125rem;
     font-weight: 500;
     color: var(--text-white);
     opacity: 0.85;
     letter-spacing: 0.1em;
     text-transform: uppercase;
 }

 .login-btn {
     margin-top: 1rem;
     padding: 1rem 2.5rem;
     font-family: inherit;
     font-size: 1rem;
     font-weight: 600;
     letter-spacing: 0.025em;
     color: #ffffff;
     background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
     border: none;
     border-radius: 9999px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
     box-shadow:
         0 4px 20px color-mix(in srgb, var(--brand-primary) 50%, transparent),
         0 0 0 1px rgba(255, 255, 255, 0.1) inset;
 }

 .login-btn::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .login-btn:hover {
     transform: translateY(-2px);
     box-shadow:
         0 8px 30px color-mix(in srgb, var(--brand-primary) 60%, transparent),
         0 0 0 1px rgba(255, 255, 255, 0.15) inset;
 }

 .login-btn:hover::before {
     opacity: 1;
 }

 .login-btn:active {
     transform: translateY(0);
 }

 /* Loading state */
 .login-btn.loading {
     pointer-events: none;
     opacity: 0.7;
 }

 /* Decorative elements */
 .decoration {
     position: fixed;
     border-radius: 50%;
     pointer-events: none;
 }

 .decoration-1 {
     top: 10%;
     right: 15%;
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, color-mix(in srgb, var(--brand-secondary) 15%, transparent) 0%, transparent 70%);
     animation: float 10s ease-in-out infinite;
 }

 .decoration-2 {
     bottom: 15%;
     left: 10%;
     width: 250px;
     height: 250px;
     background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 12%, transparent) 0%, transparent 70%);
     animation: float 12s ease-in-out infinite reverse;
 }

 @keyframes float {

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

     33% {
         transform: translate(30px, -30px);
     }

     66% {
         transform: translate(-20px, 20px);
     }
 }