:root {
  --mineral: #F4F7FA;      /* основной фон */
  --mineral-2: #E9EEF3;    /* карточки на светлом */
  --cool: #EDF2F7;         /* вторичный холодный */
  --teal: #0D2440;         /* глубокий сине-зелёный */
  --teal-deep: #08172A;
  --teal-soft: #123055;    /* hover */
  --graphite: #1B2B3A;     /* текст */
  --ink-60: #5F7488;       /* вторичный текст */
  --copper: #C9660F;       /* точечный акцент */
  --copper-btn: #AD550C;   /* медь для заливных CTA (контраст с белым текстом) */
  --copper-bright: #E07B24;/* медь на тёмных подложках */
  --line: #D5DEE6;
  --line-dark: rgba(255,255,255,0.14);
  --font: 'Onest', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --maxw: 1400px;
  --r-btn: 8px; --r-card: 12px; --r-field: 8px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--graphite);
  background: var(--mineral);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
::selection { background: var(--teal); color: #fff; }
section[id] { scroll-margin-top: 96px; }
.small-label b { color: var(--copper); font-weight: 500; }
.small-label.on-dark b { color: var(--copper-bright); }
[data-reveal][data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
[data-reveal][data-reveal].is-in { opacity: 1; transform: none; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 48px; }

h1 { font-size: clamp(32px, 4vw, 56px); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
h2 { font-size: clamp(26px, 3.2vw, 44px); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
h3 { font-size: clamp(18px, 1.7vw, 24px); font-weight: 600; line-height: 1.22; letter-spacing: -0.015em; }
.small-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-60); font-weight: 500; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border: 1px solid transparent; border-radius: var(--r-btn);
  font-size: 15.5px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.06s;
}
.btn:active { transform: translateY(1px); }
.btn-solid, .btn-copper { border-radius: var(--r-btn); }
.btn-solid { background: var(--teal); color: #fff; }
.btn-solid:hover { background: var(--teal-soft); }
.btn-ghost { border-color: rgba(36,39,40,0.4); color: var(--graphite); background: transparent; }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); background: rgba(7,59,73,0.04); }
.btn-ghost-light { border-color: rgba(255,255,255,0.4); color: #fff; background: transparent; }
.btn-ghost-light:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.arrow { font-family: var(--mono); display: inline-block; transition: transform 0.18s; }
.btn:hover .arrow, .approach-link:hover .arrow, .head-link:hover .arrow { transform: translateX(4px); }

/* ---------- Шапка ---------- */
.header { position: sticky; top: 0; z-index: 40; background: rgba(245,244,240,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header-in { max-width: var(--maxw); margin: 0 auto; padding: 0 48px; height: 84px; display: flex; align-items: center; gap: 28px; }
.logo { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 20px; letter-spacing: 0.01em; color: var(--teal); white-space: nowrap; flex-shrink: 0; }
.logo-mark {
  width: 32px; height: 32px; flex-shrink: 0; background: var(--teal); color: #fff;
  display: grid; place-items: center; font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.logo small { font-size: 11px; font-family: var(--mono); letter-spacing: 0.2em; color: var(--ink-60); margin-left: 8px; text-transform: uppercase; }
.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a { font-size: 15.5px; font-weight: 500; color: var(--graphite); position: relative; padding: 6px 0; white-space: nowrap; }
.nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--teal); transition: right 0.22s ease; }
.nav a:hover { color: var(--teal); }
.nav a:hover::after { right: 0; }
.header-cta { display: flex; align-items: center; gap: 22px; }
.header-phone { font-family: var(--mono); font-size: 13.5px; color: var(--ink-60); white-space: nowrap; }
.header-phone:hover { color: var(--teal); }
.btn-header { padding: 12px 22px; font-size: 15px; }
.burger { display: none; width: 46px; height: 46px; border: 1px solid var(--line); background: none; border-radius: var(--r-btn); font-size: 18px; color: var(--graphite); }
.mobile-menu { display: none; position: fixed; inset: 84px 0 0; z-index: 39; background: var(--mineral); padding: 28px 32px; overflow-y: auto; }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; font-size: 22px; font-weight: 500; padding: 16px 0; border-bottom: 1px solid var(--line); }

/* ---------- Поиск ---------- */
.search-btn { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 16px; border: 1px solid var(--line); background: none; border-radius: var(--r-btn); font-size: 14.5px; font-weight: 500; color: var(--ink-60); transition: border-color 0.15s, color 0.15s; }
.search-btn i { font-size: 17px; color: var(--graphite); transition: color 0.15s; }
.search-btn kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--line); border-radius: var(--r-btn); padding: 1px 6px; color: var(--ink-60); }
.search-btn:hover { border-color: var(--teal); color: var(--teal); }
.search-btn:hover i { color: var(--teal); }
.search-backdrop { display: none; position: fixed; inset: 84px 0 0; z-index: 38; background: rgba(36,39,40,0.3); }
.search-backdrop.open { display: block; }
.search-panel { display: none; position: fixed; top: 84px; left: 0; right: 0; z-index: 41; background: var(--mineral); border-bottom: 1px solid var(--line); box-shadow: 0 34px 60px -30px rgba(7,59,73,0.4); }
.search-panel.open { display: block; }
.search-in { max-width: 860px; margin: 0 auto; padding: 34px 32px 40px; }
.search-row { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--graphite); padding-bottom: 12px; }
.search-row i { font-size: 22px; color: var(--teal); }
.search-row input { flex: 1; min-width: 0; border: 0; background: none; font-family: var(--font); font-size: 22px; color: var(--graphite); outline: none; }
.search-row input::placeholder { color: #A7ACA9; }
.search-close { border: 0; background: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-60); padding: 6px 8px; }
.search-close:hover { color: var(--teal); }
.search-hint { margin-top: 12px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-60); }
.search-hint button { border: 0; background: none; font: inherit; color: var(--teal); border-bottom: 1px solid var(--line); padding: 0 0 1px; cursor: pointer; }
.search-hint button:hover { border-color: var(--teal); }
.search-res { margin-top: 20px; max-height: 46vh; overflow-y: auto; }
.search-group { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); margin: 20px 0 8px; }
.search-item { display: flex; align-items: baseline; gap: 16px; padding: 11px 2px; border-top: 1px solid var(--line); font-size: 16px; color: var(--graphite); }
.search-item:hover .s-name { color: var(--teal); }
.search-item .s-sku { font-family: var(--mono); font-size: 13px; color: var(--copper-btn); white-space: nowrap; }
.search-item .s-cat { margin-left: auto; font-size: 13.5px; color: var(--ink-60); white-space: nowrap; }
.search-empty { padding: 24px 2px 4px; font-size: 16px; color: var(--ink-60); }
.search-empty a { color: var(--teal); border-bottom: 1px solid var(--teal); }
.hero-search { position: relative; z-index: 2; margin-top: 18px; max-width: 600px; display: flex; }
.hero-search input { flex: 1; min-width: 0; padding: 15px 18px; font-family: var(--font); font-size: 16px; color: var(--graphite); background: #fff; border: 1px solid var(--line); border-right: 0; border-radius: var(--r-btn) 0 0 2px; outline: none; transition: border-color 0.15s; }
.hero-search input:focus { border-color: var(--teal); }
.hero-search input::placeholder { color: #A7ACA9; }
.hero-search-hint { position: relative; z-index: 2; margin-top: 12px; }

/* ---------- 1. Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-in { max-width: var(--maxw); margin: 0 auto; padding: 56px 48px 64px; position: relative; }
.hero h1 { max-width: 17ch; position: relative; z-index: 2; }
.hero-sub { margin-top: 20px; font-size: 18px; line-height: 1.55; color: var(--ink-60); max-width: 46ch; position: relative; z-index: 2; }
.hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; position: relative; z-index: 2; }
.hero-plate {
  position: absolute; top: 0; right: -220px; bottom: -64px; width: 56%;
  background: var(--teal); transform: skewX(-8deg); transform-origin: top;
  overflow: hidden;
}
.hero-plate img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.55; transform: skewX(8deg) scale(1.25); mix-blend-mode: luminosity;
}
.hero-plate::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, var(--teal) 4%, rgba(7,59,73,0.25) 55%); }
.hero-plate::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--copper); z-index: 3; }
.hero-index { position: absolute; right: 32px; bottom: 24px; font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,0.78); z-index: 3; }
.trust-line { border-top: 1px solid var(--line); position: relative; z-index: 3; background: var(--mineral); }
.trust-line-in { max-width: var(--maxw); margin: 0 auto; padding: 22px 48px; display: flex; gap: 12px 24px; flex-wrap: wrap; justify-content: space-between; font-size: 16.5px; color: var(--ink-60); }
.trust-line-in span { display: flex; align-items: center; gap: 12px; }
.trust-line-in span::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; background: var(--copper); transform: rotate(45deg); }

/* ---------- 2. Факты ---------- */
.facts { background: var(--cool); }
.facts-in { max-width: var(--maxw); margin: 0 auto; padding: 50px 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.facts-in > div { border-left: 1px solid #D2D7D4; padding-left: 26px; }
.fact-num { font-size: clamp(34px, 3.4vw, 52px); font-weight: 500; letter-spacing: -0.02em; color: var(--teal); line-height: 1; font-variant-numeric: tabular-nums; }
.fact-label { margin-top: 10px; font-size: 15px; color: var(--ink-60); max-width: 24ch; }

/* ---------- 3. Инженерный подход ---------- */
.approach { padding: 120px 0 110px; }
.approach-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: end; }
.approach h2 { max-width: 18ch; }
.approach-note { margin-top: 30px; font-size: 18px; color: var(--ink-60); max-width: 52ch; }
.approach-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; font-weight: 500; color: var(--teal); border-bottom: 1px solid var(--teal); padding-bottom: 3px; }
.approach-link:hover { color: var(--copper); border-color: var(--copper); }
.approach-photo { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--r-btn); margin-bottom: -180px; }
.approach-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 4. Направления: асимметричная сетка ---------- */
.catalog { padding: 64px 0; background: #FDFDFB; border-top: 1px solid var(--line); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 52px; flex-wrap: wrap; }
.section-head .small-label { display: block; margin-bottom: 16px; }
.section-head .head-link { margin-bottom: 12px; }
.section-head .head-link { font-weight: 500; color: var(--teal); border-bottom: 1px solid var(--teal); padding-bottom: 2px; white-space: nowrap; }
.section-head .head-link:hover { color: var(--copper); border-color: var(--copper); }
.cat-bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 132px; gap: 16px; }
.cat-cell { border-radius: var(--r-btn); padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.cat-a, .cat-c, .cat-d { border: 1px solid var(--line); }
.cat-cell:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(7,59,73,0.3); }
.cat-a:hover, .cat-c:hover, .cat-d:hover { border-color: var(--teal); }
.cat-arrow { position: absolute; top: 24px; right: 26px; z-index: 2; font-family: var(--mono); font-size: 17px; color: var(--teal); opacity: 0; transform: translateX(-8px); transition: opacity 0.2s, transform 0.2s; }
.cat-b .cat-arrow, .cat-e .cat-arrow { color: #fff; }
.cat-cell:hover .cat-arrow { opacity: 1; transform: none; }
.cat-cell h3 { position: relative; z-index: 2; }
.cat-cell .cat-desc { position: relative; z-index: 2; margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-60); max-width: 34ch; }
.cat-cell .cat-count { position: absolute; top: 26px; left: 30px; z-index: 2; font-family: var(--mono); font-size: 12.5px; color: var(--ink-60); }
.cat-a { grid-column: span 7; grid-row: span 3; background: var(--mineral-2); }
.cat-b { grid-column: span 5; grid-row: span 3; background: var(--teal); }
.cat-b h3, .cat-b .cat-count { color: #fff; }
.cat-b .cat-desc { color: rgba(255,255,255,0.72); }
.cat-c { grid-column: span 4; grid-row: span 2; background: var(--cool); }
.cat-d { grid-column: span 4; grid-row: span 2; background: var(--mineral-2); }
.cat-e { grid-column: span 4; grid-row: span 2; position: relative; background: var(--teal-deep); }
.cat-e img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; mix-blend-mode: luminosity; }
.cat-e::after { content: ''; position: absolute; inset: 0; background: linear-gradient(15deg, rgba(6,54,66,0.9) 20%, rgba(6,54,66,0.2)); }
.cat-e h3 { color: #fff; }
.cat-e .cat-desc { color: rgba(255,255,255,0.75); }
.cat-e .cat-count { color: rgba(255,255,255,0.7); }
/* деликатный чертёжный паттерн на светлых карточках */
.cat-a::before, .cat-c::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(rgba(7,59,73,0.045) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(7,59,73,0.045) 1px, transparent 1px) 0 0 / 44px 100%;
}

/* ---------- 5. Большой кейс ---------- */
.big-case { background: var(--teal); color: #fff; }
.big-case-grid { max-width: var(--maxw); margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: 1fr 1.35fr; min-height: 380px; }
.big-case-info { padding: 48px 56px 48px 0; display: flex; flex-direction: column; }
.big-case h2 { margin-top: 14px; max-width: 20ch; font-size: clamp(24px, 2.4vw, 34px); }
.case-facts { margin-top: 24px; display: grid; gap: 0; }
.case-fact { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line-dark); font-size: 14.5px; }
.case-fact:last-child { border-bottom: 1px solid var(--line-dark); }
.case-fact dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); padding-top: 4px; }
.case-fact dd { color: rgba(255,255,255,0.92); }
.big-case .btn { margin-top: 26px; align-self: flex-start; padding: 13px 24px; font-size: 15px; }
.big-case-photo { position: relative; overflow: hidden; }
.big-case-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.small-label.on-dark { color: rgba(255,255,255,0.6); }

/* ---------- 6. Отраслевые решения ---------- */
.industries { padding: 64px 0; }
.ind-grid { display: grid; grid-template-columns: 0.9fr 1.4fr 1.1fr; gap: 56px; margin-top: 8px; align-items: stretch; }
.ind-tabs { display: grid; gap: 10px; align-content: start; }
.ind-tab {
  display: flex; gap: 16px; align-items: baseline; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: var(--r-btn); background: #fff;
  text-align: left; font-size: 16.5px; font-weight: 500; color: var(--graphite);
  cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.ind-tab .ind-num { font-family: var(--mono); font-size: 12.5px; color: var(--ink-60); }
.ind-tab .ind-arrow { margin-left: auto; font-family: var(--mono); color: var(--line); transition: color 0.15s; }
.ind-tab:hover { border-color: var(--teal); transform: translateX(3px); }
.ind-tab:hover .ind-arrow { color: var(--teal); }
.ind-tab.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.ind-tab.active .ind-num { color: var(--copper); }
.ind-tab.active .ind-arrow { color: #fff; }
.ind-body h3 { font-size: clamp(24px, 2.6vw, 36px); max-width: 16ch; }
.ind-body p { margin-top: 18px; color: var(--ink-60); max-width: 48ch; }
.ind-list { margin-top: 26px; display: grid; gap: 0; }
.ind-list li { list-style: none; padding: 12px 0; border-top: 1px solid var(--line); font-size: 16px; display: flex; gap: 14px; align-items: baseline; }
.ind-list li::before { content: '—'; color: var(--copper); }
.ind-photo { position: relative; height: 100%; min-height: 340px; overflow: hidden; border-radius: var(--r-btn); }
.ind-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 7. Как устроена работа ---------- */
.process { padding: 64px 0; background: var(--cool); }
.proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.proc-step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-btn); padding: 28px 26px 30px; transition: border-color 0.15s, transform 0.15s; }
.proc-step:hover { border-color: var(--teal); transform: translateY(-3px); }
.proc-ico {
  width: 58px; height: 58px; border-radius: var(--r-btn); display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); color: var(--teal); font-size: 26px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.proc-step:hover .proc-ico { background: var(--teal); border-color: var(--teal); color: #fff; }
.proc-num { position: absolute; top: 26px; right: 24px; font-family: var(--mono); font-size: 13px; color: var(--copper); }
.proc-step h3 { margin-top: 20px; font-size: 20px; }
.proc-step p { margin-top: 8px; font-size: 15px; color: var(--ink-60); }

/* ---------- 8. Ещё проекты ---------- */
.more-cases { padding: 64px 0; background: #FDFDFB; border-top: 1px solid var(--line); }
.mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mc-card { position: relative; min-height: 380px; border-radius: var(--r-btn); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 34px; color: #fff; }
.mc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.mc-card:hover img { transform: scale(1.03); }
.mc-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(10deg, rgba(6,54,66,0.88) 12%, rgba(6,54,66,0.12) 60%); }
.mc-card > * { position: relative; z-index: 2; }
.mc-meta { font-family: var(--mono); font-size: 12.5px; color: rgba(255,255,255,0.75); margin-bottom: 10px; }
.mc-card h3 { max-width: 22ch; }
.mc-link { margin-top: 14px; font-weight: 500; font-size: 15.5px; border-bottom: 1px solid rgba(255,255,255,0.5); align-self: flex-start; padding-bottom: 2px; }
.mc-card:hover .mc-link { border-color: #fff; }

/* ---------- 9. Производители ---------- */
.brands { padding: 52px 0; }
.brands .small-label { display: block; margin-bottom: 36px; }
.brand-marquee { overflow: hidden; position: relative; }
.brand-marquee::before, .brand-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.brand-marquee::before { left: 0; background: linear-gradient(90deg, var(--mineral), transparent); }
.brand-marquee::after { right: 0; background: linear-gradient(-90deg, var(--mineral), transparent); }
.brand-track { display: flex; align-items: center; width: max-content; padding: 8px 0; }
.brand-set { display: flex; gap: 76px; align-items: center; padding-right: 76px; }
@media (prefers-reduced-motion: no-preference) {
  .brand-track { animation: brandScroll 32s linear infinite; }
  .brand-marquee:hover .brand-track { animation-play-state: paused; }
}
@keyframes brandScroll { to { transform: translateX(-50%); } }
.brand-set span { font-size: 24px; font-weight: 600; letter-spacing: 0.01em; color: #9AA09D; white-space: nowrap; transition: color 0.2s; cursor: default; }
.brand-set span:hover { color: var(--teal); }
.brands-note { margin-top: 30px; font-size: 15px; color: var(--ink-60); }
.brands-note a { color: var(--teal); border-bottom: 1px solid var(--teal); }

/* ---------- 10. Финальный CTA ---------- */
.final-cta { background: var(--copper-bright); color: #0B1B2B; }
.final-cta h2 { color: #0B1B2B; }
.final-cta .final-sub { color: rgba(11,27,43,.8); }
.final-cta .tz-form input[type="text"] { background: rgba(255,255,255,.9); border-color: rgba(11,27,43,.28); color: #0B1B2B; }
.final-cta .tz-form input::placeholder { color: rgba(11,27,43,.55); }
.final-cta .tz-form input:focus { border-color: #0B1B2B; }
.final-cta .tz-upload { border-color: rgba(11,27,43,.4); color: rgba(11,27,43,.78); }
.final-cta .tz-upload:hover { border-color: #0B1B2B; }
.final-cta .tz-fine { color: rgba(11,27,43,.74); }
.final-cta .btn-copper { background: #0B1B2B; color: #fff; }
.final-cta .btn-copper:hover { background: #12283f; }
.final-cta .small-label, .final-cta .small-label.on-dark b { color: rgba(11,27,43,.65); }
.final-cta .chips span { background: rgba(11,27,43,.1); color: rgba(11,27,43,.85); }
.final-in { max-width: var(--maxw); margin: 0 auto; padding: 64px 48px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.final-in h2 { max-width: 15ch; }
.final-sub { margin-top: 22px; font-size: 17.5px; color: rgba(255,255,255,0.72); max-width: 44ch; }
.tz-form { display: grid; gap: 14px; }
.tz-form input[type="text"] {
  width: 100%; padding: 17px 18px; font-size: 16px; font-family: var(--font);
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--r-btn); color: #fff;
}
.tz-form input::placeholder { color: rgba(255,255,255,0.55); }
.tz-form input:focus { outline: none; border-color: #fff; }
.tz-upload {
  display: flex; align-items: center; gap: 12px; padding: 17px 18px;
  border: 1px dashed rgba(255,255,255,0.35); border-radius: var(--r-btn);
  font-size: 15px; color: rgba(255,255,255,0.75); cursor: pointer;
}
.tz-upload:hover { border-color: #fff; }
.tz-form .btn { justify-content: center; }
.btn-copper { background: var(--copper-btn); color: #fff; }
.btn-copper:hover { background: #935426; }
.tz-fine { font-size: 13px; color: rgba(255,255,255,0.5); }
.form-success { border: 1px solid rgba(11,27,43,.3); border-radius: var(--r-card); padding: 32px; }
.form-success h3 { margin-bottom: 12px; }
.form-success p { color: rgba(255,255,255,0.75); font-size: 15.5px; }

/* ---------- Футер ---------- */
.footer { background: #16191A; color: rgba(255,255,255,0.6); border-top: 1px solid rgba(255,255,255,0.08); }
.footer .logo { color: #fff; }
.footer-in { max-width: var(--maxw); margin: 0 auto; padding: 64px 48px 36px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid var(--line-dark); }
.footer-about { margin-top: 18px; font-size: 15px; max-width: 32ch; }
.footer-h { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 16px; }
.footer a { display: block; padding: 5px 0; font-size: 15px; color: rgba(255,255,255,0.7); }
.footer a:hover { color: #fff; }
.footer-bottom { padding-top: 26px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255,255,255,0.45); }

/* ---------- Адаптив ---------- */
@media (max-width: 1400px) {
  .logo small { display: none; }
}
@media (max-width: 1120px) {
  .nav, .header-phone, .header-mail { display: none; }
  .search-btn span, .search-btn kbd { display: none; }
  .search-btn { width: 46px; padding: 0; justify-content: center; }
  .burger { display: grid; place-items: center; margin-left: auto; }
  .header-cta { gap: 12px; }
  .hero-plate { right: -320px; opacity: 0.9; }
  .approach-grid { grid-template-columns: 1fr; gap: 44px; }
  .approach-photo { margin-bottom: 0; aspect-ratio: 16/10; }
  .facts-in { grid-template-columns: repeat(2, 1fr); }
  .cat-bento { grid-auto-rows: 120px; }
  .cat-a, .cat-b { grid-column: span 6; }
  .cat-c, .cat-d, .cat-e { grid-column: span 4; }
  .big-case-grid { grid-template-columns: 1fr; }
  .big-case-info { padding: 64px 0; }
  .big-case-photo { min-height: 380px; }
  .ind-grid { grid-template-columns: 1fr 1.4fr; }
  .ind-photo { display: none; }
  .proc-grid { grid-template-columns: repeat(2, 1fr); }
  .final-in { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .container, .header-in, .hero-in, .trust-line-in, .facts-in, .big-case-grid, .final-in, .footer-in { padding-left: 33px; padding-right: 33px; }
  .btn-header { display: none; }
  .hero-in { padding-top: 56px; padding-bottom: 64px; }
  .hero-plate { display: none; }
  .hero-index { display: none; }
  .search-in { padding: 26px 22px 32px; }
  .search-row input { font-size: 18px; }
  .search-item .s-cat { display: none; }
  .hero-search { max-width: none; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .facts-in { grid-template-columns: 1fr 1fr; gap: 26px; }
  .facts-in > div { padding-left: 18px; }
  .approach { padding: 52px 0; }
  .catalog, .industries, .process, .more-cases { padding: 52px 0; }
  .cat-bento { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; }
  .cat-cell { min-height: 210px; grid-column: span 1 !important; grid-row: auto !important; }
  .ind-grid { grid-template-columns: 1fr; gap: 36px; }
  .proc-grid { grid-template-columns: 1fr; gap: 28px; }
  .mc-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}


/* ---------- страница категории ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12.5px; color: var(--ink-60); padding: 26px 0 0; }
.crumbs a { color: var(--ink-60); }
.crumbs a:hover { color: var(--teal); }
.cat-head { padding: 22px 0 36px; }
.cat-head h1 { font-size: clamp(32px, 3.8vw, 54px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; max-width: 22ch; }
.cat-head .lead { margin-top: 20px; font-size: 18px; color: var(--ink-60); max-width: 56ch; }
.cat-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.subcats { padding: 52px 0; background: #FDFDFB; border-top: 1px solid var(--line); }
.brand-strip { padding: 56px 0; }
.brand-strip .brand-static { display: flex; flex-wrap: wrap; gap: 16px 52px; align-items: baseline; margin-top: 26px; }
.brand-strip .brand-static span { font-size: 21px; font-weight: 600; color: #9AA09D; white-space: nowrap; }
.pos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pos-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px; display: flex; flex-direction: column; color: var(--graphite); transition: border-color 0.15s, transform 0.15s; }
.pos-card:hover { border-color: var(--teal); transform: translateY(-3px); }
.pos-code { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--copper); }
.pos-card h3 { margin-top: 12px; font-size: 19px; font-weight: 600; }
.pos-card p { margin-top: 8px; font-size: 15px; color: var(--ink-60); }
.pos-link { margin-top: auto; padding-top: 18px; font-weight: 600; font-size: 15px; color: var(--teal); }
.pos-card:hover .pos-link { color: var(--copper); }
.send-block { padding: 56px 0; background: var(--cool); }
.send-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; align-items: start; }
.send-grid h2 { max-width: 18ch; }
.send-card { background: var(--teal); color: #fff; border-radius: var(--r-card); padding: 34px; }
.send-card h3 { font-size: 21px; font-weight: 600; }
.send-card p { margin-top: 10px; font-size: 15.5px; color: rgba(255,255,255,0.72); }
.send-card .cat-actions { margin-top: 24px; }
.seo-block { padding: 56px 0; }
.seo-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 44px; align-items: start; }
.seo-grid p { color: var(--ink-60); max-width: 62ch; margin-bottom: 16px; }
.link-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 2px; border-top: 1px solid var(--line); font-weight: 600; color: var(--graphite); transition: color 0.15s; }
.link-list a:last-child { border-bottom: 1px solid var(--line); }
.link-list a:hover { color: var(--teal); }
.link-list .arr { font-family: var(--mono); color: var(--copper); }
.faq-block { padding: 0 0 88px; }
.faq-block details { border-top: 1px solid var(--line); }
.faq-block details:last-child { border-bottom: 1px solid var(--line); }
.faq-block summary { padding: 20px 4px; font-size: 17.5px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq-block summary::after { content: '+'; font-family: var(--mono); color: var(--copper); }
.faq-block details[open] summary::after { content: '\2212'; }
.faq-block .faq-a { padding: 0 4px 22px; color: var(--ink-60); max-width: 68ch; }
@media (max-width: 1120px) {
  .pos-grid { grid-template-columns: 1fr; }
  .send-grid, .seo-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* fix: шапка не влезает на 1440 с кнопкой поиска */
@media (max-width: 1200px) { .header-mail { display: none; } }
@media (max-width: 1300px) { .search-btn span, .search-btn kbd { display: none; } }


/* ---------- статьи и таблицы ---------- */
.article-wrap { padding: 24px 0 88px; }
.article-grid { display: grid; grid-template-columns: 1fr 280px; gap: 44px; align-items: start; }
.article-body { max-width: 720px; }
.article-body h1 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; }
.article-body h2 { font-size: clamp(23px, 2.2vw, 30px); font-weight: 500; margin: 44px 0 14px; }
.article-body p { color: var(--ink-60); margin: 0 0 16px; }
.article-body .lead { font-size: 18.5px; margin: 18px 0 8px; }
.toc { position: sticky; top: 108px; border-left: 2px solid var(--line); padding-left: 20px; }
.toc a { display: block; font-size: 14.5px; color: var(--ink-60); padding: 5px 0; }
.toc a:hover { color: var(--teal); }
.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 10px 0 18px; }
.spec-table th, .spec-table td { text-align: left; padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.spec-table th { font-weight: 500; color: var(--ink-60); width: 40%; }
.spec-table td { font-family: var(--mono); font-size: 13.5px; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 1px solid var(--line); }
.table-scroll { overflow-x: auto; }
.callout { background: var(--cool); border-left: 3px solid var(--copper); border-radius: var(--r-btn); padding: 22px 26px; margin: 22px 0; }
.callout p { margin: 0; color: var(--graphite); }
.def-block { border-top: 2px solid var(--teal); padding-top: 18px; margin: 26px 0; }
.def-block .def-term { font-weight: 600; }
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-row a { font-family: var(--mono); font-size: 13.5px; padding: 9px 15px; border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--graphite); transition: border-color 0.15s, color 0.15s; }
.tag-row a:hover { border-color: var(--teal); color: var(--teal); }
.two-col-page { display: grid; grid-template-columns: 1fr 360px; gap: 56px; align-items: start; }
.aside-card { border: 1px solid var(--line); border-radius: var(--r-btn); background: #fff; padding: 28px; }
.aside-card + .aside-card { margin-top: 16px; }
.aside-card h3 { font-size: 19px; font-weight: 500; margin-bottom: 12px; }
.aside-teal { background: var(--teal); border-color: var(--teal); color: #fff; }
.aside-teal h3 { color: #fff; }
.aside-teal p { color: rgba(255,255,255,0.72); font-size: 15px; }
.steps-line { display: grid; gap: 0; margin: 20px 0; }
.step-row { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.step-row:last-child { border-bottom: 1px solid var(--line); }
.step-row .sr-num { font-family: var(--mono); font-size: 13px; color: var(--copper); padding-top: 3px; }
.step-row h3 { font-size: 17.5px; font-weight: 500; }
.step-row p { font-size: 15px; color: var(--ink-60); margin-top: 3px; }
.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 1120px) {
  .article-grid { grid-template-columns: 1fr; } .toc { display: none; }
  .two-col-page { grid-template-columns: 1fr; gap: 36px; }
  .hub-grid { grid-template-columns: 1fr; }
}

/* ---------- v6: реальный логотип ---------- */
.logo-img { height: 62px; width: auto; display: block; }
/* А1: русское название слева, значок правее */
.logo { gap: 14px; }
.logo-name { display: flex; flex-direction: column; gap: 2px; line-height: 1.05; text-align: right; }
.logo-name .lg-top { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.logo-name .lg-main { font-size: 17px; font-weight: 700; letter-spacing: 0.005em; color: #fff; }
.header-mail { font-family: var(--mono); font-size: 13.5px; color: rgba(255,255,255,0.75); white-space: nowrap; }
.header-mail:hover { color: #fff; }
@media (max-width: 1120px) { .logo-name { display: none; } }
/* .logo-plate убрана — белая версия лого без подложки */
.logo small { color: rgba(255,255,255,0.55); }
/* шапка в navy (стиль первой версии) */
.header { background: var(--teal-deep); border-bottom: 1px solid rgba(255,255,255,0.1); }
.header .nav a { color: rgba(255,255,255,0.85); }
.header .nav a:hover { color: #fff; }
.header .logo { color: #fff; }
.header .header-phone { color: rgba(255,255,255,0.75); }
.header .search-btn { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); background: transparent; }
.header .search-btn:hover { border-color: #fff; color: #fff; }
.header .burger { border-color: rgba(255,255,255,0.3); color: #fff; }
.mobile-menu { background: var(--teal-deep); }
.mobile-menu a { color: #fff; border-color: rgba(255,255,255,0.12); }

/* ---------- панель поиска v6: без рамок, воздух ---------- */
.search-panel { display: none; position: fixed; top: 84px; left: 0; right: 0; z-index: 41; background: var(--mineral); border-bottom: 1px solid var(--line); box-shadow: 0 34px 60px -30px rgba(10,28,48,0.45); }
.search-panel.open { display: block; }
.search-backdrop { display: none; position: fixed; inset: 84px 0 0; z-index: 38; background: rgba(27,43,58,0.35); }
.search-backdrop.open { display: block; }
.search-in { max-width: 880px; margin: 0 auto; padding: 44px 32px 48px; }
.search-row2 { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); padding-bottom: 18px; transition: border-color 0.2s; }
.search-row2:focus-within { border-color: var(--teal); }
.search-row2 i { font-size: 26px; color: var(--teal); flex-shrink: 0; }
.search-row2 input { flex: 1; min-width: 0; border: 0 !important; background: none !important; border-radius: 0; font-family: var(--font); font-size: 26px; font-weight: 500; color: var(--graphite); outline: none; -webkit-appearance: none; appearance: none; padding: 0; }
.search-row2 input::placeholder { color: #A5B1BB; font-weight: 400; }
.search-close { border: 0; background: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-60); padding: 6px 8px; cursor: pointer; flex-shrink: 0; }
.search-close:hover { color: var(--teal); }
.search-hint { margin-top: 18px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-60); }
.search-hint button { border: 0; background: none; font: inherit; color: var(--teal); border-bottom: 1px solid var(--line); padding: 0 0 1px; cursor: pointer; }
.search-hint button:hover { border-color: var(--teal); }
.search-res { margin-top: 28px; max-height: 46vh; overflow-y: auto; }
.search-group { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); margin: 22px 0 10px; }
.search-item { display: flex; align-items: baseline; gap: 16px; padding: 13px 2px; border-top: 1px solid var(--line); font-size: 16px; color: var(--graphite); }
.search-item:hover .s-name { color: var(--teal); }
.search-item .s-sku { font-family: var(--mono); font-size: 13px; color: var(--copper-btn); white-space: nowrap; }
.search-item .s-cat { margin-left: auto; font-size: 13px; color: var(--ink-60); white-space: nowrap; }
.search-empty { padding: 26px 2px 4px; font-size: 16px; color: var(--ink-60); }
.search-empty a { color: var(--teal); border-bottom: 1px solid var(--teal); }
@media (max-width: 700px) {
  .search-panel, .search-backdrop { top: 66px; }
  .search-in { padding: 26px 20px 32px; }
  .search-row2 input { font-size: 19px; }
  .search-item .s-cat { display: none; }
}

/* ---------- страница блога: редакционный хаб ---------- */
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.blog-filters button { font-family: var(--font); font-size: 14.5px; font-weight: 500; padding: 9px 16px; border: 1px solid var(--line); background: #fff; border-radius: var(--r-card); color: var(--graphite); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.blog-filters button:hover { border-color: var(--teal); color: var(--teal); }
.blog-filters button.active { background: var(--teal); border-color: var(--teal); color: #fff; }

.feat { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 340px; border-radius: var(--r-card); overflow: hidden; background: var(--teal-deep); color: #fff; margin-bottom: 18px; }
.feat-txt { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; }
.feat-meta { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--copper-bright); }
.feat-txt h2 { color: #fff; font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; line-height: 1.18; margin: 14px 0 12px; max-width: 20ch; }
.feat-txt p { color: rgba(255,255,255,0.75); font-size: 16px; max-width: 46ch; }
.feat-link { margin-top: 22px; font-weight: 600; font-size: 15.5px; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.45); align-self: flex-start; padding-bottom: 3px; }
.feat:hover .feat-link { border-color: #fff; }
.feat-img { position: relative; overflow: hidden; }
.feat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.feat:hover .feat-img img { transform: scale(1.04); }

.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.art-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; color: var(--graphite); transition: border-color 0.15s, transform 0.15s; }
.art-card:hover { border-color: var(--teal); transform: translateY(-3px); }
.art-photo { aspect-ratio: 16/10; overflow: hidden; background: var(--mineral-2); }
.art-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.art-card:hover .art-photo img { transform: scale(1.04); }
.art-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.art-meta { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--copper); }
.art-meta .dot { color: var(--line); }
.art-meta .time { color: var(--ink-60); letter-spacing: 0; text-transform: none; }
.art-card h3 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.art-card p { font-size: 14.5px; color: var(--ink-60); line-height: 1.5; }
.art-link { margin-top: auto; padding-top: 14px; font-weight: 600; font-size: 14.5px; color: var(--teal); }
.art-card:hover .art-link { color: var(--copper-btn); }

.soon-block { border-top: 1px solid var(--line); margin-top: 44px; padding-top: 28px; }
.soon-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 6px; }
.soon-head h2 { font-size: 21px; font-weight: 700; }
.soon-head span { font-size: 14px; color: var(--ink-60); }
.soon-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 36px; }
.soon-row { display: flex; align-items: baseline; gap: 14px; padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.soon-row .rub { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-60); white-space: nowrap; min-width: 132px; }
.soon-row .ttl { color: var(--graphite); }
@media (max-width: 1120px) {
  .feat { grid-template-columns: 1fr; }
  .feat-img { min-height: 240px; order: -1; }
  .feat-txt { padding: 30px 26px; }
  .art-grid { grid-template-columns: repeat(2, 1fr); }
  .soon-list { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .art-grid { grid-template-columns: 1fr; }
  .soon-row { flex-direction: column; gap: 3px; }
  .soon-row .rub { min-width: 0; }
}

/* ---------- статья: расширенный шаблон ---------- */
.read-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--copper-btn); width: 0; z-index: 60; transition: width 0.1s linear; }
.art-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-60); margin-top: 14px; }
.art-head-meta .rub { color: var(--copper); letter-spacing: 0.06em; text-transform: uppercase; }
.art-head-meta .sep { color: var(--line); }

.tldr { background: var(--cool); border-left: 3px solid var(--teal); border-radius: var(--r-card); padding: 24px 28px; margin: 26px 0 34px; }
.tldr h2 { font-family: var(--mono); font-size: 12px !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); margin: 0 0 14px !important; font-weight: 600; }
.tldr ul { list-style: none; display: grid; gap: 10px; }
.tldr li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--graphite); align-items: baseline; }
.tldr li::before { content: '—'; color: var(--copper); flex-shrink: 0; }

.art-faq { margin-top: 44px; border-top: 1px solid var(--line); padding-top: 8px; }
.art-faq details { border-bottom: 1px solid var(--line); }
.art-faq summary { padding: 18px 2px; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; color: var(--graphite); }
.art-faq summary::-webkit-details-marker { display: none; }
.art-faq summary::after { content: '+'; font-family: var(--mono); color: var(--copper); font-weight: 500; }
.art-faq details[open] summary::after { content: '\2212'; }
.art-faq .faq-a { padding: 0 2px 20px; color: var(--ink-60); font-size: 16px; max-width: 68ch; }

.art-author { display: flex; gap: 16px; align-items: flex-start; margin-top: 40px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.art-author .ico { width: 44px; height: 44px; border-radius: var(--r-card); background: var(--mineral); display: grid; place-items: center; color: var(--teal); font-size: 22px; flex-shrink: 0; }
.art-author .who { font-size: 15.5px; font-weight: 600; color: var(--graphite); }
.art-author .what { font-size: 14.5px; color: var(--ink-60); margin-top: 3px; max-width: 60ch; }

.read-next { margin-top: 44px; }
.read-next .rn-title { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 16px; }
.rn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.rn-card { display: flex; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px; background: #fff; color: var(--graphite); transition: border-color 0.15s; }
.rn-card:hover { border-color: var(--teal); }
.rn-card img { width: 74px; height: 58px; object-fit: cover; border-radius: var(--r-btn); flex-shrink: 0; }
.rn-card .rn-rub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--copper); }
.rn-card h3 { font-size: 15.5px; font-weight: 600; line-height: 1.3; margin-top: 4px; }
.rn-card:hover h3 { color: var(--teal); }

.toc a.active { color: var(--teal); font-weight: 600; }
.toc { border-left-color: var(--line); }
@media (max-width: 1120px) { .rn-grid { grid-template-columns: 1fr; } }

/* ---------- элементы каталога без своей страницы ---------- */
.pending { position: relative; cursor: default; opacity: 0.9; }
.pending:hover { border-color: var(--line) !important; transform: none !important; }
.pending .pending-tag { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-60); background: var(--mineral-2); border-radius: var(--r-btn); padding: 3px 8px; }
.pending .pos-link, .pending .cat-arrow { display: none; }
a.cat-row.pending:hover { background: transparent; color: var(--graphite); }

/* ---------- фото товара в карточке позиции ---------- */
.prod-photo { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin-bottom: 16px; background: var(--mineral-2); aspect-ratio: 16/10; }
.prod-photo img { width: 100%; height: 100%; object-fit: cover; }
.prod-photo .cap { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-60); padding: 8px 12px; background: var(--mineral); border-top: 1px solid var(--line); }

/* ---------- фото-хиро страницы и фоны ячеек ---------- */
.page-hero-img { max-width: var(--maxw); margin: 0 auto 8px; padding: 0 48px; }
.page-hero-img .phi-frame { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 21/7; background: var(--mineral-2); position: relative; }
.page-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-img .phi-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,28,48,0.05), rgba(10,28,48,0.18)); }
@media (max-width: 700px) { .page-hero-img { padding: 0 22px; } .page-hero-img .phi-frame { aspect-ratio: 16/9; } }
/* фон-фото в bento-ячейке каталога/услуг (у cat-a..d не было) */
.cat-cell.has-bg { position: relative; }
.cat-cell.has-bg > img { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.cat-cell.has-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(8deg, rgba(10,28,48,0.9) 18%, rgba(10,28,48,0.25) 62%); }
.cat-cell.has-bg h3 { color: #fff; }
.cat-cell.has-bg .cat-desc { color: rgba(255,255,255,0.8); }
.cat-cell.has-bg .cat-count { color: rgba(255,255,255,0.75); }
.cat-cell.has-bg .pending-tag { position: relative; z-index: 2; background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.9); }

/* списки в материалах опыта */
.bullet-list { margin: 6px 0 0; padding-left: 20px; list-style: none; }
.bullet-list li { position: relative; padding: 5px 0 5px 2px; font-size: 15px; line-height: 1.55; border-bottom: 1px solid var(--line); }
.bullet-list li:last-child { border-bottom: none; }
.bullet-list li::before { content: ''; position: absolute; left: -14px; top: 13px; width: 5px; height: 5px; background: var(--copper); border-radius: 50%; }

/* ---------- каталог: направления поставок (А6) ---------- */
.dirs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dir-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; color: var(--graphite); transition: border-color 0.15s, transform 0.15s; scroll-margin-top: 100px; }
.dir-card:hover { border-color: var(--teal); transform: translateY(-2px); }
.dir-photo { aspect-ratio: 4/3; overflow: hidden; background: var(--mineral); }
.dir-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dir-body h3 { font-size: 16.5px; font-weight: 700; line-height: 1.28; }
.dir-body p { font-size: 13.5px; line-height: 1.5; color: var(--ink-60); }
.dir-tags { margin-top: auto; padding-top: 10px; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--copper); border-top: 1px solid var(--line); }
@media (max-width: 1120px) { .dirs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .dirs-grid { grid-template-columns: 1fr; } }

/* ---------- А11: единая гарнитура на карточках оборудования + акцент в заголовках ---------- */
.cat-cell .cat-count,
.dir-tags,
.cat6-row .brands,
.catphoto span,
.art-card .art-meta,
.mc-card .mc-meta { font-family: var(--font); letter-spacing: 0.005em; }
.dir-tags { font-size: 12.5px; }
.cat-cell .cat-count { font-size: 13px; }
.cat6-row .brands { font-size: 12.5px; }
/* оранжевый акцент над названиями блоков */
.section-head h2 { position: relative; }


/* ---------- карточки опыта: фото на светлом + текст под ним ---------- */
.opyt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.opyt-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; color: var(--graphite); transition: border-color 0.15s, transform 0.15s; }
.opyt-card:hover { border-color: var(--teal); transform: translateY(-2px); }
.opyt-photo { aspect-ratio: 3/2; background: #fff; border-bottom: 1px solid var(--line); }
.opyt-photo img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 10px; }
.opyt-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.opyt-meta { font-size: 12.5px; letter-spacing: 0.02em; color: var(--copper); }
.opyt-card h3 { font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.opyt-card p { font-size: 13.5px; line-height: 1.5; color: var(--ink-60); }
.opyt-link { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 600; color: var(--teal); border-top: 1px solid var(--line); }
@media (max-width: 1120px) { .opyt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .opyt-grid { grid-template-columns: 1fr; } }

/* фикс переполнения на узких экранах: grid-элементы не растягиваются под таблицы */
.article-grid > *, .two-col-page > *, .send-grid > *, .seo-grid > *,
.dirs-grid > *, .opyt-grid > *, .hub-grid > *, .pos-grid > *, .rfq6-grid > * { min-width: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.article-body, .article-body img, .opyt-card img, .dir-card img { max-width: 100%; }
.spec-table { min-width: 0; }
@media (max-width: 460px) {
  .container, .header-in, .hero-in, .article-wrap, .facts-in, .final-in, .footer-in, .send-grid { padding-left: 16px; padding-right: 16px; }
  .spec-table th, .spec-table td { padding: 9px 10px; font-size: 13px; }
  .spec-table th { width: 46%; }
}

@media (max-width: 460px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .cat-actions { flex-wrap: wrap; }
  .cat-actions .btn { width: 100%; justify-content: center; }
}

/* ================= ЕДИНАЯ ШАПКА САЙТА (v7) ================= */
/* Один компонент на всех страницах: значок слева, название справа от него,
   навигация, поиск иконкой, контакты в две строки. */
.site-hdr{position:sticky;top:0;z-index:40;background:rgba(8,23,42,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.1)}
.site-hdr-in{max-width:var(--maxw);margin:0 auto;padding:0 48px;height:76px;display:flex;align-items:center;gap:30px}

.site-logo{display:flex;align-items:center;gap:13px;flex-shrink:0}
.site-logo img{height:46px;width:auto;display:block}
.site-logo .txt{display:flex;flex-direction:column;line-height:1.12;gap:1px}
.site-logo .txt .t1{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.site-logo .txt .t2{font-size:16px;font-weight:600;letter-spacing:-.01em;color:#fff;white-space:nowrap}

.site-nav{display:flex;gap:26px;margin-left:auto}
.site-nav a{position:relative;font-size:15px;font-weight:500;color:rgba(255,255,255,.84);padding:6px 0;white-space:nowrap;transition:color .15s}
.site-nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--copper-bright);transition:right .22s ease}
.site-nav a:hover{color:#fff}
.site-nav a:hover::after{right:0}
.site-nav a[aria-current=page]{color:#fff}
.site-nav a[aria-current=page]::after{right:0;background:rgba(255,255,255,.35)}

.site-ct{display:flex;align-items:center;gap:18px;flex-shrink:0}
.site-sep{width:1px;height:28px;background:rgba(255,255,255,.16)}
.site-search{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:rgba(255,255,255,.75);font-size:19px;cursor:pointer;transition:.15s}
.site-search:hover{background:rgba(255,255,255,.1);color:#fff}
.site-contacts{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;gap:1px}
.site-contacts .tel{font-size:15px;font-weight:600;color:#fff;white-space:nowrap;transition:color .15s}
.site-contacts .tel:hover{color:var(--copper-bright)}
.site-contacts .mail{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.55);white-space:nowrap;transition:color .15s}
.site-contacts .mail:hover{color:#fff}
.site-burger{display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:none;color:#fff;font-size:17px;cursor:pointer}
.site-burger:hover{background:rgba(255,255,255,.1)}

.site-hdr + .mobile-menu,.mobile-menu{inset:76px 0 0;background:var(--teal-deep);padding:26px 48px}
.mobile-menu a{color:#fff;border-color:rgba(255,255,255,.12)}

@media(max-width:1240px){ .site-nav{gap:20px} .site-hdr-in{gap:22px} }
@media(max-width:1120px){
  .site-nav{display:none}
  .site-burger{display:grid;place-items:center}
  .site-hdr-in{height:70px;gap:16px}
  .site-ct{margin-left:auto}
  .mobile-menu{inset:70px 0 0}
}
@media(max-width:820px){ .site-contacts,.site-sep{display:none} }
@media(max-width:700px){
  .site-hdr-in{padding:0 33px}
  .mobile-menu{padding:24px 33px}
  .site-logo img{height:40px}
}
@media(max-width:520px){ .site-logo .txt{display:none} }

/* ---------- тёмная верхняя зона внутренних страниц (язык главной) ---------- */
.page-top{background:var(--teal-deep);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.page-top .crumbs{color:rgba(255,255,255,.5);padding-top:22px}
.page-top .crumbs a{color:rgba(255,255,255,.6)}
.page-top .crumbs a:hover{color:#fff}
.page-top .crumbs span{color:rgba(255,255,255,.8)}
.page-top .small-label{color:rgba(255,255,255,.55)}
.page-top .small-label b{color:var(--copper-bright)}
.page-top .cat-head{padding:18px 0 42px}
.page-top .cat-head h1{color:#fff}
.page-top .cat-head .lead{color:rgba(255,255,255,.75)}
.page-top .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.page-top .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.page-top .btn-solid{background:var(--copper-bright);color:#0B1B2B}
.page-top .btn-solid:hover{background:#f08b31}
.page-top .chip,.page-top .tag{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}

/* элементы, попадающие в тёмную верхнюю зону */
.page-top .tag-row a{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.85)}
.page-top .tag-row a:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.page-top .pending-tag{background:rgba(255,255,255,.14);color:rgba(255,255,255,.9)}
.page-top .cat-actions{margin-top:26px}
.page-top p,.page-top li{color:rgba(255,255,255,.75)}
.page-top a:not(.btn):not(.crumbs a){color:inherit}
.page-top .head-link{color:var(--copper-bright)}
/* фото-баннер сразу под тёмной зоной прижимается к ней */
.page-top + .page-hero-img{margin-top:22px}
/* редакционные страницы: тёмная полоса только с крошками */
.article-top{background:var(--teal-deep);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.article-top .crumbs{color:rgba(255,255,255,.5);padding:22px 0}
.article-top .crumbs a{color:rgba(255,255,255,.6)}
.article-top .crumbs a:hover{color:#fff}
.article-top .crumbs span{color:rgba(255,255,255,.8)}

/* ── Мобильный подвал и тап-зоны (05.10.2026) ──
   Оба подвала: .footer (внутренние) и footer.f7 (главная). */
@media (max-width: 720px) {
  footer.footer .footer-grid, footer.f7 .f7-in { grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 30px; }
  footer.footer .footer-grid > div:first-child, footer.f7 .f7-in > div:first-child { grid-column: 1 / -1; }
  footer.footer .footer-grid > div:last-child, footer.f7 .f7-in > div:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-content: start; }
  footer.footer .footer-grid > div:last-child > .footer-h, footer.f7 .f7-in > div:last-child > h4 { grid-column: 1 / -1; }
  footer.footer .footer-about, footer.f7 .f7-in > div:first-child p { max-width: none; }
  footer.footer a, footer.f7 a { padding: 11px 0; font-size: 16px; line-height: 1.3; }
  footer.footer .footer-h, footer.f7 h4 { margin-bottom: 4px; }
  footer.footer .footer-grid > div:last-child > a:nth-of-type(-n+2), footer.f7 .f7-in > div:last-child > a:nth-of-type(-n+2) { color: #fff; font-weight: 600; }
  footer.footer .footer-bottom, footer.f7 .f7-b { flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; }
  .crumbs a { display: inline-block; padding: 12px 2px; margin: -12px -2px; }
  .site-search { width: 44px; height: 44px; }
}
/* Узкий телефон: контакты в одну колонку, чтобы «г. Санкт-Петербург» не рвался */
@media (max-width: 380px) {
  footer.footer .footer-grid > div:last-child, footer.f7 .f7-in > div:last-child { grid-template-columns: 1fr; }
}

/* Подпись над заголовком карточки категории: в потоке, а не absolute — не налезает на длинный заголовок */
.cat-cell .cat-count { position: relative; top: auto; left: auto; margin-bottom: auto; padding-bottom: 14px; }
.cat-cell > .pending-tag { position: relative; z-index: 2; }

/* Чипы без ссылки (бренд/модель без своей страницы) — в том же размере, что и чипы-ссылки, пунктирная рамка */
.tag-row > span:not(.small-label) { font-family: var(--mono); font-size: 13.5px; line-height: 1.3; padding: 9px 15px; border: 1px dashed var(--line); border-radius: var(--r-btn); color: var(--ink-60); background: transparent; text-transform: none; letter-spacing: 0; margin: 0; }
.page-top .tag-row > span:not(.small-label) { border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.7); background: transparent; }

/* Форма на белой карточке (request.html): плейсхолдеры были белыми на белом */
.aside-card .tz-form input::placeholder { color: rgba(11,27,43,.5); }

/* Таблицы-сравнения на 3+ колонки: на телефоне помещаются в ширину без скрытой прокрутки */
@media (max-width: 460px) {
  .spec-table:has(tr > :nth-child(3)) { table-layout: fixed; }
  .spec-table:has(tr > :nth-child(3)) th { width: 30%; }
  .spec-table:has(tr > :nth-child(3)) th, .spec-table:has(tr > :nth-child(3)) td { padding: 9px 6px; font-size: 12.5px; hyphens: auto; overflow-wrap: anywhere; }
  .spec-table:has(tr > :nth-child(3)) td { font-family: var(--font); }
}

/* «Бренды в этой категории» — единые чипы (на filters.html стилей не было, бренды слипались) */
.brand-static, .brand-strip .brand-static { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.brand-static span, .brand-strip .brand-static span { font-family: var(--mono); font-size: 13.5px; font-weight: 400; padding: 9px 15px; border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--graphite); white-space: nowrap; }

/* Тап-зоны ≥44px на телефоне: фильтры блога, ссылки «Все … →» у заголовков секций */
@media (max-width: 720px) {
  .blog-filters button { min-height: 44px; }
  .s7-h a, .section-head a.head-link { display: inline-block; padding: 10px 0; margin: -10px 0; }
}
.tag-row > a, .tag-row > span:not(.small-label) { display: inline-flex; align-items: center; line-height: 1.3; }
@media (max-width: 460px) { .spec-table td.req-addr { font-family: var(--font); font-size: 14px; } }
/* Реквизиты на телефоне: подпись над значением, без узкой колонки */
@media (max-width: 460px) {
  .spec-table:has(.req-addr) tr { display: block; border-top: 1px solid var(--line); padding: 9px 0; }
  .spec-table:has(.req-addr) th, .spec-table:has(.req-addr) td { display: block; width: auto; border: 0; padding: 0 2px; }
  .spec-table:has(.req-addr) th { font-size: 12.5px; margin-bottom: 2px; }
  .spec-table:has(.req-addr) tr:last-child th, .spec-table:has(.req-addr) tr:last-child td { border-bottom: 0; }
  .spec-table td.req-addr { font-size: 15px; }
}

/* Сенсорные экраны любой ширины (телефон, планшет): тап-зоны ≥44px, раскладку не трогаем */
@media (pointer: coarse) {
  footer.footer a, footer.f7 a { padding-top: 11px; padding-bottom: 11px; }
  .crumbs a { display: inline-block; padding: 12px 2px; margin: -12px -2px; }
  .site-search { width: 44px; height: 44px; }
  .blog-filters button { min-height: 44px; }
  .s7-h a, .section-head a.head-link { display: inline-block; padding: 10px 0; margin: -10px 0; }
  .tag-row > a, .tag-row > span:not(.small-label), .brand-static span { min-height: 44px; }
  a.lnk { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 10.10.2026 — страницы направлений по материалам клиента (valves, spill, boats, drives, electro, oils) */
.cat-bento.dir-bento { grid-auto-rows: minmax(132px, auto); }
.dir-bento .cat-cell .cat-desc { max-width: 52ch; }
.cat-bento.n4 .cat-c, .cat-bento.n4 .cat-e { grid-column: span 6; }
.cat-bento.n3 .cat-e { grid-column: span 12; }
.dir-intro { padding: 44px 0 8px; }
.dir-intro .seo-grid p { color: var(--graphite); font-size: 17px; line-height: 1.6; }
.dir-gallery { padding: 28px 0 0; }
.gal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.gal-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gal { margin: 0; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.gal img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 679; object-fit: contain; background: #fff; }
.gal figcaption { padding: 14px 18px 16px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; color: var(--ink-60); }
.brand-strip .brand-sub { display: block; margin-top: 26px; }
.brand-strip .brand-note { margin-top: 14px; max-width: 70ch; font-size: 17px; line-height: 1.55; color: var(--graphite); }
@media (max-width: 960px) { .gal-grid, .gal-grid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gal-grid { gap: 10px; } .gal figcaption { padding: 10px 12px 12px; font-size: 13px; } .dir-gallery { padding-top: 20px; } .dir-intro { padding-top: 36px; } }
.dir-bento .cat-cell.has-bg::after { background: linear-gradient(180deg, rgba(10,28,48,.72) 0%, rgba(10,28,48,.3) 30%, rgba(10,28,48,.45) 55%, rgba(10,28,48,.92) 85%); }
.dir-bento .cat-cell.has-bg > img { opacity: 1; }
.dir-bento .cat-cell > .pending-tag { align-self: flex-start; }
.dir-bento .cat-cell.has-prod { background: #fff; border: 1px solid var(--line); }
.dir-bento .cat-cell.has-prod::before, .dir-bento .cat-cell.has-prod::after { display: none; }
.dir-bento .cat-cell.has-prod > img { position: static; inset: auto; display: block; width: 100%; flex: 1 1 auto; min-height: 150px; max-height: 240px; object-fit: contain; opacity: 1; mix-blend-mode: normal; margin: 4px 0 18px; }
.dir-bento .cat-cell.has-prod h3 { color: var(--graphite); }
.dir-bento .cat-cell.has-prod .cat-desc { color: var(--ink-60); }
.dir-bento .cat-cell.has-prod .cat-count { color: var(--ink-60); padding-bottom: 0; margin-bottom: 0; }
.dir-bento .cat-cell.has-prod .pending-tag { background: var(--mineral-2); color: var(--ink-60); }
@media (max-width: 760px) { .dir-bento .cat-cell.has-prod > img { min-height: 170px; max-height: 200px; } }