/* ============================================================
   CABLEWORK — слаботочные системы, Атырау
   Фирменные цвета: #AC3335 / #373435 / #FFFFFF
   Две темы, чередование секций одинаково в обеих.
   ============================================================ */

/* ============================================================
   ТЕМЫ
   ------------------------------------------------------------
   :root — тёмная тема (основная, фирменная).
   :root[data-theme="light"] — светлая, переопределяет ТОЛЬКО токены.
   Компоненты ниже написаны через токены и не знают, какая тема активна.

   Тёмные полосы (верхняя контактная, бегущая строка, подвал) переключаются
   вместе со всей страницей — их фон берётся из токена --bg-deep.
   ============================================================ */
:root{
  color-scheme: dark;

  /* --- Бренд (не зависит от темы) --- */
  --brand:      #AC3335;
  --brand-lt:   #d1585a;
  --brand-ink:  #e8878a;   /* мелкий текст: надзаголовки, теги, номера шагов */
  --brand-accent: #d1585a; /* акцент в заголовке, знак «+» в цифрах, галочки */
  --brand-dk:   #8d2729;
  --brand-tint: rgba(172,51,53,.14);

  /* --- Поверхности --- */
  --bg:      #141314;
  --bg-2:    #1b1a1a;
  --bg-3:    #232122;
  --bg-deep: #0e0d0e;                   /* верхняя полоса, бегущая строка, подвал */
  --paper:   #fdfcfb;                   /* карточка формы — светлая в обеих темах */

  /* --- Текст --- */
  --tx-strong: #ffffff;                 /* заголовки, логотип, акценты */
  --tx:      #f4f2f1;
  --tx-2:    rgba(255,255,255,.64);
  --tx-3:    rgba(255,255,255,.55);

  /* --- Линии и полупрозрачные подложки поверх фона --- */
  --ln:      rgba(255,255,255,.11);
  --ln-2:    rgba(255,255,255,.20);
  --wash:    rgba(255,255,255,.05);     /* теги, кнопки-призраки */
  --wash-2:  rgba(255,255,255,.07);     /* бейджи, соцкнопки */
  --grid:    rgba(255,255,255,.045);    /* сетка на фоне */
  --wire:    rgba(255,255,255,.10);     /* кабельные трассы в hero */
  --num-ghost: rgba(255,255,255,.09);   /* крупные номера в карточках услуг */

  --card:    #201f20;
  --card-hv: #292728;

  /* --- Составные фоны --- */
  --header-bg:       rgba(20,19,20,.86);
  --header-bg-stuck: rgba(14,13,14,.96);
  --panel-bg:        rgba(22,21,22,.62);
  --media-bg:        linear-gradient(150deg,#2a2728,#1b1a1a);
  --hero-a:  #141314;
  --hero-b:  #232122;
  --hero-glow-1: rgba(172,51,53,.34);
  --hero-glow-2: rgba(55,52,53,.85);
  --hero-scrim: linear-gradient(96deg, rgba(20,19,20,.94) 0%, rgba(20,19,20,.86) 36%,
                                        rgba(20,19,20,.46) 64%, rgba(20,19,20,.16) 100%);
  --hero-scrim-v: linear-gradient(to bottom, rgba(20,19,20,.84), rgba(20,19,20,.90));
  --hero-vignette: rgba(8,7,8,.62);
  --hero-photo:  contrast(1.09) saturate(.76) brightness(.94);
  --shadow-card: 0 24px 50px rgba(0,0,0,.42);
  --watermark: .085;                    /* фирменный знак в углу секций */

  /* --- Типографика --- */
  --font-head: 'Unbounded', 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  /* Отдельная гарнитура только для написания «CABLEWORK»: официальный логотип
     набран геометрическим гротеском, и Unbounded рядом со знаком выглядел бы
     чужеродно. Montserrat ExtraBold — ближайшее общедоступное совпадение. */
  --font-logo: 'Montserrat', 'Manrope', 'Segoe UI', system-ui, sans-serif;

  /* --- Размеры --- */
  --container: 1240px;
  --gutter: 24px;
  --radius: 14px;
  --radius-lg: 22px;
  --header-h: 74px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- СВЕТЛАЯ ТЕМА ----------
   Переопределяются только токены. Ни один компонент ниже не дублируется. */
:root[data-theme="light"]{
  --brand-ink: #96282a;    /* на белом нужен тёмный, а не светлый оттенок */
  --brand-accent: #AC3335;
  color-scheme: light;

  --bg:      #f5f3f0;
  --bg-2:    #ebe8e4;
  --bg-3:    #e1ddd8;
  --bg-deep: #e5e1dc;

  --tx-strong: #1b1a1a;
  --tx:      #232122;
  --tx-2:    #565253;
  --tx-3:    #656161;

  --ln:      #dcd8d3;
  --ln-2:    #c8c3bd;
  --wash:    rgba(35,33,34,.045);
  --wash-2:  rgba(35,33,34,.065);
  --grid:    rgba(35,33,34,.05);
  --wire:    rgba(35,33,34,.10);
  --num-ghost: rgba(35,33,34,.10);

  --card:    #fdfcfb;                   /* карточки светлее фона, но не чисто белые */
  --card-hv: #ffffff;

  --header-bg:       rgba(245,243,240,.90);
  --header-bg-stuck: rgba(245,243,240,.97);
  --panel-bg:        rgba(250,249,247,.93);
  --media-bg:        linear-gradient(150deg,#e8e5e0,#dcd8d2);
  --hero-a:  #f5f3f0;
  --hero-b:  #ebe8e4;
  --hero-glow-1: rgba(172,51,53,.15);
  --hero-glow-2: rgba(55,52,53,.07);
  --hero-scrim: linear-gradient(96deg, rgba(245,243,240,.95) 0%, rgba(245,243,240,.90) 36%,
                                        rgba(245,243,240,.58) 64%, rgba(245,243,240,.28) 100%);
  --hero-scrim-v: linear-gradient(to bottom, rgba(245,243,240,.87), rgba(245,243,240,.92));
  --hero-vignette: rgba(84,79,74,.26);
  --hero-photo:  contrast(1.05) saturate(.8) brightness(1.01);
  --shadow-card: 0 20px 44px rgba(27,26,26,.12);
  --watermark: .05;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--tx);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nav-open{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.03em;
  color:var(--tx);
  margin:0 0 .5em;
}
h1{ font-size:clamp(1.72rem, 2.9vw, 2.5rem); font-weight:800; letter-spacing:-.034em; line-height:1.1; }
h2{ font-size:clamp(1.45rem, 2.45vw, 2.1rem); }
h3{ font-size:clamp(1.02rem, 1.4vw, 1.22rem); font-weight:600; letter-spacing:-.02em; line-height:1.3; }
p{ margin:0 0 1em; }

::selection{ background:var(--brand); color:#fff; }
:focus-visible{ outline:3px solid var(--brand-lt); outline-offset:3px; border-radius:4px; }

/* ---------- Раскладка ---------- */
.container{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--gutter);
}

.section{ padding:clamp(64px, 8vw, 120px) 0; background:var(--bg); }
.section--alt{ background:var(--bg-2); }

.section-head{ max-width:760px; margin-bottom:clamp(34px,4vw,58px); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head p{ font-size:1.05rem; color:var(--tx-2); margin:0; }
.section-foot{ text-align:center; margin-top:42px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-head);
  font-size:.7rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--brand-ink);
  margin-bottom:18px;
}
.eyebrow::before{ content:''; width:26px; height:2px; background:var(--brand); border-radius:2px; }
.section-head--center .eyebrow{ justify-content:center; }

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-head); font-weight:600; font-size:.9rem;
  line-height:1; letter-spacing:-.01em;
  padding:16px 26px;
  border:1.5px solid transparent;
  border-radius:11px;
  transition:transform .18s var(--ease), background .18s var(--ease),
             color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:18px; height:18px; flex:none; }

.btn--primary{ background:var(--brand); color:#fff; box-shadow:0 10px 26px rgba(172,51,53,.32); }
.btn--primary:hover{ background:var(--brand-dk); box-shadow:0 14px 32px rgba(172,51,53,.42); }

.btn--white{ background:var(--tx-strong); color:var(--bg); }
.btn--white:hover{ background:var(--brand); color:#fff; }

.btn--ghost-light{ background:var(--wash); color:var(--tx); border-color:var(--ln-2); }
.btn--ghost-light:hover{ background:var(--tx-strong); color:var(--bg); border-color:var(--tx-strong); }

.btn--sm{ padding:12px 20px; font-size:.82rem; }
.btn--lg{ padding:19px 32px; font-size:.95rem; }
.btn--block{ width:100%; }

/* ---------- Верхняя полоса ---------- */
.topbar{ background:var(--bg-deep); color:var(--tx-3); font-size:.8rem; }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:40px; }
.topbar__list{ display:flex; align-items:center; gap:24px; }
.topbar__item{ display:inline-flex; align-items:center; gap:8px; }
.topbar__item svg{ width:14px; height:14px; color:var(--brand-lt); flex:none; }
.topbar a{ transition:color .18s var(--ease); }
.topbar a:hover{ color:var(--tx-strong); }
.topbar__socials{ display:flex; align-items:center; gap:14px; }
.topbar__socials a{ display:inline-flex; }
.topbar__socials svg{ width:16px; height:16px; }

/* ---------- Шапка ---------- */
.header{
  position:sticky; top:0; z-index:80;
  background:var(--header-bg);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--ln);
  transition:background .25s var(--ease), box-shadow .25s var(--ease);
}
.header.is-stuck{ background:var(--header-bg-stuck); box-shadow:0 8px 30px rgba(0,0,0,.4); }
.header__inner{ display:flex; align-items:center; gap:28px; min-height:var(--header-h); }

/* Логотип: знак берётся из спрайта #i-ring — единственное место правки геометрии */
.logo{ display:inline-flex; align-items:center; gap:12px; flex:none; }
.logo__mark{ width:36px; height:36px; flex:none; color:var(--brand); }
.logo__word{ display:block; }
.logo__text{
  display:block;
  font-family:var(--font-logo); font-weight:800;
  font-size:1.12rem; letter-spacing:.005em; color:var(--tx-strong); line-height:1;
}
.logo__sub{
  display:block; font-family:var(--font-body); font-weight:500;
  font-size:.58rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--tx-3); margin-top:5px;
}

.nav{ margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; }
.nav__link{
  position:relative; font-size:.9rem; font-weight:500; color:var(--tx-2);
  padding:6px 0; transition:color .18s var(--ease);
}
.nav__link::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--brand); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.nav__link:hover,.nav__link.is-active{ color:var(--tx-strong); }
.nav__link:hover::after,.nav__link.is-active::after{ transform:scaleX(1); }

.header__cta{ flex:none; }

.burger{
  display:none; width:44px; height:44px; flex:none;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--ln-2); border-radius:11px; margin-left:auto;
}
.burger span{ display:block; position:relative; width:19px; height:2px; background:var(--tx-strong); border-radius:2px; transition:background .2s var(--ease); }
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:19px; height:2px; background:var(--tx-strong); border-radius:2px;
  transition:transform .25s var(--ease), top .25s var(--ease);
}
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* ---------- Переключатель темы ----------
   Показываем ту иконку, НА КОТОРУЮ переключимся: в тёмной теме солнце,
   в светлой — луну. Так кнопка читается как действие, а не как индикатор. */
.theme-toggle{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  background:var(--wash); border:1px solid var(--ln-2);
  border-radius:11px; color:var(--tx);
  transition:background .2s var(--ease), border-color .2s var(--ease),
             color .2s var(--ease), transform .2s var(--ease);
}
.theme-toggle:hover{
  background:var(--wash-2); border-color:var(--brand);
  color:var(--brand-lt); transform:translateY(-2px);
}
.theme-toggle svg{ width:19px; height:19px; }
.theme-toggle__moon{ display:none; }
:root[data-theme="light"] .theme-toggle__sun{ display:none; }
:root[data-theme="light"] .theme-toggle__moon{ display:block; }

/* Мобильное меню */
.mobile-nav{
  position:fixed; inset:0; z-index:79;
  background:var(--bg);
  padding:calc(var(--header-h) + 44px) var(--gutter) 40px;
  transform:translateY(-100%); visibility:hidden;
  transition:transform .38s var(--ease), visibility .38s;
  overflow-y:auto;
}
.mobile-nav.is-open{ transform:translateY(0); visibility:visible; }
.mobile-nav__list{ list-style:none; margin:0 0 28px; padding:0; }
.mobile-nav__list li + li{ border-top:1px solid var(--ln); }
.mobile-nav__list a{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-head); font-weight:600; font-size:1.15rem;
  color:var(--tx-strong); padding:18px 0;
}
.mobile-nav__list a::after{ content:'\2192'; color:var(--brand-lt); font-size:1rem; }
.mobile-nav__foot{ display:grid; gap:12px; }
.mobile-nav__phone{
  font-family:var(--font-head); font-weight:800; font-size:1.3rem; color:var(--tx-strong);
  text-align:center; margin-bottom:4px; letter-spacing:-.03em;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; background:var(--bg); overflow:hidden; isolation:isolate; }

/* ---------- Фото с объектов: САМЫЙ ЗАДНИЙ СЛОЙ первого экрана ----------
   Кадр альбомный, снимок закрывает всю площадь. Исходники вертикальные,
   поэтому у каждого свой object-position — иначе в широкую полосу попадал бы
   случайный кусок вместо сюжета. Слой лежит ПОД подложкой, сеткой, трассами
   и кольцом, так что с заголовком не спорит. */
.hero__photos{ position:absolute; inset:0; z-index:-4; overflow:hidden; }
.hero__photos .shot{ position:absolute; inset:0; opacity:0; transition:opacity .85s var(--ease); }
.hero__photos .shot.is-active{ opacity:1; }
/* Лёгкая коррекция: приглушённый цвет и поднятый контраст читаются как
   техническая съёмка, а не как сток. Значения в токене — у тёмной и светлой
   темы они разные, иначе в светлой снимок выглядел бы грязным. */
.hero__photos img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.05);
  filter:var(--hero-photo);
}
/* Не чистый зум, а зум с уводом: кадр «дышит», но не разъезжается. */
.hero__photos .shot.is-active img{ animation:kenburns 5.6s ease-out forwards; }
@keyframes kenburns{
  from{ transform:scale(1.05) translate3d(0,0,0); }
  to  { transform:scale(1.12) translate3d(-1.1%,-.7%,0); }
}

/* Подложка над фото: слева плотнее — там заголовок, справа прозрачнее,
   чтобы снимок читался. Опорный цвет берётся из темы. */
.hero__bg{
  position:absolute; inset:0; z-index:-3;
  background:
    radial-gradient(120% 104% at 48% 42%, transparent 38%, var(--hero-vignette) 100%),
    radial-gradient(1200px 700px at 76% 4%, var(--hero-glow-1), transparent 62%),
    radial-gradient(800px 560px at 4% 96%, var(--hero-glow-2), transparent 68%),
    var(--hero-scrim);
}
.hero__grid{
  position:absolute; inset:0; z-index:-2;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:66px 66px;
  mask-image:radial-gradient(circle at 32% 34%, #000 0%, transparent 66%);
  -webkit-mask-image:radial-gradient(circle at 32% 34%, #000 0%, transparent 66%);
}

/* Кабельные трассы с бегущими импульсами */
.hero__lines{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.wire{
  position:absolute; top:0; bottom:0; width:1px; overflow:hidden;
  background:linear-gradient(to bottom, transparent, var(--wire) 25%, var(--wire) 75%, transparent);
}
.wire i{
  position:absolute; left:-2px; width:5px; height:150px; border-radius:5px;
  background:linear-gradient(to bottom, transparent, var(--brand-lt) 45%, var(--brand-lt) 55%, transparent);
  filter:blur(1.5px);
  animation:wireRun 7s linear infinite;
}
.wire--1{ left:9%; }   .wire--1 i{ animation-duration:6.2s; animation-delay:-1.4s; }
.wire--2{ left:27%; }  .wire--2 i{ animation-duration:8.4s; animation-delay:-4.1s; }
.wire--3{ left:62%; }  .wire--3 i{ animation-duration:7.1s; animation-delay:-2.6s; }
.wire--4{ left:88%; }  .wire--4 i{ animation-duration:9.3s; animation-delay:-6.2s; }
@keyframes wireRun{ from{ transform:translateY(-180px); } to{ transform:translateY(115vh); } }

/* Фирменное кольцо как графический мотив */
.hero__ring{
  position:absolute; z-index:-1; pointer-events:none;
  right:-7%; top:-17%;
  width:min(56vw, 520px); height:auto; aspect-ratio:1;
  color:var(--brand); opacity:.15;
  animation:ringSpin 90s linear infinite;
}
.hero__ring-body{ fill:currentColor; }
.hero__ring-waves{ fill:currentColor; }
.hero__ring-waves path{ animation:wavePulse 3.2s ease-in-out infinite; }
.hero__ring-waves path:nth-child(2){ animation-delay:.35s; }
.hero__ring-waves path:nth-child(3){ animation-delay:.7s; }
@keyframes ringSpin{ to{ transform:rotate(360deg); } }
@keyframes wavePulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
  padding:clamp(58px,7vw,110px) 0 clamp(58px,7vw,96px);
}


.hero h1{ color:var(--tx-strong); margin-bottom:24px; }
.hero h1 em{ font-style:normal; color:var(--brand-accent); }
.hero__lead{
  font-size:clamp(1rem,1.25vw,1.12rem);
  color:var(--tx-2);
  max-width:54ch; margin-bottom:34px;
}
/* Три факта одной строкой, с тонкими разделителями. Разделитель рисуем
   на ::before у соседей, а не border-left у всех: при переносе на узком
   экране левая палка у первого элемента новой строки висела бы в воздухе. */
.hero__facts{
  list-style:none; margin:0 0 32px; padding:0;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px 22px;
}
.hero__facts li{
  position:relative;
  display:inline-flex; align-items:center; gap:9px;
  font-size:.87rem; font-weight:500; color:var(--tx);
  white-space:nowrap;
}
.hero__facts li + li::before{
  content:''; position:absolute; left:-11px; top:50%;
  width:1px; height:15px; margin-top:-7px;
  background:var(--ln-2);
}
.hero__facts svg{ width:17px; height:17px; color:var(--brand); flex:none; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- Бегущая строка заказчиков ---------- */
.ticker{
  border-top:1px solid var(--ln); border-bottom:1px solid var(--ln);
  background:var(--bg-deep); overflow:hidden; padding:18px 0;
}
.ticker__track{ display:flex; gap:50px; width:max-content; animation:marquee 42s linear infinite; }
.ticker__item{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-head); font-weight:600;
  font-size:.86rem; letter-spacing:.04em;
  color:var(--tx-2); white-space:nowrap;
}
.ticker__item::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--brand); flex:none; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.ticker:hover .ticker__track{ animation-play-state:paused; }

/* Панель «бесплатный выезд» */
.hero__panel{
  position:relative;
  background:var(--panel-bg);
  border:1px solid var(--ln-2);
  border-radius:var(--radius-lg);
  padding:32px;
  backdrop-filter:blur(12px);
  box-shadow:0 34px 80px rgba(0,0,0,.42);
}
.hero__panel-badge{
  display:inline-block;
  font-family:var(--font-head); font-weight:700; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase;
  background:var(--brand); color:#fff;
  border-radius:100px; padding:6px 14px; margin-bottom:16px;
}
/* Кегль подобран так, чтобы «Выезд и замер на объекте» держался в одну строку
   в суженной панели: при прежних 1,5rem заголовок ломался пополам на широком
   экране и оставался целым на среднем — панель выглядела по-разному без причины. */
.hero__panel-title{ font-size:clamp(1.18rem,1.7vw,1.35rem); color:var(--tx-strong); margin-bottom:8px; letter-spacing:-.03em; }
.hero__panel-sub{ font-size:.88rem; color:var(--tx-2); margin-bottom:22px; }
.hero__panel .ticks li{ color:var(--tx); }
.hero__panel .btn{ margin-top:28px; }


/* ============================================================
   УСЛУГИ — семь плит
   ============================================================ */
.svcs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

.svc{
  position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--ln);
  border-radius:var(--radius-lg); padding:24px 22px 26px;
  transition:transform .3s var(--ease), background .3s var(--ease),
             border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.svc__num{
  position:absolute; top:24px; right:26px;
  font-family:var(--font-head); font-weight:800; font-size:1.5rem;
  color:var(--num-ghost); letter-spacing:-.04em;
  transition:color .3s var(--ease);
}
.svc__icon{
  width:54px; height:54px; border-radius:15px;
  display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-lt);
  margin-bottom:22px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.svc__icon svg{ width:26px; height:26px; }
.svc h3{ margin-bottom:12px; font-size:1.06rem; }
.svc p{ color:var(--tx-2); font-size:.93rem; margin-bottom:20px; }

/* Состав работ внутри карточки услуги. Точка нарисована псевдоэлементом,
   а не маркером списка: у родного маркера не выровнять отступ и цвет,
   а пункты здесь в две строки и должны висеть ровным столбцом. */
.svc__list{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
/* Свёрнуто видно только первую строку — остальные раскрывает кнопка под
   списком. Класс ставит скрипт: без JS виден весь состав работ. */
.svc__list.is-collapsed li:nth-child(n+2){ display:none; }
.svc__list li{
  position:relative; padding-left:17px;
  font-size:.86rem; line-height:1.42; color:var(--tx-2);
}
.svc__list li::before{
  content:''; position:absolute; left:0; top:.58em;
  width:6px; height:6px; border-radius:50%;
  background:var(--brand);
  transition:background .3s var(--ease);
}

.svc:hover{
  background:var(--brand); border-color:var(--brand);
  transform:translateY(-6px);
  box-shadow:0 26px 54px rgba(172,51,53,.32);
}
.svc:hover h3{ color:#fff; }
.svc:hover p{ color:rgba(255,255,255,.92); }
.svc:hover .svc__list li{ color:rgba(255,255,255,.92); }
.svc:hover .svc__list li::before{ background:#fff; }

/* Кнопка раскрытия состава работ. Не .btn: внутри карточки нужна не кнопка,
   а строка-ссылка, иначе в каждой из шести карточек торчала бы своя рамка. */
.svc__more{
  align-self:flex-start;
  margin-top:12px; padding:0;
  background:none; border:0;
  font-family:var(--font-head); font-weight:600; font-size:.8rem;
  color:var(--brand-ink);
  display:inline-flex; align-items:center; gap:6px;
  transition:color .2s var(--ease), gap .2s var(--ease);
}
.svc__more:hover{ gap:9px; }
.svc__more svg{ width:13px; height:13px; transform:rotate(180deg); transition:transform .3s var(--ease); }
.svc__more[aria-expanded="true"] svg{ transform:rotate(0deg); }
.svc:hover .svc__more{ color:#fff; }

.svc:hover .svc__num{ color:rgba(255,255,255,.34); }
.svc:hover .svc__icon{ background:#fff; color:var(--brand); }

/* Списки с галочками — общий компонент */
.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ticks li{ position:relative; padding-left:26px; font-size:.9rem; color:var(--tx-2); }
.ticks li::before{
  content:''; position:absolute; left:1px; top:.52em;
  width:11px; height:6px;
  border-left:2px solid var(--brand-accent); border-bottom:2px solid var(--brand-accent);
  transform:rotate(-45deg);
}

/* ============================================================
   О КОМПАНИИ
   ============================================================ */
.about{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,64px); align-items:start;
}
.about .section-head{ margin-bottom:26px; }
.about__lead{
  font-size:clamp(1.02rem,1.35vw,1.16rem);
  color:var(--tx); margin:0 0 16px; max-width:56ch;
}
/* Второй абзац — перечень систем. Мельче и приглушённее вступления,
   чтобы главным оставалось первое: чем компания занимается и для кого. */
.about__text{
  font-size:.95rem; line-height:1.6;
  color:var(--tx-2); margin:0; max-width:56ch;
}
/* Две карточки друг под другом: рядом с текстовой колонкой это выравнивает
   высоты, а в две колонки они были бы вдвое ниже неё */
.about__cols{ display:grid; gap:26px; }
.about__col{ padding-top:20px; border-top:2px solid var(--brand); }
.about__col h3{ margin-bottom:10px; }
.about__col p{ font-size:.93rem; color:var(--tx-2); margin:0; }

/* ============================================================
   ОБОРУДОВАНИЕ — блок внутри «Как работаем»
   ------------------------------------------------------------
   Отдельной секцией это было лишним экраном прокрутки. Отделяем
   линией и отступом, а не сменой фона: внутри одной секции смена
   фона читалась бы как новая секция.
   ============================================================ */
.equip{
  margin-top:clamp(46px,5vw,74px);
  padding-top:clamp(34px,4vw,54px);
  border-top:1px solid var(--ln);
}
.equip__head{ text-align:center; max-width:620px; margin:0 auto clamp(24px,3vw,36px); }
.equip__head .eyebrow{ justify-content:center; margin-bottom:14px; }
.equip__head h3{ font-size:clamp(1.1rem,1.6vw,1.35rem); margin-bottom:10px; }
.equip__head p{ color:var(--tx-2); font-size:.95rem; margin:0; }

/* Направления идут одно под другим, в каждом — ряд плашек с марками.
   Раньше блок состоял из полосы логотипов И текстовых списков, то есть
   одни и те же марки перечислялись дважды. Теперь каждая марка стоит
   один раз, в своём направлении. */
.equip__group{
  margin-top:clamp(22px,2.6vw,32px);
  padding-top:14px; border-top:1px solid var(--ln);
}
.equip__group-title{
  display:block;
  font-family:var(--font-head); font-weight:700;
  font-size:.78rem; letter-spacing:.02em;
  color:var(--tx-strong); margin-bottom:12px;
}
/* Марки, работающие сразу в двух направлениях, не дублируем логотипом —
   вместо этого короткая приписка. */
.equip__also{ font-size:.78rem; color:var(--tx-3); margin:10px 0 0; }

/* ============================================================
   БРЕНДЫ — плашки
   ------------------------------------------------------------
   Флекс, а не грид: брендов одиннадцать, и в сетке с фиксированным
   числом колонок последний ряд оставался бы прижатым влево.
   Здесь неполный ряд центрируется сам.
   ============================================================ */
/* Сетка, а не флекс: заказчику нужно ровно десять плашек в ряд, а флекс
   растягивал последний неполный ряд. Число колонок всегда делитель
   двадцати — столько плашек показано в свёрнутом виде (два полных ряда). */
.brands{ --logo-k:.72; display:grid; grid-template-columns:repeat(10,1fr); gap:10px; }

/* Лестница колонок для стены логотипов. Сколько плашек показать в свёрнутом
   виде, скрипт считает из фактического числа колонок — ровно два полных ряда,
   поэтому делителями двадцати эти числа быть не обязаны. */
@media (max-width:1180px){ .brands{ grid-template-columns:repeat(8,1fr); } }
@media (max-width:900px) { .brands{ --logo-k:.8; grid-template-columns:repeat(6,1fr); } }
@media (max-width:700px) { .brands{ grid-template-columns:repeat(5,1fr); gap:8px; } }
@media (max-width:520px) { .brands{ --logo-k:.74; grid-template-columns:repeat(4,1fr); } }

/* Свёрнутая стена: ровно два ряда при любом числе колонок. Границы те же,
   что у лестницы выше, поэтому число скрытых меняется вместе с колонками.
   Считает это CSS, а не скрипт: пересчёт по ResizeObserver зависел бы от
   события, которого в некоторых просмотрщиках просто нет, и стена
   застывала бы с числом плашек от прежней ширины.
   Правила накапливаются: узкое скрывает надмножество широкого. */
.brands.is-collapsed .brand:nth-child(n+21){ display:none; }
@media (max-width:1180px){ .brands.is-collapsed .brand:nth-child(n+17){ display:none; } }
@media (max-width:900px) { .brands.is-collapsed .brand:nth-child(n+13){ display:none; } }
@media (max-width:700px) { .brands.is-collapsed .brand:nth-child(n+11){ display:none; } }
@media (max-width:520px) { .brands.is-collapsed .brand:nth-child(n+9) { display:none; } }
/* Плашка белая в ОБЕИХ темах: у присланных логотипов непрозрачный белый фон,
   на тёмной подложке они выглядели бы белыми прямоугольниками. */
.brand{
  display:grid; place-items:center; align-content:center;
  min-height:70px; padding:10px 8px; text-align:center;
  background:#fff; border:1px solid var(--ln); border-radius:var(--radius);
  transition:border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.brand:hover{ border-color:var(--brand); transform:translateY(-4px); box-shadow:var(--shadow-card); }

/* Логотип показывается только после успешной загрузки, иначе видно название —
   так плашка никогда не выглядит сломанной.

   ВНИМАНИЕ: скрытие здесь сделано через display:none, поэтому этим картинкам
   НЕЛЬЗЯ ставить loading="lazy". У скрытого элемента нет блока на странице,
   браузер отложенную картинку не грузит, load не наступает — и логотип
   не появляется никогда. На случай, если атрибут вернут по невнимательности,
   в initImageFallbacks стоит страховка, снимающая его. */
.brand img{
  max-height:calc(var(--logo-h, 40) * var(--logo-k, 1) * 1px);
  max-width:100%; width:auto; object-fit:contain; display:none;
}
.brand.is-loaded img{ display:block; }
.brand__ph{
  font-family:var(--font-logo); font-weight:800;
  font-size:.82rem; letter-spacing:-.01em; color:#232122;
}
.brand.is-loaded .brand__ph{ display:none; }

/* Марки, для которых заказчик не прислал логотип: та же плашка, но сразу
   с названием. Так ряд не рвётся пустотами и видно, что марка не забыта. */
.brand--text{
  font-family:var(--font-logo); font-weight:800;
  font-size:.78rem; letter-spacing:-.01em; color:#232122;
}

/* Кнопка стены логотипов: та же механика, что у проектов. Свёрнутое
   состояние ставит скрипт, поэтому без JS видны все марки. */
.brands__more{ gap:12px; }
.brands__more-count{
  font-family:var(--font-head); font-weight:700;
  font-size:.7rem; line-height:1;
  min-width:21px; padding:5px 6px; border-radius:100px;
  background:var(--brand); color:#fff;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.brands__more:hover .brands__more-count{ background:var(--bg); color:var(--tx-strong); }
.brands__more-icon{
  transform:rotate(180deg);
  transition:transform .35s var(--ease);
}
.brands__more[aria-expanded="true"] .brands__more-icon{ transform:rotate(0deg); }
.brands__more[aria-expanded="true"] .brands__more-count{ display:none; }

/* Кнопка стены логотипов: та же механика, что у проектов. Свёрнутое
   состояние ставит скрипт, поэтому без JS видны все марки. */
.brands__more{ gap:12px; }
.brands__more-count{
  font-family:var(--font-head); font-weight:700;
  font-size:.7rem; line-height:1;
  min-width:21px; padding:5px 6px; border-radius:100px;
  background:var(--brand); color:#fff;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.brands__more:hover .brands__more-count{ background:var(--bg); color:var(--tx-strong); }
.brands__more-icon{
  transform:rotate(180deg);
  transition:transform .35s var(--ease);
}
.brands__more[aria-expanded="true"] .brands__more-icon{ transform:rotate(0deg); }
.brands__more[aria-expanded="true"] .brands__more-count{ display:none; }

/* ============================================================
   ЦИФРЫ
   ============================================================ */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--ln); border:1px solid var(--ln);
  border-radius:var(--radius-lg); overflow:hidden;
  margin-bottom:20px;
}
.stat{ background:var(--bg); padding:26px 24px; }

/* Цифры стоят в «О компании», под рассказом о фирме: там они работают как
   доказательство сказанного. В первом экране они спорили за внимание
   с формой заявки, а на телефоне отодвигали её на второй экран. */
.stats--about{ margin-top:clamp(34px,4vw,56px); margin-bottom:0; }
.stat__num{
  font-family:var(--font-head); font-weight:800;
  font-size:clamp(1.55rem,2.6vw,2.15rem);
  color:var(--tx-strong); line-height:1;
  display:flex; align-items:baseline; gap:1px;
  font-variant-numeric:tabular-nums;
}
.stat__num i{ font-style:normal; color:var(--brand-accent); }
.stat__label{ font-size:.82rem; color:var(--tx-2); margin-top:10px; line-height:1.4; }

/* ============================================================
   ЭТАПЫ РАБОТЫ
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }
.step__top{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.step__num{
  width:46px; height:46px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--bg); border:2px solid var(--brand);
  font-family:var(--font-head); font-weight:800; font-size:.95rem; color:var(--brand-ink);
}
.step__line{ flex:1; height:2px; background:repeating-linear-gradient(90deg,var(--ln-2) 0 7px,transparent 7px 14px); }
.step:last-child .step__line{ display:none; }
.step h3{ margin-bottom:8px; }
.step p{ font-size:.885rem; color:var(--tx-2); margin:0; }

/* ============================================================
   ОБЪЕКТЫ
   ============================================================ */
/* Шесть в ряд. Карточки нарочно мелкие: в этой секции важен масштаб списка,
   а не разглядывание каждого логотипа — двенадцать имён должны читаться
   одним взглядом. Число колонок всегда делитель шести (6 → 3 → 2): иначе
   свёрнутая сетка из шести карточек обрывалась бы посреди ряда. */
.projects{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }

.project{
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--ln);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.project:hover{ transform:translateY(-6px); border-color:var(--brand); box-shadow:var(--shadow-card); }

/* Заглушка лежит ПОД фотографией и видна всегда, пока снимок не загрузился.
   Фото проявляется только после успешной загрузки (класс .is-loaded от main.js).
   Так «битая картинка» не мелькает даже на долю секунды — а это важно,
   потому что до появления реальных фото не загрузится вообще ни одна. */
.project__media{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--media-bg);
}
.project__media::after{                      /* сетка-паттерн подложки */
  content:''; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
}
/* Значок Instagram — подсказка, что карточка ведёт на закреплённую историю.
   Видим всегда, а не только при наведении: на телефоне наведения нет,
   и иначе подсказка была бы недоступна половине посетителей. */
.project__ig{
  position:absolute; z-index:3; top:12px; right:12px;
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(20,19,20,.62); color:#fff;
  backdrop-filter:blur(6px);
  opacity:.72;
  transition:opacity .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.project__ig svg{ width:16px; height:16px; }
.project:hover .project__ig{ opacity:1; background:var(--brand); transform:scale(1.06); }

.project__ph{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center;
  color:var(--brand); opacity:.26;
}
.project__ph svg{ width:46%; height:46%; }

.project__media img{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.project__media img.is-loaded{ opacity:1; }
.project:hover .project__media img.is-loaded{ transform:scale(1.07); }

/* ---------- Режим «логотип заказчика» вместо фотографии ----------
   Логотипы пришли джипегами с непрозрачным фоном РАЗНЫХ оттенков (#E7E8EA,
   #D2DFE8, #DBE6F8 и т.д.). На тёмной карточке это выглядело бы как семь
   разномастных светлых пятен, поэтому область под логотип становится белой
   плашкой — на ней фон любого логотипа не читается как чужеродный.

   Логотип НЕ растягивается на всю плашку: пять исходников всего 150 px,
   при растягивании они бы замылились, особенно на экранах с удвоенной
   плотностью. Размеры подобраны так, чтобы картинка всегда уменьшалась,
   а не увеличивалась. */
.project__media--logo{ background:#fff; }
.project__media--logo::after{ background-image:none; }   /* сетка на белом не нужна */
.project__media--logo .project__ph{ opacity:.12; }

.project__media .project__logo{
  inset:0; margin:auto;
  width:auto; height:auto;
  max-height:74%; max-width:82%;
  object-fit:contain;
}
/* Пять логотипов — квадратные аватарки, марка внутри уже круглая.
   Обрезка в круг убирает цветные углы и приводит их к общему виду. */
.project__media .project__logo--round{
  width:56%; height:auto; aspect-ratio:1;
  max-width:none; max-height:none;      /* иначе круг сплющило бы в овал */
  object-fit:cover; border-radius:50%;
}
/* Два логотипа широкие, в круг их не обрезать — вписываем целиком с полями. */
/* Широкие логотипы задаются высотой, а не шириной: у BI Group пропорция
   почти 4:1, у KPI — почти квадрат, и общая ширина сделала бы первый
   вдвое мельче второго. Высота у каждого своя (--logo-h в разметке),
   подобрана по равной площади. */
.project__media .project__logo--wide{
  width:auto; height:var(--logo-h, 52%);
  max-width:90%; max-height:74%;
}

/* Наведение для логотипа мягче, чем зум фотографии */
.project:hover .project__media .project__logo.is-loaded{ transform:scale(1.04); }

.project__body{ padding:14px 14px 16px; flex:1; display:flex; flex-direction:column; }
.project__tag{
  align-self:flex-start;
  font-family:var(--font-head); font-weight:600;
  font-size:.56rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--brand-tint); border:1px solid rgba(172,51,53,.36);
  color:var(--brand-ink); border-radius:100px; padding:4px 9px; margin-bottom:9px;
}
.project__body h3{ font-size:.95rem; line-height:1.25; margin-bottom:8px; overflow-wrap:break-word; hyphens:auto; }
.project__body p{ font-size:.86rem; color:var(--tx-2); margin:0; }

/* Свёрнутая сетка: класс ставит скрипт, поэтому без JS видны все двенадцать
   проектов, а кнопка остаётся скрытой. Шесть — делится на 6, 3 и 2 колонки
   без остатка, так что нижний край свёрнутой сетки всегда ровный. */
.projects.is-collapsed .project:nth-child(n+7){ display:none; }

@keyframes projectIn{
  from{ opacity:0; transform:translateY(16px) scale(.97); }
  to  { opacity:1; transform:none; }
}
.projects.is-expanding .project:nth-child(n+7){ animation:projectIn .5s var(--ease) both; }
.projects.is-expanding .project:nth-child(7) { animation-delay:0s;    }
.projects.is-expanding .project:nth-child(8) { animation-delay:.05s;  }
.projects.is-expanding .project:nth-child(9) { animation-delay:.1s;   }
.projects.is-expanding .project:nth-child(10){ animation-delay:.15s;  }
.projects.is-expanding .project:nth-child(11){ animation-delay:.2s;   }
.projects.is-expanding .project:nth-child(n+12){ animation-delay:.25s; }

/* Кнопка «показать ещё». Стрелка мягко покачивается вниз — это единственная
   подсказка, что под сеткой есть продолжение; при раскрытии она
   переворачивается вверх и покачивание выключается. */
.projects__more{ gap:12px; }
.projects__more-count{
  font-family:var(--font-head); font-weight:700;
  font-size:.7rem; line-height:1;
  min-width:21px; padding:5px 6px; border-radius:100px;
  background:var(--brand); color:#fff;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.projects__more:hover .projects__more-count{ background:var(--bg); color:var(--tx-strong); }
.projects__more-icon{
  transform:rotate(180deg);
  transition:transform .35s var(--ease);
  animation:moreBob 2.4s var(--ease) infinite;
}
@keyframes moreBob{
  0%,100%{ transform:rotate(180deg) translateY(0); }
  50%    { transform:rotate(180deg) translateY(-3px); }   /* после поворота — вниз */
}
.projects__more:hover .projects__more-icon{ animation:none; transform:rotate(180deg) translateY(3px); }
.projects__more[aria-expanded="true"] .projects__more-icon{ animation:none; transform:rotate(0deg); }
.projects__more[aria-expanded="true"] .projects__more-count{ display:none; }


/* ============================================================
   CTA-полоса
   ============================================================ */
.cta{ position:relative; overflow:hidden; background:var(--brand); color:#fff; padding:clamp(48px,6vw,84px) 0; }
.cta::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(100deg,#000,transparent 72%);
  -webkit-mask-image:linear-gradient(100deg,#000,transparent 72%);
}
.cta__inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; }
.cta h2{ color:#fff; margin-bottom:12px; max-width:19ch; }
.cta p{ color:rgba(255,255,255,.88); margin:0; max-width:46ch; }
.cta__actions{ display:flex; gap:14px; flex-wrap:wrap; }
.cta .btn--ghost-light{ border-color:rgba(255,255,255,.5); color:#fff; }
.cta .btn--ghost-light:hover{ background:#fff; color:var(--brand); border-color:#fff; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ max-width:880px; margin-inline:auto; display:grid; gap:12px; }
.faq__item{
  background:var(--card); border:1px solid var(--ln);
  border-radius:var(--radius); overflow:hidden;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.faq__item.is-open{ border-color:var(--brand); box-shadow:0 6px 20px rgba(172,51,53,.10); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  background:none; border:0; text-align:left;
  padding:21px 24px;
  font-family:var(--font-head); font-weight:600; font-size:.98rem;
  letter-spacing:-.02em; color:var(--tx);
}
.faq__icon{ width:24px; height:24px; flex:none; position:relative; }
.faq__icon::before,.faq__icon::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--brand);
  border-radius:2px; transform:translate(-50%,-50%); transition:transform .28s var(--ease);
}
.faq__icon::before{ width:13px; height:2px; }
.faq__icon::after{ width:2px; height:13px; }
.faq__item.is-open .faq__icon::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .34s var(--ease); }
.faq__a > div{ padding:0 24px 22px; font-size:.93rem; color:var(--tx-2); }

/* ============================================================
   КОНТАКТЫ
   ============================================================ */
.contact{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(24px,3vw,44px); align-items:start; }

.contact__cards{ display:grid; gap:12px; margin-bottom:22px; }
.contact__card{
  display:flex; align-items:flex-start; gap:16px;
  background:var(--card); border:1px solid var(--ln);
  border-radius:var(--radius); padding:18px 20px;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
a.contact__card:hover{ border-color:var(--brand); transform:translateX(4px); }
.contact__card-icon{
  width:42px; height:42px; border-radius:11px; flex:none;
  display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-lt);
}
.contact__card-icon svg{ width:19px; height:19px; }
.contact__card-label{ display:block; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-3); margin-bottom:3px; }
.contact__card-value{ display:block; font-family:var(--font-head); font-weight:600; font-size:.98rem; color:var(--tx); letter-spacing:-.02em; overflow-wrap:anywhere; }
.contact__card-note{ display:block; font-size:.79rem; color:var(--tx-3); margin-top:3px; }

.map{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--ln); height:280px; background:var(--bg-3); }
.map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.35); }

/* Форма оформлена так же, как панель «Выезд и замер на объекте» на первом
   экране: тот же полупрозрачный фон, рамка и матовое стекло. Раньше это была
   белая карточка с жёстко прописанными тёмными цветами текста — она не
   переключалась вместе с темой и в тёмной выпадала из страницы. */
.form{
  background:var(--panel-bg); color:var(--tx);
  border:1px solid var(--ln-2);
  border-radius:var(--radius-lg); padding:clamp(24px,3vw,34px);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow-card);
}
.form h3{ color:var(--tx); margin-bottom:6px; font-size:1.25rem; }
.form__sub{ font-size:.88rem; color:var(--tx-2); margin-bottom:22px; }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:.8rem; font-weight:600; color:var(--tx-2); }
/* Звёздочка обязательного поля. Именно --brand-ink, а не --brand: карточка
   формы теперь тёмная в тёмной теме, и насыщенный красный давал на ней 2,87
   при норме 4,5 — метка «поле обязательно» просто пропадала. */
.field label span{ color:var(--brand-ink); }
/* Поля берут фон из токенов, а не из фиксированного светло-серого: иначе
   в тёмной теме они остались бы белыми пятнами на тёмной панели. */
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:.93rem; color:var(--tx);
  background:var(--wash); border:1.5px solid var(--ln);
  border-radius:10px; padding:13px 14px; width:100%;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.field textarea{ min-height:104px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand); background:var(--wash-2);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--tx-3); }

.form__consent{ display:flex; align-items:flex-start; gap:10px; font-size:.8rem; color:var(--tx-2); margin:18px 0 20px; }
.form__consent input{ margin-top:3px; accent-color:var(--brand); width:16px; height:16px; flex:none; }
.form__consent label{ cursor:pointer; }
/* Ссылка на политику живёт внутри подписи к галочке — подчёркиваем её,
   чтобы она читалась как ссылка, а не как выделенное слово. */
.form__consent a{ color:var(--brand-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.form__consent a:hover{ color:var(--brand-accent); }
.form__note{ font-size:.78rem; color:var(--tx-3); text-align:center; margin:14px 0 0; }
.form__status{
  display:none; margin-top:16px; padding:13px 16px; border-radius:10px;
  font-size:.88rem; font-weight:500;
  background:#eaf7ee; color:#1c6b37; border:1px solid #bfe6cc;
}
.form__status.is-visible{ display:block; }
.honeypot{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

/* ============================================================
   ПОДВАЛ
   ============================================================ */
.footer{ background:var(--bg-deep); color:var(--tx-3); padding:clamp(48px,6vw,78px) 0 0; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(24px,3vw,44px); padding-bottom:44px; }
.footer__about{ font-size:.88rem; color:var(--tx-3); margin:18px 0 20px; max-width:34ch; }
.footer__socials{ display:flex; gap:10px; }
.footer__socials a{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--wash-2); border:1px solid var(--ln); color:var(--tx-strong);
  transition:background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.footer__socials a:hover{ background:var(--brand); border-color:var(--brand); transform:translateY(-3px); }
.footer__socials svg{ width:18px; height:18px; }

.footer h4{
  font-family:var(--font-head); font-weight:600;
  font-size:.74rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tx-strong); margin-bottom:18px;
}
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer ul a,.footer ul li{ font-size:.88rem; color:var(--tx-3); transition:color .18s var(--ease); }
.footer ul a:hover{ color:var(--tx-strong); }
.footer__contact-line{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--tx-3); }
.footer__contact-line svg{ width:16px; height:16px; color:var(--brand-lt); flex:none; margin-top:3px; }
.footer__contact-line a{ color:var(--tx-strong); font-weight:600; }

.footer__bottom{
  border-top:1px solid var(--ln); padding:22px 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.8rem; color:var(--tx-3);
}
.footer__bottom a{ color:var(--tx-3); text-decoration:underline; text-underline-offset:2px; transition:color .18s var(--ease); }
.footer__bottom a:hover{ color:var(--tx-strong); }

/* ============================================================
   Плавающие кнопки
   ============================================================ */
.fab{ position:fixed; right:22px; bottom:22px; z-index:70; display:grid; gap:10px; }
.fab__btn{
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; color:#fff; border:0;
  box-shadow:0 10px 28px rgba(0,0,0,.34);
  transition:transform .22s var(--ease), opacity .22s var(--ease), visibility .22s;
}
.fab__btn:hover{ transform:scale(1.08); }
.fab__btn svg{ width:26px; height:26px; }
.fab__wa{ background:#25d366; }
.fab__top{ background:var(--bg-3); border:1px solid var(--ln-2); opacity:0; visibility:hidden; }
.fab__top svg{ width:20px; height:20px; }
.fab__top.is-visible{ opacity:1; visibility:visible; }

/* ============================================================
   Анимации появления — СТРАТЕГИЯ FAIL-OPEN
   ------------------------------------------------------------
   По умолчанию видно ВСЁ. Прятать разрешает только класс .anim,
   который скрипт вешает на <html> внутри первого рабочего колбэка
   IntersectionObserver. Если IO не работает (или JS не загрузился) —
   класс не появится и страница просто останется читаемой.
   Пустая страница при поломке невозможна.
   ============================================================ */
html.anim .reveal:not(.is-visible){
  opacity:0;
  transform:translateY(26px);
}
.reveal{ transition:opacity .7s var(--ease), transform .7s var(--ease); }

/* Один кадр без переходов в момент включения анимаций — иначе блоки,
   стоящие прямо под сгибом, заметно «уплывали» бы на глазах. */
html.anim-off .reveal{ transition:none !important; }

html.anim .reveal[data-delay="1"]{ transition-delay:.09s; }
html.anim .reveal[data-delay="2"]{ transition-delay:.18s; }
html.anim .reveal[data-delay="3"]{ transition-delay:.27s; }
html.anim .reveal[data-delay="4"]{ transition-delay:.36s; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  html.anim .reveal:not(.is-visible){ opacity:1; transform:none; }
  .hero__ring{ animation:none; }
  .wire i{ animation:none; opacity:0; }
  .ticker__track{ animation:none; }
}

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width:1080px){
  .projects{ grid-template-columns:repeat(3,1fr); gap:16px; }
}

@media (max-width:1100px){
  /* Логотип + меню из шести пунктов + переключатель + кнопка в эту ширину
     уже не влезают. Кнопку прячем раньше меню: её роль дублируют пункт
     «Контакты», плавающая кнопка WhatsApp и призыв в самом hero. */
  .header__cta{ display:none; }
  .svcs{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(3,1fr); row-gap:34px; }
  .step:nth-child(3) .step__line{ display:none; }
  .about{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:960px){
  /* Ниже 960 первый экран становится одноколоночным — заголовку доступна вся
     ширина, и при общем размере он схлопывался в одну тонкую строку.
     Здесь шкала круче, чтобы он остался в две строки и держал вес. */
  .hero h1{ font-size:clamp(1.72rem, 4.3vw, 2.5rem); }
  :root{ --header-h:66px; }
  .nav,.header__cta{ display:none; }
  /* Логотип + переключатель + бургер должны уместиться в узкую шапку:
     широкий шаг флекса тут выдавливал бургер за край контейнера */
  .header__inner{ gap:12px; }
  .theme-toggle{ margin-left:auto; }
  .burger{ margin-left:6px; }
  .burger{ display:flex; }
  .hero__inner{ grid-template-columns:1fr; }
  .hero__ring{ width:min(72vw,380px); right:-14%; top:-5%; opacity:.11; }
  .contact{ grid-template-columns:minmax(0,1fr); }
  .topbar__list .topbar__item:not(:first-child){ display:none; }
}

@media (max-width:640px){
  /* Строка фактов требует 570 px; ниже 640 она переносится, и разделитель,
     нарисованный слева от пункта, повис бы отдельной палкой в начале строки.
     Поэтому здесь она становится столбиком, а разделители убираются. */
  .hero__facts{ flex-direction:column; align-items:flex-start; gap:11px; }
  .hero__facts li + li::before{ display:none; }
  :root{ --gutter:18px; }
  .topbar__inner{ justify-content:center; }
  .topbar__list{ gap:14px; }
  .svcs{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .step__line{ display:none !important; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  /* Базовая ширина 168px не даёт двум плашкам встать в ряд на 375px,
     и одиннадцать брендов вытягивались бы в одну длинную колонку */
  .brand{ flex-basis:124px; max-width:none; min-height:112px; padding:16px 12px; }

  /* Длинные подписи кнопок («Смотреть работы в Instagram») на узком экране
     не помещаются в одну строку — здесь перенос важнее компактности */
  .btn{ white-space:normal; text-align:center; }
  .projects{ grid-template-columns:repeat(2,1fr); gap:12px; }
  /* Плашки марок: при базовой ширине 104 px их на телефоне вставало
     по две в ряд, и блок из тридцати восьми марок вытягивался
     на три тысячи пикселей. Здесь они мельче — по три в ряд. */
  .brand{ flex:1 1 84px; max-width:none; min-height:54px; padding:8px 7px; }
  .brand__ph, .brand--text{ font-size:.7rem; }
  .form__grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:32px; }
  .cta__inner{ flex-direction:column; align-items:flex-start; }
  .btn{ padding:15px 22px; }
  .btn--lg{ padding:17px 26px; }
  .hero__actions .btn{ flex:1 1 100%; }
  .hero__panel{ padding:24px; }
  .fab{ right:16px; bottom:16px; }
}

/* ============================================================
   Совсем узкие экраны (от 320 px — iPhone SE и подобные)
   ============================================================ */
/* Ниже 420 px две колонки не держат самую длинную плашку отрасли
   («Промышленность» просит 153 px, а в карточке остаётся 106) — слово
   неразрывное, и его срезало краем карточки. Переходим на одну колонку:
   шесть — по-прежнему целое число рядов, свёрнутая сетка не рвётся. */
@media (max-width:420px){
  .projects{ grid-template-columns:1fr; gap:14px; }
}

@media (max-width:400px){
  /* Подпись под названием съедает ширину, из-за которой бургер вылезал
     за край. Знак и «CABLEWORK» и без неё читаются однозначно. */
  .logo__sub{ display:none; }
  .logo__text{ font-size:1.02rem; }
  .logo{ gap:9px; }
  .header__inner{ gap:8px; }
}

/* ============================================================
   ФИРМЕННЫЕ АКЦЕНТЫ
   ------------------------------------------------------------
   Знак задуман как сквозной мотив, а не как одна картинка в hero.
   Здесь он появляется водяным знаком в углу чередующихся секций.
   Вставлен фоном, а не разметкой: работает без JS и не добавляет
   лишних узлов в каждую секцию.
   ============================================================ */
.section--alt{ position:relative; overflow:hidden; }
.section--alt::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  right:-7%; bottom:-22%;
  width:min(40vw, 460px); aspect-ratio:1;
  opacity:var(--watermark, .06);
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%23AC3335'%3E%3Cpath d='M196.316 73.108 A100 100 0 1 1 129.404 4.421 L115.143 50.777 A51.5 51.5 0 1 0 149.603 86.15 Z'/%3E%3Cpath d='M131.222 43.675 A64.4 64.4 0 0 1 156.209 68.566 L149.401 72.373 A56.6 56.6 0 0 0 127.44 50.497 Z'/%3E%3Cpath d='M139.027 29.593 A80.5 80.5 0 0 1 170.261 60.707 L163.715 64.368 A73 73 0 0 0 135.391 36.153 Z'/%3E%3Cpath d='M146.445 16.211 A95.8 95.8 0 0 1 183.615 53.239 L176.895 56.997 A88.1 88.1 0 0 0 142.712 22.946 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.section--alt > .container{ position:relative; z-index:1; }

/* Полоса прочтения: тонкая линия сверху, показывает, сколько осталось.
   На длинной одностраничнице это единственный ориентир по глубине. */
.progress{
  position:fixed; top:0; left:0; z-index:90;
  height:3px; width:0; max-width:100%;
  background:linear-gradient(90deg, var(--brand), var(--brand-lt));
  pointer-events:none;
}

/* Импульс, бегущий по соединителю между этапами — та же метафора сигнала
   в кабеле, что и в hero */
.step__line{ position:relative; overflow:hidden; }
.step__line::after{
  content:''; position:absolute; top:0; left:-34px;
  width:34px; height:2px;
  background:linear-gradient(90deg, transparent, var(--brand), transparent);
  animation:stepPulse 2.8s linear infinite;
}
.step:nth-child(2) .step__line::after{ animation-delay:.35s; }
.step:nth-child(3) .step__line::after{ animation-delay:.7s; }
.step:nth-child(4) .step__line::after{ animation-delay:1.05s; }
@keyframes stepPulse{ 0%{ left:-34px; } 100%{ left:100%; } }

/* Блик по главной кнопке при наведении */
.btn--primary{ position:relative; overflow:hidden; }
.btn--primary::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 36%, rgba(255,255,255,.20) 50%, transparent 64%);
  transform:translateX(-130%);
  transition:transform .6s var(--ease);
}
.btn--primary:hover::after{ transform:translateX(130%); }

/* Красная полоса, прочерчивающаяся по верху карточки объекта */
.project{ position:relative; }
.project::after{
  content:''; position:absolute; left:0; right:0; top:0; height:3px; z-index:4;
  background:var(--brand);
  transform:scaleX(0); transform-origin:left;
  transition:transform .38s var(--ease);
}
.project:hover::after{ transform:scaleX(1); }

/* Заголовки не должны оставлять одно слово на последней строке */
h1, h2, h3, .section-head p{ text-wrap:balance; }


/* На узком экране текст идёт во всю ширину, поэтому боковая подложка
   не спасает — здесь она сплошная, сверху вниз. */
@media (max-width:960px){
  .hero__bg{
    background:
      radial-gradient(900px 520px at 78% 6%, var(--hero-glow-1), transparent 62%),
      var(--hero-scrim-v);
  }

  /* Первый экран на телефоне высокий, и снимок, растянутый на всю его высоту,
     раздувался в полтора раза и обрезался в узкую вертикальную полосу.
     Ограничиваем слой по высоте — тогда кадр почти совпадает с исходным
     соотношением — и растворяем его книзу, чтобы граница не читалась. */
  .hero__photos{
    bottom:auto; height:min(72vh, 660px);
    -webkit-mask-image:linear-gradient(to bottom, #000 58%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 58%, transparent 100%);
  }
}

@media (prefers-reduced-motion:reduce){
  .hero__photos .shot.is-active img{ animation:none; transform:scale(1.06); }
}

/* Состав выполненных работ на карточке объекта.
   Плашками, а не строкой: у части объектов работа всего одна, и фразой
   она смотрелась бы куце, а у Binom их пять — перечисление занимало бы
   три строки. */
.project__works{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:5px;
}
.project__works li{
  font-size:.66rem; line-height:1.2;
  color:var(--tx-2);
  background:var(--wash); border:1px solid var(--ln);
  border-radius:6px; padding:4px 7px;
  overflow-wrap:anywhere;
  transition:border-color .22s var(--ease), color .22s var(--ease);
}
.project:hover .project__works li{ border-color:rgba(172,51,53,.34); color:var(--tx); }

/* ============================================================
   ЮРИДИЧЕСКИЕ СТРАНИЦЫ (privacy.html)
   Отдельный текстовый макет: узкая колонка ради длины строки,
   крупный межстрочный интервал, нумерация разделов автоматом —
   при добавлении пункта не придётся перебивать номера руками.
   ============================================================ */
.legal{ }
.legal__inner{ max-width:840px; }

/* Шапка служебной страницы: слева знак, справа тема и путь назад.
   На главной середину занимает меню, здесь его нет — растягиваем зазор. */
.header__inner--legal{ justify-content:space-between; }
.header__inner--legal .theme-toggle{ margin-left:auto; }

.legal h1{ overflow-wrap:anywhere; }

.legal__meta{
  font-size:.86rem; line-height:1.6; color:var(--tx-3);
  padding:0 0 26px; margin:0 0 8px;
  border-bottom:1px solid var(--ln);
}
.legal__meta time{ color:var(--tx-2); font-weight:600; }

.legal h2{
  font-size:clamp(1.05rem, 2vw, 1.28rem);
  line-height:1.3;
  margin:44px 0 14px;
  padding-left:0;
  scroll-margin-top:calc(var(--header-h) + 16px);
}
/* Номер раздела остаётся в разметке — на разделы политики ссылаются,
   и они должны читаться даже без стилей. CSS только красит его. */
.legal__num{ color:var(--brand-ink); font-weight:700; margin-right:4px; }

.legal p{
  font-size:.95rem; line-height:1.75; color:var(--tx-2);
  margin:0 0 14px;
}
.legal p strong{ color:var(--tx-strong); font-weight:600; }
/* :not(.btn) обязательно — иначе правило перекрашивает и кнопку возврата,
   у которой красный фон, и белый текст на нём становится нечитаемым. */
.legal a:not(.btn){ color:var(--brand-ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.legal a:not(.btn):hover{ color:var(--brand-accent); }

.legal__list{
  list-style:none; margin:0 0 16px; padding:0;
  display:grid; gap:9px;
}
.legal__list li{
  position:relative; padding-left:20px;
  font-size:.95rem; line-height:1.7; color:var(--tx-2);
}
.legal__list li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:2px;
  background:var(--brand-lt);
}
.legal__list li strong{ color:var(--tx-strong); font-weight:600; }

/* Выделенный блок. Первый — предупреждение владельцу сайта о незаполненных
   реквизитах, второй — по-настоящему важный для посетителя пункт о WhatsApp. */
.legal__callout{
  background:var(--card); border:1px solid var(--ln);
  border-left:3px solid var(--brand);
  border-radius:var(--radius);
  padding:18px 20px; margin:22px 0 26px;
  font-size:.92rem; line-height:1.7; color:var(--tx-2);
}
.legal__callout strong{ color:var(--tx-strong); }
.legal__callout p{ margin:0 0 12px; font-size:inherit; }
.legal__callout p:last-child{ margin-bottom:0; }
.legal__callout code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.85em; background:var(--wash); border:1px solid var(--ln);
  border-radius:4px; padding:1px 5px; color:var(--tx-strong);
}
.legal__callout--note{ background:var(--wash); border-left-color:var(--brand-accent); }

.legal__foot{
  margin-top:52px; padding-top:30px;
  border-top:1px solid var(--ln);
}

/* Подвал служебной страницы: полной карты разделов здесь не нужно,
   достаточно контактов и кнопки возврата к форме. */
.footer__legal-row{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:18px 28px;
  padding:34px 0;
}
/* Через .footer: правило .footer ul выше по весу и иначе разложило бы
   контакты в колонку. */
.footer .footer__legal-contacts{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 26px;
}

@media (max-width:600px){
  .legal h2{ margin-top:36px; }
  .legal__callout{ padding:16px; }
  .footer__legal-row{ padding:26px 0; }
}

@media (max-width:560px){
  /* Логотип, переключатель темы и кнопка возврата в одну строку на узком
     экране не помещаются. Прячем подпись кнопки — стрелки достаточно,
     имя для скринридера остаётся в aria-label. */
  .legal-back span{ display:none; }
  .legal-back{ padding-inline:11px; }
  .header__inner--legal{ gap:10px; }
}