/* =====================================================================
   app-detail.css — общий каркас страницы-деталки приложения.

   Единый источник формы для всех страниц вида ru/{slug}/index.php: hero,
   крошки, галерея, «Об игре», отзывы, блок скачивания, «Ещё игры».
   Раньше эти правила лежали инлайн в <style> каждой деталки — теперь их
   правишь здесь один раз, и меняются все страницы, собранные шаблоном
   assets/partials/app-detail.php. Токены и метрики — из RU Home.
   ===================================================================== */
:root{
  --teal:#1B7FA7;
  --navy:#0C3A52;
  --green:#169476;
  --green-deep:#0F8465;
  --amber:#EF9F27;
  --text:#5D7280;
  --faint:#93B0BD;
  --border:#CFE0E8;
  --soft:#F3FBFD;
  --mint:#EEF8F5;
  --white:#fff;
  --shadow-card:0 14px 34px rgba(12,58,82,.10);
  --shadow-hover:0 22px 44px rgba(12,58,82,.16);
}
#top,#download{scroll-margin-top:90px}
#screenshots,#about-app{scroll-margin-top:20px} /* воздух над надписями секций */

/* Cross-document view transition: браузер кросс-фейдит старую страницу в
   новую, уже спозиционированную на якоре (переход «Все игры» → /ru/#apps).
   Chromium + Safari 18.2+, остальные — мгновенный чистый показ. Обе страницы
   пары должны объявить opt-in, поэтому он есть и на главной, и на контактах. */
@view-transition{ navigation: auto; }
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation: none; }
}

/* Хлебные крошки */
.crumb-bar{background:#F3FBFD}
.crumb-bar .container{padding-top:13px;padding-bottom:13px}
.breadcrumbs{font-size:13px}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.breadcrumbs li{display:inline-flex;align-items:center}
.breadcrumbs a{color:#1D7A9E;font-weight:700;text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs li[aria-current="page"]{color:#5A707D;font-weight:700}
.breadcrumbs .sep{color:#9BB4BF}

/* Текущий hero боевой деталки */
.app-hero{position:relative;overflow:hidden;padding-top:52px}
.app-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.app-hero-bg svg{position:absolute;bottom:0;left:0;width:100%;height:auto}
.app-hero>.container{position:relative;z-index:1}
.app-hero-grid,.app-hero-copy,.app-hero-brand,.app-hero-title{min-width:0}
.app-hero-grid{grid-template-columns:minmax(420px,1fr) minmax(0,480px)}
.app-hero-brand{display:flex;align-items:center;gap:18px;margin:0 0 22px}
.app-hero-brand .app-hero-icon{width:84px;height:84px;flex:0 0 auto;margin:0;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(12,58,82,.15))}
.app-hero-brand .app-hero-title{margin:0;font-size:clamp(26px,2.9vw,34px);font-weight:900;line-height:1.06;letter-spacing:-.02em}
.app-hero-title .name{white-space:normal;overflow-wrap:anywhere;text-wrap:balance}
.app-hero-title .tail{display:block;margin-top:6px;color:#5D7280;font-size:clamp(17px,2vw,21px);font-weight:700;letter-spacing:normal}
.app-hero-lead{max-width:46ch}
.app-hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 30px}
.app-hero-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid rgba(12,58,82,.08);border-radius:999px;color:#0F6E56;background:rgba(255,255,255,.82);box-shadow:0 8px 20px rgba(12,58,82,.06);font-size:12px;font-weight:800;line-height:1;white-space:nowrap}
.app-hero-badge svg{width:14px;height:14px;flex:0 0 auto}
.app-hero-cta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px;margin-top:4px}
.app-hero-cta .btn-download{min-width:320px;justify-content:center;margin-top:0}
.app-hero-cta .link-secondary{border-bottom:1px solid transparent;color:#1B7FA7;font-size:14.5px;font-weight:600}
.app-hero-cta .link-secondary:hover{border-bottom-color:#1B7FA7}
.hero-stack{position:relative;width:min(100%,480px);height:340px;margin:0 auto;cursor:pointer;touch-action:manipulation}
.hero-stack:focus,.hero-stack:focus-visible{outline:none}
.hero-stack-card{position:absolute;left:50%;top:50%;width:min(86%,415px);aspect-ratio:16/9;margin:0;overflow:hidden;padding:7px;border-radius:20px;background:#fff;box-shadow:0 22px 46px rgba(12,58,82,.2);transition:transform .66s cubic-bezier(.2,.8,.2,1),opacity .4s ease,filter .4s ease;will-change:transform,opacity}
.hero-stack-card img{width:100%;height:100%;border-radius:14px;object-fit:cover}
.hero-stack-card.pos-0{z-index:4;transform:translate(-46%,-44%) rotate(3deg)}
.hero-stack-card.pos-1{z-index:3;opacity:.88;filter:saturate(.9);transform:translate(-54%,-53%) rotate(-5deg) scale(.95)}
.hero-stack-card.pos-2{z-index:2;opacity:.58;filter:saturate(.78);transform:translate(-49%,-61%) rotate(1deg) scale(.88)}
.hero-stack-card.tucking{z-index:7;opacity:1;filter:saturate(1);transform:translate(-37%,18%) rotate(9deg) scale(.76)}
.hero-stack-card.returning{z-index:1;opacity:.58;filter:saturate(.78);transform:translate(-49%,-61%) rotate(1deg) scale(.88)}
.hero-stack-age{position:absolute;z-index:9;right:0;top:7%;display:grid;width:76px;height:76px;grid-template-rows:max-content max-content;place-items:center;align-content:center;border:4px solid rgba(255,255,255,.88);border-radius:50%;color:#fff;background:#EF9F27;box-shadow:0 14px 26px rgba(12,58,82,.18);text-align:center;transform:rotate(12deg)}
.hero-stack-age strong{display:block;margin:0;font-size:21px;font-weight:900;line-height:1;transform:translateY(2px)}
.hero-stack-age span{display:block;margin:2px 0 0;font-size:10px;font-weight:800;line-height:1;transform:translateY(2px)}
.app-hero-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;border:1px solid rgba(255,255,255,.82);border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(244,250,248,.56));box-shadow:0 14px 34px rgba(12,58,82,.09);backdrop-filter:blur(12px)}
.app-hero-proof-item{padding:15px 22px 14px 30px;border-right:1px solid rgba(12,58,82,.08)}
.app-hero-proof-item:last-child{border-right:0}
.app-hero-proof-kicker{display:block;margin-bottom:3px;color:#0C3A52;font-size:15.5px;font-weight:800;line-height:1.15}
.app-hero-proof-value{display:block;color:#5D7280;font-size:12.5px;font-weight:600;line-height:1.35}

/* Секции по дизайн-системе RU Home.
   .section (галерея, «Об игре») в общем site.css задан с меньшим
   padding-top (clamp(48,8vw,72)), чем .content-section — отступ от
   верха блока до надзаголовка «плавал» между секциями. Выравниваю
   оба класса под единую метрику clamp(56,7vw,80).
   Тот же принцип — на .section-head: раньше у секции отзывов и
   скриншотов был точечный override padding (14px 0 6px вместо общих
   7px 0 3px), из-за чего расстояние от верха блока до эйброу/заголовка
   заметно различалось между секциями. Убран — все заголовки секций
   теперь на одной метрике. Блок скачивания по той же причине лишён
   собственного заниженного padding-top: он единственный «съезжал»
   ближе к верху, а снизу оставался на общей большой метрике, отчего
   расстояния сверху и снизу внутри одной секции визуально не совпадали. */
.section{padding:clamp(56px,7vw,80px) 0}
.content-section{padding:clamp(56px,7vw,80px) 0}
.content-section.is-soft{background:var(--soft)}
.content-section.is-mint{background:var(--mint)}
.section-head{max-width:760px;margin:0 auto 36px;padding:7px 0 3px;text-align:center}
.section-eyebrow{margin:0 0 4px;color:#1D9E75;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.section-head h2{margin:0;font-size:clamp(30px,3.4vw,38px);line-height:1.15}
.section-copy{margin:4px auto 0;color:#5D7280;font-size:16px;line-height:1.65}

.related-card{position:relative;overflow:hidden;border:1px solid rgba(12,58,82,.09);border-radius:20px;background:linear-gradient(180deg,#F8FFFC,#EFFAF6);box-shadow:var(--shadow-card)}
.related-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:#83D8BD}

.related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.related-card{display:flex;align-items:center;gap:13px;padding:20px;background:#fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.related-card:nth-child(2)::before{background:#F5BD75}.related-card:nth-child(3)::before{background:#B9B4F0}.related-card:nth-child(4)::before{background:#ECA2B5}
.related-card:hover{transform:translateY(-4px);border-color:rgba(15,132,101,.28);box-shadow:var(--shadow-hover)}
.related-card img{width:52px;height:52px;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 7px 8px rgba(12,58,82,.14))}
.related-card span{font:800 14px/1.3 'Nunito',sans-serif}

@media(max-width:900px){
  .app-hero{padding-top:40px}
  .app-hero-grid{grid-template-columns:1fr}
  .app-hero-copy{max-width:none;text-align:center}
  .app-hero-brand{flex-direction:column;align-items:center;gap:14px;margin-bottom:28px}
  .app-hero-brand .app-hero-icon{width:84px;height:84px}
  .app-hero-brand .app-hero-title{font-size:clamp(30px,4.4vw,40px)}
  .app-hero-title .tail{margin-top:8px;font-size:clamp(18px,2.2vw,22px)}
  .app-hero-lead{margin-inline:auto}
  .app-hero-badges,.app-hero-cta{justify-content:center}
  .related-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .app-hero-proof{grid-template-columns:1fr}
  .app-hero-proof-item{padding:13px 18px 13px 24px;border-right:0;border-bottom:1px solid rgba(12,58,82,.08)}
  .app-hero-proof-item:last-child{border-bottom:0}
}
@media(max-width:560px){
  .hero-stack{height:285px}.hero-stack-card{width:82%}.hero-stack-age{right:2%;width:62px;height:62px}
  .app-hero-badges{gap:7px;margin-bottom:20px}.app-hero-badge{padding:7px 10px;font-size:11px}
  .app-hero-brand .app-hero-title{font-size:clamp(26px,7vw,34px)}.app-hero-title .tail{font-size:clamp(16px,4.4vw,19px)}
  .related-grid{grid-template-columns:1fr}
  .section,.content-section{padding:44px 0}.section-head{margin-bottom:28px}
}
@media(max-width:430px){
  .app-hero-brand .app-hero-title{font-size:clamp(23px,6.4vw,26px)}
  .app-hero-cta .btn-download{width:100%;justify-content:center;padding:0 24px 0 22px;font-size:18px}
  .app-hero-cta .btn-download-sep{margin:0 8px}
}
@media(prefers-reduced-motion:reduce){.hero-stack-card{transition:none}}

/* =====================================================================
   Оформление блоков и выравнивание по дизайн-системе (вариант cc10):
   блок скачивания, галерея, раскрываемое описание, поверхности, шрифты,
   кнопка «Смотреть все игры».
   ===================================================================== */

/* (1) Блок скачивания — карточка каталога (мятный градиент, акцентная
   полоса, центр, бейджи магазинов в ряд) */
.download-block { background: linear-gradient(180deg, #EDF7F9, #DCEEF2); }
.download-card {
  position: relative;
  display: block;
  overflow: hidden;
  padding: clamp(24px, 3.2vw, 34px);
  border: 1px solid rgba(12, 58, 82, .09);
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(12, 58, 82, .09);
  text-align: center;
}
.download-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: #83D8BD;
}
.download-body { width: 100%; padding-top: 6px; padding-bottom: 2px; }
.download-eyebrow {
  margin: 0 0 4px;
  color: #1D9E75;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.download-title { margin-bottom: 4px; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.download-sub { margin: 0 0 28px; color: #526A78; font-size: 15.5px; font-weight: 600; opacity: 1; }
/* Бейджи магазинов — фиксированная ширина; сколько влезает в ряд, задаёт
   max-width самого КОНТЕЙНЕРА (а не бейджа), центрированного по середине.
   Раньше «N в ряд» не срабатывало: flex-basis в % проигрывал max-width на
   бейдже, тот ужимался и в ряд влезало на один больше — последний бейдж
   уезжал вниз сиротой.
   Число магазинов у приложения бывает разным (2–5), поэтому раскладка
   выбирается по data-n: контейнер сужается только до таких значений, где
   остаток НИКОГДА не равен 1 (2 · 3 · 3+2 · 2+2 · по одному) — при любом N
   нет одинокого бейджа.
   Размер: 168px на десктопе/планшете (высота ≈50px — выше тач-минимума
   48px), на телефоне в один столбец бейдж растягивается до 240px (≈71px,
   крупнее и удобнее для пальца). Бейдж 168px, зазор 18/16px:
   2→354 · 3→540 · 4→726 · 5→912 · 3-в-ряд→536 · 2-в-ряд→352 · моб.→240. */
.download-card .store-buttons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 18px; width: 100%; margin-inline: auto; }
.download-card .store-buttons .store { flex: 0 0 168px; max-width: 168px; min-width: 0; }
.download-card .store-buttons[data-n="2"] { max-width: 354px; }
.download-card .store-buttons[data-n="3"] { max-width: 540px; }
.download-card .store-buttons[data-n="4"] { max-width: 726px; }
.download-card .store-buttons[data-n="5"] { max-width: 912px; }
/* Сужаем ряд, когда полный ряд перестаёт помещаться, — сразу до
   следующей раскладки без остатка-сироты (для каждого N свой момент). */
@media (max-width: 1120px) { .download-card .store-buttons[data-n="5"] { max-width: 536px; gap: 14px 16px; } } /* 5 → 3+2 */
@media (max-width: 880px)  { .download-card .store-buttons[data-n="4"] { max-width: 352px; gap: 14px 16px; } } /* 4 → 2+2 */
/* Один столбец на телефоне — бейдж растягивается до 240px для удобного тапа. */
@media (max-width: 760px)  {
  .download-card .store-buttons[data-n="3"] { max-width: 240px; gap: 12px; } /* 3 → по одному */
  .download-card .store-buttons[data-n="3"] .store { flex: 1 1 240px; max-width: 240px; }
}
@media (max-width: 650px)  {
  .download-card { padding: 22px 20px 20px; }
  .download-card .store-buttons[data-n="5"] { max-width: 240px; gap: 12px; } /* 3+2 → по одному */
  .download-card .store-buttons[data-n="5"] .store { flex: 1 1 240px; max-width: 240px; }
}
@media (max-width: 560px)  {
  .download-card .store-buttons[data-n="4"], .download-card .store-buttons[data-n="2"] { max-width: 240px; gap: 12px; } /* 2+2 / 2 → по одному */
  .download-card .store-buttons[data-n="4"] .store, .download-card .store-buttons[data-n="2"] .store { flex: 1 1 240px; max-width: 240px; }
}

/* (2) Галерея скриншотов */
.shots-head { max-width: 760px; margin: 0 auto 32px; padding: 7px 0 3px; text-align: center; }
.shots-head h2.section-title { margin: 0; font-size: clamp(30px, 3.4vw, 38px); line-height: 1.15; }
.shots-eyebrow {
  display: block;
  margin: 0 0 4px;
  color: #1D9E75;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.shots-lead { max-width: 640px; margin: 4px auto 0; color: #526A78; font-size: 16px; font-weight: 600; line-height: 1.65; }
.gallery-frame {
  --chip: #83D8BD;
  --chip-strong: #0F8465;
  position: relative;
  padding: 18px 12px 2px;
  overflow: hidden;
  border: 1px solid rgba(12, 58, 82, .09);
  border-radius: 18px;
  background: linear-gradient(180deg, #F8FFFC, #EFFAF6);
  box-shadow: 0 14px 30px rgba(12, 58, 82, .09);
}
.gallery-frame::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--chip); }
.gallery-frame .sc-shell { width: 100%; margin: 0; overflow: visible; padding: 0 0 54px; --carousel-gap: 12px; }
.gallery-frame .sc-slide { padding: 5px; }
.gallery-frame .sc-slide img { border-radius: 12px; box-shadow: 0 10px 22px rgba(12, 58, 82, .16); }
.gallery-frame .sc-arrow {
  display: grid;
  place-items: center;
  top: auto;
  bottom: 11px;
  width: 32px;
  height: 32px;
  color: var(--chip-strong);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(15, 132, 101, .28);
  border-radius: 50%;
  font-size: 0;
  line-height: 1;
  text-shadow: none;
  opacity: .78;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.gallery-frame .sc-arrow::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
}
.gallery-frame .sc-arrow-left::before { transform: translate(calc(-50% + 1px), -50%) rotate(135deg); }
.gallery-frame .sc-arrow-right::before { transform: translate(calc(-50% - 1px), -50%) rotate(-45deg); }
.gallery-frame .sc-arrow:hover { transform: translateY(-1px); border-color: var(--chip-strong); background: #fff; opacity: 1; }
.gallery-frame .sc-arrow-left { left: calc(50% - 125px); }
.gallery-frame .sc-arrow-right { right: calc(50% - 125px); }
.gallery-frame .sc-dots { bottom: 22px; gap: 9px; }
.gallery-frame .sc-dots button {
  width: 9px;
  height: 9px;
  border: 1px solid var(--chip-strong);
  background: transparent;
  opacity: .35;
  transition: width .2s ease, opacity .18s ease, background .18s ease;
}
.gallery-frame .sc-dots button.active { width: 24px; border-radius: 999px; background: var(--chip-strong); opacity: 1; }
@media (max-width: 767px) {
  .gallery-frame { padding: 15px 10px 0; }
  .gallery-frame .sc-shell { --carousel-gap: 10px; --slides-visible: 1; }
  .gallery-frame .sc-slide { padding: 3px; }
  .gallery-frame .sc-slide img { box-shadow: 0 8px 18px rgba(12, 58, 82, .14); }
  .gallery-frame .sc-arrow-left { left: 4px; }
  .gallery-frame .sc-arrow-right { right: 4px; }
}

/* (3) Раскрываемый блок описания «Об игре» */
.app-desc-head { max-width: 720px; margin: 0 auto 28px; padding: 7px 0 3px; text-align: center; }
.app-desc-eyebrow {
  display: block;
  margin: 0 0 4px;
  color: #1D9E75;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.app-desc-title { margin: 0; color: #0C3A52; font-size: clamp(26px, 3.2vw, 34px); font-weight: 900; line-height: 1.15; letter-spacing: -.01em; }
.app-desc-inner { max-width: 720px; margin-inline: auto; }
.app-desc-copy { display: grid; gap: 20px; }
.app-desc-copy p,
.app-desc-more p { margin: 0; color: #0C3A52; font-size: 17.5px; font-weight: 600; line-height: 1.66; opacity: .82; }
.app-desc-more {
  display: grid;
  gap: 20px;
  overflow: hidden;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height .42s ease, opacity .28s ease, transform .28s ease, margin-top .42s ease;
}
.app-desc-more.is-open { margin-top: 20px; max-height: 900px; opacity: 1; transform: translateY(0); }
.app-desc-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin: 4px 0 2px;
  padding: 0;
  list-style: none;
}
.app-desc-list li { position: relative; padding-left: 22px; color: #0C3A52; font-size: 15.5px; font-weight: 700; line-height: 1.4; }
.app-desc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #1D9E75;
  box-shadow: 0 0 0 4px rgba(29, 158, 117, .14);
}
.app-desc-cta { margin-top: 24px; text-align: center; }
.app-desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(12, 58, 82, .1);
  border-radius: 999px;
  padding: 12px 22px;
  background: #fff;
  color: #1D9E75;
  box-shadow: 0 6px 20px rgba(12, 58, 82, .06);
  font-family: 'Nunito', sans-serif;
  font-size: 14.5px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.app-desc-toggle:hover { transform: translateY(-1px); border-color: rgba(29, 158, 117, .4); box-shadow: 0 10px 24px rgba(12, 58, 82, .1); }
.app-desc-toggle svg { width: 16px; height: 16px; transition: transform .25s ease; }
.app-desc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (max-width: 560px) {
  .app-desc-list { grid-template-columns: 1fr; }
  .app-desc-copy p, .app-desc-more p { font-size: 16.5px; }
}

/* (4) Поверхности секций — контраст между блоками по дизайн-системе.
   Ритм: hero(светлый) → скрины(белый) → описание(мята) →
          польза(белый) → скачать(мягкий циан, акцент CTA) → ещё игры(мята) */
.app-desc { background: #EEF7F6; }
.content-section.is-soft { background: #FAFCFC; }

/* (5) Шрифты — две гарнитуры по design-system.css: Inter — текстовые
   абзацы; Nunito — заголовки, предзаголовки, кнопки/CTA, кикеры. */
body { font-family: 'Inter', sans-serif; }
h1, h2, h3 { font-family: 'Nunito', sans-serif; }
.section-eyebrow,
.shots-eyebrow,
.app-desc-eyebrow,
.download-eyebrow {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1D9E75;
}
/* site.css .section-head p (600/16px/opacity.6, специфичность 0,1,1)
   перебивало не только вес/размер eyebrow'ов внутри .section-head, но и
   margin (margin:8px 0 0) — эйброу «Отзывы»/«Ещё игры» получали на 8px
   больше отступа сверху блока, чем остальные секции. Фиксируем margin
   здесь же, с нужной специфичностью 0,2,0 — возвращаем единый вид. */
.section-head .section-eyebrow {
  margin: 0 0 4px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  opacity: 1;
}
.btn-download,
.app-hero-proof-kicker { font-family: 'Nunito', sans-serif; }
.section-head h2,
.download-title,
.shots-head h2.section-title,
.app-desc-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
}

/* (6) Кнопка «Смотреть все игры» — btn-primary дизайн-системы */
.related-cta { margin-top: 42px; text-align: center; }
.btn-showall {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 30px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #2188AF, #1B7FA7);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 16px 32px rgba(29, 122, 158, .32), 0 4px 0 rgba(12, 58, 82, .07);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-showall:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 38px rgba(29, 122, 158, .38), 0 4px 0 rgba(12, 58, 82, .06);
}
.btn-showall svg { width: 18px; height: 18px; }

/* =====================================================================
   (7) БЛОК ОТЗЫВОВ — карточки в едином для всего сайта виде: разметка в
   assets/partials/review-cards.php, форма в assets/css/reviews.css (тот
   же файл подключает и главная). Здесь остаётся только фон секции —
   специфичный для деталки; сами карточки не переопределяем.
   ===================================================================== */
.content-section.reviews { background: #FAFCFC; }