/* =========================================================================
   kses.kz · тема «kses» (концепция v4+ «Аврора»)
   База — макет kses-redesign-concept-v4.pdf. Палитра расширена (ярче),
   все токены ниже переносятся в theme.json темы WordPress.
   ========================================================================= */

:root {
  /* Цвета, вынесенные в переменные (05.11.2026) */
  --line-strong: #DDE2F0;
  --surface-2: #F7F8FB;
  --surface-3: #E4EAF5;
  --surface-4: #DCE6F2;
  --muted-2: #9AA3B8;
  --on-night-text: #C9D0E2;
  --on-night-muted: #8A93AD;
  --on-night-accent: #A9B8FF;
  --on-night-accent-2: #E3B8FF;
  --on-night-accent-3: #FFC8A8;
  --night-aurora-1: #3B5BFF;
  --night-aurora-2: #7C5CFF;
  --night-aurora-3: #0FB5A5;
  --amber-strong: #F28C28;
  --amber-ink: #A86512;
  --green-tint: #E3F5EE;
  --wire-1: #2F54EB;
  --wire-2: #7C5CFF;
  --wire-3: #C04CFD;
  --btn-bg: var(--grad-brand);
  --btn-text: #FFFFFF;
  --btn-glow: var(--glow-cobalt);
  --btn-glow-hover: 0 14px 36px rgba(124,92,255,.38);
  /* Основа (v4) */
  --fog: #F4F5F7;          /* фон страниц */
  --white: #FFFFFF;        /* карточки, меню, формы */
  --ice: #EEF1F6;          /* подложки */
  --line: #E2E6ED;         /* обводки */
  --graphite: #131722;     /* заголовки */
  --slate: #4A5263;        /* текст */
  --ash: #646C7E;          /* подписи */
  --night: #10162A;        /* тёмные блоки (v4: #10162A → чуть синее) */
  --night-2: #18213F;

  /* Акцент (v4) */
  --cobalt: #2F54EB;
  --cobalt-dark: #1E3FC4;
  --cobalt-tint: #E9EEFF;
  --amber: #F6A23A;        /* «искра» — точки, узлы */

  /* v4+ — новые цвета (ярче) */
  --violet: #7C5CFF;
  --violet-tint: #F0ECFF;
  --teal: #0FB5A5;
  --teal-tint: #E2F8F5;
  --coral: #FF7A59;
  --coral-tint: #FFEDE6;
  --amber-tint: #FFF3E0;
  --green: #1F9D74;
  --red: #E5484D;

  /* Градиенты */
  --grad-brand: linear-gradient(120deg, #2F54EB 0%, #7C5CFF 55%, #C04CFD 100%);
  --grad-spark: linear-gradient(120deg, #F6A23A 0%, #FF7A59 100%);
  --grad-teal: linear-gradient(120deg, #0FB5A5 0%, #2F9BEB 100%);
  --aurora-1: #CBBFFF;     /* лаванда */
  --aurora-2: #FFC8A8;     /* персик */
  --aurora-3: #B6F0DA;     /* мята */
  --aurora-4: #BFDBFF;     /* небо */

  /* Типографика */
  --f-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif: "Lora", Georgia, serif;

  /* Радиусы, тени */
  --r-field: 12px;
  --r-num: 20px;
  --r-card: 28px;
  --r-pill: 999px;
  --sh-0: 0 0 0 1px var(--line);
  --sh-1: 0 1px 2px rgba(19,23,34,.05), 0 8px 24px rgba(19,23,34,.06);
  --sh-2: 0 2px 4px rgba(19,23,34,.06), 0 20px 48px rgba(19,23,34,.12);
  --glow-cobalt: 0 10px 30px color-mix(in srgb, var(--cobalt) 32%, transparent);
  --glow-amber: 0 0 0 6px color-mix(in srgb, var(--amber) 18%, transparent);

  /* Движение */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 200ms;
  --t-mid: 300ms;
  --t-slow: 600ms;
  --t-long: 1200ms;

  /* Сетка */
  --container: 1312px;
  --pad: 64px;
  --gap: 16px;
  --section: 96px;
}
@media (max-width: 1199px) { :root { --pad: 32px; --section: 72px; } }
@media (max-width: 767px)  { :root { --pad: 18px; --section: 56px; --r-card: 22px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fog); color: var(--slate);
  font: 400 16px/1.55 var(--f-sans); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font: inherit; color: var(--graphite); }
h1, h2, h3, h4 { color: var(--graphite); margin: 0; font-weight: 650; letter-spacing: -.02em; }
h1 { font-size: clamp(42px, 6vw, 76px); line-height: 1.0; }
h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; }
h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.15; }
p { margin: 0 0 1em; }
em.lora, .lora {
  font-family: var(--f-serif); font-style: italic; font-weight: 500; letter-spacing: -.01em;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% 100%; animation: shimmer 8s var(--ease) infinite;
  padding-right: .06em;
}
@keyframes shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.container { max-width: calc(var(--container) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: var(--section) 0; position: relative; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 13px/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt);
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: var(--glow-amber); }
.lead { font-size: 19px; line-height: 1.55; color: var(--slate); max-width: 640px; }
.muted { color: var(--ash); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }

/* ---------- Кнопки ---------- */
.btn {
  --bg: var(--cobalt); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg); font-weight: 600; font-size: 16px;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
  position: relative; overflow: hidden; isolation: isolate; white-space: nowrap;
}
.btn-primary { background: var(--grad-brand); background-size: 160% 100%; box-shadow: var(--glow-cobalt); }
.btn-primary:hover { background-position: 100% 0; box-shadow: 0 14px 36px color-mix(in srgb, var(--violet) 38%, transparent); }
.btn-primary:focus-visible { outline: 0; box-shadow: 0 0 0 4px #fff, 0 0 0 7px color-mix(in srgb, var(--cobalt) 45%, transparent); }
.btn-primary .arr { transition: transform var(--t-mid) var(--ease); }
.btn-primary:hover .arr { transform: translateX(4px); }
.btn-ghost { --bg: var(--white); --fg: var(--graphite); box-shadow: var(--sh-0); }
.btn-ghost:hover { box-shadow: 0 0 0 2px var(--graphite); }
.btn-dark { --bg: var(--graphite); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: ripple 600ms var(--ease) forwards; pointer-events: none; z-index: -1; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

.circle-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--white); box-shadow: var(--sh-0); color: var(--graphite);
  transition: transform var(--t-mid) var(--ease), background var(--t-mid) var(--ease), color var(--t-mid) var(--ease), box-shadow var(--t-mid);
}
.circle-btn svg { transition: transform var(--t-mid) var(--ease); }
.link-arrow { color: var(--cobalt); font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.link-arrow svg { transition: transform var(--t-mid) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Метки ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--white); box-shadow: var(--sh-0);
  font-size: 13px; font-weight: 500; color: var(--slate); white-space: nowrap;
}
.chip.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.chip.kv { background: var(--cobalt-tint); color: var(--cobalt-dark); box-shadow: none; }
.chip.ok { background: var(--green-tint); color: var(--green); box-shadow: none; }
.chip.ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.chip.glass { background: rgba(255,255,255,.7); backdrop-filter: blur(10px); }
/* Метка над заголовком на главной: длинный текст (правится в админке) переносится, а не обрезается */
.hero .chip.dot { max-width: 100%; height: auto; min-height: 30px; padding-top: 5px; padding-bottom: 5px; line-height: 1.35; white-space: normal; }
.hero .chip.dot::before { flex: none; }

/* ---------- Аврора-фон ---------- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora i {
  --c: var(--aurora-1);
  position: absolute; border-radius: 50%; opacity: .9; background: radial-gradient(closest-side, var(--c) 0%, color-mix(in srgb, var(--c) 45%, transparent) 45%, transparent 100%);
  animation: drift 20s ease-in-out infinite alternate; will-change: transform;
}
.aurora i:nth-child(1) { width: 720px; height: 720px; --c: var(--aurora-1); top: -220px; right: 4%; }
.aurora i:nth-child(2) { width: 600px; height: 600px; --c: var(--aurora-2); bottom: -240px; right: -160px; animation-delay: -6s; }
.aurora i:nth-child(3) { width: 560px; height: 560px; --c: var(--aurora-3); bottom: -260px; left: 16%; animation-delay: -12s; opacity: .65; }
.aurora i:nth-child(4) { width: 460px; height: 460px; --c: var(--aurora-4); top: 0; left: -180px; animation-delay: -3s; opacity: .7; }
@keyframes drift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(40px,-30px) scale(1.08); }
  100% { transform: translate(-30px,25px) scale(.95); }
}
@media (max-width: 1199px) { .aurora i { animation: none; } }
.grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
}

/* ---------- Вольтметр прокрутки (новое) ---------- */
.voltmeter { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.voltmeter b { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; background: var(--grad-brand); box-shadow: 0 0 12px color-mix(in srgb, var(--violet) 70%, transparent); }
.voltmeter span {
  position: absolute; top: 8px; right: 12px; font: 600 11px/1 var(--f-sans); letter-spacing: .04em;
  background: var(--night); color: #fff; padding: 5px 8px; border-radius: 8px; opacity: 0; transition: opacity var(--t-mid);
}
.voltmeter.on span { opacity: .9; }

/* ---------- Шапка-капсула ---------- */
.header { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; transition: transform var(--t-mid) var(--ease); }
.header .bar {
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  padding: 10px 10px 10px 14px; border-radius: 22px;
  background: rgba(255,255,255,.55); backdrop-filter: blur(14px) saturate(1.4);
  transition: transform var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
  max-width: var(--container); margin: 0 auto; transform-origin: 50% 0;
}
.header.scrolled { transform: translateY(-6px); }
.header.scrolled .bar { background: rgba(255,255,255,.94); box-shadow: var(--sh-1); transform: scale(.97); }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark { width: 44px; height: 44px; display: block; flex: none; }
.logo-mark img { width: 100%; height: 100%; display: block; border-radius: 0; filter: drop-shadow(0 4px 10px rgba(0,48,152,.18)); }
.logo b { display: block; color: var(--graphite); font-weight: 650; font-size: 15px; line-height: 1.1; }
.logo small { color: var(--ash); font-size: 11.5px; }
.nav { display: flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.75); box-shadow: var(--sh-0); position: relative; }
.nav a { position: relative; z-index: 1; padding: 9px 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--slate); transition: color var(--t-mid); }
.nav a:hover { color: var(--graphite); }
.nav a.active { color: #fff; }
.nav .pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; border-radius: var(--r-pill); background: var(--graphite); transition: left var(--t-mid) var(--ease), width var(--t-mid) var(--ease), opacity var(--t-mid); }
.h-right { display: flex; align-items: center; gap: 14px; }
.lang { display: flex; padding: 3px; border-radius: var(--r-pill); background: var(--ice); position: relative; }
.lang button { position: relative; z-index: 1; padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--ash); border-radius: var(--r-pill); transition: color var(--t-mid); }
.lang button.on { color: #fff; }
.lang .pill { position: absolute; top: 3px; bottom: 3px; border-radius: var(--r-pill); background: var(--graphite); transition: left var(--t-mid) var(--ease), width var(--t-mid) var(--ease); }
.phone { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-weight: 650; color: var(--graphite); font-size: 14px; line-height: 1.3; white-space: nowrap; }
.phone a { color: inherit; }
.burger { display: none; }
@media (max-width: 1199px) {
  .nav, .phone, .lang { display: none; }
  .burger { display: grid; }
}
@media (max-width: 767px) { .h-right .btn { display: none; } .logo small { display: none; } }

/* Мобильное меню */
.mmenu { position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--night) 40%, transparent); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity var(--t-mid); }
.mmenu.open { opacity: 1; pointer-events: auto; }
.mmenu .sheet { position: absolute; top: 12px; left: 12px; right: 12px; background: #fff; border-radius: 26px; padding: 18px; transform: translateY(-16px) scale(.98); transition: transform var(--t-mid) var(--ease); }
.mmenu.open .sheet { transform: none; }
.mmenu nav a { display: flex; justify-content: space-between; padding: 14px 6px; font-size: 22px; font-weight: 600; color: var(--graphite); border-bottom: 1px solid var(--line); }

/* Нижняя панель на телефоне */
.mbar { display: none; }
@media (max-width: 767px) {
  .mbar { display: flex; gap: 8px; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 55; padding: 8px; border-radius: 24px; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); box-shadow: var(--sh-2); }
  .mbar .btn { flex: 1; height: 50px; }
  body { padding-bottom: 80px; }
}

/* ---------- Первый экран ---------- */
.hero { position: relative; padding: 150px 0 40px; overflow: hidden; }
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero h1 .ln { display: block; }
.hero .lead { margin: 22px 0 30px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.facts { display: flex; gap: 44px; margin-top: 40px; flex-wrap: wrap; }
.facts b { display: block; font-size: 22px; color: var(--graphite); font-weight: 650; }
.facts small { color: var(--ash); font-size: 13px; }
.hero-visual { position: relative; height: 460px; }
.glass-card {
  position: absolute; border-radius: var(--r-card); background: rgba(255,255,255,.62); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--sh-2), inset 0 0 0 1px rgba(255,255,255,.7);
}
.hv-main { inset: 0 40px 40px 0; overflow: hidden; display: grid; place-items: center; }
.hv-main img { width: 78%; height: 78%; object-fit: contain; mix-blend-mode: multiply; filter: saturate(1.05); transition: transform 1.2s var(--ease); }
.hv-main:hover img { transform: scale(1.04); }
.hv-main .chip { position: absolute; top: 18px; left: 18px; }
.hv-kv { top: 30px; right: 0; padding: 16px 20px; }
.hv-kv b { display: block; font-size: 30px; font-weight: 700; color: var(--graphite); letter-spacing: -.02em; }
.hv-kv small { color: var(--ash); font-size: 12px; }
.hv-ok { left: -24px; bottom: 10px; padding: 12px 16px 12px 12px; display: flex; gap: 12px; align-items: center; }
.hv-ok i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--green-tint); color: var(--green); }
.hv-ok b { display: block; font-size: 14px; color: var(--graphite); }
.hv-ok small { color: var(--ash); font-size: 12px; }
.float-y { animation: floaty 6s ease-in-out infinite; }
.float-y.d2 { animation-delay: -3s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Линия напряжения */
.vline { position: relative; height: 120px; margin-top: 10px; }
.vline svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vline .wire { fill: none; stroke: url(#wireGrad); stroke-width: 2.5; stroke-linecap: round; }
.vline .wire-bg { fill: none; stroke: var(--line); stroke-width: 2; }
.vline .node { fill: #fff; stroke: var(--cobalt); stroke-width: 2.5; }
.vline .node.amber { fill: var(--amber); stroke: #fff; stroke-width: 3; }
.vline .halo { fill: var(--amber); opacity: .25; transform-box: fill-box; transform-origin: center; animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); opacity: .28; } 50% { transform: scale(1.9); opacity: 0; } }
.vline .spark { fill: #fff; filter: drop-shadow(0 0 6px var(--amber)) drop-shadow(0 0 2px var(--amber)); }

/* Лента партнёров */
.marquee-wrap { display: flex; align-items: center; gap: 32px; padding: 18px 0 8px; }
.marquee-wrap > small { flex: none; width: 210px; color: var(--ash); font-size: 13px; line-height: 1.4; }
.marquee { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee .track { display: flex; gap: 14px; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee .logo-tile { height: 58px; width: 150px; border-radius: 16px; background: #fff; box-shadow: var(--sh-0); display: grid; place-items: center; padding: 8px 14px; filter: grayscale(1); opacity: .75; transition: filter var(--t-mid), opacity var(--t-mid), transform var(--t-mid) var(--ease); }
.marquee .logo-tile:hover { filter: none; opacity: 1; transform: translateY(-3px); }
.marquee .logo-tile img { max-height: 40px; object-fit: contain; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 767px) { .marquee-wrap > small { display: none; } }

/* ---------- Цифры ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.stat { background: #fff; border-radius: var(--r-num); padding: 26px 24px 22px; box-shadow: var(--sh-1); position: relative; overflow: hidden; }
.stat b { font-size: 46px; font-weight: 700; color: var(--graphite); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat b sup { font-size: 18px; font-weight: 600; color: var(--ash); margin-left: 4px; vertical-align: 18px; }
.stat p { color: var(--ash); font-size: 14px; margin: 4px 0 18px; }
.stat .bar { height: 4px; border-radius: 4px; background: var(--ice); overflow: hidden; }
.stat .bar i { display: block; height: 100%; width: 100%; border-radius: 4px; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-long) var(--ease); }
.stat:nth-child(4n+1) .bar i { background: var(--grad-brand); }
.stat:nth-child(4n+2) .bar i { background: var(--grad-spark); }
.stat:nth-child(4n+3) .bar i { background: var(--grad-teal); }
.stat:nth-child(4n+4) .bar i { background: linear-gradient(90deg, var(--violet), var(--coral)); }
@media (max-width: 1199px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Bento-каталог ---------- */
.bento { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: 250px 250px; gap: var(--gap); }
.bento .cat:first-child { grid-row: span 2; }
.cat {
  --tone: var(--cobalt); --tint: var(--cobalt-tint);
  position: relative; border-radius: var(--r-card); background: #fff; padding: 24px; overflow: hidden;
  box-shadow: var(--sh-1); display: flex; flex-direction: column;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
  transform-style: preserve-3d; will-change: transform;
}
.cat.violet { --tone: var(--violet); --tint: var(--violet-tint); }
.cat.teal { --tone: var(--teal); --tint: var(--teal-tint); }
.cat.amber { --tone: var(--amber-strong); --tint: var(--amber-tint); }
.cat::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 100%, var(--tint) 0%, transparent 60%); z-index: 0; }
.cat::after { /* подсветка за курсором */
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity var(--t-mid);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--tone) 16%, transparent), transparent 70%);
}
.cat:hover::after { opacity: 1; }
.cat > * { position: relative; z-index: 1; }
.cat h3 { max-width: 75%; }
.cat .sub { color: var(--ash); font-size: 14px; margin-top: 8px; max-width: 70%; }
.cat .circle-btn { position: absolute; top: 20px; right: 20px; }
.cat .chip { margin-top: auto; align-self: flex-start; }
.cat .chip.count { background: var(--tint); color: var(--tone); box-shadow: none; font-weight: 600; }
.cat .pic { position: absolute; right: 10px; bottom: 10px; width: 46%; height: 62%; z-index: 0; transition: transform var(--t-mid) var(--ease); }
.cat .pic img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cat:first-child .pic { width: 74%; height: 54%; right: 50%; transform: translateX(50%); bottom: 64px; }
.cat:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.cat:hover .pic { transform: scale(1.04); }
.cat:first-child:hover .pic { transform: translateX(50%) scale(1.04); }
.cat:hover .circle-btn { background: var(--tone); color: #fff; box-shadow: none; }
.cat:hover .circle-btn svg { transform: rotate(45deg); }
.cat.cta { background: var(--grad-brand); color: #fff; }
.cat.cta::before { background: radial-gradient(80% 80% at 90% 110%, rgba(255,255,255,.25), transparent 60%); }
.cat.cta h3, .cat.cta .sub { color: #fff; }
.cat.cta .sub { opacity: .85; max-width: 100%; }
.cat.cta .rings { position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; z-index: 0; }
.cat.cta .rings i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); animation: ring 3.6s var(--ease) infinite; }
.cat.cta .rings i:nth-child(2) { animation-delay: -1.2s; }
.cat.cta .rings i:nth-child(3) { animation-delay: -2.4s; }
@keyframes ring { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
.cat.cta .btn { margin-top: auto; align-self: flex-start; --bg: rgba(255,255,255,.18); backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
@media (max-width: 1199px) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .bento .cat { min-height: 250px; }
  .bento .cat:first-child { grid-row: auto; grid-column: span 2; min-height: 320px; }
}
@media (max-width: 767px) {
  .bento { grid-template-columns: 1fr; }
  .bento .cat:first-child { grid-column: auto; }
  .bento .cat.hide-m { display: none; }
}

/* ---------- Услуги: аккордеон ---------- */
.svc-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.svc-photo { margin-top: 28px; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4/3; position: relative; box-shadow: var(--sh-1); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--t-slow) var(--ease), transform 4s var(--ease); }
.svc-photo:hover img { transform: scale(1.05); }
.svc-photo .chip { position: absolute; left: 14px; bottom: 14px; }
.acc { background: #fff; border-radius: var(--r-card); padding: 10px 26px; box-shadow: var(--sh-1); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item:last-child { border-bottom: 0; }
.acc-head { width: 100%; display: flex; align-items: center; gap: 18px; padding: 20px 0; text-align: left; }
.acc-head .n { font-weight: 600; color: var(--ash); font-size: 14px; width: 26px; transition: color var(--t-mid); }
.acc-head h4 { flex: 1; font-size: 17px; font-weight: 600; line-height: 1.3; }
.acc-head .pm { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ice); color: var(--graphite); transition: transform var(--t-mid) var(--ease), background var(--t-mid), color var(--t-mid); }
.acc-item.open .n { color: var(--cobalt); }
.acc-item.open .pm { transform: rotate(45deg); background: var(--cobalt); color: #fff; }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-mid) var(--ease); }
.acc-body > div { overflow: hidden; }
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-body .inner { padding: 0 0 22px 44px; opacity: 0; transform: translateY(-4px); transition: opacity var(--t-mid) var(--ease) 100ms, transform var(--t-mid) var(--ease) 100ms; }
.acc-item.open .acc-body .inner { opacity: 1; transform: none; }
.acc-body p { color: var(--slate); font-size: 15px; margin-bottom: 14px; }
.acc-body .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 1199px) { .svc-wrap { grid-template-columns: 1fr; } .svc-photo { display: none; } }

/* ---------- Этапы ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 10px; }
.steps .track { position: absolute; top: 31px; left: 24px; right: 24px; height: 3px; background: var(--line); border-radius: 3px; }
.steps .track i { display: block; height: 100%; width: 100%; background: var(--grad-brand); border-radius: 3px; box-shadow: 0 0 10px color-mix(in srgb, var(--violet) 50%, transparent); transform: scaleX(var(--fill, 0)); transform-origin: 0 50%; will-change: transform; }
.step { position: relative; z-index: 1; }
.step .dot {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: #fff; color: var(--ash); box-shadow: 0 0 0 2px var(--line); margin-bottom: 18px;
  transition: background var(--t-mid) var(--ease), color var(--t-mid), box-shadow var(--t-mid), transform var(--t-mid) var(--ease);
}
.step.lit .dot { background: var(--cobalt); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--cobalt) 15%, transparent), var(--glow-cobalt); transform: scale(1.06); }
.step h4 { font-size: 17px; margin-bottom: 6px; }
.step p { font-size: 14px; color: var(--ash); }
@media (max-width: 767px) {
  .steps { grid-template-columns: 1fr; gap: 6px; padding-left: 64px; }
  .steps .track { top: 24px; bottom: 24px; left: 22px; right: auto; width: 3px; height: auto; }
  .steps .track i { transform: scaleY(var(--fill, 0)); transform-origin: 50% 0; }
  .step .dot { position: absolute; left: -64px; top: 0; }
  .step { min-height: 90px; }
}

/* ---------- Проекты: карусель ---------- */
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--gap)) / 3.4); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 20px; cursor: grab; }
.carousel::-webkit-scrollbar { display: none; }
.carousel.drag { cursor: grabbing; scroll-snap-type: none; }
.proj { scroll-snap-align: start; background: #fff; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-1); transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid); }
.proj:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.proj .ph { aspect-ratio: 4/3; overflow: hidden; position: relative; background: var(--ice); }
.proj .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.proj:hover .ph img { transform: scale(1.06); }
.proj .ph .chip { position: absolute; top: 12px; left: 12px; }
.proj .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--night) 35%, transparent)); opacity: 0; transition: opacity var(--t-mid); }
.proj:hover .ph::after { opacity: 1; }
.proj .tx { padding: 18px 20px 22px; }
.proj h4 { font-size: 17px; margin-bottom: 6px; }
.proj p { font-size: 14px; color: var(--ash); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.car-nav { display: flex; gap: 8px; }
.car-nav button:hover { background: var(--cobalt); color: #fff; box-shadow: none; }
@media (max-width: 1199px) { .carousel { grid-auto-columns: 46%; } }
@media (max-width: 767px)  { .carousel { grid-auto-columns: 84%; } }

/* ---------- Заявка (Ночь) ---------- */
.night {
  position: relative; overflow: hidden; border-radius: 36px; background: var(--night); color: var(--on-night-text); padding: 64px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.night .aurora i { opacity: .55; }
.night .aurora i:nth-child(1) { --c: var(--night-aurora-1); }
.night .aurora i:nth-child(2) { --c: var(--night-aurora-2); }
.night .aurora i:nth-child(3) { --c: var(--night-aurora-3); opacity: .35; }
.night > * { position: relative; z-index: 1; }
.night h2 { color: #fff; }
.night .eyebrow { color: var(--on-night-accent); }
.night .lora { background: linear-gradient(120deg, var(--on-night-accent), var(--on-night-accent-2), var(--on-night-accent-3)); -webkit-background-clip: text; background-clip: text; }
.form { display: grid; gap: 12px; }
.field { position: relative; }
.field input, .field textarea, .field select {
  width: 100%; height: 54px; border-radius: var(--r-field); border: 1.5px solid var(--line); background: #fff; padding: 0 16px; outline: 0;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { height: 96px; padding: 14px 16px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--cobalt); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cobalt) 14%, transparent); }
.field.err input { border-color: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 12%, transparent); animation: shake 300ms; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.field .hint { font-size: 12px; color: var(--red); margin-top: 4px; display: none; }
.field.err .hint { display: block; }
.night .field input, .night .field textarea { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }
.night .field input::placeholder, .night .field textarea::placeholder { color: var(--on-night-muted); }
.night small.note { color: var(--on-night-muted); font-size: 12px; text-align: center; }
@media (max-width: 1199px) { .night { grid-template-columns: 1fr; padding: 40px 28px; } }

/* Успех формы */
.success { text-align: center; padding: 20px 0; }
.success svg { width: 76px; height: 76px; margin: 0 auto 14px; }
.success circle { fill: none; stroke: var(--green); stroke-width: 3; stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw 600ms var(--ease) forwards; }
.success path { fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 400ms var(--ease) 450ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.success h3 { margin-bottom: 6px; }

/* ---------- Подвал ---------- */
.footer { padding: 72px 0 40px; position: relative; overflow: hidden; }
.f-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.footer h5 { margin: 0 0 14px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
.footer a { display: block; padding: 4px 0; color: var(--slate); font-size: 14px; transition: color var(--t-fast); }
.footer a:hover { color: var(--cobalt); }
.footer .big-phone { font-size: 24px; font-weight: 700; color: var(--graphite); margin-top: 18px; }
.footer .word { font-size: clamp(90px, 18vw, 260px); font-weight: 800; letter-spacing: -.06em; line-height: .8; margin-top: 40px; background: linear-gradient(180deg, var(--line-strong), transparent); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.footer .legal { display: flex; justify-content: space-between; font-size: 12px; color: var(--ash); border-top: 1px solid var(--line); padding-top: 18px; margin-top: -20px; position: relative; }
@media (max-width: 1199px) { .f-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Внутренние страницы ---------- */
.page-head { padding: 140px 0 32px; position: relative; overflow: hidden; }
.page-head .container { position: relative; z-index: 1; }
.crumbs { font-size: 13px; color: var(--ash); margin-bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--cobalt); }
.crumbs span:last-child { color: var(--graphite); }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 28px 0 30px; position: relative; }
.tab { height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--sh-0); font-size: 14px; font-weight: 500; display: inline-flex; gap: 8px; align-items: center; transition: background var(--t-mid) var(--ease), color var(--t-mid), box-shadow var(--t-mid); }
.tab small { color: var(--ash); font-size: 12px; }
.tab.on { background: var(--graphite); color: #fff; box-shadow: none; }
.tab.on small { color: var(--muted-2); }

.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.pcard { background: #fff; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-1); display: flex; flex-direction: column; transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid), opacity var(--t-mid); }
.pcard .ph { aspect-ratio: 4/3; background: linear-gradient(180deg, var(--surface-2), var(--ice)); position: relative; overflow: hidden; display: grid; place-items: center; }
.pcard .ph img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--t-slow) var(--ease); }
.pcard .ph .chip { position: absolute; top: 14px; left: 14px; }
.pcard .tx { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.pcard h4 { font-size: 17px; margin-bottom: 6px; }
.pcard p { font-size: 14px; color: var(--ash); margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .ft { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pcard .ft .chips { display: flex; gap: 6px; }
.pcard:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.pcard:hover .ph img { transform: scale(1.04); }
.pcard:hover .circle-btn { background: var(--cobalt); color: #fff; box-shadow: none; }
.pcard:hover .circle-btn svg { transform: rotate(45deg); }
.pcard.out { opacity: 0; transform: scale(.96); }
@media (max-width: 1199px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .pgrid { grid-template-columns: 1fr; } }

/* Товар */
.product { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; }
.gallery .main { aspect-ratio: 1/1; border-radius: var(--r-card); background: radial-gradient(70% 60% at 70% 20%, var(--violet-tint), transparent), linear-gradient(180deg, #fff, var(--surface-2)); box-shadow: var(--sh-1); display: grid; place-items: center; overflow: hidden; cursor: zoom-in; position: relative; }
.gallery .main img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.gallery .main img.swap { opacity: 0; transform: scale(.97); }
.gallery .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.gallery .thumbs button { aspect-ratio: 4/3; border-radius: 14px; background: #fff; box-shadow: var(--sh-0); overflow: hidden; display: grid; place-items: center; transition: box-shadow var(--t-fast), transform var(--t-fast); }
.gallery .thumbs button img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.gallery .thumbs button.on { box-shadow: 0 0 0 2px var(--cobalt); }
.gallery .thumbs button:hover { transform: translateY(-2px); }
.keychars { background: #fff; border-radius: 20px; box-shadow: var(--sh-1); padding: 6px 20px; margin: 24px 0; }
.keychars div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.keychars div:last-child { border-bottom: 0; }
.keychars span { color: var(--ash); }
.keychars b { color: var(--graphite); font-weight: 600; text-align: right; }
.doc { display: flex; align-items: center; gap: 14px; background: var(--cobalt-tint); border-radius: 16px; padding: 14px 16px; margin-top: 16px; }
.doc i { width: 38px; height: 38px; border-radius: 10px; background: #fff; display: grid; place-items: center; font: 700 11px var(--f-sans); color: var(--red); font-style: normal; }
.doc b { display: block; color: var(--graphite); font-size: 14px; }
.doc small { color: var(--cobalt); font-size: 12px; }
.ptabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin: 56px 0 24px; position: relative; }
.ptabs button { padding: 12px 0; font-weight: 500; color: var(--ash); transition: color var(--t-fast); }
.ptabs button.on { color: var(--graphite); }
.ptabs .ul { position: absolute; bottom: -1px; height: 2px; background: var(--cobalt); transition: left var(--t-mid) var(--ease), width var(--t-mid) var(--ease); }
.ptab-body { max-width: 860px; animation: fadeUp var(--t-mid) var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ctable { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--sh-1); }
.ctable td { padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.ctable td:first-child { color: var(--ash); width: 45%; }
.ctable td:last-child { color: var(--graphite); font-weight: 500; }
.example-note { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--amber-ink); background: var(--amber-tint); padding: 4px 10px; border-radius: 8px; margin-bottom: 10px; }
@media (max-width: 1199px) { .product { grid-template-columns: 1fr; } }

/* Лайтбокс и модальное окно */
.overlay { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, var(--night) 55%, transparent); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity var(--t-mid) var(--ease); }
.overlay.open { opacity: 1; pointer-events: auto; }
.modal { width: min(520px, 100%); background: #fff; border-radius: 28px; padding: 32px; box-shadow: var(--sh-2); transform: translateY(24px) scale(.98); transition: transform var(--t-mid) var(--ease); position: relative; max-height: calc(100vh - 40px); overflow: auto; }
.overlay.open .modal { transform: none; }
.modal .x { position: absolute; top: 18px; right: 18px; }
.modal h3 { margin-bottom: 6px; font-size: 26px; }
.modal .prod-pill { display: flex; gap: 10px; align-items: center; background: var(--ice); border-radius: 14px; padding: 10px; margin: 16px 0; }
.modal .prod-pill img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 10px; mix-blend-mode: multiply; }
.lightbox img { max-width: min(1000px, 92vw); max-height: 86vh; border-radius: 20px; background: #fff; transform: scale(.94); transition: transform var(--t-mid) var(--ease); }
.overlay.open.lightbox img { transform: none; }

/* Услуги / О компании / Контакты */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.svc-card { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; color: #fff; box-shadow: var(--sh-1); isolation: isolate; transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid); }
.svc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.svc-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--night) 5%, transparent) 20%, color-mix(in srgb, var(--night) 86%, transparent)); }
.svc-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-brand); opacity: 0; mix-blend-mode: multiply; transition: opacity var(--t-mid); }
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.svc-card:hover img { transform: scale(1.06); }
.svc-card:hover::after { opacity: .35; }
.svc-card .n { position: absolute; top: 22px; left: 26px; font-weight: 700; font-size: 14px; opacity: .8; }
.svc-card .chip { position: absolute; top: 18px; right: 18px; }
.svc-card h3 { color: #fff; font-size: 21px; max-width: 90%; }
.svc-card .more { margin-top: 12px; display: inline-flex; gap: 8px; font-weight: 600; font-size: 14px; opacity: .9; }
@media (max-width: 767px) { .svc-grid { grid-template-columns: 1fr; } }
.prose { max-width: 820px; }
.prose p { font-size: 17px; line-height: 1.7; color: var(--slate); }
/* «О компании»: текст выровнен по ширине, как в документе заказчика (на телефонах — по левому краю: в узкой колонке, особенно на KZ, иначе большие пробелы) */
@media (min-width: 768px) { .page-template-page-o-kompanii .prose p { text-align: justify; hyphens: auto; } }
.checklist { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checklist li { background: #fff; border-radius: 14px; padding: 14px 16px 14px 46px; position: relative; box-shadow: var(--sh-0); font-size: 15px; }
.checklist li::before { content: ""; position: absolute; left: 16px; top: 16px; width: 18px; height: 18px; border-radius: 50%; background: var(--teal-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230FB5A5' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; }
@media (max-width: 767px) { .checklist { grid-template-columns: 1fr; } }
.side-cta { position: sticky; top: 110px; background: #fff; border-radius: var(--r-card); padding: 26px; box-shadow: var(--sh-1); }
.two-col { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; }
@media (max-width: 1199px) { .two-col { grid-template-columns: 1fr; } .side-cta { position: static; } }
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin: 40px 0; }
.timeline > div { background: #fff; border-radius: 20px; padding: 22px; box-shadow: var(--sh-1); border-top: 4px solid var(--c, var(--cobalt)); }
.timeline b { font-size: 28px; color: var(--graphite); display: block; }
.partners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.partner { background: #fff; border-radius: 22px; padding: 22px; box-shadow: var(--sh-1); transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid); }
.partner:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.partner .lg { height: 64px; display: flex; align-items: center; margin-bottom: 14px; }
.partner .lg img { max-height: 56px; max-width: 160px; object-fit: contain; }
.partner p { font-size: 14px; color: var(--ash); margin: 6px 0 0; }
@media (max-width: 1199px) { .partners-grid, .timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px)  { .partners-grid, .timeline { grid-template-columns: 1fr; } }
.contacts { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--gap); }
.c-card { background: #fff; border-radius: var(--r-card); padding: 30px; box-shadow: var(--sh-1); }
.c-card .row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.c-card .row:last-child { border: 0; }
.c-card .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cobalt-tint); color: var(--cobalt); flex: none; }
.c-card small { color: var(--ash); display: block; font-size: 12px; }
.c-card b { color: var(--graphite); font-weight: 600; }
.map { border-radius: var(--r-card); min-height: 420px; position: relative; overflow: hidden; background:
  linear-gradient(115deg, transparent 48%, #fff 48.5%, #fff 50%, transparent 50.5%),
  linear-gradient(25deg, transparent 60%, #fff 60.4%, #fff 61.6%, transparent 62%),
  linear-gradient(160deg, transparent 30%, #fff 30.4%, #fff 31.2%, transparent 31.6%),
  linear-gradient(180deg, var(--surface-3), var(--surface-4)); box-shadow: var(--sh-1); }
.map .pin { position: absolute; left: 52%; top: 46%; transform: translate(-50%, -100%); }
.map .pin b { display: block; background: var(--graphite); color: #fff; font-size: 13px; padding: 8px 12px; border-radius: 12px; white-space: nowrap; }
.map .pin i { position: absolute; left: 50%; bottom: -22px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--amber); border: 3px solid #fff; }
.map .pin i::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: var(--amber); opacity: .3; animation: breathe 3s ease-in-out infinite; }
.map .label { position: absolute; left: 14px; bottom: 14px; }
@media (max-width: 1199px) { .contacts { grid-template-columns: 1fr; } }

/* ---------- Появление при прокрутке ---------- */
.rv { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.rv.in { opacity: 1; transform: none; }
.hero .rv { transition-duration: 700ms; transition-delay: calc(var(--i, 0) * 80ms); }

/* Переход между страницами */
#app { animation: pageIn 450ms var(--ease); }
#app.leaving { animation: pageOut 180ms var(--ease) forwards; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pageOut { to { opacity: 0; transform: translateY(-6px); } }

/* Искры при клике (новое) */
.spark-p { position: fixed; z-index: 100; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: spark 600ms var(--ease) forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* Режим «без движения» (prefers-reduced-motion и переключатель прототипа) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}
.no-motion *, .no-motion *::before, .no-motion *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
.no-motion .rv { opacity: 1; transform: none; }

/* ---------- Правки адаптива (после проверки) ---------- */
@media (max-width: 1199px) {
  .hero { padding-top: 130px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { height: 400px; max-width: 640px; }
  .hv-ok { left: 0; }
}
@media (max-width: 767px) {
  .hero-visual { height: 320px; }
  .hv-main { inset: 0 0 50px 0; }
  .hv-kv { top: auto; bottom: 0; right: 0; padding: 12px 16px; }
  .hv-kv b { font-size: 22px; }
  .hv-ok { display: none; }
  .facts { gap: 24px; }
  .hero-cta .btn { width: 100%; }
  .night { border-radius: 26px; }
  .sec-head { margin-bottom: 28px; }
}
.gal-edit .g { overflow: hidden; }
.gal-edit .g img { width: auto; height: auto; max-width: 76px; max-height: 58px; }
@media (max-width: 767px) {
  .bento .cat { min-height: 230px; }
  .bento .cat:first-child { min-height: 380px; }
  .cat .pic { width: 42%; height: 48%; }
  .cat:first-child .pic { width: 70%; height: 46%; bottom: 52px; }
  .cat .sub { max-width: 60%; }
  .cat:first-child .sub { max-width: 90%; }
  .f-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   v4+.1 · АДАПТИВ И ПЛАВНОСТЬ (доработка после утверждения макета)
   Диапазоны: 320–374 · 375–767 · 768–1199 · 1200–1599 · 1600–2199 · 2200+
   Принцип: размеры текста и отступов меняются плавно (clamp), а не скачками;
   анимируются только transform и opacity.
   ========================================================================= */
:root {
  --pad: clamp(16px, 4.4vw, 64px);
  --section: clamp(52px, 7.5vw, 96px);
  --gap: clamp(12px, 1.2vw, 16px);
}
h1 { font-size: clamp(34px, 5.6vw + 4px, 76px); }
h2 { font-size: clamp(28px, 3.6vw + 6px, 52px); }
.lead { font-size: clamp(16px, .45vw + 13px, 19px); }
html, body { max-width: 100%; }
img, svg, video { max-width: 100%; }
.container > *, .hero-grid > *, .svc-wrap > *, .two-col > *, .product > *, .contacts > *, .night > * { min-width: 0; }
.stats, .bento, .pgrid, .svc-grid, .partners-grid, .timeline, .contacts { grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.c-card b, .footer p, .partner p, .prose p, .acc-head h4, .pcard h4, .proj h4 { overflow-wrap: anywhere; hyphens: auto; }

/* --- Шапка: 1200–1380 px — телефон прячем, чтобы кнопка не обрезалась --- */
@media (min-width: 1200px) and (max-width: 1380px) {
  .phone { display: none; }
  .nav a { padding: 9px 13px; }
}

/* --- Сетки через переменную колонок --- */
.stats { --cols: 4; } .pgrid { --cols: 3; } .svc-grid { --cols: 2; } .partners-grid, .timeline { --cols: 3; }
.bento { grid-template-columns: 1.15fr 1fr 1fr; }
.contacts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
@media (max-width: 1199px) {
  .stats { --cols: 2; } .pgrid { --cols: 2; } .partners-grid, .timeline { --cols: 2; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contacts { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { margin-inline: auto; width: 100%; }
}
@media (max-width: 767px) {
  .pgrid, .svc-grid, .partners-grid, .timeline { --cols: 1; }
  .bento { grid-template-columns: minmax(0, 1fr); }
}

/* --- Телефоны --- */
@media (max-width: 767px) {
  .header { top: 10px; }
  .header .bar { padding: 8px 8px 8px 10px; border-radius: 20px; }
  .hero { padding-top: 104px; }
  .page-head { padding-top: 104px; }
  .stat { padding: 20px 18px 18px; }
  .stat b { font-size: clamp(30px, 9vw, 40px); }
  .stat b sup { font-size: 14px; vertical-align: 14px; }
  .acc { padding: 4px 16px; }
  .acc-head { gap: 12px; padding: 16px 0; }
  .acc-head .n { width: 20px; font-size: 13px; }
  .acc-head h4 { font-size: 15px; }
  .acc-head .pm { width: 30px; height: 30px; }
  .acc-body .inner { padding-left: 32px; }
  .night { padding: 32px 20px; gap: 24px; }
  .modal { padding: 24px 18px; border-radius: 24px; }
  .ptabs { gap: 20px; overflow-x: auto; scrollbar-width: none; margin-top: 40px; }
  .ptabs::-webkit-scrollbar { display: none; }
  .ptabs button { white-space: nowrap; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; }
  .checklist { grid-template-columns: minmax(0, 1fr); }
  .svc-card { min-height: 240px; padding: 20px; }
  .svc-card h3 { font-size: 18px; }
  .footer .legal { flex-direction: column; gap: 6px; margin-top: 0; }
  .marquee .logo-tile { width: 120px; height: 50px; }
  .glass-card { backdrop-filter: none; background: rgba(255,255,255,.9); }
  .facts b { font-size: 19px; }
}
/* --- Маленькие телефоны 320–374 px --- */
@media (max-width: 374px) {
  .logo { gap: 9px; }
  .logo-mark { width: 38px; height: 38px; }
  .logo b { font-size: 13px; }
  .header .bar { gap: 8px; }
  .burger { width: 40px; height: 40px; }
  .stats { --cols: 1; }
  .facts { gap: 18px; }
  .facts > div { flex: 1 1 40%; }
  .chip { font-size: 12px; padding: 0 10px; }
  .btn { padding: 0 20px; font-size: 15px; }
  .mbar .btn { font-size: 14px; }
  .keychars div { flex-direction: column; gap: 2px; }
  .keychars b { text-align: left; }
  .hero-visual { height: 280px; }
  .bento .cat:first-child { min-height: 340px; }
}
/* --- Телефон горизонтально (низкий экран) --- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero, .page-head { padding-top: 92px; }
  .hero-visual { height: 260px; }
  .mbar { left: auto; right: 10px; bottom: 10px; width: 300px; padding: 6px; }
  .mbar .btn { height: 42px; }
  body { padding-bottom: 64px; }
  .mmenu .sheet { max-height: calc(100vh - 24px); overflow: auto; }
  .modal { max-height: calc(100vh - 20px); }
}

/* --- Большие экраны: пропорциональное масштабирование всего интерфейса --- */
@media (min-width: 1600px) { :root { --ui: 1.08; } }
@media (min-width: 1800px) { :root { --ui: 1.16; } }
@media (min-width: 2100px) { :root { --ui: 1.3; } }
@media (min-width: 2400px) { :root { --ui: 1.45; } }
@media (min-width: 1600px) {
  body { zoom: var(--ui); }
}

/* --- Плавность: дорогие эффекты только там, где тянет --- */
@media (hover: none), (max-width: 1199px) {
  em.lora, .lora { animation: none; }
  .float-y { animation-duration: 8s; }
}
@media (max-width: 1199px) { .aurora i { animation: none; } }
.rv.in { will-change: auto; }
.hero-visual .glass-card, .cat, .pcard, .proj, .svc-card { backface-visibility: hidden; }

/* Длинные кнопки на узких экранах переносят текст, а не обрезаются */
@media (max-width: 640px) {
  .btn-block, #addBlock, #resetAll { white-space: normal; height: auto; min-height: 44px; padding-block: 10px; line-height: 1.25; text-align: center; max-width: 100%; }
}
@media (max-width: 420px) {
  [data-mini-scroll] .nav a:nth-of-type(2) { display: none; }
}
/* Аврора первого экрана и шапок страниц плавно растворяется книзу — без резкой границы */
.hero > .aurora, .hero > .grid-bg, .page-head > .aurora { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); }
.hero, .page-head { overflow: clip; overflow-clip-margin: 0; }
/* Перелив курсива: один проход при появлении заголовка + повтор при наведении (вместо бесконечного цикла) */
em.lora, .lora { animation: none; background-position: 0% 50%; }
.in em.lora, .in .lora, em.lora.in { animation: shimmer-once 2.4s var(--ease) .3s 1 both; }
@media (hover: hover) and (pointer: fine) { :is(h1, h2, div):hover > em.lora, h1:hover em.lora, h2:hover em.lora { animation: shimmer-once 1.6s var(--ease) 1 both; } }
@keyframes shimmer-once { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
/* Бегущий ток по линии напряжения: 3 искры = штрихи по контуру (pathLength 1000 → период 333) */
.vline .current { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: .1 333.23; opacity: 0; transition: opacity 600ms var(--ease); }
.vline .current.glow { stroke: var(--amber); stroke-width: 11; opacity: 0; }
.vline.live .current { opacity: 1; animation: current 4.2s linear infinite; }
.vline.live .current.glow { opacity: .35; }
.vline.paused .current { animation-play-state: paused; }
@keyframes current { to { stroke-dashoffset: -333.33; } }
/* Длинные заголовки в карточках с фото не упираются в край */
.svc-card h1, .svc-card h3 { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 480px) { .svc-card h1 { font-size: clamp(22px, 6.6vw, 28px) !important; max-width: 100% !important; } }
/* Заголовки шапок страниц: длинные слова (КазСпецЭнергоМонтаж) переносятся по слогам */
.sec-head > div, .sec-head > * { min-width: 0; }
h1, h2 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 480px) { .page-head h1 { font-size: clamp(26px, 8.2vw, 40px) !important; } }
/* «О компании»: «КазСпецЭнергоМонтаж» в заголовке — одно длинное слово; на телефонах шрифт подбирается по ширине экрана, чтобы слово не разрывалось */
@media (max-width: 520px) { .page-template-page-o-kompanii .page-head h1 { font-size: calc((100vw - 40px) / 12.2) !important; } }
.page-template-page-o-kompanii .page-head h1 em { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; white-space: nowrap; }
/* =========================================================================
   WordPress: шрифты темы, служебные классы, форма, cookie-баннер
   ========================================================================= */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/lora-500i-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Lora';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/lora-500i-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;z-index:300;top:8px;left:8px;background:#fff;padding:10px 14px;border-radius:10px;box-shadow:var(--sh-2)}
:focus-visible{outline:3px solid color-mix(in srgb, var(--cobalt) 55%, transparent);outline-offset:2px}
.admin-bar .header{top:calc(16px + 32px)} .admin-bar .header.scrolled{top:calc(10px + 32px)}
@media (max-width:782px){.admin-bar .header{top:calc(10px + 46px)}}
.admin-bar .voltmeter{top:32px} @media (max-width:782px){.admin-bar .voltmeter{top:46px}}
.nav a[aria-current] { color:#fff; }
.logo img{width:100%;height:100%;object-fit:contain}

/* Тексты из редактора */
.prose h2{font-size:clamp(24px,2.4vw,32px);margin:1.6em 0 .6em}
.prose h3{font-size:clamp(19px,1.8vw,22px);margin:1.4em 0 .5em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em;font-size:17px;line-height:1.7}
.prose li{margin:.3em 0}
.prose a{color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
.prose img{border-radius:16px;height:auto}
.prose table{width:100%;border-collapse:collapse;margin:1em 0}
.prose td,.prose th{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left}

/* Форма: согласие, файл, сообщения */
.form .consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.4;color:var(--ash);cursor:pointer}
.form .consent input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--cobalt)}
.night .form .consent{color:var(--on-night-muted)}
.form .consent.err{color:var(--red)}
.form .file{position:relative;display:flex;align-items:center;gap:10px;min-height:54px;border:1.5px dashed var(--line);border-radius:var(--r-field);padding:10px 14px;font-size:14px;color:var(--ash);cursor:pointer;background:#fff;transition:border-color var(--t-fast)}
.form .file:hover{border-color:var(--cobalt)}
.form .file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.form .file b{color:var(--graphite);font-weight:600;overflow-wrap:anywhere}
.night .form .file{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:var(--on-night-muted)}.night .form .file b{color:#fff}
.form .file.err{border-color:var(--red)}
.form .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .form-msg{font-size:14px;color:var(--red);min-height:0}
.form .form-msg:empty{display:none}
.form button[disabled]{opacity:.7;cursor:progress}

/* Cookie-баннер */
.cookie{position:fixed;left:16px;bottom:16px;z-index:80;max-width:520px;display:flex;gap:14px;align-items:center;background:color-mix(in srgb, var(--night) 94%, transparent);color:var(--on-night-text);font-size:13.5px;line-height:1.45;padding:14px 14px 14px 18px;border-radius:18px;box-shadow:0 16px 40px color-mix(in srgb, var(--night) 30%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translateY(20px);opacity:0;transition:transform var(--t-mid) var(--ease),opacity var(--t-mid) var(--ease)}
.cookie.show{transform:none;opacity:1}
.cookie .btn{height:40px;padding:0 18px;font-size:14px;flex:none}
@media (max-width:767px){.cookie{left:10px;right:10px;bottom:88px;max-width:none;flex-wrap:wrap}.cookie .btn{width:100%}}
@media (max-height:500px) and (orientation:landscape){.cookie{bottom:72px;right:330px}}

/* Пустые состояния, 404/410 */
.empty{background:#fff;border-radius:var(--r-card);padding:28px;box-shadow:var(--sh-1);color:var(--ash)}
.map iframe,.map > ymaps,.map > div{position:absolute;inset:0;width:100%!important;height:100%!important;border:0}

/* Семантические заголовки с оформлением прототипа */
.pcard .h4,.proj .h4,.partner .h4{font-size:17px;margin-bottom:6px;line-height:1.3;font-weight:650;color:var(--graphite)}
.footer .h5{margin:0 0 14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);font-weight:600}
.footer .big-phone{display:block;padding:0}
.modal .h3{color:var(--graphite)}
.lang a{position:relative;z-index:1;padding:5px 10px;font-size:12px;font-weight:600;color:var(--ash);border-radius:var(--r-pill);transition:color var(--t-mid)}
.lang a.on{color:#fff}
.mmenu .lang{display:inline-flex;margin-top:14px}
@media (max-width:1199px){.mmenu .lang{display:inline-flex}}
[hidden]{display:none!important}
/* Метка на карте: длинный адрес переносится, не выходит за блок */
.map .pin b{white-space:normal;max-width:min(260px,calc(100vw - 80px));text-align:center;line-height:1.35}
/* Аврора в тёмном блоке — фон, а не ячейка сетки */
.night > .aurora{position:absolute;inset:0;z-index:0}
.footer .logo{display:flex;padding:0}

/* Эмблема в подвале крупнее */
.footer .logo-mark{width:56px;height:56px}

/* Раскрывающиеся карточки объектов («Проекты» и карусель на главной) */
.carousel .proj.xp.can-xp{cursor:pointer}
.pgrid{align-items:start}
.proj.xp.can-xp{cursor:pointer}
.proj.xp.open p{display:block;-webkit-line-clamp:unset;overflow:visible}
.proj.xp p{transition:height .35s var(--ease)}
.proj-more{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:4px 0;border:0;background:none;color:var(--cobalt);font:600 13.5px/1.2 inherit;font-family:inherit;cursor:pointer}
.proj-more[hidden]{display:none}
.proj-more svg{width:14px;height:14px;transition:transform var(--t-mid) var(--ease)}
.proj.open .proj-more svg{transform:rotate(45deg)}
.proj-more:hover span{text-decoration:underline}
.proj-more:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion: reduce){.proj.xp p,.proj-more svg{transition:none}}
.carousel{align-items:start}

/* Название в логотипе крупнее (05.11.2026) */
.logo b { font-size: 18px; letter-spacing: -.01em; }
@media (max-width: 767px) { .logo b { font-size: 16.5px; } }
@media (max-width: 374px) { .logo b { font-size: 14.5px; } }

/* =========================================================================
   Палитра «Золотые кнопки · светлая» (05.11.2026): белый #FFFFFF, светло-серый #E8EEF5,
   синий #1769AA, золотой #F2B632, графитовый #263746. Прежняя синяя — значения выше в :root.
   ========================================================================= */
:root {
  --fog: #E8EEF5;
  --white: #FFFFFF;
  --ice: #E8EEF5;
  --line: #DCE4EE;
  --line-strong: #CFD9E6;
  --surface-2: #F5F8FB;
  --surface-3: #E8EEF5;
  --surface-4: #DCE5F0;
  --graphite: #263746;
  --slate: #46566A;
  --ash: #5D6A7B;
  --muted-2: #97A3B4;
  --night: #263746;
  --night-2: #30445A;
  --on-night-text: #D2DCE8;
  --on-night-muted: #97A6BA;
  --on-night-accent: #F2B632;
  --on-night-accent-2: #9CC7EC;
  --on-night-accent-3: #F7D57E;
  --night-aurora-1: #1769AA;
  --night-aurora-2: #F2B632;
  --night-aurora-3: #3A5F86;
  --cobalt: #1769AA;
  --cobalt-dark: #0F4C80;
  --cobalt-tint: #E3EEF8;
  --violet: #263746;
  --violet-tint: #E4E9EF;
  --teal: #2F7FC1;
  --teal-tint: #E3EFF9;
  --coral: #D99A1C;
  --coral-tint: #FCF2DA;
  --amber: #F2B632;
  --amber-tint: #FDF4DE;
  --amber-strong: #E0A21E;
  --amber-ink: #7A5A10;
  --green: #2E7D5B;
  --green-tint: #E2F1EA;
  --red: #C62828;
  --aurora-1: #D3E3F3;
  --aurora-2: #F8E6BC;
  --aurora-3: #DCE6F0;
  --aurora-4: #CFE0F2;
  --grad-brand: linear-gradient(120deg, #1769AA 0%, #0F4C80 100%);
  --grad-spark: linear-gradient(120deg, #F7C64F 0%, #E0A21E 100%);
  --grad-teal: linear-gradient(120deg, #2F7FC1 0%, #263746 100%);
  --wire-1: #1769AA;
  --wire-2: #2F7FC1;
  --wire-3: #1769AA;
  --btn-bg: linear-gradient(120deg, #F7C64F 0%, #F2B632 55%, #E0A21E 100%);
  --btn-text: #1C2733;
  --btn-glow: 0 10px 28px rgba(242,182,50,.38);
  --btn-glow-hover: 0 14px 34px rgba(224,162,30,.48);
}
.btn-primary { --fg: var(--btn-text); background: var(--btn-bg); background-size: 160% 100%; box-shadow: var(--btn-glow); }
.btn-primary:hover { box-shadow: var(--btn-glow-hover); }

/* Эмблема крупнее (05.11.2026) */
.logo-mark { width: 54px; height: 54px; }
.footer .logo-mark { width: 64px; height: 64px; }
@media (max-width: 767px) { .logo-mark { width: 48px; height: 48px; } }
@media (max-width: 374px) { .logo-mark { width: 42px; height: 42px; } }

/* «Трест КазСпецЭнергоМонтаж» в логотипе (05.11.2026).
   Компьютер: название и пункты меню — в одну строку, размер подобран так, чтобы шапка помещалась.
   Телефон до 430 px: «Трест» может уйти на первую строку. */
@media (min-width: 768px) { .logo b { white-space: nowrap; } }
.header .nav a { white-space: nowrap; }
@media (min-width: 1200px) { .logo b { font-size: 16px; } .header .nav a { padding-left: 12px; padding-right: 12px; } }
@media (min-width: 1440px) { .logo b { font-size: 17px; } }
@media (min-width: 1200px) and (max-width: 1279px) { .logo b { font-size: 15px; } .header .nav a { padding-left: 10px; padding-right: 10px; } }
/* KZ: пункты меню длиннее */
@media (min-width: 1200px) { html[lang^="kk"] .logo b { font-size: 15.5px; } html[lang^="kk"] .header .nav a { padding-left: 10px; padding-right: 10px; } }
@media (min-width: 1200px) and (max-width: 1279px) { html[lang^="kk"] .logo b { font-size: 14.5px; } html[lang^="kk"] .header .nav a { padding-left: 8px; padding-right: 8px; } }

/* --- Подвал: телефоны и e-mail — тем же размером и стилем, что название компании (.logo b), каждый с новой строки --- */
.footer .f-contacts { margin-top: 18px; }
.footer .f-contacts a, .footer .f-contacts .f-line { display: block; padding: 3px 0; color: var(--graphite); font-weight: 650; font-size: 18px; letter-spacing: -.01em; line-height: 1.35; overflow-wrap: anywhere; }
.footer .f-contacts .f-line a { display: inline; padding: 0; }
.footer .f-contacts a:hover { color: var(--cobalt); }
.footer .f-contacts .f-note { font-weight: 500; color: var(--ash); white-space: nowrap; }
.footer .f-contacts a.f-note:hover { color: var(--cobalt); }
@media (max-width: 767px) { .footer .f-contacts a, .footer .f-contacts .f-line { font-size: 16.5px; } }
@media (max-width: 374px) { .footer .f-contacts a, .footer .f-contacts .f-line { font-size: 14.5px; } }
@media (min-width: 1200px) { .footer .f-contacts a, .footer .f-contacts .f-line { font-size: 16px; } }
@media (min-width: 1440px) { .footer .f-contacts a, .footer .f-contacts .f-line { font-size: 17px; } }
@media (min-width: 1200px) and (max-width: 1279px) { .footer .f-contacts a, .footer .f-contacts .f-line { font-size: 15px; } }
@media (min-width: 1200px) { html[lang^="kk"] .footer .f-contacts a, html[lang^="kk"] .footer .f-contacts .f-line { font-size: 15.5px; } }
@media (min-width: 1200px) and (max-width: 1279px) { html[lang^="kk"] .footer .f-contacts a, html[lang^="kk"] .footer .f-contacts .f-line { font-size: 14.5px; } }

/* --- «Контакты»: подпись «(WhatsApp)» у второго номера — ссылка на чат, как в подвале --- */
.c-card a.wa-note { font-weight: 500; color: var(--ash); white-space: nowrap; transition: color var(--t-fast); }
.c-card a.wa-note:hover { color: var(--cobalt); }
@media (max-width: 480px) { .c-card a.wa-note { font-size: 13px; } }

/* --- Главная: фото первого экрана — фотография объекта на всю карточку (раньше — предмет на белом фоне) --- */
.hv-main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; mix-blend-mode: normal; filter: none; }
.hv-main .chip { z-index: 2; } /* плашка над фото и при увеличении фото по наведению */

/* --- Главная: число пунктов задаётся в админке (цифры до 8, этапы до 6) --- */
@media (min-width: 1200px) { .stats[style*="--cols-d"] { --cols: var(--cols-d); } }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1199px) {
  .steps.many { grid-template-columns: 1fr; gap: 6px; padding-left: 64px; }
  .steps.many .track { top: 24px; bottom: 24px; left: 22px; right: auto; width: 3px; height: auto; }
  .steps.many .track i { transform: scaleY(var(--fill, 0)); transform-origin: 50% 0; }
  .steps.many .step .dot { position: absolute; left: -64px; top: 0; }
  .steps.many .step { min-height: 90px; }
}

/* --- Главная, каталог: если групп 3 (карточка «Нет нужной позиции?» — 4-я), она занимает 2 колонки, без пустой ячейки --- */
@media (min-width: 768px) { .bento .cat.cta:nth-child(4) { grid-column: span 2; } }

/* --- «О компании», партнёры: логотипы по левому краю (вертикальные логотипы не смещаются вправо) --- */
.partner .lg img { width: auto; max-width: min(100%, 320px); object-position: left center; } /* широкие логотипы (надпись в строку) — до 320 px */

/* --- Главная, каталог: подпись группы не заходит под фото (фото справа занимает ~46% ширины) --- */
.bento .cat:not(:first-child):not(.cta) .sub { max-width: 52%; position: relative; z-index: 1; }