/* ЭКРАНЫ ПРИЛОЖЕНИЯ НА ГЛАВНОЙ.
 *
 * Владелец: «нужно несколько разных, воссоздай как у нас на app; главная не
 * очень, какая-то примитивная, сделай более современно… всё красиво и эффектно».
 *
 * ПОЧЕМУ НАРИСОВАНО, А НЕ СНЯТО. Снимки с эмулятора несут тестовый рекламный
 * баннер, чужой язык системы и часы «3:03» — на витрине это выглядит неряшливо
 * и стареет с каждой сборкой. Здесь те же экраны собраны своей графикой в тех
 * же цветах, что в приложении: они не устаревают, весят килобайты и одинаково
 * резкие на любом экране.
 *
 * Отдельный файл, а не хвост `hero.css`: тема своя — витрина приложения.
 */

.shots { position: relative; }

.shots-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
  margin-top: 34px;
}

/* Средний телефон крупнее и выше: взгляд должен цепляться за главный экран,
   а не скользить по трём одинаковым прямоугольникам. */
.shot { text-align: center; }
.shot:nth-child(2) { transform: translateY(-22px) scale(1.06); z-index: 2; }

.shot-frame {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 264px;
  aspect-ratio: 9 / 19.5;
  border-radius: 30px;
  padding: 8px;
  background: linear-gradient(160deg, #1d2b30, #0b1418);
  border: 1px solid rgba(255, 255, 255, .09);
  /* Две тени: короткая «прижимает» телефон к странице, длинная даёт объём. */
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 30px 60px rgba(0, 0, 0, .45);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}

.shot-frame:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 40px 80px rgba(13, 148, 136, .28);
}

.shot-screen {
  position: relative;
  height: 100%;
  border-radius: 23px;
  overflow: hidden;
  background: #0e1a1f;
}

.shot-screen svg { display: block; width: 100%; height: 100%; }

/* Полоска-«чёлка»: без неё рамка не читается как телефон. */
.shot-frame::before {
  content: '';
  position: absolute;
  top: 14px; left: 50%;
  width: 74px; height: 5px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: rgba(255, 255, 255, .18);
  z-index: 3;
}

.shot h3 {
  margin: 18px 0 6px;
  font-size: 16px;
  letter-spacing: -.01em;
}

.shot p {
  margin: 0 auto;
  max-width: 30ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted, #93a7ad);
}

/* СТРАНЫ ПРИБАВЛЯЮТСЯ — отдельной строкой под витриной.
   Владелец: «и что страны у нас могут добавляться периодически». */
.shots-note {
  margin: 30px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted, #93a7ad);
}

.shots-note b { color: #2dd4bf; font-weight: 600; }

@media (max-width: 900px) {
  .shots-row { grid-template-columns: 1fr; gap: 34px; }
  .shot:nth-child(2) { transform: none; }
  .shot-frame { max-width: 240px; }
}