body {
    background-color: #09090b; /* Deep matte black */
}

/* Base state for all sections: Hidden, transparent, slightly pushed down */
.content-section {
    display: none; 
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Active state: Fully visible and in place */
.content-section.active {
    opacity: 1;
    transform: translateY(0);
}

/* Elite Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #6366f1;
}
body {
    background-color: #09090b; 
}

/* Page Section Animations */
.content-section {
    display: none; 
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.content-section.active {
    opacity: 1;
    transform: translateY(0);
}

/* 🪄 NEW: Box Stagger Animations */
.content-section.active .stagger-1 { animation: popUp 0.5s ease 0.1s forwards; opacity: 0; transform: translateY(15px); }
.content-section.active .stagger-2 { animation: popUp 0.5s ease 0.2s forwards; opacity: 0; transform: translateY(15px); }
.content-section.active .stagger-3 { animation: popUp 0.5s ease 0.3s forwards; opacity: 0; transform: translateY(15px); }

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

/* Elite Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #6366f1; }
/* =========================================
   UPLIFT GLOW ANIMATIONS
   ========================================= */

/* Make all the dark cards float and glow on hover */
.bg-matte-800\/50, .bg-gradient-to-br {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.bg-matte-800\/50:hover, .bg-gradient-to-br:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px -10px rgba(99, 102, 241, 0.4), 0 8px 15px -10px rgba(139, 92, 246, 0.3);
    border-color: rgba(99, 102, 241, 0.4) !important;
}

/* Make buttons pop */
button, .nav-action {
    transition: all 0.3s ease !important;
}

button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -5px rgba(139, 92, 246, 0.6);
}

/* Smooth opening for FAQ items */
details {
    transition: background-color 0.3s ease;
}
details[open] {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(99, 102, 241, 0.3);
}