/* ===== Первый экран: фото на весь блок + светлая заливка с окном (вектор клиента) =====
   Фото клиента (9312×5238, 30.10) уменьшено до 2560×1440 и расширено зеркалом на 760 px с каждой стороны
   (hero-bg.webp, 4080×1440, WebP q90 — 400 КБ вместо 1 МБ JPEG), у вектора на столько же вытянут внешний прямоугольник и маска прозрачности
   (hero-frame.svg, viewBox -2087.53 0 11206.72 3955.32). Заливка — градиент белый→#E9E9E9,
   прозрачность по диагонали: у текста почти белая, справа сверху видно небо.
   Окно в векторе: x 3178.45–5461.61, y 1150.67–2355.5 (без «крыши», верх — по левой полке). Слой привязан к .hero-window,
   поэтому окно на любом экране совпадает с блоком справа, а здание всегда в окне.
   Слоя хватает на экраны до 4K; шире — края слоя плавно уходят в ровный цвет фона. */

.hero{position:relative;overflow:hidden;isolation:isolate;background:#dcddde}
.hero .hero-deco{display:none}
.hero-copy{position:relative;z-index:1}

/* 2K и шире: у краёв экрана видно продолжение фото — растворяем его в цвет фона на 160 px */
@media (min-width:2400px){
  .hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(90deg,#dcddde,rgba(220,221,222,0) 160px,rgba(220,221,222,0) calc(100% - 160px),#dcddde)}
}

.hero-media{position:relative}
.hero-window{position:relative;width:100%;aspect-ratio:2283.16/1204.83}
.hero-badge{width:max-content}
.hero-bg{
  position:absolute;z-index:-1;pointer-events:none;
  width:490.84%;   /* 11206.72 / 2283.16 */
  aspect-ratio:11206.72/3955.32;
  left:-230.64%;   /* (2087.53 + 3178.45) / 2283.16 */
  top:-95.50%;     /* 1150.67 / 1204.83 — % от высоты окна */
  background:url(/assets/img/hero-frame.svg) 0 0/100% 100% no-repeat,
             url(/assets/img/hero-bg.webp) 0 0/100% 100% no-repeat;
  /* края слоя плавно уходят в цвет фона: по бокам — на экранах шире 4K, снизу — на телефонах */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(#000 84%,transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(#000 84%,transparent);
          mask-composite:intersect;
}

/* сетка как на макете: текст слева, окно справа на ~48% ширины;
   надпись над заголовком — на уровне верха окна, кнопки — на уровне низа */
.hero-grid{grid-template-columns:minmax(0,1fr) 48%;gap:48px;align-items:stretch;padding-top:150px;padding-bottom:90px}
.hero-copy{display:flex;flex-direction:column;justify-content:space-between}
.hero h1{font-size:clamp(34px,3.4vw,52px);line-height:1.06}
.hero .lead{font-size:16.5px;margin:22px 0 28px}
.hero .btn-ghost{border:1.5px solid var(--ink)}

/* компьютер: окно по высоте блока текста — верх на уровне надписи над заголовком, низ на уровне кнопок.
   Колонка окна — size-контейнер: её высота = высота текста (сама она в высоту строки не вкладывается),
   ширина окна = высота × 2283.16/1204.83. Не помещается по ширине колонки — окно по ней и по центру текста. */
@media (min-width:1181px){
  .hero-grid{grid-template-columns:minmax(0,530px) minmax(0,1fr)}   /* текст — по ширине абзаца (.lead 530px), остальное — окну */
  .hero-media{container-type:size;display:flex;align-items:center;justify-content:flex-end}
  .hero-window{width:min(100cqw,189.50cqh)}
}

/* планшет в альбомной: текст выше окна — окно по центру текста */
@media (min-width:901px) and (max-width:1180px){
  .hero-grid{align-items:center}
  .hero-copy{justify-content:flex-start}
}

/* ===== Телефон и планшет: всё на одном экране — окно сверху, текст, кнопки внизу =====
   Место под окно = окно во всю ширину вместе с «крышей»: (100vw − 40px) / 1.8950 × 1.2313 = 0.6498 ширины.
   На низких экранах место сжимается, и окно уменьшается, сохраняя форму выреза:
   ширина окна = min(ширина места, высота места / 1.2313 × 1.8950).
   Лишняя высота на высоких телефонах делится поровну на три промежутка:
   под шапкой, между окном и текстом, между текстом и кнопками. */
@media (max-width:900px){
  .hero-grid{display:flex;flex-direction:column;gap:0;
    height:calc(100vh - 65px);height:calc(100svh - 65px);min-height:520px;
    padding-top:14px;padding-bottom:16px;box-sizing:border-box}
  .hero-media{display:flex;order:-1;flex:0 1 calc((100vw - 40px) * .6498 + 4px);min-height:120px;margin-bottom:16px;
    container-type:size;align-items:flex-end;justify-content:center}
  .hero-window{width:min(100cqw,153.90cqh)}
  .hero-badge{left:10px;bottom:10px;transform:scale(.5);transform-origin:left bottom}
  /* кнопка чата МАКС не показывается, пока видны кнопки первого экрана (класс ставит hero.js) */
  body.hero-cta-visible .fab-max{opacity:0;visibility:hidden;transform:translateY(16px);pointer-events:none}
  /* три равных промежутка: спейсер под шапкой (1 доля) + блок текста (2 доли, внутри — над надписью и над кнопками) */
  .hero-grid::before{content:"";order:-2;flex:1 1 0}
  .hero-copy{flex:2 1 auto;justify-content:flex-start}
  .hero .eyebrow{margin-top:auto}
  .hero-cta{margin-top:auto}
  /* на высоких телефонах текст и кнопки крупнее; по ширине ограничено, чтобы строки не переносились */
  .hero .eyebrow{font-size:clamp(10.5px,min(1.35svh,2.95vw),13px)}
  .hero h1{font-size:clamp(30px,min(4.3svh,9.2vw),40px);margin-top:10px !important}
  .hero .lead{font-size:clamp(14.5px,min(1.95svh,4.1vw),18px);line-height:1.5;margin:10px 0 16px}
  .hero-cta{flex-wrap:nowrap;gap:8px}
  .hero-cta .btn{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;
    padding:clamp(13px,1.9svh,19px) 6px;font-size:clamp(12.5px,min(1.6svh,3.5vw),15.5px)}
  .hero-cta .btn svg{display:none}
}