/* =========================================================
   HD Downloaders — Premium Trust Catalog
   Graphite + Amber + Stone design system
   ========================================================= */

/* -------------------------------------------------------
   1. Tokens
   ------------------------------------------------------- */
:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-soft: #FFF9F2;
  --surface-faint: #F7F4EE;

  --text-main: #1A1A17;
  --text-muted: #5E5A51;
  --text-soft: #8A8378;

  --border: #D7D0C2;
  --border-soft: #E6DED0;

  --accent: #E96F02;
  --accent-hover: #B85802;
  --accent-soft: #FCE9D9;

  --dark-section: #1B1B18;
  --hero-bg: #0A0907;
  --dark-surface: #26241F;
  --dark-border: #38352C;
  --dark-text-main: #F6F3EC;
  --dark-text-muted: #B4AC9C;

  --success: #228521;
  --warning: #E96F02;
  --danger: #B94A3A;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --radius-card: 12px;
  --radius-control: 8px;
  --radius-small: 8px;

  --shadow-sm: 0 1px 2px rgba(26, 26, 23, .06);
  --shadow-md: 0 8px 22px rgba(26, 26, 23, .08);

  --container: 1200px;
  --content-readable: 760px;

  --font-heading: "Plus Jakarta Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Inter, "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --header-h: 64px;
}

/* -------------------------------------------------------
   2. Reset and base
   ------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-main);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Scroll lock (mobile menu, gallery lightbox) is applied via inline styles from
   public/assets/js/main.js:lockScroll() - position:fixed instead of overflow:hidden, since
   overflow:hidden on body breaks .site-header's position:sticky. */

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.9rem, 1.5rem + 2vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
h3 { font-size: 1.15rem; color: #474747; }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; }

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, select, textarea, button {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0;
  top: -100px;
  background: var(--accent);
  color: var(--text-main);
  padding: .75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
  transition: top .15s ease;
}

.skip-link:focus {
  top: 0;
}

/* -------------------------------------------------------
   3. Layout utilities
   ------------------------------------------------------- */
.container {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .container {
    width: min(100% - 64px, var(--container));
  }
}

.content-readable {
  max-width: var(--content-readable);
  max-width: 74ch;
}

.about-with-image {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.about-with-image__text {
  /* flex-grow:0 - .content-readable внутри уже ограничивает текст 74ch, растягивать сам
     flex-item дальше этого не нужно, иначе между концом текста и картинкой справа остаётся
     пустая полоса (flex-item рос, видимый текст внутри - нет). */
  flex: 0 1 auto;
  min-width: 0;
}

.about-with-image__figure {
  flex: 0 0 190px;
  width: 190px;
  /* ~50% высоты прежнего варианта (было 422px на этой ширине при родном 720x1600 скрине) -
     по прямому запросу пользователя, ширина не менялась. object-fit:cover на img ниже
     кадрирует картинку под эту высоту вместо сжатия/растяжения. */
  height: 211px;
}

/* img's actual parent is <button class="article-figure__trigger">, not this div directly -
   height:100% on the img resolves against the button's own height, which is "auto" (sized by
   its content, i.e. the image) without this rule, so the percentage silently falls back to the
   image's natural height instead of the intended crop height. Found 2026-07-28 - the fix above
   alone had no visible effect until this was added too. */
.about-with-image__figure .article-figure__trigger {
  display: block;
  height: 100%;
}

.about-with-image__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  display: block;
}

@media (max-width: 800px) {
  .about-with-image {
    flex-direction: column;
  }

  .about-with-image__figure {
    width: 100%;
    flex-basis: auto;
  }
}

main {
  display: block;
}

.section {
  padding-block: clamp(2.5rem, 2rem + 2vw, 4.5rem);
}

.section--tight {
  padding-block: clamp(1.75rem, 1.5rem + 1vw, 2.75rem);
}

.section--surface-soft {
  background: var(--surface-soft);
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.75rem;
}

.section-header__title {
  margin: 0;
}

.section-header__eyebrow {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: .4rem;
}

.section-header__desc {
  color: var(--text-muted);
  max-width: 60ch;
  margin: .4rem 0 0;
}

.section-header__link {
  font-weight: 600;
  color: var(--text-main);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  padding-bottom: 2px;
}

.section-header__link:hover {
  color: var(--accent-hover);
  border-color: var(--accent-hover);
}

.grid {
  display: grid;
  gap: 1.25rem;
}

.grid--apps {
  grid-template-columns: repeat(1, 1fr);
}

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

@media (min-width: 1024px) {
  .grid--apps { grid-template-columns: repeat(4, 1fr); }
}

.grid--3 {
  grid-template-columns: repeat(1, 1fr);
}

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

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

.grid--2 {
  grid-template-columns: repeat(1, 1fr);
}

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

.grid--facts {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .grid--facts { grid-template-columns: repeat(4, 1fr); }
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* -------------------------------------------------------
   4. Header and navigation
   ------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dark-section);
  border-bottom: 1px solid var(--dark-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: var(--header-h);
}

@media (min-width: 480px) {
  .site-header__inner {
    gap: 1.5rem;
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .95rem;
  color: var(--dark-text-main);
  flex-shrink: 0;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .logo {
    gap: .55rem;
    font-size: 1.1rem;
  }
}

.logo__mark {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  gap: .25rem;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  font-weight: 600;
  color: var(--dark-text-muted);
  white-space: nowrap;
}

.site-nav__link:hover {
  color: var(--dark-text-main);
  background: var(--dark-surface);
}

.site-nav__link[aria-current="page"] {
  color: var(--accent);
}

.header-spacer {
  flex: 1 1 auto;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--dark-text-main);
}

.icon-btn:hover {
  background: var(--dark-surface);
  border-color: var(--dark-border);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

.language-menu {
  position: relative;
  display: inline-block;
}

.language-menu__btn {
  position: relative;
  z-index: 21;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  padding: 0 .6rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--dark-text-main);
  font-weight: 600;
  font-size: .85rem;
}

.language-menu__btn:hover {
  background: var(--dark-surface);
  border-color: var(--dark-border);
}

.language-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: rgba(15, 14, 12, .45);
  display: none;
}

.language-menu[data-open="true"] .language-menu__backdrop {
  display: block;
}

.language-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: .4rem;
  min-width: 160px;
  display: none;
  flex-direction: column;
}

.footer-brand .language-menu__panel {
  right: auto;
  left: 0;
}

.language-menu[data-open="true"] .language-menu__panel {
  display: flex;
}

.language-menu__option {
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  color: var(--dark-text-muted);
  text-align: left;
  background: none;
  border: none;
  width: 100%;
}

.language-menu__option:hover {
  background: rgba(255,255,255,.06);
  color: var(--dark-text-main);
}

.language-menu__option[aria-current="true"] {
  color: var(--accent);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown__btn {
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  gap: .3rem;
}

.nav-dropdown__btn svg {
  transition: transform .15s ease;
}

.nav-dropdown[data-open="true"] .nav-dropdown__btn svg {
  transform: rotate(180deg);
}

.nav-dropdown__backdrop {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: transparent;
  display: none;
}

.nav-dropdown[data-open="true"] .nav-dropdown__backdrop {
  display: block;
}

.nav-dropdown__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: none;
  gap: 1.75rem;
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 1.1rem 1.25rem;
  min-width: 480px;
}

.nav-dropdown[data-open="true"] .nav-dropdown__panel {
  display: flex;
}

.nav-dropdown__col {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 130px;
}

.nav-dropdown__heading {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dark-text-muted);
  margin-bottom: .5rem;
}

.nav-dropdown__col a {
  padding: .4rem .5rem;
  margin: 0 -.5rem;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  color: var(--dark-text-main);
}

.nav-dropdown__col a:hover {
  background: rgba(255,255,255,.06);
  color: var(--accent);
}

.menu-toggle {
  display: inline-flex;
}

.menu-toggle__icon--close {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close {
  display: block;
}

@media (min-width: 1120px) {
  .menu-toggle {
    display: none;
  }
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  top: var(--header-h);
  background: var(--dark-section);
  z-index: 90;
  padding: 1.25rem;
  overflow-y: auto;
  display: none;
}

.mobile-menu[data-open="true"] {
  display: block;
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.mobile-menu__link {
  display: block;
  padding: .9rem .5rem;
  border-bottom: 1px solid var(--dark-border);
  color: var(--dark-text-main);
  font-weight: 600;
  font-size: 1.02rem;
}

.mobile-menu__link[aria-current="page"] {
  color: var(--accent);
}

@media (min-width: 1120px) {
  .site-nav { display: block; }
  .mobile-menu { display: none !important; }
}

/* Search popover */
.search-popover {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(15, 14, 12, .55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 1rem;
}

.search-popover[data-open="true"] {
  display: flex;
}

.search-popover__panel {
  position: relative;
  background: var(--surface);
  width: min(100%, 640px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.25rem;
}

.search-popover__form {
  display: flex;
  gap: .5rem;
}

.search-popover__input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .8rem .9rem;
  font-size: 1rem;
  background: var(--bg);
}

.search-popover__hint {
  margin-top: .85rem;
  font-size: .85rem;
  color: var(--text-soft);
}

.search-popover__close {
  position: absolute;
  top: -52px;
  right: 0;
  background: var(--surface);
  color: var(--text-main);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.search-popover__close:hover {
  background: var(--surface-soft);
}

/* Affiliate popover - альтернативные приложения плиткой (partials/affiliate-popover.blade.php),
   вместо мелкого вертикального списка ссылок - по прямому запросу пользователя 2026-08-03. */
.affiliate-alt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: .75rem;
}

.affiliate-alt-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1rem .75rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-main);
  transition: box-shadow .15s ease, border-color .15s ease;
}

.affiliate-alt-tile:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--accent);
}

.affiliate-alt-tile__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.affiliate-alt-tile__name {
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Screenshot gallery */
.screenshot-strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .4rem;
}

.screenshot-thumb {
  flex: 0 0 150px;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 0;
  background: none;
  cursor: zoom-in;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.screenshot-thumb:hover {
  border-color: var(--text-soft);
  box-shadow: var(--shadow-sm);
}

.screenshot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(15, 14, 12, .88);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem 4.5rem;
}

.gallery-lightbox[data-open="true"] {
  display: flex;
}

.gallery-lightbox__panel {
  position: relative;
  max-width: min(90vw, 420px);
  max-height: 100%;
}

.gallery-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin: 0 auto;
}

.gallery-lightbox__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
}

.gallery-lightbox__close:hover {
  background: rgba(255, 255, 255, .16);
}

.gallery-lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox__nav:hover {
  background: rgba(255, 255, 255, .16);
}

.gallery-lightbox__nav--prev { left: 1rem; }
.gallery-lightbox__nav--next { right: 1rem; }

.gallery-lightbox__counter {
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .75);
  font-size: .82rem;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .gallery-lightbox {
    padding: 1.5rem 1rem;
  }
  .gallery-lightbox__nav--prev { left: .4rem; }
  .gallery-lightbox__nav--next { right: .4rem; }
}

/* -------------------------------------------------------
   5. Hero system
   ------------------------------------------------------- */
.hero {
  background: var(--hero-bg);
  /* Мобильный вариант по умолчанию (экономия трафика), десктопный - через media query ниже, см.
     App\Support\ImageThumbnail - оба варианта передаются через CSS custom properties, т.к.
     background-image не поддерживает srcset. */
  background-image: var(--bg-mobile, var(--bg-desktop));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--dark-text-main);
  position: relative;
  padding-block: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  overflow: visible;
}

@media (min-width: 641px) {
  .hero { background-image: var(--bg-desktop); }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cline x1='0.5' y1='0' x2='0.5' y2='64' stroke='%23E96F02' stroke-opacity='0.035' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
}

.hero__inner {
  position: relative;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  font-size: .82rem;
  margin-bottom: 1.25rem;
  color: var(--dark-text-muted);
}

.hero .breadcrumbs { color: var(--dark-text-muted); }

.app-hero-card .breadcrumbs {
  color: var(--text-soft);
  margin-bottom: 1rem;
}

.app-hero-card .breadcrumbs a:hover {
  color: var(--accent-hover);
}

.breadcrumbs a {
  color: inherit;
}

.breadcrumbs a:hover {
  color: var(--accent);
}

.breadcrumbs__sep {
  color: var(--text-soft);
}

.hero-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  background: rgba(233,111,2,.12);
  border: 1px solid rgba(233,111,2,.3);
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
}

.hero h1 {
  color: var(--dark-text-main);
  max-width: 35ch;
}

/* Страница 404 (resources/views/errors/404.blade.php) - крупная цифра рядом с eyebrow-бейджем,
   сам код ошибки уже назван текстом в бейдже, поэтому здесь aria-hidden. */
.error-404-code {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(4rem, 12vw, 7.5rem);
  line-height: 1;
  color: var(--accent);
  margin: 0 0 .25rem;
}

.hero__subtitle {
  color: var(--dark-text-muted);
  max-width: 62ch;
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}

.hero--editorial h1 {
  max-width: 22ch;
}

.hero-identity {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .hero-identity {
    flex-direction: column;
    text-align: center;
  }

  .hero-identity .hero__subtitle {
    margin-left: auto;
    margin-right: auto;
  }
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.hero--home {
  padding-block: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  background-color: var(--hero-bg);
}

@media (max-width: 767px) {
  .hero--home::before {
    display: none;
  }
}

@media (min-width: 768px) {
  .hero--home {
    background-image: url("../img/hero/hero-basketball-desktop.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
  }

  .hero--home h1,
  .hero--home .hero__subtitle,
  .hero--home .hero-cta-row,
  .hero--home .trust-chips {
    max-width: 560px;
  }
}

.trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--dark-text-main);
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  padding: .45rem .8rem;
  border-radius: var(--radius-pill);
}

.trust-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
}

.hero-chip {
  font-size: .82rem;
  font-weight: 600;
  color: var(--dark-text-muted);
  border: 1px solid var(--dark-border);
  padding: .4rem .8rem;
  border-radius: var(--radius-pill);
}

.hero-chip[aria-current="true"] {
  color: var(--text-main);
  background: var(--accent);
  border-color: var(--accent);
}

/* App hero card */
.app-hero-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.25rem;
  color: var(--text-main);
}

.app-hero-card .btn {
  border-radius: var(--radius-control);
}

.app-hero-card__icon.app-icon {
  width: 112px;
  height: 112px;
  border-radius: var(--radius-control);
  flex-shrink: 0;
}

.app-hero-card__name-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 .2rem;
}

.app-hero-card__name {
  margin: 0;
  max-width: none;
  color: var(--text-main);
}

.hero .app-hero-card__name {
  color: var(--text-main);
}

.app-hero-card__dev {
  color: var(--text-muted);
  font-size: .9rem;
  margin-bottom: .35rem;
}

.app-hero-card__dev a:hover { color: var(--accent-hover); }

.app-hero-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-bottom: 1rem;
  font-size: .85rem;
  color: var(--dark-text-muted);
}

.app-hero-card__meta strong {
  color: var(--dark-text-main);
}

.app-hero-card__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.app-hero-card__actions--secondary {
  margin-top: .55rem;
}

.app-hero-card__screenshots {
  grid-column: 1 / -1;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border-soft);
}

.app-hero-card__screenshots .section-header {
  margin-bottom: 1rem;
}

.app-hero-card__screenshots .section-header__title {
  color: var(--text-main);
}

/* #screens-title - div, не h2 (см. apps/show.blade.php), но должен выглядеть как остальные
   заголовки секций (h1,h2,h3,h4 { ... } выше) - по прямому запросу пользователя 2026-07-16. */
#screens-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

@media (min-width: 560px) {
  .app-hero-card__actions { grid-column: 2 / -1; }
}

@media (max-width: 559px) {
  .app-hero-card {
    gap: .5rem .75rem;
    align-items: start;
  }

  .app-hero-card .breadcrumbs {
    margin-bottom: .75rem;
  }

  .app-hero-card__name {
    font-size: 1.3rem;
  }

  .app-hero-card__name-row {
    margin-bottom: .15rem;
  }

  .app-hero-card__name-row .info-badge {
    width: 20px;
    height: 20px;
  }

  .app-hero-card__name-row .info-badge svg {
    width: 12px;
    height: 12px;
  }

  .app-hero-card__dev {
    font-size: .82rem;
    margin-bottom: .3rem;
  }

  .app-hero-card__dev .info-badge {
    width: 20px;
    height: 20px;
  }

  .app-hero-card__dev .info-badge svg {
    width: 12px;
    height: 12px;
  }

  .app-hero-card .badge {
    font-size: .66rem;
    padding: .2rem .5rem;
  }

  .app-hero-card .rating {
    font-size: .8rem;
  }
}

/* Info tooltip badge (hero verification badges) */
.info-badge-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.info-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(233, 111, 2, .16);
  color: var(--accent);
  border: none;
  padding: 0;
  cursor: help;
}

.info-badge svg {
  width: 16px;
  height: 16px;
}

.info-badge:hover,
.info-badge:focus-visible {
  background: rgba(233, 111, 2, .32);
}

.info-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark-surface);
  color: var(--dark-text-main);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-sm);
  padding: .55rem .7rem;
  font-size: .76rem;
  line-height: 1.4;
  width: max-content;
  max-width: 210px;
  box-shadow: var(--shadow-md);
  display: none;
  z-index: 25;
  text-align: left;
  pointer-events: none;
}

.info-badge-wrap:hover .info-tooltip,
.info-badge-wrap:focus-within .info-tooltip {
  display: block;
}

.info-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--dark-border);
}

/* Hero fact chip row */
.hero-fact-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
  margin: .75rem 0;
}

@media (min-width: 560px) {
  .hero-fact-row { grid-template-columns: repeat(5, 1fr); }
}

.hero-fact {
  background: var(--surface-faint);
  border: 1px solid #EFDCCA;
  border-radius: var(--radius-control);
  padding: .5rem .6rem;
}

.hero-fact__label {
  display: block;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-soft);
  margin-bottom: .25rem;
}

.hero-fact__value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .92rem;
  color: var(--text-main);
}

.hero-fact__sub {
  display: block;
  font-size: .66rem;
  color: var(--text-soft);
  margin-top: .15rem;
}

.btn--lg {
  width: 100%;
  min-height: 50px;
  font-size: .95rem;
  justify-content: center;
  gap: .6rem;
}

.btn__meta {
  font-weight: 600;
  opacity: .8;
  font-size: .85rem;
}

/* Spec card (categorized app specs) */
.spec-group {
  margin-bottom: 1.75rem;
}

.spec-group:last-child {
  margin-bottom: 0;
}

.spec-group__title {
  font-size: 1.15rem;
  margin-bottom: .9rem;
  color: #474747;  
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: .85rem;
}

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

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

.spec-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: .85rem 1rem;
}

.spec-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.spec-card__icon svg {
  width: 19px;
  height: 19px;
}

.spec-card__icon svg path,
.spec-card__icon svg rect,
.spec-card__icon svg circle,
.spec-card__icon svg ellipse,
.trust-card__icon svg path,
.trust-card__icon svg rect,
.trust-card__icon svg circle,
.step-card__number svg path,
.step-card__number svg rect,
.step-card__number svg circle {
  stroke-width: 2.2;
}

.spec-card__body {
  min-width: 0;
}

.spec-card__label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-soft);
  font-weight: 600;
  margin-bottom: .15rem;
}

.spec-card__value {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.spec-card__value a {
  color: var(--accent);
  text-decoration: underline;
}

/* Reviewer byline */
.reviewer-byline {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.reviewer-byline__label {
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-soft);
}

.reviewer-byline__name {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  color: var(--text-main);
}

.reviewer-byline__name:hover {
  color: var(--accent-hover);
}

.reviewer-byline__role {
  display: block;
  font-size: .82rem;
  color: var(--text-muted);
}

/* Badges & ratings live here so hero can use them */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .76rem;
  font-weight: 700;
  padding: .25rem .6rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.badge--verified {
  background: rgba(143,188,90,.18);
  color: #8FBC5A;
}

.badge--warning {
  background: rgba(233,111,2,.15);
  color: var(--accent);
}

.badge--muted {
  background: rgba(255,255,255,.08);
  color: var(--dark-text-muted);
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 700;
  font-size: .92rem;
}

.rating__star {
  color: var(--accent);
}

.rating--light { color: var(--dark-text-main); }
.rating--dark { color: var(--text-main); }

/* -------------------------------------------------------
   6. Buttons
   ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: .92rem;
  border: 1px solid transparent;
  white-space: nowrap;
  font-family: inherit;
  cursor: pointer;
}

.download-form {
  display: contents;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn--primary {
  background: var(--accent);
  color: var(--text-main);
}

.btn--primary:hover {
  background: var(--accent-hover);
}

.btn--primary.btn--lg,
.btn--primary.btn--text-white {
  color: #FFFFFF;
}

.btn--secondary {
  background: transparent;
  color: var(--dark-text-main);
  border-color: var(--dark-border);
}

.btn--secondary:hover {
  background: var(--dark-surface);
}

.btn--on-light {
  color: var(--text-main);
  border-color: var(--border);
}

.btn--on-light:hover {
  background: var(--surface-soft);
}

.btn--ghost {
  background: transparent;
  color: var(--text-main);
  border-color: var(--border);
}

.btn--ghost:hover {
  background: var(--surface-soft);
}

.btn--sm {
  min-height: 36px;
  padding: 0 .9rem;
  font-size: .82rem;
}

.btn--light-secondary {
  min-height: 44px;
  padding: 0 1rem;
  font-size: .82rem;
  font-weight: 600;
  border-color: var(--border-soft);
}

.btn--light-secondary:hover {
  border-color: var(--border);
}

.btn--block {
  width: 100%;
}

/* Ask-AI buttons (после FAQ на странице приложения) */
.ask-ai {
  margin-top: 2rem;
  text-align: center;
}

.ask-ai__label {
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 1rem;
}

.ask-ai__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

.ask-ai__btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: 0 1.15rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: .88rem;
  color: #FFFFFF;
  white-space: nowrap;
  transition: filter .15s ease;
}

.ask-ai__btn:hover {
  filter: brightness(1.08);
}

.ask-ai__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ask-ai__btn--chatgpt { background: #10A37F; }
.ask-ai__btn--perplexity { background: #20808D; }
.ask-ai__btn--google-ai { background: #4285F4; }
.ask-ai__btn--grok { background: #0B0B0B; }
.ask-ai__btn--claude { background: #C15F3C; }

/* Сетка иконок способов оплаты / провайдеров игр */
.icon-grid-block__label {
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 1rem;
}

.icon-grid-block__label--mt {
  margin-top: 2rem;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .75rem;
}

.icon-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: .75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.icon-grid__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.icon-grid__item--text {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-soft);
  text-align: center;
  line-height: 1.3;
}

/* Некоторые логотипы провайдеров - однотонная белая заливка (сделаны под тёмный фон), на
   стандартной светлой карточке icon-grid__item невидимы - тёмная подложка вместо белой. */
.icon-grid__item--dark {
  background: var(--dark-section);
  border-color: transparent;
}

/* -------------------------------------------------------
   7. Cards
   ------------------------------------------------------- */
.app-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.app-card__stretched-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.app-card__dev-link,
.app-card .btn {
  position: relative;
  z-index: 2;
}

.app-card__dev-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.app-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--text-soft);
}

.app-card__top {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}

.app-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  color: #fff;
  font-size: 1.1rem;
  object-fit: cover;
  background-color: var(--surface-soft);
}

.app-icon--sm { width: 40px; height: 40px; font-size: .9rem; border-radius: var(--radius-sm); }
.app-icon--lg { width: 76px; height: 76px; font-size: 1.6rem; }

.app-card__name {
  margin: 0;
  font-size: 1rem;
}

.app-card__meta {
  font-size: .82rem;
  color: var(--text-soft);
}

.app-card__info {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.app-card--lg .app-card__name {
  font-size: 1.15rem;
}

.app-card__info .rating {
  font-size: .88rem;
  margin: 0;
}

.app-card__info .rating .text-soft {
  font-size: .74rem;
  font-weight: 500;
}

.app-card__desc {
  font-size: .88rem;
  color: var(--text-muted);
  flex-grow: 1;
}

.app-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  font-size: .8rem;
  color: var(--text-muted);
}

.app-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
  padding-top: .3rem;
}

.app-card--compact {
  flex-direction: row;
  align-items: center;
  padding: .65rem .8rem;
  gap: .75rem;
}

.app-card--compact .app-card__top {
  align-items: center;
  flex: 1;
  min-width: 0;
}

.app-card--compact .app-icon--sm {
  width: 52px;
  height: 52px;
  font-size: 1.05rem;
  border-radius: var(--radius-md);
}

.app-card--compact .app-card__name {
  font-size: .92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-card--compact .rating {
  flex-shrink: 0;
  font-size: .82rem;
}

.app-card--featured {
  position: relative;
  border-color: var(--accent);
}

.app-card__ribbon {
  position: absolute;
  top: .85rem;
  right: .85rem;
  background: var(--accent);
  color: var(--text-main);
  font-size: .68rem;
  font-weight: 800;
  padding: .2rem .55rem;
  border-radius: var(--radius-sm);
}

/* Promo cards — "Top downloads" featured top-3 */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.25rem;
}

@media (min-width: 720px) {
  .promo-grid { grid-template-columns: repeat(3, 1fr); }
}

.promo-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.promo-card__banner {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background-color: var(--dark-section);
  /* См. .hero выше - мобильный/десктопный варианты через CSS custom properties. */
  background-image: var(--bg-mobile, var(--bg-desktop));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 641px) {
  .promo-card__banner { background-image: var(--bg-desktop); }
}

.promo-card__badge {
  position: absolute;
  top: .7rem;
  left: .7rem;
  background: rgba(15, 14, 12, .7);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: .3rem .65rem;
  border-radius: var(--radius-pill);
}

.promo-card__body {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.1rem 1.25rem;
  flex: 1;
}

.promo-card__headline {
  font-size: 1rem;
  margin: 0 0 .4rem;
}

.promo-card__headline a {
  color: inherit;
}

.promo-card__headline a:hover {
  color: var(--accent-hover);
}

.promo-card__desc {
  font-size: .85rem;
  color: var(--text-muted);
  margin: 0;
  flex: 1;
}

.promo-card__app {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border-soft);
}

.promo-card__app-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.promo-card__app-name {
  font-weight: 700;
  font-size: .88rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promo-card__app-name:hover {
  color: var(--accent-hover);
}

.promo-card__app-meta {
  display: block;
  font-size: .74rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promo-card__app-meta .rating {
  font-size: .74rem;
  font-weight: 700;
  gap: .2rem;
}

/* Article card — editorial listing (articles.html) */
.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.article-card:hover {
  border-color: var(--text-soft);
  box-shadow: var(--shadow-sm);
}

.article-card__image {
  display: block;
  aspect-ratio: 16 / 10;
  /* См. .hero выше - мобильный/десктопный варианты через CSS custom properties. */
  background-image: var(--bg-mobile, var(--bg-desktop));
  background-size: cover;
  background-position: center;
}

@media (min-width: 641px) {
  .article-card__image { background-image: var(--bg-desktop); }
}

.article-card__body {
  padding: 1.1rem 1.25rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.article-card__tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent-hover);
  background: var(--accent-soft);
  padding: .2rem .55rem;
  border-radius: var(--radius-pill);
  margin-bottom: .65rem;
}

.article-card__title {
  margin: 0 0 .5rem;
  font-size: 1.05rem;
  line-height: 1.35;
}

.article-card__title a {
  color: var(--text-main);
  position: relative;
  z-index: 2;
}

.article-card__excerpt {
  margin: 0 0 1rem;
  font-size: .88rem;
  color: var(--text-muted);
}

.article-card__byline {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--text-soft);
  margin-top: auto;
}

.article-card__byline img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}

/* Rank list — dense ranked rows in a single bordered panel */
.rank-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

/* Табличный вид в одну строку (rank/icon/текст/кнопка), по прямому запросу пользователя
   2026-07-20 - раньше кнопка и доп. строка meta (версия/размер/Android) переносились под
   основной блок, из-за чего строка "рассыпалась" на 2-3 визуальных яруса вместо ровной таблицы.
   meta (размер/версия Android) убрана целиком - на компактной строке ей физически не хватало
   места; rank_reason остаётся - это редакционная ценность ранжирования, не служебная деталь. */
.rank-row {
  display: grid;
  grid-template-columns: 20px 44px 1fr;
  grid-template-areas:
    "rank icon head"
    "actions actions actions";
  gap: .6rem .7rem;
  padding: 1.1rem;
  border-top: 1px solid var(--border-soft);
}

.rank-row:first-child {
  border-top: none;
}

.rank-row__rank {
  grid-area: rank;
  align-self: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text-soft);
}

.rank-row .app-icon {
  grid-area: icon;
  align-self: center;
  width: 44px;
  height: 44px;
}

.rank-row__head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .3rem;
  min-width: 0;
}

.rank-row__name {
  font-weight: 700;
  font-size: .98rem;
  margin: 0;
}

.rank-row__reason {
  font-size: .85rem;
  color: var(--text-muted);
  margin: 0;
}

.rank-row__actions {
  grid-area: actions;
  display: flex;
  justify-content: center;
}

.rank-row__actions .btn {
  width: 100%;
}

@media (min-width: 640px) {
  .rank-row {
    grid-template-columns: 24px 52px 1fr auto;
    grid-template-areas: "rank icon head actions";
    align-items: center;
  }

  .rank-row .app-icon {
    width: 52px;
    height: 52px;
  }

  .rank-row__actions {
    justify-content: flex-end;
  }

  .rank-row__actions .btn {
    width: auto;
  }
}

/* App list — compact single-panel list for related/alternative apps */
.app-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.app-list__row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--border-soft);
}

/* Двойной класс - специфичность выше, чем у .article a { text-decoration: underline; }
   (0,1,1), иначе подчёркивание "просачивается" на этот блок внутри статей/обзоров
   (RichEditor custom-блок app_list). */
.app-list .app-list__row {
  text-decoration: none;
}

.app-list__row:first-child {
  border-top: none;
}

.app-list__row:hover {
  background: rgba(233, 111, 2, .05);
}

.app-list__name {
  font-size: .9rem;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-list__tag {
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  padding: .15rem .55rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.app-list__facts {
  display: flex;
  gap: .6rem;
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .app-list__row {
    flex-wrap: wrap;
  }
  .app-list__facts {
    flex-basis: 100%;
    padding-left: calc(40px + .75rem);
    gap: .5rem;
    order: 1;
  }
}

/* Fact / stat card */
.fact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.fact-card__label {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-soft);
  margin-bottom: .3rem;
  font-weight: 600;
}

.fact-card__value {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.fact-card__value a {
  color: var(--accent);
  text-decoration: underline;
}

/* Trust card */
.trust-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.trust-card__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .7rem;
}

.trust-card__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Селектор с .trust-card - не просто .trust-card__title - специфичность (0,2,0) обязана
   перебить .article h3 (0,1,1: класс .article + элемент h3), который внутри обзора
   (trust_cards внутри .article) иначе выигрывает по специфичности и накидывает свой
   margin-top:1.5rem поверх margin:0 здесь - заголовок карточки визуально "уезжал" вниз
   даже при верном line-height (найдено пользователем через DevTools, 2026-07-17). */
.trust-card .trust-card__title {
  margin: 0;
  font-size: 1.02rem;
  /* Без этого унаследованный line-height у h3 заметно больше высоты самого текста -
     флекс центрирует по боксу заголовка, а не по видимым глифам, из-за чего надпись
     визуально "проседает" к низу иконки. */
  line-height: 1;
}

.trust-card__desc {
  font-size: .9rem;
  color: var(--text-muted);
  margin: 0;
}

/* Video preview card */
.video-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.video-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--dark-section);
}

.video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  color: var(--accent);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.video-card__duration {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  background: rgba(27,27,24,.75);
  color: var(--dark-text-main);
  font-size: .75rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: var(--radius-pill);
}

.video-card__body {
  padding: 1.25rem;
}

.video-card__title {
  margin: 0 0 .4rem;
  font-size: 1.05rem;
}

.video-card__desc {
  margin: 0;
  font-size: .9rem;
}

/* Developer / editor card */
/* Category tiles ("Browse by category") */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .category-grid { grid-template-columns: repeat(5, 1fr); }
}

.category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: .9rem;
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-card);
  text-align: center;
}

.category-tile:hover {
  border-color: var(--accent);
}

.category-tile__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, .1);
  background-color: var(--dark-section);
  /* См. .hero выше - мобильный/десктопный варианты через CSS custom properties, с исходным
     SVG-паттерном как fallback последнего уровня для категорий без tile_image. */
  background-image: var(--bg-mobile, var(--bg-desktop, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cline x1='0.5' y1='0' x2='0.5' y2='64' stroke='%23E96F02' stroke-opacity='0.12' stroke-width='1'/%3E%3C/svg%3E")));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(1.45) contrast(1.05) saturate(1.1);
}

@media (min-width: 641px) {
  .category-tile__img { background-image: var(--bg-desktop, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cline x1='0.5' y1='0' x2='0.5' y2='64' stroke='%23E96F02' stroke-opacity='0.12' stroke-width='1'/%3E%3C/svg%3E")); }
}

.category-tile__label {
  color: var(--accent);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.editor-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  text-align: center;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.editor-card:hover {
  border-color: var(--text-soft);
  box-shadow: var(--shadow-sm);
}

.editor-card__ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 3px;
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .5rem;
}

.editor-card__ring .avatar {
  width: 90px;
  height: 90px;
  font-size: 1.5rem;
}

.editor-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
}

.editor-card__role {
  font-size: .82rem;
  color: var(--text-soft);
  margin-bottom: .4rem;
}

.editor-card__email {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .6rem;
}

.editor-card__email svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.editor-card__email:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.editor-card__expertise {
  font-size: .85rem;
  color: var(--text-muted);
  margin: 0 0 .5rem;
}

.editor-card__facts {
  display: flex;
  gap: .5rem;
  width: 100%;
  margin-top: auto;
}

.editor-card__fact {
  flex: 1;
  background: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: .5rem .4rem;
}

.editor-card__fact-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .92rem;
  color: var(--text-main);
}

.editor-card__fact-label {
  display: block;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-soft);
  margin-top: .1rem;
}

/* Developer card — vertical, icon-forward */
.developer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.developer-card:hover {
  border-color: var(--text-soft);
  box-shadow: var(--shadow-sm);
}

.developer-card__icon {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-md);
  object-fit: cover;
  margin-bottom: .4rem;
}

.developer-card__icon--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  color: #fff;
  font-size: 1.3rem;
}

.developer-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
}

.developer-card__role {
  font-size: .82rem;
  color: var(--text-soft);
  margin-bottom: .3rem;
}

.developer-card__facts {
  display: flex;
  gap: .5rem;
  width: 100%;
  margin-top: .3rem;
}

.developer-card__fact {
  flex: 1;
  background: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: .5rem .4rem;
}

.developer-card__fact-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .92rem;
  color: var(--text-main);
}

.developer-card__fact-label {
  display: block;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-soft);
  margin-top: .1rem;
}

.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  color: #fff;
  font-size: 1rem;
  object-fit: cover;
  background-color: var(--surface-soft);
}

/* Review card */
.review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.15rem;
}

.review-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: .5rem;
}

.review-card__author {
  font-weight: 700;
  font-size: .92rem;
}

.review-card__date {
  font-size: .78rem;
  color: var(--text-soft);
}

.review-card__text {
  font-size: .9rem;
  color: var(--text-muted);
  margin: .5rem 0 0;
}

/* Step card */
.step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  position: relative;
}

.step-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  margin-bottom: 1rem;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  background: none;
  cursor: zoom-in;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.step-card__img:hover {
  border-color: var(--text-soft);
  box-shadow: var(--shadow-sm);
}

.step-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.step-card__img .step-card__number {
  position: absolute;
  top: .6rem;
  left: .6rem;
  margin-bottom: 0;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.step-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--accent);
  font-weight: 800;
  font-family: var(--font-heading);
  margin-bottom: .9rem;
}

.step-card__title {
  margin: 0 0 .4rem;
  font-size: 1rem;
}

.step-card__desc {
  font-size: .9rem;
  color: var(--text-muted);
  margin: 0;
}

.step-card__desc a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s ease;
}

.step-card__desc a:hover {
  color: var(--accent-hover);
}

.step-card__helplink {
  margin: 2rem 0 0;
  font-size: .92rem;
  color: var(--text-muted);
}

.step-card__helplink a {
  font-weight: 600;
  color: var(--text-main);
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}

/* Content card (generic) */
.content-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.content-card--plain {
  border: none;
  border-radius: 0;
  padding: 0;
  background: none;
}

/* Dark panel (Brex-style) */
.panel-dark {
  background: var(--dark-section);
  color: var(--dark-text-main);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}

.panel-dark .text-muted { color: var(--dark-text-muted); }

.promo-offer {
  background: #3E3E42;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}

.promo-offer__body {
  flex: 1 1 320px;
  min-width: 0;
}

.promo-offer__eyebrow {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: .5rem;
}

.promo-offer__headline {
  font-size: 1.35rem;
  margin: 0 0 .5rem;
  color: var(--dark-text-main);
}

.promo-offer__desc {
  margin: 0;
  max-width: 55ch;
}

.promo-offer__code {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .9rem;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(224,161,27,.5);
  border-radius: var(--radius-md);
  padding: .75rem 1.1rem;
}

.promo-offer__code-label {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dark-text-muted);
  margin-bottom: .2rem;
}

.promo-offer__code-value {
  display: block;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--dark-text-main);
}

.promo-offer__copy-btn {
  flex: 0 0 auto;
  background: var(--accent);
  color: #1A1A17;
  border: none;
  border-radius: var(--radius-sm);
  padding: .5rem .9rem;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
  min-height: 36px;
}

.promo-offer__copy-btn:hover {
  background: var(--accent-hover);
}

.promo-offer__disclaimer {
  margin: 1rem 0 0;
  font-size: .82rem;
  color: var(--text-muted);
}

.promo-offer__disclaimer a {
  color: var(--text-main);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .promo-offer__code {
    width: 100%;
    justify-content: space-between;
  }
}

/* -------------------------------------------------------
   8. Forms
   ------------------------------------------------------- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1.1rem;
}

.form-field label {
  font-size: .85rem;
  font-weight: 600;
}

.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem .9rem;
  background: var(--surface);
  font-size: .95rem;
  min-height: 44px;
}

.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: .6rem;
}

.form-field--check input {
  min-height: auto;
  width: 18px;
  height: 18px;
  margin-top: .15rem;
}

.form-legal-note {
  font-size: .8rem;
  color: var(--text-soft);
  margin: .9rem 0 1rem;
}

.form-legal-note a {
  color: var(--text-muted);
  text-decoration: underline;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1rem;
}

@media (min-width: 640px) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
}

.form-hint {
  font-size: .8rem;
  color: var(--text-soft);
}

.star-input {
  display: flex;
  gap: .3rem;
}

.star-input button {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--border);
  min-width: 44px;
  min-height: 44px;
}

.star-input button[aria-pressed="true"],
.star-input button.is-active {
  color: var(--accent);
}

.rate-widget__title {
  margin-bottom: 1rem;
}

.star-input--lg {
  justify-content: center;
  gap: .5rem;
  margin-bottom: .6rem;
}

.star-input--lg button {
  font-size: 2rem;
}

.rate-widget__thanks {
  color: var(--accent);
  font-weight: 700;
  margin-bottom: .25rem;
}

.rate-widget__avg {
  margin: 0;
  font-size: .88rem;
}

/* -------------------------------------------------------
   9. Tables & rich content
   ------------------------------------------------------- */
.payment-tabs__nav {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.payment-tabs__btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .88rem;
  padding: .5rem 1.1rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.payment-tabs__btn:hover {
  border-color: var(--accent);
  color: var(--text-main);
}

.payment-tabs__btn[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.data-table {
  min-width: 560px;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
}

.data-table thead th {
  background: var(--surface-soft);
  font-weight: 700;
  color: var(--text-main);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: rgba(233,111,2,.05);
}

@media (max-width: 559px) {
  .data-table--versions thead tr,
  .data-table--versions tbody tr {
    display: flex;
  }

  .data-table--versions th,
  .data-table--versions td {
    flex: 0 0 auto;
  }

  .data-table--versions th:nth-child(1),
  .data-table--versions td:nth-child(1) { order: 1; flex-basis: 90px; }

  .data-table--versions th:nth-child(2),
  .data-table--versions td:nth-child(2) { order: 2; flex-basis: 130px; }

  .data-table--versions th:nth-child(5),
  .data-table--versions td:nth-child(5) { order: 3; flex-basis: 100px; }

  .data-table--versions th:nth-child(3),
  .data-table--versions td:nth-child(3) { order: 4; flex-basis: 90px; }

  .data-table--versions th:nth-child(4),
  .data-table--versions td:nth-child(4) {
    order: 5;
    flex: 1 1 260px;
  }
}

.article h2 {
  margin-top: 2rem;
  clear: both;
}

.article h3 {
  margin-top: 1.5rem;
  clear: both;
}

.article p,
.article li {
  color: var(--text-muted);
}

.article a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s ease;
}

.article a:hover {
  color: var(--accent-hover);
}

.article ul,
.article ol {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

.article ul { list-style: disc; }
.article ol { list-style: decimal; }

.article::after {
  content: "";
  display: table;
  clear: both;
}

/* Checklist / cross-list / neutral-list variants
   (selectors scoped as ".article ul.article-list--X" so they win over
   the plain ".article ul { list-style: disc }" rule regardless of source order) */
.article ul.article-list--check,
.article ul.article-list--cross,
.article ul.article-list--neutral {
  list-style: none;
  padding-left: 0;
}

.article ul.article-list--check li,
.article ul.article-list--cross li,
.article ul.article-list--neutral li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: .55em;
}

.article ul.article-list--check li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--success);
  font-weight: 700;
}

.article ul.article-list--cross li::before {
  content: "\2715";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--danger);
  font-weight: 700;
}

.article ul.article-list--neutral li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-soft);
  font-weight: 700;
}

/* Cross-list (things NOT supported) reads better as a compact single-line row than a
   one-per-line vertical list, especially for short 2-4 word items like payment method names. */
.article ul.article-list--cross {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.75rem;
  row-gap: .4rem;
}

.article ul.article-list--cross li {
  margin-bottom: 0;
}

/* Numbered step-badge variant */
.article ol.article-list--steps {
  list-style: none;
  padding-left: 0;
  counter-reset: article-step;
}

.article ol.article-list--steps li {
  position: relative;
  padding-left: 2.5em;
  margin-bottom: .85em;
  counter-increment: article-step;
}

.article ol.article-list--steps li::before {
  content: counter(article-step);
  position: absolute;
  left: 0;
  top: -.1em;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-weight: 700;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inline figures */
.article-figure {
  margin: 1.75rem 0;
}

.article-figure img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  display: block;
}

.article-figure figcaption {
  margin-top: .6rem;
  font-size: .84rem;
  color: var(--text-soft);
  text-align: center;
}

.article-figure--side {
  float: right;
  width: 190px;
  margin: .3rem 0 1.25rem 1.5rem;
}

.article-figure--side-left {
  float: left;
  width: 190px;
  margin: .3rem 1.5rem 1.25rem 0;
}

.article-figure--phone {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

/* Кастомная высота image-блока (2026-07-28, по прямому запросу пользователя) - только на
   десктопе/планшете (>640px, тот же брейкпоинт, что и остальной адаптив на этой странице).
   На мобильном (@media max-width:640px ниже) переменные просто не используются - img остаётся
   на дефолтном width:100%/height:auto, т.е. полная натуральная высота картинки.
   --custom-img-height ("300px" в блоке) и --custom-img-ratio ("50%" в блоке, переведено в
   aspect-ratio на бэкенде - components/content-blocks/image.blade.php) - выставляется только
   ОДНА из двух переменных за раз, вторая остаётся unset и не влияет через фоллбэк auto. Высота
   нужна и .article-figure__trigger (кнопка-обёртка лайтбокса - прямой родитель img), и самому
   img - height:100%/aspect-ratio на img резолвится относительно НЕПОСРЕДСТВЕННОГО родителя
   (кнопки), не relative к .article-figure - без этого правила на кнопке проценты/aspect-ratio
   на img молча не применяются (найдено и подтверждено Playwright, коммит 461105a). */
@media (min-width: 641px) {
  .article-figure--custom-height .article-figure__trigger {
    display: block;
    height: var(--custom-img-height, auto);
    aspect-ratio: var(--custom-img-ratio, auto);
  }

  .article-figure--custom-height img {
    height: var(--custom-img-height, auto);
    aspect-ratio: var(--custom-img-ratio, auto);
    object-fit: cover;
  }
}

@media (max-width: 640px) {
  .article-figure--side,
  .article-figure--side-left {
    float: none;
    width: 100%;
    margin: 1.5rem 0;
  }
}

/* Content-block images open in the site's shared lightbox (screenshot-thumb pattern) -
   the trigger button is a plain reset around the <img>, not a visible control of its own. */
.article-figure__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}

.article-figure__trigger img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  display: block;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.article-figure__trigger:hover img {
  border-color: var(--text-soft);
  box-shadow: var(--shadow-sm);
}

/* Several related screenshots in one row instead of stacked - each thumbnail opens the
   same shared lightbox (see initScreenshotGallery in main.js), Prev/Next cycles the group. */
.article-image-group {
  display: flex;
  flex-wrap: wrap;
  /* flex-end был нужен, пока превью были разной высоты (разные пропорции исходников) -
     теперь у .article-image-group__item img фиксированный 220x391 + object-fit:cover,
     все превью одной высоты, так что естественный flex-start подходит лучше (по прямому
     запросу пользователя, 2026-07-17). */
  align-items: flex-start;
  gap: 1rem;
  margin: 1.75rem 0 .5rem;
}

.article-image-group__item {
  flex: 0 0 220px;
  max-width: 220px;
  margin: 0;
}

/* Источники смешаны по пропорциям (часть - полный портретный скриншот, часть - обрезанные от
   наложения инструмента скриншота Android, см. докблок app:publish-1xbet-full-review) -
   фиксированный размер + object-fit:cover вместо aspect-ratio делают превью в одном ряду
   гарантированно одинаковыми, независимо от пропорций исходника. Только десктоп/планшет
   (2026-07-28, по прямому запросу пользователя, тот же принцип, что и у одиночного image-блока) -
   на мобильном каждая картинка идёт в полную натуральную высоту, см. @media max-width:640px
   ниже. --custom-group-height (задаётся в px на бэкенде из "Npx"/"N%" блока, где "%" - доля от
   стандартных 391px, единая на весь ряд, а не от родной высоты конкретной картинки - источники
   разных пропорций, единой "родной высоты" для всего ряда не существует) переопределяет 391px,
   когда указана. */
@media (min-width: 641px) {
  .article-image-group__item .article-figure__trigger img {
    width: 220px;
    height: var(--custom-group-height, 391px);
    object-fit: cover;
    object-position: top;
  }
}

@media (max-width: 640px) {
  .article-image-group__item .article-figure__trigger img {
    width: 220px;
    height: auto;
  }
}

.article-image-group__item figcaption {
  margin-top: .5rem;
  font-size: .8rem;
  color: var(--text-soft);
  text-align: center;
}

.article-image-group__caption {
  font-size: .84rem;
  color: var(--text-soft);
  text-align: center;
  margin: 0 0 1.25rem;
}

/* Article layout with sidebar (article-*.html pages) */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

.article-layout__main {
  min-width: 0;
}

.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* На мобильном сайдбар (карточка приложения/оглавление) идёт ПЕРЕД текстом статьи (по
     запросу пользователя 2026-07-20). На десктопе - обычный порядок (текст слева, сайдбар
     справа), т.к. там уже двухколоночная сетка и .article-layout__main физически первый в
     разметке. */
  order: -1;
}

@media (min-width: 1024px) {
  .article-sidebar {
    position: sticky;
    top: 90px;
    order: 0;
  }
}

.sidebar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.1rem;
}

.sidebar-card__title {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-soft);
  margin-bottom: .75rem;
}

.sidebar-card__app {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}

.sidebar-card__app-name {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: .2rem;
}

.sidebar-card__link {
  display: inline-block;
  margin-top: .75rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent-hover);
}

.sidebar-card__link:hover {
  text-decoration: underline;
}

.sidebar-toc {
  display: flex;
  flex-direction: column;
}

.sidebar-toc a {
  padding: .5rem 0;
  font-size: .87rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-soft);
}

.sidebar-toc a:first-of-type {
  border-top: none;
}

.sidebar-toc a:hover {
  color: var(--accent-hover);
}

/* Callout note */
.article-callout {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  background: var(--surface-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  margin: 1.75rem 0;
}

.article-callout__icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1.5;
}

.article-callout p {
  margin: 0;
  font-size: .92rem;
}

.article-callout--warning {
  border-left-color: var(--warning);
}

.article-callout--danger {
  border-left-color: var(--danger);
  background: rgba(185,74,58,.06);
}

/* Pull quote */
.article blockquote {
  margin: 1.75rem 0;
  padding: .2rem 0 .2rem 1.3rem;
  border-left: 3px solid var(--accent);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-main);
}

.article blockquote p {
  margin: 0;
  color: inherit;
  font-size: inherit;
}

.article blockquote cite {
  display: block;
  margin-top: .6rem;
  font-size: .82rem;
  font-style: normal;
  font-weight: 600;
  color: var(--text-soft);
}

/* Inline stat highlight */
.article-stat {
  float: right;
  width: 170px;
  text-align: center;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1rem;
  margin: .3rem 0 1.25rem 1.5rem;
}

.article-stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.article-stat__label {
  display: block;
  margin-top: .4rem;
  font-size: .82rem;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .article-stat {
    float: none;
    width: 100%;
    margin: 1.25rem 0;
  }
}

/* Accordion reused inside article body */
.article .faq {
  margin: 1.5rem 0;
}

.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.5rem 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-soft);
}

.legal-toc__label {
  width: 100%;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-soft);
  margin-bottom: .2rem;
}

.legal-toc a {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: .35rem .8rem;
}

.legal-toc a:hover {
  color: var(--text-main);
  border-color: var(--text-soft);
}

.pros-cons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .pros-cons { grid-template-columns: 1fr 1fr; }
}

.pros-cons__box {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
}

.pros-cons__box--pros { border-left: 3px solid var(--success); }
.pros-cons__box--cons { border-left: 3px solid var(--danger); }

.pros-cons__title {
  margin: 0 0 .6rem;
  font-size: .95rem;
}

.pros-cons__list li {
  font-size: .9rem;
  color: var(--text-muted);
  padding-left: 1.4em;
  position: relative;
  margin-bottom: .45rem;
}

.pros-cons__list li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}

.pros-cons__box--pros li::before { content: "+"; color: var(--success); }
.pros-cons__box--cons li::before { content: "\2212"; color: var(--danger); }

/* FAQ */
.faq {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.faq__item summary {
  padding: 1rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  font-size: 1.2rem;
  color: var(--accent);
  flex-shrink: 0;
}

.faq__item[open] summary::after {
  content: "\2212";
}

.faq__item p {
  padding: 0 1.1rem 1.1rem;
  color: var(--text-muted);
  margin: 0;
  font-size: .92rem;
}

/* Rating distribution */
.rating-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.rating-summary__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .rating-summary__top { grid-template-columns: auto 1fr; }
}

.rating-summary__score {
  text-align: center;
}

.rating-summary__vote {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-soft);
  text-align: center;
}

.rating-summary__reviews-title {
  font-size: .95rem;
  font-weight: 700;
  margin: 1.75rem 0 1rem;
}

.rating-summary__number {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}

.rating-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .82rem;
  margin-bottom: .4rem;
}

.rating-bar__track {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  overflow: hidden;
}

.rating-bar__fill {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* Back to top */
.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--dark-section);
  color: var(--dark-text-main);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--dark-surface);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}

/* Mobile bottom navigation (per-app quick actions) */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--dark-section);
  border-top: 1px solid rgba(255,255,255,.1);
  padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom, 0px));
  transition: transform .2s ease;
}

.bottom-nav.is-hidden {
  transform: translateY(100%);
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav {
    transition: none;
  }
}

@media (max-width: 767px) {
  .bottom-nav {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
  }

  body.has-bottom-nav {
    padding-bottom: 64px;
  }

  body.has-bottom-nav .back-to-top {
    bottom: calc(64px + 1.25rem);
  }
}

.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  padding: .4rem .2rem;
  min-height: 48px;
  color: var(--dark-text-muted);
  font-size: .66rem;
  font-weight: 600;
  text-align: center;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.bottom-nav__item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.bottom-nav__item:hover,
.bottom-nav__item:focus-visible {
  color: var(--accent);
}

/* -------------------------------------------------------
   10. Footer
   ------------------------------------------------------- */
.site-footer {
  background: var(--dark-section);
  color: var(--dark-text-muted);
  padding-block: 3rem 1.5rem;
}

@media (max-width: 767px) {
  .site-footer .container {
    padding-inline: 24px;
  }
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--dark-border);
}

@media (min-width: 768px) {
  /* 4 контентные колонки (Explore/Guides/Company/Legal) - по прямому запросу пользователя
     2026-07-20 добавлена колонка Guides (How to Install/Register, Articles), раньше их не было
     в футере вовсе. */
  .footer-top { grid-template-columns: 1.1fr repeat(4, 1fr); }
}

.footer-brand .logo {
  color: var(--dark-text-main);
  margin-bottom: .8rem;
}

.footer-brand__desc {
  font-size: .88rem;
  max-width: 32ch;
  margin-bottom: 1rem;
}

.footer-col__title {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dark-text-main);
  margin-bottom: .9rem;
  font-weight: 700;
}

.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.footer-col__list a {
  font-size: .88rem;
}

.footer-col__list a:hover {
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: .8rem;
}

.footer-note {
  max-width: 70ch;
  font-size: .78rem;
  padding-top: 1rem;
  color: rgba(180, 172, 156, .8);
}

.footer-compliance {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.1rem;
}

.compliance-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .7rem;
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-pill);
  background: var(--dark-surface);
  color: var(--dark-text-muted);
  font-size: .74rem;
  font-weight: 600;
}

a.compliance-badge:hover {
  color: var(--dark-text-main);
  border-color: var(--accent);
}

.compliance-badge svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.compliance-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  flex-shrink: 0;
}

.footer-language {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
}

/* Accordion footer for mobile */
.footer-col.is-accordion .footer-col__title {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 767px) {
  .footer-col__title::after {
    content: "+";
    font-weight: 400;
  }
  .footer-col.is-open .footer-col__title::after {
    content: "\2212";
  }
  .footer-col .footer-col__list {
    display: none;
  }
  .footer-col.is-open .footer-col__list {
    display: flex;
  }
}

@media (min-width: 768px) {
  .footer-col__title::after { display: none; }
  .footer-col .footer-col__list { display: flex !important; }
}

/* -------------------------------------------------------
   11. Utility helpers
   ------------------------------------------------------- */
.text-muted { color: var(--text-muted); }
.text-soft { color: var(--text-soft); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.flow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 1.75rem;
}

.center-cta {
  text-align: center;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.tag {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
}

/* ---------------------------------------------------
   Admin bar (partials/admin-bar.blade.php) - виден залогиненному admin/editor на любом
   домене/поддомене, фиксирован над обычной (sticky) шапкой сайта.
   --------------------------------------------------- */
.admin-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 36px;
  background: #0f0f0d;
  border-bottom: 1px solid var(--dark-border);
  font-size: .8rem;
}

.admin-bar__inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 100%;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--dark-text-muted);
}

.admin-bar__brand {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--dark-text-main);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.admin-bar__user {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-bar__spacer {
  flex: 1;
}

.admin-bar__edit {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--accent);
  color: #fff;
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.admin-bar__edit:hover {
  background: var(--accent-hover);
}

.admin-bar__link {
  color: var(--dark-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.admin-bar__link:hover {
  color: var(--dark-text-main);
}

.admin-bar__logout-form {
  display: contents;
}

.admin-bar__logout {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

@media (max-width: 640px) {
  .admin-bar__user {
    display: none;
  }
}

body.has-admin-bar {
  padding-top: 36px;
}

body.has-admin-bar .site-header {
  top: 36px;
}