/* ============================================================
   АСЕНА ГРУПП — лендинг
   Один шрифт (Onest), плотный вертикальный ритм.
   ============================================================ */

:root{
  --ink:        #0A0B0E;
  --ink-2:      #101218;
  --ink-3:      #14161D;
  --paper:      #F2EFE9;
  --txt:        #EDEAE4;
  --txt-dim:    #90908B;
  --txt-dim-2:  #63625E;
  --gold:       #D2B375;
  --gold-dim:   #B49C60;
  --line:       rgba(255,255,255,.11);
  --line-soft:  rgba(255,255,255,.06);

  --f: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;

  --pad: clamp(18px, 4.5vw, 76px);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* живой фон: три ручки громкости */
  --bg-glow:   .34;  /* тёплые световые пятна */
  --bg-stone:  .07;  /* текстура оникса */
  --bg-grain:  .05;  /* зерно */
  --bg-cursor: .5;   /* подсветка за курсором, 0 отключает */
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

/* переход по якорю не должен прятать заголовок под фиксированной шапкой */
section[id], main[id]{ scroll-margin-top:86px; }

body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font-family:var(--f);
  font-size:clamp(15px,1vw,16.5px);
  line-height:1.6;
  font-weight:400;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* пока открыто модальное окно, страница под ним не прокручивается */
body.is-locked{ overflow:hidden; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.03em; }
p{ margin:0 0 .95em; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--gold); color:#0A0B0E; }

/* ---------- Атомы ---------- */

.tag{
  font-size:12px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.1em;
}

.accent{ color:var(--gold); }

.h2{
  font-size:clamp(25px,3.3vw,49px);
  line-height:1.05;
}

.sect{
  position:relative;
  padding:clamp(44px,5vw,76px) var(--pad);
  max-width:1520px;
  margin:0 auto;
}
.sect + .sect{ padding-top:clamp(30px,3.4vw,52px); }
.sect__head{ margin-bottom:clamp(24px,2.6vw,38px); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:500;
  padding:13px 24px;
  border:1px solid var(--line);
  border-radius:6px;
  background:none; cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn:hover{ border-color:var(--gold); color:var(--gold); }
.btn--solid{ background:var(--gold); border-color:var(--gold); color:#14110A; font-weight:600; }
.btn--solid:hover{ background:transparent; color:var(--gold); }

/* ---------- Живой фон ---------- */

.bg{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}
.bg span{ position:absolute; display:block; }

/* Тёплое свечение: медленно дышащие пятна в фирменных цветах */
.bg__glow{
  inset:-25%;
  opacity:var(--bg-glow);
  background:
    radial-gradient(36% 32% at 80% 8%,   rgba(210,179,117,.52), transparent 68%),
    radial-gradient(42% 36% at 8%  66%,  rgba(62,84,124,.40),  transparent 70%),
    radial-gradient(28% 26% at 58% 100%, rgba(210,179,117,.26), transparent 66%),
    radial-gradient(34% 30% at 100% 52%, rgba(62,84,124,.22),  transparent 70%);
  animation:bgDrift 78s var(--ease) infinite alternate;
  will-change:transform;
}
@keyframes bgDrift{
  0%   { transform:translate3d(0,0,0)      scale(1);    }
  35%  { transform:translate3d(-3%,2.5%,0) scale(1.09); }
  70%  { transform:translate3d(2.5%,-2%,0) scale(1.04); }
  100% { transform:translate3d(-1.5%,3%,0) scale(1.12); }
}

/* Оникс из материалов компании: даёт фону фактуру камня, а не заливку */
.bg__stone{
  inset:0;
  background:url("../img/texture-onyx.jpg") center/cover no-repeat;
  opacity:var(--bg-stone);
  mix-blend-mode:soft-light;
  animation:bgStone 120s linear infinite alternate;
  will-change:transform;
}
@keyframes bgStone{
  0%   { transform:scale(1.06) translate3d(0,0,0); }
  100% { transform:scale(1.16) translate3d(-2%,-1.5%,0); }
}

/* Зерно: убирает пластиковую плоскость и полосы на градиентах */
.bg__grain{
  inset:0;
  opacity:var(--bg-grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}

/* Подсветка за курсором: единственный слой, который реагирует на человека */
.bg__cursor{
  inset:0;
  opacity:0;
  background:radial-gradient(420px 420px at var(--mx,50%) var(--my,40%),
             rgba(210,179,117,.10), rgba(210,179,117,.035) 45%, transparent 70%);
  transition:opacity .6s var(--ease);
}
.bg.is-live .bg__cursor{ opacity:var(--bg-cursor); }

/* Виньетка: держит края тёмными, текст остаётся читаемым */
.bg__vignette{
  inset:0;
  background:radial-gradient(125% 85% at 50% 38%, transparent 38%, rgba(5,6,8,.62) 100%);
}

/* ---------- Фоновая сетка ---------- */

.blueprint{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  max-width:1520px; margin:0 auto;
  padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(5,1fr);
}
.blueprint span{ border-left:1px solid rgba(255,255,255,.045); }
.blueprint span:last-child{ border-right:1px solid rgba(255,255,255,.045); }

/* ---------- Шапка ---------- */

.hdr{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:clamp(12px,1.6vw,24px);
  padding:16px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease);
}
.hdr.is-stuck{
  background:rgba(10,11,14,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
  padding-top:11px; padding-bottom:11px;
}
.hdr__logo{
  position:relative; z-index:2;
  display:flex; align-items:center;
  padding:8px 0;                 /* область нажатия 44px */
}
.hdr__logo img{ height:26px; width:auto; }
.nav-tel{ display:none; }

.hdr__nav{ margin-left:auto; display:flex; gap:clamp(12px,1.5vw,26px); }
.hdr__nav a{
  font-size:14.5px; color:var(--txt-dim);
  position:relative; white-space:nowrap;
  transition:color .22s var(--ease);
}
.hdr__nav a::after{
  content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0;
  background:var(--gold); transition:width .28s var(--ease);
}
/* расширяем область нажатия, не меняя вёрстку */
.hdr__nav a::before{ content:""; position:absolute; inset:-11px -7px; }
.hdr__nav a:hover{ color:var(--txt); }
.hdr__nav a:hover::after{ width:100%; }

.hdr__tel{
  font-size:14.5px; font-weight:600;
  white-space:nowrap;
  transition:color .25s var(--ease);
}
.hdr__tel:hover{ color:var(--gold); }

/* Кнопка заявки: видна на любой высоте прокрутки, это главный путь к лиду */
.hdr__cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; white-space:nowrap;
  padding:10px 18px;
  background:var(--gold); color:#14110A;
  border:1px solid var(--gold); border-radius:6px;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.hdr__cta i{ font-style:normal; transition:transform .3s var(--ease); }
.hdr__cta:hover{ background:transparent; color:var(--gold); }
.hdr__cta:hover i{ transform:translateX(4px); }

.burger{
  display:none; width:44px; height:44px; padding:0;
  background:none; border:1px solid var(--line); border-radius:6px;
  cursor:pointer; position:relative;
}
.burger i{
  position:absolute; left:13px; width:18px; height:1px; background:var(--txt);
  transition:transform .28s var(--ease);
}
.burger i:nth-child(1){ top:19px; }
.burger i:nth-child(2){ top:24px; }
.hdr.is-open .burger i:nth-child(1){ transform:translateY(2.5px) rotate(45deg); }
.hdr.is-open .burger i:nth-child(2){ transform:translateY(-2.5px) rotate(-45deg); }

/* ============================================================
   ПЕРВЫЙ ЭКРАН
   Фотография объекта во весь экран, кадры сменяют друг друга.
   Текст лежит поверх, читаемость держит .hero__scrim.
   Длительность показа кадра задана дважды: в @keyframes heroBar
   и в переменной HOLD в main.js — менять надо оба места.
   ============================================================ */

.hero{
  position:relative; z-index:1;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(92px,12vh,150px) 0 clamp(18px,2.2vw,30px);
  overflow:hidden;
  isolation:isolate;
}

/* ---------- Сцена ---------- */

.hero__stage{ position:absolute; inset:0; z-index:0; background:#07080B; }
.hero__slide{
  position:absolute; inset:0; z-index:0;
  opacity:0; transition:opacity 1s var(--ease);
}
/* новый кадр проявляется поверх предыдущего: если гасить старый
   одновременно, на середине наплыва проступает тёмный фон */
.hero__slide.is-on{ opacity:1; z-index:1; }
.hero__slide.was-on{ opacity:1; transition:none; }
.hero__slide img{
  width:100%; height:100%; object-fit:cover;
  object-position:center var(--pos,50%);   /* --pos у слайда двигает кадр по вертикали */
  transform:scale(1.07);
  filter:contrast(1.05) saturate(.94);
}
/* медленный наезд, пока кадр на экране */
.hero__slide.is-on img{ animation:heroZoom 8s var(--ease) forwards; }
@keyframes heroZoom{ to{ transform:scale(1.17); } }

/* Затемнение: слева под текст, снизу под цифры, сверху под шапку */
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(6,7,10,.95) 0%, rgba(6,7,10,.78) 30%, rgba(6,7,10,.26) 58%, rgba(6,7,10,.5) 100%),
    linear-gradient(to top, rgba(6,7,10,.94) 0%, rgba(6,7,10,.34) 30%, transparent 56%),
    linear-gradient(to bottom, rgba(6,7,10,.72) 0%, transparent 22%);
}

/* ---------- Содержимое ---------- */

.hero__body{
  position:relative; z-index:2;
  flex:1;
  width:100%; max-width:1520px; margin:0 auto;
  padding:0 var(--pad);
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:clamp(24px,3.2vw,44px);
}
.hero__in{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(20px,3vw,56px);
}

.hero h1{
  font-size:clamp(35px,5.9vw,92px);
  line-height:.98;
  letter-spacing:-.045em;
  margin:0 0 .4em;
  text-shadow:0 2px 40px rgba(0,0,0,.45);
}
/* строки выезжают из-под маски */
.hero h1 .l{
  display:block; overflow:hidden;
  padding-bottom:.08em; margin-bottom:-.08em;
}
.hero h1 .l > b{
  display:block; font-weight:inherit;
  transform:translateY(112%);
  animation:heroLine 1.05s var(--ease) forwards;
  animation-delay:calc(.18s + var(--i) * .11s);
}
.hero h1 em{ font-style:normal; }
@keyframes heroLine{ to{ transform:none; } }

.hero__lead{
  max-width:46ch; color:#C9C6BF;
  font-size:clamp(15px,1.1vw,18px);
  text-shadow:0 1px 20px rgba(0,0,0,.5);
  margin-bottom:.7em;
}
.hero__geo{
  font-size:13px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); margin:0;
}
.hero__act{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.btn--ghost{
  background:rgba(10,11,14,.32);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}

/* всё, кроме заголовка, всплывает снизу */
.hero__up{
  opacity:0; transform:translateY(18px);
  animation:heroUp .9s var(--ease) forwards;
  animation-delay:var(--d,0s);
}
@keyframes heroUp{ to{ opacity:1; transform:none; } }
.hero .tag{ --d:.06s; }
.hero__lead{ --d:.66s; }
.hero__geo{ --d:.72s; }
.hero__act{ --d:.8s; }
.hero__ctrl{ --d:.9s; }
.hero__meta{ --d:1s; }

/* ---------- Подпись кадра и управление ---------- */

.hero__ctrl{
  display:flex; flex-direction:column; align-items:flex-end; gap:16px;
  text-align:right; padding-bottom:6px;
}
.hero__cap{
  display:flex; flex-direction:column; gap:3px;
  max-width:34ch;
  opacity:0; transform:translateY(7px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.hero__cap.is-in{ opacity:1; transform:none; }
.hero__cap b{ font-size:15px; font-weight:600; }
.hero__cap i{ font-style:normal; font-size:13px; color:var(--txt-dim); }

.hero__bars{ display:flex; gap:6px; }
.hero__bar{
  position:relative; width:34px; height:2px; padding:0;
  border:0; background:rgba(255,255,255,.24);
  cursor:pointer; overflow:hidden;
}
.hero__bar::before{ content:""; position:absolute; inset:-14px -3px; }  /* область нажатия */
.hero__bar i{ position:absolute; inset:0 auto 0 0; width:0; background:var(--gold); }
.hero__bar.is-on i{ animation:heroBar 3s linear forwards; }
@keyframes heroBar{ to{ width:100%; } }

/* ---------- Цифры ---------- */

.hero__meta{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap:clamp(22px,4vw,64px);
  border-top:1px solid var(--line);
  padding-top:18px;
}
.hero__meta > div{ display:flex; flex-direction:column; gap:1px; }
.hero__meta b{
  font-size:clamp(23px,2.2vw,32px); font-weight:600;
  letter-spacing:-.04em; line-height:1.1;
}
.hero__meta span{ font-size:13px; color:var(--txt-dim); }

/* ============================================================
   НАМ ДОВЕРЯЮТ
   Заказчики сразу под первым экраном. Логотипов нет,
   поэтому названия набраны крупно и разложены сеткой.
   ============================================================ */

.trust{ position:relative; z-index:1; }
.trust__head{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(16px,3vw,60px); align-items:baseline;
  margin-bottom:clamp(22px,2.4vw,34px);
}
.trust .tag{ margin:0; font-size:clamp(13px,1.4vw,19px); letter-spacing:.06em; }
.trust__lead{ margin:0; color:var(--txt-dim); max-width:62ch; }

/* Плитки заказчиков. Раньше это была таблица с рамками — на телефоне
   пустая ячейка в конце ряда читалась как оборванная решётка. */
.trust__list{
  display:grid;
  grid-template-columns:repeat(5,1fr);   /* 9 заказчиков ложатся как 5 + 4 */
  gap:clamp(8px,.9vw,14px);
}
.trust__i{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:11px; text-align:center;
  min-height:clamp(96px,8vw,122px);
  padding:18px 14px;
  background:var(--ink-2);
  border:1px solid var(--line-soft);
  border-radius:10px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.trust__i:hover{ border-color:rgba(210,179,117,.42); background:var(--ink-3); }
/* Логотипы разных брендов приведены к одному белому: на тёмном фоне
   зелёный Сбер рядом с синим ВТБ и красным МТС дают пестроту, а белый
   монохром совпадает с цветом названий в соседних плитках. */
.trust__i img{
  /* единый бокс: логотипы очень разной пропорции — от почти квадратного
     пегаса Внуково до вордмарка Абсолюта 10:1. object-fit вписывает
     каждый в одинаковую рамку, поэтому оптически они одного веса */
  max-height:clamp(34px,3.3vw,46px);   /* по высоте живут квадратные знаки */
  max-width:84%;                       /* по ширине — широкие вордмарки */
  width:auto; height:auto; object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.85;
  transition:opacity .3s var(--ease);
}
.trust__i:hover img{ opacity:1; }
.trust__i span{
  font-size:clamp(14.5px,1.15vw,18px);
  font-weight:500; letter-spacing:-.01em; line-height:1.25;
  color:var(--txt);
}

/* ============================================================
   О КОМПАНИИ
   ============================================================ */

.about{ position:relative; z-index:1; }
.about__body{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(26px,4vw,72px);
}
.about__txt{ display:flex; flex-direction:column; }
.about__txt p{ color:var(--txt-dim); max-width:54ch; }
.about__txt .lead{
  color:var(--txt); font-size:clamp(17px,1.35vw,22px);
  font-weight:400; line-height:1.45; margin-bottom:1.1em;
}

.about__txt .mission{
  color:var(--txt);
  margin:26px 0 0; padding-left:14px;
  border-left:2px solid var(--gold);
  max-width:50ch;
}
.about__txt .mission span{
  display:block; font-size:12px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold); margin-bottom:5px;
}

.about__pins{ display:flex; gap:34px; margin:auto 0 4px; padding-top:28px; flex-wrap:wrap; }
.about__pins li{
  border-left:2px solid var(--gold); padding-left:13px;
  display:flex; flex-direction:column;
}
.about__pins b{ font-size:20px; font-weight:600; letter-spacing:-.02em; }
.about__pins span{ font-size:13px; color:var(--txt-dim-2); }

.about__media{ position:relative; }
.about__media figure{ margin:0; }
.about__media img{ width:100%; aspect-ratio:3/3.55; object-fit:cover; border-radius:8px; }
.about__off{
  position:absolute; left:-26%; bottom:-8%;
  width:58%; border:8px solid var(--ink); border-radius:16px;
}
.about__off img{ aspect-ratio:4/3; }

/* ============================================================
   КАК МЫ РАБОТАЕМ
   ============================================================ */

.flow{ position:relative; z-index:1; }
.flow__lead{
  margin:clamp(16px,1.8vw,24px) 0 0;
  color:var(--txt-dim); max-width:70ch;
  font-size:clamp(15px,1.15vw,18px);
}
.flow__list{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);
}
.flow__i{
  padding:clamp(20px,2.2vw,30px) clamp(14px,1.6vw,26px) clamp(22px,2.4vw,34px) 0;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  position:relative;
}
.flow__i:last-child{ border-right:none; }
.flow__i:nth-child(n+2){ padding-left:clamp(14px,1.6vw,26px); }
.flow__i b{
  font-size:12px; font-weight:600; letter-spacing:.14em;
  color:var(--gold); margin-bottom:clamp(20px,2.4vw,38px);
}
.flow__i h3{ font-size:clamp(17px,1.45vw,22px); line-height:1.15; margin-bottom:9px; }
.flow__i p{ margin:0; font-size:14px; color:var(--txt-dim); line-height:1.5; }

/* ============================================================
   УСЛУГИ
   ============================================================ */

.services{ position:relative; z-index:1; }
.srv{ border-top:1px solid var(--line); }
.srv__i{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(14px,2.4vw,44px);
  align-items:baseline;
  padding:clamp(16px,1.8vw,26px) 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .4s var(--ease), border-color .3s var(--ease);
}
.srv__i h3{
  font-size:clamp(19px,1.85vw,28px); line-height:1.15;
  display:flex; align-items:baseline; gap:clamp(12px,1.4vw,22px);
}
.srv__i h3 b{
  font-size:12px; font-weight:600; letter-spacing:.12em;
  color:var(--gold); flex:0 0 auto;
}
.srv__i p{ margin:0; color:var(--txt-dim); font-size:14.5px; max-width:46ch; }

@media (hover:hover){
  .srv__i:hover{ padding-left:20px; border-bottom-color:var(--gold); }
  .srv__i:hover h3{ color:var(--gold); }
}

.srv__peek{
  position:fixed; z-index:40; top:40%; left:50%;
  width:260px; height:330px; pointer-events:none;
  border-radius:8px; overflow:hidden;
  opacity:0; transform:translate(-50%,-50%) scale(.92);
  transition:opacity .3s var(--ease), transform .4s var(--ease);
}
.srv__peek img{ width:100%; height:100%; object-fit:cover; }
.srv__peek.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ============================================================
   ПОЧЕМУ МЫ
   ============================================================ */

.why{ position:relative; z-index:1; }
.why__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.why__i{
  background:var(--ink);
  padding:clamp(20px,2.2vw,32px) clamp(16px,1.8vw,28px) clamp(24px,2.6vw,38px);
  display:flex; flex-direction:column; gap:10px;
}
.why__i b{
  font-size:clamp(19px,1.75vw,27px); font-weight:600;
  letter-spacing:-.035em; line-height:1.1;
}
.why__i span{ font-size:14px; color:var(--txt-dim); line-height:1.5; }

/* ============================================================
   ПРОЕКТЫ
   Карточка кликабельна целиком и открывает кейс.
   ============================================================ */

.projects{ position:relative; z-index:1; padding-right:0; max-width:none; }
.projects .sect__head{ max-width:1520px; margin-inline:auto; }
.projects__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding-right:var(--pad);
}
.projects__hint{ margin:0; font-size:13.5px; color:var(--txt-dim-2); }

.railx{
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; cursor:grab;
  padding-left:max(var(--pad), calc((100vw - 1520px)/2 + var(--pad)));
}
.railx::-webkit-scrollbar{ display:none; }
.railx.is-drag{ cursor:grabbing; }
.railx__track{ display:flex; gap:clamp(12px,1.3vw,20px); width:max-content; padding-right:var(--pad); }

.card{
  width:clamp(272px,29vw,438px); flex:0 0 auto;
  background:var(--ink-2);
  border:1px solid var(--line-soft);
  border-radius:10px; overflow:hidden;
  display:flex; flex-direction:column;
  cursor:pointer;
  transition:border-color .35s var(--ease), transform .45s var(--ease);
}
.card:hover,
.card:focus-visible{ border-color:rgba(210,179,117,.5); transform:translateY(-5px); }
.card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* фотография занимает большую часть карточки: объект продаёт кадр, а не текст */
.card__img{ overflow:hidden; aspect-ratio:4/4.1; position:relative; }
.card__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease);
}
.card:hover .card__img img{ transform:scale(1.05); }
.card__flag{
  position:absolute; left:14px; top:14px;
  font-size:11.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--txt); padding:7px 11px; border-radius:4px;
  background:rgba(8,9,12,.62);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.card__body{ padding:clamp(16px,1.5vw,24px); display:flex; flex-direction:column; flex:1; }
.card h3{ font-size:clamp(19px,1.6vw,26px); line-height:1.14; margin-bottom:11px; }
.card__sub{ margin:0 0 3px; font-size:14px; color:var(--txt-dim); }
.card__facts{ margin:0; font-size:14px; color:var(--txt-dim-2); }
.card__more{
  margin-top:auto; padding-top:18px;
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:500; color:var(--gold);
}
.card__more i{ font-style:normal; transition:transform .3s var(--ease); }
.card:hover .card__more i{ transform:translateX(5px); }

.railx__bar{ max-width:1520px; margin:22px auto 0; padding:0 var(--pad); }
.railx__bar i{ display:block; height:1px; background:var(--line); position:relative; }
.railx__bar i::after{
  content:""; position:absolute; left:0; top:-1px; height:3px;
  width:var(--w,12%); background:var(--gold);
  transform:translateX(var(--x,0));
  transition:width .2s linear;
}

/* ============================================================
   ДУБАЙ
   ============================================================ */

.dubai{
  position:relative; z-index:1;
  max-width:1520px; margin:clamp(30px,3.4vw,52px) auto 0;
  padding:0 var(--pad);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,3.4vw,60px); align-items:center;
}
.dubai__media{ overflow:hidden; border-radius:10px; }
.dubai__media img{ width:100%; aspect-ratio:4/3.5; object-fit:cover; }
.dubai .h2{ margin-bottom:clamp(16px,1.8vw,26px); }
.dubai__lead{
  font-size:clamp(16px,1.25vw,20px); color:var(--txt);
  line-height:1.5;
}
.dubai__txt p{ color:var(--txt-dim); max-width:52ch; }
.dubai__facts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px);
  margin:clamp(20px,2.2vw,30px) 0 0;
  padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line);
}
.dubai__facts > div:last-child{ grid-column:1 / -1; }
.dubai__facts dt{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-dim-2); margin-bottom:5px; }
.dubai__facts dd{ font-size:15.5px; color:var(--txt); }
.dubai__act{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(22px,2.4vw,32px); }

/* ============================================================
   СПЕЦИАЛИЗАЦИЯ
   ============================================================ */

.spec{ position:relative; z-index:1; }
.spec__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.3vw,20px);
}
.sp{
  position:relative; overflow:hidden;
  border-radius:10px;
  border:1px solid var(--line-soft);
  min-height:clamp(250px,26vw,340px);
  display:flex; align-items:flex-end;
  transition:border-color .35s var(--ease);
}
.sp:hover{ border-color:rgba(210,179,117,.45); }
.sp img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.sp:hover img{ transform:scale(1.05); }
.sp::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,7,10,.94) 6%, rgba(6,7,10,.6) 42%, rgba(6,7,10,.18) 100%);
}
.sp__txt{ position:relative; z-index:1; padding:clamp(18px,1.9vw,28px); }
.sp__txt h3{ font-size:clamp(19px,1.6vw,25px); line-height:1.15; margin-bottom:8px; }
.sp__txt p{ margin:0; font-size:14px; color:#BFBCB5; line-height:1.5; max-width:38ch; }

/* ============================================================
   ЖИЛОЕ НАПРАВЛЕНИЕ (ссылка на отдельную страницу)
   ============================================================ */

.resid{ position:relative; z-index:1; }
.resid__box{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(20px,3vw,48px); align-items:center;
  padding:clamp(22px,2.4vw,36px);
  background:var(--ink-2);
  border:1px solid var(--line-soft); border-radius:12px;
  transition:border-color .3s var(--ease);
}
.resid__box:hover{ border-color:rgba(210,179,117,.45); }
.resid__txt h3{ font-size:clamp(22px,2.2vw,34px); line-height:1.1; margin-bottom:.5em; }
.resid__txt p{ margin:0; color:var(--txt-dim); max-width:44ch; }
.resid__link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:20px; font-size:14px; font-weight:500; color:var(--gold);
}
.resid__link i{ font-style:normal; transition:transform .3s var(--ease); }
.resid__box:hover .resid__link i{ transform:translateX(5px); }
.resid__gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,.9vw,13px); }
.resid__gal img{ width:100%; aspect-ratio:3/3.5; object-fit:cover; border-radius:7px; }

/* Галерея на странице жилого направления */
.resid-gal{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(9px,1vw,14px);
}
.resid-gal img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; }
.resid-gal .w{ grid-column:1 / -1; aspect-ratio:16/7.4; }

/* ============================================================
   ПАРТНЁРЫ
   Блок намеренно компактный: главная продаёт компанию, не партнёров.
   ============================================================ */

.partners{ position:relative; z-index:1; }
.partners__lead{ color:var(--txt-dim); max-width:66ch; margin-bottom:clamp(20px,2.2vw,30px); }
.pt{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.1vw,16px);
}
.pt__i{
  display:flex; flex-direction:column; gap:5px;
  padding:clamp(16px,1.6vw,24px);
  background:var(--ink-2);
  border:1px solid var(--line-soft);
  border-radius:10px;
  transition:border-color .3s var(--ease);
}
a.pt__i:hover{ border-color:rgba(210,179,117,.5); }
.pt__i b{ font-size:clamp(16px,1.3vw,20px); font-weight:600; letter-spacing:-.02em; }
.pt__i span{ font-size:13px; color:var(--txt-dim-2); }
a.pt__i span{ color:var(--gold); }

/* ============================================================
   КОНТАКТЫ И ЗАЯВКА
   ============================================================ */

.contacts{ position:relative; z-index:1; }
.contacts__top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,72px);
  margin-bottom:clamp(38px,4vw,64px);
}
.cta{
  font-size:clamp(30px,4.4vw,68px);
  line-height:1.02;
  margin-bottom:clamp(18px,2vw,28px);
}
.contacts__lead{ color:var(--txt-dim); max-width:48ch; font-size:clamp(15px,1.15vw,18px); }
.contacts__note{
  margin:clamp(18px,2vw,26px) 0 0; padding-left:14px;
  border-left:2px solid var(--gold);
  color:var(--txt); max-width:44ch; font-size:14.5px;
}
.contacts__note span{
  display:block; font-size:12px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold); margin-bottom:5px;
}

/* ---------- Форма ---------- */

.lead{
  background:var(--ink-2);
  border:1px solid var(--line-soft);
  border-radius:12px;
  padding:clamp(20px,2.2vw,32px);
  display:flex; flex-direction:column; gap:clamp(12px,1.2vw,16px);
}
.lead__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.2vw,16px); }
.fld{ display:flex; flex-direction:column; gap:7px; }
.fld > span{
  font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--txt-dim-2);
}
.fld > span i{ font-style:normal; color:var(--gold); }
.fld input,
.fld textarea{
  font-family:inherit; font-size:15px; color:var(--txt);
  background:var(--ink); border:1px solid var(--line);
  border-radius:7px; padding:12px 14px;
  transition:border-color .25s var(--ease);
  resize:vertical; width:100%;
}
.fld input::placeholder,
.fld textarea::placeholder{ color:#55544F; }
.fld input:focus,
.fld textarea:focus{ outline:none; border-color:var(--gold); }
.fld.is-bad input,
.fld.is-bad textarea{ border-color:#B4564C; }
/* подпись об ошибке: перебиваем прописные буквы от .fld > span */
.fld > span.fld__err{
  font-size:12.5px; font-weight:400; letter-spacing:0;
  text-transform:none; color:#D08076;
}

.lead__send{ margin-top:4px; align-self:flex-start; padding:14px 30px; }
.lead__legal{ margin:0; font-size:12.5px; color:var(--txt-dim-2); line-height:1.45; }
.lead__done{
  margin:0; padding:12px 14px;
  border-radius:7px; font-size:14px;
  background:rgba(210,179,117,.1);
  border:1px solid rgba(210,179,117,.35);
  color:var(--txt);
}

.contacts__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.cnt{
  display:flex; flex-direction:column; gap:10px;
  padding:clamp(22px,2.4vw,34px) clamp(16px,1.8vw,30px);
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  transition:background .3s var(--ease);
}
/* у первой ячейки такой же боковой отступ, как у остальных:
   иначе телефон прижимается к вертикальной линии сетки */
.cnt:last-child{ border-right:none; }
.cnt__k{ font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--txt-dim-2); }
.cnt__v{ font-size:clamp(19px,1.85vw,28px); font-weight:600; letter-spacing:-.03em; line-height:1.2; word-break:break-word; }
.cnt__a{ margin-top:auto; font-size:13px; color:var(--gold); }
a.cnt:hover{ background:rgba(210,179,117,.06); }
a.cnt:hover .cnt__v{ color:var(--gold); }
.cnt--static .cnt__a{ color:var(--txt-dim-2); }

/* ============================================================
   ВНУТРЕННЯЯ СТРАНИЦА
   ============================================================ */

.page-top{ padding-top:clamp(110px,13vh,168px); }
.page-back{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; color:var(--txt-dim);
  margin-bottom:clamp(22px,2.4vw,34px);
  transition:color .25s var(--ease);
}
.page-back i{ font-style:normal; transition:transform .3s var(--ease); }
.page-back:hover{ color:var(--gold); }
.page-back:hover i{ transform:translateX(-4px); }
.page-h{
  font-size:clamp(32px,5vw,74px); line-height:1.02;
  letter-spacing:-.04em; margin-bottom:.4em;
}
.page-lead{ color:var(--txt-dim); max-width:56ch; font-size:clamp(15px,1.15vw,18px); }
.page-act{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(20px,2.2vw,30px); }

/* ============================================================
   МОДАЛЬНЫЕ ОКНА (кейс объекта и заявка)
   ============================================================ */

.modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(12px,3vh,44px) clamp(10px,2.4vw,28px);
  overflow-y:auto; overscroll-behavior:contain;
}
.modal[hidden]{ display:none; }
.modal__scrim{
  position:fixed; inset:0;
  background:rgba(5,6,8,.82);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:mFade .3s var(--ease);
}
@keyframes mFade{ from{ opacity:0; } }

.modal__win{
  position:relative; z-index:1;
  width:100%; max-width:1020px;
  margin:auto;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:14px;
  animation:mUp .38s var(--ease);
}
.modal__win--sm{ max-width:520px; }
@keyframes mUp{ from{ opacity:0; transform:translateY(22px); } }

.modal__x{
  position:absolute; right:10px; top:10px; z-index:3;
  width:42px; height:42px; padding:0; line-height:1;
  font-size:26px; color:var(--txt);
  background:rgba(10,11,14,.7); border:1px solid var(--line);
  border-radius:8px; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.modal__x:hover{ color:var(--gold); border-color:var(--gold); }

.modal__body{ padding:clamp(24px,3vw,48px) clamp(18px,2.6vw,44px) 0; }
.modal__pad{ padding:clamp(26px,3vw,40px); }
.modal__h{ font-size:clamp(23px,2.4vw,32px); line-height:1.1; margin-bottom:.45em; }
.modal__sub{ color:var(--txt-dim); font-size:14.5px; margin-bottom:1.4em; }
.modal__alt{
  display:flex; flex-wrap:wrap; gap:6px 22px;
  margin-top:20px; padding-top:18px;
  border-top:1px solid var(--line-soft);
  font-size:14px; color:var(--gold);
}
.modal--lead .lead{ background:none; border:none; border-radius:0; padding:0; }

.modal__foot{
  position:sticky; bottom:0;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px;
  margin-top:clamp(24px,3vw,40px);
  padding:clamp(16px,1.8vw,24px) clamp(18px,2.6vw,44px);
  background:var(--ink-3);
  border-top:1px solid var(--line);
  border-radius:0 0 13px 13px;
}
.modal__foot p{ margin:0; font-size:15px; }

/* ---------- Содержимое кейса ---------- */

.cs__place{ font-size:13px; font-weight:500; color:var(--gold); margin:0 0 10px; }
.cs__h{ font-size:clamp(26px,3.2vw,46px); line-height:1.04; margin-bottom:clamp(20px,2.2vw,30px); }
.cs__facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(14px,1.6vw,24px);
  padding:clamp(18px,2vw,26px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cs__facts dt{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-dim-2); margin-bottom:5px; }
.cs__facts dd{ font-size:15.5px; color:var(--txt); line-height:1.4; }
.cs__txt{ margin:clamp(20px,2.4vw,32px) 0 clamp(22px,2.6vw,36px); }
.cs__txt p{ color:var(--txt-dim); max-width:72ch; }
.cs__txt b{ color:var(--txt); font-weight:600; }
.cs__gal{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(8px,1vw,14px); }
.cs__gal img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; }
.cs__gal .w{ grid-column:1 / -1; aspect-ratio:16/7.6; }

/* ============================================================
   Появление при скролле
   ============================================================ */

.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.05s; }
.reveal:nth-child(3){ transition-delay:.1s; }
.reveal:nth-child(4){ transition-delay:.15s; }

/* ============================================================
   ПОДВАЛ
   ============================================================ */

.ftr{
  position:relative; z-index:1;
  max-width:1520px; margin:0 auto;
  padding:24px var(--pad) 38px;
  font-size:13px; color:var(--txt-dim-2);
}
.ftr__top{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.ftr__legal{
  margin:20px 0 0; padding-top:18px;
  border-top:1px solid var(--line-soft);
  font-size:12.5px; line-height:1.55; max-width:104ch;
}
.ftr__logo{ height:20px; width:auto; opacity:.8; }
.ftr p{ margin:0; }
.ftr a{ display:inline-block; padding:12px 0; transition:color .25s var(--ease); }
.ftr a:hover{ color:var(--gold); }
.ftr__resid{ margin-left:auto; }
.ftr__resid + a{ margin-left:0; }

/* ============================================================
   АДАПТИВ
   ============================================================ */

@media (max-width:1260px){
  .hdr__nav{ gap:14px; }
  .hdr__nav a{ font-size:13.5px; }
  .hdr__tel{ display:none; }
  .why__grid{ grid-template-columns:repeat(2,1fr); }
  .flow__list{ grid-template-columns:repeat(3,1fr); }
  .flow__i:nth-child(3){ border-right:none; }
  .flow__i:nth-child(4){ padding-left:0; }
  .spec__grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:1080px){
  .hero__in{ grid-template-columns:1fr; }
  .hero__ctrl{
    flex-direction:row; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:14px; text-align:left; padding-bottom:0;
  }
  .hero__cap{ max-width:none; }
  .trust__head{ grid-template-columns:1fr; gap:12px; }
  .trust__list{ grid-template-columns:repeat(3,1fr); }
  .about__body{ grid-template-columns:1fr; }
  .about__txt{ display:block; }
  .about__pins{ margin:28px 0 0; padding-top:0; }
  .about__media{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .about__off{ position:static; width:auto; border:none; }
  .about__off img{ aspect-ratio:3/4; }
  .srv__i{ grid-template-columns:1fr; gap:6px; }
  .srv__i p{ max-width:none; }
  .dubai{ grid-template-columns:1fr; }
  .dubai__media img{ aspect-ratio:16/9; }
  .resid__box{ grid-template-columns:1fr; }
  .pt{ grid-template-columns:1fr; }
  .contacts__top{ grid-template-columns:1fr; }
  .contacts__grid{ grid-template-columns:1fr; }
  .cnt{ border-right:none; padding-left:0 !important; padding-right:0; }
}

@media (max-width:860px){
  .hdr{ gap:10px; }
  .hdr__nav{
    position:fixed; inset:0 0 auto 0;
    background:rgba(10,11,14,.97);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    flex-direction:column; gap:0;
    padding:88px var(--pad) 34px;
    max-height:100svh; overflow-y:auto;
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    transform:translateY(-104%);
    transition:transform .5s var(--ease);
    border-bottom:1px solid var(--line);
  }
  .hdr.is-open .hdr__nav{ transform:none; }
  .hdr__nav a{
    font-size:24px; font-weight:500; letter-spacing:-.02em; color:var(--txt);
    padding:11px 0; border-bottom:1px solid var(--line-soft);
  }
  .hdr__nav a::after{ display:none; }
  .hdr__nav .nav-tel{
    display:block; color:var(--gold); border-bottom:none;
    font-size:19px; font-weight:600; padding-top:20px;
  }
  .hdr__cta{ margin-left:auto; padding:10px 14px; font-size:13px; }
  .hdr__cta i{ display:none; }
  .burger{ display:block; z-index:2; }
  .srv__peek{ display:none; }
  /* на узком экране линии подложки ложатся прямо на текст
     и выглядят как случайная решётка — гасим */
  .blueprint{ display:none; }

  .flow__list{ grid-template-columns:repeat(2,1fr); }
  .flow__i{ padding-left:0 !important; padding-right:clamp(14px,3vw,26px); }
  .flow__i:nth-child(2n){ border-right:none; }
  .flow__i b{ margin-bottom:16px; }
  .spec__grid{ grid-template-columns:1fr; }
  .sp{ min-height:230px; }
  .modal__body{ padding-inline:16px; }
  .modal__foot{ padding-inline:16px; }
  .cs__gal{ grid-template-columns:1fr; }
  .cs__gal .w{ aspect-ratio:4/3; }
  .resid-gal{ grid-template-columns:1fr; }
  .resid-gal .w{ aspect-ratio:4/3; }

  /* на телефоне текст стоит поверх кадра, затемнение уходит снизу вверх */
  .hero{ padding-top:88px; }
  .hero__scrim{
    background:
      linear-gradient(to top, rgba(6,7,10,.96) 0%, rgba(6,7,10,.8) 38%, rgba(6,7,10,.52) 72%, rgba(6,7,10,.66) 100%),
      linear-gradient(to bottom, rgba(6,7,10,.84) 0%, transparent 22%);
  }
  .hero h1{ margin-bottom:.32em; }
  .hero__lead{ max-width:36ch; font-size:14.5px; }
  .hero__act{ margin-top:18px; }
}

/* Телефон в ландшафте: экран низкий, меню должно помещаться целиком */
@media (max-width:860px) and (max-height:560px){
  .hero{ padding-top:88px; }
  .hdr__nav{ padding-top:58px; padding-bottom:18px; }
  .hdr__nav a{ font-size:17px; padding:6px 0; }
  .hdr__nav .nav-tel{ font-size:16px; padding-top:12px; }
}

@media (max-width:520px){
  /* цифры складываются в компактную полосу, чтобы первый экран не рос */
  .hero__meta{ display:grid; grid-template-columns:repeat(3,1fr); align-items:start; gap:12px; padding-top:14px; }
  .hero__meta b{ font-size:17px; white-space:nowrap; }
  .hero__meta span{ font-size:10.5px; line-height:1.3; color:var(--txt-dim-2); }
  .hero__geo{ font-size:11.5px; }
  .trust__list{ grid-template-columns:repeat(2,1fr); }
  .why__grid{ grid-template-columns:1fr; }
  .flow__list{ grid-template-columns:1fr; }
  .flow__i{ border-right:none; padding-right:0; }
  .flow__i b{ margin-bottom:12px; }
  .about__media{ grid-template-columns:1fr; }
  .dubai__facts{ grid-template-columns:1fr; }
  .resid__gal{ grid-template-columns:repeat(3,1fr); }
  .lead__row{ grid-template-columns:1fr; }
  .lead__send{ align-self:stretch; }
  .modal__foot{ flex-direction:column; align-items:stretch; }
  .modal__foot .btn{ width:100%; }
  .ftr__resid{ margin-left:0; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .bg__glow, .bg__stone{ animation:none; }
  .bg__cursor{ display:none; }
  .hero__slide.is-on img{ animation:none; }
  .hero h1 .l > b{ transform:none; animation:none; }
  .hero__up{ opacity:1; transform:none; animation:none; }
  .hero__bar.is-on i{ animation:none; width:100%; }
  .modal__scrim, .modal__win{ animation:none; }
  *{ transition-duration:.01ms !important; }
}