/* ТатМонолит — заглушка. Чистый CSS, ни одной картинки и ни одной библиотеки.

   Тема взята из предмета: чертёжная сетка, арматурные диагонали, бетонный
   графит и янтарь строительной разметки. Всё нарисовано градиентами —
   страница не ждёт загрузки изображений и весит единицы килобайт.

   Современные приёмы, каждый с запасом:
   - @property          — угол градиента анимируется по-настоящему
   - color-mix()        — оттенки считаются от трёх опорных цветов
   - :has()             — состояние без класса от скрипта
   - text-wrap: balance — заголовок не оставляет висячее слово
   - CSS-переменные от курсора — параллакс и свечение рисует CSS
*/

@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* 🌗 ДВЕ ТЕМЫ: НОЧНАЯ СТРОЙКА И ДНЕВНАЯ.
   Владелец: «верни тёмную тему, просто сделай переключатель тем».

   ⚠️ Это не «инвертировать цвета». На тёмном фоне линия светлее фона и
   светится; на светлом она обязана быть ТЕМНЕЕ фона, иначе исчезает.
   Поэтому у тем различаются не только фон и чернила, а ещё четыре вещи:
   глубина акцентов, ПЛОТНОСТЬ линий сцены (`--scene-boost`), цвет дуги
   и способ её смешивания, и оформление панелей с заголовками.

   Всё, что зависит от темы, собрано ЗДЕСЬ переменными — в том числе то,
   что читает crane3d.js и favicon.js. Держать эти цвета в коде нельзя:
   тема переключалась бы в вёрстке, а сцена оставалась бы от прежней.

   По умолчанию — ночь: с неё сайт начинался, её и просили вернуть. */
:root{
  --bg:#0C0E12;
  --ink:#E8EDF5;
  --acc:#F2A93B;                       /* янтарь разметки */
  --acc-2:#4DA3FF;                     /* синий чертежа */
  --acc-3:#FF5C48;                     /* красный */
  --scene-boost:1;                     /* во сколько раз плотнее линии сцены */
  --scene-light:0;                     /* 1 — день, 0 — ночь */
  --scene-cloth:#070C13;               /* полотно баннера */
  --scene-shield:#12202E;              /* щиток сварщика */
  --arc:#DCEAFF;                       /* ядро дуги */
  --arc-halo:#7FB0FF;                  /* ореол дуги */

  --ink-mix:55%;
  --line-mix:12%;
  --btn-ink:#1A1205;                   /* текст на янтарной кнопке */
  --shine:#fff;                        /* блик по боковой полоске */
  --glow:color-mix(in oklab,var(--acc) 16%,transparent);
  --glow-size:520px;
  --grain:.05;
  --box-sh:0 30px 80px rgba(0,0,0,.55);
  --cloth-op:.72;

  /* Панель баннера и заголовок — ночью со свечением. */
  --panel-bg:linear-gradient(180deg,
    color-mix(in oklab,#05090F 86%,transparent),
    color-mix(in oklab,#05090F 70%,transparent));
  --panel-brd:hsl(var(--hue,190) 90% 62% / .40);
  --panel-sh:0 0 36px hsl(var(--hue,190) 95% 55% / .16),
    inset 0 1px 0 hsl(var(--hue,190) 95% 82% / .20);
  --title-col:hsl(var(--hue,190) 97% 74%);
  --title-sh:0 0 5px hsl(var(--hue,190) 100% 64% / .65),
    0 0 24px hsl(var(--hue,190) 100% 55% / .38);
  --step-col:hsl(var(--hue,190) 92% 78%);
  --li-brd:hsl(var(--hue,190) 80% 60% / .22);
  --li-brd-h:hsl(var(--hue,190) 90% 62% / .6);
  --li-bg:color-mix(in oklab,var(--ink) 6%,transparent);
}

/* ☀️ День: бетон и белый ватман. Акценты глубже — светлый янтарь на
   белом не читается; линии сцены плотнее в 1,9 раза. */
:root[data-theme="day"]{
  --bg:#EDF1F6;
  --ink:#0E1621;
  --acc:#C97A06;
  --acc-2:#15589E;
  --acc-3:#C0392B;
  --scene-boost:1.9;
  --scene-light:1;
  --scene-cloth:#FFFFFF;
  --scene-shield:#20303F;
  --arc:#123FD0;
  --arc-halo:#3E74FF;

  --ink-mix:62%;
  --line-mix:18%;
  --btn-ink:#FFF8EC;
  --shine:#0B1420;
  --glow:color-mix(in oklab,#FFD27A 34%,transparent);
  --glow-size:560px;
  --grain:.035;
  --box-sh:0 24px 60px rgba(14,22,33,.22);
  --cloth-op:.5;

  --panel-bg:linear-gradient(180deg,
    color-mix(in oklab,#FFFFFF 88%,transparent),
    color-mix(in oklab,#FFFFFF 74%,transparent));
  --panel-brd:hsl(var(--hue,190) 70% 42% / .55);
  --panel-sh:0 10px 30px hsl(var(--hue,190) 45% 28% / .14),
    inset 0 1px 0 #FFFFFFCC;
  /* На свету неон не работает: ореол по светлому фону читается как
     грязь вокруг букв. Контраст даёт насыщенный тёмный цвет того же тона. */
  --title-col:hsl(var(--hue,190) 78% 34%);
  --title-sh:0 1px 0 #FFFFFFB0;
  --step-col:hsl(var(--hue,190) 72% 34%);
  --li-brd:hsl(var(--hue,190) 55% 45% / .28);
  --li-brd-h:hsl(var(--hue,190) 75% 42% / .75);
  --li-bg:#FFFFFFAE;
}

/* Производные значения — общие для обеих тем: меняются сами вслед за
   переменными выше. */
:root{
  --ink-dim:color-mix(in oklab, var(--ink) var(--ink-mix), transparent);
  --line:color-mix(in oklab, var(--ink) var(--line-mix), transparent);
  --acc-soft:color-mix(in oklab, var(--acc) 16%, transparent);

  --wrap:1080px;
  --pad:24px;
  --tap:44px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --mx:50%; --my:40%;                  /* курсор, кладёт JS */
  --px:0px; --py:0px;                  /* сдвиг параллакса */
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;min-height:100svh;background:var(--bg);color:var(--ink);
  font:400 17px/1.6 Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1{margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}

/* ---------- чертёжная подложка ---------- */
.blueprint{position:fixed;inset:-6%;z-index:0;pointer-events:none;overflow:hidden}

.grid{position:absolute;inset:0;transform:translate3d(var(--px),var(--py),0);transition:transform .35s var(--ease)}
.grid--fine{
  background-image:
    linear-gradient(color-mix(in oklab,var(--ink) 7%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in oklab,var(--ink) 7%,transparent) 1px,transparent 1px);
  background-size:38px 38px;
}
.grid--bold{
  background-image:
    linear-gradient(color-mix(in oklab,var(--acc-2) 14%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in oklab,var(--acc-2) 14%,transparent) 1px,transparent 1px);
  background-size:190px 190px;
  transform:translate3d(calc(var(--px) * 1.8),calc(var(--py) * 1.8),0);
}

/* Диагонали — намёк на арматурный каркас. Медленно ползут, чтобы страница
   не выглядела замершей, и не спорят с текстом: прозрачность 6 %.

   ⚠️ Угол задаёт НАПРАВЛЕНИЕ градиента, а сами полосы идут ПЕРПЕНДИКУЛЯРНО
   ему. Поэтому «слева направо вверх» — это не 58deg, а 122deg: при 58deg
   полосы ложились в обратную сторону, как «\». Ползут теперь вдоль своего
   наклона — вверх и вправо, а не поперёк. */
.rebar{
  position:absolute;inset:-40%;
  background:repeating-linear-gradient(122deg,
    transparent 0 58px,
    color-mix(in oklab,var(--acc) 11%,transparent) 58px 60px);
  animation:crawl 34s linear infinite;
}
@keyframes crawl{to{transform:translate3d(150px,-240px,0)}}

/* Свечение идёт за курсором — на телефоне остаётся по центру. */
.glow{
  position:absolute;inset:0;
  /* Ночью — холодное свечение акцента, днём тёплое солнечное пятно. */
  background:radial-gradient(var(--glow-size) circle at var(--mx) var(--my),
             var(--glow),transparent 66%);
  transition:background-position .2s;
}
.grain{
  position:absolute;inset:-200%;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}
  50%{transform:translate(3%,-4%)}75%{transform:translate(-2%,-3%)}100%{transform:translate(0,0)}}

/* ---------- боковые полоски ---------- */
.edges{position:fixed;inset:0;z-index:40;pointer-events:none}
.edge{position:absolute;top:0;bottom:0;width:2px;overflow:hidden;
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.edge--l{left:0;background:linear-gradient(180deg,
  color-mix(in oklab,var(--acc) 25%,transparent),var(--acc) 50%,
  color-mix(in oklab,var(--acc) 20%,transparent));
  box-shadow:0 0 16px color-mix(in oklab,var(--acc) 40%,transparent)}
.edge--r{right:0;background:linear-gradient(180deg,
  color-mix(in oklab,var(--acc-3) 20%,transparent),var(--acc-3) 55%,
  color-mix(in oklab,var(--acc-3) 25%,transparent));
  box-shadow:0 0 16px color-mix(in oklab,var(--acc-3) 40%,transparent)}
.edge::after{content:"";position:absolute;left:0;right:0;height:20%;
  background:linear-gradient(180deg,transparent,#FFFFFF,transparent);
  opacity:.6;animation:shine 7s var(--ease) infinite}
.edge--r::after{animation-delay:3.5s}
@keyframes shine{0%{transform:translateY(-30%);opacity:0}12%{opacity:.85}
  60%{opacity:.85}72%,100%{transform:translateY(470%);opacity:0}}

/* ---------- сцена ----------
   ⚠️ Слева на странице резерв под вертикальную часть крана: башня стоит
   у самого края экрана и не должна попадать под текст. Ширина резерва —
   переменная `--crane`, её же читает crane3d.js, чтобы поставить башню.
   Если поменять здесь и забыть там, башня наедет на буквы. */
:root{ --crane:96px }
/* Широкий экран: колонка 1080 px сама отходит от края дальше башни,
   и резерв не нужен. Рубеж 1320 px не выдуман — это ширина, при которой
   левый край колонки (vw−1080)/2 уходит за правую грань башни. */
@media (min-width:1320px){ :root{ --crane:0px } }
@media (max-width:900px){ :root{ --crane:58px } }

.stage{position:relative;z-index:1}
.wrap{padding-left:var(--crane)}

.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:40px 0 30px}
.hero .wrap{display:flex;flex-direction:column;gap:clamp(28px,6vh,56px)}

/* Секции-этажи. Панель прижата вправо: там же, на правой стороне сцены,
   стоит каркас здания, и баннер этажа ложится ровно под панель. */
.floor{padding:clamp(54px,9vh,110px) 0}
/* ⚠️ Текст прижат к ЛЕВОМУ краю баннера, а не к правому. Баннер
   крепится к левой грани здания, и при выключке вправо между креплением
   и первой буквой оставалось полполотна пустоты. */
.floor .wrap{display:flex;justify-content:flex-start}
/* ⚠️ ПАНЕЛЬ — ЭТО ПОЛОТНО БАННЕРА, А НЕ ПРОСТО ТЕКСТ.
   Владелец: «тексты плохо читаются». Причина была в том, что буквы
   лежали прямо на сцене: за ними двигался каркас, и контраст менялся от
   того, что именно в этот момент проезжало сзади. Теперь у панели есть
   собственная подложка с размытием — читаемость перестала зависеть от
   сцены.

   🎨 ЦВЕТ КАЖДОГО ЭТАЖА ВЗЯТ С ЦВЕТОВОГО КРУГА: шесть секций, шаг 60°.
   Это не «подобрали красиво», а ровное деление круга — потому цвета и
   не спорят между собой. */
.panel{
  --hue:190;
  width:min(100%,620px);
  padding:clamp(20px,2.6vw,32px) clamp(18px,2.4vw,30px);
  border-radius:16px;
  /* Полотно, рамка и тень берутся из темы: ночью тёмная подложка со
     свечением, днём светлая. Тёмная подложка на светлой странице
     читалась бы как дыра, а не как натянутая ткань. */
  background:var(--panel-bg);
  border:1px solid var(--panel-brd);
  box-shadow:var(--panel-sh);
  backdrop-filter:blur(8px) saturate(1.15);
  -webkit-backdrop-filter:blur(8px) saturate(1.15);
}
#f1 .panel{--hue:190} #f2 .panel{--hue:250} #f3 .panel{--hue:310}
#f4 .panel{--hue:10}  #f5 .panel{--hue:70}  #f6 .panel{--hue:130}

/* Неоновый заголовок: крупный, в цвете этажа, со свечением в два слоя —
   ближний даёт контур, дальний ореол. Один слой выглядит как размытый
   текст, а не как неон. */
.ftitle{
  margin:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font:800 clamp(27px,3.4vw,44px)/1.06 Manrope;letter-spacing:-.02em;
  color:var(--title-col);
  text-shadow:var(--title-sh);
}
.ftitle .num{font:700 13px/1 "JetBrains Mono",monospace;letter-spacing:.2em;
  color:hsl(var(--hue) 70% 46%);opacity:.95;text-shadow:none}
.panel .lead{margin-top:16px;color:color-mix(in oklab,var(--ink) 82%,transparent);font-size:clamp(16px,1.7vw,18px)}

/* Этапы: термин и расшифровка. Список определений, а не таблица —
   на телефоне таблица всё равно рассыпалась бы в столбик. */
.steps{margin:24px 0 0;display:grid;gap:14px}
.steps dt{font:700 16.5px/1.3 Manrope;color:var(--step-col)}
.steps dd{margin:3px 0 0;font-size:15.5px;color:color-mix(in oklab,var(--ink) 80%,transparent)}

.scrollhint{display:flex;align-items:center;gap:11px;
  font:700 12px/1 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim)}
.scrollhint span{width:1px;height:26px;background:linear-gradient(180deg,var(--acc),transparent);
  animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(-8px);opacity:0}30%{opacity:1}100%{transform:translateY(10px);opacity:0}}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;font:800 19px/1 Manrope;letter-spacing:.02em}
.logo__mark{
  width:26px;height:26px;
  background:conic-gradient(from var(--ang),var(--acc),var(--acc-2),var(--acc-3),var(--acc));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  animation:spin 9s linear infinite;
}
@keyframes spin{to{--ang:360deg}}
.logo__text b{color:var(--acc)}

.status{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  border:1px solid var(--line);background:#FFFFFFC0;
  font:700 12px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dim);
}
.status i{width:8px;height:8px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 0 color-mix(in oklab,var(--acc) 70%,transparent);animation:pulse 2s infinite}
@keyframes pulse{
  70%{box-shadow:0 0 0 11px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* ---------- ядро ---------- */
.eyebrow{font:700 13px/1 "JetBrains Mono",monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--acc)}
.h1{
  margin-top:16px;font-size:clamp(36px,7vw,84px);font-weight:800;line-height:1.04;letter-spacing:-.03em;
  background:linear-gradient(var(--ang),var(--ink),var(--acc) 55%,var(--ink));
  background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hue 11s linear infinite;
}
@keyframes hue{to{--ang:360deg}}
.cur{display:inline-block;width:.5ch;height:.86em;vertical-align:-.08em;margin-left:.06em;
  background:var(--acc);animation:blink 1.05s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.lead{margin-top:20px;font-size:clamp(16px,1.7vw,19px);color:var(--ink-dim);max-width:52ch}

.lines{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;max-width:640px}
.lines li{
  display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:12px;
  /* ⚠️ Заливка и рамка — ИЗ ТЕМЫ. Здесь стоял белый #FFFFFFAE,
     подобранный для дневной страницы: ночью пункты превращались в
     светло-серые плашки, а текст на них терялся. */
  border:1px solid var(--li-brd);
  background:var(--li-bg);
  font-size:16px;color:var(--ink);
  transition:border-color .25s,transform .25s var(--ease),background .25s;
}
.lines li:hover{border-color:var(--li-brd-h);transform:translateX(5px);
  background:hsl(var(--hue,190) 85% 55% / .14)}
.num{font:700 12px/1 "JetBrains Mono",monospace;color:var(--acc);letter-spacing:.08em}

/* Полоса «работа идёт»: без процентов, потому что процента мы не знаем.
   Число, которого нет, придумывать нельзя даже в заглушке. */
.bar{margin-top:30px;height:3px;border-radius:3px;overflow:hidden;
  background:color-mix(in oklab,var(--ink) 12%,transparent);max-width:640px}
.bar span{display:block;width:34%;height:100%;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--acc),transparent);
  animation:slide 2.4s var(--ease) infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(330%)}}

.row{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);
  padding:0 26px;border-radius:999px;font:700 15px/1 Manrope;
  background:var(--acc);color:#FFF6E6;
  box-shadow:0 10px 28px color-mix(in oklab,var(--acc) 26%,transparent);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s;
}
.btn:hover{filter:brightness(1.06);box-shadow:0 16px 36px color-mix(in oklab,var(--acc) 34%,transparent)}
.btn--ghost{background:#FFFFFFBB;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn--ghost:hover{border-color:var(--acc);background:var(--acc-soft)}
.note{margin-top:16px;font-size:13px;color:var(--ink-dim);opacity:.85}

.lines--warn li:hover{border-color:color-mix(in oklab,var(--acc-3) 45%,transparent);
  background:color-mix(in oklab,var(--acc-3) 10%,transparent)}

/* ---------- кнопка музыки ----------
   Слева внизу, подальше от кнопки чата справа: две круглые кнопки в
   одном углу читались бы как одна пара, а дела у них разные. */
.snd{
  position:fixed;left:16px;bottom:16px;z-index:60;
  display:inline-flex;align-items:center;gap:9px;min-height:var(--tap);
  padding:0 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:#FFFFFFD8;
  backdrop-filter:blur(7px);color:var(--ink-dim);
  font:700 12px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .2s,color .2s,background .2s;
}
.snd:hover{border-color:color-mix(in oklab,var(--acc) 45%,transparent);color:var(--ink)}
.snd--on{border-color:color-mix(in oklab,var(--acc) 55%,transparent);color:var(--acc)}
.snd__i{font-size:15px;line-height:1}
/* ⚠️ НАСТОЯЩАЯ ПРИЧИНА «на телефоне нет музыки».
   Кнопка чата на узком экране растягивается во всю ширину
   (`.chat{left:12px;right:12px}`) и ЛОЖИЛАСЬ ПОВЕРХ кнопки музыки — та
   была на месте и работала, но нажать её было нельзя. Поэтому здесь
   кнопка поднимается над чатом, а подпись остаётся: без неё значок
   читался как неизвестно что.
   📌 Высота взята с запасом под кнопку чата (44 px) плюс её отступ. */
/* ⚠️ И ВПРАВО. Владелец прислал снимок: «кнопка „бастуют“ закрывает
   толпу бастующих и танцующих». Бригада стоит у ЛЕВОГО края здания —
   ровно там, где висела кнопка. Справа фигур нет, поэтому она уезжает
   туда. */
@media (max-width:640px){
  .snd{left:auto;right:12px;bottom:74px;padding:0 12px;font-size:10px;letter-spacing:.06em}
}

/* Переключатель тем — рядом с кнопкой музыки, тем же видом: обе
   управляют «средой» страницы, а не её содержанием. */
.thm{
  position:fixed;left:16px;bottom:72px;z-index:60;
  display:inline-flex;align-items:center;gap:9px;min-height:var(--tap);
  padding:0 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:color-mix(in oklab,var(--bg) 82%,transparent);
  backdrop-filter:blur(7px);color:var(--ink-dim);
  font:700 12px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .2s,color .2s,background .2s;
}
.thm:hover{border-color:color-mix(in oklab,var(--acc) 45%,transparent);color:var(--ink)}
.thm__i{font-size:15px;line-height:1}
/* На телефоне кнопка чата занимает всю ширину внизу, поэтому обе наши
   кнопки уходят вверх и вправо — иначе чат накрывает их целиком. */
@media (max-width:640px){
  .thm{left:auto;right:12px;bottom:126px;padding:0 12px;font-size:10px;letter-spacing:.06em}
}

/* ---------- низ ---------- */
.bottom{padding:30px 0 40px}
.bottom .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-dim)}
.bottom__dev a{
  position:relative;color:var(--ink);font-weight:700;
  background:linear-gradient(90deg,var(--acc),var(--acc-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bottom__dev a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:linear-gradient(90deg,var(--acc),var(--acc-2));transform:scaleX(0);
  transform-origin:left;transition:transform .3s var(--ease)}
.bottom__dev a:hover::after{transform:scaleX(1)}

/* ---------- адаптив ---------- */
@media (max-width:640px){
  .top{gap:12px}
  .lines li{padding:12px 14px}
}

/* ---------- настройки движения человека важнее наших анимаций ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .cur{display:none}
}

/* ---------- чат с ИИ ----------
   Кнопка и окно живут поверх страницы, в своём слое: чат не должен
   подвинуть ни одну строку вёрстки, иначе он становится частью макета
   и ломает его на узких экранах. */
.chat{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px}

.chat__fab{
  display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);
  padding:0 20px;border:0;border-radius:999px;cursor:pointer;
  font:700 15px/1 Manrope;color:#FFF6E6;background:var(--acc);
  box-shadow:0 12px 30px color-mix(in oklab,var(--acc) 34%,transparent);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s;
}
.chat__fab:hover{transform:translateY(-2px);filter:brightness(1.05)}
.chat__fab-dot{width:9px;height:9px;border-radius:50%;background:var(--btn-ink);
  box-shadow:0 0 0 0 rgba(255,248,236,.7);animation:pulse 2s infinite}

.chat__box{
  width:min(380px,calc(100vw - 40px));height:min(520px,70svh);
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:18px;
  background:color-mix(in oklab,var(--bg) 92%,#fff);
  backdrop-filter:blur(14px);
  box-shadow:var(--box-sh);
  animation:pop .26s var(--ease) both;
}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.chat__box[hidden]{display:none}

.chat__head{display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:1px solid var(--line);font-size:15px}
.chat__tag{font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.12em;padding:4px 7px;border-radius:999px;
  color:#FFF6E6;background:var(--acc)}
.chat__x{margin-left:auto;width:30px;height:30px;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--ink-dim);font-size:20px;line-height:1}
.chat__x:hover{background:color-mix(in oklab,var(--ink) 8%,transparent);color:var(--ink)}

.chat__log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:15px;line-height:1.5;white-space:pre-wrap}
.msg--bot{align-self:flex-start;background:color-mix(in oklab,var(--ink) 7%,transparent);
  border:1px solid var(--line);border-bottom-left-radius:5px}
.msg--me{align-self:flex-end;background:var(--acc);color:#FFF6E6;font-weight:500;border-bottom-right-radius:5px}
.msg--wait{opacity:.6;animation:blink 1.1s steps(2) infinite}

.chat__hints{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 10px}
.chat__hints[hidden]{display:none}
.chat__hints button{
  padding:7px 11px;border-radius:999px;cursor:pointer;font:500 13px/1 Manrope;
  color:var(--ink-dim);background:transparent;border:1px solid var(--line);transition:border-color .2s,color .2s;
}
.chat__hints button:hover{border-color:var(--acc);color:var(--ink)}

.chat__form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.chat__form input{
  flex:1;min-height:40px;padding:0 14px;border-radius:999px;font:400 15px/1 Manrope;
  color:var(--ink);background:color-mix(in oklab,var(--ink) 6%,transparent);
  border:1px solid var(--line);outline:0;transition:border-color .2s;
}
.chat__form input:focus{border-color:var(--acc)}
.chat__form button{
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  font-size:18px;color:#FFF6E6;background:var(--acc);transition:filter .2s,transform .18s var(--ease);
}
.chat__form button:hover{filter:brightness(1.06);transform:scale(1.05)}

@media (max-width:480px){
  .chat{right:12px;bottom:12px;left:12px;align-items:stretch}
  .chat__fab{justify-content:center}
  .chat__box{width:100%;height:min(560px,76svh)}
}

/* ---------- чат с ИИ ----------
   Виджет живёт поверх страницы и не трогает её разметку: скрипт создаёт
   его сам. Убрали chat.js — заглушка осталась целой. */
.chat{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px}

.chat__fab{
  display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);
  padding:0 20px;border:0;border-radius:999px;cursor:pointer;
  font:700 15px/1 Manrope;color:#FFF6E6;background:var(--acc);
  box-shadow:0 12px 30px color-mix(in oklab,var(--acc) 34%,transparent);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s;
}
.chat__fab:hover{transform:translateY(-2px);filter:brightness(1.06)}
.chat__fab-dot{width:9px;height:9px;border-radius:50%;background:var(--btn-ink);
  box-shadow:0 0 0 0 rgba(255,248,236,.7);animation:pulse 2s infinite}

.chat__box{
  width:min(92vw,392px);height:min(70svh,540px);display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:color-mix(in oklab,var(--bg) 94%,#fff);
  backdrop-filter:blur(14px);box-shadow:0 22px 56px rgba(14,22,33,.20);
  animation:pop .26s var(--ease) both;
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.chat__box[hidden]{display:none}

.chat__head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.chat__head b{font-size:15px}
.chat__tag{font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.12em;
  padding:4px 8px;border-radius:999px;color:#FFF6E6;background:var(--acc)}
.chat__x{margin-left:auto;width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--ink-dim);font-size:22px;line-height:1;transition:background .2s,color .2s}
.chat__x:hover{background:color-mix(in oklab,var(--ink) 8%,transparent);color:var(--ink)}

.chat__log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;font-size:15px}
.msg{max-width:86%;padding:10px 14px;border-radius:14px;white-space:pre-wrap;word-break:break-word;
  animation:msgIn .22s var(--ease) both}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg--bot{align-self:flex-start;background:color-mix(in oklab,var(--ink) 7%,transparent);
  border:1px solid var(--line);border-bottom-left-radius:5px}
.msg--me{align-self:flex-end;background:var(--acc);color:#FFF6E6;border-bottom-right-radius:5px;font-weight:500}
.msg--wait{letter-spacing:.22em;color:var(--ink-dim);animation:blinkWait 1.1s ease-in-out infinite}
@keyframes blinkWait{50%{opacity:.35}}

.chat__hints{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 10px}
.chat__hints[hidden]{display:none}
.chat__hints button{
  padding:7px 12px;border-radius:999px;cursor:pointer;font:500 13px/1 Manrope;
  color:var(--ink-dim);background:transparent;border:1px solid var(--line);
  transition:border-color .2s,color .2s,background .2s;
}
.chat__hints button:hover{border-color:var(--acc);color:var(--ink);background:var(--acc-soft)}

.chat__form{display:flex;gap:9px;padding:12px 14px;border-top:1px solid var(--line)}
.chat__form input{
  flex:1;min-height:40px;padding:0 14px;border-radius:999px;font:400 15px/1 Manrope;
  color:var(--ink);background:color-mix(in oklab,var(--ink) 6%,transparent);
  border:1px solid var(--line);outline:none;transition:border-color .2s;
}
.chat__form input:focus{border-color:var(--acc)}
.chat__form button{
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  font-size:18px;color:#FFF6E6;background:var(--acc);transition:filter .18s,transform .18s var(--ease);
}
.chat__form button:hover{filter:brightness(1.07);transform:scale(1.05)}

@media (max-width:480px){
  .chat{right:12px;bottom:12px;left:12px;align-items:stretch}
  .chat__fab{justify-content:center}
  .chat__box{width:auto;height:min(76svh,520px)}
}


/* ───────── башенный кран (объёмная подложка) ─────────
   Лежит над чертёжной сеткой и под содержимым. `pointer-events:none`
   обязателен: подложка, которая ловит мышь, отнимает клики у кнопок. */
.crane3d{position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.4s var(--ease)}
.crane3d.is-on{opacity:1}
.crane3d canvas{display:block;width:100%;height:100%}
/* Содержимое выше крана. Шапку и прочее НЕ трогаем позиционированием:
   на tatgpt.ru правило `header.header{position:relative}` однажды
   сломало прилипание — селектор оказался весомее исходного. */
.stage{position:relative;z-index:1}

/* ═════════ Сапфировые парящие кнопки (23.09.2026, просьба Айрата) ═════════
   Как на tatgpt.ru: у кнопки есть толщина (слои тени под лицом), блик
   сверху, тень на «полу», и она медленно покачивается. Отличия:
   цвет — сапфир с бегущим переливом, углы — почти прямые (радиус 7 px).

   Контраст: белые подложки (#FFFFFFBB и т. п.) под светлым текстом ночной
   темы давали «белое на белом» — у «info@…», «строим с нуля», кнопок
   звука и темы. Теперь фон берётся из темы, а у сапфира текст белый.

   Парение — свойство translate, поэтому «магнит» (он двигает transform)
   продолжает работать поверх. */
:root{
  --sapph-1:#0B3D91; --sapph-2:#1560D4; --sapph-3:#5FA8FF;
  --sapph-edge:#062463; --sapph-ink:#F4F8FF;
}
.btn,.chat__fab,.snd,.thm{
  overflow:hidden;               /* position не трогаем: звук и тема — fixed */
  border-radius:7px;
  color:var(--sapph-ink);
  border:1px solid color-mix(in oklab,var(--sapph-3) 55%,transparent);
  background:
    linear-gradient(115deg,transparent 30%,rgba(255,255,255,.38) 45%,transparent 60%) 0 0/250% 100% no-repeat,
    linear-gradient(160deg,var(--sapph-3) 0%,var(--sapph-2) 38%,var(--sapph-1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 6px rgba(0,0,0,.28),
    0 1px 0 var(--sapph-edge),0 2px 0 var(--sapph-edge),0 3px 0 var(--sapph-edge),
    0 4px 0 color-mix(in oklab,var(--sapph-edge) 80%,#000),
    0 14px 26px color-mix(in oklab,var(--sapph-2) 38%,transparent);
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  animation:sapph-air 4.8s ease-in-out infinite,sapph-shine 5.5s ease-in-out infinite;
  transition:box-shadow .2s,filter .2s;
}
.btn:nth-of-type(2n),.snd{animation-delay:-1.6s,-2.7s}
.chat__fab,.thm{animation-delay:-3.1s,-1.2s}
@keyframes sapph-air{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes sapph-shine{0%,55%{background-position:160% 0,0 0}100%{background-position:-60% 0,0 0}}
.btn:hover,.chat__fab:hover,.snd:hover,.thm:hover{
  filter:brightness(1.12) saturate(1.1);color:#fff;
  border-color:color-mix(in oklab,var(--sapph-3) 85%,transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 6px rgba(0,0,0,.28),
    0 1px 0 var(--sapph-edge),0 2px 0 var(--sapph-edge),0 3px 0 var(--sapph-edge),
    0 4px 0 color-mix(in oklab,var(--sapph-edge) 80%,#000),
    0 20px 38px color-mix(in oklab,var(--sapph-3) 45%,transparent);
}
/* нажатие — кнопка проседает на свою толщину */
.btn:active,.chat__fab:active,.snd:active,.thm:active{
  translate:0 3px;animation-play-state:paused;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 var(--sapph-edge);
}
/* второстепенные — «тёмный сапфир»: то же стекло, но глубже, чтобы
   главная кнопка оставалась главной */
.btn--ghost,.snd,.thm{
  --sapph-3:#3F7FD8; --sapph-2:#123F8C; --sapph-1:#08204D;
  background:
    linear-gradient(115deg,transparent 30%,rgba(140,190,255,.28) 45%,transparent 60%) 0 0/250% 100% no-repeat,
    linear-gradient(160deg,var(--sapph-3) 0%,var(--sapph-2) 40%,var(--sapph-1) 100%);
  backdrop-filter:none;
}
.snd--on{color:#FFE7B8;border-color:color-mix(in oklab,var(--acc) 70%,transparent)}
.chat__fab-dot{background:#9FD0FF!important}

/* плашка «строим с нуля» — не кнопка, не парит, но читается в обеих темах */
.status{
  border-radius:7px;
  background:color-mix(in oklab,var(--bg) 70%,transparent);
  border-color:color-mix(in oklab,var(--sapph-3) 45%,transparent);
  color:var(--ink);backdrop-filter:blur(6px);
}

@media (prefers-reduced-motion:reduce){
  .btn,.chat__fab,.snd,.thm{animation:none}
}

/* ── Телефон: «день/ночь» и музыка — значками в правом верхнем углу ──
   Айрат, 23.09.2026, снимок с телефона: «ДЕНЬ» наезжал на кнопку почты.
   Внизу экрана им тесно: там кнопка чата во всю ширину и кнопки героя.
   Вверху справа пусто (логотип слева), поэтому там две квадратные
   кнопки-значка. Подпись скрыта, но остаётся для чтения экранным
   диктором (aria-label у кнопок). */
@media (max-width:640px){
  .thm,.snd{
    top:12px;bottom:auto;left:auto;
    width:44px;height:44px;min-height:44px;padding:0;justify-content:center;gap:0;
  }
  .thm{right:12px}
  .snd{right:64px}
  .thm__t,.snd__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .thm__i,.snd__i{font-size:18px}
}

/* ── «День/ночь» — тихая кнопка в шапке (23.09.2026) ──
   Была крупной сапфировой и парила внизу экрана, а вещь второстепенная.
   Теперь стоит справа в шапке, где раньше была плашка «строим с нуля»:
   маленькая, без парения и перелива, заметна только при наведении.
   Эти правила идут последними и перебивают общий сапфировый блок. */
.top .thm{
  position:static;inset:auto;width:auto;height:auto;min-height:30px;
  padding:0 11px;gap:6px;border-radius:7px;
  background:transparent;border:1px solid color-mix(in oklab,var(--ink) 18%,transparent);
  color:var(--ink-dim);box-shadow:none;text-shadow:none;animation:none;translate:none;
  backdrop-filter:none;font:600 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;
}
.top .thm:hover{color:var(--ink);border-color:color-mix(in oklab,var(--sapph-3,#5FA8FF) 60%,transparent);
  background:color-mix(in oklab,var(--ink) 6%,transparent);filter:none;box-shadow:none}
.top .thm:active{translate:none}
.top .thm .thm__i{font-size:13px}
@media (max-width:640px){
  .top .thm{position:static;width:auto;height:auto;min-height:32px;padding:0 10px}
  .top .thm .thm__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .snd{right:12px}                 /* справа вверху остаётся только музыка */
}

/* ── Гармония кнопок (23.09.2026, проверка по просьбе Айрата) ──
   1) Иерархия. Сапфир и парение — только у ДЕЙСТВИЙ: телефон, почта,
      «Спросить ИИ». Музыка и тема управляют «средой» страницы, поэтому
      обе тихие и одного вида: прозрачные, тонкая рамка, моноширинный
      шрифт. Раньше музыка оставалась сапфировой и спорила с чатом
      за внимание в нижних углах.
   2) Музыка остаётся закреплённой: ею переключают бригаду на первом
      этаже, кнопка нужна под рукой при прокрутке. Подложка с размытием —
      чтобы читалась поверх любой секции.
   3) Пара «телефон / почта» — одной ширины и парит в одной фазе:
      при разных фазах кнопки расходились по высоте на 3 px и ряд
      выглядел кривым.
   4) Все парящие кнопки дышат синхронно — меньше суеты на экране. */
.snd{
  min-height:34px;padding:0 12px;gap:7px;border-radius:7px;
  background:color-mix(in oklab,var(--bg) 72%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid color-mix(in oklab,var(--ink) 18%,transparent);
  color:var(--ink-dim);box-shadow:none;text-shadow:none;animation:none;translate:none;
  font:600 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;
}
.snd:hover{color:var(--ink);filter:none;box-shadow:none;
  border-color:color-mix(in oklab,var(--sapph-3,#5FA8FF) 60%,transparent);
  background:color-mix(in oklab,var(--bg) 60%,var(--ink) 6%)}
.snd:active{translate:none}
.snd .snd__i{font-size:13px}
.snd--on{color:var(--acc);border-color:color-mix(in oklab,var(--acc) 55%,transparent)}

.row .btn{min-width:212px}
.btn,.btn:nth-of-type(2n),.chat__fab{animation-delay:0s,-2.7s}
.btn:nth-of-type(2n){animation-delay:0s,-1.2s}   /* блик бежит вразнобой, подъём — вместе */

@media (max-width:640px){
  /* значок музыки — на одной вертикали с «день/ночь» в шапке */
  .snd{top:12px;right:24px;width:40px;height:40px;min-height:40px;padding:0}
  .top .thm{min-height:32px;min-width:40px;justify-content:center}
  .row .btn{min-width:0;width:100%;max-width:300px}
}

/* ── Телефон: гармония первого экрана (23.09.2026, снимок Айрата) ──
   1) Музыка и тема — одна группа в шапке, одного размера. Раньше музыка
      висела закреплённой в углу, а тема стояла в шапке прямо под ней:
      две разные кнопки налезали друг на друга.
   2) Стрела крана поднята над шапкой (crane3d.js, pivotY), для неё
      у героя отступ сверху. Текст больше не пересекается со стрелой.
   3) За текстом героя мягкая подложка цвета фона: трос с крюком и
      каркас здания проходят позади и не спорят с буквами.
   4) «Спросить ИИ» стоит в той же колонке, что телефон и почта:
      одинаковые левый и правый края у всех трёх кнопок. */
.top__ctl{display:flex;align-items:center;gap:8px}
@media (max-width:640px){
  .hero{padding-top:118px}
  .top .snd{
    position:static;inset:auto;width:40px;height:34px;min-height:34px;padding:0;
    justify-content:center;gap:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  /* подсказку «ниже — как мы работаем» на телефоне закрывает кнопка чата */
  .scrollhint{display:none}
  .top .thm{width:40px;min-width:40px;height:34px;min-height:34px;padding:0;justify-content:center}
  .top .snd .snd__i,.top .thm .thm__i{font-size:15px}
  .core{position:relative;isolation:isolate}
  .core::before{
    content:"";position:absolute;inset:-4px -8px;z-index:-1;border-radius:28px;pointer-events:none;
    background:color-mix(in oklab,var(--bg) 70%,transparent);
    box-shadow:0 0 34px 26px color-mix(in oklab,var(--bg) 70%,transparent);
  }
  .chat{left:calc(var(--pad) + var(--crane));right:var(--pad)}
}

/* ═════════════ СтройТраст: чёрно-белая тема (23.09.2026) ═════════════
   Основа — сайт tatmonolit.ru, кран и бригада те же. Айрат: «как у
   татмонолита, но чёрно-белые тона, скорее белое на чёрном». Старый сайт
   СтройТраста тоже был чёрно-белым, и знак в свидетельстве 767420 —
   чёрный и оттенки серого. Все цвета сцены и кнопок сведены к серой
   шкале здесь же: crane3d.js читает их из переменных при загрузке. */
:root, :root[data-theme="day"]{
  --bg:#08090A;
  --ink:#F2F2F2;
  --acc:#FFFFFF;                       /* стрела, разметка */
  --acc-2:#8E8E8E;                     /* башня и каркас */
  --acc-3:#D6D6D6;                     /* крюк, кабина, бригада */
  --scene-boost:1;
  --scene-light:0;
  --scene-cloth:#050505;
  --scene-shield:#262626;
  --arc:#FFFFFF;
  --arc-halo:#BDBDBD;
  --ink-mix:58%;
  --line-mix:14%;
  --btn-ink:#0A0A0A;
  --shine:#fff;
  --glow:rgba(255,255,255,.07);
  --glow-size:560px;
  --grain:.05;
  --cloth-op:.72;
  --panel-bg:linear-gradient(180deg,rgba(6,6,7,.9),rgba(6,6,7,.76));
  --panel-brd:rgba(255,255,255,.2);
  --panel-sh:0 0 40px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.12);
  --title-col:#FFFFFF;
  --title-sh:0 0 22px rgba(255,255,255,.14);
  --step-col:#FFFFFF;
  --li-brd:rgba(255,255,255,.13);
  --li-brd-h:rgba(255,255,255,.42);
  --li-bg:rgba(255,255,255,.035);
}
.ftitle .num{color:#8A8A8A}
.lines li:hover{background:rgba(255,255,255,.07)}
.edge--l,.edge--r{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.7) 50%,rgba(255,255,255,.08));
  box-shadow:0 0 14px rgba(255,255,255,.25)}
.h1{background:linear-gradient(var(--ang),#FFFFFF,#9A9A9A 55%,#FFFFFF);background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{color:#BDBDBD}

/* Логотип: знак из свидетельства, перекрашенный под тёмный фон,
   и слово тем же засечным рисунком, что в знаке. */
.logo{gap:12px;color:var(--ink)}
.logo__img{display:block;width:40px;height:auto}
.logo__text{font:700 24px/1 "PT Serif",Georgia,serif;letter-spacing:.01em}

/* Кнопки: вместо сапфира — сталь, как серые плоскости в знаке.
   Главная светлая, второстепенная графитовая. */
.btn,.snd{
  --sapph-1:#8F8F8F; --sapph-2:#D2D2D2; --sapph-3:#FFFFFF;
  --sapph-edge:#4A4A4A; --sapph-ink:#0A0A0A;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.btn:hover{color:#000}
.btn--ghost{
  --sapph-3:#5C5C5C; --sapph-2:#2A2A2A; --sapph-1:#141414;
  --sapph-edge:#000; --sapph-ink:#F2F2F2;
  color:#F2F2F2;text-shadow:0 1px 1px rgba(0,0,0,.5);
  background:
    linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 45%,transparent 60%) 0 0/250% 100% no-repeat,
    linear-gradient(160deg,var(--sapph-3) 0%,var(--sapph-2) 40%,var(--sapph-1) 100%);
}
.btn--ghost:hover{color:#fff}
.snd{color:var(--ink-dim)}
.snd--on{color:#fff;border-color:rgba(255,255,255,.5)}
.row .btn{min-width:0}

/* ── форма заявки ── */
.req{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:grid;gap:6px;font-size:14px;color:var(--ink-dim)}
.fld i{font-style:normal;opacity:.7;font-size:12px;margin-left:4px}
.fld--wide{grid-column:1/-1}
.fld input,.fld textarea{
  font:500 16px/1.4 Manrope,system-ui,sans-serif;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);border-radius:8px;
  padding:12px 14px;min-height:var(--tap);width:100%;resize:vertical;
  transition:border-color .2s,background .2s}
.fld input:focus,.fld textarea:focus{outline:none;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.07)}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.28)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-dim)}
.agree input{width:18px;height:18px;margin-top:2px;accent-color:#fff;flex:none}
.agree a,.reqs a,.bottom a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.req__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.req__msg{font-size:14px;color:var(--ink-dim)}
.req__msg.ok{color:#fff}
.req__msg.bad{color:#FFB4A8}
.reqs dd{word-break:break-word}
@media (max-width:640px){
  .req{grid-template-columns:1fr}
  .top .snd{position:static;inset:auto;width:40px;height:34px;min-height:34px;padding:0;justify-content:center;gap:0}
  .top .snd .snd__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .logo__text{font-size:21px}
  .logo__img{width:34px}
}
/* Бригада стоит на земле в самом низу страницы. Подвал поднят над ней,
   иначе фигурки ложатся поверх ссылок. */
.bottom{padding-bottom:128px}
/* Телефон: шапка стоит на фиксированной высоте. Стрела крана ставится
   над шапкой по её положению при загрузке; при центровке героя шапка
   уезжала, когда догружались шрифты, и стрела ложилась на логотип. */
@media (max-width:640px){ .hero{justify-content:flex-start} }

/* ── Ювелирный знак в первом экране (Blender) ── */
@font-face{font-family:"StroySerif";src:url("../fonts/stroy-serif.woff2") format("woff2");font-weight:700;font-display:swap}
.logo__text{font-family:"StroySerif","Liberation Serif","Times New Roman",serif;font-weight:700;
  background:linear-gradient(180deg,#FFFFFF 0%,#D9D9DD 42%,#8C8C92 58%,#F2F2F5 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(255,255,255,.18))}
.logo__img{width:48px;filter:drop-shadow(0 0 8px rgba(255,255,255,.22))}

.herobox{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px}
.jewel{position:relative;margin:0;width:clamp(260px,26vw,380px);aspect-ratio:480/610;justify-self:end}
.jewel__img{position:relative;z-index:1;display:block;width:100%;height:auto;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.28)) drop-shadow(0 18px 30px rgba(0,0,0,.8))}
.jewel__halo{position:absolute;inset:-18% -22%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.2),rgba(255,255,255,.07) 45%,transparent 72%);
  animation:halo 5.5s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.75;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
/* искры — четырёхлучевые звёзды на гранях, вспыхивают по очереди */
.spark{position:absolute;z-index:2;width:34px;height:34px;pointer-events:none;opacity:0;
  background:
    radial-gradient(circle,#fff 0 2px,rgba(255,255,255,.7) 3px,transparent 7px),
    linear-gradient(90deg,transparent 0 46%,rgba(255,255,255,.95) 50%,transparent 54% 100%),
    linear-gradient(0deg,transparent 0 46%,rgba(255,255,255,.95) 50%,transparent 54% 100%);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);
  animation:spark 4.2s ease-in-out infinite;mix-blend-mode:screen}
.s1{left:60%;top:6%;animation-delay:.2s}
.s2{left:24%;top:44%;animation-delay:1.3s;transform:scale(.7)}
.s3{left:70%;top:40%;animation-delay:2.4s;transform:scale(.8)}
.s4{left:14%;top:76%;animation-delay:3.3s;transform:scale(.6)}
@keyframes spark{0%,70%,100%{opacity:0;rotate:0deg}78%{opacity:1;rotate:45deg}88%{opacity:0;rotate:90deg}}
@media (prefers-reduced-motion:reduce){.spark,.jewel__halo{animation:none}}
@media (max-width:1099px){
  .herobox{grid-template-columns:1fr}
  .jewel{justify-self:center;width:min(62vw,300px);order:2;margin-top:8px}
}

/* Телефон: музыка закреплена в правом нижнем углу экрана (Айрат, 23.09.2026:
   «кнопка отключения музыки нужна на нижнем этаже»). В шапке она уезжала
   вместе с первым экраном, а бригада пляшет внизу — выключать нечем.
   Правый нижний угол свободен: чата на этом сайте нет, бригада стоит слева. */
@media (max-width:640px){
  .top .snd{
    position:fixed;inset:auto;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:60;
    width:46px;height:46px;min-height:46px;padding:0;justify-content:center;gap:0;border-radius:50%;
    background:rgba(12,12,13,.82);border:1px solid rgba(255,255,255,.28);
    box-shadow:0 6px 18px rgba(0,0,0,.6);
  }
  .top .snd .snd__i{font-size:19px}
}

/* ── Логотип в шапке — единственное место знака (Айрат, 23.09.2026:
   «достаточно, чтобы лого оставался на своём месте и сверкал; в двух
   местах слишком вычурно»). Большой знак в первом экране убран. ── */
.herobox,.jewel{display:contents}
.logo{gap:14px;align-items:center}
.logo__gem{position:relative;display:block;width:58px;height:58px;flex:none}
.logo__img{position:relative;z-index:1;display:block;width:100%;height:100%;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.35)) drop-shadow(0 4px 8px rgba(0,0,0,.8))}
.logo__halo{position:absolute;inset:-45%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.22),rgba(255,255,255,.07) 45%,transparent 72%);
  animation:halo 5.5s ease-in-out infinite}
.logo .spark{width:22px;height:22px}
.logo .s1{left:44%;top:-8%;animation-delay:.3s}
.logo .s2{left:-6%;top:52%;animation-delay:1.7s;transform:scale(.7)}
.logo .s3{left:70%;top:58%;animation-delay:3.1s;transform:scale(.8)}
/* по слову раз в несколько секунд пробегает блик, как по полированному металлу */
.logo__text{font-size:26px;
  background:linear-gradient(100deg,#8C8C92 0%,#E9E9EE 30%,#FFFFFF 44%,#E9E9EE 52%,#9A9AA0 70%,#F2F2F5 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%,55%{background-position:100% 0}100%{background-position:-60% 0}}
@media (max-width:640px){
  .logo__gem{width:46px;height:46px}
  .logo__text{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.logo__text,.logo__halo{animation:none}}

/* ── Логотип на 50 % крупнее и с надписью, как в свидетельстве
   (Айрат, 23.09.2026). Слово, черта и «Общество с ограниченной
   ответственностью» в две строки — по центру под словом. ── */
.logo{gap:18px}
.logo__gem{width:87px;height:87px}
.logo .spark{width:30px;height:30px}
.logo__words{display:flex;flex-direction:column;align-items:center;gap:5px;line-height:1}
.logo__text{font-size:39px;line-height:1}
.logo__bar{align-self:stretch;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#5A5A60,#F4F4F7 40%,#9A9AA0 70%,#E6E6EA);
  box-shadow:0 0 6px rgba(255,255,255,.25)}
.logo__sub{font:700 11.5px/1.18 "StroySerif","Liberation Serif","Times New Roman",serif;
  text-align:center;color:#CFCFD4;letter-spacing:.01em}
@media (max-width:640px){
  .logo{gap:12px}
  .logo__gem{width:69px;height:69px}
  .logo__text{font-size:31px}
  .logo__sub{font-size:9.5px}
  .logo .spark{width:24px;height:24px}
}
/* Шапка на фиксированной высоте и на компьютере: стрела крана ставится над
   ней по её положению (crane3d.js, pivotY), место под оголовок — сверху. */
@media (min-width:641px){ .hero{justify-content:flex-start;padding-top:clamp(170px,22vh,210px)} }
.lead a.tel,.reqs a{white-space:nowrap}
.lead a.tel{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4)}