/* ЭМИНЕССА — первый экран.
   Главное добавление — действие: заказать на сайте нельзя, значит в первом экране
   должен быть телефон, а не только заголовок. Остальное — выравнивание по палитре. */

.front-banner {
  position: relative;
  height: 440px;
  background-size: cover;
  background-position: center;
}
/* затемнение слева направо: белый текст читается при любой фотографии */
.front-banner:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(17, 20, 25, .90) 0%,
              rgba(17, 20, 25, .74) 38%,
              rgba(17, 20, 25, .34) 72%,
              rgba(17, 20, 25, .22) 100%);
  pointer-events: none;
}
.front-banner .container { position: relative; z-index: 2; }
.front-banner-wrap { height: 440px; }

/* надстрочная строка: город и род занятий — то, что покупатель проверяет первым */
.banner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-top: 46px;
  color: #E2E6EB;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.banner-eyebrow:before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--h-oxide, #B8321C);
}

.banner-h1 {
  font-size: 58px;
  line-height: 64px;
  letter-spacing: -.015em;
  padding-top: 26px;
  width: 62%;
}

.banner-lead {
  color: #C2C9D2;
  font-size: 17px;
  line-height: 26px;
  width: 46%;
  padding-top: 22px;
}

/* действие */
.banner-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 32px;
}
.banner-call,
.banner-catalog {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 9px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.banner-call {
  background: var(--h-oxide, #B8321C);
  color: #fff;
  letter-spacing: .3px;
}
.banner-call:hover { background: var(--h-oxide-d, #96280F); color: #fff; }
.banner-call:before {
  content: "";
  width: 19px; height: 19px; flex: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3l1.5 4-2 1.5a12 12 0 0 0 6 6l1.5-2 4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4.5 5.7a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.banner-catalog {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .34);
}
.banner-catalog:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .6); color: #fff; }

/* показатели: стекло на графите вместо картинки прежнего бренда */
.advantages-block {
  background: rgba(20, 23, 29, .70);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  box-shadow: 0 24px 50px 0 rgba(10, 13, 18, .32);
}
.advantages-block .value { font-weight: 800; letter-spacing: -.02em; }
.advantages-block .title { color: #fff; }
.advantages-block .description { color: #AEB6C0; opacity: 1; }

/* Полоса под баннером: без ссылки на файл она работает как узкая кромка,
   отделяющая первый экран от каталога. */
.front-banner-line-wrap { height: 44px; }

@media only screen and (max-width: 767px) {
  .front-banner { height: auto; background-position: 62% center; }
  .front-banner:before {
    background: linear-gradient(180deg,
                rgba(17, 20, 25, .82) 0%,
                rgba(17, 20, 25, .72) 55%,
                rgba(17, 20, 25, .88) 100%);
  }
  .front-banner-wrap { height: auto; padding-bottom: 28px; }

  .banner-eyebrow { padding: 26px 20px 0; font-size: 11.5px; letter-spacing: .11em; }
  .banner-h1 { font-size: 33px; line-height: 40px; padding: 12px 20px 0; width: 100%; }
  .banner-lead { width: auto; padding: 12px 20px 0; font-size: 15px; line-height: 23px; }
  .banner-cta { padding: 20px 20px 0; gap: 10px; }
  .banner-call, .banner-catalog { height: 48px; font-size: 15.5px; padding: 0 20px; }
  .banner-call { flex: 1 1 100%; justify-content: center; }
  .banner-catalog { flex: 1 1 100%; justify-content: center; }

  .advantages-block { margin: 26px 5% 0; }
}

@media only screen and (max-width: 400px) {
  .banner-h1 { font-size: 29px; line-height: 35px; }
  .banner-lead { font-size: 14px; }
}