/* ==========================================================================
   ЯрЭлектроМонтаж — тёмная тема «архитектурная подсветка»
   Логика: тьма как основа, свет как акцент. Каждый элемент либо источник
   света (тёплый янтарь / холодный бирюзовый), либо поверхность, которую
   этот свет задевает — отсюда светящиеся рёбра, пятна и глубокие тени.
   ========================================================================== */

/* ---------- 1. Переменные ---------- */
:root{
  /* Тьма */
  --void:      #050609;
  --night:     #0A0C11;
  --surface:   rgba(255,255,255,.038);
  --surface-2: rgba(255,255,255,.06);
  --line:      rgba(255,255,255,.08);
  --line-soft: rgba(255,255,255,.045);

  /* Свет */
  --warm:      #FFA724;          /* тёплый свет ламп = фирменный оранжевый */
  --warm-dim:  rgba(255,167,36,.32);
  --warm-haze: rgba(255,150,20,.16);
  --cool:      #46CFE6;          /* холодная заливка фасада */
  --cool-dim:  rgba(70,207,230,.28);
  --cool-haze: rgba(50,180,220,.14);

  /* Текст */
  --ink:       #EEF1F5;
  --ink-2:     rgba(238,241,245,.72);
  --muted:     rgba(238,241,245,.46);

  /* Тени — свет всегда сверху, тень падает вниз и вглубь */
  --sh-soft:  0 24px 60px -24px rgba(0,0,0,.9);
  --sh-deep:  0 60px 120px -40px rgba(0,0,0,1);

  /* Сетка */
  --wrap: 1320px;
  --pad: clamp(20px, 4vw, 56px);
  --r: 20px;
  --r-lg: 28px;
  --band-gap: clamp(64px, 8vw, 132px);   /* просвет вокруг ленты логотипов */

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

/* ---------- 2. База ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  overflow-x:clip;   /* лучи и бегущие строки шире экрана — не даём им растянуть страницу */
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font:400 16px/1.6 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
img.is-missing{ visibility:hidden; }   /* фото ещё не загружено в /images */
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
ol,ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
::selection{ background:var(--warm); color:#000; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* Скроллбар */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--void); }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:var(--warm-dim); }

/* ---------- 3. Атмосфера: плазма, зерно, световые лучи ---------- */
/* WebGL-фон под всем контентом. Приглушён прозрачностью и режимом screen:
   на почти чёрной подложке это работает как подсветка, а не как картинка. */
.plasma{
  position:fixed; inset:0; z-index:0;
  display:block;
  width:100%; height:100%;
  pointer-events:none;
  opacity:.24;
  mix-blend-mode:screen;
}

.atmosphere{
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  overflow:hidden;
}

/* Плёночное зерно — убирает «пластиковость» тёмного фона */
.grain{
  position:absolute; inset:-50%;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-3%,2%) }
  40%{ transform:translate(2%,-3%) }
  60%{ transform:translate(-2%,-2%) }
  80%{ transform:translate(3%,1%) }
}

/* Лучи прожекторов, медленно дышат */
.beam{
  position:absolute;
  width:60vw; height:120vh;
  filter:blur(90px);
  opacity:.5;
  will-change:transform,opacity;
}
.beam--1{
  top:-30vh; left:-10vw;
  background:conic-gradient(from 200deg at 50% 0%, transparent 0deg, var(--warm-haze) 25deg, transparent 55deg);
  animation:breathe 16s var(--ease) infinite;
}
.beam--2{
  top:20vh; right:-15vw;
  background:conic-gradient(from 140deg at 50% 0%, transparent 0deg, var(--cool-haze) 30deg, transparent 60deg);
  animation:breathe 21s var(--ease) infinite reverse;
}
@keyframes breathe{
  0%,100%{ opacity:.35; transform:translateY(0) rotate(0deg) }
  50%    { opacity:.65; transform:translateY(-4vh) rotate(4deg) }
}

/* Световое пятно на полу секции */
.pool{
  position:absolute; z-index:0;
  width:min(900px,90vw); aspect-ratio:1;
  border-radius:50%;
  filter:blur(120px);
  pointer-events:none;
}
.pool--warm{
  top:-10%; left:-15%;
  background:radial-gradient(circle, var(--warm-haze), transparent 65%);
}
.pool--cool{
  bottom:-20%; right:-20%;
  background:radial-gradient(circle, var(--cool-haze), transparent 65%);
}
.pool--big{ width:min(1200px,110vw); opacity:.9; left:50%; top:0; transform:translateX(-50%); }

/* ---------- 4. Стекло ---------- */
/* Панель, «поймавшая» свет: подсвеченное верхнее ребро + глубокая тень */
.glass{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:var(--sh-deep), inset 0 1px 0 rgba(255,255,255,.09);
}

/* ---------- 5. Кнопки ---------- */
.btn{
  --bg:var(--surface);
  --bd:var(--line);
  display:inline-flex; align-items:center; gap:14px;
  padding:14px 16px 14px 26px;
  border:1px solid var(--bd);
  background:var(--bg);
  border-radius:99px;
  font-weight:600; font-size:15px; letter-spacing:.01em;
  cursor:pointer;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:.45s var(--ease);
  transition-property:background,border-color,box-shadow,color,transform;
}
.btn:hover{
  border-color:var(--warm-dim);
  box-shadow:0 0 0 1px var(--warm-dim), 0 20px 50px -20px rgba(255,167,36,.5);
  transform:translateY(-2px);
}

.btn__arrow{
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  transition:.45s var(--ease);
}
.btn__arrow svg{ width:17px; height:17px; transition:transform .45s var(--ease); }
.btn:hover .btn__arrow{ background:var(--warm); color:#000; }
.btn:hover .btn__arrow svg{ transform:translate(2px,-2px); }

.btn--solid{
  --bg:var(--warm);
  --bd:transparent;
  color:#0A0700;
  box-shadow:0 20px 50px -20px rgba(255,167,36,.65), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--solid .btn__arrow{ background:rgba(0,0,0,.15); }
.btn--solid:hover{
  --bg:#FFB84A;
  box-shadow:0 26px 60px -18px rgba(255,167,36,.8), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--solid:hover .btn__arrow{ background:#0A0700; color:var(--warm); }

.btn--sm{ padding:11px 22px; font-size:14px; }
.btn--lg{ padding:16px 18px 16px 32px; font-size:16px; }
.btn--pill{ padding-block:12px; }
.btn--ghost{ background:transparent; }

/* ---------- 6. Шапка ---------- */
.header{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:.5s var(--ease);
}
.header__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:22px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:padding .5s var(--ease);
}
/* При скролле шапка «уплотняется» и получает стеклянную подложку */
.header.is-stuck{
  background:rgba(6,7,10,.72);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border-bottom:1px solid var(--line-soft);
}
.header.is-stuck .header__inner{ padding-block:13px; }

.logo{ display:flex; align-items:center; gap:14px; flex-shrink:0; }

/* Логотип вырезан с прозрачным фоном, поэтому drop-shadow обводит
   именно силуэт — молнии и звезду, а не прямоугольник картинки. */
.logo__img{
  height:54px; width:auto;
  filter:drop-shadow(0 0 13px rgba(255,167,36,.55))
         drop-shadow(0 0 34px rgba(255,140,10,.30));
  animation:flicker 6s ease-in-out infinite;
  transition:height .5s var(--ease);
}
.logo:hover .logo__img{
  animation:none;
  filter:drop-shadow(0 0 18px rgba(255,167,36,.85))
         drop-shadow(0 0 48px rgba(255,140,10,.5));
}
.header.is-stuck .logo__img{ height:44px; }

/* Лёгкое мерцание — как разряд в лампе */
@keyframes flicker{
  0%,88%,100%{ filter:drop-shadow(0 0 13px rgba(255,167,36,.55))
                      drop-shadow(0 0 34px rgba(255,140,10,.30)) }
  90%{ filter:drop-shadow(0 0 4px rgba(255,167,36,.15))
              drop-shadow(0 0 12px rgba(255,140,10,.08)) }
  92%{ filter:drop-shadow(0 0 20px rgba(255,167,36,.9))
              drop-shadow(0 0 52px rgba(255,140,10,.55)) }
  94%{ filter:drop-shadow(0 0 6px rgba(255,167,36,.2))
              drop-shadow(0 0 16px rgba(255,140,10,.1)) }
}

.logo__tag{
  padding-left:14px;
  border-left:1px solid var(--line);
  font-size:10px; line-height:1.5; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}

.nav{ display:flex; gap:6px; }
.nav{ flex-shrink:0; }
.nav a{
  position:relative;
  padding:9px 16px; border-radius:99px;
  font-size:14.5px; font-weight:500; color:var(--ink-2);
  white-space:nowrap;          /* «О компании» не должно ломаться на две строки */
  transition:.35s var(--ease);
}
.nav a::after{  /* точка-индикатор, будто загорелась лампочка */
  content:''; position:absolute; left:50%; bottom:2px;
  width:4px; height:4px; margin-left:-2px;
  border-radius:50%; background:var(--warm);
  opacity:0; transform:scale(.4);
  box-shadow:0 0 10px var(--warm);
  transition:.35s var(--ease);
}
.nav a:hover{ color:var(--ink); background:var(--surface); }
.nav a:hover::after,
.nav a.is-active::after{ opacity:1; transform:scale(1); }
.nav a.is-active{ color:var(--ink); }

.header__actions{ display:flex; align-items:center; gap:16px; }
.header__phone{
  font-weight:700; font-size:15px; white-space:nowrap;
  transition:color .35s var(--ease), text-shadow .35s var(--ease);
}
.header__phone:hover{ color:var(--warm); text-shadow:0 0 20px var(--warm-dim); }

.burger{
  display:none;
  width:44px; height:44px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--surface);
  cursor:pointer;
  padding:0; place-items:center; gap:5px;
}
.burger span{
  display:block; width:18px; height:1.5px;
  background:var(--ink); border-radius:2px;
  transition:.4s var(--ease);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

/* ---------- 7. Боковая панель соцсетей ---------- */
.rail{
  position:fixed; z-index:99;
  right:clamp(14px,2vw,26px); top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.rail__link{
  display:grid; place-items:center;
  width:42px; height:42px;
  border:1px solid var(--line); border-radius:50%;
  background:rgba(10,12,17,.5);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--ink-2);
  transition:.4s var(--ease);
}
.rail__link svg{ width:19px; height:19px; }
.rail__link:hover{
  color:var(--warm);
  border-color:var(--warm-dim);
  box-shadow:0 0 26px var(--warm-dim);
  transform:translateY(-2px);
}
.rail__line{
  width:1px; height:70px;
  background:linear-gradient(var(--line), transparent);
}

/* Подпись, выезжающая слева от иконки. У телефона это сам номер —
   иначе на компьютере кнопка выглядит мёртвой: ссылка tel: там
   обычно не даёт никакой видимой реакции. */
.rail__tip{
  position:absolute; right:calc(100% + 10px); top:50%;
  transform:translateY(-50%) translateX(6px);
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:99px;
  background:rgba(10,12,17,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--ink);
  font-size:13px; font-weight:600; letter-spacing:-.01em;
  white-space:nowrap;
  opacity:0; visibility:hidden;
  pointer-events:none;
  transition:.35s var(--ease);
}
.rail__link{ position:relative; }
.rail__link:hover .rail__tip,
.rail__link:focus-visible .rail__tip{
  opacity:1; visibility:visible;
  transform:translateY(-50%) translateX(0);
}

.rail__tip--phone{
  color:var(--warm);
  border-color:var(--warm-dim);
  box-shadow:0 0 26px -6px var(--warm-dim);
}
/* Номер скопирован — держим подсказку открытой и меняем текст */
.rail__link--phone.is-copied .rail__tip{
  opacity:1; visibility:visible;
  transform:translateY(-50%) translateX(0);
  color:#5AD27A;
  border-color:rgba(90,210,122,.4);
  box-shadow:0 0 26px -6px rgba(90,210,122,.4);
}

/* ---------- 8. Герой ---------- */
.hero{
  position:relative; z-index:1;
  min-height:100svh;
  padding:clamp(130px,17vh,190px) var(--pad) clamp(120px,16vh,150px);
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}

/* ---- Сцена с мостом ----
   Нижним слоем лежит фото выключенного моста. Поверх — канвас, на котором
   JS «намазывает» кадр с включённой подсветкой там, где прошёл курсор.
   Свет накапливается: провёл вдоль пролёта — неон загорелся весь. */
.scene{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
  background:linear-gradient(180deg, #070B14 0%, #0A101C 55%, #05080E 100%);
}
.scene__base,
.scene__lit{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.scene__base{
  object-fit:cover;
  object-position:center 42%;
}
.scene__lit{
  pointer-events:none;
  opacity:0;
  transition:opacity .8s var(--ease);
}
.scene.is-ready .scene__lit{ opacity:1; }

/* Затемнение к краям и вниз, чтобы текст всегда читался */
.scene__shade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,6,9,.82) 0%, rgba(5,6,9,.35) 32%, rgba(5,6,9,.55) 65%, var(--void) 100%),
    radial-gradient(90% 70% at 50% 45%, transparent 40%, rgba(5,6,9,.6) 100%);
  pointer-events:none;
}

/* ---- Контент героя ---- */
.hero__content{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap);
  margin-inline:auto;
  text-align:center;
}
.hero__content .label{ justify-content:center; }

/* Обе строки набраны одинаково — различает их только цвет.
   Слово «Электромонтаж» не рвётся и читается целиком. */
.hero__title{ margin-bottom:26px; }
.hero__title-main,
.hero__title-sub{
  display:block;
  font-size:clamp(29px,6.1vw,90px);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.hero__title-main{
  color:#fff;
  text-shadow:0 20px 70px rgba(0,0,0,.75);
}
.hero__title-sub{
  color:var(--warm);
  text-shadow:0 20px 70px rgba(0,0,0,.7), 0 0 70px rgba(255,167,36,.35);
}

.hero__sub{
  max-width:560px; margin:0 auto;
  color:var(--ink-2); font-size:clamp(15px,1.2vw,17.5px);
  text-shadow:0 2px 20px rgba(0,0,0,.6);
}
.hero__actions{
  display:flex; justify-content:center; flex-wrap:wrap; gap:12px;
  margin-top:36px;
}

/* ---- Нижняя строка героя ---- */
.hero__bar{
  position:absolute; z-index:2;
  inset:auto var(--pad) clamp(30px,5vh,48px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
}
.hero__hint{
  display:flex; align-items:center; gap:10px;
  max-width:230px;
  font-size:12.5px; line-height:1.5; color:var(--muted);
}
.hero__hint-dot{
  flex-shrink:0;
  width:7px; height:7px; border-radius:50%;
  background:var(--warm);
  box-shadow:0 0 14px var(--warm);
  animation:pulse 2.2s ease-in-out infinite;
}

.hero__scroll{
  position:absolute;
  left:50%; bottom:0; transform:translateX(-50%);
}
.mouse{
  display:grid; justify-items:center;
  width:26px; height:42px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:99px;
  padding-top:8px;
}
.mouse i{
  width:2px; height:7px; border-radius:2px;
  background:var(--warm);
  box-shadow:0 0 10px var(--warm);
  animation:wheel 1.9s var(--ease) infinite;
}
@keyframes wheel{
  0%{ opacity:0; transform:translateY(-4px) }
  40%{ opacity:1 }
  100%{ opacity:0; transform:translateY(12px) }
}

.hero__stats{
  display:flex; gap:clamp(20px,3vw,40px);
  padding:18px 26px;
  border-radius:var(--r);
}
.stat{ display:flex; flex-direction:column; gap:2px; }
.stat b{
  font-size:clamp(26px,3vw,38px); font-weight:800; line-height:1;
  letter-spacing:-.03em;
  color:var(--warm);
  text-shadow:0 0 30px var(--warm-dim);
}
.stat span{
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); max-width:120px;
}

/* ---------- 9. Бегущая строка ---------- */
.ticker{
  position:relative; z-index:1;
  padding:18px 0;
  border-block:1px solid var(--line-soft);
  background:rgba(255,255,255,.015);
  overflow:hidden;
  --dur:34s;
}
.ticker__track{ display:flex; width:max-content; animation:slide var(--dur) linear infinite; }
.ticker__track span{
  display:flex; align-items:center;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.ticker__track i{ color:var(--warm); margin-inline:22px; font-style:normal; opacity:.8; }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ---------- 10. Секции и заголовки ---------- */
.section{
  position:relative; z-index:1;
  padding-block:clamp(80px,11vw,160px);
  isolation:isolate;
  /* clip, а не hidden — иначе сломается position:sticky у фото в «О компании» */
  overflow:clip;
}
.section > .wrap{ position:relative; z-index:2; }

.label{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:18px;
}
.label i{  /* светящаяся точка = включённый светильник */
  width:6px; height:6px; border-radius:50%;
  background:var(--warm);
  box-shadow:0 0 12px var(--warm);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; box-shadow:0 0 12px var(--warm) }
  50%{ opacity:.45; box-shadow:0 0 4px var(--warm) }
}

.h2{
  font-size:clamp(34px,5.6vw,76px);
  font-weight:800; line-height:1.02; letter-spacing:-.04em;
}
.h2--sm{ font-size:clamp(28px,3.6vw,48px); }
.h2 em{
  font-style:normal;
  color:var(--warm);
  text-shadow:0 0 50px var(--warm-dim);
}

.head{ max-width:760px; margin-bottom:clamp(40px,6vw,72px); }
.head--center{ margin-inline:auto; text-align:center; }
.head--center .label{ justify-content:center; }
.head__text{ margin-top:20px; color:var(--muted); font-size:17px; max-width:520px; }
.head--center .head__text{ margin-inline:auto; }

/* ---------- 11. Карточки услуг ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(14px,1.6vw,22px);
}
.card{
  position:relative;
  padding:34px 30px 38px;
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  overflow:hidden;
  transition:.55s var(--ease);
  transition-property:transform,border-color,box-shadow,background;
}
.card__num{
  display:block;
  font-size:12px; font-weight:700; letter-spacing:.12em;
  color:var(--muted);
  margin-bottom:56px;
  transition:color .5s var(--ease);
}
.card h3{
  font-size:21px; font-weight:700; line-height:1.22; letter-spacing:-.02em;
  margin-bottom:12px;
}
.card p{ font-size:14.5px; color:var(--muted); line-height:1.65; }

/* Светящееся ребро: свет «включается» по верхней грани карточки */
.card__edge{
  position:absolute; inset:0 auto auto 0;
  width:100%; height:1px;
  background:linear-gradient(90deg, transparent, var(--warm), transparent);
  opacity:0;
  transform:scaleX(.3);
  transition:.6s var(--ease);
}
.card::after{  /* мягкая засветка внутрь от верхнего ребра */
  content:''; position:absolute; inset:-1px auto auto 0;
  width:100%; height:130px;
  background:radial-gradient(80% 100% at 50% 0%, var(--warm-haze), transparent 70%);
  opacity:0;
  transition:opacity .6s var(--ease);
  pointer-events:none;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,167,36,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.012));
  box-shadow:var(--sh-soft);
}
.card:hover .card__edge{ opacity:1; transform:scaleX(1); }
.card:hover::after{ opacity:1; }
.card:hover .card__num{ color:var(--warm); }

/* ---------- 12. Проекты ---------- */
.projects__top{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,60px);
  align-items:end;
  margin-bottom:clamp(36px,5vw,60px);
}
.projects__lead p{ color:var(--muted); font-size:17px; margin-bottom:26px; max-width:460px; }

/* Раскладка под конкретные кадры: квадратный — крупным блоком,
   два вертикальных — колоннами, горизонтальный — панорамой во всю ширину. */
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(150px,17vw,250px);
  gap:clamp(12px,1.4vw,18px);
}
.tile{
  position:relative; margin:0;
  border-radius:var(--r);
  overflow:hidden;
  background:
    radial-gradient(100% 60% at 50% 100%, rgba(255,167,36,.18), transparent 60%),
    linear-gradient(180deg, #10151C, #080B0F);
  box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:.6s var(--ease);
}
.tile--feature{ grid-column:span 2; grid-row:span 2; }
.tile--tall   { grid-row:span 2; }
.tile--pano   { grid-column:1/-1; grid-row:span 2; }

.tile img{
  width:100%; height:100%;
  object-fit:cover;
  opacity:.86;
  transition:.9s var(--ease);
}
/* Кадрируем так, чтобы в срез попадали купола и подсвеченный фасад,
   а не небо с дорогой */
.tile--pano img{ object-position:center 46%; }
.tile--tall img{ object-position:center 38%; }
.tile figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:44px 22px 20px;
  display:flex; flex-direction:column; gap:2px;
  background:linear-gradient(transparent, rgba(4,6,9,.92));
  transform:translateY(8px);
  opacity:.85;
  transition:.6s var(--ease);
}
.tile figcaption b{ font-size:16px; font-weight:700; letter-spacing:-.01em; }
.tile figcaption span{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.tile:hover{
  box-shadow:inset 0 0 0 1px rgba(255,167,36,.3), 0 30px 70px -30px rgba(255,167,36,.4);
}
.tile:hover img{ opacity:1; transform:scale(1.06); }
.tile:hover figcaption{ transform:translateY(0); opacity:1; }

.projects__foot{
  margin-top:clamp(36px,5vw,56px);
  padding-top:clamp(28px,4vw,40px);
  border-top:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.projects__foot p{ color:var(--muted); font-size:16px; }
.projects__links{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- 13. О компании ---------- */
.about__inner{
  display:grid; grid-template-columns:1fr .85fr;
  gap:clamp(32px,5vw,80px);
  align-items:start;
}
.list{ margin-top:clamp(30px,4vw,48px); display:grid; gap:4px; }
.list li{
  position:relative;
  padding:26px 0 26px 46px;
  border-top:1px solid var(--line-soft);
  transition:.5s var(--ease);
}
.list li:last-child{ border-bottom:1px solid var(--line-soft); }
/* Точка-светильник слева, разгорается при наведении */
.list li::before{
  content:''; position:absolute; left:8px; top:34px;
  width:10px; height:10px; border-radius:50%;
  background:var(--warm);
  box-shadow:0 0 0 4px rgba(255,167,36,.1);
  opacity:.4;
  transition:.5s var(--ease);
}
.list li:hover::before{ opacity:1; box-shadow:0 0 22px var(--warm), 0 0 0 5px rgba(255,167,36,.14); }
.list li:hover{ padding-left:54px; }
.list h3{ font-size:19px; font-weight:700; letter-spacing:-.015em; margin-bottom:8px; }
.list p{ color:var(--muted); font-size:14.5px; max-width:520px; }

.about__media{
  position:relative; margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:3/4;
  background:linear-gradient(180deg, #12171E, #070A0E);
  box-shadow:var(--sh-deep), inset 0 0 0 1px var(--line);
  position:sticky; top:110px;
}
.about__media img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
  opacity:.9;
}
.about__glow{
  position:absolute; inset:0;
  background:radial-gradient(70% 50% at 50% 0%, rgba(255,167,36,.2), transparent 60%);
  pointer-events:none;
}
.about__media figcaption{
  position:absolute; left:18px; right:18px; bottom:18px;
  padding:16px 20px;
  border-radius:16px;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.about__media figcaption b{
  display:block; margin-top:3px;
  color:var(--ink); font-size:13px; letter-spacing:.04em;
}

/* ---------- 14. Клиенты ---------- */
/* Док заказчиков — плавающая тёмная стеклянная панель.
   Светлую ленту во всю ширину заменили именно на неё: белая плашка была
   единственным светлым пятном на тёмной странице и выбивалась из темы.
   Логотипы лежат белыми силуэтами (файлы *-w.png, альфа посчитана по
   яркости), а свой цвет возвращают только под курсором. */
/* Отступы сверху и снизу заданы одинаковыми (см. --band-gap), поэтому
   док стоит ровно посередине между «С нами работают» и «Есть проект?». */
.band{
  position:relative;
  width:100%;
  margin-top:var(--band-gap);
  padding-inline:var(--pad);
}
/* Тёплый свет из-под панели: док как будто подсвечен снизу — тот же приём,
   что и на всём сайте, свет как акцент. */
.band::before{
  content:"";
  position:absolute; left:50%; bottom:-18px; transform:translateX(-50%);
  width:min(760px,80%); height:110px;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,167,36,.2), transparent 70%);
  filter:blur(30px);
  pointer-events:none;
}
.band__panel{
  position:relative;
  max-width:1120px; margin-inline:auto;
  border-radius:30px;
  padding:14px 24px;
  background:linear-gradient(180deg, rgba(26,30,40,.34), rgba(11,13,19,.22));
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 40px 90px -36px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1);
}
/* Мягкая растушёвка внутри панели: к краям стекло сходит на нет, поэтому
   граница не выглядит прорезанной, а логотипы растворяются, а не обрубаются. */
.band__panel::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(90deg, rgba(5,6,9,.5), transparent 18%,
                    transparent 82%, rgba(5,6,9,.5));
}
/* По горизонтали лента обрезается и растворяется по краям. Сверху нужен
   запас: подпись выходит за верхний край дока, как в macOS, а маска и
   overflow режут строго по своей рамке. Padding поднимает эту рамку,
   отрицательный margin возвращает вёрстку на место. */
.band__viewport{
  position:relative; z-index:1;
  padding-top:58px; margin-top:-58px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
/* Прокруткой управляет JS (js/main.js): автоход + ручная раскрутка броском.
   touch-action:pan-y — чтобы на телефоне вертикальный скролл страницы
   продолжал работать, а горизонтальное движение забирала лента. */
.band__track{
  display:flex;
  width:max-content;
  will-change:transform;
  touch-action:pan-y;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.band.is-dragging .band__track{ cursor:grabbing; }

.band__set{ display:flex; align-items:center; }
.band__item{
  position:relative;
  flex:none;
  display:flex; align-items:center; justify-content:center;
  margin-inline:clamp(24px,2.8vw,46px);
  /* запас под увеличенный логотип (×1.5), чтобы он не распирал панель */
  min-height:calc(clamp(38px,4vw,52px) * 1.7);
}
/* Увеличение делаем трансформацией, а не высотой: лента едет всё время,
   и любое изменение раскладки сбивало бы её шаг и петлю. */
.band__pic{
  position:relative;
  display:block;
  transform-origin:center center;
  transition:transform .3s var(--ease);
}
.band__ghost{
  display:block;
  height:clamp(38px,4vw,52px);
  width:auto;
  opacity:.78;
  transition:opacity .3s var(--ease);
  -webkit-user-drag:none; user-select:none;
}
.band__real{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .3s var(--ease);
  -webkit-user-drag:none; user-select:none;
}
/* Соседи подрастают меньше, чем тот, на кого навели. У правил одинаковая
   специфичность, поэтому побеждает последнее — порядок менять нельзя. */
.band__item:has(+ .band__item + .band__item:hover) .band__pic,
.band__item:hover + .band__item + .band__item .band__pic{ transform:scale(1.1); }
.band__item:has(+ .band__item:hover) .band__pic,
.band__item:hover + .band__item .band__pic{ transform:scale(1.24); }
.band__item:hover .band__pic{ transform:scale(1.5); }
.band__item:hover .band__ghost{ opacity:0; }
.band__item:hover .band__real{ opacity:1; }
.band.is-dragging .band__pic{ transform:none; }

/* Подпись как в доке macOS: тёмная пилюля с уголком над логотипом */
.band__tip{
  position:absolute; left:50%; bottom:calc(100% + 10px);
  transform:translate(-50%,6px);
  padding:6px 12px;
  border-radius:10px;
  white-space:nowrap;
  background:rgba(10,12,17,.94);
  color:var(--ink);
  font-size:13px; font-weight:600; letter-spacing:-.01em;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s var(--ease);
}
.band__tip::after{
  content:"";
  position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:rgba(10,12,17,.94);
}
.band__item:hover .band__tip{ opacity:1; transform:translate(-50%,0); }
.band.is-dragging .band__tip{ opacity:0; }

/* На телефоне и планшете наведения нет: подписи и увеличение только мешали бы,
   а лента должна просто ехать. */
@media (hover:none){
  .band__item:hover .band__pic{ transform:none; }
  .band__tip{ display:none; }
  .band__item{ min-height:0; }
  .band__viewport{ padding-top:0; margin-top:0; }
}

/* Ровно одинаковые просветы над лентой и под ней.
   Обе секции берут одно значение --band-gap, поэтому центровка
   не разъедется, если понадобится поменять отступ. */
.clients{ padding-bottom:0; }
.clients .head{ margin-bottom:0; }
.lead{ padding-top:var(--band-gap); }

/* ---------- 15. Форма заявки ---------- */
.lead__box{
  padding:clamp(32px,5vw,68px);
  text-align:center;
}
.lead__sub{ margin:16px auto 40px; color:var(--muted); font-size:17px; max-width:440px; }

.form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  max-width:680px; margin-inline:auto;
}
.field{ position:relative; }
.field--full{ grid-column:1/-1; }
.field input{
  width:100%;
  padding:20px 20px 8px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(0,0,0,.25);
  color:var(--ink);
  font-size:15px;
  outline:none;
  transition:.4s var(--ease);
}
.field label{
  position:absolute; left:21px; top:16px;
  font-size:15px; color:var(--muted);
  pointer-events:none;
  transition:.35s var(--ease);
}
/* Поле «загорается» в фокусе */
.field input:focus{
  border-color:var(--warm-dim);
  background:rgba(255,167,36,.04);
  box-shadow:0 0 0 3px rgba(255,167,36,.1), 0 0 30px -10px var(--warm-dim);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  top:7px; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--warm);
}
.field input.is-error{ border-color:#FF5C5C; box-shadow:0 0 0 3px rgba(255,92,92,.12); }

/* Согласие на обработку персональных данных.
   Родная галочка спрятана, рисуем свою — она должна быть заметной,
   иначе посетитель не поймёт, почему форма не отправляется. */
.consent{
  grid-column:1/-1;
  display:flex; align-items:flex-start; gap:12px;
  margin-top:6px;
  text-align:left;
  cursor:pointer;
  user-select:none;
}
.consent input{
  position:absolute;
  width:1px; height:1px; opacity:0;
  pointer-events:none;
}
.consent__box{
  flex-shrink:0;
  display:grid; place-items:center;
  width:22px; height:22px;
  margin-top:1px;
  border:1.5px solid var(--line);
  border-radius:6px;
  background:rgba(0,0,0,.25);
  color:#0A0700;
  transition:.3s var(--ease);
}
.consent__box svg{
  width:13px; height:13px;
  opacity:0; transform:scale(.5);
  transition:.3s var(--ease);
}
.consent input:checked + .consent__box{
  background:var(--warm);
  border-color:var(--warm);
  box-shadow:0 0 18px var(--warm-dim);
}
.consent input:checked + .consent__box svg{ opacity:1; transform:none; }
.consent input:focus-visible + .consent__box{
  box-shadow:0 0 0 3px rgba(255,167,36,.3);
}
.consent:hover .consent__box{ border-color:var(--warm-dim); }

.consent__text{
  font-size:13px; line-height:1.5; color:var(--muted);
}
.consent__text a{
  color:var(--ink-2);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .3s var(--ease);
}
.consent__text a:hover{ color:var(--warm); }

/* Не отметили галочку — подсвечиваем, чтобы причина была видна */
.consent.is-error .consent__box{
  border-color:#FF5C5C;
  box-shadow:0 0 0 3px rgba(255,92,92,.14);
}
.consent.is-error .consent__text{ color:#FF8A8A; }

.form .btn{ grid-column:1/-1; justify-self:center; margin-top:10px; }
/* Ссылка на политику под кнопкой. Отдельно от галочки согласия:
   с 01.09.2025 согласие нельзя склеивать с принятием других документов. */
.form__note{
  grid-column:1/-1;
  text-align:center;
  font-size:12.5px; line-height:1.5; color:var(--muted);
}
.form__note a{
  color:var(--ink-2);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .3s var(--ease);
}
.form__note a:hover{ color:var(--warm); }
.form__msg{
  grid-column:1/-1;
  font-size:14.5px; min-height:22px;
  color:var(--warm);
}

/* Ловушка для ботов — убираем из виду, но не через display:none:
   часть спам-скриптов такие поля пропускает, а эти всё равно заполняет. */
.field-trap{
  position:absolute; left:-9999px; top:0;
  width:1px; height:1px; opacity:0;
  pointer-events:none;
}

/* ---------- 14.1. Вопросы и ответы ----------
   Стоят в самом конце, после призыва к действию: это справочный
   материал, а не то, ради чего человек пришёл. Отсюда и скромный
   размер — блок не должен спорить с формой заявки. */
.faq{ padding-block:clamp(50px,6vw,84px); }
/* Блок прижат к левому краю страницы, а не висит по центру экрана:
   глаз ведёт по одной вертикали сверху вниз, ничего не приходится ловить. */
.faq__head{
  max-width:720px;
  margin:0 0 clamp(24px,3vw,36px);
  text-align:left;
}
.faq__head .head__text{ font-size:15px; margin-top:12px; max-width:none; }

.faq__list{
  max-width:720px; margin-inline:0;
  display:grid; gap:8px;
}
.faq__item{
  border:1px solid var(--line-soft);
  border-radius:14px;
  background:rgba(255,255,255,.022);
  overflow:hidden;
  transition:.45s var(--ease);
  transition-property:border-color, background;
}
.faq__item:hover{ border-color:rgba(255,167,36,.22); }
.faq__item[open]{
  border-color:rgba(255,167,36,.28);
  background:rgba(255,255,255,.045);
}

.faq__item summary{
  position:relative;
  display:flex; align-items:center;
  padding:14px 44px 14px 18px;
  font-size:14.5px; font-weight:600; letter-spacing:-.01em;
  line-height:1.4;
  cursor:pointer;
  list-style:none;                 /* убираем стандартный треугольник */
  transition:color .35s var(--ease);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--warm); }
.faq__item[open] summary{ color:var(--warm); }

/* Свой знак «плюс», на открытом ответе превращается в минус */
.faq__item summary::before,
.faq__item summary::after{
  content:'';
  position:absolute; right:18px; top:50%;
  width:11px; height:1.5px; margin-top:-.75px; border-radius:2px;
  background:currentColor;
  transition:.4s var(--ease);
}
.faq__item summary::after{ transform:rotate(90deg); }
.faq__item[open] summary::after{ transform:rotate(0deg); opacity:0; }

.faq__answer{
  padding:0 44px 16px 18px;
  animation:faqOpen .4s var(--ease) both;
}
.faq__answer p{
  color:var(--muted); font-size:13.5px; line-height:1.65;
}
@keyframes faqOpen{
  from{ opacity:0; transform:translateY(-6px) }
  to  { opacity:1; transform:none }
}

@media (max-width:640px){
  .faq__item summary{ padding:13px 40px 13px 15px; font-size:14px; }
  .faq__item summary::before,
  .faq__item summary::after{ right:15px; }
  .faq__answer{ padding:0 40px 14px 15px; }
}

@media (prefers-reduced-motion:reduce){
  .faq__answer{ animation:none; }
}

/* ---------- 14.2. Отзывы ---------- */
.reviews__top{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  margin-bottom:clamp(26px,3vw,40px);
}

/* Карточка-виджет с рейтингом: ведёт на первоисточник */
.ya-card{
  display:flex; align-items:center; gap:18px;
  padding:14px 22px; border-radius:var(--r);
  transition:.45s var(--ease);
}
.ya-card:hover{
  border-color:var(--warm-dim);
  box-shadow:0 0 0 1px var(--warm-dim), 0 20px 50px -24px rgba(255,167,36,.5);
  transform:translateY(-2px);
}
.ya-card__score{
  font-size:36px; font-weight:800; line-height:1; letter-spacing:-.03em;
  color:var(--warm);
  text-shadow:0 0 30px var(--warm-dim);
}
.ya-card__body{ display:flex; flex-direction:column; gap:4px; }
.ya-card__stars{ display:flex; gap:2px; color:var(--warm); }
.ya-card__stars i{ display:block; width:14px; height:14px; }
.ya-card__stars i.is-dim{ opacity:.25; }
.ya-card__stars svg{ width:100%; height:100%; display:block; }
.ya-card__meta{
  font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted);
}
.ya-card__link{ font-size:12px; color:var(--ink-2); }

/* Сетка карточек */
.reviews__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(12px,1.4vw,18px);
  align-items:start;
}
.review{
  margin:0;
  padding:22px 22px 20px;
  border:1px solid var(--line-soft);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  transition:.5s var(--ease);
  transition-property:border-color, background;
}
.review:hover{ border-color:rgba(255,167,36,.22); }

.review__stars{ display:flex; gap:3px; color:var(--warm); margin-bottom:14px; }
.review__stars i{ display:block; width:15px; height:15px; }
.review__stars svg{ width:100%; height:100%; display:block; }

.review blockquote{ margin:0; }
.review blockquote p{
  color:var(--ink-2); font-size:14px; line-height:1.65;
  margin-bottom:10px;
}
.review blockquote p:last-child{ margin-bottom:0; }

/* Продолжение скрыто, пока не нажали «Читать полностью».
   Анимируем через grid-template-rows: высота текста заранее неизвестна,
   а так переход получается плавным без замеров в скрипте. */
.review__more{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease);
}
.review__more > p:first-child{ margin-top:10px; }
.review__more > *{ overflow:hidden; min-height:0; }
.review.is-open .review__more{ grid-template-rows:1fr; }

.review__toggle{
  margin-top:12px; padding:0;
  border:0; background:none;
  color:var(--warm); font-size:13px; font-weight:700;
  cursor:pointer;
  transition:opacity .3s var(--ease);
}
.review__toggle:hover{ opacity:.75; }

.review figcaption{
  display:flex; flex-direction:column; gap:2px;
  margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line-soft);
}
.review figcaption b{ font-size:14px; font-weight:700; }
.review figcaption span{
  font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted);
}

@media (max-width:640px){
  .reviews__top{ flex-direction:column; align-items:stretch; }
  .ya-card{ justify-content:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  .review__more{ transition:none; }
}

/* ---------- 15.0. Панель звонка на телефоне ----------
   На компьютере скрыта: там телефон и так виден в шапке.
   На телефоне шапка сворачивается в бургер, и связаться становится
   нечем — эта панель закрывает дыру. */
.callbar{ display:none; }

@media (max-width:860px){
  .callbar{
    position:fixed; z-index:150;
    left:0; right:0; bottom:0;
    display:flex; gap:8px;
    padding:10px 12px;
    /* учитываем «домик» на айфонах, иначе кнопки под ним */
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    background:rgba(6,7,10,.86);
    backdrop-filter:blur(18px) saturate(1.3);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
    border-top:1px solid var(--line-soft);
    transform:translateY(110%);
    transition:transform .45s var(--ease);
  }
  /* Показываем не сразу: пока человек на первом экране, кнопки в шапке
     ещё видны, панель только мешала бы. */
  .callbar.is-visible{ transform:none; }

  .callbar__btn{
    flex:1;
    display:flex; align-items:center; justify-content:center; gap:8px;
    height:50px;
    border-radius:14px;
    font-size:15px; font-weight:700; letter-spacing:-.01em;
    transition:.3s var(--ease);
  }
  .callbar__btn svg{ width:19px; height:19px; }

  .callbar__btn--call{
    background:var(--warm);
    color:#0A0700;
    box-shadow:0 8px 24px -8px rgba(255,167,36,.6);
  }
  .callbar__btn--call:active{ transform:scale(.97); }

  .callbar__btn--form{
    background:var(--surface);
    border:1px solid var(--line);
    color:var(--ink);
  }
  .callbar__btn--form:active{ transform:scale(.97); }

  /* Чтобы панель не перекрывала подвал и кнопку формы */
  body{ padding-bottom:74px; }
}

@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .callbar{ transition:none; }
}

/* ---------- 15.1. Окно «заявка отправлена» ---------- */
.modal{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:20px;
}
.modal[hidden]{ display:none; }

.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(3,4,7,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:fadeIn .35s var(--ease) both;
}
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }

.modal__box{
  position:relative;
  width:min(440px,100%);
  padding:44px 36px 36px;
  border-radius:var(--r-lg);
  text-align:center;
  animation:popIn .5s var(--ease) both;
}
@keyframes popIn{
  from{ opacity:0; transform:translateY(18px) scale(.96) }
  to  { opacity:1; transform:none }
}

.modal__close{
  position:absolute; top:14px; right:14px;
  display:grid; place-items:center;
  width:38px; height:38px;
  border:1px solid var(--line); border-radius:50%;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:.35s var(--ease);
}
.modal__close svg{ width:17px; height:17px; }
.modal__close:hover{ color:var(--ink); border-color:var(--warm-dim); }

/* Галочка «загорается» как лампа — в тон всему сайту */
.modal__icon{
  display:grid; place-items:center;
  width:72px; height:72px;
  margin:0 auto 22px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 30%, rgba(255,167,36,.28), rgba(255,167,36,.06));
  border:1px solid var(--warm-dim);
  color:var(--warm);
  box-shadow:0 0 40px rgba(255,167,36,.35), inset 0 1px 0 rgba(255,255,255,.14);
  animation:iconGlow 2.6s ease-in-out infinite;
}
.modal__icon svg{ width:32px; height:32px; }
@keyframes iconGlow{
  0%,100%{ box-shadow:0 0 40px rgba(255,167,36,.35), inset 0 1px 0 rgba(255,255,255,.14) }
  50%    { box-shadow:0 0 58px rgba(255,167,36,.55), inset 0 1px 0 rgba(255,255,255,.2) }
}

.modal__title{
  font-size:clamp(24px,3vw,30px); font-weight:800; letter-spacing:-.03em;
  margin-bottom:12px;
}
.modal__text{
  color:var(--muted); font-size:15px; line-height:1.6;
  margin-bottom:20px;
}
.modal__phone{
  display:block;                /* кнопка «Понятно» уходит на свою строку */
  font-size:22px; font-weight:800; letter-spacing:-.02em;
  color:var(--warm);
  margin-bottom:28px;
  transition:text-shadow .4s var(--ease);
}
.modal__phone:hover{ text-shadow:0 0 26px var(--warm-dim); }

@media (prefers-reduced-motion:reduce){
  .modal__backdrop,.modal__box{ animation:none; }
  .modal__icon{ animation:none; }
}

/* ---------- 15.3. Страница вакансий ---------- */
.jobs-hero{
  position:relative; z-index:1;
  padding:clamp(140px,18vh,200px) 0 clamp(50px,7vw,90px);
  overflow:clip;
}
/* Ширину ограничиваем у содержимого, а не у самой обёртки. У обёртки класс
   .wrap: он даёт колонку страницы с margin-inline:auto. Если задать ей
   max-width:820px, этот auto центрирует узкую колонку по всему экрану, и на
   широком мониторе текст уезжает от левого края, где стоит логотип. */
.jobs-hero__inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.jobs-hero .h2{ margin-bottom:22px; max-width:820px; }

/* Фото на первом экране вакансий */
.jobs-hero__photo{
  margin:0;
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--sh-deep), inset 0 1px 0 rgba(255,255,255,.09);
  aspect-ratio:3/4;
}
.jobs-hero__photo img{
  width:100%; height:100%;
  object-fit:cover;
}
/* Снимок яркий, страница тёмная: приглушаем низ и добавляем тёплый отсвет,
   иначе фото вырезается из полотна прямоугольной заплаткой. */
.jobs-hero__photo::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, transparent 45%, rgba(5,6,9,.55)),
    radial-gradient(120% 80% at 50% 0%, rgba(255,167,36,.14), transparent 60%);
}
/* Файла ещё нет — прячем рамку целиком, а не пустой прямоугольник,
   и заодно схлопываем колонку под неё, иначе текст остаётся зажатым
   в пустой сетке. Класс is-missing вешает обработчик ошибок из main.js. */
.jobs-hero__photo:has(img.is-missing){ display:none; }
.jobs-hero__inner:has(.jobs-hero__photo img.is-missing){
  grid-template-columns:minmax(0,1fr);
}

@media (max-width:900px){
  .jobs-hero__inner{ grid-template-columns:minmax(0,1fr); }
  /* Пропорции оставляем родные (3:4): при обрезке до 4:3 от монтажника
     оставалась одна каска. */
  .jobs-hero__photo{ max-width:420px; }
}
.jobs-hero__text{
  color:var(--ink-2); font-size:clamp(15px,1.3vw,17px);
  line-height:1.7; margin-bottom:14px; max-width:680px;
}
.jobs-hero__text b{ color:var(--ink); font-weight:700; }
.jobs-hero__actions{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:32px;
}

.jobs-cols__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,70px);
}
.jobs-cols .h2{ margin-bottom:26px; }

.jobs-list{ display:grid; gap:14px; }
.jobs-list li{
  position:relative;
  padding-left:28px;
  color:var(--ink-2); font-size:15px; line-height:1.6;
}
/* Точка-светильник, как в списке «почему выбирают нас» */
.jobs-list li::before{
  content:''; position:absolute; left:2px; top:9px;
  width:8px; height:8px; border-radius:50%;
  background:var(--warm);
  box-shadow:0 0 0 4px rgba(255,167,36,.1);
}

.jobs-alt{
  margin-top:24px;
  font-size:14.5px; color:var(--muted);
}
.jobs-alt a{
  color:var(--warm); font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
}

@media (max-width:860px){
  .jobs-cols__grid{ grid-template-columns:1fr; }
  .jobs-hero__actions .btn{ flex:1 1 100%; justify-content:space-between; }
}

/* ---------- 15.2. Текстовая страница (политика конфиденциальности) ---------- */
.legal{
  position:relative; z-index:1;
  padding:clamp(120px,16vh,180px) 0 clamp(60px,8vw,100px);
}
.legal__wrap{ max-width:780px; }
.legal h1{ margin-bottom:14px; }
.legal__lead{
  color:var(--muted); font-size:16px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:8px;
}
.legal h2{
  font-size:19px; font-weight:700; letter-spacing:-.02em;
  margin:36px 0 14px;
}
.legal p{
  color:var(--ink-2); font-size:15.5px; line-height:1.7;
  margin-bottom:14px;
}
.legal b{ color:var(--ink); font-weight:700; }
.legal a{
  color:var(--warm);
  text-decoration:underline; text-underline-offset:2px;
}
.legal__list{
  display:grid; gap:9px;
  margin:0 0 18px;
  padding-left:2px;
}
.legal__list li{
  position:relative;
  padding-left:20px;
  color:var(--ink-2); font-size:15.5px; line-height:1.65;
}
.legal__list li::before{
  content:''; position:absolute; left:2px; top:10px;
  width:6px; height:6px; border-radius:50%;
  background:var(--warm); opacity:.75;
}
.legal__back{
  margin-top:44px; padding-top:32px;
  border-top:1px solid var(--line-soft);
}

/* ---------- 16. Подвал ---------- */
.footer{
  position:relative; z-index:1;
  padding-top:clamp(60px,8vw,100px);
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.014));
}
.footer__cta{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding-bottom:clamp(48px,6vw,72px);
  border-bottom:1px solid var(--line-soft);
}
.footer__cta p{ margin-top:10px; color:var(--muted); font-size:16px; }

.footer__cols{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,4vw,48px);
  padding-block:clamp(44px,6vw,68px);
}
.footer__col p{ color:var(--muted); font-size:15.5px; line-height:1.75; }
.footer__big{
  display:block;
  font-size:clamp(22px,2.4vw,30px); font-weight:800; letter-spacing:-.02em;
  margin-bottom:8px;
  transition:.4s var(--ease);
}
.footer__big:hover{ color:var(--warm); text-shadow:0 0 34px var(--warm-dim); }
.footer__mail{ color:var(--muted); font-size:15.5px; transition:color .4s var(--ease); }
.footer__mail:hover{ color:var(--ink); }

.footer__socials{ display:flex; gap:10px; }
.footer__socials a{
  display:grid; place-items:center;
  width:46px; height:46px;
  border:1px solid var(--line); border-radius:50%;
  color:var(--ink-2);
  transition:.4s var(--ease);
}
.footer__socials svg{ width:20px; height:20px; }
.footer__socials a:hover{
  color:var(--warm); border-color:var(--warm-dim);
  box-shadow:0 0 26px var(--warm-dim);
}

.footer__bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-block:26px;
  border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--muted);
}

/* ---------- 17. Появление при скролле ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* Первый экран ждёт загрузки — свет включается после */
body.is-loading .hero [data-reveal]{ opacity:0; transform:translateY(26px); }

@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .beam,.grain,.logo__img,.mouse i,.label i{ animation:none; }
  .ticker__track,.band__track{ animation:none; }
}

/* ---------- 18. Адаптив ---------- */
/* Шапка становится тесной раньше, чем включается бургер:
   убираем подпись у логотипа и поджимаем меню, чтобы пункты не переносились */
@media (max-width:1340px){
  .logo__tag{ display:none; }
  .nav{ gap:0; }
  .nav a{ padding-inline:11px; font-size:14px; }
  .header__actions{ gap:12px; }
}

@media (max-width:1180px){
  .hero__hint{ max-width:180px; }
  .header__phone{ font-size:14px; }
}

@media (max-width:1024px){
  .nav{
    position:fixed; inset:0 0 auto;
    flex-direction:column; gap:2px;
    padding:96px var(--pad) 32px;
    background:rgba(6,7,10,.94);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--line);
    transform:translateY(-102%);
    transition:transform .55s var(--ease);
    visibility:hidden;
  }
  .nav.is-open{ transform:none; visibility:visible; }
  .nav a{ padding:15px 4px; font-size:19px; font-weight:600; }
  .nav a::after{ display:none; }
  .burger{ display:grid; }
  .header__phone{ display:none; }
  .rail{ display:none; }
  .logo__tag{ display:none; }
  .logo__img,
  .header.is-stuck .logo__img{ height:42px; }

  .projects__top{ grid-template-columns:1fr; align-items:start; }
  .about__inner{ grid-template-columns:1fr; }
  .about__media{ position:relative; top:0; max-width:520px; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .tile--feature{ grid-column:1/-1; grid-row:span 2; }
  .tile--tall{ grid-column:span 1; grid-row:span 2; }
  .tile--pano{ grid-column:1/-1; grid-row:span 2; }
}

@media (max-width:860px){
  .hero{ padding-bottom:190px; }
  .hero__bar{
    flex-direction:column; align-items:stretch;
    inset:auto var(--pad) 26px;
  }
  .hero__hint{ max-width:none; justify-content:center; text-align:center; }
  .hero__stats{ justify-content:space-between; gap:10px; padding:16px 18px; }
  .stat span{ font-size:10px; max-width:90px; }
  .hero__scroll{ display:none; }
}

@media (max-width:760px){
  .hero__actions .btn{ flex:1 1 100%; justify-content:space-between; }

  .footer__cols{ grid-template-columns:1fr; gap:36px; }
  .form{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; gap:8px; }
  .btn{ padding:12px 14px 12px 22px; font-size:14px; }
  .btn__arrow{ width:34px; height:34px; }
}

@media (max-width:520px){
  .grid{ grid-template-columns:1fr; }
  .tile--feature,
  .tile--tall,
  .tile--pano{ grid-column:1/-1; grid-row:span 2; }
  .projects__foot{ flex-direction:column; align-items:flex-start; }
}