/* --- Telegram Promo Block --- */
.telegram-promo {
    background-color: #f1f1f1; /* Светлый фон, можно адаптировать под вашу палитру */
    padding: 60px 0;
    text-align: center;
}

.telegram-promo__content {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

.telegram-promo__title {
    font-size: 1.8rem; /* Адаптируйте под ваш размер заголовков */
    margin-bottom: 1rem;
    color: var(--primary); /* Используйте ваш основной цвет текста/заголовков */
    font-weight: 500;
}

.telegram-promo__text {
    font-size: 1.1rem; /* Адаптируйте под ваш размер текста */
    margin-bottom: 2rem;
    color: #555; /* Серый цвет для текста */
    line-height: 1.6;
}

/* Ссылка внутри текста */
.telegram-promo__text a {
    color: #0088cc; /* Стандартный синий цвет Telegram для ссылки */
    text-decoration: underline;
}
.telegram-promo__text a:hover {
    color: #0077b3; /* Темнее при наведении */
    text-decoration: none;
}

/* --- Telegram Button Style --- */
.btn--telegram {
    background-color: #0088cc; /* Стандартный синий цвет Telegram */
    color: white;
    border: none;
    padding: 15px 30px; /* Адаптируйте отступы под ваши кнопки */
    font-size: 1rem; /* Адаптируйте размер шрифта */
    border-radius: 4px; /* Адаптируйте скругление углов */
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Плавные переходы */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Легкая тень для кнопки */
}

.btn--telegram:hover {
    background-color: #0077b3; /* Более темный оттенок при наведении */
    transform: translateY(-2px); /* Легкое приподнимание при наведении */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Усиление тени при наведении */
}

/* Адаптивность для Telegram блока */
@media (max-width: 768px) {
    .telegram-promo {
        padding: 40px 0;
    }

    .telegram-promo__title {
        font-size: 1.5rem;
    }

    .telegram-promo__text {
        font-size: 1rem;
    }

    .btn--telegram {
        padding: 12px 25px;
        font-size: 0.95rem;
        display: block; /* Сделать кнопку блочной на мобильных для центрирования */
        margin: 0 auto; /* Центрирование кнопки */
        max-width: 300px; /* Ограничение ширины кнопки */
    }
}
/* --- Предполагаемые базовые стили для кнопок в шапке (если ещё не определены) --- */
.header__btn {
 display: inline-block;
 padding: 0.6rem 1.2rem;
 border-radius: 6px; /* Сlightly rounded corners like others */
 text-decoration: none;
 font-weight: 500;
 font-size: 0.9rem;
 transition: all 0.3s ease;
 color: white; /* White text */
 text-align: center;
 white-space: nowrap;
 border: none; /* No border like others */
 cursor: pointer; /* Indicate it's clickable */
 margin: 0 0.2rem; /* Add some small horizontal margin if needed */
}

.header__btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* --- Стили для конкретных кнопок --- */

/* WhatsApp Button */
.header__btn--whatsapp {
 background: #25D366; /* Standard WhatsApp green */
}

/* Booking Button */
.header__btn--booking {
 background: #8A5A44; /* Your brand accent color */
}

/* Telegram Button */
.header__btn--telegram {
 background: #0088cc; /* Standard Telegram blue */
}

/* --- НОВАЯ кнопка "Школа" --- */
.header__btn--school {
 /* Используем тот же цвет, что и для booking или другой акцентный */
 background: #8A5A44; /* Цвет акцента, как у других кнопок */
 /* Если хотите другой цвет, например, синий, используйте: background: #3498db; */
 color: white; /* Убедитесь, что текст белый */
 border: none; /* Нет рамки */
}

/* При желании, можно добавить уникальный hover-эффект для кнопки "Школа" */
/*
.header__btn--school:hover {
 background: #7a4a34; /* Немного темнее основного цвета при наведении */
 /* Или используйте filter для затемнения */
 /* filter: brightness(90%); */
/*
}
*/

/* Базовые переменные */
/* Header */
.header {
    background: var(--primary);
    color: var(--white);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.header__title {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--white);
}

.header__links {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.header__btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    color: var(--white);
    text-align: center;
    white-space: nowrap;
}

.header__btn--whatsapp {
    background: #25D366;
}

.header__btn--booking {
    background: var(--accent);
}

.header__btn--telegram {
    background: #0088cc;
}

.header__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Адаптивность для шапки */
@media (max-width: 768px) {
    .header__content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .header__title {
        font-size: 1.1rem;
    }
    
    .header__links {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .header__btn {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 480px) {
    .header__links {
        flex-direction: column;
        width: 100%;
    }
    
    .header__btn {
        width: 100%;
    }
}

/* Обновите отступ для hero секции */
.hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), 
                url('https://vscolorstudio.ru/1759777832.png') center/cover;
    color: var(--white);
    padding: 120px 0 100px 0; /* Увеличили верхний отступ для шапки */
    text-align: center;
}
:root {
    --primary: #2c3e50;
    --accent: #e74c3c;
    --text: #333;
    --light: #f8f9fa;
    --border: #e0e0e0;
    --white: #ffffff;
    --shadow: 0 5px 15px rgba(0,0,0,0.08);
    --shadow-hover: 0 10px 30px rgba(0,0,0,0.15);
}

/* Сброс стилей */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text);
    font-weight: 300;
}

/* Контейнер */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Общие стили секций */
section {
    padding: 80px 0;
}

.section-title {
    font-size: 2.2rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--primary);
}

.section-subtitle {
    font-size: 1.2rem;
    text-align: center;
    color: #555;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.text-center {
    text-align: center;
}

/* Кнопки */
.btn {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    text-align: center;
    border: none;
    cursor: pointer;
}

.btn--primary {
    background: var(--accent);
    color: var(--white);
}

.btn--outline {
    border: 2px solid var(--white);
    color: var(--white);
    background: transparent;
}

.btn--white {
    background: var(--white);
    color: var(--accent);
}

.btn--large {
    padding: 18px 40px;
    font-size: 1.1rem;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
}

/* Hero Section */
.hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), 
                url('https://vscolorstudio.ru/1759777832.png') center/cover;
    color: var(--white);
    padding: 100px 0;
    text-align: center;
}

.hero__title {
    font-size: 2.8rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero__subtitle {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero__buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* Challenges Section */
.challenges {
    background: var(--light);
}

.challenges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.challenge-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.challenge-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.challenge-card__icon {
    background: var(--accent);
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 500;
}

.challenge-card__title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--primary);
    font-weight: 500;
}

.challenge-card__text {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.challenge-card__result {
    color: var(--accent);
    font-weight: 500;
    font-size: 0.9rem;
}

.solution-cta {
    background: var(--primary);
    color: var(--white);
    padding: 2.5rem;
    border-radius: 8px;
    text-align: center;
}

.solution-cta__title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.solution-cta__text {
    line-height: 1.6;
    color: #ecf0f1;
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

/* Expertise Section */
.expertise {
    background: var(--primary);
    color: var(--white);
}

.expertise-header .section-title,
.expertise-header .section-subtitle {
    color: var(--white);
}

.expertise-header .section-subtitle {
    color: #ecf0f1;
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.expertise-card {
    background: rgba(255,255,255,0.1);
    padding: 2.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--accent);
}

.expertise-card__title {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.expertise-card__list {
    color: #ecf0f1;
    line-height: 1.6;
    list-style: none;
}

.expertise-card__list li {
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.expertise-card__list li::before {
    content: "•";
    color: var(--accent);
    font-weight: bold;
    flex-shrink: 0;
}

/* Career Section */
.career {
    background: var(--light);
}

.career-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.career-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--accent);
}

.career-card__title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--primary);
    font-weight: 500;
}

.career-card__text {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.career-card__result {
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Brands Section */
.brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.brand-card {
    background: #f8f9fa;
    padding: 2.5rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.brand-card__title {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    color: var(--primary);
    font-weight: 500;
    text-align: center;
}

.brand-feature {
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--accent);
    color: #666;
    line-height: 1.6;
}

.brands-info {
    background: var(--primary);
    color: var(--white);
    padding: 2.5rem;
    border-radius: 8px;
}

.brands-info__title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 500;
}

.brands-info__text {
    text-align: center;
    line-height: 1.6;
    color: #ecf0f1;
    max-width: 800px;
    margin: 0 auto;
}

/* Results Section */
.results {
    background: var(--primary);
    color: var(--white);
}

.results .section-title,
.results .section-subtitle {
    color: var(--white);
}

.results .section-subtitle {
    color: #ecf0f1;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.result-card {
    background: rgba(255,255,255,0.1);
    padding: 2rem;
    border-radius: 8px;
    border-left: 4px solid var(--accent);
}

.result-card__title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.result-card__text {
    color: #ecf0f1;
    line-height: 1.6;
}

.results-stats {
    background: rgba(231, 76, 60, 0.1);
    padding: 2.5rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.results-stats__title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.stat-item {
    padding: 1rem;
}

.stat-number {
    font-size: 2rem;
    color: var(--accent);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: #ecf0f1;
}

/* Formats Section */
.formats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.format-card {
    background: #f8f9fa;
    padding: 2.5rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.format-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.format-card__title {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    color: var(--primary);
    font-weight: 500;
    text-align: center;
}

.format-feature {
    margin-bottom: 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--accent);
    color: #666;
    line-height: 1.6;
}

/* Systematic Approach Section */
.systematic {
    background: var(--light);
}

.systematic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.systematic-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: transform 0.3s ease;
}

.systematic-card:hover {
    transform: translateY(-5px);
}

.systematic-number {
    background: var(--primary);
    color: var(--white);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.5rem;
    font-weight: 500;
}

.systematic-card__title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--primary);
    font-weight: 500;
}

.systematic-card__content {
    color: #666;
    line-height: 1.6;
}

.systematic-card__content div {
    margin-bottom: 0.8rem;
}

.comparison {
    background: var(--primary);
    color: var(--white);
    padding: 2.5rem;
    border-radius: 8px;
}

.comparison__title {
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 500;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.comparison-item__title {
    color: var(--accent);
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
}

.comparison-list {
    color: #ecf0f1;
    line-height: 1.6;
    list-style: none;
    padding: 0;
}

.comparison-list li {
    margin-bottom: 0.5rem;
}

.comparison-list li::before {
/* --- Стили для страницы Школы --- */

/* Герой раздела Школы */
.school-hero {
    /* Если нужно отличать визуально от главной, можно изменить градиент или изображение */
    /* background: linear-gradient(rgba(44, 62, 80, 0.85), rgba(44, 62, 80, 0.85)), url('путь/к/другому/изображению.jpg') center/cover; */
}

/* Введение школы */
.school-intro {
    margin-bottom: 4rem;
    text-align: center;
}

.school-intro__text {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #555;
    max-width: 800px;
    margin: 0 auto 1.5rem;
}

/* Программы обучения */
.school-program {
    margin-bottom: 4rem;
    padding: 2rem;
    background-color: #f8f9fa; /* или var(--light) если определена */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.school-program__title {
    color: var(--primary); /* Используем существующую переменную */
    margin-bottom: 1.5rem;
    text-align: left; /* Заголовки программ выравниваем по левому краю */
}

.school-program__details {
    color: #444;
    line-height: 1.6;
}

.school-program__list {
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0;
}

.school-program__list li {
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
}

.school-program__list li::before {
    content: "•";
    color: var(--accent); /* Используем существующую переменную */
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}

/* Отзывы учеников */
.school-testimonials {
    margin: 4rem 0;
}

.testimonial {
    background-color: var(--primary);
    color: white;
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    font-style: italic;
    line-height: 1.6;
}

.testimonial__author {
    display: block;
    margin-top: 1rem;
    font-style: normal;
    font-weight: 500;
    color: #ecf0f1; /* Светлый цвет для текста на темном фоне */
    text-align: right;
}

/* CTA на странице школы */
.school-cta {
    background-color: var(--accent);
    color: white;
    padding: 3rem 2rem;
    border-radius: 8px;
    text-align: center;
    margin-top: 2rem;
}

.school-cta__title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-weight: 500;
    color: inherit;
}

.school-cta__text {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: #f5f5f5; /* Немного светлее основного текста */
}

.school-cta .btn--primary {
    background-color: white;
    color: var(--accent);
}

.school-cta .btn--primary:hover {
    background-color: #f0f0f0; /* Немного темнее при наведении */
    color: var(--accent);
}