/* =====================================================================
   index.css — стили страницы index2.php
   Подключается ПОСЛЕ css/libs.min.css (Bootstrap 4) и css/main.css.

   Правила совместимости:
   • все правила ограничены обёрткой .ix (<div class="ix"> внутри body),
     поэтому не влияют на остальные страницы и общие блоки сайта;
   • классы, совпадавшие с классами Bootstrap и main.css, переименованы
     с префиксом ix-: ix-btn, ix-badge, ix-lead, ix-cat, ix-hit, ix-img;
   • шапка (inc/menu-top.php) и подвал (inc/footer.php) сайта подключаются
     ВНЕ обёртки .ix и оформляются стилями main.css;
   • шрифты и цвета взяты из main.css: ProximaNova (Regular / Semibold /
     Bold / Light), текст #000, ссылки #2f80ed, акцент #ce1b21,
     фон блоков #f3f3f3, рамки #d8d8d8, тёмный #424242;
   • в шрифтах ProximaNova начертание задаётся семейством, а не font-weight,
     поэтому жирность сделана через переменные --f-sb / --f-b / --f-l.
   ===================================================================== */

/* В main.css у Light-шрифта опечатка в имени семейства ("ProxnameimaNova-Light"),
   поэтому объявляем его здесь — только для этой страницы. */
@font-face {
    font-family: "ProximaNova-Light";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/ProximaNova-Light.ttf");
}

/* ---------- токены и базовые правила ---------- */
.ix {
    --red: #ce1b21;
    --red-d: #a8151a;
    --link: #2f80ed;
    --ink: #000000;
    --ink2: #4a4a4a;
    --mute: #8e8b8b;
    --line: #d8d8d8;
    --bg: #ffffff;
    --soft: #f3f3f3;
    --dark: #424242;
    --dark-txt: #c3c3c3;
    --f: "ProximaNova-Regular", Arial, sans-serif;
    --f-sb: "ProximaNova-Semibold", "ProximaNova-Bold", Arial, sans-serif;
    --f-b: "ProximaNova-Bold", Arial, sans-serif;
    --f-l: "ProximaNova-Light", "ProximaNova-Regular", Arial, sans-serif;

    font-family: var(--f);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
}
.ix *, .ix *:before, .ix *:after { box-sizing: border-box; }

.ix a { color: var(--link); text-decoration: none; }
.ix a:hover { text-decoration: underline; }
.ix img { max-width: 100%; height: auto; }
.ix b { font-family: var(--f-b); font-weight: normal; }

/* main.css задаёт h1/h2 по центру, с большими отступами и чёрным цветом —
   на этой странице заголовки настраиваются локально */
.ix h1, .ix h2, .ix h3 { color: inherit; line-height: 1.2; }

.ix .wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ---------- кнопки (как .zap / .r-btn в main.css) ---------- */
.ix .ix-btn { display: inline-block; background: var(--red); color: #fff; font-family: var(--f-b); font-size: 15px; line-height: 1.3; padding: 11px 22px; border-radius: 4px; border: 2px solid var(--red); text-align: center; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.ix .ix-btn:hover { background: var(--red-d); border-color: var(--red-d); color: #fff; text-decoration: none; }
.ix .ix-btn.out { background: transparent; color: var(--red); }
.ix .ix-btn.out:hover { background: var(--red); color: #fff; }
.ix .ix-btn.sm { padding: 7px 16px; font-size: 14px; }

/* ---------- общие блоки ---------- */
.ix section { padding: 44px 0; }
.ix section.alt { background: var(--soft); }
.ix h2 { font-size: 36px; font-family: var(--f-b); margin: 0 0 26px; text-align: center; color: var(--ink); }
.ix h3 { font-size: 20px; font-family: var(--f-b); margin: 28px 0 12px; }
.ix .intro { font-size: 17px; color: var(--ink2); max-width: 960px; margin: 0 0 16px; }
.ix .banner { background: var(--dark); color: #fff; text-align: center; padding: 50px 16px; }
.ix .banner-facts { padding: 46px 16px; }
.ix .ix-badge { display: inline-block; background: var(--red); color: #fff; font-family: var(--f-b); font-size: 11px; line-height: 1.4; padding: 1px 6px; border-radius: 2px; vertical-align: middle; }
.ix .m-sub { max-width: 720px; margin: -12px auto 32px; text-align: center; color: var(--ink2); font-size: 22px; }

/* ---------- первый экран ---------- */
/* фон чуть темнее шапки сайта (#424242), чтобы блоки не сливались */
.ix .m-hero { position: relative; background: #333333; border-top: 1px solid rgba(255, 255, 255, .12); color: #fff; overflow: hidden; }
.ix .m-hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.ix .m-hero h1 { font-size: 42px; line-height: 1.12; font-family: var(--f-b); color: #fff; text-align: left; margin: 0 0 18px; }
.ix .m-hero .ix-lead { font-size: 19px; line-height: 1.5; font-weight: normal; color: #e0e0e0; margin: 0 0 28px; max-width: 560px; }
.ix .m-hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.ix .m-hero .ix-btn.out { color: #fff; border-color: #fff; }
.ix .m-hero .ix-btn.out:hover { background: #fff; color: var(--dark); }
.ix .m-hero .trust { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 14px; color: var(--dark-txt); }
.ix .m-hero .trust b { color: #fff; }
.ix .m-hero .pic { position: relative; }
.ix .m-hero .pic img { display: block; width: 100%; border-radius: 4px; }
.ix .m-hero .pic span { position: absolute; left: 16px; bottom: 16px; background: rgba(51, 51, 51, .9); padding: 8px 12px; border-radius: 3px; font-size: 13px; color: #e0e0e0; }
.ix .m-hero .pic span b { color: #fff; }

/* ---------- задачи ---------- */
.ix .tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ix .task { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 4px; background: #fff; overflow: hidden; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.ix .task:hover { text-decoration: none; border-color: #c3bebe; box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
.ix .task .ix-img { aspect-ratio: 16 / 9; background: var(--soft); overflow: hidden; }
.ix .task .ix-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ix .task .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.ix .task h3 { margin: 0 0 8px; font-size: 19px; }
.ix .task p { margin: 0 0 14px; color: var(--ink2); font-size: 14px; flex: 1; }
.ix .task .for { font-size: 13px; color: var(--mute); margin-bottom: 14px; }
.ix .task .go { color: var(--link); font-family: var(--f-b); font-size: 14px; }

/* ---------- подбор по размеру помещения ---------- */
.ix .rooms { border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.ix .rooms [role=tablist] { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.ix .rooms button { font: inherit; background: none; border: 0; border-bottom: 3px solid transparent; padding: 16px 10px 13px; cursor: pointer; color: var(--ink2); text-align: center; }
.ix .rooms button b { display: block; font-size: 17px; color: var(--ink); }
.ix .rooms button span { font-size: 13px; }
.ix .rooms button[aria-selected=true] { border-bottom-color: var(--red); }
.ix .rooms button[aria-selected=true] b { color: var(--red); }
.ix .rooms button:focus { outline: none; }
.ix .rooms button:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.ix .room { display: none; grid-template-columns: 300px 1fr; gap: 36px; padding: 30px; align-items: center; }
.ix .room.on { display: grid; }
.ix .room img { width: 100%; max-height: 220px; object-fit: contain; }
.ix .room h3 { margin: 0 0 8px; }
.ix .room p { color: var(--ink2); margin: 0 0 14px; }
.ix .room ul { margin: 0 0 18px; padding-left: 18px; color: var(--ink2); list-style: disc; }
.ix .room li { margin-bottom: 4px; }
.ix .room .acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- популярные модели ---------- */
.ix .hits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ix .ix-hit { border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 18px; display: flex; flex-direction: column; color: var(--ink); position: relative; transition: border-color .2s, box-shadow .2s; }
.ix .ix-hit:hover { text-decoration: none; border-color: #c3bebe; box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
.ix .ix-hit .pic { height: 130px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.ix .ix-hit .pic img { max-height: 130px; }
.ix .ix-hit .pic img.pic-sm { max-width: 70%; } /* плоские широкие фото (P15, G62) — уменьшены */
.ix .ix-hit .pic img.pic-md { max-width: 85%; } /* чуть уменьшено (Studio USB, Sync 60, Trio 8500) */
.ix .ix-hit b { font-size: 16px; }
.ix .ix-hit span { font-size: 14px; color: var(--ink2); margin-top: 4px; flex: 1; }
.ix .ix-hit .ix-badge { position: absolute; top: 14px; left: 14px; margin: 0; color: #fff; font-size: 11px; flex: none; }

/* ---------- как мы работаем ---------- */
.ix .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; counter-reset: s; }
.ix .steps li { counter-increment: s; position: relative; padding-top: 52px; }
.ix .steps li:before { content: counter(s); position: absolute; top: 0; left: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--f-b); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.ix .steps li:not(:last-child):after { content: ""; position: absolute; top: 19px; left: 48px; right: -12px; height: 2px; background: var(--line); }
.ix .steps b { display: block; font-size: 16px; margin-bottom: 4px; }
.ix .steps span { color: var(--ink2); font-size: 14px; }

/* ---------- услуги ---------- */
.ix .svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ix .svc a { display: block; color: var(--ink); border-top: 3px solid var(--red); padding-top: 14px; }
.ix .svc a:hover { text-decoration: none; }
.ix .svc a:hover b { color: var(--red); }
.ix .svc b { display: block; font-size: 17px; margin-bottom: 6px; }
.ix .svc span { color: var(--ink2); font-size: 14px; }

/* ---------- цифры доверия ---------- */
.ix .facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.ix .facts b { display: block; font-size: 40px; font-family: var(--f-b); line-height: 1.1; color: #fff; }
.ix .facts span { font-size: 14px; color: var(--dark-txt); }

/* ---------- частые вопросы ---------- */
.ix .faq { max-width: 860px; margin: 0 auto; }
.ix .faq details { border-bottom: 1px solid var(--line); }
.ix .faq summary { display: block; cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-family: var(--f-b); font-family: "ProximaNova-Light"; font-size: 22px; position: relative; }
.ix .faq summary::-webkit-details-marker { display: none; }
.ix .faq summary:after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 26px; font-family: var(--f-l); color: var(--red); }
.ix .faq details[open] summary:after { content: "\2212"; }
.ix .faq summary:focus { outline: none; }
.ix .faq summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* ответ: абзацы и списки */
.ix .faq__a { padding: 0 48px 22px 0; color: var(--ink2); font-size: 16px; line-height: 1.6; }
.ix .faq__a p { margin: 0 0 12px; }
.ix .faq__a p:last-child, .ix .faq__a ul:last-child { margin-bottom: 0; }
.ix .faq__a ul { list-style: none; margin: 4px 0 14px; padding: 0; }
.ix .faq__a li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.ix .faq__a li:last-child { margin-bottom: 0; }
.ix .faq__a li:before { content: ""; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

/* ---------- каталог ---------- */
.ix .cat-row { margin-bottom: 34px; }
.ix .cat-row:last-child { margin-bottom: 0; }
.ix .cat-row > h3 { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.ix .ix-cat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 28px; }
.ix .cat-col { min-width: 0; }
.ix .cat-col__img { margin-bottom: 12px; }
.ix .cat-col__img img { display: block; width: 150px; height: 75px; } /* миниатюры 300×150 с выровненным размером устройства */
.ix .cat-col h4 { margin: 0 0 10px; font-family: var(--f-b); font-size: 16px; line-height: 1.25; color: var(--ink); }
.ix .cat-col ul { list-style: none; margin: 0; padding: 0; }
.ix .cat-col li { margin: 0 0 6px; font-size: 14px; line-height: 1.35; }

/* ---------- заявка ---------- */
.ix .lead-box { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.ix .lead-box h2 { text-align: left; margin-bottom: 12px; }
.ix .lead-box .contacts-big a { display: block; font-size: 24px; font-family: var(--f-b); color: var(--ink); margin-top: 8px; overflow-wrap: anywhere; }
.ix .lead-box .contacts-big a + a { font-size: 18px; font-family: var(--f); color: var(--link); }
/* ---------- форма Битрикс24 «Запрос наличия и цены» (inc/forma-b24-zapros-forma.php) ----------
   Форма подгружается скриптом Битрикс24; ниже — подгонка её стандартной разметки
   (.b24-form-*) и CSS-переменных (--b24-*) под стиль сайта. */
.ix .req-b24 { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 22px 26px 10px; min-height: 380px; }
.ix .req-b24 > br { display: none; }
.ix .req-b24__fallback { margin: 0; font-size: 14px; color: var(--mute); }
.ix .req-b24:has(.b24-form) .req-b24__fallback { display: none; }

.ix .req-b24 .b24-form-wrapper {
    --b24-primary-color: #ce1b21 !important;
    --b24-primary-hover-color: #a8151a !important;
    --b24-primary-text-color: #ffffff !important;
    --b24-text-color: #000000 !important;
    --b24-background-color: #ffffff !important;
    --b24-border-color: #d8d8d8 !important;
    --b24-field-border-color: #c3bebe !important;
    --b24-field-background-color: #ffffff !important;
    --b24-field-focus-background-color: #ffffff !important;
    --b24-font-family: "ProximaNova-Regular", Arial, sans-serif !important;
    max-width: none !important; margin: 0 !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    font-family: var(--f) !important;
}
.ix .req-b24 .b24-form-padding-side { padding-left: 0 !important; padding-right: 0 !important; }
.ix .req-b24 .b24-form-header { text-align: left !important; padding-top: 0 !important; border: 0 !important; }
.ix .req-b24 .b24-form-header-title { font-family: var(--f-b) !important; font-size: 20px !important; line-height: 1.25 !important; color: var(--ink) !important; }
.ix .req-b24 .b24-form-header-description { font-size: 14px !important; color: var(--ink2) !important; }
.ix .req-b24 .b24-form-control { font-family: var(--f) !important; font-size: 15px !important; border-radius: 3px !important; }
.ix .req-b24 .b24-form-control:focus { border-color: var(--red) !important; }
.ix .req-b24 .b24-form-btn { font-family: var(--f-b) !important; font-size: 15px !important; border-radius: 4px !important; }
.ix .req-b24 .b24-form-sign { opacity: .6; }
.ix .req-b24 a { color: var(--link); }

/* ---------- о компании ---------- */
.ix .about { max-width: 900px; margin: 0 auto; color: var(--ink2); }
.ix .about h2 { margin-bottom: 18px; }
.ix .about p { margin: 0 0 14px; }

/* ---------- адаптив ---------- */
@media (max-width: 960px) {
    .ix .m-hero .wrap, .ix .lead-box, .ix .room { grid-template-columns: 1fr; }
    .ix .tasks, .ix .ix-cat, .ix .hits, .ix .svc, .ix .facts { grid-template-columns: repeat(2, 1fr); }
    .ix .steps { grid-template-columns: 1fr 1fr; }
    .ix .steps li:after { display: none; }
    .ix .room img { max-height: 180px; }
}
@media (max-width: 600px) {
    .ix .m-hero h1 { font-size: 30px; }
    .ix .m-hero .wrap { padding-top: 36px; padding-bottom: 36px; }
    .ix .tasks, .ix .hits, .ix .svc, .ix .steps { grid-template-columns: 1fr; }
    .ix .ix-cat { gap: 20px 16px; }
    .ix .rooms [role=tablist] { grid-template-columns: 1fr 1fr; }
    .ix .room { padding: 20px; }
    .ix h2 { font-size: 26px; }
}