body { font-family: Arial, sans-serif; margin:0; background:#f8f9fa; color:#222;}
.header { display:flex; align-items:center; justify-content:space-between; padding:20px 40px; background:#fff; box-shadow:0 2px 8px #eee;}
.logo { display:flex; align-items:center; }
.logo-icon { font-size:2em; margin-right:10px; }
.nav { display:flex; gap:15px; }
.btn { padding:10px 22px; border:none; border-radius:5px; cursor:pointer; font-weight:bold;}
.btn-primary { background:#007bff; color:#fff;}
.btn-outline { background:transparent; color:#007bff; border:1px solid #007bff;}
.hero { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:60px 40px 40px 40px; background:#e9f5ff;}
.hero-content { max-width:500px;}
.hero-title { font-size:2.2em; font-weight:bold; margin-bottom:15px;}
.hero-text { font-size:1.2em; margin-bottom:25px;}
.hero-img { max-width:350px; width:100%; border-radius:20px; box-shadow:0 4px 24px #b3d8f7;}
.advantages { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:30px; padding:50px 40px; background:#fff;}
.adv-block { background:#f1f7fb; border-radius:12px; padding:30px 20px; text-align:center;}
.adv-icon { font-size:2.5em; margin-bottom:10px;}
.plans { padding:50px 40px; background:#f8f9fa;}
.plans-title { font-size:1.7em; font-weight:bold; text-align:center; margin-bottom:30px;}
.plan-list { display:flex; flex-wrap:wrap; gap:30px; justify-content:center;}
.plan { background:#fff; border-radius:12px; box-shadow:0 2px 12px #eee; padding:30px 25px; min-width:220px; flex:1 1 220px; max-width:300px; text-align:center;}
.plan-name { font-size:1.2em; font-weight:bold; margin-bottom:10px;}
.plan-price { font-size:1.5em; color:#007bff; margin-bottom:10px;}
.plan-desc { font-size:1em; margin-bottom:18px;}
.testimonials { padding:50px 40px; background:#fff;}
.testi-title { font-size:1.5em; font-weight:bold; text-align:center; margin-bottom:30px;}
.testi-list { display:flex; flex-wrap:wrap; gap:30px; justify-content:center;}
.testi { background:#f1f7fb; border-radius:12px; padding:25px 18px; min-width:200px; max-width:260px; text-align:center;}
.testi-photo { width:48px; height:48px; border-radius:50%; background:#d1e7ff; display:inline-block; margin-bottom:10px; font-size:2em; line-height:48px;}
.testi-name { font-weight:bold; margin-bottom:5px;}
.screenshots { display:flex; gap:20px; justify-content:center; margin-top:30px;}
.screenshot { width:120px; height:80px; background:#e9f5ff; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#007bff; font-weight:bold;}
.cta-final { background:#e9f5ff; padding:40px 40px; text-align:center;}
.cta-final-text { font-size:1.3em; margin-bottom:18px;}
.footer { background:#222; color:#fff; padding:30px 40px;}
.footer-links { display:flex; gap:20px; margin-bottom:10px;}
.footer-social { display:flex; gap:10px; margin-bottom:10px;}
.footer a { color:#fff; text-decoration:underline;}
@media (max-width: 700px) {
    .header, .hero, .advantages, .plans, .testimonials, .cta-final, .footer { padding:20px 10px;}
    .hero { flex-direction:column; gap:30px;}
    .plan-list, .testi-list, .screenshots { flex-direction:column; align-items:center;}
}