* {margin:0; padding:0; box-sizing:border-box;}
:root {
--primary: #1a73e8;
--dark: #1a1a1a;
--gray: #6b7280;
--light: #f8f9fa;
--white: #ffffff;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, sans-serif;
line-height: 1.6;
color: var(--dark);
}
.container {max-width: 1200px; margin: 0 auto; padding: 0 24px;}
/* Header */
.header {background: var(--white); box-shadow: 0 2px 4px rgba(0,0,0,0.08); position:
sticky; top: 0; z-index: 100;}
.header-content {display: flex; justify-content: space-between; align-items: center;
padding: 20px 0;}
.logo {font-size: 28px; font-weight: 800; color: var(--dark);}
.logo span {color: var(--primary);}
.nav {display: flex; gap: 32px; align-items: center;}
.nav a {text-decoration: none; color: var(--gray); font-weight: 500; transition: color 0.2s;}
.nav a:hover {color: var(--primary);}

.btn-call {background: var(--primary); color: var(--white); padding: 12px 24px; border-
radius: 8px;}

/* Hero */
.hero {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding:
100px 24px; color: var(--white);}
.hero-text {max-width: 700px;}
.hero h1 {font-size: 56px; font-weight: 900; line-height: 1.1; margin-bottom: 24px;}
.highlight {color: #fbbf24;}
.lead {font-size: 22px; margin-bottom: 32px; opacity: 0.95;}
.offer-form {display: flex; gap: 12px; margin-bottom: 24px;}
.offer-form input {flex: 1; padding: 18px 24px; border: none; border-radius: 8px; font-size:
16px;}
.offer-form button {background: #10b981; color: var(--white); border: none; padding: 18px

36px; border-radius: 8px; font-weight: 700; cursor: pointer; white-space: nowrap; font-
size: 16px;}

.trust-line {display: flex; gap: 32px; font-size: 15px;}

/* Stats */
.stats-bar {background: var(--white); padding: 48px 24px; margin-top: -40px; position:
relative;}
.stats {display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center;}
.stat-num {font-size: 48px; font-weight: 900; color: var(--primary); margin-bottom: 8px;}
.stat-label {color: var(--gray); font-size: 15px;}
/* Sections */
.section-title {font-size: 42px; font-weight: 800; text-align: center; margin-bottom: 16px;}
.section-subtitle {text-align: center; font-size: 18px; color: var(--gray); margin-bottom:
64px;}
/* Steps */
.how {padding: 100px 24px; background: var(--light);}
.steps {display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;}
.step {text-align: center;}
.step-num {font-size: 72px; font-weight: 900; color: #e5e7eb; margin-bottom: 16px;}
.step h3 {font-size: 24px; margin-bottom: 12px;}
.step p {color: var(--gray); line-height: 1.7;}
/* Benefits */
.benefits {padding: 100px 24px;}
.benefits-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;}
.benefit {background: var(--light); padding: 32px; border-radius: 12px;}
.icon {font-size: 48px; margin-bottom: 16px;}
.benefit h3 {font-size: 22px; margin-bottom: 12px;}
.benefit p {color: var(--gray); line-height: 1.6;}
/* About */
.about {padding: 100px 24px; background: var(--light);}
.about-text {max-width: 800px; margin: 0 auto;}
.about h2 {font-size: 42px; margin-bottom: 32px;}
.about p {font-size: 18px; line-height: 1.8; margin-bottom: 24px; color: var(--gray);}
.cta-row {display: flex; gap: 16px; margin-top: 32px;}
/* Buttons */
.btn-primary, .btn-secondary, .btn-primary-lg, .btn-secondary-lg {
display: inline-block; text-decoration: none; font-weight: 700; border-radius: 8px;
transition: all 0.2s;
}
.btn-primary {background: var(--primary); color: var(--white); padding: 14px 28px;}
.btn-secondary {background: var(--white); color: var(--primary); padding: 14px 28px;
border: 2px solid var(--primary);}
.btn-primary-lg {background: #10b981; color: var(--white); padding: 18px 48px; font-size:
18px;}
.btn-secondary-lg {background: var(--white); color: var(--primary); padding: 18px 48px;
font-size: 18px;}

/* Testimonials */
.testimonials {padding: 100px 24px;}
.testimonials-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;}
.testimonial {background: var(--light); padding: 32px; border-radius: 12px; border-left: 4px
solid var(--primary);}
.stars {color: #fbbf24; font-size: 20px; margin-bottom: 16px;}
.testimonial p {font-size: 16px; line-height: 1.7; margin-bottom: 20px; font-style: italic;}
.author {color: var(--gray); font-weight: 600;}
/* CTA */

.cta-section {padding: 100px 24px; background: var(--primary); color: var(--white); text-
align: center;}

.cta-section h2 {font-size: 48px; margin-bottom: 16px;}
.cta-section p {font-size: 20px; margin-bottom: 32px; opacity: 0.9;}
.cta-buttons {display: flex; justify-content: center; gap: 16px;}
/* Footer */
.footer {background: var(--dark); color: rgba(255,255,255,0.7); padding: 64px 24px
32px;}

.footer-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-
bottom: 48px;}

.footer h4 {color: var(--white); margin-bottom: 16px; font-size: 18px;}

.footer a {color: rgba(255,255,255,0.7); text-decoration: none; display: block; margin-
bottom: 8px;}

.footer a:hover {color: var(--white);}
.footer-bottom {text-align: center; padding-top: 32px; border-top: 1px solid
rgba(255,255,255,0.1);}
/* Responsive */
@media (max-width: 768px) {
.nav {display: none;}
.hero h1 {font-size: 36px;}
.offer-form {flex-direction: column;}
.stats {grid-template-columns: repeat(2, 1fr);}
.steps, .benefits-grid, .testimonials-grid, .footer-grid {grid-template-columns: 1fr;}
.cta-buttons {flex-direction: column;}
}