* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body { font-size:1.2em; font-family:"PT Sans Narrow", sans-serif; background:url("/images/back-main-1.jpg") center top / cover fixed no-repeat; }
img { max-width:100%; height:auto; }
a { color:inherit; }
.container { width:min(1170px, calc(100% - 30px)); margin:0 auto; }
/* ========================= ШАПКА ========================= */
#Header { background-color:#f8f8f8; }
.header-grid { min-height:76px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; }
.upLogo { font-size:2.2em; font-family:Impact, sans-serif; text-align:center; color:brown; }
.upSlogan { font-size:1.2em; line-height:1em; text-align:center; }
.upPhone { font-size:1.6em; font-family:Impact, sans-serif; text-align:center; color:brown; }
.upPhone a { text-decoration:none; }
/* ========================= ГЛАВНЫЙ ЗАГОЛОВОК ========================= */
.MainHeader { width:100%; }
h1 { margin:0; font-size:2.2em; font-family:"PT Sans Narrow", sans-serif; text-align:center; background-color:#faaf00; line-height:1.2em; color:#f8f8f8; text-shadow:#a52a2a 1px 1px 0, #a52a2a -1px -1px 0, #a52a2a -1px 1px 0, #a52a2a 1px -1px 0; padding:2px 0; }
/* ========================= ПЕРВЫЙ ЭКРАН ========================= */
.offer-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:620px; }
.offer-left, .offer-right { padding:20px 40px; }
.offer-left { text-align:center; }
.MainOfferHeader { font-size:1.4em; background-color:brown; color:#f8f8f8; font-weight:normal; margin-bottom:0; line-height:1.2em; padding:6px 10px; }
#MainOfferImage { text-align:center; }
#MainOfferImage img { display:block; margin:0 auto; }
.MainOfferFooter { font-size:1.2em; background-color:brown; color:#f8f8f8; font-weight:normal; margin-top:-32px; line-height:1.1em; padding:4px 10px 8px; }
/* ========================= ФОРМА ========================= */
.offer-right { text-align:center; }
.MainFormHeader { font-size:1.2em; background-color:brown; padding:6px 0 4px; color:#f8f8f8; margin-bottom:12px; }
.lead-form { text-align:center; }
.lead-form input[type="text"], .lead-form input[type="tel"] { display:block; font-family:"PT Sans Narrow", sans-serif; background:#fff; border:1px solid brown; height:40px; color:brown; width:80%; max-width:440px; font-size:1.2em; padding:0 10px; margin:12px auto; }
.lead-form input::placeholder { color:#9c9c9c; }
.myButton { font-size:1em; font-family:"PT Sans Narrow", sans-serif; border:1px brown solid; background-color:white; color:brown; padding:4px 22px; cursor:pointer; }
.myButton:hover { background-color:brown; color:white; }
.MainFormFooter { font-size:0.8em; background-color:brown; margin:12px 0 4px; color:#f8f8f8; padding:2px 20px; }
/* ========================= АДАПТИВ ========================= */
@media (max-width: 800px) {
    .header-grid { grid-template-columns:1fr; gap:8px; padding:10px 0; }
    .offer-grid { grid-template-columns:1fr; min-height:auto; }
    .offer-left, .offer-right { padding:20px 10px; }
    h1 { font-size:1.7em; }
    .lead-form input[type="text"], .lead-form input[type="tel"] { width:100%; }
}
/* ========================= ВСЕ КУРСЫ ========================= */
#AllCourses { background:rgba(255, 255, 255, 0.94); padding-bottom:35px; }
.SectionHeader { margin-bottom:25px; }
.courses-grid { display:grid; grid-template-columns:1fr 1fr; gap:35px; align-items:start; }
.course-group { margin-bottom:28px; }
.CourseTitle { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-bottom:8px; }
.CourseTitle span { height:1px; background:#999; }
.CourseTitle h3 { margin:0; font-size:1.25em; font-weight:400; text-align:center; }
.course-table { width:100%; border-collapse:collapse; background:white; }
.course-table th, .course-table td { border:1px solid #ddd; padding:7px 9px; text-align:center; line-height:1.15; }
.course-table th { font-weight:700; background:#f4f4f4; }
.course-table th:last-child, .course-table td:last-child { width:125px; white-space:nowrap; }
.course-table a { color:brown; text-decoration:none; }
.course-table a:hover { text-decoration:underline; }
@media (max-width: 800px) {
    .courses-grid { grid-template-columns:1fr; gap:0; }
    .course-table th:last-child, .course-table td:last-child { width:105px; }
}
/* ========================= ОБЩИЕ КОНТЕНТНЫЕ СЕКЦИИ ========================= */
#Features, #FreeCourse, #TeachProcess, #HowItWorks, #Contacts { background:rgba(255, 255, 255, 0.94); }
.features-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:30px 25px; padding:25px 0 35px; }
.feature { text-align:center; }
.feature-icon { margin-bottom:12px; }
.FeaturesHeader { text-align:center; margin-bottom:8px; }
.FeaturesText { text-align:center; }
/* CTA */
#MiddleCTA { color:#f8f8f8; }
.middle-cta-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; }
/* Текстовые секции */
.text-section { padding:20px 20px 30px; }
.text-section p { margin:0 0 18px; line-height:1.4; }
/* HOW */
.how-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:30px 25px; padding:25px 0 35px; }
.how-item { text-align:center; }
/* CONTACTS */
.contacts-grid { display:grid; grid-template-columns:1fr 1fr; }
/* FOOTER */
.footer-title { margin-top:0; }
.footer-title a, #Podval a { color:#f8f8f8; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; font-size:0.85em; }
/* MOBILE */
@media (max-width: 800px) {
    .features-grid, .how-grid { grid-template-columns:1fr 1fr; }
    .middle-cta-grid, .contacts-grid, .footer-grid { grid-template-columns:1fr; }
}
@media (max-width: 480px) {
    .features-grid, .how-grid { grid-template-columns:1fr; }
}
/* ========================= FAQ ========================= */
#FAQ { background:rgba(255, 255, 255, 0.94); }
.faq-question { font-family:"PT Sans Narrow", sans-serif; color:#444; }
/* FORM */
.hp-field { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; opacity:0 !important; }
.form-status { min-height:24px; margin-top:8px; text-align:center; }
.myButton:disabled { opacity:0.6; cursor:wait; }
/* ========================= INTERNAL COURSE PAGE ========================= */
#AboutCourse { padding-bottom:35px; }
.course-accordion-item { border:1px solid #ccc; border-bottom:0; background:white; }
.course-accordion-item:last-child { border-bottom:1px solid #ccc; }
.course-accordion-title { width:100%; border:0; padding:12px 45px 12px 15px; position:relative; background:#f7f7f7; font-family:"PT Sans Narrow", sans-serif; text-align:left; cursor:pointer; }
.course-accordion-title::after { content:"+"; position:absolute; right:15px; top:50%; transform:translateY(-50%); color:brown; font-size:1.5em; }
.course-accordion-item.is-open .course-accordion-title::after { content:"−"; }
.course-accordion-content { display:none; padding:15px 20px 20px; }
.course-accordion-item.is-open .course-accordion-content { display:block; }
.course-accordion-content p { margin:0 0 15px; }
.course-accordion-content .note { text-align:right; }
body .course-page, body > main { font-size:1em; }
#MainOffer { min-height:auto; }
#MainOffer .offer-grid { min-height:610px; padding-top:15px; padding-bottom:20px; }
#MainOffer .offer-left { padding-top:10px; padding-bottom:10px; padding-left:55px; padding-right:55px; }
#MainOffer .offer-right { padding-top:10px; padding-bottom:10px; padding-left:45px; padding-right:45px; }
#MainOfferImage img { width:100%; max-width:340px; }
.MainOfferHeader, .MainOfferFooter { max-width:430px; margin-left:auto; margin-right:auto; }
.offer-right .MainFormHeader, .offer-right .MainFormFooter, .offer-right .lead-form { max-width:500px; margin-left:auto; margin-right:auto; }
.offer-right .lead-form input[type="text"], .offer-right .lead-form input[type="tel"] { width:100%; max-width:none; }
.how-grid { padding-top:30px; padding-bottom:40px; }
.faq-list { padding-top:25px; padding-bottom:40px; }
.faq-question { padding-top:11px; padding-bottom:11px; }
@media (min-width: 1200px) {
    #MainOffer .offer-grid { max-width:1100px; }
}
@media (max-width: 800px) {
    #MainOffer .offer-grid { min-height:auto; }
    #MainOffer .offer-left, #MainOffer .offer-right { padding-left:15px; padding-right:15px; }
    #MainOfferImage img { max-width:270px; }
    .middle-cta-grid { gap:25px; }
}
.course-accordion-content, .course-plain-content { white-space:pre-line; }
.course-plain-content { background:#fff; border:1px solid #ccc; padding:18px 20px; line-height:1.45; }
.course-accordion-content p, .course-plain-content p { margin:0 0 15px; }
.MainFormFooter a { color:inherit; }
.SectionHeader { font-size:1.8em; font-weight:700; color:#a52a2a; line-height:1.2em; text-align:center; margin:16px 0 20px; background:transparent; padding:0; }
.SectionHeaderInverse { font-size:1.8em; font-weight:700; color:#f8f8f8; line-height:1.2em; text-align:center; margin:16px 0 20px; background:transparent; padding:0; }
.FeaturesHeader { font-size:1.25em; font-weight:700; color:#497476; line-height:1.2em; margin:8px 0; }
.FeaturesText { font-size:1.03em; line-height:1.3; }
#AboutCourse,#TeachProcess,#FAQ { background:#f8f8f8; border-top:1px solid gray; border-bottom:1px solid gray; padding-bottom:20px; }
#AboutCourse { background:#fff; }
#TeachProcess { padding-left:20px; }
#Features,#FreeCourse,#HowItWorks,#Contacts { background:#fff; margin:12px 0; border-radius:20px; border:1px solid brown; padding-bottom:20px; }
#Features { background:#f8f8f8; }
#Contacts { padding-bottom:10px; }
#MiddleCTA { background:brown; padding:1px 0 30px; }
#Podval { background:#f8f8f8; color:inherit; font-size:1em; margin-bottom:0; border-top:1px solid gray; border-bottom:1px solid gray; padding:18px 0; }
#Podval a { color:brown; }
.course-page #MainOffer { min-height:auto; }
.course-page #MainOffer .offer-grid { min-height:600px; grid-template-columns:1fr 1fr; column-gap:70px; align-items:center; padding-top:15px; padding-bottom:20px; }
.course-page #MainOffer .offer-left, .course-page #MainOffer .offer-right { padding-top:20px; padding-bottom:20px; }
.course-page .offer-left, .course-page .offer-right { display:flex; flex-direction:column; align-items:center; }
.course-page #MainOfferImage { margin:0; padding:0; }
.course-page #MainOfferImage img { display:block; width:340px; max-width:100%; margin:0 auto; }
.course-page .MainOfferHeader, .course-page .MainOfferFooter { width:430px; max-width:100%; }
.course-page .MainOfferFooter { margin-top:0; padding-top:7px; padding-bottom:7px; }
.course-page .offer-right .MainFormHeader, .course-page .offer-right .MainFormFooter, .course-page .offer-right .lead-form { width:500px; max-width:100%; }
.course-page .offer-right .MainFormHeader, .course-page .offer-right .MainFormFooter { margin-left:0; margin-right:0; }
.course-page .lead-form input[type="text"], .course-page .lead-form input[type="tel"] { width:100%; max-width:none; }
.course-accordion { max-width:1050px; margin:0 auto; padding-top:0; padding-bottom:20px; }
.course-accordion-title { font-weight:400; font-size:1.05em; }
.course-accordion-content { font-size:1.08em; line-height:1.45; }
#AboutCourse .container,#Features .container,#MiddleCTA .container,#FreeCourse .container,#TeachProcess .container,#HowItWorks .container,#FAQ .container,#Contacts .container { width:min(1120px, calc(100% - 40px)); }
.features-grid,.how-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px 38px; padding:30px 20px 40px; }
.feature,.how-item { text-align:center; }
.feature-icon { min-height:46px; font-size:36px; line-height:1; color:#a52a2a; }
.how-grid { max-width:1100px; margin:0 auto; }
.how-number { width:46px; height:46px; margin:0 auto 8px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:#a52a2a; font-size:1.3em; font-weight:700; }
.how-item .FeaturesText { font-size:1em; }
.middle-cta-grid,.contacts-grid,.footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
.middle-cta-grid { max-width:1000px; margin:0 auto; gap:55px; padding:30px 20px 35px; }
.MiddleCTADataText { color:#f8f8f8; text-align:center; font-size:1.1em; line-height:1.3; }
.common-text-section,#FreeCourse .text-section,#TeachProcess .text-section { max-width:1100px; margin:0 auto; padding:0 20px 10px; font-size:1.08em; line-height:1.45; }
.common-text-section p { margin:0 0 18px; }
.faq-list { max-width:1000px; margin:0 auto; padding:25px 20px 40px; }
.faq-item { border:1px solid #d0d0d0; border-bottom:0; background:white; }
.faq-item:last-child { border-bottom:1px solid #d0d0d0; }
.faq-question { width:100%; border:0; background:#fff; text-align:left; font:inherit; font-size:1.06em; padding:11px 44px 11px 14px; position:relative; cursor:pointer; }
.faq-question::after { content:"+"; position:absolute; right:15px; top:50%; transform:translateY(-50%); color:brown; font-size:1.5em; }
.faq-item.is-open .faq-question::after { content:"−"; }
.faq-answer { display:none; padding:2px 14px 14px; font-size:1.04em; line-height:1.4; }
.faq-item.is-open .faq-answer { display:block; }
.contacts-grid { max-width:1050px; margin:0 auto; gap:45px; padding:0 20px 10px; align-items:start; }
.contact-title { text-align:center; font-size:1.2em; }
.contact-data { font-size:1.08em; line-height:1.35; }
.contact-data a { color:brown; }
.footer-title { text-align:center; font-size:1.1em; }
.footer-grid { text-align:center; align-items:start; }
.footer-content { max-width:1000px; }
.MainHeader h1 { font-size:2em; }
@media (min-width:1200px) {
    .course-page #MainOffer .offer-grid { max-width:1100px; }
}
@media (max-width:800px) {
    .course-page #MainOffer .offer-grid { grid-template-columns:1fr; min-height:auto; row-gap:25px; }
    .course-page #MainOffer .offer-left,.course-page #MainOffer .offer-right { padding-left:15px; padding-right:15px; }
    .course-page #MainOfferImage img { width:280px; }
    .features-grid,.how-grid { grid-template-columns:1fr 1fr; }
    .middle-cta-grid,.contacts-grid,.footer-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
    .features-grid,.how-grid { grid-template-columns:1fr; }
}
/* ========================================= 404 PAGE ========================================= */
.error-page-section { min-height:calc(100vh - 76px); }
.error-page-container { display:flex; align-items:center; justify-content:center; min-height:620px; padding:50px 20px; }
.error-card { width:620px; max-width:100%; text-align:center; background:rgba(255, 255, 255, 0.94); border:1px solid #d2d2d2; padding:45px 50px 50px; }
.error-code { font-family:Impact, sans-serif; font-size:6em; line-height:1; color:brown; margin-bottom:10px; }
.error-title { font-size:1.8em; font-weight:700; color:brown; margin-bottom:12px; }
.error-text { font-size:1.15em; line-height:1.4; margin-bottom:28px; }
.error-home-button { display:inline-block; padding:8px 28px; border:1px solid brown; background:#fff; color:brown; text-decoration:none; font-size:1.1em; }
.error-home-button:hover { background:brown; color:#fff; }
@media (max-width: 800px) {
    .error-page-container { min-height:500px; padding:30px 15px; }
    .error-card { padding:35px 20px 40px; }
    .error-code { font-size:4.5em; }
    .error-title { font-size:1.5em; }
}
/* ========================================= THANK YOU PAGE ========================================= */
.thanks-page-section { min-height:calc(100vh - 76px); }
.thanks-page-container { display:flex; align-items:center; justify-content:center; min-height:620px; padding:50px 20px; }
.thanks-card { width:650px; max-width:100%; text-align:center; background:rgba(255, 255, 255, 0.94); border:1px solid #d2d2d2; padding:45px 50px 50px; }
.thanks-title { font-size:2em; font-weight:700; color:brown; margin-bottom:18px; }
.thanks-text { font-size:1.2em; line-height:1.4; margin-bottom:16px; }
.thanks-phone { display:inline-block; font-family:Impact, sans-serif; font-size:1.8em; color:brown; text-decoration:none; margin:8px 0 28px; }
.thanks-phone:hover { text-decoration:underline; }
.thanks-actions { text-align:center; }
.thanks-home-button { display:inline-block; padding:8px 28px; border:1px solid brown; background:#fff; color:brown; text-decoration:none; font-size:1.1em; }
.thanks-home-button:hover { background:brown; color:#fff; }
@media (max-width: 800px) {
    .thanks-page-container { min-height:500px; padding:30px 15px; }
    .thanks-card { padding:35px 20px 40px; }
    .thanks-title { font-size:1.6em; }
    .thanks-phone { font-size:1.5em; }
}
