/* === HHPOKER 0039 - Vibrant Gaming Theme === */

/* Base */
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #030712; }
::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #c026d3, #ea580c); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, #d946ef, #f97316); }

/* Glass Card */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Navbar */
#navbar.scrolled {
    background: rgba(3, 7, 18, 0.88);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(139, 25, 143, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

/* Feature Cards (0039 glass style) */
.glass-card.group {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.glass-card.group:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 25px 60px rgba(192, 38, 211, 0.1);
}

/* FAQ Vibe */
.faq-toggle-vibe .fa-plus { transition: transform 0.3s ease; }
.faq-toggle-vibe.active .fa-plus { transform: rotate(45deg); }
.faq-answer-vibe { display: none; }
.faq-item-vibe .faq-toggle-vibe.active + .faq-answer-vibe {
    display: block;
    animation: fadeSlideIn 0.3s ease;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile Menu */
#mobile-menu:not(.hidden) { animation: slideDown 0.25s ease; }
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Form focus styles */
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(192, 38, 211, 0.15);
}

/* Animations */
@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping { animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* Responsive */
@media (max-width: 768px) {
    .section-padding { padding-top: 3rem; padding-bottom: 3rem; }
}