/* ==== СтройТехно — единый стиль ==== */
:root{
  --y:#FFC107;
  --y2:#FFD54A;
  --y-dark:#E0A800;
  --bg:#0B0B0B;
  --bg2:#141414;
  --card:#1A1A1A;
  --line:#2A2A2A;
  --text:#FFFFFF;
  --muted:#B5B5B5;
  --danger:#EF4444;
  --ok:#22C55E;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-y:0 8px 24px rgba(255,193,7,.28);
}

*{box-sizing:border-box;margin:0;padding:0;min-width:0}
html,body{overflow-x:hidden;max-width:100%}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope','Inter',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}

.container{max-width:1240px;margin:0 auto;padding:0 24px}

/* ==== HEADER ==== */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,11,11,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;gap:20px;
  min-height:72px;
}
.logo{display:flex;align-items:center;gap:2px;font-weight:900;font-size:20px;letter-spacing:.5px}
.logo-mark{
  width:96px;height:96px;
  display:grid;place-items:center;
  flex-shrink:0;
  margin-right:-8px;
}
.logo-mark img{width:100%;height:100%;object-fit:contain;display:block;transform:scale(1.15)}
.logo-mark svg{width:26px;height:26px;color:#0B0B0B}
.logo-text{line-height:1}
.logo-text small{display:block;font-size:10px;color:var(--muted);font-weight:600;letter-spacing:1.2px;margin-top:3px}

.nav{display:flex;gap:4px;flex-wrap:nowrap;min-width:0;flex:1;justify-content:center;position:relative}
.nav a{
  padding:8px 10px;border-radius:8px;
  font-size:13px;font-weight:600;color:#DDD;
  transition:color .25s ease;
  white-space:nowrap;
  position:relative;z-index:1;
}
/* Текущая страница помечена ЖЁЛТЫМ и помечена всегда — независимо от того,
   где сейчас стоит капсула. Раньше здесь было color:#000 в расчёте на то, что
   капсула под пунктом никуда не денется. Но она уезжает под курсор, и пункт
   текущей страницы оставался чёрным текстом на чёрной шапке — то есть
   исчезал. Цвет активного пункта не должен зависеть от положения мыши. */
.nav a.active{color:var(--y)}

/* А чёрным красим только тот пункт, под которым капсула стоит ПРЯМО СЕЙЧАС.
   Класс вешает JS вместе с перемещением капсулы, поэтому текст чернеет ровно
   там, где под ним появился жёлтый фон. Правило идёт после .active намеренно:
   специфичность у них одинаковая, спор решает порядок. */
.nav a.is-lit{color:#000}

/* Бегунок под курсором. Одна жёлтая капсула на всё меню, а не фон у каждого
   пункта: она переезжает от ссылки к ссылке, растягиваясь под их ширину.
   Координаты и размеры ставит JS (initNavPill), здесь только вид и плавность.
   Если JS не отработал — капсула прозрачна и лежит нулевой ширины, меню
   при этом полностью рабочее. */
.nav-pill{
  position:absolute;top:0;left:0;
  width:0;height:0;
  border-radius:999px;
  background:var(--y);
  opacity:0;
  z-index:0;pointer-events:none;
  transition:left .34s cubic-bezier(.2,.8,.2,1),
             width .34s cubic-bezier(.2,.8,.2,1),
             opacity .22s ease;
}

.header-phone{
  display:flex;flex-direction:column;align-items:center;
  padding:10px 20px;
  background:var(--y);color:#000;
  border-radius:12px;
  transition:.2s;
  white-space:nowrap;flex-shrink:0;
  line-height:1;text-decoration:none;
}
.header-phone:hover{transform:translateY(-2px);box-shadow:var(--shadow-y)}
.header-phone .phone-num{font-weight:900;font-size:17px;color:#000;letter-spacing:.3px}
.header-phone .phone-sub{
  font-weight:700;font-size:12px;color:#000;
  margin-top:5px;opacity:.85;
  display:flex;align-items:center;gap:6px;
}
.header-phone .phone-sub .live-dot{width:7px;height:7px}

.burger{display:none;width:44px;height:44px;border-radius:10px;background:var(--card);border:1px solid var(--line);flex-shrink:0}
.burger span{display:block;width:20px;height:2px;background:var(--y);margin:4px auto;transition:.2s}

/* ==== HERO ==== */
/* Фото стройки убрано. Фон hero — ЧИСТЫЙ #000, не #0B0B0B как у остального
   сайта, и это не опечатка. Чёрный внутри mp4 хранится как Y′=16 и после
   перевода в RGB даёт ровно 0. Замер скриншота: кадр #010101, страница
   #0B0B0B — разница в 11 ступеней, глаз её ловит как силуэт прямоугольника.
   Подгоняем страницу под ролик, а не наоборот. Шва с соседями нет: сверху
   полупрозрачная шапка, снизу секция с фото и градиентом. */
.hero{
  position:relative;
  padding:80px 0 100px;
  background:#000;
  overflow:hidden;
}
.hero::before{display:none}

#particles-hero{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
#particles-hero .particle{
  position:absolute;
  bottom:-20px;
  width:4px;height:4px;
  border-radius:50%;
  background:rgba(255,193,7,.7);
  box-shadow:0 0 6px rgba(255,193,7,.5);
  animation:heroFloat 14s linear infinite;
  will-change:transform,opacity;
}
@keyframes heroFloat{
  0%{transform:translate3d(0,0,0);opacity:0}
  10%{opacity:1}
  90%{opacity:.9}
  100%{transform:translate3d(30px,-110vh,0);opacity:0}
}
#particles-hero .particle:nth-child(3n){background:rgba(255,255,255,.55);box-shadow:0 0 5px rgba(255,255,255,.35);width:2px;height:2px}
#particles-hero .particle:nth-child(5n){background:rgba(232,197,114,.6);box-shadow:0 0 7px rgba(232,197,114,.4);width:3px;height:3px}
#particles-hero .particle:nth-child(7n){width:5px;height:5px;background:rgba(255,224,130,.65)}
#particles-hero .particle:nth-child(1){left:3%;animation-delay:0s;animation-duration:12s}
#particles-hero .particle:nth-child(2){left:7%;animation-delay:2.4s;animation-duration:15s}
#particles-hero .particle:nth-child(3){left:11%;animation-delay:5.1s;animation-duration:18s}
#particles-hero .particle:nth-child(4){left:15%;animation-delay:0.7s;animation-duration:13s}
#particles-hero .particle:nth-child(5){left:19%;animation-delay:3.8s;animation-duration:16s}
#particles-hero .particle:nth-child(6){left:23%;animation-delay:6.2s;animation-duration:14s}
#particles-hero .particle:nth-child(7){left:27%;animation-delay:1.5s;animation-duration:17s}
#particles-hero .particle:nth-child(8){left:31%;animation-delay:4.6s;animation-duration:12s}
#particles-hero .particle:nth-child(9){left:35%;animation-delay:7.3s;animation-duration:19s}
#particles-hero .particle:nth-child(10){left:39%;animation-delay:0.3s;animation-duration:15s}
#particles-hero .particle:nth-child(11){left:43%;animation-delay:2.9s;animation-duration:13s}
#particles-hero .particle:nth-child(12){left:47%;animation-delay:5.7s;animation-duration:16s}
#particles-hero .particle:nth-child(13){left:51%;animation-delay:1.1s;animation-duration:14s}
#particles-hero .particle:nth-child(14){left:55%;animation-delay:4.2s;animation-duration:18s}
#particles-hero .particle:nth-child(15){left:59%;animation-delay:6.9s;animation-duration:12s}
#particles-hero .particle:nth-child(16){left:63%;animation-delay:0.9s;animation-duration:17s}
#particles-hero .particle:nth-child(17){left:67%;animation-delay:3.4s;animation-duration:13s}
#particles-hero .particle:nth-child(18){left:71%;animation-delay:6.6s;animation-duration:15s}
#particles-hero .particle:nth-child(19){left:75%;animation-delay:1.8s;animation-duration:19s}
#particles-hero .particle:nth-child(20){left:79%;animation-delay:4.9s;animation-duration:14s}
#particles-hero .particle:nth-child(21){left:83%;animation-delay:7.7s;animation-duration:16s}
#particles-hero .particle:nth-child(22){left:87%;animation-delay:2.1s;animation-duration:12s}
#particles-hero .particle:nth-child(23){left:91%;animation-delay:5.3s;animation-duration:18s}
#particles-hero .particle:nth-child(24){left:95%;animation-delay:8.0s;animation-duration:13s}
#particles-hero .particle:nth-child(25){left:5%;animation-delay:9.5s;animation-duration:17s}
#particles-hero .particle:nth-child(26){left:20%;animation-delay:10.2s;animation-duration:15s}
#particles-hero .particle:nth-child(27){left:38%;animation-delay:11.1s;animation-duration:16s}
#particles-hero .particle:nth-child(28){left:56%;animation-delay:8.8s;animation-duration:14s}
#particles-hero .particle:nth-child(29){left:74%;animation-delay:9.9s;animation-duration:19s}
#particles-hero .particle:nth-child(30){left:88%;animation-delay:10.6s;animation-duration:13s}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:stretch;min-width:0}
.hero-copy{padding-top:20px}
.hero-art{justify-content:space-between;min-height:100%}
.hero-copy{min-width:0}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,193,7,.14);
  color:var(--y);
  padding:8px 14px;border-radius:999px;
  font-size:13px;font-weight:700;
  border:1px solid rgba(255,193,7,.35);
  margin-bottom:24px;
}
.hero h1{
  font-size:clamp(38px,5.5vw,68px);
  line-height:1.02;
  font-weight:900;
  letter-spacing:-1px;
  margin-bottom:20px;
  text-transform:uppercase;
}
.hero h1 em{
  font-style:normal;
  position:relative;
  color:#000;
  background:var(--y);
  padding:0 16px;
  display:inline-block;
  transform:skew(-4deg);
  box-shadow:var(--shadow-y);
}
.hero p{font-size:18px;color:#D8D8D8;max-width:560px;margin-bottom:28px}

.hero-stats{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:32px}
.hero-stats .stat{background:var(--card);border:1px solid var(--line);padding:14px 18px;border-radius:12px;min-width:150px}
.hero-stats .stat b{display:block;color:var(--y);font-size:22px;font-weight:900}
.hero-stats .stat span{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}

/* «Живая» статистика — цифра работающих сейчас */
.live-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:live-pulse 1.8s ease-out infinite;
  flex-shrink:0;
}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
.live-stat b{transition:transform .5s ease, color .5s ease}
.live-stat b.tick{transform:translateY(-3px);color:#4ADE80}

.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
/* ==== КНОПКИ ====
   Объём собран из двух вещей, и обе не требуют ни одного лишнего элемента
   в разметке:
   1) background-image в два слоя — сверху световой градиент, под ним базовая
      заливка с перепадом от светлого к насыщенному;
   2) box-shadow с inset-тенями: сверху белые блики дают стекло, а
      «0 -Npx ... inset» подсвечивает НИЖНЮЮ кромку изнутри — тот самый свет,
      что всходит от нижнего края.
   Градиенты между состояниями браузер не анимирует, поэтому наведение
   меняет не картинку, а filter:brightness и тени — они переходят плавно. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 26px;border-radius:14px;
  font-weight:800;font-size:16px;
  cursor:pointer;
  border:1px solid transparent;
  transition:box-shadow .4s ease, border-color .4s ease,
             filter .3s ease, transform .25s ease, background-color .3s ease;
}
.btn-lg{padding:20px 34px;font-size:18px;border-radius:16px}

/* --- жёлтая: свет виден уже в покое --- */
.btn-primary{
  color:#000;
  background-color:var(--y);
  background-image:
    linear-gradient(0deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.35) 20%, transparent 52%),
    linear-gradient(180deg,#FFDD70 0%,var(--y) 52%,#F2AE00 100%);
  border-color:rgba(255,255,255,.45);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.75),
    inset 0 2px 3px rgba(255,255,255,.45),
    inset 0 6px 8px rgba(255,255,255,.22),
    inset 0 -10px 14px -8px rgba(255,240,190,.55),
    0 6px 22px rgba(255,193,7,.40);
}
.btn-primary:hover{
  transform:translateY(-2px);
  filter:brightness(1.07);
  border-color:rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 2px 3px rgba(255,255,255,.6),
    inset 0 6px 8px rgba(255,255,255,.3),
    inset 0 -14px 20px -8px rgba(255,255,235,.85),
    0 10px 30px rgba(255,193,7,.6);
}
.btn-primary:active{transform:translateY(0);filter:brightness(1.15)}

/* --- тёмная: стекло, зажигается от нижней кромки при наведении --- */
.btn-ghost{
  color:#fff;
  background-color:rgba(255,255,255,.03);
  border-color:rgba(255,193,7,.55);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.16),
    inset 0 2px 2px rgba(255,255,255,.10),
    inset 0 6px 8px rgba(255,255,255,.05);
}
.btn-ghost:hover{
  color:#fff;
  border-color:rgba(255,213,74,.9);
  background-color:rgba(255,193,7,.07);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.20),
    inset 0 2px 2px rgba(255,255,255,.12),
    inset 0 -12px 18px -8px rgba(255,193,7,.55),
    0 6px 22px rgba(255,193,7,.18);
}
.btn-ghost:active{
  background-color:rgba(255,193,7,.14);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.24),
    inset 0 -14px 22px -8px rgba(255,213,74,.85);
}

.hero-mini{font-size:13px;color:var(--muted)}
.hero-mini span{color:var(--y);margin:0 8px}

/* Hero art (right side) — grid без абсолютного позиционирования */
/* Колонка: орбита сверху, четыре плашки внизу. space-between прижимает
   плашки к низу колонки, а та растянута на высоту строки грида — поэтому
   нижний край плашек встаёт вровень со строкой «Работаем официально…»
   в левой колонке. */
.hero-art{
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  gap:16px;min-width:0;position:relative;
}

/* ==== ОРБИТА УСЛУГ В HERO ====
   Кольцо вращается непрерывно, в центре автоматически сменяются видео.
   Логика — initHeroOrbital() в script.js, здесь только оформление. */
/* Размер подобран под высоту левой колонки. Правая должна быть НИЖЕ левой —
   тогда высоту строки задаёт левая, а space-between прижимает плашки ровно
   к её низу, вровень со строкой «Работаем официально…».
   Бюджет: 420 (сцена) + 16 (зазор) + 140 (плашки) = 576 против ~623 слева. */
.orbit-stage{position:relative;width:420px;height:420px;max-width:92vw;}

/* Радиус кольца 170 ровно совпал с половиной высоты кадра: проходя верх
   и низ, иконка ложится на кадр примерно наполовину — но попадает в
   верхние и нижние 10% ролика, где чистый фон и персонажа нет.
   По бокам зазор 37px, кадра иконки не касаются. Узел рисуется поверх
   видео (z-index 6 против 5), наложение выглядит намеренным. */
/* Орбита — светящийся круг, диаметр 350. Связан с высотой ролика жёстко:
   ролик 250, его верхний край на 125 от центра, иконка (радиус 33) в верхней
   точке достаёт до 175−33=142. Запас над каской 17px. Уменьшать кольцо,
   не уменьшив ролик, нельзя — иконка сядет персонажу на голову.
   Свечение — два drop-shadow: они считаются по РЕАЛЬНО нарисованным
   пикселям, то есть по самой линии, а не по прямоугольнику элемента.
   box-shadow дал бы ореол вокруг всего блока, а не вдоль дуги.
   z-index 6 — выше кадра (5), ниже иконок (JS ставит им 15…25, активной 60):
   линия идёт поверх ролика не обрываясь и гаснет под значками. */
.orbit-ring{
  position:absolute;top:50%;left:50%;
  width:350px;height:350px;margin:-175px 0 0 -175px;
  border-radius:50%;
  border:1px solid rgba(255,193,7,.5);
  filter:drop-shadow(0 0 4px rgba(255,193,7,.55))
         drop-shadow(0 0 11px rgba(255,193,7,.28));
  z-index:6;
}

/* Центр — никакой коробки. Ни ширины, ни скругления, ни обрезки: фон кадра
   и фон страницы — чистый #000, границе взяться неоткуда, поэтому ролик
   просто стоит по центру и спокойно выходит за кольцо.
   Размер задаётся ТОЛЬКО высотой, ширина считается сама. Это важно: после
   подрезки пустых полей у трёх роликов разные пропорции (540×748, 540×844,
   540×902), и любой фиксированный размер с object-fit резал бы их по бокам. */
.orbit-core{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:5;line-height:0;
}
.orbit-core-inner{line-height:0}
/* Растворение по боковым краям кадра. Персонаж идёт поперёк ролика и в
   исходнике честно обрезан рамкой. Пока рамка была видна, это читалось как
   «уходит за край». Без рамки его рассекала бы пустота.
   Маска повешена на сам <video>, а не на контейнер: контейнер при
   width:auto берёт ширину по СОБСТВЕННОМУ размеру файла (540), а не по
   отрисованному (289) — градиенты уезжали в сторону и оставляли резкий
   срез по краю кадра. Маска же считается от реального бокса ролика.
   Сверху и снизу не трогаем: там поля срезаны под ноль, контент к краю
   не подходит, маска только съела бы каску. */
.orbit-core-inner video{
  height:250px;width:auto;
  display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);
}
.orbit-core-empty{
  width:150px;height:250px;border-radius:18px;
  background:radial-gradient(circle at 35% 30%, var(--y2), var(--y) 60%, #b8860b 100%);
  display:none;place-items:center;
  font-weight:900;color:#000;font-size:13px;text-align:center;line-height:1.25;
}

/* ==== ЧЕТЫРЕ ПЛАШКИ ПОД ОРБИТОЙ ==== */
.cards-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  width:100%;max-width:480px;
}
.card-feat{
  position:relative;
  display:flex;align-items:center;gap:14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:15px 16px 15px 21px;
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease;
}
/* Жёлтая засечка по левому краю */
.card-feat::before{
  content:"";position:absolute;left:0;top:13px;bottom:13px;
  width:4px;border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--y),var(--y2));
}
.card-feat svg{
  width:25px;height:25px;flex-shrink:0;
  stroke:var(--y);fill:none;stroke-width:1.7;
}
.card-feat b{display:block;font-size:15px;line-height:1.25;margin-bottom:3px}
.card-feat span{font-size:12.5px;color:var(--muted);line-height:1.3}
.card-feat:hover{transform:translateY(-2px);border-color:rgba(255,193,7,.35)}

/* Узел = сама иконка-кружок, фон и рамку не рисуем: иконка уже круглая
   и жёлтая, как фавикон.
   Неактивные гасим ЗАТЕМНЕНИЕМ, а не прозрачностью. Разница принципиальная:
   при opacity сквозь значок просвечивало бы свечение орбиты, и «гашение
   линии под иконкой» не читалось бы. brightness оставляет диск полностью
   непрозрачным — линия честно исчезает за ним. */
.orbit-node{
  position:absolute;top:50%;left:50%;
  width:66px;height:66px;margin:-33px 0 0 -33px;
  border-radius:50%;
  cursor:pointer;
  filter:grayscale(.4) brightness(.42);
  transition:filter .35s ease, box-shadow .35s ease;
  z-index:6;
}
.orbit-node img{width:100%;height:100%;display:block;border-radius:50%;pointer-events:none}
.orbit-node.active{
  filter:none;
  box-shadow:0 0 26px rgba(255,193,7,.55);
  animation:nodePulse 1.9s ease-in-out infinite;
}
/* Пульсация активного узла. Трогает ИСКЛЮЧИТЕЛЬНО box-shadow: transform у
   этих элементов занят — им initHeroOrbital раскладывает узлы по кольцу
   двадцать раз в секунду, и анимация подралась бы с ним за одно свойство.
   Второй слой тени (0 0 0 Npx) расходится кольцом и гаснет — дешёвый
   аналог расходящейся волны без единого лишнего элемента. */
@keyframes nodePulse{
  0%,100%{ box-shadow:0 0 22px rgba(255,193,7,.50), 0 0 0 0    rgba(255,193,7,.30) }
  50%    { box-shadow:0 0 38px rgba(255,193,7,.85), 0 0 0 10px rgba(255,193,7,0)   }
}
@media (prefers-reduced-motion: reduce){
  .orbit-node.active{animation:none}
}

@media(max-width:860px){
  .hero-art{gap:18px}
  .cards-grid{grid-template-columns:1fr;gap:10px;max-width:340px}
  .card-feat{padding:13px 14px 13px 19px}
  .card-feat b{font-size:14px}
  .orbit-stage{width:280px;height:280px}
  .orbit-ring{width:250px;height:250px;margin:-125px 0 0 -125px}
  .orbit-core-inner video{height:170px}
  .orbit-core-empty{width:100px;height:170px;border-radius:12px;font-size:11px}
  .orbit-node{width:52px;height:52px;margin:-26px 0 0 -26px}
}

/* ==== SECTION ==== */
section{padding:80px 0}
.section-head{text-align:center;margin-bottom:56px}
.section-eyebrow{
  color:var(--y);font-weight:800;font-size:13px;
  letter-spacing:3px;text-transform:uppercase;margin-bottom:12px;
}
.section-head h2{
  font-size:clamp(30px,3.6vw,46px);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.5px;
  line-height:1.1;
}
.section-head h2 em{font-style:normal;color:var(--y)}
.section-head p{color:var(--muted);max-width:640px;margin:14px auto 0;font-size:16px}

/* ==== SERVICES GRID ==== */
/* Наследие: класс .services в разметке сайта больше не используется —
   сетку услуг на главной рисует .service-cards ниже. Оставлен на случай,
   если где-то всплывёт старый блок. */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.service{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  transition:.25s;
  position:relative;overflow:hidden;
}
.service::before{
  content:"";position:absolute;left:0;top:0;
  height:4px;width:0;background:var(--y);transition:.3s;
}
.service:hover{transform:translateY(-6px);border-color:var(--y);background:#1F1F1F}
.service:hover::before{width:100%}
.service .ico{
  width:56px;height:56px;border-radius:12px;
  background:rgba(255,193,7,.14);
  display:grid;place-items:center;
  margin-bottom:16px;
  transition:.25s;
}
.service .ico svg{width:32px;height:32px;color:var(--y)}
.service:hover .ico{background:var(--y)}
.service:hover .ico svg{color:#000}
.service h3{font-size:19px;font-weight:900;margin-bottom:10px}
.service p{font-size:14px;color:var(--muted);margin-bottom:14px;min-height:60px}
.service .more{color:var(--y);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.service .more::after{content:"→";transition:.2s}
.service:hover .more::after{transform:translateX(4px)}

/* ==== REVEAL-ON-SCROLL ====
   Класс .reveal вешает JS — без JS контент остаётся видимым как обычно.
   Пользователям с включённым «уменьшить движение» эффект не назначается
   (проверка в script.js), поэтому дублировать media-запрос здесь не нужно. */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.16,.8,.3,1);
  will-change:opacity, transform;
}
.reveal-in{
  opacity:1;
  transform:translateY(0);
}

/* ==== SERVICE CARDS (фото-карточки) ====
   ЭТО и есть сетка услуг на главной. Не путать с .services выше — тот класс
   остался от прежней версии с иконками и в разметке больше не встречается.
   Три колонки: шесть услуг ложатся в два ровных ряда по горизонтали.
   Карточки при этом уменьшаются примерно в полтора раза против двух колонок. */
.service-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.service-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-decoration:none;
  color:inherit;
  border-radius:18px;
  background:#121212;
  border:1px solid var(--line);
  padding:10px;
  position:relative;
  isolation:isolate; /* держит зарево под своей карточкой, не пускает под соседей */
  gap:12px;

  /* Наклон за курсором. transform ставит JS (initCardTilt) покадрово, поэтому
     его НЕТ в transition: с переходом карточка тянулась бы за мышью с
     задержкой и ощущалась вязкой. Плавность даёт сам поток событий.
     Переход включается только на возврат — классом .is-resetting.
     preserve-3d нужен, чтобы кнопка и фото могли выйти вперёд по оси Z;
     без него оба слоя схлопнутся в плоскость и наклон превратится в
     перекошенную картинку. */
  transition:border-color .3s ease;
  transform-style:preserve-3d;
  will-change:transform;
}
.service-card.is-resetting{
  transition:transform .55s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.service-card img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  transition:transform .35s ease;
  position:relative;
  z-index:1;
}
/* Подъём карточки перенесён в JS: он теперь часть общей строки transform
   вместе с наклоном. Оставить его здесь означало бы, что :hover перебивает
   инлайновый transform или наоборот — в любом случае одно из двух пропадёт.
   Резерв на случай отключённого JS или reduced-motion: */
@media (prefers-reduced-motion: reduce){
  .service-card{transition:transform .25s ease, border-color .3s ease}
  .service-card:hover{transform:translateY(-6px)}
}
/* Картинка и кнопка выходят вперёд по оси Z — при наклоне они разъезжаются
   относительно фона карточки, отсюда ощущение слоёв, а не наклейки. */
.service-card:hover img{transform:translateZ(18px) scale(1.02)}

/* ==== ПОДСВЕТКА КАРТОЧКИ: два слоя ====
   Слой 1 (::after) — мягкое размытое зарево ЗА карточкой. Работает везде,
   включая тачскрины. Даёт ощущение подсвеченного объекта без резких линий.
   Слой 2 (::before) — яркая кромка, следующая за курсором. Приём: градиент
   на всю карточку, маска вырезает середину, остаётся только кант толщиной
   в padding. Только для настоящей мыши — на тачскринах :hover залипает. */

.service-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:var(--y);
  filter:blur(24px);
  opacity:0;
  transition:opacity .4s ease;
  z-index:-1;
  pointer-events:none;
}
.service-card:hover::after{opacity:.42}

@media (hover: hover) and (pointer: fine){
  .service-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:4px;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
                #FFFFFF 0%, var(--y2) 16%, rgba(255,193,7,.8) 44%, transparent 72%);
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity:0;
    transition:opacity .35s ease;
    pointer-events:none;
    z-index:2;
  }
  .service-card:hover::before{opacity:1}
}

/* на тач-устройствах канта нет — даём отклик рамкой при нажатии */
@media (hover: none),(pointer: coarse){
  .service-card:active{border-color:rgba(255,193,7,.6)}
}
/* Кнопка внутри карточки услуги — тот же приём, что у .btn-primary */
.service-card-btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  color:#000;
  padding:14px 20px;
  border-radius:14px;
  font-weight:800;
  font-size:15px;
  text-align:center;
  border:1px solid rgba(255,255,255,.45);
  background-color:var(--y);
  background-image:
    linear-gradient(0deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.35) 20%, transparent 52%),
    linear-gradient(180deg,#FFDD70 0%,var(--y) 52%,#F2AE00 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.75),
    inset 0 2px 3px rgba(255,255,255,.45),
    inset 0 6px 8px rgba(255,255,255,.22),
    inset 0 -10px 14px -8px rgba(255,240,190,.55),
    0 6px 18px rgba(255,193,7,.25);
  transition:box-shadow .4s ease, border-color .4s ease,
             filter .3s ease, transform .25s ease;
}
.service-card:hover .service-card-btn{
  transform:translateZ(38px) translateY(-2px);
  filter:brightness(1.07);
  border-color:rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 2px 3px rgba(255,255,255,.6),
    inset 0 6px 8px rgba(255,255,255,.3),
    inset 0 -14px 20px -8px rgba(255,255,235,.85),
    0 10px 26px rgba(255,193,7,.45);
}
@media(max-width:960px){
  .service-cards{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media(max-width:520px){
  .service-cards{grid-template-columns:1fr;gap:14px}
  .service-card-btn{padding:12px 18px;font-size:14px}
}

/* ==== БЛОК ВОПРОСОВ С ПРИЗЫВОМ ПОЗВОНИТЬ ====
   Раскрывашки собраны на <details>/<summary> — это родной механизм браузера,
   ни строчки JS. Работает при выключенном скрипте, доступно с клавиатуры,
   поисковик видит весь текст, даже когда ответ свёрнут. */
.faq-acc{display:grid;gap:12px;max-width:900px;margin:0 auto}

.faq-q{
  background:#141414;
  border:1px solid var(--line);
  border-left:3px solid var(--y);
  border-radius:12px;
  overflow:hidden;
  transition:border-color .25s ease, background .25s ease;
}
.faq-q:hover{background:#181818;border-color:rgba(255,193,7,.3);border-left-color:var(--y)}
.faq-q[open]{background:#181818;border-left-width:4px}

.faq-q summary{
  list-style:none;cursor:pointer;
  padding:20px 56px 20px 24px;
  font-size:17px;font-weight:800;line-height:1.35;
  color:#fff;position:relative;
  user-select:none;
}
.faq-q summary::-webkit-details-marker{display:none}
/* Плюс, превращающийся в минус */
.faq-q summary::after{
  content:"";position:absolute;right:24px;top:50%;
  width:14px;height:2px;background:var(--y);
  transform:translateY(-50%);
}
.faq-q summary::before{
  content:"";position:absolute;right:30px;top:50%;
  width:2px;height:14px;background:var(--y);
  transform:translateY(-50%);
  transition:transform .25s ease, opacity .25s ease;
}
.faq-q[open] summary::before{transform:translateY(-50%) scaleY(0);opacity:0}

.faq-a{padding:0 24px 22px}
.faq-a p{color:#C8C8C8;font-size:15px;line-height:1.65;margin-bottom:12px}
.faq-a p:last-child{margin-bottom:0}
.faq-a b{color:#fff}
.faq-cta{
  margin-top:14px !important;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:14px !important;
  color:var(--muted) !important;
}
.faq-cta a{
  color:var(--y);font-weight:800;
  border-bottom:1px solid rgba(255,193,7,.4);
  transition:border-color .2s ease;
  white-space:nowrap;
}
.faq-cta a:hover{border-bottom-color:var(--y)}

/* Плашка с телефоном в конце блока */
.faq-callout{
  max-width:900px;margin:32px auto 0;
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;
  padding:28px 32px;border-radius:16px;
  background:radial-gradient(600px 200px at 15% 0%, rgba(255,193,7,.14), transparent 70%), #131313;
  border:1px solid rgba(255,193,7,.3);
}
.faq-callout-text{min-width:0;flex:1 1 320px}
.faq-callout-text b{display:block;font-size:20px;font-weight:900;margin-bottom:6px}
.faq-callout-text span{color:var(--muted);font-size:14.5px;line-height:1.55;display:block}
.faq-callout .btn{flex-shrink:0}

@media(max-width:720px){
  .faq-q summary{padding:16px 48px 16px 18px;font-size:15.5px}
  .faq-a{padding:0 18px 18px}
  .faq-a p{font-size:14.5px}
  .faq-callout{padding:22px;flex-direction:column;align-items:stretch;text-align:center;gap:18px}
  .faq-callout .btn{width:100%}
}

/* ==== ЖЕНЯ: шестая ячейка сетки услуг ====
   Не услуга, а персонаж. Зацикленный ролик, ни строчки скрипта.

   Фигура вынута из потока (position:absolute) по той же причине, что и
   раньше: ролик вертикальный, 540×960, и в обычном потоке он задал бы высоту
   всему ряду сетки — соседние карточки услуг растянулись бы вслед за ним,
   оставив под кнопкой пустое поле в пол-экрана. Теперь ряд меряется по
   карточкам, а Женя вписывается в то, что получилось.

   Ни фона, ни рамки, ни скругления: чёрный внутри кадра совпадает с фоном
   секции (#000), границам взяться неоткуда. */
.zhenya{
  position:relative;
  overflow:hidden;
  min-height:0;
}
.zhenya video{
  position:absolute;
  left:50%;bottom:0;
  height:100%;width:auto;
  transform:translateX(-50%);
  display:block;
}

/* В три и в две колонки Женя всегда стоит в ряду рядом с карточкой услуги —
   высоту ряда задаёт она. А в одну колонку (до 520px) он остаётся в ряду
   один, мерить не по чему, и ячейка схлопнулась бы в ноль. */
@media (max-width:520px){
  .zhenya{min-height:320px}
}

/* ==== PRICES ==== */
.price-table{
  display:grid;
  gap:10px;
  max-width:820px;
  margin:0 auto;
}
.price-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 24px;
  background:#161616;
  border:1px solid var(--line);
  border-left:4px solid var(--y);
  border-radius:12px;
  transition:.2s;
  gap:20px;
}
.price-row:hover{
  background:#1C1C1C;
  transform:translateX(4px);
  border-left-width:6px;
  box-shadow:-4px 0 20px rgba(255,193,7,.12);
}
.price-row .price-value b{transition:color .25s ease}
.price-row:hover .price-value b{color:var(--y2)}
.price-service{flex:1;min-width:0}
.price-service b{
  display:block;
  font-size:17px;
  font-weight:900;
  color:#fff;
  line-height:1.2;
}
.price-service small{
  color:var(--muted);
  font-size:13px;
  display:block;
  margin-top:4px;
}
.price-value{
  font-size:14px;
  color:#B0B0B0;
  white-space:nowrap;
  font-weight:600;
}
.price-value b{
  color:var(--y);
  font-size:24px;
  font-weight:900;
  margin:0 4px;
}
.price-note{
  margin-top:36px;
  padding:24px 28px;
  background:rgba(255,193,7,.08);
  border:1px solid rgba(255,193,7,.3);
  border-radius:14px;
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}
.price-note b{
  display:block;
  font-size:16px;
  font-weight:900;
  color:var(--y);
  margin-bottom:12px;
}
.price-note ul{
  list-style:none;padding:0;margin:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px 20px;
}
.price-note ul li{
  padding-left:22px;
  position:relative;
  color:#E0E0E0;
  font-size:14px;
  line-height:1.5;
}
.price-note ul li::before{
  content:"✓";
  position:absolute;left:0;top:0;
  color:var(--y);
  font-weight:900;
}
@media(max-width:720px){
  .price-row{padding:14px 18px;flex-wrap:wrap}
  .price-value b{font-size:20px}
  .price-note ul{grid-template-columns:1fr}
  .price-note{padding:18px 22px}
}

/* ==== EXTENDED CONTENT (SEO blocks на подстраницах) ==== */
.content-ext{padding:60px 0}
.content-ext .section-head{margin-bottom:36px}
.steps-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1100px;margin:0 auto}
.step-mini{
  background:#161616;border:1px solid var(--line);border-radius:14px;
  padding:22px;position:relative;
  border-top:3px solid var(--y);
}
.step-mini .num{
  position:absolute;top:-18px;left:22px;
  width:36px;height:36px;border-radius:50%;
  background:var(--y);color:#000;
  display:grid;place-items:center;
  font-weight:900;font-size:17px;
  box-shadow:0 4px 12px rgba(255,193,7,.3);
}
.step-mini h3{font-size:17px;font-weight:900;margin:16px 0 8px;line-height:1.2}
.step-mini p{color:var(--muted);font-size:13px;line-height:1.5;margin:0}

.areas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:900px;margin:0 auto}
.area-col{
  background:rgba(255,193,7,.06);
  border:1px solid rgba(255,193,7,.2);
  border-radius:14px;padding:22px;
}
.area-col h4{
  color:var(--y);font-size:16px;font-weight:900;
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:10px;
}
.area-col p{color:#D0D0D0;font-size:14px;line-height:1.55;margin:0}

.faq-list{display:grid;gap:12px;max-width:900px;margin:0 auto}
.faq-item{
  background:#161616;border:1px solid var(--line);
  border-left:3px solid var(--y);
  border-radius:12px;padding:20px 24px;
  transition:.2s;
}
.faq-item:hover{background:#1A1A1A}
.faq-item h3{
  font-size:16px;font-weight:800;color:#fff;
  margin:0 0 8px;line-height:1.35;
}
.faq-item p{color:#B0B0B0;font-size:14px;line-height:1.6;margin:0}

@media(max-width:960px){
  .steps-mini{grid-template-columns:repeat(2,1fr);gap:26px}
  .areas-grid{grid-template-columns:1fr;gap:14px}
}
@media(max-width:520px){
  .steps-mini{grid-template-columns:1fr}
  .content-ext{padding:40px 0}
  .faq-item{padding:16px 18px}
  .faq-item h3{font-size:15px}
}

/* ==== HOW WE WORK: таймлайн с прогресс-линией ====
   Узлы соединены линией, которая заполняется жёлтым по мере прокрутки.
   Заполнение считает JS (initStepsFlow в script.js), CSS только рисует. */
.steps-flow{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  position:relative;
}
.steps-track{
  position:absolute;top:34px;left:12.5%;right:12.5%;
  height:2px;background:rgba(255,255,255,.1);
  z-index:0;
}
.steps-track-fill{
  position:absolute;top:0;left:0;height:100%;width:0%;
  background:linear-gradient(90deg,var(--y),var(--y2));
  transition:width 1.2s cubic-bezier(.16,.8,.3,1);
}
.step-node{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 20px;
  opacity:0;transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.step-node.visible{opacity:1;transform:translateY(0)}
.step-badge{
  width:68px;height:68px;border-radius:50%;
  background:#161616;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;position:relative;
  transition:border-color .5s ease, background .5s ease, box-shadow .5s ease;
}
.step-node.visible .step-badge{
  border-color:var(--y);
  background:radial-gradient(circle at 35% 30%, #241d08, #161616 70%);
  box-shadow:0 0 24px rgba(255,193,7,.25);
}
.step-badge svg{width:26px;height:26px;stroke:var(--y)}
.step-num{
  position:absolute;top:-8px;right:-8px;
  width:24px;height:24px;border-radius:50%;
  background:var(--y);color:#000;
  font-size:11px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  font-family:'Manrope',sans-serif;
}
.step-node h3{font-size:17px;font-weight:800;margin:0 0 8px}
.step-node p{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0;max-width:220px}

@media(max-width:860px){
  .steps-flow{grid-template-columns:1fr;gap:36px}
  .steps-track{top:0;bottom:0;left:34px;right:auto;width:2px;height:auto}
  .steps-track-fill{width:100%;height:0%}
  .step-node{flex-direction:row;text-align:left;padding:0;align-items:flex-start;gap:20px}
  .step-badge{margin-bottom:0;flex-shrink:0}
  .step-node p{max-width:none}
}

/* ==== ADVANTAGES ==== */
.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.adv{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  transition:.25s;
}
.adv:hover{
  border-color:var(--y);
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,.4);
}
.adv-ico{
  width:60px;height:60px;border-radius:14px;
  background:var(--y);
  display:grid;place-items:center;
  margin-bottom:18px;
  box-shadow:var(--shadow-y);
  transition:transform .35s cubic-bezier(.16,.8,.3,1), box-shadow .35s ease;
}
.adv:hover .adv-ico{
  transform:scale(1.08) rotate(-4deg);
  box-shadow:0 8px 24px rgba(255,193,7,.45);
}
.adv-ico svg{width:32px;height:32px;color:#000}
.adv h3{font-size:19px;font-weight:800;margin-bottom:8px}
.adv p{color:var(--muted);font-size:14px}

/* ==== CASES ==== */
.cases-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.case{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:.25s;
}
.case:hover{transform:translateY(-4px);border-color:var(--y)}
.case-photo{
  position:relative;
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#1a1a1a 0%,#0d0d0d 100%);
  display:grid;place-items:center;
  overflow:hidden;
  border-bottom:3px solid var(--y);
}
.case-photo img{width:100%;height:100%;object-fit:cover;display:block}
.case-photo .placeholder{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(255,193,7,.4);text-align:center;padding:20px;
}
.case-photo .placeholder svg{width:70px;height:70px}
.case-photo .placeholder span{font-size:12px;text-transform:uppercase;letter-spacing:2px;font-weight:700}
.case-photo::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(45deg, rgba(255,193,7,.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,193,7,.04) 25%, transparent 25%);
  background-size:40px 40px;
  pointer-events:none;
}
.case-tag{
  position:absolute;top:16px;left:16px;z-index:2;
  background:var(--y);color:#000;
  padding:10px 20px;border-radius:10px;
  font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:1.5px;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.case-body{padding:22px;flex:1;display:flex;flex-direction:column;gap:12px}
.case-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.case-metrics span{
  display:flex;flex-direction:column;
  gap:4px;
  font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;
  min-width:0;
}
.case-metrics span{text-align:center;align-items:center;justify-content:flex-start}
.case-metrics b{color:var(--y);font-size:20px;font-weight:900;line-height:1;white-space:nowrap}
.case-body h3{font-size:19px;font-weight:900;line-height:1.2}
.case-body p{color:var(--muted);font-size:14px;flex:1}
.case-client{
  font-size:12px;color:#888;
  padding-top:12px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:8px;
}
.case-client::before{content:"—";color:var(--y);font-weight:900}

/* ==== REVIEWS ==== */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  border-top:4px solid var(--y);
}
.stars{color:var(--y);font-size:18px;letter-spacing:2px;margin-bottom:14px}
.review p{font-size:15px;line-height:1.6;margin-bottom:18px}
.review .who{display:flex;align-items:center;gap:12px}
.review .who .av{
  width:44px;height:44px;border-radius:50%;
  background:var(--y);color:#000;
  display:grid;place-items:center;font-weight:900;
}
.review .who b{display:block;font-weight:800}
.review .who small{color:var(--muted);font-size:12px}

/* ==== FORM / CTA ==== */
.cta-section{
  background:
    radial-gradient(600px 300px at 20% 20%, rgba(255,193,7,.16), transparent 60%),
    linear-gradient(180deg, #0F0F0F, #050505);
  padding:100px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.form-wrap{
  max-width:960px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:44px;
  box-shadow:var(--shadow);
}
.form-left h2{font-size:32px;font-weight:900;line-height:1.1;margin-bottom:12px;text-transform:uppercase}
.form-left h2 em{color:var(--y);font-style:normal}
.form-left p{color:var(--muted);margin-bottom:22px}
.form-left ul li{padding:6px 0;color:#DDD;font-size:14px;display:flex;gap:10px;align-items:flex-start}
.form-left ul li::before{content:"✓";color:var(--y);font-weight:900;flex-shrink:0}

.form form{display:grid;gap:14px}
.form label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:600}
.form input,.form select,.form textarea{
  width:100%;
  background:#0C0C0C;
  border:1px solid var(--line);
  color:#fff;
  padding:14px 16px;
  border-radius:10px;
  font-family:inherit;font-size:15px;
  transition:.2s;
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--y);
  box-shadow:0 0 0 3px rgba(255,193,7,.15);
}
.form textarea{resize:vertical;min-height:90px}
.form .agree{font-size:12px;color:var(--muted);margin-top:6px}
.form-ok{
  display:none;background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.4);
  color:#86EFAC;
  padding:14px;border-radius:10px;font-size:14px;
}
.form-ok.show{display:block}

/* ==== FOOTER ==== */
.footer{
  background:#050505;
  border-top:1px solid var(--line);
  padding:60px 0 30px;
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:36px}
.footer-grid h4{font-size:15px;font-weight:800;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}
.footer-grid a{color:#B0B0B0;font-size:14px;display:block;padding:4px 0;transition:.2s}
.footer-grid a:hover{color:var(--y)}
.footer-about p{color:#B0B0B0;font-size:14px;margin-top:14px;max-width:340px}
.footer-bottom{
  padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  color:var(--muted);font-size:13px;
}
.footer-phone a{color:var(--y);font-weight:800}

/* ==== PAGE (inner) ==== */
.crumbs{padding:24px 0;color:var(--muted);font-size:14px}
.crumbs a{color:var(--y)}
.crumbs a:hover{text-decoration:underline}

.page-hero{padding:40px 0 70px}
.page-hero .badge{margin-bottom:20px}
.page-hero h1{font-size:clamp(34px,4.5vw,54px);font-weight:900;line-height:1.05;text-transform:uppercase;margin-bottom:16px}
.page-hero h1 em{color:var(--y);font-style:normal}
.page-hero p{font-size:17px;color:#DDD;max-width:720px;margin-bottom:24px}
.page-hero .hero-mini{margin-top:22px}

/* ==== ШАПКА СТРАНИЦЫ УСЛУГИ С ВИДЕО ====
   Две колонки: слева текст и кнопки, справа зацикленный ролик услуги.
   Класс вешается на ту же секцию .page-hero, поэтому фото-фон и градиенты
   работают как раньше — видео просто встаёт во вторую колонку.
   Фон у ролика чёрный, а под ним фотография: чтобы кадр не читался тёмным
   прямоугольником на светлом фото, маска гасит ВСЕ четыре края, а не только
   боковые, как на главной. На главной фон страницы тоже чёрный, там хватало
   боковых. Здесь фон другой — гасим по кругу. */
.page-hero.has-video .page-hero-inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  align-items:center;
}
.page-hero.has-video .page-hero-copy{min-width:0}
.page-hero.has-video p{max-width:none}

/* Ролик в шапке лежит НЕ на чёрном, а на фотографии стройки — поэтому его
   прямоугольник надо чем-то прятать. Раньше это делали маской по всем четырём
   краям. Ошибка: ролики обрезаны вплотную по содержимому, каска упирается в
   верхнюю границу кадра, ботинки в нижнюю. Вертикальный градиент съедал
   ровно их.
   Теперь под роликом лежит чёрное пятно с размытыми краями. Верхний и нижний
   срез кадра приходится на чёрное и потому невидим, а само пятно растворяется
   в фотографии. Маска осталась только горизонтальная — там персонаж честно
   уходит за край кадра, и растворение края уместно. */
.page-hero-video{
  display:flex;justify-content:center;align-items:center;
  min-width:0;
  position:relative;
  isolation:isolate;
}
.page-hero-video::before{
  content:"";
  position:absolute;
  inset:-9% -14%;
  background:radial-gradient(ellipse at 50% 50%,
    #000 0 50%, rgba(0,0,0,.92) 66%, rgba(0,0,0,.55) 82%, rgba(0,0,0,0) 100%);
  z-index:-1;
  pointer-events:none;
}
.page-hero-video video{
  height:380px;width:auto;max-width:100%;
  display:block;
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%);
}

@media(max-width:960px){
  .page-hero.has-video .page-hero-inner{
    grid-template-columns:1fr;gap:28px;
  }
  .page-hero-video{order:2}
  .page-hero-video video{height:300px}
}
@media(max-width:520px){
  .page-hero-video video{height:240px}
}

.content{padding:40px 0 80px}
.content h2{font-size:28px;font-weight:900;margin:32px 0 16px;text-transform:uppercase}
.content h3{font-size:20px;font-weight:800;margin:24px 0 10px}
.content p{color:#D6D6D6;margin-bottom:14px;font-size:16px;line-height:1.7}
.content ul li{position:relative;padding-left:22px;margin-bottom:8px;color:#D6D6D6}
.content ul li::before{content:"→";color:var(--y);position:absolute;left:0;font-weight:900}
.tasks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:20px 0 40px}
.tasks-grid .task{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:22px;border-left:3px solid var(--y);
}
.tasks-grid .task h3{font-size:17px;font-weight:800;margin-bottom:8px}
.tasks-grid .task p{color:var(--muted);font-size:14px;margin:0}

/* ==== RESPONSIVE ==== */
@media(max-width:1400px){
  .nav{gap:2px}
  .nav a{padding:7px 8px;font-size:12px}
}
@media(max-width:1280px){
  .header-inner{gap:14px}
  .nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;
    background:#0B0B0B;
    padding:12px 16px 20px;
    border-bottom:1px solid var(--line);
    gap:0;
    max-height:calc(100vh - 80px);
    overflow-y:auto;
  }
  .nav.open{display:flex}
  .nav a{padding:14px 12px;border-radius:8px;font-size:15px}
  /* В выпадающем меню бегунок не нужен: пункты идут столбцом, и подсветка
     одного фона у самой ссылки понятнее едущей капсулы. */
  .nav-pill{display:none}
  .nav a:hover,
  .nav a.active{background:var(--y);color:#000}
  .burger{display:block}
  .hero-inner{grid-template-columns:1fr;gap:36px}
  .hero-art{order:2}
  /* .services тут уже не переопределяем — две колонки заданы в основном
     блоке и работают на всех ширинах. На узких экранах их схлопывает
     правило в @media(max-width:720px). */
  .adv-grid{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:1fr}
  .form-wrap{grid-template-columns:1fr;padding:32px;gap:28px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .tasks-grid{grid-template-columns:repeat(2,1fr)}
  .cases-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  /* iOS Safari не поддерживает background-attachment:fixed, возвращаем scroll.
     У .hero фона-картинки больше нет, правка нужна только секциям-параллаксам. */
  .bg-photo-parallax{
    background-attachment:scroll,scroll !important;
  }
}
@media(max-width:720px){
  .container{padding:0 16px}
  .header-inner{padding:12px 0;gap:8px;flex-wrap:nowrap}
  .logo{flex-shrink:1;min-width:0;overflow:hidden;gap:0}
  .logo-mark{width:68px;height:68px;flex-shrink:0;margin-right:-6px}
  .logo-mark svg{width:20px;height:20px}
  .logo-text{font-size:13px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .logo-text small{font-size:8px;letter-spacing:.5px}
  .header-phone{flex-shrink:0;padding:7px 12px !important}
  .header-phone span:first-child{font-size:14px !important;letter-spacing:0 !important}
  .header-phone span:last-child{display:none !important}
  .header-phone small{display:none}
  .header-phone a{padding:9px 12px;font-size:13px}
  .hero{padding:40px 0 50px}
  .hero h1{font-size:clamp(30px,8vw,44px)}
  .hero h1 em{padding:0 10px}
  .hero p{font-size:15px}
  .hero-stats{gap:10px}
  .hero-stats .stat{min-width:0;flex:1 1 calc(50% - 5px);padding:10px 12px}
  .hero-stats .stat b{font-size:18px}
  .hero-stats .stat span{font-size:11px}
  .hero-ctas{gap:10px;flex-direction:column;width:100%}
  .hero-ctas .btn{width:100%;display:flex;box-sizing:border-box}
  .btn{padding:14px 20px;font-size:15px}
  .btn-lg{padding:16px 22px;font-size:15px}
  .hero-mini{font-size:12px}
  section{padding:50px 0}
  .section-head{margin-bottom:36px}
  .section-head h2{font-size:clamp(24px,6vw,32px)}
  .services,.steps,.adv-grid,.tasks-grid,.cases-grid{grid-template-columns:1fr;gap:14px}
  .case-metrics{gap:10px}
  .case-metrics b{font-size:17px}
  .case-body{padding:18px}
  .service,.step,.adv{padding:20px}
  .service p{min-height:0}
  .step .num{font-size:44px}
  .form-wrap{padding:20px;border-radius:14px}
  .form-left h2{font-size:24px}
  .form input,.form select,.form textarea{padding:12px 14px;font-size:14px}
  .review{padding:22px}
  .cta-section{padding:60px 0}
  .footer{padding:44px 0 24px}
  .footer-grid{grid-template-columns:1fr;gap:28px;margin-bottom:24px}
  .footer-bottom{flex-direction:column;text-align:center;gap:10px}
  .page-hero{padding:20px 0 50px}
  .page-hero h1{font-size:clamp(28px,7vw,38px)}
  .content{padding:30px 0 50px}
  .content h2{font-size:22px}
  .content h3{font-size:17px}
  .content p{font-size:15px}
}
@media(max-width:380px){
  .header-phone a{padding:8px 10px;font-size:12px}
  .logo-text small{display:none}
  .hero-stats{flex-direction:column}
  .hero-stats .stat{width:100%}
  .hero-ctas{flex-direction:column}
  .hero-ctas .btn{width:100%}
}