/* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; overflow-x: hidden; color: #1e293b; } /* Custom Scrollbar - Light Theme */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Utility Classes */ .animate-fade-in-up { animation: fadeInUp 0.6s ease-out; } .animate-float { animation: float 4s ease-in-out infinite; } /* Card Styles - Professional Light Theme */ .card-modern { background: white; border: 1px solid #e2e8f0; border-radius: 16px; transition: all 0.3s ease; position: relative; overflow: hidden; } .card-modern:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); border-color: #3b82f6; } /* Clean shadows for professional look */ .shadow-professional { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); } /* Feature Icons - Updated for light theme */ .feature-icon { width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #f8fafc; border: 1px solid #e2e8f0; transition: all 0.3s ease; margin: 0 auto; } .feature-icon:hover { background: #eff6ff; border-color: #3b82f6; transform: scale(1.05); } /* Text Gradients - Subtle for professional look */ .text-gradient-primary { background: linear-gradient(135deg, #1e40af, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; } .text-gradient-secondary { background: linear-gradient(135deg, #0369a1, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 2.5rem !important; line-height: 1.2 !important; } .feature-icon { width: 50px; height: 50px; } section { padding-top: 3rem !important; padding-bottom: 3rem !important; } } @media (max-width: 640px) { .hero-title { font-size: 2rem !important; } } /* Smooth Scroll Behavior */ html { scroll-behavior: smooth; } /* Selection Color - Light theme */ ::selection { background: rgba(59, 130, 246, 0.2); color: #1e40af; } /* Focus States for Accessibility */ a:focus-visible, button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }