/* style-part1.css - Core Variables & UI Elements */

:root {
--bg-dark: #050510;
--bg-panel: rgba(255, 255, 255, 0.03);
--primary: #7e22cf;
--accent: #facc15; /* Gold */
--neon-purple: #a855f7;
--neon-blue: #3b82f6;
}

body {
font-family: 'Outfit', sans-serif;
background-color: var(--bg-dark);
background-image: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #050510 100%);
color: #e2e8f0;
overflow-x: hidden;
position: relative;
}

/* --- Floating Background Animation --- */
.floating-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
pointer-events: none;
}

.float-item {
position: absolute;
bottom: -100px;
font-size: 2rem;
opacity: 0.3;
animation: floatUp linear infinite;
}

@keyframes floatUp {
0% { transform: translateY(0) rotate(0deg); opacity: 0; }
10% { opacity: 0.5; }
90% { opacity: 0.5; }
100% { transform: translateY(-120vh) rotate(360deg); opacity: 0; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f0f1a; }
::-webkit-scrollbar-thumb { background: #33334d; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* --- Utility Classes --- */
.glass-panel {
background: var(--bg-panel);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-header {
background: rgba(5, 5, 16, 0.8);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
position: sticky;
top: 0;
z-index: 50;
}

.text-glow { text-shadow: 0 0 10px rgba(250, 204, 21, 0.5); }

/* --- Buttons --- */
.btn-glow-gold {
background: linear-gradient(135deg, #facc15 0%, #ca8a04 100%);
box-shadow: 0 0 15px rgba(250, 204, 21, 0.3);
transition: all 0.3s ease;
cursor: pointer;
}

.btn-glow-gold-2 {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
box-shadow: 0 0 15px rgba(250, 204, 21, 0.3);
transition: all 0.3s ease;
cursor: pointer;
}

.btn-glow-gold:hover {
transform: translateY(-2px);
box-shadow: 0 0 25px rgba(250, 204, 21, 0.6);
}

.btn-primary {
background: linear-gradient(135deg, #7e22cf 0%, #581c87 100%);
color: white;
font-weight: 800;
padding: 0.75rem;
border-radius: 0.75rem;
width: 100%;
transition: transform 0.2s;
cursor: pointer;
}
.btn-primary:hover { transform: scale(1.02); }

.btn-secondary {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
border: 2px solid rgba(255,255,255,0.2);
color: white;
font-weight: 700;
padding: 0.75rem;
border-radius: 0.75rem;
width: 100%;
text-align: center;
transition: all 0.2s;
cursor: pointer;
}

.btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: white; }

.btn-secondaryxx {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
border: 2px solid rgba(255,255,255,0.2);
color: white;
font-weight: 700;
padding: 1rem 4rem; 
min-width: 280px; 
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50px;
text-align: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 0 4px 15px rgba(18, 140, 126, 0.3);
}

.btn-secondaryxx:hover {
background: linear-gradient(135deg, #2ae06f 0%, #16a090 100%);
border-color: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(18, 140, 126, 0.4);
}

.btn-secondaryxx:active { transform: translateY(1px); }

.input-dark {
width: 100%;
padding: 1rem;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 0.75rem;
color: white;
outline: none;
transition: border-color 0.3s;
}
.input-dark:focus { border-color: var(--neon-purple); }