* { 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: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; } .container { max-width: 800px; margin: 0 auto; padding: 2rem; text-align: center; background: rgba(255, 255, 255, 0.95); border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px); } .logo { font-size: 3rem; font-weight: bold; color: #764ba2; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } .tagline { font-size: 1.5rem; color: #666; margin-bottom: 2rem; font-weight: 300; } .description { font-size: 1.1rem; color: #555; margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto; } .cta-button { display: inline-block; background: linear-gradient(45deg, #667eea, #764ba2); color: white; padding: 1rem 2rem; text-decoration: none; border-radius: 50px; font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); cursor: pointer; border: none; } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; } .feature { padding: 1.5rem; background: rgba(255, 255, 255, 0.8); border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.2); } .feature-icon { font-size: 2.5rem; margin-bottom: 1rem; } .feature h3 { margin-bottom: 0.5rem; color: #764ba2; } .feature p { color: #666; font-size: 0.95rem; } @media (max-width: 768px) { .container { margin: 1rem; padding: 1.5rem; } .logo { font-size: 2rem; } .tagline { font-size: 1.2rem; } }