/* here2winreview.com: вариация @bs/satellite-ds поверх theme.css (система не переписывается).
   Вариация хаба «Review»: фиолетовый неон по умолчанию, золото вторым акцентом; сцена героя это неоновая
   вывеска в BulbFrame, два SlotReels по бокам, Roulette снизу слева, дождь монет, лучи света. */
:root {
  --sat-bg: #12071f;
  --sat-bg-2: #1c0e2e;
  --sat-brand: #a855f7;
  --sat-brand-alt: #f5c542;
  --sat-glow: rgba(168, 85, 247, .55);
  --sat-text: #f4f0ff;

  --hub-w: 1560px;   /* контейнер контента; страница целиком ограничена 1920 px и стоит по центру */
  --hub-page: 1920px;

  --t-sign-w: min(92vw, 430px); --t-sign-fs: clamp(1.5rem, 8.4vw, 2.6rem); --t-h1-fs: clamp(1.3rem, 5.4vw, 1.9rem);
  --t-r1-x: 88%; --t-r1-y: 56%; --t-r1-s: .5; --t-r1-o: .3; --t-r1-ry: -14deg; --t-r1-d: block;
  --t-r2-x: 12%; --t-r2-y: 52%; --t-r2-s: .7; --t-r2-o: .34; --t-r2-ry: 16deg; --t-r2-d: none;
  --t-w-x: 10%; --t-w-y: 80%; --t-w-s: .6; --t-w-o: .36;
}
@media (min-width: 720px) {
  :root {
    --t-sign-w: min(72vw, 520px); --t-sign-fs: clamp(2rem, 5.4vw, 3.2rem); --t-h1-fs: clamp(1.6rem, 3.2vw, 2.4rem);
    --t-r1-x: 89%; --t-r1-y: 52%; --t-r1-s: .78; --t-r1-o: .55;
    --t-r2-d: block; --t-r2-x: 11%; --t-r2-y: 48%; --t-r2-s: .68; --t-r2-o: .5;
    --t-w-x: 15%; --t-w-y: 82%; --t-w-s: .8; --t-w-o: .6;
  }
}
@media (min-width: 1100px) {
  :root {
    --t-sign-w: min(46vw, 640px); --t-sign-fs: clamp(2.6rem, 3.6vw, 4.4rem); --t-h1-fs: clamp(2rem, 2.3vw, 3rem);
    --t-r1-x: 85%; --t-r1-y: 46%; --t-r1-s: 1; --t-r1-o: .75;
    --t-r2-x: 14%; --t-r2-y: 44%; --t-r2-s: .92; --t-r2-o: .7;
    --t-w-x: 8%; --t-w-y: 80%; --t-w-s: 1; --t-w-o: .85;
  }
}
@media (min-width: 1700px) {
  :root {
    --t-sign-w: min(40vw, 760px); --t-r1-x: 86%; --t-r1-s: 1.2; --t-r2-x: 13%; --t-r2-s: 1.12; --t-w-x: 7%; --t-w-s: 1.25;
  }
}

html { scroll-behavior: smooth; }
body { background-color: var(--sat-bg); }
a { color: var(--sat-brand-alt); }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--sat-brand-alt); outline-offset: 3px; }
.hub { width: 100%; max-width: var(--hub-page); margin-inline: auto; position: relative; }
.hub-in { width: min(var(--hub-w), 100%); margin-inline: auto; }
.hub-skip:focus { position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; margin: 0; clip: auto; z-index: 200; padding: .6rem 1rem; background: var(--sat-bg); border: 1px solid var(--sat-brand-alt); border-radius: var(--sat-r-md); }

/* ---------- шапка: логотип, переключатель регионов, меню-якоря ---------- */
.hub-bar { position: relative; z-index: 90; background: linear-gradient(180deg, rgba(14, 5, 26, .94), rgba(14, 5, 26, .78)); border-bottom: 1px solid var(--sat-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hub-bar__in { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.2rem; width: min(var(--hub-w), 100%); margin-inline: auto;
  padding: .6rem clamp(1rem, 4vw, 2.5rem); }
.hub-logo { font-family: var(--sat-font-display); font-size: 1.15rem; letter-spacing: .02em; color: var(--sat-text); display: inline-flex; gap: .45em; align-items: baseline; white-space: nowrap; }
.hub-logo em { font-style: normal; font-size: .62em; letter-spacing: .16em; text-transform: uppercase; color: var(--sat-brand-alt); }
.hub-logo:hover { color: var(--sat-text); }
.regions { display: flex; gap: .25rem; margin-left: auto; padding: .2rem; border: 1px solid var(--sat-line); border-radius: var(--sat-r-pill); background: var(--sat-surface); }
.regions a { font-size: .74rem; padding: .32rem .8rem; border-radius: var(--sat-r-pill); color: var(--sat-text-dim); white-space: nowrap; }
.regions a:hover { color: #fff; }
.regions a[aria-current] { background: linear-gradient(120deg, var(--sat-brand-alt), color-mix(in srgb, var(--sat-brand) 55%, var(--sat-brand-alt))); color: #1a0530; font-weight: 700; }
.sections { order: 3; flex: 1 1 100%; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding-block: .1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.sections::-webkit-scrollbar { display: none; }
.sections a { flex: none; font-family: var(--sat-font-display); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sat-text-dim);
  padding: .4rem .8rem; border: 1px solid var(--sat-line); border-radius: var(--sat-r-pill); background: var(--sat-surface); transition: color .2s, border-color .2s, box-shadow .2s; }
.sections a:hover { color: #fff; border-color: var(--sat-brand); box-shadow: 0 0 14px -4px var(--sat-glow); }
@media (min-width: 1100px) {
  .hub-bar { position: sticky; top: 0; }
  .sections { order: 0; flex: 1 1 auto; justify-content: center; margin-inline: .5rem; -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; overflow: visible; }
  .regions { margin-left: 0; }
}
.hub-sec, #stage { scroll-margin-top: 7rem; }

/* ---------- герой: слоёная сцена LayeredHero ---------- */
.hub-hero { min-height: clamp(36rem, 88vh, 56rem); padding: clamp(1.4rem, 4vw, 4rem) clamp(1rem, 4vw, 4rem) clamp(2.6rem, 5vw, 5rem);
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(180deg, #000 86%, transparent), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 1919px) { .hub-hero { -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent); mask-image: linear-gradient(180deg, #000 86%, transparent); } }
.hub-hero__content { max-width: min(50rem, 92vw); gap: .8rem; }
.hub-hero__text { display: grid; gap: .7rem; justify-items: center; }
.hub-eyebrow { margin: 0; letter-spacing: .22em; font-size: clamp(.62rem, 1vw, .8rem); }
.hub-h1 { margin: 0; text-wrap: balance; font-size: var(--t-h1-fs); line-height: 1.12; }
.hub-lede { margin: .2rem 0 0; max-width: 58ch; font-size: clamp(.95rem, .5vw + .8rem, 1.2rem); line-height: 1.6; }
.hub-date { margin: 0; color: var(--sat-text-dim); font-size: var(--sat-small); max-width: 60ch; }
.hub-sign { width: var(--t-sign-w); max-width: 100%; margin-bottom: .4rem; }
.hub-sign__frame { padding: clamp(.9rem, 2vw, 1.6rem) clamp(1rem, 2.4vw, 2rem); }
.hub-sign__body { display: grid; gap: .5rem; place-items: center; text-align: center; }
.hub-sign__kicker { letter-spacing: .34em; font-size: clamp(.55rem, 1vw, .8rem); }
.hub-sign__name { font-family: var(--sat-font-display); font-size: var(--t-sign-fs); line-height: 1; letter-spacing: .02em; }
.hub-sign__sub { font-family: var(--sat-font-display); font-size: clamp(.52rem, 1vw, .9rem); letter-spacing: .22em; text-transform: uppercase; }

.hub-w { transform: translate(-50%, -50%) perspective(1100px) rotateY(var(--ry, 0deg)) scale(var(--sc, 1)); opacity: var(--op, 1); display: var(--dp, block); }
.hub-r1 { --ry: var(--t-r1-ry); --sc: var(--t-r1-s); --op: var(--t-r1-o); --dp: var(--t-r1-d); }
.hub-r2 { --ry: var(--t-r2-ry); --sc: var(--t-r2-s); --op: var(--t-r2-o); --dp: var(--t-r2-d); }
.hub-wheel { --sc: var(--t-w-s); --op: var(--t-w-o); }
.hub-scene { position: absolute; inset: 0; overflow: hidden; }
.hub-rays { position: absolute; left: 50%; top: -34%; width: 190%; aspect-ratio: 1; transform: translateX(-50%);
  background: repeating-conic-gradient(from 202deg at 50% 0%, color-mix(in srgb, var(--sat-brand-alt) 15%, transparent) 0deg 2.2deg, transparent 2.2deg 11deg);
  -webkit-mask-image: radial-gradient(62% 55% at 50% 0%, #000 0%, transparent 78%); mask-image: radial-gradient(62% 55% at 50% 0%, #000 0%, transparent 78%);
  animation: hub-rays 7s ease-in-out infinite; }
.hub-glow { position: absolute; left: 50%; top: -20%; width: min(130vw, 1700px); height: 78%; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, var(--sat-glow), transparent 72%); filter: blur(12px); opacity: .9; }
.hub-bokeh-wrap { position: absolute; inset: 0; }
.hub-bokeh { position: absolute; border-radius: 50%; filter: blur(14px); }
.hub-bokeh--a { background: radial-gradient(circle, var(--sat-brand-alt), transparent 68%); }
.hub-bokeh--b { background: radial-gradient(circle, var(--sat-brand), transparent 68%); }
.hub-floor { position: absolute; left: 50%; bottom: -16%; width: 260%; height: 48%; transform-origin: 50% 100%; transform: translateX(-50%) perspective(620px) rotateX(66deg);
  background: repeating-linear-gradient(90deg, var(--sat-glow) 0 2px, transparent 2px 84px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--sat-brand-alt) 14%, transparent) 0 2px, transparent 2px 96px);
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 65%); mask-image: linear-gradient(0deg, transparent, #000 65%); opacity: .55; }
.hub-vig { position: absolute; inset: 0; background: radial-gradient(125% 92% at 50% 38%, transparent 38%, rgba(4, 1, 10, .8) 100%); }
.hub-sparks { position: absolute; inset: 0; pointer-events: none; }
.hub-spark { position: absolute; border-radius: 50%; background: radial-gradient(circle, #fff 0 35%, transparent 70%); box-shadow: 0 0 8px 1px var(--sat-brand-alt);
  animation: hub-sparkle 2s ease-in-out infinite; opacity: 0; }
@keyframes hub-sparkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes hub-rays { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
.hub-sparks .hub-spark { will-change: transform, opacity; }

/* ---------- ключевые цифры (StatCounter, без счёта «от нуля») ---------- */
.hub-stats-wrap { padding-block: 0; margin-top: calc(var(--sat-xl) * -1); position: relative; z-index: 5; }
.hub-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.4rem 2rem; justify-items: center; text-align: center; }
.hub-stats .sat-stat { justify-items: center; }

/* ---------- баннер ---------- */
.hub-banner-wrap { padding-block: clamp(1.6rem, 3.4vw, 3rem) 0; }
.hub-banner, .hub-fig { margin: 0; position: relative; border-radius: var(--sat-r-lg); overflow: hidden; border: 1px solid var(--sat-line);
  background: var(--sat-surface); box-shadow: var(--sat-sh-glass), 0 0 38px -10px var(--sat-glow); }
.hub-banner img { width: 100%; height: auto; max-height: 34rem; object-fit: cover; }
.hub-fig img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.hub-banner::after, .hub-fig::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sat-brand) 35%, transparent), inset 0 -60px 60px -40px rgba(10, 3, 20, .8); }
.hub-banner figcaption, .hub-fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: .8rem 1.1rem; font-size: var(--sat-small); color: var(--sat-text-dim); }
.hub-fig { margin: 1.4rem 0 1.6rem; }

/* ---------- раскладка: текст + боковая карточка фактов ---------- */
.hub-cols { display: grid; gap: var(--sat-lg); grid-template-columns: minmax(0, 1fr); align-items: start; padding-block: clamp(1rem, 2.4vw, 2rem) var(--sat-xl); }
@media (min-width: 1100px) { .hub-cols { grid-template-columns: minmax(0, 1fr) 22rem; } .hub-fact { position: sticky; top: 6.5rem; margin-top: clamp(1.2rem, 3vw, 2.4rem); } }
.hub-body { min-width: 0; }
.hub-sec { padding-block: clamp(.7rem, 1.4vw, 1.1rem); }
.hub-card { padding: clamp(1.2rem, 2.4vw, 2.4rem); }
.hub-part { margin: 0 0 .5rem; }
.hub-h2 { margin: 0 0 1.1rem; font-size: clamp(1.45rem, 1.3vw + 1rem, 2.3rem); line-height: 1.08; text-wrap: balance; color: var(--sat-text); }
.hub-card h3 { font-family: var(--sat-font-display); font-weight: 400; font-size: clamp(1.02rem, .5vw + .85rem, 1.35rem); line-height: 1.15; margin: 1.6rem 0 .5rem; color: var(--sat-brand-alt); }
.hub-card p { margin: 0 0 1em; max-width: 76ch; color: var(--sat-text-dim); }
.hub-card .hub-lead { color: var(--sat-text); font-size: clamp(1.05rem, .6vw + .9rem, 1.35rem); line-height: 1.55; max-width: 70ch; }
.hub-card strong { color: var(--sat-text); }
.hub-pull { margin: 1.4rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--sat-brand); border-radius: 0 var(--sat-r-md) var(--sat-r-md) 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sat-brand) 16%, transparent), transparent); box-shadow: -10px 0 26px -14px var(--sat-glow); }
.hub-pull p { margin: 0; max-width: 60ch; font-family: var(--sat-font-display); font-size: clamp(1rem, .9vw + .8rem, 1.5rem); line-height: 1.25; color: var(--sat-text); }

/* ---------- CTA ---------- */
.hub-cta { display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; align-items: center; margin-top: 1.6rem; }
.hub-card .hub-age, .hub-age { color: var(--sat-text-dim); font-size: var(--sat-small); margin: 0; }
.hub-card .sat-btn, .hub-fact .sat-btn { color: #1a0530; }
.hub-card .sat-btn:hover, .hub-fact .sat-btn:hover { color: #1a0530; }

/* ---------- таблицы: стекло и неоновые разделители ---------- */
.hub-tw { margin: 1.2rem 0 1.5rem; border: 1px solid var(--sat-line); border-radius: var(--sat-r-md); background: rgba(8, 3, 16, .35); overflow: hidden; }
.hub-table { width: 100%; border-collapse: collapse; font-size: clamp(.88rem, .25vw + .8rem, 1rem); line-height: 1.5; }
.hub-table caption { caption-side: top; text-align: left; padding: .9rem 1.1rem .2rem; font-family: var(--sat-font-display); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sat-brand); }
.hub-table thead th { text-align: left; padding: .8rem 1.1rem; font-family: var(--sat-font-display); font-weight: 400; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sat-brand-alt); border-bottom: 1px solid color-mix(in srgb, var(--sat-brand) 55%, transparent); box-shadow: 0 1px 12px -6px var(--sat-glow); }
.hub-table tbody th, .hub-table tbody td { text-align: left; vertical-align: top; padding: .8rem 1.1rem; border-bottom: 1px solid var(--sat-line); color: var(--sat-text-dim); }
.hub-table tbody th { color: var(--sat-text); font-weight: 600; }
.hub-table tbody tr:last-child th, .hub-table tbody tr:last-child td { border-bottom: 0; }
.hub-table tbody tr { transition: background .2s; }
.hub-table tbody tr:hover { background: color-mix(in srgb, var(--sat-brand) 10%, transparent); }
.hub-table a { font-weight: 700; }
@media (max-width: 719px) {
  .hub-table, .hub-table thead, .hub-table tbody, .hub-table tr, .hub-table th, .hub-table td { display: block; }
  .hub-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hub-table tbody tr { padding: .8rem 1rem; border-bottom: 1px solid var(--sat-line); }
  .hub-table tbody tr:last-child { border-bottom: 0; }
  .hub-table tbody th, .hub-table tbody td { padding: .15rem 0; border: 0; }
  .hub-table tbody th { font-size: 1.02rem; padding-bottom: .3rem; }
  .hub-table tbody td::before { content: attr(data-label); display: block; font-family: var(--sat-font-display); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sat-brand); margin-top: .35rem; }
}

/* ---------- плюсы и минусы (GlassCard) ---------- */
.hub-pair { display: grid; gap: var(--sat-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin-top: .6rem; }
.hub-pair .sat-glass { background: rgba(8, 3, 16, .35); }
.hub-card .hub-pro h3, .hub-card .hub-con h3 { margin-top: 0; }
.hub-card .hub-pro h3 { color: var(--sat-success); }
.hub-card .hub-con h3 { color: var(--sat-danger); }
.hub-pair ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.hub-pair li { display: flex; gap: .7rem; align-items: flex-start; color: var(--sat-text-dim); }
.hub-pair li::before { flex: none; font-weight: 700; }
.hub-pro li::before { content: "+"; color: var(--sat-success); }
.hub-con li::before { content: "\2212"; color: var(--sat-danger); }

/* ---------- плитки изданий (BentoGrid) ---------- */
.hub-editions { margin-top: 1.2rem; }
.hub-edition { display: grid; gap: .45rem; align-content: start; color: var(--sat-text-dim); font-size: .95rem; }
.hub-edition strong { font-family: var(--sat-font-display); font-weight: 400; font-size: 1.1rem; color: var(--sat-brand-alt); }
.hub-edition:hover { color: var(--sat-text); }

/* ---------- боковая карточка фактов ---------- */
.hub-fact__h { font-family: var(--sat-font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.1; margin: 0 0 .8rem; color: var(--sat-text); }
.hub-fact dl { margin: 0 0 1.2rem; display: grid; }
.hub-fact dt { font-family: var(--sat-font-display); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sat-brand); padding: .8rem 0 .15rem; border-top: 1px solid var(--sat-line); }
.hub-fact dt:first-child { border-top: 0; padding-top: 0; }
.hub-fact dd { margin: 0; color: var(--sat-text); font-size: .95rem; line-height: 1.45; }
.hub-fact .hub-age { margin-top: .9rem; }

/* ---------- FAQ (FaqAccordion поверх native details) ---------- */
.hub-card .sat-faq__a p { margin: 0 0 .6em; }
.hub-card .sat-faq__item { background: rgba(8, 3, 16, .35); }
.hub-card .sat-faq__q { font-size: clamp(.92rem, .5vw + .75rem, 1.1rem); line-height: 1.25; }

/* ---------- подвал ---------- */
.hub-foot { border-top: 1px solid var(--sat-line); padding-block: var(--sat-xl) var(--sat-xxl); background: linear-gradient(180deg, transparent, rgba(8, 3, 16, .55)); }
.hub-foot__in { display: grid; gap: var(--sat-lg) 3rem; grid-template-columns: minmax(0, 1fr); color: var(--sat-text-dim); font-size: .95rem; }
@media (min-width: 820px) { .hub-foot__in { grid-template-columns: 1.4fr 1fr 1fr; } }
.hub-foot h2 { font-family: var(--sat-font-display); font-weight: 400; font-size: 1rem; letter-spacing: .08em; color: var(--sat-text); margin: 0 0 .7rem; }
.hub-foot p { margin: 0 0 .7em; }
.hub-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.hub-foot .small { font-size: var(--sat-small); }

/* ---------- узкий экран ---------- */
@media (max-width: 719px) {
  .hub-hero { min-height: auto; }
  .hub-logo { font-size: 1rem; }
  .hub-banner img { max-height: 15rem; }
  .hub-stats-wrap { margin-top: -1.4rem; }
}
.hub-card .hub-part { color: var(--sat-brand); margin: 0 0 .5rem; }

/* ---------- узкий экран: без горизонтальной прокрутки, спокойнее сцена ---------- */
@media (max-width: 719px) {
  :root { --t-r1-d: none; --t-w-x: 9%; --t-w-y: 93%; --t-w-o: .3; }
  .hub-bar__in { padding-inline: .8rem; }
  .regions { margin-left: 0; width: 100%; justify-content: space-between; }
  .regions a { padding: .32rem .45rem; font-size: .7rem; }
  .sat-coins .sat-coin:nth-child(n+4) { display: none; }
  .sat-coins { opacity: .5; }
  .hub-hero > .sat-hero-layer:nth-child(7) { display: none; }
  .hub-table caption { display: block; }
  .hub-hero__content { max-width: 100%; }
}