body { background-color: #02040a; color: #f8fafc; overflow-x: hidden; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #02040a; border-left: 1px solid rgba(255, 255, 255, 0.05); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #22c55e 0%, #166534 100%); border-radius: 10px; border: 2px solid #02040a; }
::-webkit-scrollbar-thumb:hover { background: #22c55e; box-shadow: 0 0 10px #22c55e; }

@media (pointer: fine) { body { cursor: none; } }

.cursor-dot, .cursor-outline { position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); border-radius: 50%; z-index: 9999; pointer-events: none; }
.cursor-dot { width: 8px; height: 8px; background-color: #22c55e; }
.cursor-outline { width: 40px; height: 40px; border: 1px solid rgba(34, 197, 94, 0.5); transition: all 0.2s ease-out; }

#preloader { position: fixed; inset: 0; background: #02040a; z-index: 99999; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s ease, visibility 0.5s ease; }

.glass { background: rgba(15, 22, 35, 0.8); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.glass-card { background: linear-gradient(180deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 22, 35, 0.8) 100%); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s ease; }
.glass-card:hover { border-color: rgba(34, 197, 94, 0.3); box-shadow: 0 10px 40px -10px rgba(34, 197, 94, 0.15); transform: translateY(-5px); }

@media (min-width: 1024px) {
    .app-mockup { transition: transform 0.5s ease; transform-style: preserve-3d; transform: perspective(1000px) rotateY(-10deg) rotateX(5deg); }
    .app-mockup:hover { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); }
}

.modal { transition: opacity 0.3s ease, visibility 0.3s ease; opacity: 0; visibility: hidden; z-index: 200; }
.modal.active { opacity: 1; visibility: visible; }

.timeline-line { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 2px; 
    background: linear-gradient(to bottom, #22c55e, rgba(34,197,94,0.1));
    left: 2rem; 
    transform: translateX(-50%);
}

@media (min-width: 768px) {
    .timeline-line {
        left: 50%; 
        transform: translateX(-50%);
    }
}

[dir="rtl"] .timeline-line { 
    left: auto; 
    right: 2rem; 
    transform: translateX(50%); 
}

@media (min-width: 768px) { 
    [dir="rtl"] .timeline-line { 
        right: 50%; 
        transform: translateX(50%); 
    } 
}

.mobile-menu-panel { transition: transform 0.3s ease-in-out; }
.mobile-menu-active { transform: translateX(0) !important; }

[dir="rtl"] .mobile-menu-panel { left: auto; right: 0; transform: translateX(100%); border-right: none; border-left: 1px solid rgba(255,255,255,0.1); }
[dir="rtl"] .mobile-menu-active { transform: translateX(0) !important; }

.text-shine { background: linear-gradient(to right, #eab308 20%, #FFD700 40%, #eab308 60%, #eab308 80%); background-size: 200% auto; color: transparent; background-clip: text; -webkit-background-clip: text; animation: shine 3s linear infinite; }