/* Base styles */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: #374151; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Modern container */ .container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; } /* Glassmorphism effect */ .glass { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.18); } /* Modern buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 500; padding: 0.75rem 1.5rem; border-radius: 12px; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .btn-primary { background-color: #4f46e5; color: white; } .btn-primary:hover { background-color: #4338ca; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .btn-secondary { background-color: white; color: #4f46e5; border: 1px solid #e5e7eb; } .btn-secondary:hover { background-color: #f8fafc; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } /* Custom transitions */ .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; } /* Card styling */ .card { background: white; border-radius: 16px; padding: 2rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } /* Gradient text */ .text-gradient { background: linear-gradient(90deg, #4f46e5 0%, #9333ea 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Custom shadows */ .shadow-sm { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); } .hover\:shadow-md:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } /* Animation for buttons */ @keyframes button-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); } } .button-pulse:hover { animation: button-pulse 1.5s infinite; } /* Floating animation */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .float { animation: float 6s ease-in-out infinite; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(241, 241, 241, 0.5); } ::-webkit-scrollbar-thumb { background: rgba(79, 70, 229, 0.5); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgba(79, 70, 229, 0.7); } /* Responsive typography */ h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.2; } h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.3; } h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.4; } /* Section spacing */ section { padding: 5rem 0; } @media (max-width: 768px) { section { padding: 3rem 0; } }