*{margin: 0;padding: 0;box-sizing: border-box} :root{--primary-blue: #1e40af;--secondary-blue: #3b82f6;--light-blue: #dbeafe;--dark-blue: #1e3a8a;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--white: #ffffff;--success: #10b981;--warning: #f59e0b;--error: #ef4444} body{font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;line-height: 1.6;color: var(--gray-800);background-color: var(--white)} .container{max-width: 1200px;margin: 0 auto;padding: 0 1.5rem} .header{background: var(--white);border-bottom: 1px solid var(--gray-200);position: sticky;top: 0;z-index: 100;backdrop-filter: blur(10px)} .nav-container{display: flex;justify-content: space-between;align-items: center;padding: 1rem 1.5rem;max-width: 1200px;margin: 0 auto} .logo svg{height: 40px} .nav-links{display: flex;gap: 2rem} .nav-link{text-decoration: none;color: var(--gray-600);font-weight: 500;transition: color 0.2s ease} .nav-link:hover{color: var(--primary-blue)} .hero{padding: 4rem 0 6rem;background: linear-gradient(135deg, var(--gray-50) 0%, var(--light-blue) 100%);min-height: 80vh;display: flex;align-items: center} .hero-content{display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: center} .badge{display: inline-flex;align-items: center;padding: 0.5rem 1rem;background: var(--secondary-blue);color: var(--white);border-radius: 2rem;font-size: 0.875rem;font-weight: 500;margin-bottom: 1.5rem} .hero-title{font-size: 3.5rem;font-weight: 700;line-height: 1.1;margin-bottom: 1.5rem;color: var(--gray-900)} .highlight{color: var(--primary-blue);position: relative} .hero-description{font-size: 1.25rem;color: var(--gray-600);margin-bottom: 2rem;line-height: 1.7} .features-preview{display: flex;gap: 1.5rem;margin-bottom: 3rem;flex-wrap: wrap} .feature-item{display: flex;align-items: center;gap: 0.5rem;padding: 0.75rem 1rem;background: var(--white);border-radius: 0.75rem;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);font-weight: 500;color: var(--gray-700)} .feature-icon{font-size: 1.25rem} .notify-form{max-width: 500px} .form-group{display: flex;gap: 0.75rem;margin-bottom: 0.75rem} .email-input{flex: 1;padding: 1rem 1.25rem;border: 2px solid var(--gray-200);border-radius: 0.75rem;font-size: 1rem;transition: border-color 0.2s ease;background: var(--white)} .email-input:focus{outline: none;border-color: var(--secondary-blue);box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)} .cta-button{display: flex;align-items: center;gap: 0.5rem;padding: 1rem 2rem;background: var(--primary-blue);color: var(--white);border: none;border-radius: 0.75rem;font-size: 1rem;font-weight: 600;cursor: pointer;transition: all 0.2s ease;white-space: nowrap} .cta-button:hover{background: var(--dark-blue);transform: translateY(-1px);box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3)} .form-note{font-size: 0.875rem;color: var(--gray-500);text-align: center} .visual-container{position: relative;height: 500px;display: flex;align-items: center;justify-content: center} .ai-bot-illustration{position: relative;width: 100%;max-width: 400px} .bot-screen{background: var(--white);border-radius: 1rem;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);padding: 1.5rem;border: 1px solid var(--gray-200)} .screen-header{display: flex;align-items: center;justify-content: space-between;margin-bottom: 1rem;padding-bottom: 0.75rem;border-bottom: 1px solid var(--gray-200)} .screen-dots{display: flex;gap: 0.25rem} .screen-dots span{width: 8px;height: 8px;border-radius: 50%;background: var(--gray-300)} .screen-dots span:first-child{background: var(--error)} .screen-dots span:nth-child(2){background: var(--warning)} .screen-dots span:last-child{background: var(--success)} .screen-title{font-weight: 600;color: var(--gray-700)} .chat-messages{display: flex;flex-direction: column;gap: 1rem} .message{display: flex;gap: 0.75rem;align-items: flex-start} .user-message{flex-direction: row-reverse} .message-avatar{width: 32px;height: 32px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 1rem;flex-shrink: 0} .message-content{padding: 0.75rem 1rem;border-radius: 1rem;max-width: 80%;font-size: 0.875rem;line-height: 1.4} .bot-message .message-content{background: var(--light-blue);color: var(--gray-800)} .user-message .message-content{background: var(--primary-blue);color: var(--white)} .floating-elements{position: absolute;top: 0;left: 0;right: 0;bottom: 0;pointer-events: none} .floating-card{position: absolute;background: var(--white);padding: 0.75rem 1rem;border-radius: 0.75rem;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);display: flex;align-items: center;gap: 0.5rem;font-size: 0.875rem;font-weight: 500;color: var(--gray-700);animation: float 3s ease-in-out infinite} .card-1{top: 10%;right: -20%;animation-delay: 0s} .card-2{bottom: 30%;left: -25%;animation-delay: 1s} .card-3{top: 60%;right: -15%;animation-delay: 2s} @keyframes float{0%, 100%{transform: translateY(0px)} 50%{transform: translateY(-10px)} } .benefits{padding: 6rem 0;background: var(--white)} .section-title{font-size: 2.5rem;font-weight: 700;text-align: center;margin-bottom: 3rem;color: var(--gray-900)} .benefits-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem} .benefit-card{text-align: center;padding: 2rem;border-radius: 1rem;background: var(--gray-50);transition: transform 0.2s ease, box-shadow 0.2s ease} .benefit-card:hover{transform: translateY(-4px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1)} .benefit-icon{margin-bottom: 1.5rem} .benefit-title{font-size: 1.25rem;font-weight: 600;margin-bottom: 1rem;color: var(--gray-900)} .benefit-description{color: var(--gray-600);line-height: 1.6} .timeline{padding: 6rem 0;background: var(--gray-50)} .timeline-container{max-width: 600px;margin: 0 auto;position: relative} .timeline-container::before{content: '';position: absolute;left: 1rem;top: 0;bottom: 0;width: 2px;background: var(--gray-300)} .timeline-item{position: relative;padding-left: 3rem;margin-bottom: 2rem} .timeline-marker{position: absolute;left: 0.5rem;top: 0.5rem;width: 1rem;height: 1rem;border-radius: 50%;background: var(--gray-300);border: 3px solid var(--white)} .timeline-item.completed .timeline-marker{background: var(--success)} .timeline-item.current .timeline-marker{background: var(--secondary-blue);animation: pulse 2s infinite} @keyframes pulse{0%{box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7)} 70%{box-shadow: 0 0 0 10px rgba(59, 130, 246, 0)} 100%{box-shadow: 0 0 0 0 rgba(59, 130, 246, 0)} } .timeline-content h3{font-size: 1.25rem;font-weight: 600;margin-bottom: 0.5rem;color: var(--gray-900)} .timeline-content p{color: var(--gray-600)} .footer{background: var(--gray-900);color: var(--gray-300);padding: 3rem 0 1rem} .footer-content{display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem;margin-bottom: 2rem} .footer-section h4{color: var(--white);font-weight: 600;margin-bottom: 1rem} .footer-section a{color: var(--gray-300);text-decoration: none;display: block;margin-bottom: 0.5rem;transition: color 0.2s ease} .footer-section a:hover{color: var(--white)} .footer-bottom{text-align: center;padding-top: 2rem;border-top: 1px solid var(--gray-700);color: var(--gray-400)} @media (max-width: 768px){.hero-content{grid-template-columns: 1fr;gap: 2rem;text-align: center} .hero-title{font-size: 2.5rem} .form-group{flex-direction: column} .features-preview{justify-content: center} .nav-links{display: none} .floating-card{display: none} } @media (max-width: 480px){.hero-title{font-size: 2rem} .hero-description{font-size: 1.125rem} .section-title{font-size: 2rem} }