.faq-glass-card {
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s, border-color 0.3s;

    /* GPU Layer Promotion to fix scrolling lag */
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;

    /* Containment: Prevents inner changes from recalculating outer layout */
    contain: layout;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    max-width: none;
    min-height: 0;
}

.faq-glass-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-6px) translateZ(0);
}

/* ULTIMATE GPU SAVE: When open, use solid background & kill filters to free GPU 100% */
.faq-glass-card.faq-open {
    background: #0b0b0b !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
}

.faq-glass-card.faq-open:hover {
    transform: none !important;
    /* Stop hovering movement when open */
}

.hero-gradient {
    background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.15) 0%, transparent 40%),
        radial-gradient(circle at bottom left, rgba(212, 175, 55, 0.05) 0%, transparent 30%),
        #050505;
}

body {
    transition: opacity 0.3s ease;
}

/* Optimized Fixed Navbar Layer Isolation */
#navbar {
    transform: translateZ(0);
    will-change: transform, padding;
    backface-visibility: hidden;
}

.faq-panel {
    max-height: 600px;
    overflow-y: auto;

    /* EXTREME PERFORMANCE FIX: Solid Opaque background cancels pixel sampling below */
    background: #0b0b0b;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* Optimize reveal animation */
    animation: fadeInPanel 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform: translateZ(0);
    will-change: transform, opacity;
    opacity: 0;
}

@keyframes fadeInPanel {
    from {
        opacity: 0;
        transform: translateY(-4px) translateZ(0);
    }

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