:root { --bg-color: #050711; --muga-border: rgba(255,255,255,0.08); }
body {
    background-color: var(--bg-color);
    color: #FFFFFF;
    overflow-x: hidden;
    background-image: radial-gradient(circle at 50% 0%, rgba(0, 82, 255, 0.12) 0%, transparent 50%), linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
}
.glass-panel { background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--muga-border); border-radius: 24px; }
.glass-card { background: rgba(11, 16, 33, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.glass-card:hover { border-color: rgba(0, 212, 255, 0.4); transform: translateY(-4px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5), 0 0 20px -5px rgba(0, 82, 255, 0.2); }
.text-gradient { background: linear-gradient(135deg, #FFFFFF 0%, #B9C2D8 100%); -webkit-background-clip: text; color: transparent; }
.text-gradient-primary { background: linear-gradient(to right, #00D4FF, #0052FF); -webkit-background-clip: text; color: transparent; }
.mockup-laptop { width: 100%; max-width: 450px; aspect-ratio: 16/10; background: #111; border-radius: 12px 12px 0 0; border: 4px solid #333; border-bottom: none; position: relative; overflow: hidden; box-shadow: 0 -10px 30px rgba(0,82,255,0.2); }
.mockup-laptop::after { content: ''; position: absolute; bottom: -12px; left: -5%; width: 110%; height: 12px; background: #444; border-radius: 0 0 12px 12px; z-index: 10; }
.mockup-phone { width: 140px; aspect-ratio: 9/19; background: #111; border-radius: 24px; border: 4px solid #444; position: absolute; bottom: -10px; right: -20px; z-index: 20; box-shadow: -10px 10px 30px rgba(0,0,0,0.8); overflow: hidden; }
@media (max-width: 768px) { .mockup-laptop { max-width: 90%; margin: 0 auto; } .mockup-phone { width: 100px; right: 0; bottom: -20px; } }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-color); } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
.spa-view { display: none; opacity: 0; transition: opacity 0.4s ease-in-out; }
.spa-view.active-view { display: block; opacity: 1; }
.reveal-item { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1); will-change: opacity, transform; }
.reveal-active { opacity: 1; transform: translateY(0); }