* { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    html, body { height: 100%; margin: 0; }
    .app-wrapper { height: 100%; overflow-y: auto; overflow-x: hidden; }
    
    /* Animations */
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes slideLeft {
      from { opacity: 0; transform: translateX(-40px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes slideRight {
      from { opacity: 0; transform: translateX(40px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    .animate-slide-up { animation: slideUp 0.8s ease-out forwards; }
    .animate-slide-left { animation: slideLeft 0.8s ease-out forwards; }
    .animate-slide-right { animation: slideRight 0.8s ease-out forwards; }
    .animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
    
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
    .delay-400 { animation-delay: 0.4s; }
    .delay-500 { animation-delay: 0.5s; }
    
    .scroll-animate { opacity: 0; }
    .scroll-animate.visible { opacity: 1; }
    
    /* Navigation hover effect */
    .nav-link { position: relative; transition: color 0.3s ease; }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: #3B82F6;
      transition: width 0.3s ease;
    }
    .nav-link:hover::after { width: 100%; }
    .nav-link:hover { color: #3B82F6; }
    
    /* Card hover effects */
    .card-hover {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }
    
    /* Button hover */
    .btn-primary {
      transition: all 0.3s ease;
      background: #3B82F6;
      color: white;
    }
    .btn-primary:hover {
      background: #1E40AF;
      transform: scale(1.05);
    }
    
    .btn-secondary {
      transition: all 0.3s ease;
      background: #6B7280;
      color: white;
    }
    .btn-secondary:hover {
      background: #4B5563;
    }
    
    /* Gradient backgrounds */
    .gradient-primary {
      background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
    }
    
    .gradient-secondary {
      background: linear-gradient(135deg, #334155 0%, #64748b 100%);
    }
    
    .gradient-accent {
      background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    }
    
    /* Mobile menu */
    .mobile-menu { display: none; }
    .mobile-menu.active { display: flex; }
    
    /* Toast notification */
    .toast {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 16px 24px;
      border-radius: 8px;
      color: white;
      font-weight: bold;
      z-index: 1000;
      transform: translateY(100px);
      opacity: 0;
      transition: all 0.3s ease;
    }
    .toast.show {
      transform: translateY(0);
      opacity: 1;
    }
    .toast.success { background: #10b981; }
    .toast.error { background: #ef4444; }
    
    /* Feature grid */
    .feature-card {
      border-left: 4px solid #3B82F6;
      transition: all 0.3s ease;
    }
    .feature-card:hover {
      border-left-color: #0f766e;
      background: #f8fafc;
    }
    
    /* Price tag */
    .price-badge {
      background: #3B82F6;
      color: white;
      padding: 8px 16px;
      border-radius: 20px;
      font-weight: bold;
      display: inline-block;
    }
    
    /* Cart Badge */
    .cart-badge {
      position: absolute;
      top: -8px;
      right: -8px;
      background: #ef4444;
      color: white;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 12px;
    }
    
    /* Sidebar */
    .sidebar-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 40;
      display: none;
    }
    .sidebar-overlay.active { display: block; }
    
    .sidebar {
      position: fixed;
      top: 0;
      right: -400px;
      width: 400px;
      height: 100vh;
      background: white;
      z-index: 50;
      transition: right 0.3s ease;
      box-shadow: -5px 0 20px rgba(0,0,0,0.2);
      overflow-y: auto;
    }
    .sidebar.active { right: 0; }
    
    @media (max-width: 640px) {
      .sidebar { width: 100%; right: -100%; }
    }
    
    /* Modal */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.7);
      z-index: 60;
      display: none;
      align-items: center;
      justify-content: center;
    }
    .modal-overlay.active { display: flex; }
    
    .modal {
      background: white;
      border-radius: 12px;
      padding: 32px;
      max-width: 500px;
      width: 90%;
      max-height: 80vh;
      overflow-y: auto;
      animation: slideUp 0.3s ease;
    }

    .image-placeholder {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }