/* =========================================================
   AdvanceCom — стеклянные конструкции, Астана
   Токены: Onest 300/400 / графит, туман, шампань / ease (.22,1,.36,1)
   ========================================================= */

:root{
  /* палитра: 2 + 1 акцент */
  --ink:        #0B0D0E;
  --ink-soft:   #121516;
  --ink-lift:   #171A1C;
  --mist:       #E9EAE6;
  --accent:     #C2AE94;

  /* прозрачности иерархии */
  --t-1: 1;
  --t-2: .74;
  --t-3: .56;

  /* шкала отступов */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px;
  --s-4: 40px; --s-5: 64px; --s-6: 104px; --s-7: 168px;

  --pad: clamp(20px, 5vw, 88px);

  --r-pill: 999px;
  --r-plate: 24px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --hero-tail: 88vh;
}

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

/* clip, а не hidden: hidden превращает body в скролл-контейнер и ломает sticky */
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body{
  margin: 0;
  background: var(--ink);
  color: var(--mist);
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul, ol, dl, dd{ margin: 0; padding: 0; list-style: none; }
figure{ margin: 0; }

::selection{ background: var(--accent); color: var(--ink); }

/* --- клавиатурная навигация --- */

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.btn:focus-visible{ outline-offset: 4px; }

.skip{
  position: fixed; top: 10px; left: 10px; z-index: 90;
  padding: 12px 20px;
  min-height: 44px; display: inline-flex; align-items: center;
  background: var(--mist); color: var(--ink);
  border-radius: var(--r-pill);
  font-size: 14px;
  transform: translateY(-160%);
  transition: transform 320ms var(--ease);
}
.skip:focus{ transform: none; }

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

/* ---------- типографика ---------- */

h1, h2, h3{
  font-weight: 200;                /* тонкий дисплейный вес, минималистичный */
  margin: 0;
  hyphens: none;
  text-wrap: balance;
}

/* мелкие заголовки на тонком весе рассыпаются — им обычный */
h3, .card__title, .step__title, .aud__title, .modal__title{ font-weight: 400; }

h1{ font-size: clamp(1.95rem, 7.2vw, 5rem); line-height: .9; letter-spacing: -.035em; max-width: none; }

.sec__title,
.intro__title,
.request__title{
  font-size: clamp(1.7rem, 4.4vw, 3.9rem);
  line-height: .95;
  letter-spacing: -.03em;
  max-width: none;
}

h3{ font-size: clamp(20px, 2vw, 30px); line-height: 1.06; letter-spacing: -.02em; }

p{ margin: 0; text-wrap: pretty; max-width: 56ch; }

/* BRK-01: короткие блоки 2–4 строк балансируем, а не оставляем рваными */
.hero__lead, .plate__text, .plate__cap, .assure, .card__text, .step__text,
.ticks li, .specs dd, .intro__cols p, .request__lead,
.footer__bottom span{ text-wrap: balance; }

.label{
  display: block;
  font-size: 12px;
  line-height: 1.8;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: color-mix(in srgb, var(--mist) 56%, transparent);
  margin: 0 0 var(--s-3);
  max-width: none;
}

/* ---------- зерно ---------- */

.grain{
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   HERO — схема A: фото на весь экран, текст в нижнем левом углу
   ========================================================= */

.hero{
  position: relative;
  height: calc(100svh + var(--hero-tail));
}

.hero__media{
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
}

.hero__media img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 50%;
  transform: scale(var(--hero-scale, 1.06));
  transform-origin: 60% 40%;
  will-change: transform;
}

/* IMG-06: не затемняющая плашка, а размытая маска снизу */
.hero__mask{
  position: absolute; inset: 0;
  backdrop-filter: blur(34px) brightness(.86);
  -webkit-backdrop-filter: blur(34px) brightness(.86);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 22%, transparent 62%);
          mask-image: linear-gradient(to top, #000 0%, #000 22%, transparent 62%);
}

.hero__inner{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
}

.hero__screen{
  height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(20px, 2.6vw, 36px) var(--pad) clamp(32px, 5vh, 72px);
}

/* --- навигация --- */

.nav{
  display: flex; align-items: center; gap: var(--s-4);
}

.brand{
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  letter-spacing: -.01em;
}

/* навигация лежит на фотографии — держим её читаемой тенью, а не заливкой */
.nav .brand,
.nav__links a,
.nav__phone,
.nav .btn--ghost .btn__label{
  text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 20px rgba(0,0,0,.8);
}
.brand__mark{ width: 22px; height: 22px; color: var(--accent); }
.brand__mark svg{ width: 100%; height: 100%; }
.brand__word{ font-size: 17px; }

.nav__links{
  display: flex; gap: clamp(18px, 2.2vw, 34px);
  margin-inline: auto;
}
.nav__links a{
  position: relative;
  font-size: 15px;
  opacity: .88;
  padding: 12px 0;
  transition: opacity 320ms var(--ease);
}
.nav__links a::after{
  content: ""; position: absolute; left: 0; bottom: 6px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 520ms var(--ease);
}
.nav__links a:hover{ opacity: 1; }
.nav__links a:hover::after{ transform: scaleX(1); transform-origin: left; }

.nav__side{ display: flex; align-items: center; gap: var(--s-3); }
.nav__phone{
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; opacity: .88;
  transition: opacity 320ms var(--ease);
}
.nav__phone:hover{ opacity: 1; }

/* --- заголовочный блок --- */

.hero__copy{ max-width: min(58rem, 92vw); }

.hero__lead{
  margin-top: var(--s-3);
  opacity: var(--t-2);
  max-width: 52ch;
  text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 28px rgba(0,0,0,.85);
}

.hero__title{ text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 44px rgba(0,0,0,.85); }

.hero__cta{
  margin-top: var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
}

.assure{
  font-size: 13px; line-height: 1.4;
  color: color-mix(in srgb, var(--mist) 60%, transparent);
  max-width: none;
}

/* =========================================================
   Кнопки — CTA
   ========================================================= */

.btn{
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 0; border-radius: var(--r-pill);
  font: inherit; font-size: 15px; letter-spacing: -.01em;
  cursor: pointer; isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.btn--solid{ background: var(--mist); color: var(--ink); }
.btn--solid .btn__fill{ background: var(--accent); }

.btn--ghost{
  background: transparent; color: var(--mist);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mist) 34%, transparent);
}
.nav .btn--ghost{ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mist) 52%, transparent); }
.nav .btn--ghost:hover .btn__label{ text-shadow: none; }
.btn--ghost .btn__fill{ background: var(--mist); }
.btn--ghost:hover .btn__label{ color: var(--ink); }

.btn--sm{ min-height: 44px; padding: 0 20px; font-size: 14px; }
.btn--full{ width: 100%; justify-content: center; min-height: 58px; }

.btn__fill{
  position: absolute; inset: 0; z-index: 1;
  transform: scaleX(0); transform-origin: left;
  transition: transform 500ms var(--ease);
}
.btn:hover .btn__fill,
.btn:focus-visible .btn__fill{ transform: scaleX(1); }

.btn__label{ position: relative; z-index: 2; transition: color 320ms var(--ease); }

.btn__arrow{
  position: relative; z-index: 2;
  width: 18px; height: 18px;
  transition: transform 520ms var(--ease), color 320ms var(--ease);
}
.btn__arrow svg{ width: 100%; height: 100%; }
.btn:hover .btn__arrow{ transform: translateX(6px); }
.btn--ghost:hover .btn__arrow{ color: var(--ink); }

/* текстовая ссылка со стрелкой */

.link{
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-size: 15px;
  color: var(--accent);
}
.link__ico{ width: 18px; height: 18px; transition: transform 520ms var(--ease); }
.link__ico svg{ width: 100%; height: 100%; }
.link__text{
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 520ms var(--ease);
}
.link:hover .link__ico{ transform: translateX(5px); }
.link:hover .link__text{ background-size: 100% 1px; }

/* =========================================================
   Плашки поверх закреплённого фото
   ========================================================= */

.hero__plates{
  flex: 1;
  display: grid;
  grid-template-columns: .8fr .8fr 1.4fr;
  align-items: end;
  gap: var(--s-2);
  padding: 0 var(--pad) clamp(24px, 4vh, 56px);
}

.plate{
  border-radius: var(--r-plate);
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--mist) 12%, transparent);
}

.plate--num{
  padding: var(--s-3) var(--s-3) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.plate--tall{ padding-block: var(--s-4) var(--s-3); }

.plate__value{
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  font-weight: 200; line-height: .9; letter-spacing: -.04em;
  color: var(--accent);
}
.plate__cap{
  font-size: 13px; line-height: 1.45;
  color: color-mix(in srgb, var(--mist) 66%, transparent);
}

.plate--wide{
  padding: var(--s-4) var(--s-4) var(--s-3);
  display: flex; flex-direction: column; align-items: flex-start;
}
.plate--wide .label{ margin-bottom: var(--s-2); }
.plate__text{ font-size: 16px; margin-bottom: var(--s-2); }

/* растворяем кадр героя в фоне страницы — стык не читается */
.hero__fade{
  height: clamp(120px, 17vh, 210px);
  background: linear-gradient(to bottom,
              color-mix(in srgb, var(--ink) 0%, transparent) 0%,
              color-mix(in srgb, var(--ink) 62%, transparent) 46%,
              var(--ink) 100%);
}

/* =========================================================
   Интро
   ========================================================= */

.intro{
  padding: clamp(64px, 9vh, 120px) var(--pad) clamp(72px, 10vh, 140px);
}

/* первая секция после героя начинается сразу за растворением кадра */
.hero + section{
  padding-top: clamp(24px, 3.5vh, 48px);
  margin-top: clamp(-32px, -3vh, -16px);
}
.intro__title{ max-width: none; }
.intro__cols{
  margin-top: var(--s-5);
  display: grid; grid-template-columns: repeat(2, minmax(0, 34ch));
  gap: var(--s-4) clamp(32px, 6vw, 96px);
  justify-content: end;
}
.intro__cols p{ opacity: var(--t-2); max-width: 42ch; }

/* =========================================================
   Секционные заголовки
   ========================================================= */

.sec__head{ padding: 0 var(--pad); margin-bottom: clamp(40px, 6vh, 80px); }
.sec__title{ max-width: none; }

/* =========================================================
   Услуги — карточки без рамок, разной высоты
   ========================================================= */

.services{ padding: clamp(72px, 10vh, 140px) 0 clamp(72px, 10vh, 140px); }

.cards{
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-2);
}

.card{
  position: relative;
  overflow: hidden;
  border-radius: 0;            /* IMG-04: фото встык к краю блока, без скруглённой рамки */
  background: var(--ink-soft);
  transition: transform 620ms var(--ease), background-color 620ms var(--ease);
  display: flex; flex-direction: column;
}
.card--a{ grid-column: span 5; }
.card--b{ grid-column: span 7; }
.card--c{ grid-column: span 7; }
.card--d{ grid-column: span 5; }

.card:hover{ transform: translateY(-6px); background: var(--ink-lift); }

.card__media{ overflow: hidden; }
.card--a .card__media{ aspect-ratio: 5 / 4; }
.card--b .card__media{ aspect-ratio: 16 / 8; }
.card--c .card__media{ aspect-ratio: 16 / 9; }
.card--d .card__media{ aspect-ratio: 4 / 3; }

.card__media img{
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(.72);
  transform: scale(1.02);
  transition: transform 860ms var(--ease), filter 860ms var(--ease);
}
.card:hover .card__media img{ transform: scale(1.09); filter: grayscale(1) contrast(1.1) brightness(.86); }

.card__body{
  position: relative;
  padding: var(--s-4) var(--s-4) var(--s-4);
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.card--b .card__body{ padding-block: var(--s-3) var(--s-4); }
.card--d .card__body{ padding-block: var(--s-5) var(--s-4); }

.card__num{
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}
.card__text{
  font-size: 15px; opacity: var(--t-3);
  max-width: 46ch;
}
.card__go{
  margin-top: auto; width: 20px; height: 20px;
  color: var(--accent); opacity: .55;
  transition: transform 520ms var(--ease), opacity 520ms var(--ease);
}
.card__go svg{ width: 100%; height: 100%; }
.card:hover .card__go{ transform: translateX(7px); opacity: 1; }

/* =========================================================
   Материалы — фото встык к краю окна (60/40)
   ========================================================= */

.materials{
  display: grid;
  grid-template-columns: 44fr 56fr;
  align-items: stretch;
  gap: clamp(32px, 5vw, 88px);
  padding: clamp(72px, 10vh, 140px) 0;
}

.materials__media{ order: 1; overflow: hidden; }
.materials__media img{
  width: 100%; height: 100%; min-height: 60vh;
  object-fit: cover; object-position: 40% 50%;
  filter: grayscale(1) contrast(1.05) brightness(.8);
}

.materials__copy{
  order: 2;
  padding-right: var(--pad);
  align-self: end;
  padding-bottom: clamp(0px, 4vh, 48px);
}

.materials__copy .sec__title{ font-size: clamp(1.7rem, 3.3vw, 3rem); }
.specs{ margin-top: var(--s-5); max-width: 46ch; }
.specs__row{
  padding: var(--s-3) 0;
  border-top: 1px solid color-mix(in srgb, var(--mist) 12%, transparent);
}
.specs__row:last-child{ border-bottom: 1px solid color-mix(in srgb, var(--mist) 12%, transparent); }
.specs dt{ font-size: 18px; margin-bottom: 6px; }
.specs dd{ font-size: 15px; opacity: var(--t-3); max-width: 44ch; }

/* =========================================================
   Процесс
   ========================================================= */

.process{ padding: clamp(72px, 10vh, 140px) 0; }

.steps{
  padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: color-mix(in srgb, var(--mist) 10%, transparent);
  border-block: 1px solid color-mix(in srgb, var(--mist) 10%, transparent);
  background-clip: content-box;
}
.step{
  background: var(--ink);
  padding: var(--s-4) var(--s-4) var(--s-5) 0;
  padding-left: var(--s-4);
  display: flex; flex-direction: column; gap: 10px;
}
.steps > .step:nth-child(3n+1){ padding-left: 0; }
.step__num{
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}
.step__title{ font-size: 22px; }
.step__text{ font-size: 15px; opacity: var(--t-3); max-width: 34ch; }

/* =========================================================
   Нам доверяют
   ========================================================= */

.trust{ padding: clamp(72px, 10vh, 140px) 0 clamp(64px, 9vh, 120px); }
.hero + .trust{ padding-bottom: clamp(56px, 8vh, 104px); }

.logos{
  margin: 0 var(--pad);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: color-mix(in srgb, var(--mist) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--mist) 10%, transparent);
}

.logo{
  background: var(--ink);
  padding: clamp(28px, 3.4vw, 48px) var(--s-3) var(--s-3);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  transition: background-color 620ms var(--ease);
}
.logo:hover{ background: var(--ink-soft); }

.logo__img{
  height: clamp(48px, 4.8vw, 68px);
  display: flex; align-items: center; justify-content: center;
}
.logo__img img{
  max-height: 100%; width: auto; max-width: 100%;
  opacity: .8;
  transform: translateY(4px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.logo:hover .logo__img img{ opacity: 1; transform: none; }

/* пиктограммы читаются мельче начертаний — даём им больше поля */
.logo--mark .logo__img{ height: clamp(58px, 5.8vw, 82px); }

.logo__name{
  font-size: 12px; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .16em;
  text-align: center;
  color: color-mix(in srgb, var(--mist) 60%, transparent);
  transition: color 620ms var(--ease);
}
.logo:hover .logo__name{ color: color-mix(in srgb, var(--mist) 82%, transparent); }

/* =========================================================
   Для кого
   ========================================================= */

.audience{ padding: clamp(72px, 10vh, 140px) 0; }
.aud{
  padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
}
.plate--aud{
  background: var(--ink-soft);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: var(--s-5) var(--s-4) var(--s-4);
  display: flex; flex-direction: column; align-items: flex-start;
  transition: background-color 620ms var(--ease), transform 620ms var(--ease);
}
.plate--soft{ background: var(--ink-lift); padding-top: var(--s-4); padding-bottom: var(--s-5); }
.plate--aud:hover{ transform: translateY(-5px); }

.aud__title{ margin: var(--s-1) 0 var(--s-3); }
.ticks{ margin-bottom: var(--s-4); display: grid; gap: 12px; }
.ticks li{
  position: relative; padding-left: 26px;
  font-size: 15px; opacity: var(--t-3); max-width: 42ch;
}
.ticks li::before{
  content: ""; position: absolute; left: 0; top: .72em;
  width: 14px; height: 1px; background: var(--accent);
}

/* =========================================================
   Частые вопросы
   ========================================================= */

.faq{ padding: clamp(72px, 10vh, 140px) 0 clamp(56px, 8vh, 110px); }

.qa{
  margin: 0 var(--pad);
  border-top: 1px solid color-mix(in srgb, var(--mist) 12%, transparent);
}

.qa__item{
  border-bottom: 1px solid color-mix(in srgb, var(--mist) 12%, transparent);
}

.qa__q{
  list-style: none;
  cursor: pointer;
  display: block;
  min-height: 68px;
  display: flow-root;
  padding: var(--s-2) 0;
  padding-right: 44px;
  position: relative;
  font-size: clamp(17px, 1.6vw, 21px);
  letter-spacing: -.01em;
  text-wrap: balance;
  transition: color 420ms var(--ease);
}
.qa__q::-webkit-details-marker{ display: none; }
.qa__q::after{
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 13px; height: 13px;
  margin-top: -7px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 520ms var(--ease);
}
.qa__item[open] .qa__q::after{ transform: rotate(-135deg); }
.qa__q:hover{ color: var(--accent); }

.qa__a{
  padding: 0 0 var(--s-3);
  max-width: 68ch;
}
.qa__a p{
  font-size: 15px;
  color: color-mix(in srgb, var(--mist) 62%, transparent);
  max-width: 60ch;
  text-wrap: balance;
}

/* =========================================================
   Заявка
   ========================================================= */

.request{
  padding: clamp(80px, 12vh, 168px) var(--pad) clamp(80px, 12vh, 160px);
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(40px, 6vw, 112px);
  align-items: start;
  border-top: 1px solid color-mix(in srgb, var(--mist) 10%, transparent);
}
.request__lead{ margin-top: var(--s-3); opacity: var(--t-2); max-width: 44ch; }

.contacts{
  margin-top: var(--s-5);
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
}
.contacts__phone{
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em;
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 520ms var(--ease);
}
.contacts__phone:hover{ background-size: 100% 1px; }

/* форма */

.form{
  background: var(--ink-soft);
  border-radius: var(--r-plate);
  padding: var(--s-4);
  display: grid; gap: var(--s-2);
}

.field{ position: relative; }

/* ловушка для спам-ботов: человек её не видит и не может сфокусировать */
.field--trap{
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}
.field input,
.field select{
  width: 100%; height: 58px;
  padding: 22px 16px 6px;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--mist) 18%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--mist);
  font: inherit; font-size: 16px;
  transition: border-color 420ms var(--ease);
  appearance: none;
}
.field select{ padding-top: 20px; cursor: pointer; }
.field select option{ background: var(--ink-soft); color: var(--mist); }

.field label{
  position: absolute; left: 16px; top: 19px;
  font-size: 16px;
  color: color-mix(in srgb, var(--mist) 52%, transparent);
  pointer-events: none;
  transition: transform 420ms var(--ease), font-size 420ms var(--ease), color 420ms var(--ease);
  transform-origin: left top;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field--select label{
  transform: translateY(-13px) scale(.72);
  color: color-mix(in srgb, var(--mist) 60%, transparent);
}
.field input:focus,
.field select:focus{ outline: none; border-bottom-color: var(--accent); }

.field__chev{
  position: absolute; right: 14px; top: 50%; width: 18px; height: 18px;
  transform: translateY(-40%);
  color: color-mix(in srgb, var(--mist) 50%, transparent);
  pointer-events: none;
}
.field__chev svg{ width: 100%; height: 100%; }

.form .btn{ margin-top: var(--s-2); }
.assure--form{ text-align: center; max-width: none; }
.form__done{
  margin-top: var(--s-1); text-align: center;
  font-size: 14px; color: var(--accent); max-width: none;
}

.form__error{
  margin-top: var(--s-1); text-align: center;
  font-size: 14px; color: #F0A9A0; max-width: none;
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"]{ border-bottom-color: #F0A9A0; }
.field input[aria-invalid="true"] + label{ color: #F0A9A0; }

/* =========================================================
   Подвал
   ========================================================= */

.footer{
  padding: clamp(48px, 7vh, 88px) var(--pad) clamp(28px, 4vh, 44px);
  border-top: 1px solid color-mix(in srgb, var(--mist) 10%, transparent);
}
.footer__top{
  display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: wrap;
  padding-bottom: var(--s-5);
}
.footer__nav{ display: flex; gap: clamp(16px, 2vw, 30px); margin-inline: auto; flex-wrap: wrap; }
.footer__nav a{
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; opacity: var(--t-3); transition: opacity 320ms var(--ease);
}
.footer__nav a:hover{ opacity: 1; }
.footer__contact{ display: flex; align-items: center; gap: var(--s-3); }
.footer__wa{
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; color: var(--accent);
}

.footer__bottom{
  display: flex; justify-content: space-between; gap: var(--s-3);
  flex-wrap: wrap;
  padding-top: var(--s-3);
  border-top: 1px solid color-mix(in srgb, var(--mist) 8%, transparent);
  font-size: 13px;
  color: color-mix(in srgb, var(--mist) 60%, transparent);
}

/* =========================================================
   Мобильное меню
   ========================================================= */

.burger{
  display: none;
  position: relative; z-index: 55;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.8));
  width: 44px; height: 44px;
  margin-left: auto;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--mist);
}
.burger span{
  display: block; width: 24px; height: 1px; margin: 5px auto;
  background: currentColor;
  transition: transform 420ms var(--ease), opacity 420ms var(--ease);
}
.burger[aria-expanded="true"] span:first-child{ transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform: translateY(-3px) rotate(-45deg); }

.mobile{
  position: fixed; inset: 0; z-index: 50;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  padding: 96px var(--pad) var(--s-5);
  display: flex; flex-direction: column; justify-content: space-between;
}
.mobile[hidden]{ display: none; }
.mobile__nav{ display: grid; gap: var(--s-3); }
.mobile__nav a{
  font-size: clamp(28px, 8vw, 44px); font-weight: 200;
  letter-spacing: -.03em; line-height: 1;
}
.mobile__foot{ display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }

/* =========================================================
   Шапка, которая догоняет на мобильном
   ========================================================= */

.topbar{ display: none; }

/* =========================================================
   Окно «заявка принята»
   ========================================================= */

.modal{
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-3);
}
.modal[hidden]{ display: none; }

.modal__veil{
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 520ms var(--ease);
}
.modal.is-open .modal__veil{ opacity: 1; }

.modal__card{
  position: relative;
  width: min(560px, 100%);
  background: var(--ink-lift);
  border-radius: var(--r-plate);
  padding: clamp(28px, 4vw, 56px) clamp(24px, 3.4vw, 48px) clamp(24px, 3vw, 40px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--mist) 12%, transparent),
              0 40px 90px rgba(0,0,0,.55);
  opacity: 0;
  transform: translateY(24px);
  filter: blur(10px);
  transition: opacity 620ms var(--ease) 80ms,
              transform 620ms var(--ease) 80ms,
              filter 620ms var(--ease) 80ms;
}
.modal.is-open .modal__card{ opacity: 1; transform: none; filter: blur(0); }

.modal__title{ margin-bottom: var(--s-3); text-wrap: balance; }
.modal__text{
  font-size: 15px; opacity: var(--t-3);
  text-wrap: balance; max-width: 46ch;
}

.modal__actions{
  margin-top: var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
}
.modal__later{
  min-height: 44px; padding: 0 4px;
  background: none; border: 0;
  font: inherit; font-size: 14px;
  color: color-mix(in srgb, var(--mist) 56%, transparent);
  cursor: pointer;
  transition: color 320ms var(--ease);
}
.modal__later:hover{ color: var(--mist); }

.modal__close{
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px; padding: 11px;
  background: none; border: 0; cursor: pointer;
  color: color-mix(in srgb, var(--mist) 52%, transparent);
  transition: color 320ms var(--ease), transform 520ms var(--ease);
}
.modal__close svg{ width: 100%; height: 100%; }
.modal__close:hover{ color: var(--mist); transform: rotate(90deg); }

/* =========================================================
   Мобильная панель действий
   ========================================================= */

.dock{ display: none; }

/* =========================================================
   Появление — MOT-01 / MOT-02
   ========================================================= */

.js .rise{
  opacity: 0;
  transform: translateY(28px);
  filter: blur(14px);
}
.js .is-in .rise,
.js .rise.is-in{
  opacity: 1; transform: none; filter: blur(0);
  transition:
    opacity 900ms var(--ease) var(--d, 0ms),
    transform 900ms var(--ease) var(--d, 0ms),
    filter 900ms var(--ease) var(--d, 0ms);
}


/* --- лестница задержек (§0: без inline style в разметке) --- */

.rise{ --d: 0ms; }

.brand.rise      { --d: 200ms; }
.nav__links.rise { --d: 340ms; }
.nav__side.rise  { --d: 420ms; }
.hero__title     { --d: 820ms; }
.hero__lead      { --d: 1000ms; }
.hero__cta       { --d: 1180ms; }

.hero__plates .plate:nth-child(2){ --d: 100ms; }
.hero__plates .plate:nth-child(3){ --d: 200ms; }

.sec__head .rise:nth-child(2){ --d: 100ms; }

.intro > .rise:nth-child(2){ --d: 100ms; }
.intro__cols .rise:nth-child(1){ --d: 200ms; }
.intro__cols .rise:nth-child(2){ --d: 300ms; }

.cards .card:nth-child(2){ --d: 80ms; }
.cards .card:nth-child(3){ --d: 160ms; }
.cards .card:nth-child(4){ --d: 240ms; }

.materials__copy .rise:nth-child(2){ --d: 100ms; }
.specs__row:nth-child(1){ --d: 200ms; }
.specs__row:nth-child(2){ --d: 280ms; }
.specs__row:nth-child(3){ --d: 360ms; }

.qa__item:nth-child(2){ --d: 60ms; }
.qa__item:nth-child(3){ --d: 120ms; }
.qa__item:nth-child(4){ --d: 180ms; }
.qa__item:nth-child(5){ --d: 240ms; }


.steps .step:nth-child(2){ --d: 60ms; }
.steps .step:nth-child(3){ --d: 120ms; }
.steps .step:nth-child(4){ --d: 180ms; }
.steps .step:nth-child(5){ --d: 240ms; }
.steps .step:nth-child(6){ --d: 300ms; }

.logos .logo:nth-child(2){ --d: 50ms; }
.logos .logo:nth-child(3){ --d: 100ms; }
.logos .logo:nth-child(4){ --d: 150ms; }
.logos .logo:nth-child(5){ --d: 200ms; }
.logos .logo:nth-child(6){ --d: 250ms; }
.logos .logo:nth-child(7){ --d: 300ms; }
.logos .logo:nth-child(8){ --d: 350ms; }

.aud .plate:nth-child(2){ --d: 120ms; }

.request__copy .rise:nth-child(2){ --d: 100ms; }
.request__copy .rise:nth-child(3){ --d: 200ms; }
.request__copy .rise:nth-child(4){ --d: 300ms; }
.form.rise{ --d: 200ms; }

/* =========================================================
   Адаптив
   ========================================================= */

/* невысокие ноутбуки: держим CTA внутри первого экрана */
@media (min-width: 900px) and (max-height: 780px){
  .hero__title{ font-size: clamp(1.95rem, 8.4vh, 5rem); }
  .hero__lead{ margin-top: var(--s-2); }
  .hero__cta{ margin-top: var(--s-3); }
  .hero__cta .assure{
    color: color-mix(in srgb, var(--mist) 76%, transparent);
    text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 2px 18px rgba(0,0,0,.9);
  }
  .hero__screen{ padding-bottom: clamp(24px, 4vh, 48px); }
}

@media (max-width: 1180px){
  /* горизонтальное меню уже спрятано — значит нужен бургер и догоняющая шапка,
     иначе на ноутбуках 900–1180 навигация недоступна вообще */
  .nav__links{ display: none; }
  .nav__side{ margin-left: auto; }
  .burger{ display: block; }

  .topbar{
    position: fixed; top: 0; left: 0; right: 0; z-index: 52;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-2);
    padding: 8px var(--pad);
    background: color-mix(in srgb, var(--ink) 84%, transparent);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--mist) 10%, transparent);
    transform: translateY(-110%);
    transition: transform 620ms var(--ease);
  }
  .topbar.is-in{ transform: none; }
  .topbar .brand__word{ font-size: 16px; }
  .burger--fixed{ display: block; margin-left: 0; }

  .burger[aria-expanded="true"]{
    position: fixed; z-index: 55;
    top: clamp(20px, 2.6vw, 36px); right: var(--pad);
  }
  .hero__plates{ grid-template-columns: 1fr 1fr; }
  .plate--wide{ grid-column: span 2; }
  :root{ --hero-tail: 78vh; }
}

@media (max-width: 900px){
  :root{ --hero-tail: 560px; }

  /* текст лежит на светлой части кадра — делаем крупнее и контрастнее */
  .hero__title{
    font-size: clamp(1.75rem, 8.55vw, 3.4rem);
    text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 3px 30px rgba(0,0,0,.95);
  }
  .hero__lead{
    font-size: 17px; margin-top: var(--s-2);
    opacity: .92;
    text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 2px 24px rgba(0,0,0,.95);
  }
  .hero__cta{ margin-top: var(--s-3); }
  .hero__cta .assure{
    color: color-mix(in srgb, var(--mist) 76%, transparent);
    text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 2px 18px rgba(0,0,0,.9);
  }

  /* маска глубже: под текстом кадр приглушён сильнее */
  .hero__mask{
    backdrop-filter: blur(30px) brightness(.72);
    -webkit-backdrop-filter: blur(30px) brightness(.72);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 36%, transparent 74%);
            mask-image: linear-gradient(to top, #000 0%, #000 36%, transparent 74%);
  }

  /* меньше пустоты: текст ниже, плашки сразу под первым экраном */
  .hero__screen{ padding-bottom: clamp(24px, 4vh, 44px); }
  .hero__plates{
    align-content: start;
    padding-top: var(--s-2);
    padding-bottom: var(--s-3);
  }
  .hero__fade{ height: clamp(72px, 9vh, 110px); }

  /* блоки не разъезжаются по вертикали */
  .intro, .services, .materials, .process,
  .trust, .audience, .faq, .request,
  .hero + .trust{
    padding-top: clamp(44px, 6vh, 72px);
    padding-bottom: clamp(44px, 6vh, 72px);
  }
  .hero + section{ padding-top: clamp(14px, 2.2vh, 28px); margin-top: -12px; }
  .sec__head{ margin-bottom: clamp(24px, 4vh, 40px); }

  .br-wide{ display: none; }

  .nav__side .nav__phone{ display: none; }
  .nav__side .btn--ghost{ display: none; }

  .hero__media img{ object-position: 55% 50%; }
  .hero__plates{
    grid-template-columns: 1fr;
    align-content: end;
    gap: var(--s-1);
  }
  .plate--wide{ grid-column: auto; padding: var(--s-3); }
  .plate--num, .plate--tall{ padding: var(--s-3); }
  .plate__value{ font-size: 2.4rem; }

  .intro__cols{ grid-template-columns: 1fr; justify-content: start; }

  .cards{ grid-template-columns: 1fr; }
  .card--a, .card--b, .card--c, .card--d{ grid-column: auto; }
  .card__media{ aspect-ratio: 16 / 10 !important; }
  .card__body{ padding: var(--s-3) !important; }

  .materials{ grid-template-columns: 1fr; gap: var(--s-4); }
  .materials__media img{ min-height: 52vh; }
  .materials__copy{ order: 2; padding-inline: var(--pad); }

  .steps{ grid-template-columns: 1fr; }
  .step{ padding: var(--s-3) 0 !important; }

  .qa__q{ min-height: 60px; padding-right: 38px; }
  .qa__a p{ text-wrap: pretty; }

  .logos{ grid-template-columns: repeat(2, 1fr); }
  .logo{ padding: var(--s-4) 6px var(--s-3); }
  .logo__img img{ opacity: .86; transform: none; }
  .logo__name{ font-size: 11px; letter-spacing: .05em; }

  .aud{ grid-template-columns: 1fr; }
  .plate--aud{ padding: var(--s-4) var(--s-3) !important; }

  .request{ grid-template-columns: 1fr; }
  .form{ padding: var(--s-3); }

  .footer__top{ flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .footer__nav{ margin-inline: 0; }

  .dock{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1);
    padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--ink) 84%, transparent);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--mist) 10%, transparent);
    transform: translateY(115%);
    transition: transform 620ms var(--ease);
  }
  .dock.is-in{ transform: none; }
  .dock .btn{ width: 100%; justify-content: center; font-size: 13px; padding: 0 12px; }
  .footer{ padding-bottom: 108px; }
}

@media (max-width: 560px){
  .modal__card{ padding: var(--s-4) var(--s-3) var(--s-3); }
  .modal__actions{ flex-direction: column; align-items: stretch; }
  .modal__later{ text-align: center; }
  .hero__cta{ gap: var(--s-2); }
  .btn{ width: 100%; justify-content: center; }
  .assure{ max-width: none; text-align: center; width: 100%; }
  .contacts{ flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .footer__bottom{ flex-direction: column; gap: 6px; }
}

/* =========================================================
   MOT-05
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .rise{ opacity: 1; transform: none; filter: none; }
  .hero__media img{ transform: none; }
}