/* Сайт Инвикс — стиль v2 (13.10.2026). Тема WordPress «invix» собирает его в assets/css/site.css.
   Токены — brand/tokens.css; правила — brand/BRAND.md; ТЗ — products/website-redesign.md.
   v2 — разбор «местами аляписто»: одна шкала отступов, линии только там, где они несут смысл (таблицы, цифры),
   одинаковая подача картинок, ритм фонов белый / светлый без двух светлых подряд, один тёмный блок внизу (подвал). */

* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* шкала отступов — кратно 8, других значений в разметке нет */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --wrap: 1200px;
  --pad: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 8vw, 112px);   /* вертикальный ритм секций */
  --cut: 48px;                          /* ступень среза под 63,5° */
  --radius: 4px;
  --todo: #FFC0DC;                      /* нет данных — на сайт не уходит */
  --muted: var(--invix-steel);
}
html { scroll-behavior: smooth; }
body { font: 17px/1.6 var(--font-text); color: #111; background: var(--invix-white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.todo { background: var(--todo); color: #000; padding: 0 4px; }
.nb { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--invix-navy); outline-offset: 3px; }
.on-navy :focus-visible { outline-color: #fff; }

/* ── шапка */
.hdr { background: var(--invix-navy); color: #fff; position: sticky; top: 0; z-index: 40; }
.hdr .wrap { display: flex; align-items: center; gap: var(--s4); height: 72px; }
.hdr .logo img { height: 32px; }
.hdr nav { display: flex; gap: var(--s4); margin-left: auto; font-size: 15px; }
.hdr nav a { text-decoration: none; opacity: .8; padding: var(--s1) 0; transition: opacity .15s; }
.hdr nav a:hover, .hdr nav a.on { opacity: 1; }
.hdr nav a.on { box-shadow: inset 0 -2px 0 #fff; }
.hdr .tel { font: 500 15px var(--font-mono); white-space: nowrap; text-decoration: none; opacity: .9; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; }
.burger span, .burger::before, .burger::after { content: ""; position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; }
.burger::before { top: 14px; } .burger span { top: 21px; } .burger::after { top: 28px; }

/* ── кнопки: основная (заливка) и второстепенная (контур); ссылка «→» — третий уровень */
.btn { display: inline-block; font: 500 15px/1 var(--font-text); text-decoration: none; padding: var(--s2) var(--s3); border-radius: var(--radius); border: 1px solid transparent; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s; }
.btn.white { background: #fff; color: var(--invix-navy); }
.btn.white:hover { background: var(--invix-light); }
.btn.ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.btn.ghost:hover { border-color: #fff; }
.btn.navy { background: var(--invix-navy); color: #fff; }
.btn.navy:hover { background: #163A6E; }
.more { display: inline-flex; gap: var(--s1); margin-top: var(--s4); font-weight: 500; color: var(--invix-navy); text-decoration: none; }
.more:hover { text-decoration: underline; }

/* ── типографика: 5 размеров — 13 (рубрика), 15 (мелкий), 17 (текст), 19–21 (ввод), заголовки по clamp */
.rubric { font: 500 13px var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.on-navy .rubric { color: #AEB9CA; }
.h1 { font: 700 clamp(40px, 5.2vw, 66px)/1.04 var(--font-display); letter-spacing: -.01em; }
.h2 { font: 700 clamp(30px, 3.2vw, 42px)/1.1 var(--font-display); color: var(--invix-navy); margin-bottom: var(--s2); max-width: 26ch; }
.on-navy .h2 { color: #fff; }
.lead { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; color: var(--muted); max-width: 58ch; margin-bottom: var(--s5); }
.on-navy .lead { color: #D9E0EA; }
.sec-head { margin-bottom: var(--s5); }
.sec-head .lead { margin-bottom: 0; }

/* ── штрих знака — единственный маркер (списки, заголовки карточек) */
.stroke { position: relative; padding-left: 28px; }
.stroke::before { content: ""; position: absolute; left: 4px; top: .32em; width: 4px; height: 1em; background: var(--invix-navy); transform: skewX(-26.5deg); }
.on-navy .stroke::before { background: #fff; }

/* ── секции: белый и светлый чередуются, тёмный — только первый экран и подвал */
section.s { padding: var(--section) 0; }
section.s.light { background: var(--invix-light); }
section.s.tight { padding-top: 0; }

/* ── первый экран главной: navy со ступенью 63,5° (как шапка баннеров) */
.hero { background: var(--invix-navy); color: #fff; padding: var(--s6) 0 calc(var(--s7) + var(--cut));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 62% calc(100% - var(--cut)), calc(62% - 24px) 100%, 0 100%); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s5); align-items: center; }
.hero .h1 { margin-bottom: var(--s3); }
.hero .sub { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: #D9E0EA; max-width: 30ch; }
.hero .ctas { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); }
.hero .price { margin-top: var(--s2); font-size: 15px; color: #AEB9CA; }

/* рендер + «призрачный» объём печати 690 × 795 × 880 мм (проекция ../invix-render, как на баннере) */
.machine { position: relative; aspect-ratio: 3000 / 3705; max-height: 580px; margin: 0 auto; }
.machine img, .machine svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.machine img { object-fit: contain; }
.machine .vol polygon { fill: #fff; }
.machine .vol path { stroke: #fff; }
.machine.on-light .vol polygon { fill: var(--invix-navy); }
.machine.on-light .vol path { stroke: var(--invix-navy); }
.dim { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); font: 500 13px var(--font-mono); color: #AEB9CA; }
.dim::before, .dim::after { content: ""; flex: 1; height: 9px; background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; opacity: .7; }
.dim::before { border-left: 1px solid; } .dim::after { border-right: 1px solid; }
.dim.on-light { color: var(--muted); }

/* ── цифры: одна линия сверху (чертёж), без сетки рамок */
.figs-wrap { margin-top: var(--s5); }
.figs { display: grid; grid-template-columns: 1.7fr repeat(5, 1fr); gap: var(--s3) var(--s3); padding-top: var(--s3); border-top: 2px solid var(--invix-navy); }
.fig b { display: block; font: 500 clamp(24px, 2.3vw, 32px)/1 var(--font-mono); color: var(--invix-navy); letter-spacing: -.03em; white-space: nowrap; }
.fig b small { font-size: .5em; letter-spacing: 0; }
.fig span { display: block; margin-top: var(--s1); font-size: 14px; line-height: 1.35; color: var(--muted); }

/* ── карточки с картинкой: все плитки одинаковые — тёмные, без рамок */
.feat, .gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
.card .ph { aspect-ratio: 4 / 3; background: #0F1D33; overflow: hidden; border-radius: var(--radius); }
.card .ph img { width: 100%; height: 100%; object-fit: cover; }
/* контурный рисунок — белыми линиями на navy, как чертёж: в одном ряду с рендерами */
.card .ph.lineart { background: var(--invix-navy); }
.card .ph.lineart img { object-fit: contain; padding: var(--s2); filter: invert(1); mix-blend-mode: screen; opacity: .9; }
.card h3 { font: 500 17px/1.35 var(--font-text); margin-top: var(--s2); color: #111; }
.card p { font-size: 15px; line-height: 1.5; color: var(--muted); margin-top: var(--s1); }
.card h3.stroke { padding-left: 22px; }
.card h3.stroke::before { left: 1px; }

/* ── ролик: свой плеер, постер + запуск по клику (без YouTube) */
.video { position: relative; aspect-ratio: 16 / 9; background: #0B1424 center / cover; display: grid; place-items: center; color: #fff; overflow: hidden; cursor: pointer; border-radius: var(--radius); }
.video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,42,83,.1), rgba(14,42,83,.55)); }
.video .play { position: relative; z-index: 1; width: 80px; height: 80px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; transition: background .15s; }
.video:hover .play { background: rgba(255,255,255,.12); }
.video .play::before { content: ""; border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 6px; }
.video .cap { position: absolute; z-index: 1; left: var(--s3); bottom: var(--s3); font-size: 15px; }
.video .cap b { display: block; font: 700 22px var(--font-display); }

/* ── услуги: пиктограммы с баннера «О компании»; без линеек — группирует пространство */
.svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
.svc svg { width: 40px; height: 40px; margin-bottom: var(--s2); }
.svc svg * { fill: none; stroke: var(--invix-navy); stroke-width: 1; stroke-linejoin: miter; stroke-linecap: butt; }
.svc b { display: block; font: 500 18px/1.3 var(--font-text); color: var(--invix-navy); margin-bottom: var(--s1); }
.svc span { display: block; color: var(--muted); font-size: 15px; line-height: 1.5; }
.svc.big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); }
.svc.big > div { display: grid; grid-template-columns: 56px 1fr; gap: var(--s3); align-items: start; }
.svc.big svg { width: 48px; height: 48px; margin: 0; }
.svc.big b { font-size: 20px; }
.svc.big span { font-size: 16px; }

/* ── работы */
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
.work .ph { aspect-ratio: 4 / 3; border-radius: var(--radius); display: grid; place-items: center; color: #B0507E; font-size: 14px; background: repeating-linear-gradient(-26.5deg, #FFE1EE 0 10px, #FFF4F8 10px 22px); }
.work .txt { padding-top: var(--s2); }
.work .txt b { display: block; font: 500 18px var(--font-text); margin-bottom: var(--s1); }
.work dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s2); font-size: 14px; }
.work dt { color: var(--muted); }
.work dd { font-family: var(--font-mono); }

/* ── «почему мы»: список + Фонд без рамки-коробки */
.why { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s6); align-items: start; }
.list { list-style: none; display: grid; gap: var(--s3); }
.list li { font-size: 18px; line-height: 1.45; }
.list.small { gap: var(--s2); }
.list.small li { font-size: 16px; line-height: 1.5; }
.fund { padding-top: var(--s1); }
.fund img { height: 64px; margin: 0 0 var(--s3) -4px; }
.fund p { color: var(--muted); }
.fund p + p { margin-top: var(--s1); }

/* ── заявка: светлый блок (тёмный внизу один — подвал) */
.lead-form { background: var(--invix-light); padding: var(--section) 0; }
.lead-form .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
.lead-form .contacts { margin-top: var(--s4); font-size: 20px; line-height: 1.7; }
.lead-form .contacts a { text-decoration: none; color: var(--invix-navy); }
.lead-form .contacts a:hover { text-decoration: underline; }
.lead-form .contacts .mono { font: 500 20px var(--font-mono); }
.lead-form .contacts small { display: block; font-size: 15px; color: var(--muted); line-height: 1.5; margin-top: var(--s1); }
/* форма — разметка Contact Form 7 (класс invix-form); поля на белом, кнопка — основная navy */
.invix-form { background: #fff; padding: var(--s5) var(--s4) var(--s4); border-radius: var(--radius); color: #111; }
.invix-form p { margin: 0 0 var(--s2); }
.invix-form label { display: block; font-size: 14px; font-weight: 500; color: #333; }
.invix-form input[type=text], .invix-form input[type=email], .invix-form input[type=tel], .invix-form textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--invix-line); border-radius: var(--radius); background: #fff; color: #111; font: 400 16px var(--font-text); transition: border-color .15s; }
.invix-form input:focus, .invix-form textarea:focus { border-color: var(--invix-navy); outline: none; box-shadow: 0 0 0 3px rgba(14,42,83,.12); }
.invix-form textarea { min-height: 120px; resize: vertical; }
.invix-form .acc, .invix-form .wpcf7-acceptance label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 400; margin: var(--s1) 0 var(--s3); }
.invix-form .acc input, .invix-form .wpcf7-acceptance input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--invix-navy); flex: none; }
.invix-form .wpcf7-list-item { margin: 0; }
.invix-form a { color: var(--invix-navy); }
.invix-form .wpcf7-submit { width: 100%; padding: var(--s2); border: 0; border-radius: var(--radius); background: var(--invix-navy); color: #fff; font: 600 16px var(--font-text); cursor: pointer; transition: background .15s; }
.invix-form .wpcf7-submit:hover { background: #163A6E; }
.invix-form .wpcf7-submit:disabled { opacity: .5; cursor: default; }
.invix-form .note, .invix-form .invix-form__note { font-size: 13px; color: var(--muted); text-align: center; margin: var(--s2) 0 0; opacity: 1; }
.invix-form .wpcf7-not-valid-tip { color: #B3261E; font-size: 13px; margin-top: 4px; }
.invix-form .wpcf7-response-output { margin: var(--s2) 0 0 !important; border-radius: var(--radius); color: #111; font-size: 15px; }

/* ── подвал: фирменный navy (без «глубокого» оттенка — меньше тёмных плоскостей) */
.ftr { background: var(--invix-navy); color: #AEB9CA; font-size: 14px; padding: var(--s6) 0 var(--s4); }
.ftr .top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--s4); }
.ftr .logo img { height: 30px; margin-bottom: var(--s2); }
.ftr .ftr-about { color: #AEB9CA; max-width: 26ch; }
.ftr h4 { font: 500 12px var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: #8C9AB0; margin-bottom: var(--s2); }
.ftr ul { list-style: none; display: grid; gap: var(--s1); line-height: 1.5; }
.ftr a { color: #fff; text-decoration: none; }
.ftr a:hover { text-decoration: underline; }
.ftr .mono { font-family: var(--font-mono); }
/* Фонд — отдельной строкой во всю ширину, название не рвётся (DECISIONS.md, 2026-09-29) */
.ftr .fund-row { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid rgba(201,209,220,.2); color: #D9E0EA; }
.ftr .fund-row img { height: 44px; flex: none; }
.ftr .bottom { margin-top: var(--s3); display: flex; justify-content: space-between; gap: var(--s2) var(--s4); flex-wrap: wrap; line-height: 1.6; }
.ftr .docs { display: flex; gap: var(--s1) var(--s3); flex-wrap: wrap; }

/* ── внутренние страницы: шапка страницы на navy со ступенью */
.page-head { background: var(--invix-navy); color: #fff; padding: var(--s3) 0 calc(var(--s6) + 32px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), 70% calc(100% - 32px), calc(70% - 16px) 100%, 0 100%); }
.crumbs { font-size: 14px; color: #AEB9CA; margin-bottom: var(--s5); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.page-head .h1 { font-size: clamp(36px, 4.4vw, 56px); max-width: 18ch; }
.page-head .lead { margin: var(--s3) 0 0; color: #D9E0EA; }

/* страница принтера */
.p-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }
.p-hero .price { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); flex-wrap: wrap; }
.p-hero .price b { font: 500 21px var(--font-text); }
.p-hero .machine { max-height: 500px; }
/* таблицы — единственное место с линейками по строкам */
.specs { width: 100%; border-collapse: collapse; border-top: 2px solid var(--invix-navy); }
.specs th, .specs td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--invix-line); vertical-align: top; }
.specs th { font-weight: 400; color: var(--muted); width: 52%; padding-right: var(--s3); }
.specs td { font: 500 15px/1.6 var(--font-mono); color: var(--invix-navy); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
.support { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.support b { display: block; font: 500 28px var(--font-mono); color: var(--invix-navy); margin-bottom: var(--s1); letter-spacing: -.02em; }
.support div { font-size: 16px; line-height: 1.5; }

/* о компании, контакты */
.req { width: 100%; border-collapse: collapse; border-top: 2px solid var(--invix-navy); font-size: 16px; }
.req th, .req td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--invix-line); vertical-align: top; }
.req th { font-weight: 400; color: var(--muted); width: 38%; padding-right: var(--s3); }
.req td { font-family: var(--font-mono); font-size: 15px; }
.req td.txt { font-family: var(--font-text); font-size: 16px; }
.contact-big { font-size: 24px; line-height: 1.6; }
.contact-big a { text-decoration: none; color: var(--invix-navy); }
.contact-big a:hover { text-decoration: underline; }
.contact-big .mono { font: 500 24px var(--font-mono); }
.contact-big small { display: block; font-size: 16px; color: var(--muted); }
/* карта — как в mu-плагине: до согласия заглушка с адресом и кнопкой */
.invix-map { border-radius: var(--radius); overflow: hidden; min-height: 420px; background: var(--invix-light); display: flex; }
.invix-map__ph { margin: auto; padding: var(--s3); text-align: center; color: var(--invix-navy); max-width: 420px; }
.invix-map__addr { font-weight: 600; margin: 0 0 var(--s1); }
.invix-map__note { font-size: 14px; margin: 0 0 var(--s2); opacity: .8; }

/* документы */
.doc { max-width: 760px; }
.doc h2 { font: 700 24px/1.25 var(--font-display); color: var(--invix-navy); margin: var(--s5) 0 var(--s2); }
.doc p, .doc li { margin-bottom: var(--s1); }
.doc ul, .doc ol { padding-left: 22px; margin-bottom: var(--s2); }
.doc table { width: 100%; border-collapse: collapse; margin: var(--s2) 0 var(--s3); font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--invix-line); }
.doc th { color: var(--muted); font-weight: 500; border-bottom: 2px solid var(--invix-navy); }

/* ── планшет и телефон */
@media (max-width: 1080px) {
  .feat, .gallery, .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr .top { grid-template-columns: 1fr 1fr; }
  .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figs .fig:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hdr nav, .hdr .tel, .hdr .btn { display: none; }
  .burger { display: block; }
  .hdr.open nav { display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--invix-navy); padding: var(--s1) var(--pad) var(--s3); border-top: 1px solid rgba(255,255,255,.12); }
  .hdr.open nav a { padding: 14px 0; font-size: 18px; opacity: 1; border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: none; }
  .hero .wrap, .why, .lead-form .wrap, .p-hero, .two { grid-template-columns: 1fr; }
  .hero { --cut: 28px; padding-top: var(--s4); }
  .hero .pic { order: -1; }
  .machine { max-height: 320px; }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works, .svc.big { grid-template-columns: 1fr; }
  .support { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card h3 { font-size: 16px; hyphens: auto; }
  .card p { font-size: 14px; }
  .page-head { padding-bottom: calc(var(--s5) + 24px); }
  .crumbs { margin-bottom: var(--s3); }
  .ftr .top { grid-template-columns: 1fr; }
  .ftr .fund-row { align-items: flex-start; }
  .invix-form { padding: var(--s3) var(--s2) var(--s2); }
  .contact-big, .contact-big .mono { font-size: 21px; }
}
@media (max-width: 520px) {
  .feat, .gallery { grid-template-columns: 1fr; }
  .svc { grid-template-columns: 1fr; gap: var(--s4); }
  .svc.big > div { grid-template-columns: 44px 1fr; gap: var(--s2); }
  .svc.big svg { width: 40px; height: 40px; }
  .specs th { width: 50%; font-size: 15px; } .specs td { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ── WordPress: дополнения к макету (собирается в конец site.css) */
.invix-hdr-wrap { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 40; }
.invix-hdr-wrap .hdr { position: relative; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-post-content > * + * { margin-block-start: 0; }
.page-head .wp-block-post-title { font: 700 clamp(36px, 4.4vw, 58px)/1.04 var(--font-display); letter-spacing: -.01em; max-width: 24ch; color: #fff; }
.s.doc-section { padding-top: 56px; }
.doc .wp-block-group { padding: 0 !important; }
.doc h1 { display: none; }   /* заголовок документа — в шапке страницы */
.doc .wp-block-table { margin: 16px 0 20px; overflow-x: auto; }
.video[data-src] { background-size: cover; background-position: center; }
.wpcf7 form .wpcf7-response-output { margin: 12px 0 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.doc .wp-block-table table { border-collapse: collapse; }
.doc .wp-block-table th, .doc .wp-block-table td { border: 0; border-bottom: 1px solid var(--invix-line); padding: 10px 14px 10px 0; vertical-align: top; }
.doc .wp-block-table thead { border-bottom: 0; }
.doc .wp-block-table thead th { border-bottom: 2px solid var(--invix-navy); }