/* МаксиОПТ — overlay v5
 * Подгружается ПОСЛЕ styles.css и переопределяет ключевые правила:
 * - шрифт Inter
 * - палитра «строгий минимализм» (off-white + soft black + red как редкий акцент)
 * - больше воздуха
 * - тише тени, аккуратные радиусы
 * Чтобы откатить редизайн — убрать <link> на этот файл из index.html.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --red:   #ED1B2F;
    --dark:  #0F0F10;
    --text:  #0F0F10;
    --muted: #6B7280;
    --bg:    #FAFAFA;
    --card:  #FFFFFF;
    --line:  #E7E7E9;
}

/* === Базовая типографика === */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    letter-spacing: -0.01em;
}
.hero h1, .section h2 { font-weight: 700; letter-spacing: -0.025em; }
.hero .lead { font-weight: 400; color: #2A2A2F; }

/* === Спокойный eyebrow (без красного) === */
.eyebrow { color: var(--muted); font-weight: 500; letter-spacing: 0.12em; font-size: 12px; }

/* === Больше воздуха === */
.section { padding: 110px 5vw; }
.section-head { margin-bottom: 44px; }
@media (max-width: 760px) { .section { padding: 70px 4vw; } }

/* === Header — тоньше и тише === */
.header { padding: 18px 5vw; background: rgba(255,255,255,0.96); }
.nav a { font-weight: 500; }

/* === Hero без розового радиала === */
.hero { background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%); }
.hero-card { background: var(--dark); border-radius: 24px; }
.stat { border-radius: 14px; }
.stat b { font-weight: 700; font-size: 26px; }

/* === Кнопки строже, меньше «летящих» теней === */
.btn {
    border-radius: 10px;
    padding: 14px 22px;
    font-weight: 600;
    letter-spacing: -0.005em;
    box-shadow: none;
    transition: transform .18s, background .18s, border-color .18s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,15,16,0.10); }
.btn-red   { background: var(--red);  color: #fff; }
.btn-red:hover { background: #D11626; }
.btn-dark  { background: var(--dark); color: #fff; }
.btn-light { background: #fff; color: var(--dark); border: 1px solid var(--line); }

/* === Карточки тише === */
.card {
    border-radius: 16px;
    box-shadow: none;
    border: 1px solid var(--line);
    transition: border-color .2s, transform .2s;
}
.card:hover { border-color: #C7C7CC; transform: translateY(-2px); }
.card h3 { font-weight: 700; }
.card a { color: var(--text); font-weight: 600; border-bottom: 1px solid var(--text); padding-bottom: 1px; }
.card a:hover { color: var(--red); border-color: var(--red); }

/* === Brand-ticker — без сильных границ === */
.brand-ticker { border-radius: 16px; box-shadow: 0 4px 16px rgba(15,15,16,0.04); }
.brand-logo { border-radius: 12px; background: #fff; }
.brand-logo:hover { box-shadow: 0 6px 18px rgba(15,15,16,0.06); }
.brand-mark { border-radius: 10px; font-weight: 700; }

/* === Форма === */
.form { border-radius: 20px; }
.form input, .form select, .form textarea { border-radius: 10px; }
.form input:focus, .form select:focus, .form textarea:focus {
    outline: none;
    border-color: var(--dark);
    box-shadow: 0 0 0 3px rgba(15,15,16,0.06);
}
.form fieldset { border-radius: 14px; }

/* === Новые блоки: кейсы === */
.cases-section { background: #FFFFFF; }
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .2s, transform .2s;
}
.case-card:hover { border-color: #C7C7CC; transform: translateY(-2px); }
.case-photo {
    width: 100%; height: 200px;
    background: linear-gradient(135deg, #ECECEC, #F8F8F8);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 12px; font-weight: 500;
    letter-spacing: 0.05em; text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}
.case-body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.case-meta { color: var(--muted); font-size: 13px; font-weight: 500; }
.case-title { font-size: 19px; font-weight: 700; margin: 4px 0 8px; }
.case-numbers {
    display: flex; gap: 18px; margin-top: auto; padding-top: 16px;
    border-top: 1px solid var(--line);
}
.case-num b { display: block; font-weight: 700; font-size: 20px; color: var(--text); }
.case-num span { color: var(--muted); font-size: 12px; }

/* === Новые блоки: отзывы === */
.reviews-section { background: var(--bg); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.review-quote { font-size: 16px; line-height: 1.55; color: var(--text); }
.review-quote:before { content: '“'; display: block; font-size: 48px; line-height: 0.5; color: var(--red); margin-bottom: 12px; font-family: Georgia, serif; }
.review-author { display: flex; gap: 14px; align-items: center; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.review-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #ECECEC, #F8F8F8);
    color: var(--muted); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px; flex-shrink: 0;
}
.review-meta { display: flex; flex-direction: column; }
.review-name { font-weight: 600; }
.review-role { color: var(--muted); font-size: 13px; }

@media (max-width: 1100px) {
    .cases-grid, .reviews-grid { grid-template-columns: 1fr; }
}

/* === FAQ === */
.faq-section { background: var(--card); }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color .2s;
}
.faq-item[open] { border-color: var(--text); background: #FFFFFF; }
.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 24px;
    font-weight: 600;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-size: 24px;
    font-weight: 300;
    color: var(--muted);
    transition: transform .2s;
    flex-shrink: 0;
    line-height: 1;
}
.faq-item[open] summary::after { content: '−'; color: var(--red); }
.faq-item summary:hover { color: var(--red); }
.faq-answer { padding: 0 24px 22px; color: #2A2A2F; line-height: 1.55; }
.faq-answer p { margin: 0; }

/* === Контакты === */
.contacts-grid div { border-radius: 14px; }
.contacts-grid a { color: var(--text); font-weight: 600; border-bottom: 1px solid var(--text); padding-bottom: 1px; }
.contacts-grid a:hover { color: var(--red); border-color: var(--red); }

/* === Footer === */
.footer { background: #0F0F10; padding: 56px 5vw; }
.footer p { color: #A0A0A6; }

/* === Float CTA === */
.float-price {
    background: var(--red);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(237,27,47,0.25);
    font-weight: 600;
    letter-spacing: -0.005em;
}
.float-price:hover { background: #D11626; }

/* ============================================================
   v5.1 — фишки: молния, карта, hero-акцент, reveal-анимации
   ============================================================ */

/* --- Молния из логотипа --- */
.hero { position: relative; overflow: hidden; }
.hero-bolt {
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%) rotate(8deg);
    width: clamp(180px, 26vw, 420px);
    height: auto;
    color: rgba(237,27,47,0.07);
    z-index: 0;
    pointer-events: none;
}
.hero-text, .hero-card { position: relative; z-index: 1; }
.bolt-mini {
    width: 11px; height: auto; color: var(--red);
    vertical-align: middle; margin-right: 2px;
}

/* --- Акцентное слово в заголовке --- */
.hero h1 .accent { color: var(--red); position: relative; white-space: nowrap; }

/* --- Hero крупнее и выразительнее --- */
.hero h1 { font-size: clamp(38px, 5.5vw, 74px); font-weight: 800; letter-spacing: -0.03em; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-weight: 700; }

/* --- Блок "География" с реальной картой-баннером --- */
.geo-section { background: var(--bg); }
.geo-banner {
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 36px rgba(15,15,16,0.08);
    max-width: 1100px;
    margin: 0 auto;
}
.geo-banner img { width: 100%; height: auto; display: block; transition: transform .4s ease; }
.geo-banner:hover img { transform: scale(1.02); }

.geo-layout-bottom { margin-top: 26px; }
.geo-regions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* Теги-регионы — кликабельные, единообразные, ведут на форму */
.region-tag {
    display: inline-flex; align-items: center; padding: 10px 18px;
    border: 1px solid var(--line); border-radius: 999px; background: #fff;
    font-weight: 600; font-size: 14px; color: var(--text);
    text-decoration: none; cursor: pointer;
    transition: border-color .18s, color .18s, transform .18s, background .18s;
}
.region-tag:hover {
    border-color: var(--red); color: var(--red);
    background: rgba(237,27,47,0.05); transform: translateY(-2px);
}

/* --- Reveal при скролле --- */
/* Появление-при-скролле УБРАНО как ненадёжное.
   Контент виден ВСЕГДА — никакой JS не может его скрыть.
   Лёгкая анимация появления только через CSS, и только как бонус:
   конечное состояние всегда видимое, даже если анимация не проиграется. */
.reveal, .section .card, .review-card, .faq-item, .geo-map, .region-tag {
    opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
    .reveal, .section .card, .review-card, .geo-map {
        animation: soft-in .5s ease-out both;
    }
}
@keyframes soft-in {
    from { opacity: .35; transform: translateY(10px); }
    to   { opacity: 1;   transform: none; }
}

/* === Модалка выбора сценария ("Получить прайс") === */
.lead-modal[hidden] { display: none; }
.lead-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lead-modal__overlay { position: absolute; inset: 0; background: rgba(15,15,16,0.6); backdrop-filter: blur(3px); }
.lead-modal__box { position: relative; z-index: 1; background: #fff; border-radius: 18px; padding: 34px 32px 32px; max-width: 460px; width: 100%; box-shadow: 0 30px 80px rgba(0,0,0,0.35); animation: modal-in .25s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.lead-modal__close { position: absolute; top: 12px; right: 16px; border: 0; background: none; font-size: 30px; line-height: 1; color: var(--muted); cursor: pointer; }
.lead-modal__close:hover { color: var(--red); }
.lead-modal__box h3 { font-size: 24px; font-weight: 700; margin: 0 0 8px; }
.lead-modal__box > p { color: var(--muted); margin: 0 0 22px; font-size: 15px; }
.lead-modal__choices { display: flex; flex-direction: column; gap: 12px; }
.lead-choice { text-align: left; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color .18s, transform .18s, background .18s; font-family: inherit; }
.lead-choice:hover { border-color: var(--red); background: rgba(237,27,47,0.04); transform: translateY(-2px); }
.lead-choice b { font-size: 16px; font-weight: 700; color: var(--text); }
.lead-choice span { font-size: 13px; color: var(--muted); }