/* ------------------------------------------------------------
   ПОЛНЫЙ CSS ДЛЯ РОВНОГО И КРАСИВОГО САЙТА (Tilda)
   Скопируйте этот код в /custom.css
   ------------------------------------------------------------ */

/* ======= 1. ЦВЕТОВАЯ СХЕМА (ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ) ======= */
:root {
    --primary-dark: #2C3E66;      /* глубокий синий для фона, шапки, футера */
    --primary-accent: #F39C12;    /* тёплый оранжевый для кнопок, акцентов */
    --primary-accent-hover: #E67E22; /* более насыщенный для наведения */
    --bg-light: #F8F9FC;          /* светлый фон для секций */
    --bg-white: #FFFFFF;          /* белый фон карточек */
    --text-dark: #2C3E50;         /* основной текст */
    --text-gray: #7F8C8D;         /* второстепенный текст */
    --border-radius: 16px;        /* единый радиус скругления */
}

/* ======= 2. ОБЩЕЕ ВЫРАВНИВАНИЕ И ТИПОГРАФИКА ======= */
body {
    line-height: 1.5;
    scroll-behavior: smooth;
    color: var(--text-dark);
    background-color: var(--bg-light);
}

/* Все секции Tilda получают единые отступы */
.t-section, 
section, 
.t-container, 
.t-wrapper {
    padding: 80px 0;
    margin-left: auto;
    margin-right: auto;
}

/* ======= 3. КАРТОЧКИ (ТАРИФЫ, ПРЕИМУЩЕСТВА, ОТЗЫВЫ) ======= */
.price-plan, 
.t-card, 
.t835__card, 
.t465__item,
.feedback-card {
    background: var(--bg-white);
    border-radius: var(--border-radius);
    padding: 30px 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    height: 100%;                /* выравнивание по высоте в ряду */
    display: flex;
    flex-direction: column;
}

.price-plan:hover,
.t-card:hover,
.t835__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.1);
}

/* Заголовки карточек */
.price-plan h3,
.t-card h3 {
    color: var(--primary-dark);
    font-weight: 700;
    margin-bottom: 20px;
}

/* ======= 4. КНОПКИ (ЕДИНЫЙ СТИЛЬ) ======= */
.t-btn, 
.t-submit, 
button[type="submit"],
.tn-atom,
.t998__btn-wrapper .t-btn {
    background-color: var(--primary-accent) !important;
    border-radius: 60px !important;
    padding: 12px 32px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    transition: all 0.2s ease !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.t-btn:hover, 
.t-submit:hover,
.tn-atom:hover {
    background-color: var(--primary-accent-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(243, 156, 18, 0.25);
}

/* Кнопки-ссылки второго плана (если есть) */
.t-btn_secondary {
    background-color: transparent !important;
    border: 2px solid var(--primary-accent) !important;
    color: var(--primary-accent) !important;
}
.t-btn_secondary:hover {
    background-color: var(--primary-accent) !important;
    color: white !important;
}

/* ======= 5. ФОРМЫ И ПОЛЯ ВВОДА ======= */
input, 
textarea, 
select,
.t-input {
    border-radius: 12px !important;
    border: 1px solid #E2E8F0 !important;
    padding: 12px 16px !important;
    transition: all 0.2s;
    background-color: var(--bg-white);
    font-size: 1rem;
}

input:focus, 
textarea:focus,
.t-input:focus {
    border-color: var(--primary-accent) !important;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.2);
    outline: none;
}

/* ======= 6. ТАБЛИЦЫ (НАПРИМЕР, СРАВНЕНИЕ ЦЕН) ======= */
table, 
.t465__table,
.price-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

th, td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid #EDF2F7;
}

th {
    background-color: var(--primary-dark);
    color: white;
    font-weight: 600;
}

tr:last-child td {
    border-bottom: none;
}

.highlight, 
.best-value {
    background-color: rgba(243, 156, 18, 0.08);
    font-weight: 600;
    border-left: 4px solid var(--primary-accent);
}

/* ======= 7. АККОРДЕОН FAQ (ЕСЛИ ИСПОЛЬЗУЕТСЯ) ======= */
.accordion-item {
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 8px;
}
.accordion-question {
    cursor: pointer;
    padding: 20px 0;
    font-weight: 600;
    color: var(--primary-dark);
}
.accordion-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 0;
    color: var(--text-gray);
}
.accordion-item.active .accordion-answer {
    max-height: 300px;
}

/* ======= 8. ПОПАПЫ (ЕСЛИ ЕСТЬ) ======= */
.t-popup,
.popup-overlay {
    background: rgba(44, 62, 80, 0.95);
    backdrop-filter: blur(6px);
}
.t-popup__container,
.popup-container {
    border-radius: 28px;
    background: white;
    padding: 40px;
    box-shadow: 0 25px 40px -12px black;
}

/* ======= 9. ФУТЕР ======= */
footer, 
.t-footer {
    background-color: var(--primary-dark);
    color: white;
    padding: 40px 0 20px;
}
footer a, 
.t-footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}
footer a:hover {
    color: var(--primary-accent);
}

/* ======= 10. АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА) ======= */
@media screen and (max-width: 768px) {
    .t-section, 
    section, 
    .t-container,
    .t-wrapper {
        padding: 48px 20px !important;
    }
    
    table, 
    .price-table {
        font-size: 14px;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    th, td {
        padding: 10px 12px;
    }
    
    .price-plan, 
    .t-card {
        padding: 20px 16px;
    }
    
    .t-btn, .t-submit {
        padding: 10px 24px !important;
        font-size: 0.9rem;
    }
}

/* ======= 11. ДОПОЛНИТЕЛЬНО: ПРОБЕЛЫ МЕЖДУ ЭЛЕМЕНТАМИ ======= */
.t-container_flex, 
.t-row {
    gap: 24px; /* для flex/grid колонок */
}

/* Убираем двойные отступы у некоторых блоков Tilda */
.t835__textwrapper {
    padding: 0;
}
/* ========== ОСНОВНЫЕ ЦВЕТА ========== */
:root {
    --primary-dark: #1E2A47;   /* тёмно-синий */
    --primary-accent: #FF6B35; /* ярко-оранжевый (кнопки, акценты) */
    --primary-yellow: #FFB800; /* жёлтый (доп. акценты, галочки) */
    --bg-light: #F5F7FA;       /* светлый фон для блоков */
    --bg-white: #FFFFFF;       /* белый фон */
    --text-dark: #2D3748;      /* основной текст */
    --text-gray: #718096;      /* второстепенный текст */
}

/* ========== ОБЩИЕ ЭЛЕМЕНТЫ ========== */
body {
    background-color: var(--bg-light);
    color: var(--text-dark);
    font-family: 'Arial', 'Helvetica Neue', sans-serif;
}

/* Заголовки */
h1, h2, h3, .t-name, .t-title, .t-heading {
    color: var(--primary-dark);
}

/* Ссылки (обычные) */
a:not(.t-btn):not(.t-social__link) {
    color: var(--primary-accent);
    text-decoration: none;
}
a:not(.t-btn):not(.t-social__link):hover {
    text-decoration: underline;
    color: var(--primary-yellow);
}

/* ========== КНОПКИ (основные) ========== */
.t-btn,
.t-submit,
button[type="submit"],
.btn,
.button {
    background-color: var(--primary-accent) !important;
    color: white !important;
    border: none !important;
    transition: all 0.3s ease;
}
.t-btn:hover,
.t-submit:hover,
button[type="submit"]:hover {
    background-color: var(--primary-yellow) !important;
    color: var(--primary-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Второстепенные кнопки (если есть класс .btn-secondary) */
.btn-secondary {
    background-color: var(--primary-yellow) !important;
    color: var(--primary-dark) !important;
}
.btn-secondary:hover {
    background-color: var(--primary-accent) !important;
    color: white !important;
}

/* ========== ТАБЛИЦЫ (цены) ========== */
table {
    background-color: var(--bg-white);
    border-collapse: collapse;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
th {
    background-color: var(--primary-dark);
    color: white;
    padding: 16px;
    font-weight: bold;
}
td {
    padding: 14px;
    border-bottom: 1px solid #e2e8f0;
    color: var(--text-dark);
}
/* Самая выгодная колонка (например, 8 уроков) */
td.highlight, .best-value {
    background-color: #FFF5E6; /* светло-оранжевый фон */
    font-weight: bold;
}
/* Цены в таблице */
td strong, td b {
    color: var(--primary-accent);
}

/* ========== КАРТОЧКИ, ОТЗЫВЫ, ПРЕИМУЩЕСТВА ========== */
.t-card, .feedback-card, .advantage-item {
    background-color: var(--bg-white);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}
.t-card:hover, .feedback-card:hover {
    transform: translateY(-5px);
}

/* Иконки внутри карточек (если они через SVG или шрифт) */
.t-card i, .feedback-card i {
    color: var(--primary-accent);
}

/* Цифры (статистика) */
.stat-number, .big-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-accent);
}

/* ========== БЛОК ГАРАНТИЯ ========== */
.guarantee-block {
    border: 2px solid var(--primary-yellow);
    background-color: var(--bg-white);
    border-radius: 16px;
    padding: 20px;
    margin: 20px 0;
}
.guarantee-icon {
    color: var(--primary-yellow);
    font-size: 2rem;
}

/* ========== ФУТЕР ========== */
footer, .t-footer {
    background-color: var(--primary-dark);
    color: var(--bg-light);
}
footer a, .t-footer a {
    color: var(--primary-yellow);
}
footer a:hover {
    color: white;
}

/* ========== ФОРМЫ ОБРАТНОЙ СВЯЗИ ========== */
input, textarea, select {
    border: 1px solid #cbd5e0;
    border-radius: 12px;
    padding: 12px;
    width: 100%;
    transition: border 0.2s;
}
input:focus, textarea:focus {
    border-color: var(--primary-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,107,53,0.2);
}

/* ========== ЧЕКЛИСТЫ, ГАЛОЧКИ ========== */
.checklist li::before,
.tick-list li::before {
    content: "✓";
    color: var(--primary-yellow);
    font-weight: bold;
    margin-right: 8px;
}

/* ========== ДОПОЛНИТЕЛЬНЫЕ АКЦЕНТЫ ========== */
.accent-text {
    color: var(--primary-accent);
}
.accent-bg {
    background-color: var(--primary-yellow);
    color: var(--primary-dark);
    padding: 4px 12px;
    border-radius: 50px;
    display: inline-block;
}
/* Затемнённый фон под попапом */
.popup-overlay {
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
}
/* Само окно попапа */
.popup-container {
    background: #FFFFFF;
    border-radius: 32px;
    max-width: 500px;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
/* Заголовок попапа */
.popup-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1E2A47;
    margin-bottom: 1rem;
}
/* Кнопка закрытия */
.popup-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #718096;
} 
/* ─────────────────────────────────────────────────────────────
   1. ОСНОВНЫЕ СТИЛИ ДЛЯ ВСЕХ КНОПОК
   Эти стили применятся ко всем стандартным кнопкам Тильды.
   Если вы используете другие классы для кнопок, просто добавьте
   их в список через запятую в селекторе ниже.
───────────────────────────────────────────────────────────── */
.t-btn,
.t-submit,
button,
.button,
.btn,
input[type="submit"] {
    /* Фирменный оранжевый цвет */
    background-color: #FF6B35 !important;
    /* Белый текст */
    color: #FFFFFF !important;
    /* Убираем стандартные рамки */
    border: none !important;
    /* Скругляем углы */
    border-radius: 60px !important;
    /* Внутренние отступы для удобства нажатия */
    padding: 12px 32px !important;
    /* Красивый и понятный шрифт */
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    /* Плавные переходы для эффектов наведения */
    transition: all 0.3s ease !important;
    /* Убираем стандартное подчёркивание у ссылок-кнопок */
    text-decoration: none !important;
    /* Делаем кнопки блочными, чтобы они занимали всю ширину при необходимости */
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

/* Эффект при наведении курсора */
.t-btn:hover,
.t-submit:hover,
button:hover,
.button:hover,
.btn:hover,
input[type="submit"]:hover {
    /* При наведении делаем фон темнее */
    background-color: #E05A2A !important;
    /* Лёгкий эффект поднятия */
    transform: translateY(-2px);
    /* Увеличиваем тень для большей заметности */
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
}

/* Эффект при нажатии (для тактильной отдачи) */
.t-btn:active,
.t-submit:active,
button:active,
.button:active,
.btn:active,
input[type="submit"]:active {
    transform: translateY(1px);
}

/* ─────────────────────────────────────────────────────────────
   2. СТИЛИ ДЛЯ ВТОРОСТЕПЕННЫХ КНОПОК (ПРОЗРАЧНЫЕ)
   Чтобы они выглядели как рамка.
   Для этого добавьте таким кнопкам дополнительный класс .btn-outline.
───────────────────────────────────────────────────────────── */
.btn-outline {
    background-color: transparent !important;
    color: #FF6B35 !important;
    border: 2px solid #FF6B35 !important;
}

.btn-outline:hover {
    background-color: rgba(255, 107, 53, 0.1) !important;
    color: #E05A2A !important;
    border-color: #E05A2A !important;
}
/* Настройка глобальных переменных */
:root {
    /* Основные цвета (база) */
    --primary-dark: #2C3E66;     /* благородный глубокий синий */
    --primary-accent: #F39C12;    /* тёплый солнечный оранжевый */
    --primary-yellow: #E67E22;    /* приглушённый акцентный оранжевый */
    
    /* Нейтральные цвета (фон и текст) */
    --bg-light: #F8F9FC;          /* очень светлый фон (чуть теплее) */
    --bg-white: #FFFFFF;          /* чистый белый */
    --text-dark: #2C3E50;         /* для основного текста (спокойный тёмный) */
    --text-gray: #7F8C8D;         /* для вспомогательного текста */
    
    /* Новые переменные (hover / состояния) */
    --primary-accent-hover: #D35400; /* более яркий для наведения */
    --primary-dark-hover: #1A252F;   /* глубокий синий для футера */
}/* Общее выравнивание и пространство */
body {
    ...
    line-height: 1.5;        /* оптимальная читаемость строк */
    scroll-behavior: smooth; /* плавная прокрутка по якорям */
}

/* Единый стиль секций */
.t-section, section, .t-container {
    padding: 80px 0;         /* стандартные вертикальные отступы */
    margin: 0 auto;
}

/* Контроль отступов у тарифов */
.price-plan {
    padding: 30px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.price-plan:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Карточки отзывов */
.feedback-card {
    grid-template-rows: auto auto auto;  /* строгая структура */
    gap: 20px;
    height: 100%;              /* выравнивание по высоте */
}/* Кнопки: плавность и универсальность */
.t-btn, .t-submit, button[type="submit"] {
    ...
    border-radius: 50px;       /* мягкая скругленная форма */
    font-weight: 600;          /* акцент на тексте кнопки */
    cursor: pointer;
}
.t-btn:hover, .t-submit:hover {
    transform: translateY(-2px);  /* легкое приподнятие */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* F.A.Q. Аккордеон */
.accordion-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.accordion-question {
    cursor: pointer;
    padding: 20px 0;
}
.accordion-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
}

/* Поля ввода: акцент при фокусе */
input, textarea, select {
    ...
    transition: all 0.2s;
}
input:focus, textarea:focus {
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.2); /* приятное свечение */
}

/* Таблица цен */
table {
    ...
    border-radius: 20px;      /* единая геометрия */
}
td.highlight, .best-value {
    background-color: rgba(243, 156, 18, 0.1);
    font-weight: 600;
    border-left: 3px solid var(--primary-accent);
}/* Затемнённый фон и контейнер попапа */
.popup-overlay {
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(8px);
}
.popup-container {
    background: #FFFFFF;
    border-radius: 28px;
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.2);
}

/* Адаптивность: мобильные устройства */
@media screen and (max-width: 768px) {
    .t-section, section, .t-container {
        padding: 40px 20px;
    }
    table, .price-table {
        font-size: 14px;
    }
    th, td {
        padding: 12px 8px;
    }
}