{} *{} /*endBaseStyles*/ #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background-color: #f8f9fa; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Header */ header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 1rem 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } nav { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5rem; font-weight: bold; } .nav-links { display: flex; list-style: none; gap: 2rem; } .nav-links a { color: white; text-decoration: none; transition: opacity 0.3s ease; } .nav-links a:hover { opacity: 0.8; } /* Hero Section */ .hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 4rem 0; text-align: center; } .hero h1 { font-size: 3rem; margin-bottom: 1rem; font-weight: 700; } .hero p { font-size: 1.2rem; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; } .cta-button { display: inline-block; background: #ff6b6b; color: white; padding: 1rem 2rem; text-decoration: none; border-radius: 50px; font-size: 1.1rem; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3); } .cta-button:hover { background: #ff5252; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4); } /* Section Styles */ .section { padding: 4rem 0; } .section-title { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: #333; } .section-subtitle { text-align: center; font-size: 1.2rem; color: #666; margin-bottom: 3rem; max-width: 800px; margin-left: auto; margin-right: auto; } /* Problem Solution Section */ .problem-solution { background: white; } .problem-solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .problem, .solution { padding: 2rem; } .problem { background: #fff5f5; border-left: 4px solid #ff6b6b; border-radius: 8px; } .solution { background: #f0fff4; border-left: 4px solid #4caf50; border-radius: 8px; } .problem h3, .solution h3 { font-size: 1.5rem; margin-bottom: 1rem; color: #333; } /* How It Works Section */ .how-it-works { background: #f8f9fa; } .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; } .step { background: white; padding: 2rem; border-radius: 12px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .step:hover { transform: translateY(-5px); } .step-number { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; margin: 0 auto 1rem; } .step h3 { font-size: 1.3rem; margin-bottom: 1rem; color: #333; } /* Benefits Section */ .benefits { background: white; } .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; } .benefit { text-align: center; padding: 2rem; } .benefit-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1rem; } .benefit h3 { font-size: 1.3rem; margin-bottom: 1rem; color: #333; } /* Comparison Table */ .comparison { background: #f8f9fa; } .comparison-table { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); margin-top: 2rem; } .comparison-table table { width: 100%; border-collapse: collapse; } .comparison-table th, .comparison-table td { padding: 1rem; text-align: left; border-bottom: 1px solid #eee; } .comparison-table th { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600; } .comparison-table tr:hover { background: #f8f9fa; } .ai-score { background: #4caf50; color: white; padding: 0.3rem 0.8rem; border-radius: 20px; font-weight: 600; font-size: 0.9rem; } /* FAQ Section */ .faq { background: white; } .faq-container { max-width: 800px; margin: 0 auto; } .faq-item { margin-bottom: 1.5rem; border: 1px solid #eee; border-radius: 8px; overflow: hidden; } .faq-question { background: #f8f9fa; padding: 1.5rem; cursor: pointer; font-weight: 600; font-size: 1.1rem; transition: background 0.3s ease; } .faq-question:hover { background: #e9ecef; } .faq-answer { padding: 1.5rem; display: none; border-top: 1px solid #eee; } .faq-answer.active { display: block; } /* Trust Signals */ .trust-signals { background: #f8f9fa; text-align: center; } .testimonial { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); max-width: 600px; margin: 0 auto; } .testimonial-text { font-style: italic; font-size: 1.1rem; margin-bottom: 1rem; color: #555; } .testimonial-author { font-weight: 600; color: #333; } /* Footer */ footer { background: #333; color: white; padding: 3rem 0 1rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .footer-section h3 { margin-bottom: 1rem; color: #fff; } .footer-section a { color: #ccc; text-decoration: none; display: block; margin-bottom: 0.5rem; transition: color 0.3s ease; } .footer-section a:hover { color: #fff; } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid #555; color: #ccc; } /* Responsive Design */ @media (max-width: 768px) { .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } .problem-solution-grid { grid-template-columns: 1fr; gap: 2rem; } .nav-links { display: none; } .section-title { font-size: 2rem; } .comparison-table { overflow-x: auto; } } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.6s ease-out; } /* Performance Optimizations */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background-color: #f8f9fa; font-display: swap; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Quick Navigation */ .quick-nav { margin-top: 2rem; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } .quick-nav a { background: rgba(255, 255, 255, 0.2); color: white; padding: 0.5rem 1rem; border-radius: 25px; text-decoration: none; font-size: 0.9rem; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.3); } .quick-nav a:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } /* Header */ header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 1rem 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } nav { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5rem; font-weight: bold; } .nav-links { display: flex; list-style: none; gap: 2rem; } .nav-links a { color: white; text-decoration: none; transition: opacity 0.3s ease; } .nav-links a:hover { opacity: 0.8; } /* Hero Section */ .hero { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 4rem 0; text-align: center; } .hero h1 { font-size: 3rem; margin-bottom: 1rem; font-weight: 700; } .hero p { font-size: 1.2rem; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; } .cta-button { display: inline-block; background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%); color: white; padding: 1.2rem 2.5rem; text-decoration: none; border-radius: 50px; font-size: 1.2rem; font-weight: 700; transition: all 0.3s ease; box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4); text-transform: uppercase; letter-spacing: 1px; } .cta-button:hover { background: linear-gradient(135deg, #ff5252 0%, #ff4444 100%); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 107, 107, 0.5); } .cta-secondary { background: transparent; border: 2px solid #ff6b6b; color: #ff6b6b; padding: 1rem 2rem; font-size: 1rem; font-weight: 600; } .cta-secondary:hover { background: #ff6b6b; color: white; transform: translateY(-2px); } /* Section Styles */ .section { padding: 4rem 0; } .section-title { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: #333; } .section-subtitle { text-align: center; font-size: 1.2rem; color: #666; margin-bottom: 3rem; max-width: 800px; margin-left: auto; margin-right: auto; } /* Problem Solution Section */ .problem-solution { background: white; } .problem-solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .problem, .solution { padding: 2rem; } .problem { background: #fff5f5; border-left: 4px solid #ff6b6b; border-radius: 8px; } .solution { background: #f0fff4; border-left: 4px solid #4caf50; border-radius: 8px; } .problem h3, .solution h3 { font-size: 1.5rem; margin-bottom: 1rem; color: #333; } /* How It Works Section */ .how-it-works { background: #f8f9fa; } .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; } .step { background: white; padding: 2rem; border-radius: 12px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .step:hover { transform: translateY(-5px); } .step-number { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; margin: 0 auto 1rem; } .step h3 { font-size: 1.3rem; margin-bottom: 1rem; color: #333; } /* Benefits Section */ .benefits { background: white; } .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; } .benefit { text-align: center; padding: 2rem; } .benefit-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1rem; } .benefit h3 { font-size: 1.3rem; margin-bottom: 1rem; color: #333; } /* Comparison Table */ .comparison { background: #f8f9fa; } .comparison-table { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); margin-top: 2rem; } .comparison-table table { width: 100%; border-collapse: collapse; } .comparison-table th, .comparison-table td { padding: 1rem; text-align: left; border-bottom: 1px solid #eee; } .comparison-table th { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600; } .comparison-table tr:hover { background: #f8f9fa; } .ai-score { background: #4caf50; color: white; padding: 0.3rem 0.8rem; border-radius: 20px; font-weight: 600; font-size: 0.9rem; } /* FAQ Section */ .faq { background: white; } .faq-container { max-width: 800px; margin: 0 auto; } .faq-item { margin-bottom: 1.5rem; border: 1px solid #eee; border-radius: 8px; overflow: hidden; } .faq-question { background: #f8f9fa; padding: 1.5rem; cursor: pointer; font-weight: 600; font-size: 1.1rem; transition: background 0.3s ease; } .faq-question:hover { background: #e9ecef; } .faq-answer { padding: 1.5rem; display: none; border-top: 1px solid #eee; } .faq-answer.active { display: block; } /* Trust Signals */ .trust-signals { background: #f8f9fa; text-align: center; } .testimonial { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); max-width: 600px; margin: 0 auto; } .testimonial-text { font-style: italic; font-size: 1.1rem; margin-bottom: 1rem; color: #555; } .testimonial-author { font-weight: 600; color: #333; } /* Footer */ footer { background: #333; color: white; padding: 3rem 0 1rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .footer-section h3 { margin-bottom: 1rem; color: #fff; } .footer-section a { color: #ccc; text-decoration: none; display: block; margin-bottom: 0.5rem; transition: color 0.3s ease; } .footer-section a:hover { color: #fff; } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid #555; color: #ccc; } /* Responsive Design */ @media (max-width: 768px) { .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } .problem-solution-grid { grid-template-columns: 1fr; gap: 2rem; } .nav-links { display: none; } .section-title { font-size: 2rem; } .comparison-table { overflow-x: auto; } } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.6s ease-out; }