/* =====================================================================
   site.css - надстройка над custom.css (загружается последней).
   Только добавления: кириллический фолбэк шрифта, текстовый логотип,
   модалка заявки, sticky-мессенджеры, оформление форм, WebP-фоны.
   Дизайн, сетку и анимации шаблона не меняем.
   ===================================================================== */

/* --- 1. Кириллический фолбэк для заголовков --------------------------
   Space Grotesk не содержит кириллицы, RU-заголовки падали в системный
   serif. Manrope - близкий геометрический гротеск с кириллицей, ставим
   его основным для accent-font. Размеры и насыщенность не трогаем.       */
:root {
    --accent-font: "Manrope", "Space Grotesk", sans-serif;
}

/* --- 2. Логотип: эмблема + текст (как в оригинале: иконка + wordmark) --- */
.navbar-brand,
.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.navbar-brand .brand-mark { width: 44px; height: 44px; flex: 0 0 auto; }
.footer-logo .brand-mark { width: 48px; height: 48px; flex: 0 0 auto; }
.navbar-brand .brand-text,
.footer-logo .brand-text {
    font-family: var(--accent-font);
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--white-color);
    white-space: nowrap;
}
.footer-logo .brand-text { font-size: 30px; }
.brand-text .brand-dot { color: var(--accent-color); }

/* --- 3. Модалка заявки ----------------------------------------------- */
.lead-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.lead-modal.is-open { display: flex; }
.lead-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 13, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.lead-modal__box {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--white-color);
    border-radius: 16px;
    padding: 36px 32px 32px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    max-height: 92vh;
    overflow-y: auto;
    animation: leadModalIn 0.3s ease;
}
@keyframes leadModalIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lead-modal__box h3 {
    font-family: var(--accent-font);
    font-size: 26px;
    color: var(--primary-color);
    margin: 0 0 8px;
}
.lead-modal__box .lead-modal-sub {
    color: var(--text-color);
    font-size: 15px;
    margin: 0 0 22px;
}
.lead-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--primary-color);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}
.lead-modal__close:hover { background: var(--accent-color); }
body.lead-modal-open { overflow: hidden; }

/* --- 4. Оформление лид-форм ------------------------------------------ */
.lead-form .form-group { margin-bottom: 16px; }
.lead-form .lead-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-color);
    margin: 6px 0 18px;
    cursor: pointer;
}
.lead-form .lead-consent input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--accent-color); }
.lead-form .lead-consent a { color: var(--primary-color); text-decoration: underline; }
.lead-form .hp-wrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form .lead-msg { min-height: 22px; font-size: 14px; margin-top: 10px; }
.lead-form .lead-msg.ok  { color: #1c8a4d; }
.lead-form .lead-msg.err { color: var(--error-color); }
.lead-form button[type="submit"][disabled] { opacity: 0.6; pointer-events: none; }
/* форма-секция: карточка на светлой части */
.lead-section .lead-form-card {
    background: var(--secondary-color);
    border-radius: 16px;
    padding: 34px 30px;
}
.lead-section .lead-benefits { margin: 22px 0 0; padding: 0; list-style: none; }
.lead-section .lead-benefits li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    color: var(--text-color);
    font-size: 16px;
}
.lead-section .lead-benefits li::before {
    content: "\f00c";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--accent-color);
}

.contact-info .contact-lines { list-style: none; margin: 24px 0 0; padding: 0; }
.contact-info .contact-lines li { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 16px; color: var(--primary-color); }
.contact-info .contact-lines li i { color: var(--accent-color); width: 20px; text-align: center; }
.contact-info .contact-lines a { color: var(--primary-color); }

/* футер: компактное согласие на тёмном фоне */
.footer-newsletter-form .lead-consent.footer-consent {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    margin: 10px 0 0;
}
.footer-newsletter-form .footer-consent a { color: var(--accent-color); }
.footer-newsletter-form .lead-msg { color: rgba(255, 255, 255, 0.85); }

/* --- 5. Sticky-мессенджеры ------------------------------------------- */
.float-contacts {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9990;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.float-btn-fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.float-btn-fab:hover { transform: scale(1.08); color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32); }
.float-btn-fab.wa-fab { background: #25D366; }
.float-btn-fab.tg-fab { background: #29A9EB; }
body.cookie-open .float-contacts { bottom: 96px; }

/* --- 6. WebP-фоны (та же геометрия, лучше вес) -----------------------
   Важно: у hero/our-story/cta-box класс .dark-section тоже есть. Чтобы
   .dark-section не перебивал их собственный фон, спец-секции задаём
   составным селектором (выше по специфичности), как в оригинале custom.css. */
.dark-section          { background-image: url('../images/dark-section-bg-image.webp'); }
.hero.dark-section     { background-image: url('../images/hero-bg-image.webp'); }
.our-story.dark-section{ background-image: url('../images/our-story-bg-image.webp'); }
.cta-box.dark-section  { background-image: url('../images/cta-box-bg-img.webp'); }
.main-footer           { background-image: url('../images/footer-bg-image.webp'); }
.our-testimonials      { background-image: url('../images/testimonial-image-bg.webp'); }

/* --- 6c. Снимаем Title Case (capitalize) с многословных RU-фраз --------
   В шаблоне nav/кнопки/ссылки идут через text-transform: capitalize, что для
   русского даёт «Получить Расчёт», «Под Ключ В Алматы» - визуально безграмотно.
   Текст уже написан в нужном регистре, поэтому просто отключаем трансформацию. */
.btn-default,
.readmore-btn,
.main-menu ul li a,
.slicknav_nav li a,
.section-footer-text p a,
.project-nav ul li a,
.scrolling-content span,
.footer-menu ul li,
.footer-menu ul li a {
    text-transform: none;
}

/* бейдж выделенного тарифа: «Most Popular» (из шаблона) -> по-русски */
.pricing-item.highlighted-box .pricing-item-header::before {
    content: 'Популярный';
}

/* отзывы: вместо демо-логотипа «Logoipsum» - источник отзыва бейджем */
.testimonial-company-logo .testi-source {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--accent-font);
    font-weight: 600;
    font-size: 15px;
    color: var(--primary-color);
}
.testimonial-company-logo .testi-source::before {
    content: "\f005";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 14px;
    color: var(--accent-color);
}

/* --- 6e. Надзаголовок-eyebrow как <p> (а не <h3>) -----------------------
   §23: надзаголовки-надписи не должны быть заголовками (пропуск уровня h1->h3).
   Класс-двойник 1:1 со стилем .section-title h3 (включая акцент-чип ::before). */
.section-title p.section-eyebrow {
    position: relative;
    display: inline-block;
    font-family: var(--accent-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.2em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-left: 16px;
    margin: 0 0 10px;
    color: var(--primary-color);
}
.section-title p.section-eyebrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--accent-color);
    width: 6px;
    height: 6px;
}
.dark-section .section-title p.section-eyebrow { color: var(--white-color); }

/* §23: hero/hero-info надписи-лейблы переведены с <h3> на <p> (чинит пропуск
   уровня h1->h3), стиль 1:1 с исходными .video-play-button h3 и hero-info h3. */
.video-play-button .vpb-title {
    font-family: var(--accent-font);
    font-weight: 500;
    font-size: 18px;
    color: var(--white-color);
    margin: 0;
}
.hero-info-item-content .hii-title {
    font-family: var(--accent-font);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4em;
    margin: 0;
    color: var(--primary-color);
}
.hero-info-counter-box .hicb-title {
    font-family: var(--accent-font);
    font-weight: 500;
    font-size: 20px;
    color: var(--white-color);
    line-height: 1.4em;
    margin-bottom: 10px;
}

/* --- 6f. Тач: фоны без parallax-дёрганья (§25) ------------------------- */
@media (hover: none) and (pointer: coarse) {
    .parallaxie { background-attachment: scroll !important; }
}

/* §19: подразделы SEO-блока с акцент-полосой слева */

/* --- 6d. SEO-блок: премиум-таблицы и отступы подсекций ----------------- */
.seo-section .seo-sub { margin-top: 64px; }
.seo-section .seo-sub:first-of-type { margin-top: 36px; }
.seo-section .seo-lead {
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-color);
    max-width: 900px;
    margin: 0 auto 8px;
    text-align: center;
}
.seo-section .seo-sub-title {
    position: relative;
    font-family: var(--accent-font);
    font-size: 30px;
    line-height: 1.25;
    color: var(--primary-color);
    margin: 0 0 14px;
    padding-left: 18px;
}
.seo-section .seo-sub-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 5px;
    border-radius: 3px;
    background: var(--accent-color);
}
.seo-section .seo-sub > p { font-size: 16px; line-height: 1.8; color: var(--text-color); }

/* премиум-таблица в стиле шаблона */
.info-table-wrap {
    overflow-x: auto;
    margin: 22px 0;
    border-radius: 16px;
    border: 1px solid var(--divider-color);
    box-shadow: 0 12px 40px rgba(13, 13, 13, 0.06);
}
.info-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
    background: var(--white-color);
    font-size: 16px;
    overflow: hidden;
}
.info-table thead th {
    background: var(--primary-color);
    color: var(--white-color);
    font-family: var(--accent-font);
    font-weight: 600;
    text-align: left;
    padding: 16px 18px;
    white-space: nowrap;
}
.info-table tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--divider-color);
    color: var(--text-color);
    vertical-align: top;
}
.info-table tbody tr:last-child td { border-bottom: 0; }
.info-table tbody tr:nth-child(even) { background: var(--secondary-color); }
.info-table tbody tr:hover { background: rgba(254, 212, 3, 0.14); }
.info-table .it-name { color: var(--primary-color); font-weight: 600; }
.info-table .it-price { color: var(--primary-color); font-weight: 700; white-space: nowrap; }

/* финальный вывод-CTA блоком в стиле шаблона */
.seo-cta-box {
    margin-top: 60px;
    background: var(--primary-color);
    color: var(--white-color);
    border-radius: 20px;
    padding: 44px 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.seo-cta-box .seo-cta-text { flex: 1 1 420px; }
.seo-cta-box .seo-cta-text h3 { font-family: var(--accent-font); font-size: 26px; color: var(--white-color); margin: 0 0 8px; }
.seo-cta-box .seo-cta-text p { color: rgba(255, 255, 255, 0.75); margin: 0; font-size: 16px; line-height: 1.7; }

@media (max-width: 575px) {
    .seo-section .seo-sub-title { font-size: 24px; }
    .seo-cta-box { padding: 32px 24px; }
}

/* --- 7. Мелочи ------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100001;
    background: var(--accent-color);
    color: var(--primary-color);
    padding: 10px 18px;
    border-radius: 0 0 8px 0;
    font-weight: 700;
}
.skip-link:focus { left: 0; }

@media (max-width: 575px) {
    .float-btn-fab { width: 50px; height: 50px; font-size: 22px; }
    .lead-modal__box { padding: 30px 20px 24px; }
}