/*
 * Первый экран: четыре сборки, строка браузера и пара «релизы + сообщество».
 *
 * Файл только добавляет строки в существующий стек `.cta-platforms-wrap`, а не заводит вторую
 * сетку: высоты карточек остаются ровными, стеклянные эффекты и sheen из styles.css живут дальше.
 * Блок статистики `.hero-stats` тут не упоминается намеренно — его анимация с аватарками
 * привязана к разметке и main.js, и переопределять её нельзя.
 */

/* Сборок стало четыре (телефон, ТВ, ПК, iPhone), и ряду нужна ширина под них. */
.cta-platforms-wrap { max-width: 1000px; }
.cta-platforms { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cta-card .cta-text div { font-size: 13px; letter-spacing: .04em; }
.cta-card .cta-text small { font-size: 11.5px; }
@media (max-width: 1024px) { .cta-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cta-platforms { grid-template-columns: 1fr; } }

/* Акцент на Android: он же самый частый выбор. */
.cta-card[data-accent="1"] { border-color: rgba(160,232,104,.3); background: radial-gradient(120% 200% at 14% -70%, rgba(160,232,104,.12), transparent 46%), rgba(255,255,255,.06); }
.cta-card[data-accent="1"]:hover { border-color: rgba(160,232,104,.46); }
.cta-badge { position: absolute; top: 9px; right: 11px; padding: 3px 8px; border-radius: 999px; background: linear-gradient(90deg,#a0e868,#6b9e3a); color: #0b0f08; font-size: 9px; font-weight: 700; letter-spacing: .06em; }

/*
 * Один ряд, две карточки: релизы слева, сообщество разделено пополам справа.
 * Обе держат высоту карточки сборки выше — те же отступы, тот же бокс иконки, одна строка
 * текста, — поэтому стек читается как три равных ряда, а не как растущая гора.
 */
.hero-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.hero-duo .cta-card--github { padding: 16px 18px; gap: 12px; }
.hero-duo .cta-github-main { gap: 12px; }
.hero-duo .cta-icon--github svg { width: 26px; height: 26px; display: block; }
.hero-duo .cta-github-side { gap: 8px; flex-wrap: nowrap; }
.hero-duo .cta-github-release { display: none; }
.hero-duo .cta-github-link { min-height: 28px; padding: 0 10px; }

/* Широкий ряд браузера: основное действие слева, инструкция справа, одна карточка. */
.web-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: stretch; gap: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.035); overflow: hidden; backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
.web-main { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 18px; color: #fff; text-align: left; text-decoration: none; transition: background .2s ease; }
.web-main:hover { background: rgba(255,255,255,.04); }
.web-main .web-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); }
.web-main .web-icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.web-main .web-copy div { font-weight: 600; letter-spacing: .05em; font-size: 14px; }
.web-main .web-copy small { display: block; margin-top: 3px; color: var(--muted, #979797); font-size: 12px; line-height: 1.5; }
.web-main .web-go svg { width: 15px; height: 15px; fill: none; stroke: rgba(255,255,255,.7); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.web-main:hover .web-go svg { stroke: #fff; }
.web-help { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 0; border-left: 1px solid rgba(255,255,255,.08); background: transparent; color: #c9cdd6; font-family: inherit; font-size: 12px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.web-help:hover { background: rgba(160,232,104,.08); color: #fff; }
.web-help i { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid rgba(160,232,104,.42); border-radius: 50%; color: #a0e868; font-size: 10px; font-style: normal; }
.web-rustore { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 132px; padding: 0 16px; border-left: 1px solid rgba(255,255,255,.08); color: #fff; text-decoration: none; transition: background .2s ease; }
.web-rustore:hover { background: rgba(0,119,255,.1); }
.web-rustore img { width: 28px; height: 28px; flex: 0 0 28px; }
.web-rustore span { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.web-rustore b { font-size: 11px; font-weight: 600; line-height: 1.2; }
.web-rustore small { margin-top: 2px; color: var(--muted, #979797); font-size: 10px; line-height: 1.2; }

@media (max-width: 768px) {
  .web-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .web-main { grid-column: 1 / -1; }
  .web-help { justify-content: center; padding: 12px 14px; border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .web-rustore { min-width: 0; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.08); }
}

/* Сообщество: одна карточка привычного веса, разделённая посередине — канал | чат. */
.tg-card { padding: 0; overflow: hidden; }
/* Ссылки — это половины, поэтому сама карточка не должна отвечать на курсор второй раз. */
.tg-card:hover { transform: none; background: rgba(255,255,255,.06); box-shadow: none; }
.tg-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.tg-half { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 11px; padding: 16px 18px; color: #fff; text-decoration: none; transition: background .2s ease, color .2s ease; }
.tg-half + .tg-half { border-left: 1px solid rgba(255,255,255,.08); }
/* Подсветка идёт по углам карточки: прямоугольник внутри скруглённой рамки выглядит поломкой. */
.tg-half:first-child { border-radius: 13px 0 0 13px; }
.tg-half + .tg-half { border-radius: 0 13px 13px 0; }
.tg-half:hover { background: rgba(160,232,104,.07); }
.tg-half:hover i { border-color: rgba(160,232,104,.34); background: rgba(160,232,104,.1); }
.tg-half i { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.04); color: #a0e868; }
.tg-half svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tg-half b { display: block; font-size: 12px; font-weight: 600; letter-spacing: .05em; }
.tg-half small { display: block; margin-top: 2px; color: var(--muted, #979797); font-size: 11px; line-height: 1.4; }

@media (max-width: 768px) {
  .hero-duo { grid-template-columns: 1fr; }
  .tg-split { grid-template-columns: 1fr; }
  .tg-half + .tg-half { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
}