/* Переменные для быстрой смены палитры */
:root {
    --primary-blue: #2C69D1;
    --secondary-cyan: #4EC5F5;
    --accent-teal: #5CE7D9;
    --text-dark: #1A1A1A;
    --text-light: #FFFFFF;
    --bg-light: #F7FAFF;
    --bg-dark: #1A1A1A;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; color: var(--text-dark); background: var(--bg-light); }
a { text-decoration: none; color: inherit; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* Header */
.header { background: var(--bg-dark); color: var(--text-light); padding: 40px 0; text-align: center; }
.logo { max-width: 150px; margin-bottom: 20px; }
.header h1 { font-size: 2rem; margin-bottom: 10px; }

/* Hero */
.hero { background: linear-gradient(135deg, var(--secondary-cyan), var(--primary-blue)); color: var(--text-light); padding: 80px 20px; text-align: center; }
.hero h2 { font-size: 2.5rem; margin-bottom: 15px; }
.hero p { font-size: 1.2rem; margin-bottom: 30px; }
.btn-primary { display: inline-block; background: var(--text-light); color: var(--primary-blue); padding: 15px 35px; border-radius: 8px; font-weight: bold; transition: .3s; }
.btn-primary:hover { opacity: .9; }

/* Sections */
section { padding: 60px 20px; }
section h3 { text-align: center; margin-bottom: 40px; font-size: 2rem; color: var(--primary-blue); }

/* Problem */
.problem ul { list-style-type: disc; margin-left: 40px; text-align: left; max-width: 600px; margin-left/right auto; font-size: 1.1rem; }

/* Solution */
.solution .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 25px; margin-top: 30px; text-align: center; }
.features-grid div { background-color:#F7FAFF; padding:25px; border-radius:8px; box-shadow:#E9ECEF 0px 2px 6px;}
.features-grid span { display: block; font-size:2rem; color:#5CE7D9; margin-bottom:15px;}

/* Benefits */
.benefits-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:25px; margin-top:30px;}
.benefits-list li { background:#F7FAFF !important;}
.benefits-list li::before{ content:'✅'; color:#5CE7D9 !important; margin-right:.75rem !important;}

/* How it works */
.how-it-works ol { counter-reset :step ; max-width :600px; margin-left :auto ; margin-right :auto;}
.how-it-works ol li { counter-increment :step ; position :relative ; padding-left :45px ; margin-bottom :25px;}
.how-it-works ol li::before{ content :counter(step) ; position :absolute ; left :-45px ; top :-2px ; width :40px ; height :40px ; background :var(--primary-blue) ; color :var(--text-light) ; border-radius :50% ; display :flex ; align-items :center ; justify-content :center ; font-weight :bold;}

/* Comparison */
.compare-table { width :100% ; border-collapse :collapse ; margin-top :30px;}
.compare-table th , .compare-table td { border-bottom-color:#E9ECEF !important;}
.compare-table th , .compare-table td { padding-left-right:.75rem !important;}
.compare-table th { background:#F7FAFF !important;}
.compare-table td:nth-child(2) , .compare-table td:nth-child(3) { text-align:center;}
.compare-table td:nth-child(2) { color:#4EC5F5 !important;}
.compare-table td:nth-child(3) { color:#DCDCDC !important;}

/* Target Audience */
.audience-list { display :grid ; grid-template-columns :repeat(auto-fit , minmax(260px , 1fr)); gap :25px ; list-style-type:none;}
.audience-list li { background:#F7FAFF !important;}
.audience-list li::before{ content:'🧑‍🦰'; margin-right:.75rem !important;}
.audience-list li:nth-child(2)::before{ content:'🏃‍♀️';}
.audience-list li:nth-child(3)::before{ content:'💼';}
.audience-list li:nth-child(4)::before{ content:'🏡';}
.audience-list li:nth-child(5)::before{ content:'🏨';}

/* Offer */
.offer-list { list-style-type:none;}
.offer-list li::before{ content:'✅'; margin-right:.75rem !important;}
.order-form input {
    width :calc(50% - .8rem);
    padding:.75rem .75rem .75rem .8rem !important;
    border-radius:.4rem !important;
    border-color:#CED4DA !important;
    background:#F7FAFF !important;
    outline:none !important;
}
@media(max-width :767px){ .order-form input{ width :calc(100% - .8rem) !important;} }
.order-form button[type=submit] {
    display :block;
    width :calc(50% - .8rem);
    padding:.75rem .75rem !important;
    margin-top:.75rem;
    background :var(--primary-blue);
    color :var(--text-light);
    border-radius:.4rem !important;
    font-weight :bold;
    transition :.3s;
}
.order-form button[type=submit]:hover{ opacity :.9;}
@media(max-width :767px){ .order-form button[type=submit]{ width :calc(100% - .8rem) !important;} }
.note{ text-align:center !important;}

/* Testimonial */
.testimonial blockquote {
    background:#F7FAFF;
    border-left :6px solid #4EC5F5;
    padding :.75rem .75rem .75rem calc(.8rem +6px);
    font-style :italic;
    max-width :68ch;
    margin-left/right auto;
}
.testimonial blockquote::before{ content:'❝';}
.testimonial blockquote::after{ content:'❞';}
.testimonial blockquote p{margin-bottom:.2rem !important;}
.testimonial blockquote cite{display :block !important;}
.testimonial blockquote cite::before{content:'—';margin-right:.4rem !important;}

/* Footer */
.footer {
    background:#F7FAFF!important;
    text-align:center!important;
    padding:.75rem!important;
    font-size:.9rem!important;
    color:#6C757D!important;
}