:root {
    --bg-light: #f8fafc;
    --bg-dark: #020617;
    --text-light: #1e293b;
    --text-dark: #e2e8f0;
    --primary: #2563eb;
}

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 10px; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; }

.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.faq-item.active .faq-content { max-height: 500px; padding-top: 12px; }
.faq-item.active i { transform: rotate(180deg); }

.jvm-container { background-color: transparent !important; touch-action: none; }
.jvm-zoom-btn { display: none !important; }

.jvm-tooltip { 
    background-color: #0f172a; 
    color: #fff; 
    border-radius: 4px; 
    padding: 4px 8px; 
    font-size: 11px; 
    font-family: 'Inter', sans-serif; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 999;
}

@keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(2); opacity: 0; }
}
.status-pulse::before {
    content: '';
    position: absolute;
    left: -4px; top: -4px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background-color: inherit;
    opacity: 0.6;
    animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    z-index: -1;
}

.gsap-fade { opacity: 0; }

.lang-dropdown { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid #e2e8f0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; transition: all 0.2s; }
.dark .lang-btn { border-color: #1e293b; color: #e2e8f0; }
.lang-btn:hover { border-color: #2563eb; }
.lang-menu { position: absolute; top: 100%; right: 0; margin-top: 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 4px; width: 140px; display: none; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); z-index: 50; }
.dark .lang-menu { background: #0f172a; border-color: #1e293b; }
.lang-menu.show { display: block; animation: slideDown 0.2s ease-out; }
.lang-item { display: flex; align-items: center; gap: 8px; padding: 8px; width: 100%; text-align: left; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; color: #475569; transition: background 0.2s; }
.dark .lang-item { color: #cbd5e1; }
.lang-item:hover { background: #f1f5f9; color: #2563eb; }
.dark .lang-item:hover { background: #1e293b; }

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