body { background-color: #F8FAFC; color: #0F172A; scroll-behavior: smooth; overflow-x: hidden; }
        .glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); }
        .btn-gradient { background: linear-gradient(135deg, #00D2FF 0%, #9D50BB 100%); transition: all 0.3s ease; }
        .btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 210, 255, 0.3); }
        .page-view { display: none; }
        .page-view.active { display: block; animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .nav-active { color: #00D2FF; font-weight: 700; border-bottom: 2px solid #00D2FF; }
        .cart-dot { animation: pulse 2s infinite; }
        @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 210, 255, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 210, 255, 0); } }
        .card-hover { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .card-hover:hover { transform: scale(1.03); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1); }
        .drawer { transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.83, 0, 0.17, 1); }
        .drawer.open { transform: translateX(0); }
        .toast { animation: toastIn 0.4s ease-out forwards; }
        @keyframes toastIn { from { transform: translateX(100%) scale(0.9); opacity: 0; } to { transform: translateX(0) scale(1); opacity: 1; } }
        .step-line::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 50px; background: #e2e8f0; }
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}
.animate-fadeIn {
    animation: fadeIn 0.25s ease-out;
}