:root { --color-primary: #1a237e; --color-secondary: #4caf50; --color-accent: #ff5722; --color-text: #333; --color-text-light: #666; --color-background: #fff; --color-background-light: #f5f5f5; --breakpoint-tablet: 768px; --font-test: system-ui, sans-serif; --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --color-green: #2e7d32; --color-green-over: #1b5e20; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-family-base); line-height: 1.6; color: var(--color-text); background: var(--color-background); } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .header { background-color: var(--color-background); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: fixed; width: 100%; top: 0; z-index: 1000; } .header .container { display: flex; justify-content: space-between; align-items: center; height: 80px; } .logo a { font-family: var(--font-family-base); font-size: 1.5rem; color: var(--color-primary); text-decoration: none; font-weight: 700; } .main-nav ul { display: flex; list-style: none; gap: 2rem; } .main-nav a { text-decoration: none; color: var(--color-text); font-weight: 600; transition: color 0.3s; } .main-nav a:hover { color: var(--color-primary); } .nav-cta { background-color: var(--color-secondary); color: white !important; padding: 0.5rem 1rem; border-radius: 4px; } .hero { padding: 120px 0 60px; background: linear-gradient(135deg, var(--color-primary), #303f9f); color: white; text-align: center; } .hero h1 { font-family: var(--font-family-base); font-size: 2.5rem; margin-bottom: 1rem; } .hero .subtitle { font-size: 1.2rem; margin-bottom: 2rem; } .section { padding: 80px 0 20px; } .bg-light { background-color: var(--color-background-light); } .section h2, .section-contact h2 { font-family: var(--font-family-base); font-size: 2rem; text-align: center; margin-bottom: 2rem; color: var(--color-primary); } .section-description { text-align: center; max-width: 825px; margin: 0 auto 3rem; color: var(--color-text-light); } .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; } .benefit-card { text-align: center; padding: 2rem; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s; } .benefit-card:hover { transform: translateY(-5px); } .benefit-card i { font-size: 2.5rem; color: var(--color-secondary); margin-bottom: 1rem; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .feature-card { padding: 2rem; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .feature-title { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; } .feature-title i { font-size: 2rem; color: var(--color-secondary); } .feature-card h3 { font-size: 1.5rem; margin: 0; } .process-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: 3rem; } .step { height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.75rem; background: var(--color-background-light); border-radius: 8px; } .step-content { width: 100%; } .step-number { flex-shrink: 0; width: 50px; height: 50px; background: var(--color-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-weight: bold; font-size: 1.2rem; } .step-content { width: 100%; } .step-content h3 { margin-bottom: 1rem; font-size: 1.5rem; color: var(--color-primary); } .step-content ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1rem; text-align: left; margin-top: 1rem; } .step-content li { margin-bottom: 0.5rem; line-height: 1.5; color: var(--color-text); } .step-content p { margin-top: 1rem; line-height: 1.5; color: var(--color-text-light); } .step:nth-child(even) { background: white; } @media (max-width: 768px) { .process-steps { grid-template-columns: 1fr; } } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } @media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); } } .testimonial-card { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .testimonial-author { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eee; } .contact-form { max-width: 600px; margin: 0 auto; background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; } .form-group input, .form-group textarea { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-family: var(--font-family-base); } .form-group textarea { height: 150px; resize: vertical; } .footer { background: var(--color-primary); color: white; padding: 60px 0 20px; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .footer-section h3 { margin-bottom: 1rem; font-family: var(--font-family-base); } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 0.5rem; } .footer-section a { color: white; text-decoration: none; } .social-links { display: flex; gap: 1rem; } .social-links a { font-size: 1.5rem; } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .nav-cta { background-color: var(--color-green); color: #ffffff !important; font-weight: 700; text-align: center; } .cta-button { display: inline-block; background: var(--color-green); color: #ffffff; padding: 1rem 2rem; border-radius: 4px; text-decoration: none; font-weight: 700; border: none; cursor: pointer; transition: background-color 0.3s; } .cta-button:hover, .nav-cta:hover { background: var(--color-green-over); } .mobile-menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--color-primary); cursor: pointer; } .mobile-menu { display: none; position: fixed; top: 80px; left: 0; width: 100%; background: var(--color-background); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); z-index: 999; overflow-x: hidden; } .mobile-menu ul { list-style: none; padding: 1rem; margin: 0; } .mobile-menu a { display: block; padding: 0.8rem 1rem; color: var(--color-text); text-decoration: none; font-weight: 600; transition: color 0.3s; } .mobile-menu a:hover { color: var(--color-primary); } .mobile-menu .nav-cta { margin: 0.5rem 1rem; text-align: center; } @media (max-width: 768px) { .main-nav { display: none; } .mobile-menu-toggle { display: block; } .mobile-menu { display: block; } .mobile-menu ul { list-style: none; } .mobile-menu a { display: block; padding: 0.5rem 0; text-decoration: none; color: var(--color-text); } .hero h1 { font-size: 2rem; } .section { padding: 40px 0; } .step { flex-direction: column; align-items: center; text-align: center; } .step-number { margin-right: 0; margin-bottom: 1rem; } .step-content ul { text-align: left; } } @media screen and (max-width: 768px) { section[id] { scroll-margin-top: 50px; } } .pricing-highlight { display: block; font-size: 1.3em; margin-bottom: 1rem; color: var(--color-text); } .benefit-card i, .feature-title i { color: var(--color-green); } h2 + p { font-size: 1.05rem; } .contact-cta { text-align: center; margin: 2rem 0; } .section-contact { padding: 40px 0; }