/* =========================================================
   СЕРВИС+ — модульные быстровозводимые здания
   Тёмная тема, крупная типографика, скролл-анимации
   ========================================================= */

:root{
  /* ---------- тёмная тема (по умолчанию) ---------- */
  --bg:        #0B0E13;
  --bg-2:      #0F141B;
  --surface:   #141A23;
  --surface-2: #1A222D;
  --line:      rgba(var(--tint-rgb),.09);
  --line-2:    rgba(var(--tint-rgb),.16);

  --text:      #EDF1F6;
  --text-rgb:  237,241,246;
  --muted:     #8794A6;
  --muted-2:   #5F6C7D;
  --accent-ink:#FF8A2B;   /* акцент для текста: на светлом фоне он темнее */

  /* подмешиваемый оттенок: светлый на тёмном фоне и наоборот */
  --tint-rgb:  255,255,255;
  /* заглушки вместо фотографий */
  --ph-a:      #1B2530;
  --ph-b:      #10161E;
  --ph-text:   rgba(var(--tint-rgb),.08);
  /* полупрозрачные подложки интерфейса */
  --veil:      rgba(11,14,19,.72);
  --veil-solid:rgba(11,14,19,.97);
  --shadow:    rgba(0,0,0,.9);

  --accent:      #FF8A2B;   /* тёплый свет окон / факел с главного фото */
  --accent-soft: #FF9E4F;
  --accent-rgb:  255, 138, 43;
  --brand-green: #17614E;   /* фирменный зелёный логотипа */
  --cold:        #4A9BE0;

  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;

  --pad: clamp(20px, 4vw, 64px);
  --sec-pad: clamp(80px, 11vh, 160px);

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

/* =========================================================
   СВЕТЛАЯ ТЕМА
   Переопределяем только цвета — вся геометрия общая.
   ========================================================= */
:root[data-theme="light"]{
  --bg:        #F2F5F8;
  --bg-2:      #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F5F8FA;
  --line:      rgba(13,20,28,.11);
  --line-2:    rgba(13,20,28,.20);

  --text:      #0E141B;
  --text-rgb:  14,20,27;
  --muted:     #56636F;
  --muted-2:   #6B7683;

  /* акцент притемнён: чистый оранжевый на белом даёт слабый контраст */
  --accent:      #D96A10;
  --accent-soft: #C25C08;
  --accent-rgb:  217,106,16;
  --accent-ink:  #A85107;

  --tint-rgb:  13,20,28;
  --ph-a:      #E4EAF0;
  --ph-b:      #D3DCE5;
  --ph-text:   rgba(13,20,28,.13);
  /* подложки шапки и мобильного меню — светлые, а не инвертированные */
  --veil:      rgba(255,255,255,.82);
  --veil-solid:rgba(255,255,255,.97);
  --shadow:    rgba(13,20,28,.22);
  /* на белом фоне бледный текст теряется — бегущую строку делаем плотнее */
  --marquee-ink: .55;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; line-height:1.05; letter-spacing:-.03em; font-weight:800; }
p{ margin:0 0 1em; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,textarea{ font:inherit; }

.container{ width:100%; max-width:1520px; margin-inline:auto; padding-inline:var(--pad); }
.muted{ color:var(--muted); }

::selection{ background:var(--accent); color:#14100B; }

/* ---------- Кнопки ---------- */
.btn{
  --h:54px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--h); padding:0 28px; border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  transition:transform .35s var(--ease-out), background-color .3s, color .3s, border-color .3s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--sm{ --h:42px; padding:0 20px; font-size:14px; }
.btn--lg{ --h:62px; padding:0 36px; font-size:16px; }

.btn--accent{ background:var(--accent); color:#14100B; }
.btn--accent:hover{ background:var(--accent-soft); }

.btn--ghost{ border:1px solid var(--line-2); color:var(--text); }
.btn--ghost:hover{ border-color:var(--text); background:rgba(var(--tint-rgb),.05); }

/* =========================================================
   ШАПКА
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:18px var(--pad) 0;
  transition:padding .4s var(--ease);
}
.header__inner{
  display:flex; align-items:center; gap:24px;
  max-width:1520px; margin-inline:auto;
  padding:12px 12px 12px 26px;
  border-radius:999px;
  border:1px solid transparent;
  transition:background-color .45s var(--ease), border-color .45s var(--ease), backdrop-filter .45s, box-shadow .45s;
}
.header.is-stuck{ padding-top:10px; }
.header.is-stuck .header__inner{
  background:var(--veil);
  border-color:var(--line);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 18px 50px -30px rgba(0,0,0,.9);
}

.brand{ flex:none; display:block; }
.brand__logo{ height:26px; width:auto; }

/* логотип в двух вариантах: белая надпись для тёмной темы, тёмная — для светлой */
.logo--light{ display:none; }
:root[data-theme="light"] .logo--dark{ display:none; }
:root[data-theme="light"] .logo--light{ display:block; }

/* ---------- переключатель темы ---------- */
.theme-toggle{
  flex:none; width:42px; height:42px; border-radius:999px;
  border:1px solid var(--line-2);
  display:grid; place-items:center;
  transition:background-color .3s, border-color .3s, color .3s;
}
.theme-toggle:hover{ background:rgba(var(--tint-rgb),.06); border-color:var(--text); }
.theme-toggle svg{
  grid-area:1 / 1; width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round;
  transition:opacity .35s var(--ease), transform .45s var(--ease-out);
}
/* в тёмной теме предлагаем включить светлую — показываем солнце */
.theme-toggle__moon{ opacity:0; transform:rotate(-45deg) scale(.6); }
:root[data-theme="light"] .theme-toggle__sun{ opacity:0; transform:rotate(45deg) scale(.6); }
:root[data-theme="light"] .theme-toggle__moon{ opacity:1; transform:none; }

.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav__link{
  position:relative; padding:10px 13px; border-radius:999px;
  font-size:13.5px; font-weight:500; color:rgba(var(--text-rgb),.72);
  white-space:nowrap;
  transition:color .3s, background-color .3s;
}
.nav__link:hover{ color:var(--text); background:rgba(var(--tint-rgb),.06); }
.nav__link.is-active{ color:var(--bg); background:var(--text); font-weight:600; }

.header__side{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.nav + .header__side{ margin-left:0; }

.phone{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14.5px; font-weight:600; letter-spacing:-.01em;
  transition:color .3s;
}
.phone:hover{ color:var(--accent); }
.phone svg{ width:17px; height:17px; fill:currentColor; opacity:.8; }

.burger{ display:none; width:42px; height:42px; border-radius:999px; border:1px solid var(--line-2); position:relative; }
.burger span{
  position:absolute; left:12px; right:12px; height:1.5px; background:var(--text); border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s;
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ bottom:17px; }
.burger.is-open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* =========================================================
   1. ГЛАВНЫЙ ЭКРАН
   ========================================================= */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(24px,4vh,48px);
  overflow:hidden;
}

/* фолбэк-фон, пока не подставлено hero.jpg */
.hero__media{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(70% 55% at 50% 78%, rgba(var(--accent-rgb),.12), transparent 60%),
    linear-gradient(180deg, #16233A 0%, #0D1420 55%, #0B0E13 100%);
}
/* слой двигает параллакс (inline-стиль), появление анимируется на самом фото —
   иначе CSS-анимация перебивала бы transform от скрипта */
.hero__layer{
  position:absolute; inset:0; height:118%;
  --hero-scale:1.06;                 /* читается скриптом при расчёте пламени */
  transform:translate3d(0,0,0) scale(var(--hero-scale));
}
.hero__bg{
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
  animation:heroIn 1.8s var(--ease-out) both;
}
@keyframes heroIn{ from{ transform:scale(1.08); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* ---------- живой факел на трубе ---------- */
.flare{
  position:absolute; left:0; top:0;      /* точные координаты ставит скрипт */
  width:var(--fs,26px); height:calc(var(--fs,26px) * 2.6);
  transform:translate(-50%,-100%);
  pointer-events:none; opacity:0;
  transition:opacity .8s var(--ease) 1.2s;
  mix-blend-mode:screen;
}
.flare.is-lit{ opacity:1; }

/* тёплый ореол вокруг пламени */
.flare__glow{
  position:absolute; left:50%; bottom:-18%;
  width:420%; height:210%;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 62%,
    rgba(255,170,80,.55), rgba(255,110,30,.22) 42%, transparent 72%);
  filter:blur(6px);
  animation:flareGlow 2.6s ease-in-out infinite;
}
@keyframes flareGlow{
  0%,100%{ opacity:.75; transform:translateX(-50%) scale(1) }
  38%    { opacity:1;   transform:translateX(-50%) scale(1.14) }
  64%    { opacity:.85; transform:translateX(-50%) scale(1.04) }
}

/* языки пламени — сдвинуты по фазе, поэтому огонь «дышит» неровно */
.flare__tongue{
  position:absolute; left:50%; bottom:0;
  width:100%; height:100%;
  transform:translateX(-50%);
  border-radius:50% 50% 44% 44% / 68% 68% 32% 32%;
  background:linear-gradient(to top,
    rgba(255,236,196,.95) 0%,
    rgba(255,176,74,.92) 26%,
    rgba(255,122,28,.75) 58%,
    rgba(255,80,16,0) 100%);
  filter:blur(2px);
  transform-origin:50% 100%;
  animation:flicker 1.5s ease-in-out infinite;
}
.flare__tongue:nth-child(3){
  width:66%; height:78%; filter:blur(1.2px);
  animation-duration:1.15s; animation-delay:-.45s;
  background:linear-gradient(to top,
    rgba(255,248,226,.98) 0%, rgba(255,206,124,.9) 40%, rgba(255,150,50,0) 100%);
}
.flare__tongue:nth-child(4){
  width:38%; height:52%; filter:blur(.8px);
  animation-duration:.85s; animation-delay:-.2s;
  background:linear-gradient(to top,
    rgba(255,255,244,1) 0%, rgba(255,232,180,.92) 50%, rgba(255,190,110,0) 100%);
}
@keyframes flicker{
  0%,100%{ transform:translateX(-50%) scaleY(1)    skewX(-4deg) }
  22%    { transform:translateX(-46%) scaleY(1.16) skewX(3deg)  }
  46%    { transform:translateX(-53%) scaleY(.92)  skewX(-7deg) }
  68%    { transform:translateX(-48%) scaleY(1.09) skewX(2deg)  }
  84%    { transform:translateX(-51%) scaleY(.97)  skewX(-3deg) }
}

/* искры уносит вверх и в сторону */
.flare__spark{
  position:absolute; left:50%; bottom:22%;
  width:calc(var(--fs,26px) * .09); height:calc(var(--fs,26px) * .09);
  border-radius:50%; background:rgba(255,214,150,.95);
  animation:spark 2.8s linear infinite;
  opacity:0;
}
.flare__spark:nth-child(5){ animation-delay:0s;    --sx:  .9 }
.flare__spark:nth-child(6){ animation-delay:.7s;   --sx: 1.6 }
.flare__spark:nth-child(7){ animation-delay:1.4s;  --sx:  .4 }
.flare__spark:nth-child(8){ animation-delay:2.1s;  --sx: 1.2 }
@keyframes spark{
  0%  { opacity:0; transform:translate(-50%,0) scale(1) }
  12% { opacity:.9 }
  100%{ opacity:0; transform:translate(calc(-50% + var(--sx,1) * var(--fs,26px)), calc(var(--fs,26px) * -2.6)) scale(.3) }
}

@media (prefers-reduced-motion:reduce){
  .flare__glow,.flare__tongue,.flare__spark{ animation:none; }
  .flare__spark{ display:none; }
}

.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,14,19,.86) 0%, rgba(11,14,19,.34) 26%, rgba(11,14,19,0) 46%),
    linear-gradient(0deg,  rgba(11,14,19,.95) 0%, rgba(11,14,19,.30) 30%, rgba(11,14,19,0) 60%);
}

.hero__content{
  position:relative; z-index:2;
  margin-top:auto;
  padding-top:150px;
}

.hero__taglines{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-bottom:clamp(16px,4vh,44px);
}
/* мягкое стекло: сильное размытие вместо плотной заливки,
   светлый градиент сверху даёт объём, край растворяется */
.tagline{
  position:relative; width:fit-content; max-width:32ch;
  margin:0; padding:13px 22px 13px 36px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.11);
  background:
    linear-gradient(165deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 55%),
    rgba(10,14,20,.16);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 14px 40px -26px rgba(0,0,0,.85);
  font-size:13.5px; line-height:1.5; font-weight:500; letter-spacing:-.005em;
  color:rgba(240,244,249,.94);
  text-shadow:0 1px 16px rgba(6,9,14,.65);
}
.tagline::before{
  content:''; position:absolute; left:18px; top:20px;
  width:5px; height:5px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 14px 1px rgba(var(--accent-rgb),.7);
  opacity:.9;
}
.hero__taglines .tagline:nth-child(2){ justify-self:center; }
.hero__taglines .tagline:nth-child(3){
  justify-self:end; text-align:right;
  padding:13px 36px 13px 22px;
}
.hero__taglines .tagline:nth-child(3)::before{ left:auto; right:18px; }

.hero__title{
  display:flex; justify-content:space-between;
  padding-inline:var(--pad);
  font-size:clamp(72px, 20.5vw, 340px);
  font-weight:900; letter-spacing:-.055em; line-height:.82;
  margin:0;
  color:#fff;
}
.ht{
  display:block;
  transform:translateY(110%);
  animation:htUp 1.05s var(--ease-out) forwards;
  animation-delay:calc(.25s + var(--i) * .055s);
}
.ht--accent{ color:var(--accent); }
@keyframes htUp{ to{ transform:translateY(0) } }

/* передний план: посёлок перекрывает низ букв */
.hero__fg{
  position:absolute; inset:0; z-index:3;
  width:100%; height:118%; object-fit:cover; object-position:center 40%;
  transform:scale(1.06);
  -webkit-mask-image:linear-gradient(180deg, transparent 0 62%, #000 68%);
          mask-image:linear-gradient(180deg, transparent 0 62%, #000 68%);
  pointer-events:none;
}

.hero__bottom{
  position:relative; z-index:4;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-top:clamp(28px,7vh,72px);
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:10px 20px; border-radius:999px;
  border:1px solid rgba(255,255,255,.11);
  background:
    linear-gradient(165deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 55%),
    rgba(10,14,20,.16);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 14px 40px -26px rgba(0,0,0,.85);
  font-size:13.5px; font-weight:500; color:rgba(240,244,249,.94);
  text-shadow:0 1px 16px rgba(6,9,14,.65);
  cursor:pointer;
  display:inline-flex; align-items:center; gap:0;
}
.chip:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.24);
  color:#fff;
}
/* стрелка выезжает только при наведении, чтобы плашки не пестрили */
.chip i{
  font-style:normal; font-size:12px; color:var(--accent);
  max-width:0; opacity:0; overflow:hidden;
  transform:translateX(-4px);
  transition:max-width .38s var(--ease-out), opacity .3s var(--ease),
             margin-left .38s var(--ease-out), transform .38s var(--ease-out);
}
.chip:hover i,
.chip:focus-visible i{ max-width:20px; opacity:1; margin-left:8px; transform:none; }
.chip:focus-visible{
  outline:none; border-color:rgba(var(--accent-rgb),.6);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22);
}

.scroll-hint{
  display:inline-flex; align-items:center; gap:10px; flex:none;
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  transition:color .3s;
}
.scroll-hint:hover{ color:var(--text); }
.scroll-hint svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; animation:bob 2.2s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(5px) } }

/* =========================================================
   ОБЩИЕ СЕКЦИИ
   ========================================================= */
.section{ padding-block:var(--sec-pad); position:relative; }
/* чтобы фиксированная шапка не накрывала заголовок при переходе по якорю */
section[id], footer[id]{ scroll-margin-top:96px; }

.sec-head{ margin-bottom:clamp(40px,6vw,76px); }
.sec-head--row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.sec-tag{
  display:inline-block; margin-bottom:20px;
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink);
}
.sec-title{ font-size:clamp(34px, 5.4vw, 88px); }
.sec-sub{ max-width:46ch; color:var(--muted); font-size:clamp(15px,1.1vw,17px); margin:0; }
.sec-sub--wide{ max-width:62ch; margin-top:26px; }

/* =========================================================
   2. О НАС
   ========================================================= */
.about{ background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }

.about__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(32px,5vw,90px); align-items:start;
  padding-bottom:clamp(48px,7vw,96px);
}
.about__lead p{ font-size:clamp(17px,1.35vw,21px); line-height:1.55; letter-spacing:-.015em; }
.about__lead p.muted{ font-size:clamp(15px,1.05vw,17px); line-height:1.7; }
.about__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }

.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.stat{ background:var(--bg-2); padding:clamp(22px,2.6vw,38px); }
.stat__num{
  display:block; font-size:clamp(40px,4.4vw,68px); font-weight:800; letter-spacing:-.045em; line-height:1;
  color:var(--text);
}
.stat__label{ display:block; margin-top:10px; font-size:14px; color:var(--muted); }

.offers{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.4vw,22px); }
.offer{
  position:relative; overflow:hidden;
  padding:clamp(26px,2.8vw,42px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface);
  transition:border-color .45s var(--ease), background-color .45s var(--ease), transform .5s var(--ease-out);
}
.offer::after{
  content:''; position:absolute; inset:auto auto 0 0; height:2px; width:0; background:var(--accent);
  transition:width .6s var(--ease-out);
}
.offer:hover{ transform:translateY(-4px); border-color:var(--line-2); background:var(--surface-2); }
.offer:hover::after{ width:100%; }
.offer--wide{ grid-column:1 / -1; }
.offer--wide .offer__list{ columns:3; column-gap:44px; }

.offer__top{ display:flex; align-items:baseline; gap:16px; margin-bottom:18px; }
.offer__idx{ font-size:13px; font-weight:700; color:var(--accent-ink); letter-spacing:.08em; }
.offer__title{ font-size:clamp(24px,2.2vw,34px); }
.offer__text{ color:var(--muted); max-width:52ch; }
.offer__list{ list-style:none; padding:0; margin:22px 0 26px; }
.offer__list li{
  position:relative; padding-left:22px; margin-bottom:9px; font-size:14.5px; color:rgba(var(--text-rgb),.86);
  break-inside:avoid;
}
.offer__list li::before{
  content:''; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%;
  background:var(--accent); opacity:.85;
}
.offer__link{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; color:var(--text); }
.offer__link span{ transition:transform .35s var(--ease-out); display:inline-block; }
.offer__link:hover{ color:var(--accent); }
.offer__link:hover span{ transform:translateX(5px); }

/* =========================================================
   3. КАТАЛОГ ВАГОН-ДОМОВ
   ========================================================= */
.catalog{ background:var(--bg-2); }

/* ---------- комплектации ---------- */
.packs{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface);
  margin-bottom:clamp(56px,7vw,96px);
}
.packs__tabs{ display:flex; border-bottom:1px solid var(--line); }
.pack-tab{
  flex:1; padding:20px 24px;
  font-size:14.5px; font-weight:600; letter-spacing:-.01em; color:var(--muted);
  border-right:1px solid var(--line);
  transition:color .3s, background-color .35s var(--ease);
  position:relative;
}
.pack-tab:last-child{ border-right:0; }
.pack-tab::after{
  content:''; position:absolute; inset:auto 0 0 0; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:50%;
  transition:transform .45s var(--ease-out);
}
.pack-tab:hover{ color:var(--text); background:rgba(var(--tint-rgb),.03); }
.pack-tab.is-active{ color:var(--text); background:rgba(var(--tint-rgb),.04); }
.pack-tab.is-active::after{ transform:scaleX(1); }

.pack{ display:none; padding:clamp(26px,3vw,44px); }
.pack.is-active{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px,3vw,52px); }
.pack__lead h3{ font-size:clamp(22px,2vw,30px); margin-bottom:14px; }
.pack__lead p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--muted); max-width:38ch; }

.pack__list{ list-style:none; margin:0; padding:0; columns:2; column-gap:36px; }
.pack__list li{
  position:relative; padding-left:24px; margin-bottom:11px;
  font-size:14.5px; line-height:1.5; color:rgba(var(--text-rgb),.88);
  break-inside:avoid;
}
.pack__list li::before{
  content:''; position:absolute; left:0; top:8px;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px rgba(var(--accent-rgb),.6);
}

/* ---------- каталог позиций ---------- */
.cat-head{ margin-bottom:clamp(20px,2.4vw,30px); }
.cat-title{ font-size:clamp(22px,2.4vw,36px); margin-bottom:10px; }
.cat-sub{ margin:0; font-size:15px; color:var(--muted); max-width:56ch; }

.filters--cat{ margin-bottom:clamp(18px,2vw,28px); }

.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.2vw,18px); }

.unit{
  position:relative;
  padding:clamp(20px,1.9vw,26px) clamp(20px,1.9vw,26px) clamp(20px,1.9vw,26px) clamp(34px,3vw,42px);
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface);
  transition:transform .5s var(--ease-out), border-color .45s var(--ease), background-color .45s var(--ease);
}
/* точка-маркер вместо иконки: единый мотив с остальными разделами */
.unit::before{
  content:''; position:absolute; left:clamp(18px,1.6vw,22px); top:clamp(28px,2.5vw,34px);
  width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),.65);
  transition:transform .4s var(--ease-out);
}
.unit:hover{ transform:translateY(-4px); border-color:var(--line-2); background:var(--surface-2); }
.unit:hover::before{ transform:scale(1.35); }
.unit.is-hidden{ display:none; }

.unit{ text-align:left; cursor:pointer; width:100%; display:block; }
.unit h4{ font-size:16px; line-height:1.35; margin-bottom:8px; letter-spacing:-.02em; }
.unit p{ margin:0 0 14px; font-size:13px; color:var(--muted); }

.unit__more{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; color:var(--muted-2);
  transition:color .3s;
}
.unit__more i{ font-style:normal; color:var(--accent-ink); transition:transform .35s var(--ease-out); display:inline-block; }
.unit:hover .unit__more{ color:var(--text); }
.unit:hover .unit__more i{ transform:translateX(4px); }
.unit:focus-visible{ outline:none; border-color:rgba(var(--accent-rgb),.6); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2); }

/* ---------- окно технического описания ---------- */
.spec__panel{ max-width:640px; }

.spec__key{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:hidden; margin-bottom:26px;
}
.spec__key div{ background:var(--bg-2); padding:16px 18px; }
.spec__key span{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-bottom:6px; }
.spec__key b{ font-size:14.5px; font-weight:700; letter-spacing:-.02em; }

.spec__section{ margin-bottom:24px; }
.spec__section h3{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:14px; }

.spec__list{ list-style:none; margin:0; padding:0; }
.spec__list li{
  position:relative; padding:0 0 0 22px; margin-bottom:10px;
  font-size:14px; line-height:1.5; color:rgba(var(--text-rgb),.88);
}
.spec__list li::before{
  content:''; position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.85;
}

.spec__common{
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:rgba(var(--tint-rgb),.02); padding:16px 18px; margin-bottom:20px;
}
.spec__common summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:14px; font-weight:600; color:var(--text);
}
.spec__common summary::-webkit-details-marker{ display:none; }
.spec__common summary span{ font-size:12.5px; font-weight:500; color:var(--accent-ink); }
.spec__common[open] summary{ margin-bottom:16px; }
.spec__common[open] summary span::after{ content:''; }
.spec__common[open] summary span{ font-size:0; }
.spec__common[open] summary span::before{ content:'скрыть'; font-size:12.5px; }

.spec__note{ margin:0 0 24px; font-size:12.5px; line-height:1.5; color:var(--muted-2); }

.spec__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.spec__actions .btn{ flex:1; min-width:150px; }

@media (max-width:640px){
  .spec__key{ grid-template-columns:1fr; }
}

.cat-note{ margin-top:clamp(28px,3vw,44px); font-size:15px; color:var(--muted); max-width:80ch; }
.cat-note a{ color:var(--text); font-weight:600; border-bottom:1px solid var(--accent); padding-bottom:2px; transition:color .3s; }
.cat-note a:hover{ color:var(--accent); }

/* =========================================================
   4. ПРОЕКТЫ
   ========================================================= */
.projects{ background:var(--bg); }

.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(24px,3vw,40px); }
.filter{
  padding:10px 20px; border-radius:999px; border:1px solid var(--line);
  font-size:14px; font-weight:500; color:var(--muted);
  transition:color .3s, background-color .3s, border-color .3s, transform .3s var(--ease-out);
}
.filter:hover{ color:var(--text); border-color:var(--line-2); transform:translateY(-2px); }
.filter.is-active{ background:var(--text); color:var(--bg); border-color:var(--text); font-weight:600; }

.proj-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(14px,1.4vw,22px);
}
.proj{
  grid-column:span 2;
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface);
  transition:transform .55s var(--ease-out), border-color .45s, opacity .45s;
}
.proj--lg{ grid-column:span 3; }
.proj:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.proj.is-hidden{ display:none; }

.proj__media{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(74,155,224,.16), transparent 60%),
    linear-gradient(160deg, var(--ph-a) 0%, var(--ph-b) 100%);
  display:grid; place-items:center;
}
.proj--lg .proj__media{ aspect-ratio:16/10; }
.proj__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); transition:transform 1s var(--ease-out), filter .6s;
}
.proj:hover .proj__media img{ transform:scale(1.09); }
.proj__ph{
  font-size:clamp(48px,6vw,96px); font-weight:900; letter-spacing:-.05em;
  color:rgba(var(--tint-rgb),.07); user-select:none;
}

.proj__body{ padding:clamp(20px,2vw,30px); }
.proj__cat{
  display:inline-block; margin-bottom:12px; padding:5px 12px; border-radius:999px;
  border:1px solid var(--line-2); font-size:12px; color:var(--muted); letter-spacing:.02em;
}
.proj__title{ font-size:clamp(19px,1.5vw,26px); margin-bottom:8px; }
.proj__meta{ margin:0; font-size:13.5px; color:var(--muted-2); }

.proj__hover{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px clamp(20px,2vw,30px);
  background:linear-gradient(0deg, rgba(11,14,19,.96), rgba(11,14,19,0));
  font-size:14px; font-weight:600;
  transform:translateY(102%); opacity:0;
  transition:transform .5s var(--ease-out), opacity .4s;
}
.proj:hover .proj__hover{ transform:translateY(0); opacity:1; }
.proj__hover i{ font-style:normal; color:var(--accent); }

/* =========================================================
   4. ДОСТАВКА
   ========================================================= */
.delivery{ background:var(--bg-2); }

.marquee{
  position:relative; overflow:hidden;
  margin-bottom:clamp(40px,5vw,72px);
  padding-block:22px;
  border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:22px; width:max-content;
  animation:scrollX 42s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{
  font-size:clamp(20px,2.4vw,38px); font-weight:800; letter-spacing:-.035em;
  color:rgba(var(--text-rgb),var(--marquee-ink,.45)); white-space:nowrap;
  transition:color .3s;
}
.marquee__track span:hover{ color:var(--text); }
.marquee__track i{ font-style:normal; color:var(--accent-ink); font-size:18px; }
@keyframes scrollX{ to{ transform:translateX(-50%) } }

/* ---------- география объектов ---------- */
.geo{ margin-bottom:clamp(48px,6vw,88px); }
.geo__head{ margin-bottom:clamp(24px,3vw,40px); }
.geo__title{ font-size:clamp(22px,2.4vw,36px); margin-bottom:12px; }
.geo__sub{ margin:0; max-width:58ch; font-size:15px; color:var(--muted); }

.geo__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.4vw,22px); }

.geo__col{
  padding:clamp(22px,2.4vw,34px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface);
  transition:border-color .45s var(--ease), background-color .45s var(--ease);
}
.geo__col:hover{ border-color:var(--line-2); background:var(--surface-2); }

.geo__col-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-bottom:16px; margin-bottom:6px; border-bottom:1px solid var(--line);
}
.geo__col-head h4{ font-size:clamp(18px,1.5vw,23px); }
.geo__count{ flex:none; font-size:12.5px; color:var(--muted-2); }

.geo__list{ list-style:none; margin:0; padding:0; }
.geo__list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:13px 0; border-bottom:1px solid rgba(var(--tint-rgb),.05);
}
.geo__list li:last-child{ border-bottom:0; }
.geo__list b{
  position:relative; padding-left:18px;
  font-size:15.5px; font-weight:600; letter-spacing:-.015em;
}
.geo__list b::before{
  content:''; position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px rgba(var(--accent-rgb),.75);
}
.geo__list span{ flex:none; font-size:12.5px; color:var(--muted-2); }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.step{
  background:var(--bg); padding:clamp(26px,2.6vw,40px);
  transition:background-color .45s var(--ease);
}
.step:hover{ background:var(--surface); }
.step__idx{
  display:block; font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--accent-ink); margin-bottom:clamp(28px,4vw,64px);
}
.step__title{ font-size:clamp(19px,1.5vw,25px); margin-bottom:12px; }
.step p{ margin:0; font-size:14.5px; color:var(--muted); }

.delivery__note{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); margin-top:clamp(24px,3vw,40px); }
.dn__item{
  padding:24px 28px; border:1px solid var(--line); border-radius:var(--r);
  background:rgba(var(--tint-rgb),.02);
}
.dn__item b{ display:block; font-size:19px; letter-spacing:-.02em; margin-bottom:6px; }
.dn__item span{ font-size:14px; color:var(--muted); }

/* =========================================================
   5. МОНТАЖ
   ========================================================= */
.assembly{ background:var(--bg); }

.asm{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(24px,3vw,48px); align-items:stretch;
  margin-bottom:clamp(56px,7vw,104px);
}

.asm__showcase{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid var(--line); min-height:clamp(320px,46vw,620px);
  background:
    radial-gradient(110% 80% at 25% 20%, rgba(74,155,224,.14), transparent 62%),
    linear-gradient(160deg, var(--ph-a) 0%, var(--ph-b) 100%);
  display:grid; place-items:center;
}
.asm__showcase img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); transition:transform 1.2s var(--ease-out);
}
.asm__showcase:hover img{ transform:scale(1.06); }
.asm__ph{ font-size:clamp(28px,3.4vw,58px); font-weight:900; letter-spacing:-.05em; color:rgba(var(--tint-rgb),.07); user-select:none; }

.asm__badges{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:flex; gap:10px; flex-wrap:wrap;
  padding:clamp(20px,2.4vw,32px);
  background:linear-gradient(0deg, rgba(11,14,19,.92) 12%, rgba(11,14,19,0));
}
.asm__badge{
  display:flex; flex-direction:column; gap:2px;
  padding:12px 18px; border-radius:var(--r);
  border:1px solid rgba(255,255,255,.16); background:rgba(11,14,19,.5);
  backdrop-filter:blur(10px);
  font-size:12.5px; color:var(--muted); max-width:230px;
}
.asm__badge b{ font-size:16px; letter-spacing:-.02em; color:var(--text); }

.asm__steps{
  list-style:none; margin:0; padding:0;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column;
}
.asm__step{
  display:flex; gap:clamp(16px,1.6vw,26px); align-items:flex-start;
  padding:clamp(18px,1.9vw,26px) clamp(20px,2.2vw,32px);
  border-bottom:1px solid var(--line);
  transition:background-color .4s var(--ease), padding-left .4s var(--ease);
  flex:1;
}
.asm__step:last-child{ border-bottom:0; }
.asm__step:hover{ background:var(--surface); padding-left:calc(clamp(20px,2.2vw,32px) + 6px); }
.asm__idx{ flex:none; font-size:12.5px; font-weight:700; letter-spacing:.1em; color:var(--accent-ink); padding-top:4px; }
.asm__step h3{ font-size:clamp(17px,1.35vw,21px); margin-bottom:6px; }
.asm__step p{ margin:0; font-size:14px; color:var(--muted); }

/* --- лента фотографий с площадок --- */
.gal-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.gal-title{ font-size:clamp(22px,2.4vw,36px); }
.gal-nav{ display:flex; gap:8px; }
.gal-btn{
  width:48px; height:48px; border-radius:999px; border:1px solid var(--line-2);
  display:grid; place-items:center;
  transition:background-color .3s, border-color .3s, transform .3s var(--ease-out);
}
.gal-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.gal-btn:hover{ background:var(--text); color:var(--bg); border-color:var(--text); transform:translateY(-2px); }

.gal{
  display:flex; gap:clamp(12px,1.3vw,20px);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:14px; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.gal::-webkit-scrollbar{ height:6px; }
.gal::-webkit-scrollbar-track{ background:var(--line); border-radius:99px; }
.gal::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }
.gal::-webkit-scrollbar-thumb:hover{ background:var(--muted-2); }

.gal__item{
  position:relative; flex:0 0 clamp(240px,26vw,400px); margin:0;
  scroll-snap-align:start;
}
.gal__item::before{
  content:''; display:block; aspect-ratio:4/3;
  border-radius:var(--r); border:1px solid var(--line);
  background:linear-gradient(150deg, var(--ph-a) 0%, var(--ph-b) 100%);
}
.gal__item img{
  position:absolute; top:0; left:0; width:100%; aspect-ratio:4/3; height:auto;
  object-fit:cover; border-radius:var(--r); border:1px solid var(--line);
  transition:transform .8s var(--ease-out), border-color .4s;
}
.gal__item:hover img{ transform:scale(1.03); border-color:var(--line-2); }
.gal__ph{
  position:absolute; top:0; left:0; width:100%; aspect-ratio:4/3;
  display:grid; place-items:center;
  font-size:clamp(34px,4vw,64px); font-weight:900; letter-spacing:-.05em;
  color:rgba(var(--tint-rgb),.06); user-select:none; pointer-events:none;
}
.gal__item figcaption{ padding-top:14px; font-size:14px; color:var(--muted); }

/* =========================================================
   6. НАГРАДЫ И СЕРТИФИКАТЫ
   ========================================================= */
.awards{ background:var(--bg); }

/* документов всего два — показываем их крупно, в две колонки */
.cert-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,40px); }
.cert{ margin:0; display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(18px,2vw,30px); align-items:start; }
.cert__frame{
  position:relative; aspect-ratio:3/4; overflow:hidden; width:100%;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(165deg, var(--ph-a) 0%, var(--ph-b) 100%);
  display:grid; place-items:center; cursor:zoom-in;
  transition:border-color .45s, transform .55s var(--ease-out), box-shadow .55s;
}
/* подсказка, что документ открывается крупно */
.cert__zoom{
  position:absolute; left:50%; bottom:14px; z-index:3;
  transform:translate(-50%,10px); opacity:0;
  padding:7px 16px; border-radius:999px;
  background:rgba(11,14,19,.72); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.16);
  font-size:12px; font-weight:600; color:#fff; white-space:nowrap;
  transition:opacity .35s var(--ease), transform .35s var(--ease-out);
}
.cert__frame:hover .cert__zoom,
.cert__frame:focus-visible .cert__zoom{ opacity:1; transform:translate(-50%,0); }
.cert__frame:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22); }
.cert:hover .cert__frame{
  transform:translateY(-6px) rotate(-.6deg);
  border-color:var(--accent);
  box-shadow:0 30px 60px -40px rgba(var(--accent-rgb),.75);
}
/* документ показываем от шапки — там логотип и заголовок */
.cert__frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.cert__ph{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgba(var(--tint-rgb),.2); }
.cert figcaption{ padding-top:0; }
.cert figcaption h3{ font-size:18px; margin-bottom:10px; letter-spacing:-.02em; }
.cert figcaption p{ margin:0 0 16px; font-size:13.5px; line-height:1.55; color:var(--muted); }

/* что именно подтверждает документ */
.cert__meta{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.cert__meta li{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid rgba(var(--tint-rgb),.05);
}
.cert__meta li:last-child{ border-bottom:0; }
.cert__meta span{ flex:none; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); }
.cert__meta b{ font-size:12.5px; font-weight:600; text-align:right; color:rgba(var(--text-rgb),.88); }

.awards__foot{ margin-top:clamp(34px,4vw,56px); font-size:16px; color:var(--muted); }
.awards__foot a{ color:var(--text); font-weight:600; border-bottom:1px solid var(--accent); padding-bottom:2px; transition:color .3s; }
.awards__foot a:hover{ color:var(--accent); }

/* =========================================================
   7. ОТЗЫВЫ И БЛАГОДАРНОСТИ
   ========================================================= */
.reviews{ background:var(--bg-2); }

.rev-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(14px,1.6vw,24px); }
.rev{ margin:0; }

.rev__frame{
  position:relative; aspect-ratio:3/4; overflow:hidden; width:100%;
  border:1px solid var(--line); border-radius:var(--r);
  background:
    linear-gradient(150deg, rgba(var(--tint-rgb),.04) 0%, transparent 46%),
    linear-gradient(165deg, var(--ph-a) 0%, var(--ph-b) 100%);
  display:grid; place-items:center; padding:22px; cursor:zoom-in;
  transition:border-color .45s, transform .55s var(--ease-out), box-shadow .55s;
}
.rev__frame:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22); }
.rev:hover .rev__frame{
  transform:translateY(-6px);
  border-color:rgba(var(--accent-rgb),.42);
  box-shadow:0 30px 60px -40px rgba(var(--accent-rgb),.6);
}
.rev__frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }

/* заглушка в виде листа с «строчками» — видно, что здесь будет письмо */
.rev__ph{
  position:relative; z-index:1;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(var(--tint-rgb),.22); text-align:center; line-height:1.6;
}
.rev__ph::before,
.rev__ph::after{
  content:''; display:block; height:1px; margin:14px auto;
  background:linear-gradient(90deg, transparent, rgba(var(--tint-rgb),.14), transparent);
}
.rev__ph::before{ width:70%; }
.rev__ph::after{ width:46%; }

.rev figcaption{ padding-top:18px; }
.rev figcaption h3{ font-size:17px; margin-bottom:5px; letter-spacing:-.02em; }
.rev figcaption p{ margin:0; font-size:13.5px; color:var(--muted); }

/* =========================================================
   8. ПОДВАЛ
   ========================================================= */
.footer{
  background:var(--bg-2);
  border-top:1px solid var(--line);
  padding-top:var(--sec-pad);
}

.cta{
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap;
  padding:clamp(34px,4vw,64px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:
    radial-gradient(90% 140% at 85% 10%, rgba(var(--accent-rgb),.16), transparent 62%),
    linear-gradient(150deg, var(--surface) 0%, var(--bg-2) 100%);
  margin-bottom:clamp(56px,7vw,110px);
}
.cta__title{ font-size:clamp(28px,3.6vw,58px); margin-bottom:18px; }
.cta__text p{ margin:0; max-width:52ch; color:var(--muted); }
.cta__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.foot-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,64px);
  padding-bottom:clamp(48px,6vw,80px);
}
.foot__logo{ height:42px; width:auto; margin-bottom:10px; }
/* подпись из логотипа, набранная шрифтом — в векторе она нечитаемо мелкая */
.foot__slogan{
  margin:0 0 22px; padding-left:2px;
  font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--accent-ink);
}
.foot__desc{ font-size:14.5px; color:var(--muted); max-width:38ch; margin:0; }

.foot-col h4{ font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:20px; }
.foot-col a{ display:block; font-size:14.5px; color:rgba(var(--text-rgb),.8); padding:5px 0; transition:color .3s, transform .3s var(--ease-out); }
.foot-col a:hover{ color:var(--accent); transform:translateX(3px); }
.foot__phone{ font-size:20px !important; font-weight:700; letter-spacing:-.02em; color:var(--text) !important; margin-bottom:4px; }
.foot__addr,.foot__hours{ font-size:14px; color:var(--muted); margin:14px 0 0; }
.foot__addr b{
  display:block; margin-bottom:3px;
  font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2);
}

/* реквизиты — по ним компанию проверяют до первого звонка */
.foot-req{
  display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); flex-wrap:wrap;
  padding-block:22px; border-top:1px solid var(--line);
  font-size:13.5px;
}
.foot-req__name{ font-weight:600; color:rgba(var(--text-rgb),.9); letter-spacing:-.01em; }
.foot-req__item{ color:var(--muted); }
.foot-req__item i{
  font-style:normal; margin-right:7px;
  font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2);
}

.foot-bottom{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-block:26px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--muted-2);
}
.foot-bottom p{ margin:0; }

/* =========================================================
   МОДАЛЬНОЕ ОКНО ЗАЯВКИ
   ========================================================= */
.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(4,6,9,.78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .4s var(--ease);
}
.modal.is-open .modal__backdrop{ opacity:1; }

.modal__panel{
  position:relative; width:100%; max-width:560px;
  max-height:calc(100svh - 40px); overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(28px,3.4vw,44px);
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(var(--accent-rgb),.13), transparent 60%),
    linear-gradient(160deg, var(--surface) 0%, var(--bg) 100%);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.95);
  opacity:0; transform:translateY(22px) scale(.98);
  transition:opacity .45s var(--ease-out), transform .5s var(--ease-out);
}
.modal.is-open .modal__panel{ opacity:1; transform:none; }

.modal__close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:40px; height:40px; border-radius:999px; border:1px solid var(--line);
  display:grid; place-items:center;
  transition:background-color .3s, border-color .3s, transform .3s var(--ease-out);
}
.modal__close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.modal__close:hover{ background:rgba(var(--tint-rgb),.07); border-color:var(--line-2); transform:rotate(90deg); }

.modal__head{ margin-bottom:26px; padding-right:44px; }
.modal__title{ font-size:clamp(22px,2.4vw,32px); margin-bottom:12px; }
.modal__sub{ margin:0; font-size:14.5px; color:var(--muted); }

/* ---------- поля ---------- */
.field{ margin-bottom:16px; }
.field__label{ display:block; margin-bottom:8px; font-size:13.5px; font-weight:500; color:var(--muted); }
.field__label i{ font-style:normal; color:var(--accent-ink); }

.field__input{
  width:100%; height:52px; padding:0 16px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:rgba(var(--tint-rgb),.03); color:var(--text);
  font:inherit; font-size:15px;
  transition:border-color .3s, background-color .3s, box-shadow .3s;
}
.field__input--area{ height:auto; padding:14px 16px; resize:vertical; min-height:92px; line-height:1.5; }
.field__input::placeholder{ color:var(--muted-2); }
.field__input:hover{ border-color:var(--line-2); }
.field__input:focus{
  outline:none; border-color:var(--accent);
  background:rgba(var(--tint-rgb),.05);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14);
}
.field__input.is-invalid{ border-color:#E2564A; box-shadow:0 0 0 3px rgba(226,86,74,.13); }

.field__hint{ display:block; margin-top:7px; font-size:12.5px; color:var(--muted-2); }
.field__error{ display:none; margin-top:7px; font-size:12.5px; color:#F08379; }
.field__error.is-shown{ display:block; }

/* ---------- согласия ---------- */
.consent{
  margin:22px 0 24px; padding:18px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:rgba(var(--tint-rgb),.02);
}
.check{ display:flex; gap:12px; cursor:pointer; margin-bottom:14px; }
.check:last-of-type{ margin-bottom:0; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{
  flex:none; width:20px; height:20px; margin-top:1px;
  border:1px solid var(--line-2); border-radius:6px;
  position:relative; transition:background-color .25s, border-color .25s;
}
.check__box::after{
  content:''; position:absolute; left:6px; top:2px;
  width:5px; height:10px;
  border:solid #14100B; border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0); transition:transform .25s var(--ease-out);
}
.check input:checked + .check__box{ background:var(--accent); border-color:var(--accent); }
.check input:checked + .check__box::after{ transform:rotate(45deg) scale(1); }
.check input:focus-visible + .check__box{ box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25); }
.check__text{ font-size:13px; line-height:1.5; color:rgba(var(--text-rgb),.85); }
.check__text--muted{ color:var(--muted); }
.check__text b{ font-weight:500; color:var(--muted-2); }
.check__docs{ display:block; margin-top:5px; }
.check__docs a{ color:var(--accent-ink); border-bottom:1px solid rgba(var(--accent-rgb),.35); }
.check__docs a + a{ margin-left:12px; }

/* ---------- кнопка отправки ---------- */
.form__submit{ width:100%; position:relative; }
.form__submit:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.form__spinner{
  display:none; width:17px; height:17px; margin-left:10px;
  border:2px solid rgba(20,16,11,.3); border-top-color:#14100B; border-radius:50%;
  animation:spin .7s linear infinite;
}
.form.is-sending .form__spinner{ display:block; }
.form.is-sending .form__submit{ pointer-events:none; opacity:.8; }
@keyframes spin{ to{ transform:rotate(360deg) } }

.form__note{ margin:16px 0 0; text-align:center; font-size:13.5px; color:var(--muted); }
.form__note a{ color:var(--text); font-weight:600; border-bottom:1px solid var(--accent); }
.form__status{ margin:14px 0 0; font-size:13.5px; text-align:center; display:none; }
.form__status.is-error{ display:block; color:#F08379; }

/* ---------- экран «отправлено» ---------- */
.modal__done{ text-align:center; padding:14px 0 6px; }
.modal__done[hidden]{ display:none; }
.modal__check{
  width:64px; height:64px; margin:0 auto 22px;
  border-radius:999px; display:grid; place-items:center;
  background:rgba(var(--accent-rgb),.14); border:1px solid rgba(var(--accent-rgb),.4);
  animation:popIn .55s var(--ease-out) both;
}
.modal__check svg{ width:28px; height:28px; fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes popIn{ from{ transform:scale(.5); opacity:0 } to{ transform:scale(1); opacity:1 } }
.modal__done h3{ font-size:24px; margin-bottom:12px; }
.modal__done p{ font-size:14.5px; color:var(--muted); max-width:40ch; margin:0 auto 26px; }
.modal__done a{ color:var(--text); font-weight:600; white-space:nowrap; }

@media (max-width:640px){
  .modal{ padding:0; place-items:end stretch; }
  .modal__panel{
    max-width:none; max-height:94svh;
    border-radius:var(--r-lg) var(--r-lg) 0 0; border-bottom:0;
    transform:translateY(40px);
  }
}

/* =========================================================
   ПРОСМОТР ДОКУМЕНТА
   ========================================================= */
.lightbox{ position:fixed; inset:0; z-index:210; display:grid; place-items:center; padding:clamp(16px,4vw,56px); }
.lightbox[hidden]{ display:none; }

.lightbox__backdrop{
  position:absolute; inset:0;
  background:rgba(3,5,8,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transition:opacity .38s var(--ease);
  cursor:zoom-out;
}
.lightbox.is-open .lightbox__backdrop{ opacity:1; }

.lightbox__inner{
  position:relative; margin:0; max-width:min(900px, 100%); max-height:100%;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  opacity:0; transform:scale(.96); transition:opacity .4s var(--ease-out), transform .45s var(--ease-out);
}
.lightbox.is-open .lightbox__inner{ opacity:1; transform:none; }

.lightbox__inner img{
  max-width:100%; max-height:calc(100svh - 150px);
  width:auto; height:auto; object-fit:contain;
  border-radius:var(--r-sm); background:#fff;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9);
}
.lightbox__inner figcaption{ font-size:13.5px; color:var(--muted); text-align:center; max-width:60ch; }

.lightbox__close{
  position:absolute; top:clamp(12px,2vw,26px); right:clamp(12px,2vw,26px); z-index:2;
  width:46px; height:46px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
  display:grid; place-items:center; color:#fff;
  transition:background-color .3s, transform .3s var(--ease-out);
}
.lightbox__close svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.lightbox__close:hover{ background:rgba(255,255,255,.16); transform:rotate(90deg); }

/* =========================================================
   ПОДСВЕТКА ПЛАШЕК
   Пятно света идёт за курсором внутри карточки,
   рамка и внешнее свечение включаются на hover.
   Класс навешивается скриптом — разметку не трогаем.
   ========================================================= */
.glow{ position:relative; }

/* пятно света под контентом */
.glow::before{
  content:''; position:absolute; inset:0; z-index:0;
  border-radius:inherit; pointer-events:none;
  background:radial-gradient(
    340px circle at var(--mx,50%) var(--my,50%),
    rgba(var(--accent-rgb),.20), rgba(var(--accent-rgb),.07) 40%, transparent 68%
  );
  opacity:0; transition:opacity .45s var(--ease);
}
.glow:hover::before{ opacity:1; }

/* контент поверх свечения */
.glow > *{ position:relative; z-index:1; }

/* рамка и мягкий ореол вокруг плашки */
.glow{
  transition:border-color .45s var(--ease), box-shadow .55s var(--ease),
             background-color .45s var(--ease), transform .5s var(--ease-out);
}
.glow:hover{
  border-color:rgba(var(--accent-rgb),.42);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.12),
             0 26px 60px -34px rgba(var(--accent-rgb),.55);
}

/* у карточек с картинкой свечение должно лежать поверх фото */
.proj.glow::before,
.cert__frame.glow::before{ z-index:2; }

/* плашка «Проекты» уже имеет свой подъём — не задваиваем */
.proj.glow:hover{ transform:translateY(-6px); }
.cert.glow:hover,
.cert:hover .cert__frame.glow{ transform:translateY(-6px) rotate(-.6deg); }

/* мелкие чипы на главном экране */
.chip{ transition:background-color .3s, color .3s, border-color .3s, transform .3s var(--ease-out), box-shadow .4s var(--ease); }
.chip:hover{
  border-color:rgba(var(--accent-rgb),.55);
  box-shadow:0 0 22px -6px rgba(var(--accent-rgb),.6);
}
.chip.is-active:hover{ box-shadow:0 0 26px -8px rgba(255,255,255,.55); }

@media (prefers-reduced-motion:reduce){
  .glow::before{ display:none; }
}

/* =========================================================
   АНИМАЦИИ ПОЯВЛЕНИЯ
   ========================================================= */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease-out) var(--d,0s), transform .9s var(--ease-out) var(--d,0s);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }

/* hero-подписи стартуют сразу */
.hero .reveal{ transition-delay:calc(.5s + var(--d,0s)); }

/* =========================================================
   БАЗОВЫЕ ПРАВИЛА АДАПТИВНОСТИ
   ========================================================= */

/* Элемент grid по умолчанию не сжимается уже своего содержимого:
   длинное слово в заголовке распирает колонку и ломает сетку.
   min-width:0 разрешает колонке сжиматься, слово переносится. */
.proj, .model, .cert, .rev, .geo__col, .stat, .step,
.offer, .dn__item, .asm__step, .gal__item, .foot-col, .pack{ min-width:0; }

/* длинные слова и адреса переносим, а не выпускаем за экран */
.proj__title, .model__title, .cert figcaption h3, .rev figcaption h3,
.geo__list b, .sec-title, .cta__title, .modal__title{ overflow-wrap:break-word; }

/* =========================================================
   АДАПТИВ
   ========================================================= */
/* меню из девяти пунктов перестаёт помещаться раньше — уводим в бургер */
@media (max-width:1340px){
  .nav{ display:none; }
  .burger{ display:block; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .cert-grid{ grid-template-columns:1fr; }
  .rev-grid{ grid-template-columns:repeat(3,1fr); }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .unit{ padding-left:34px; }
  .geo__grid{ grid-template-columns:repeat(2,1fr); }
  .offer--wide .offer__list{ columns:2; }
}

@media (max-width:960px){
  .about__grid{ grid-template-columns:1fr; }
  .pack.is-active{ grid-template-columns:1fr; }
  .packs__tabs{ flex-wrap:wrap; }
  .pack-tab{ flex:1 1 auto; padding:16px 18px; font-size:13.5px; }
  .asm{ grid-template-columns:1fr; }
  .asm__showcase{ min-height:clamp(260px,58vw,420px); }
  .gal-nav{ display:none; }
  .gal__item{ flex-basis:min(78vw,340px); }
  .offers{ grid-template-columns:1fr; }
  .offer--wide .offer__list{ columns:1; }
  .proj-grid{ grid-template-columns:repeat(2,1fr); }
  .proj, .proj--lg{ grid-column:span 1; }
  .proj--lg .proj__media{ aspect-ratio:4/3; }
  .delivery__note{ grid-template-columns:1fr; }
  .hero__taglines{ grid-template-columns:1fr; gap:6px; }
  .hero__taglines .tagline:nth-child(2),
  .hero__taglines .tagline:nth-child(3){ justify-self:start; text-align:left; }
  .hero__taglines .tagline:nth-child(n+2){ display:none; }
  .hero__bottom{ flex-direction:column; align-items:flex-start; }
  .scroll-hint{ display:none; }
}

@media (max-width:640px){
  /* ---------- шапка: три элемента в 375 px ---------- */
  .header{ padding:12px 12px 0; }
  .header__inner{ gap:10px; padding:10px 10px 10px 14px; }
  .phone span{ display:none; }
  .phone{ width:44px; height:44px; border-radius:999px; border:1px solid var(--line-2); justify-content:center; }
  .btn--sm{ --h:44px; padding:0 16px; font-size:13.5px; }
  .burger{ width:44px; height:44px; }
  .brand{ padding:11px 0; }          /* область нажатия по высоте */
  .brand__logo{ height:22px; }

  /* ---------- крупные касания ---------- */
  .offer__link, .model__btn{ min-height:44px; align-items:center; }
  .foot-col a{ padding:11px 0; }
  /* ссылки внутри абзацев — отдельной строкой, чтобы в них можно было попасть пальцем */
  .cat-note a, .awards__foot a{ display:inline-block; margin-top:10px; padding:11px 0; }
  .filter, .chip{ min-height:44px; align-items:center; }
  .gal-btn{ width:44px; height:44px; }

  /* ---------- читаемость ---------- */
  .proj__cat, .rev__ph, .cert__ph{ font-size:13px; }
  .cert__meta span, .foot-req__item i, .sec-tag{ font-size:12px; }
  .model__specs span{ font-size:13px; }
  .model__specs b{ font-size:13.5px; }

  /* ---------- ритм: длинную страницу ужимаем ---------- */
  :root{ --sec-pad:64px; }
  .sec-head{ margin-bottom:32px; }

  /* ---------- каталог ---------- */
  .packs__tabs{ flex-direction:column; }
  .pack-tab{ border-right:0; border-bottom:1px solid var(--line); text-align:left; }
  .pack-tab:last-child{ border-bottom:0; }
  .pack-tab::after{ inset:0 auto 0 0; width:2px; height:auto; transform:scaleY(0); }
  .pack-tab.is-active::after{ transform:scaleY(1); }
  .stats{ grid-template-columns:1fr 1fr; }
  .cert{ grid-template-columns:1fr; }
  .rev-grid{ grid-template-columns:1fr 1fr; }
  .cat-grid{ grid-template-columns:1fr; }
  .pack__list{ columns:1; }
  .steps{ grid-template-columns:1fr; }
  .geo__grid{ grid-template-columns:1fr; }
  .proj-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero__title{ font-size:clamp(64px,23vw,120px); }
  .cta{ flex-direction:column; align-items:stretch; }
  .cta__actions .btn{ flex:1; }
}

/* =========================================================
   ОПТИМИЗАЦИЯ ДЛЯ ТЕЛЕФОНОВ
   Снимаем то, что дорого рисовать на слабом железе.
   ========================================================= */
@media (max-width:900px){
  /* второй экземпляр фото с маской удваивал отрисовку кадра
     ради эффекта «текст за посёлком» — на телефоне он почти не читается */
  .hero__fg{ display:none; }

  /* ---------- первый экран: фото целиком, текст под ним ----------
     Кадр горизонтальный 3:2, экран вертикальный. В полноэкранном
     режиме от посёлка оставалась узкая полоса по центру, поэтому
     показываем фото в его пропорциях, а заголовок уводим вниз. */
  .hero{
    min-height:auto;
    display:block;
    padding:calc(var(--pad) + 62px) 0 clamp(20px,4vh,36px);
  }
  .hero__media{ position:relative; height:auto; background:none; }
  .hero__layer{
    position:relative; inset:auto; height:auto;
    --hero-scale:1;
    transform:none;
    border-radius:0 0 var(--r-lg) var(--r-lg); overflow:hidden;
  }
  .hero__bg{
    height:auto; aspect-ratio:3/2;
    object-position:center 42%;
    animation:none;                 /* без наезда: слой больше не обрезает края */
  }
  /* затемнение больше не нужно — текст ушёл с фотографии */
  .hero__scrim{ display:none; }

  .hero__content{ margin-top:0; padding-top:clamp(20px,4vh,30px); }
  .hero__taglines{ margin-bottom:clamp(14px,3vh,24px); }
  /* заголовок съехал с фотографии на фон страницы — цвет берём из темы */
  .hero__title{ font-size:clamp(58px,20vw,110px); color:var(--text); }
  .hero__bottom{ margin-top:clamp(20px,4vh,32px); }

  /* плашки теперь лежат на фоне страницы, а не на фото */
  .tagline, .chip{
    background:var(--surface);
    border-color:var(--line);
    box-shadow:none;
    text-shadow:none;
    color:var(--text);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .chip.is-active{ background:var(--text); color:var(--bg); border-color:transparent; }

  /* размытие — самая дорогая операция композитора */
  .tagline, .chip{ backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%); }
  .header.is-stuck .header__inner{ backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
  .modal__backdrop{ backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }

  /* тяжёлые тени убираем — на маленьком экране их не видно */
  .cert:hover .cert__frame, .rev:hover .rev__frame{ box-shadow:none; }
  .modal__panel{ box-shadow:0 -20px 60px -40px rgba(0,0,0,.9); }

  /* поле ввода меньше 16px заставляет iOS зумить страницу при фокусе */
  .field__input{ font-size:16px; }
}

/* ---------- мобильное меню ---------- */
.mmenu{
  position:fixed; inset:0; z-index:99;
  background:var(--veil-solid); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 var(--pad);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.mmenu.is-open{ opacity:1; visibility:visible; }
.mmenu a{
  font-size:clamp(30px,8vw,52px); font-weight:800; letter-spacing:-.04em; padding:8px 0;
  opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out), color .3s;
}
.mmenu.is-open a{ opacity:1; transform:none; }
.mmenu a:nth-child(1){ transition-delay:.08s } .mmenu a:nth-child(2){ transition-delay:.13s }
.mmenu a:nth-child(3){ transition-delay:.18s } .mmenu a:nth-child(4){ transition-delay:.23s }
.mmenu a:nth-child(5){ transition-delay:.28s } .mmenu a:nth-child(6){ transition-delay:.33s }
.mmenu a:hover{ color:var(--accent); }
body.is-locked{ overflow:hidden; }

/* ---------- уважение к настройкам движения ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .ht{ transform:none; }
}