/* НА ЧЁМ РАБОТАЕТ И НА СКОЛЬКИХ ЯЗЫКАХ.
 *
 * Владелец: «непонятно, на каких iOS работает» и «нет понятия
 * многоязычности». Оба вопроса задаются до нажатия «открыть карту», поэтому
 * блок стоит между витриной экранов и возможностями.
 *
 * Отдельный файл — своя тема, как и `shots.css`.
 */

.works-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.works-card {
  padding: 22px 20px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  border: 1px solid var(--l-line);
  /* Тень «плиты», а не размытое пятно: короткая линия сверху прижимает
     карточку к фону, длинная даёт глубину. Владелец: «у баллонов нет
     нормальных теней». */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px rgba(0, 0, 0, .35);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s;
}

.works-card:hover {
  transform: translateY(-4px);
  border-color: rgba(45, 212, 191, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 26px 56px rgba(13, 148, 136, .22);
}

.works-ico {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 12px;
  border-radius: 12px;
  font-size: 20px;
  background: rgba(45, 212, 191, .14);
  border: 1px solid rgba(45, 212, 191, .3);
}

.works-card h3 { margin: 0 0 6px; font-size: 16px; letter-spacing: -.01em; }
.works-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--l-dim); }

/* --- Языки --- */
.langs { margin-top: 34px; text-align: center; }
.langs-cap { margin: 0 0 14px; font-size: 13px; color: var(--l-mute); }

.langs-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.langs-row span {
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--l-text);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--l-line);
  transition: border-color .2s, color .2s, transform .2s;
}

.langs-row span:hover { border-color: var(--l-teal); color: var(--l-teal); transform: translateY(-2px); }

/* Язык, на котором человек читает страницу прямо сейчас, — выделен: так видно,
   что список не украшение, а то, что действительно работает. */
.langs-row span.is-current {
  color: #04231f;
  background: var(--l-teal);
  border-color: var(--l-teal);
  font-weight: 600;
}

/* Годовая цена — прямо в карточке, без переключателя. */
.price-year {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--l-mute);
}

@media (max-width: 900px) {
  .works-row { grid-template-columns: 1fr; }
}

/* --- ЦЕНЫ: три карточки вместо переключателя --- */
.price-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; }

/* ЗНАЧОК-ЛЕНТА СТОЯЛ КРИВО. Он висел у правого края и налезал на угол:
   владелец — «badge вообще смешон, не там лежит». Теперь он по центру
   верхней грани, ровно на линии рамки, и не спорит с числом цены. */
.price .ribbon {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  color: #04231f;
  background: var(--l-teal);
  box-shadow: 0 6px 18px rgba(13, 148, 136, .45);
}

.price .ribbon-amber { color: #2b1a00; background: #f59f00; box-shadow: 0 6px 18px rgba(245, 159, 0, .35); }

/* Бесплатный месяц — первым и заметнее прочих: с него начинают знакомство. */
.price.best {
  background: linear-gradient(170deg, rgba(20, 184, 166, .12), rgba(255, 255, 255, .02));
}

.price-cta {
  display: block;
  margin-top: 20px;
  padding: 11px 16px;
  border-radius: 11px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: #04231f;
  background: var(--l-teal);
  transition: background .2s, transform .2s;
}

.price-cta:hover { background: var(--l-teal2); transform: translateY(-1px); }

@media (max-width: 900px) { .price-3 { grid-template-columns: 1fr; } }

/* Страны, уже открытые водителям: те же «таблетки», что у языков, но спокойнее
   цветом — это перечень фактов, а не выбор. */
.country-list { margin-top: 14px; }
.country-list span { cursor: default; }
.country-list span:hover { transform: none; border-color: var(--l-line); color: var(--l-text); }