/* ==========================================================================
   MEDIA BOX — БЛОКИ ГЛАВНОЙ ПОД ТЕЛЕФОНАМИ (home.css)
   --------------------------------------------------------------------------
   Подключается только на главной: после pages.css, hero.css, screens.css
   и перед future.css (тема «2050» усиливает эти блоки, см. её раздел 9).
   Блоки:
     .home-intro / .home-card — «понятно за 15 секунд» (что, как, что дальше)
     .pkgs / .pkg / .pkg-extras — три продукта с ценами + дополнительно
     .home-steps / .home-step — как это работает (5 шагов)
     .vs — чем отличаемся от обычного SMM
     .auds / .aud — для кого
     .cases / .case-card — кейсы (без цифр)
   Брейкпоинты: телефон < 640px, планшет 640–1023px, ПК ≥ 1024px.
   Анимации — только transform / opacity, hover — только для мыши.
   ========================================================================== */

/* На главной под hero начинается обычная страница */
.page--home main {
  position: relative;
}

/* Ссылки в .lead на главной (pages.css рассчитан на внутренние страницы) */
.home-more {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 40px);
}


/* --------------------------------------------------------------------------
   Понятно за 15 секунд
   -------------------------------------------------------------------------- */

.home-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 20px);
}

@media (min-width: 900px) {
  .home-intro__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home-card {
  position: relative;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 60%),
    var(--surface);
}

.home-card__num {
  display: block;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--accent);
}

.home-card__title {
  margin-top: 14px;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
}

.home-card__text {
  margin-top: 10px;
  color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   Продукты
   -------------------------------------------------------------------------- */

.pkgs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}

@media (min-width: 900px) {
  .pkgs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 60%),
    var(--surface);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.pkg--featured {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(123, 92, 255, .12), rgba(56, 217, 255, 0) 45%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, rgba(56, 217, 255, .85), rgba(123, 92, 255, .85)) border-box;
  box-shadow: 0 30px 70px -36px rgba(123, 92, 255, .6);
}

/* На ПК выделенная карточка чуть выше соседних */
@media (min-width: 900px) {
  .pkg--featured {
    transform: translateY(-10px);
  }
}

.pkg__tag {
  min-height: 28px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pkg__name {
  margin-top: 10px;
  font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
}

.pkg__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 14px;
}

.pkg__price .price__usd {
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.625rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--text);
}

.pkg__note {
  margin-top: 8px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--accent);
}

.pkg__desc {
  margin-top: 14px;
  margin-bottom: 22px;
  font-size: .9375rem;
  color: var(--text-muted);
}

.pkg__cta {
  margin-top: auto;
}

@media (hover: hover) and (pointer: fine) {
  .pkg:not(.pkg--featured):hover {
    transform: translateY(-3px);
    border-color: rgba(56, 217, 255, .3);
  }
}

/* Дополнительно: строка из трёх позиций */
.pkg-extras {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: clamp(20px, 3vw, 28px);
}

@media (min-width: 900px) {
  .pkg-extras {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pkg-extras li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: flex-start;          /* плитки одной высоты: строки не растягиваются */
  gap: 4px 10px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .02);
  font-size: .9375rem;
}

.pkg-extras__name {
  font-weight: 700;
  color: var(--text);
}

.pkg-extras__price {
  font-weight: 700;
  color: var(--accent);
}

/* Пояснение в плитке (сопровождение — к любому пакету, ведение — что такое лид):
   отдельной строкой, мельче основного текста */
.pkg-extras li > .text-muted {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: .8125rem;
  line-height: 1.45;
}


/* --------------------------------------------------------------------------
   Как это работает — 5 шагов с линией
   -------------------------------------------------------------------------- */

.home-steps {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  counter-reset: none;
}

@media (min-width: 1024px) {
  .home-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
  }

  /* Линия, соединяющая шаги */
  .home-steps::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 4%;
    right: 4%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56, 217, 255, .45), rgba(123, 92, 255, .45), transparent);
  }
}

.home-step {
  position: relative;
  padding: 0 4px;
}

.home-step__num {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(56, 217, 255, .35);
  border-radius: 18px;
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--accent);
  background: var(--bg);
}

.home-step__title {
  margin-top: 16px;
  font-size: 1.125rem;
}

.home-step__text {
  margin-top: 6px;
  font-size: .9375rem;
  color: var(--text-muted);
}

@media (max-width: 1023.98px) {
  .home-step {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }

  .home-step__num {
    grid-row: span 2;
  }

  .home-step__title {
    margin-top: 6px;
  }
}


/* --------------------------------------------------------------------------
   Чем отличаемся от SMM
   -------------------------------------------------------------------------- */

.vs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  max-width: 980px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .vs {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  }
}

.vs__col {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.vs__col--old {
  opacity: .78;
}

.vs__col--new {
  border-color: rgba(56, 217, 255, .4);
  background:
    linear-gradient(180deg, rgba(56, 217, 255, .07), rgba(56, 217, 255, 0) 55%),
    var(--surface);
}

.vs__title {
  font-size: 1.125rem;
}

.vs__col--new .vs__title {
  color: var(--accent);
}

.vs__chain {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.vs__chain li {
  position: relative;
  padding-left: 30px;
  font-size: .9375rem;
  color: var(--text-muted);
}

/* Стрелка-переход между звеньями цепочки */
.vs__chain li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  opacity: .6;
}

.vs__chain li::after {
  content: '';
  position: absolute;
  left: 10px;
  top: calc(.55em - 3px);
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .6;
}

.vs__col--new .vs__chain li {
  color: var(--text);
}

.vs__col--new .vs__chain li::before,
.vs__col--new .vs__chain li::after {
  color: var(--accent);
  opacity: 1;
}


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

.auds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 640px) {
  .auds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .auds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.aud {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.aud__title {
  margin-top: 14px;
  font-size: 1.0625rem;
}

.aud__text {
  margin-top: 6px;
  font-size: .9375rem;
  color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   Кейсы
   -------------------------------------------------------------------------- */

.cases {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
}

@media (min-width: 768px) {
  .cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.case-card {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3.4vw, 40px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* Крупная полупрозрачная буква-метка в углу */
.case-card::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(123, 92, 255, .22), transparent);
  pointer-events: none;
}

.case-card__type {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.case-card__name {
  margin-top: 10px;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

.case-card__text {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  color: var(--text-muted);
}

.cases__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: .875rem;
  color: var(--text-muted);
}

.cases__note .icon {
  width: 18px;
  height: 18px;
  color: var(--accent-3);
}