/* styles.css — вид Gonzo Gaming, направление «Спуск» ред. 2. Всё из токенов. */

html { overflow-x: clip; color-scheme: dark; }
::selection { background: var(--accent); color: var(--on-accent); }

h1, h2 { font-weight: var(--display-weight); letter-spacing: var(--display-track); line-height: var(--display-leading); }
h2 { font-size: var(--step-3); }
.note { color: var(--ink-muted); font-size: var(--step--1); }
.num { font-family: var(--font-utility); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
figure img { width: 100%; height: 100%; object-fit: cover; }

/* ── Сигнатура: ступенчатая линия ── */
.steps {
  display: block;
  width: calc(var(--signature-step-w) * 3);
  max-width: none;
  height: calc(var(--signature-step-h) * 3);
  margin-inline-start: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2));
  overflow: visible;
}
.steps path {
  fill: none;
  stroke: var(--signature-color);
  stroke-width: var(--signature-stroke);
  vector-effect: non-scaling-stroke;
}
/* прорисовка слева направо: маска, а не штрих — штрих при non-scaling-stroke обрывается */
.steps.reveal { opacity: 1; transform: none; clip-path: inset(-4px 100% -4px -4px); }
.steps.reveal.is-in { clip-path: inset(-4px -4px -4px -4px); transition: clip-path var(--dur-draw) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .steps.reveal { clip-path: none; } }

/* ── Логотип ── */
.logo { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--step-1); letter-spacing: var(--display-track); }
.logo__dog { width: 44px; height: auto; flex: none; }

/* ── Шапка, кнопки ── */
.header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header__inner { min-height: 76px; }
.nav__list { gap: var(--space-5); }
.nav__list a { text-decoration: none; color: var(--ink); opacity: .8; transition: opacity var(--dur-micro) var(--ease-out); }
.nav__list a:hover { opacity: 1; }
.lang button { color: var(--ink); opacity: .55; font-weight: 500; }
.lang button:hover { opacity: .85; }
.lang button[aria-pressed="true"] { opacity: 1; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

.btn { border-radius: var(--radius-control); font-weight: 500; min-height: 52px; padding-inline: var(--space-5); }
.btn--primary:hover { background: color-mix(in oklab, var(--accent) 85%, var(--ink)); }
.btn--ghost { border-color: color-mix(in oklab, var(--ink) 40%, transparent); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--arrow::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: var(--space-2); }
.header__cta { min-height: 44px; }

.link-call { color: var(--ink); text-decoration: none; display: inline-flex; gap: var(--space-2); align-items: baseline; padding-block: var(--space-2); border-bottom: 2px solid var(--accent); }
.link-call .num { font-size: var(--step-1); }
.link-call:hover { border-color: var(--ink); }

/* ── Первый экран ── */
.hero { position: relative; min-height: min(86vh, 820px); display: grid; align-items: center; overflow: hidden; }
.hero__media { position: absolute; inset: 0 0 0 36%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.hero::before {
  content: ""; position: absolute; inset: 0 0 0 calc(36% - 2px); z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--surface) 0%, transparent 40%), linear-gradient(0deg, var(--surface) 0%, transparent 22%);
}
.hero__inner { position: relative; z-index: 2; padding-block: var(--space-8) var(--space-7); }
.hero__text { max-width: 40rem; }
.hero h1 { font-size: var(--step-4); text-wrap: wrap; }
.hero__lead { margin-top: var(--space-5); max-width: 27rem; color: var(--ink-muted); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); margin-top: var(--space-6); }
.hero .steps { margin-top: var(--space-6); width: 44vw; } /* последняя ступень заходит на фото */

/* ── Факты ── */
.facts { border-block: 1px solid var(--line); }
.facts__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts__list > li { padding: var(--space-5) var(--space-5); border-left: 1px solid var(--line); }
.facts__list > li:first-child { border-left: 0; padding-left: 0; }
.facts__list li { display: grid; gap: var(--space-2); align-content: start; color: var(--ink-muted); font-size: var(--step--1); line-height: 1.35; }
.facts__list b { font-family: var(--font-utility); font-weight: 500; font-size: var(--step-2); line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }

/* ── Зоны и цены ── */
.zones { padding-block: var(--space-8) var(--space-7); }
.zones__inner { display: grid; grid-template-columns: 5fr 6fr; gap: var(--space-7); align-items: center; }
.zones__lead { margin-top: var(--space-4); color: var(--ink-muted); max-width: 30rem; }
.tiers { margin-top: var(--space-6); border-top: 1px solid var(--line); }
.tier { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.tier__name { font-weight: 500; font-size: var(--step-1); }
.tier__price { color: var(--ink-muted); white-space: nowrap; }
.tier__price .num { color: var(--ink); font-size: var(--step-2); margin-right: var(--space-1); }
.tier--top { padding-inline: var(--space-4); margin-inline: calc(-1 * var(--space-4)); background: color-mix(in oklab, var(--accent) 20%, var(--surface)); border-bottom-color: var(--accent); }
.tier--top .tier__name { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: var(--step-2); }
.zones .note { margin-top: var(--space-4); max-width: 30rem; }
.zones__list .btn { margin-top: var(--space-5); }
.zones .steps { margin-top: var(--space-6); }
.zones__media img { object-position: 85% center; }
.zones__media { aspect-ratio: 4/3; margin-inline-end: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2)); }

/* ── Железо: панель ── */
.hardware { padding-block: var(--space-7); }
.hardware__panel { display: grid; grid-template-columns: 5fr 7fr; background: var(--plane); }
.hardware__media { aspect-ratio: 3/4; max-height: 680px; }
.hardware__media img { object-position: 50% 40%; }
.hardware__text { padding: var(--space-7); align-self: center; }
.hardware__text > p { margin-top: var(--space-5); color: var(--ink-muted); max-width: 30rem; }
.kit { margin-top: var(--space-6); border-top: 1px solid var(--line); }
.kit li { padding-block: var(--space-3); border-bottom: 1px solid var(--line); padding-left: var(--space-5); position: relative; }
.kit li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: translateY(-60%); }

/* ── Игры: фото во всю ширину ── */
.games { position: relative; min-height: 620px; display: grid; align-items: end; overflow: hidden; margin-top: var(--space-7); }
.games__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.games::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, var(--surface) 8%, transparent 60%), linear-gradient(90deg, color-mix(in oklab, var(--surface) 85%, transparent) 0%, transparent 60%); }
.games__inner { position: relative; z-index: 2; padding-block: var(--space-8) var(--space-7); }
.games__label { font-family: var(--font-body); font-size: var(--step--1); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-shadow: 0 1px 12px var(--surface); line-height: 1.2; }
.games__names { margin-top: var(--space-3); }
.games__names li { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: var(--step-4); line-height: .98; }
.games__more { margin-top: var(--space-5); color: var(--ink-muted); max-width: 28rem; }

/* ── Бар: широкое фото над текстом ── */
.bar { padding-block: var(--space-8) var(--space-7); }
.bar__media { aspect-ratio: 1672/606; }
.bar__media img { object-position: center; }
.bar__text { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-7); margin-top: var(--space-6); align-items: start; }
.bar__text p { color: var(--ink-muted); max-width: 34rem; }
.bar__text .kit { margin-top: var(--space-5); max-width: 34rem; }

/* ── Контакты ── */
.contacts { padding-block: var(--space-8); border-top: 1px solid var(--line); }
.contacts__inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-7); align-items: stretch; }
.contacts__sub { margin-top: var(--space-3); font-size: var(--step-1); }
.contacts__main h2 { max-width: 16ch; }
.contacts__open { margin-top: var(--space-4); color: var(--ink-muted); }
.contacts__open b { color: var(--ink); font-weight: 500; }
.contacts__phone { margin-top: var(--space-7); }
.contacts__label { color: var(--ink-muted); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; }
.phone { display: inline-block; margin-top: var(--space-2); font-size: min(var(--step-4), 5.4vw); white-space: nowrap; line-height: 1; color: var(--ink); text-decoration: none; }
.phone:hover { color: color-mix(in oklab, var(--ink) 80%, var(--accent)); }
.contacts__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.contacts__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); }
.contacts__links a { text-decoration-color: var(--line); text-underline-offset: 5px; }
.contacts__links a:hover { text-decoration-color: var(--accent); }
.contacts .steps--wide { grid-column: 1 / -1; width: calc(100vw - 2 * max(var(--gutter), (100vw - var(--container)) / 2) + max(var(--gutter), (100vw - var(--container)) / 2)); margin-top: calc(-1 * var(--space-5)); }
.contacts__side { display: grid; grid-template-columns: 2fr 3fr; gap: var(--space-3); }
.contacts__stairs { min-height: 100%; }
.mascot { min-height: 100%; background: var(--brand-plane); display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-5) var(--space-4) 0; overflow: hidden; }
.mascot img { width: 108%; height: auto; margin-left: -4%; object-fit: contain; }
.mascot figcaption { order: -1; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: var(--step-1); line-height: 1.1; color: var(--surface); }

/* липкие кнопки уходят, когда контакты на экране (site.js) */
.sticky-cta { gap: var(--space-2); }
.sticky-cta .btn { white-space: nowrap; padding-inline: var(--space-3); }

.footer { border-top: 1px solid var(--line); padding-block: var(--space-6); }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); }
.footer small { color: var(--ink-muted); font-size: var(--step--1); }
.footer a.num { color: var(--ink-muted); text-decoration: none; }
.footer .logo__dog { width: 36px; }

/* Плашка PowerUP — копия «Powered by Netlify» (пилюля, отступ 18px от угла, системный шрифт 13px)
   в фирменных цветах powerup-go.uz. Самодостаточна: не зависит от токенов проекта. Одна и та же во всех проектах —
   текст, цвета и размеры не менять без явной просьбы. */
.pu-badge {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(212, 175, 55, 0.22); border-radius: 999px;
  background: linear-gradient(180deg, #151515, #050505);
  color: #F0F0F0; text-decoration: none;
  font: 600 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: .01em; -webkit-font-smoothing: antialiased;
  transition: border-color .2s ease, bottom .5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pu-badge:hover { border-color: rgba(212, 175, 55, 0.55); }
.pu-badge:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; }
.pu-badge__label { color: #D5D5D5; font-weight: 500; }
.pu-badge img { display: block; width: auto; height: 26px; max-width: none; flex: none; }
@media (prefers-reduced-motion: reduce) { .pu-badge { transition: none; } }
/* подъём над липкими кнопками этого сайта */
@media (max-width: 900px) { .sticky-cta.is-on:not(.is-away) ~ .pu-badge { bottom: 94px; } }


/* ── Мобильное меню ── */
.mobile-menu { position: fixed; inset: var(--header-h, 72px) 0 0; overflow-y: auto; background: var(--surface); display: flex; flex-direction: column; }
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { gap: 0; }
.mobile-menu li a { display: block; padding-block: var(--space-3); border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: var(--step-3); line-height: 1.1; }
.mobile-menu__actions { display: grid; gap: var(--space-2); margin-top: var(--space-6); }
.mobile-menu__meta { margin-top: var(--space-4); color: var(--ink-muted); }
.mobile-menu .lang { margin-top: var(--space-5); }

/* ── Средние ширины ── */
@media (max-width: 1200px) {
  .contacts__inner { grid-template-columns: minmax(0, 1fr); }
  .contacts__side { grid-template-columns: 1fr 1fr; }
  .contacts__side > figure { aspect-ratio: 3/4; min-height: 0; }
  .nav__list { gap: var(--space-4); }
  .header__cta { display: none; }
}

/* ── Мобильная композиция ── */
@media (max-width: 900px) {
  .zones__inner, .contacts__inner, .bar__text { grid-template-columns: minmax(0, 1fr); }
  .zones__media { margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 16/9; }
  .hardware__panel { grid-template-columns: minmax(0, 1fr); width: 100%; margin-inline: 0; }
  .hardware__media { aspect-ratio: 4/3; max-height: none; }
  .hardware__text { padding: var(--space-6) var(--gutter); }
  .bar__text { gap: var(--space-4); }
  .header__actions .lang { display: flex; }
  .mobile-menu .lang { display: none; }
  .header__actions { gap: var(--space-1); }
  .sticky-cta { display: grid; grid-template-columns: 1fr 1fr; left: 0; right: 0; bottom: 0; padding: var(--space-2) var(--gutter) max(var(--space-2), env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); transform: translateY(100%); }
  .sticky-cta .btn { width: 100%; }
  .sticky-cta.is-on.is-away { transform: translateY(100%); }
}

@media (max-width: 700px) {
  .header__inner { min-height: 64px; }
  .logo__dog { width: 38px; }
  .logo { font-size: var(--step-0); gap: var(--space-2); }
  .header__actions .lang button { min-width: 34px; min-height: 44px; padding: 0; }

  .hero { display: flex; flex-direction: column-reverse; min-height: auto; }
  .hero__media { position: relative; inset: auto; aspect-ratio: 4/3; }
  .hero::before { display: none; }
  .hero__inner { padding-block: var(--space-6) var(--space-5); }
  .hero__actions { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .hero__actions .link-call { align-self: flex-start; }
  .hero .steps, .zones .steps, .contacts .steps { width: 100vw; margin-inline-start: calc(-1 * var(--gutter)); }
  .contacts .steps--wide { margin-top: 0; }

  .facts__list > li { padding: var(--space-4) var(--space-3); }
  .facts__list b { font-size: var(--step-1); }

  .tier--top { margin-inline: 0; padding-inline: var(--space-3); }
  .zones__list .btn { width: 100%; }

  .games { min-height: 520px; }
  .games__media { object-position: 30% 30%; }
  .games__names li { font-size: var(--step-3); }

  .bar__media { aspect-ratio: 4/3; margin-inline: calc(-1 * var(--gutter)); }

  .phone { font-size: var(--step-3); }
  .contacts__actions { flex-direction: column; }
  .contacts__actions .btn { width: 100%; }
  .contacts__side { grid-template-columns: minmax(0, 1fr); }
  .contacts__side > .contacts__stairs { margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 4/5; }
  .contacts__side > .mascot { aspect-ratio: 1/1; }
  .mascot img { width: 78%; margin: 0 auto; }
  .mascot figcaption { font-size: var(--step-2); }

  .footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 360px) {
  .logo span { display: none; } /* на самых узких остаётся знак-чихуахуа: язык и меню важнее надписи */
}