/*
 * Раздел «Приложения».
 *
 * Поверх features.css: та же раскладка в три колонки, те же карточки и
 * та же панель загрузки. Здесь — только отличия этого раздела:
 * шесть карточек вместо восьми, четыре мелких довода вместо трёх,
 * пять кнопок в панели и более крупные, ярче подсвеченные телефоны.
 */

/* ── Свет раздела ───────────────────────────────────────────── */
/* Фон здесь холоднее и темнее, чем в «Возможностях», поэтому золото
   добавляем сами — иначе страница выглядит обычным тёмным сайтом. */
.hero--apps .hero__bg img { filter: saturate(1.16) brightness(1.1) contrast(1.06); }

.hero--apps .hero__veil--features {
  background:
    radial-gradient(46% 54% at 50% 44%, rgba(234, 181, 75, 0.16) 0%, rgba(0, 0, 0, 0) 68%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.46) 25%, rgba(0, 0, 0, 0.08) 47%, rgba(0, 0, 0, 0.46) 73%, rgba(0, 0, 0, 0.88) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.14) 36%, rgba(0, 0, 0, 0.78) 100%);
}

/* Золотая дымка снизу — телефоны будто стоят в свете. */
.hero--apps::before {
  height: 42%;
  background: radial-gradient(88% 100% at 50% 100%, rgba(234, 181, 75, 0.28) 0%, rgba(215, 155, 37, 0.11) 40%, rgba(0, 0, 0, 0) 76%);
}

/* Тёплый отсвет сверху, у самой шапки: сцена смыкается по вертикали. */
.hero--apps::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: 26%;
  background: radial-gradient(74% 100% at 50% 0%, rgba(234, 181, 75, 0.16) 0%, rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
}

/* Середина шире: телефоны здесь — главный герой страницы. */
.hero--apps .features { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.42fr) minmax(0, 0.84fr); }

/* ── Шесть карточек: три в ряд ──────────────────────────────── */
.fgrid--apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Карточки крупнее: их шесть, место есть. */
.fgrid--apps .fcard { padding: clamp(9px, 0.82vw, 15px); }
.fgrid--apps .fcard__title { font-size: clamp(12px, 1vw, 18px); }
.fgrid--apps .fcard__text { font-size: clamp(9px, 0.66vw, 12px); }

/* «Скоро» — приглушённые карточки Windows и Mac. */
.fcard--soon { opacity: 0.72; }

/* ── Четыре мелких довода ───────────────────────────────────── */
.fmini--apps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fmini--apps li { gap: 6px; letter-spacing: 0.1em; }
.fmini--apps li + li { padding-left: clamp(6px, 0.6vw, 12px); }

/* ── Телефоны ───────────────────────────────────────────────── */
/* Крупнее, чем в «Возможностях»: здесь показываем сами приложения. */
.hero--apps .fphones img {
  max-width: 118%;
  margin-bottom: clamp(-44px, -2.9vw, -16px);
  filter:
    drop-shadow(0 0 30px rgba(255, 211, 106, 0.48))
    drop-shadow(0 0 84px rgba(234, 181, 75, 0.34))
    drop-shadow(0 30px 60px rgba(0, 0, 0, 0.76));
}

.hero--apps .fphones::before {
  width: 118%;
  top: 44%;
  background: radial-gradient(closest-side, rgba(234, 181, 75, 0.36) 0%, rgba(215, 155, 37, 0.15) 44%, rgba(0, 0, 0, 0) 72%);
}

/* ── Панель загрузки: пять путей ────────────────────────────── */
.download__buttons--five {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(5px, 0.55vw, 10px);
}

.download__buttons--five .store {
  justify-content: center;
  padding: clamp(7px, 0.62vw, 11px) clamp(6px, 0.6vw, 11px);
  gap: clamp(5px, 0.5vw, 9px);
}

.download__buttons--five .store__text { min-width: 0; }
.download__buttons--five .store__name { font-size: clamp(10px, 0.78vw, 14px); }
.download__buttons--five .store__top { font-size: clamp(7.5px, 0.56vw, 10px); }

/* Недоступные площадки видно сразу: тусклее и без нажатия. */
.store--soon {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Панель шире обычной: пять кнопок должны дышать. */
.download--apps { padding-left: clamp(12px, 1.2vw, 24px); padding-right: clamp(12px, 1.2vw, 24px); }

/* ── Планшет ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero--apps .features { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .fgrid--apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fmini--apps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 0; }
  .fmini--apps li:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero--apps .fphones img { max-width: 100%; margin-bottom: 0; }
  .download__buttons--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Телефон ────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Правило раздела задано через .hero--apps и перебивало общее
     однотолбцовое из features.css — на телефоне страница оставалась
     в две колонки шириной по 182 точки. Повторяем его здесь. */
  .hero--apps .features { grid-template-columns: minmax(0, 1fr); }
  .fgrid--apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fmini--apps { grid-template-columns: minmax(0, 1fr); }
  .fmini--apps li + li { border-left: 0; padding-left: 0; }
  .download__buttons--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero--apps .fphones img { width: min(100%, 460px); max-width: 100%; }
  .hero--apps .fphones::before { width: 100%; }
}

@media (max-width: 480px) {
  .fgrid--apps { grid-template-columns: minmax(0, 1fr); }
  .download__buttons--five { grid-template-columns: minmax(0, 1fr); }
}

/* ── Точная посадка в экран ─────────────────────────────────── */
/* Заголовок здесь из двух длинных слов, а строк в левой колонке
   больше, чем в «Возможностях»: без этого страница вылезала за
   1920×1080 на 67 точек. */
.hero--apps .ftitle { font-size: clamp(24px, 2.35vw, 44px); }
.hero--apps .flead { font-size: clamp(9px, 0.64vw, 11.5px); }
.download--apps .download__note { margin-top: clamp(4px, 0.42vw, 7px); }
.download--apps { padding-top: clamp(7px, 0.62vw, 11px); padding-bottom: clamp(7px, 0.62vw, 11px); }

/* Правая колонка тянется до низа: подпись «Поставьте. Найдите своих.»
   должна стоять на одной линии с панелью загрузки, а не висеть выше. */
.hero--apps .fcol--right { align-self: stretch; }
.hero--apps .features { padding-bottom: calc(var(--edge) - 9px); }

/* Глобус в кнопке веб-версии рисуется линиями, а не заливкой:
   иначе на кнопке получался белый круг. */
.store__icon--line { fill: none; stroke: var(--gold-light); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }