/* styles.css — вид Midnight. Всё из токенов (tokens.css), направление — design/direction.md. */

/* ───────── Сигнатура: проволочный куб ───────── */
.cube { position: relative; }
.cube__wire { position: absolute; left: 0; top: 0; max-width: none; overflow: visible; pointer-events: none; z-index: 2; }
.cube__wire path { fill: none; stroke: var(--signature-color); stroke-width: var(--signature-stroke); stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
/* выдвижение: рамка прорисовывается → грань выезжает на глубину → фото оседает */
.cube__front, .cube__edges { stroke-dasharray: 1; stroke-dashoffset: 1; }
.cube__faces { fill: var(--signature-face); stroke: none; }
.cube__back, .cube__faces { opacity: 0; transform: translate(calc(-1 * var(--signature-depth)), calc(-1 * var(--signature-depth))); }
.cube .slot > img { transform: scale(1.04); transition: transform calc(var(--dur-extrude) * 1.6) var(--ease-out); }
.cube.is-built .cube__front { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-reveal) var(--ease-out); }
.cube.is-built .cube__edges { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-extrude) var(--ease-out) calc(var(--dur-reveal) * 0.6); }
.cube.is-built .cube__back, .cube.is-built .cube__faces { opacity: 1; transform: none; transition: transform var(--dur-extrude) var(--ease-out) calc(var(--dur-reveal) * 0.6), opacity var(--dur-micro) linear calc(var(--dur-reveal) * 0.6); }
.cube.is-built .slot > img { transform: none; }
.cube .slot { z-index: 1; }

/* ───────── Общее ───────── */
::selection { background: var(--accent); color: var(--on-accent); }
body { font-weight: 400; }
em { font-style: normal; color: var(--accent); }
.section { padding-block: var(--section); }
.eyebrow { font: 600 var(--step--1)/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-4); }
.eyebrow--rule { display: flex; align-items: center; gap: var(--space-4); }
.eyebrow--rule::after { content: ""; flex: 1; height: 1px; background: var(--accent); opacity: .6; }
.h2 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
.muted { color: var(--ink-muted); }
.arrow { font-family: var(--font-body); font-weight: 400; transition: transform var(--dur-micro) var(--ease-out); }
a:hover > .arrow { transform: translateX(4px); }
.link-arrow { display: inline-flex; gap: var(--space-3); align-items: center; padding-block: var(--space-2); font-weight: 600; font-size: var(--step-1); text-decoration: none; border-bottom: 1px solid currentColor; }

/* Кнопки */
.btn { border-radius: var(--radius-control); font-weight: 600; font-size: var(--step-0); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--big { min-height: 60px; padding-inline: var(--space-6); font-size: var(--step-1); gap: var(--space-5); }

/* Шапка */
.header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header__inner { min-height: var(--header-row); }   /* не замер: иначе шапка растёт на 1px при каждом resize (critique-3) */
.logo { display: block; flex: none; }
.logo img { width: 156px; height: auto; }
.nav__list { gap: clamp(var(--space-4), 2.2vw, var(--space-7)); }
.nav__list a { text-decoration: none; font-weight: 600; font-size: var(--step--1); letter-spacing: .02em; padding-block: var(--space-2); background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size var(--dur-micro) var(--ease-out); }
.nav__list a:hover { background-size: 100% 2px; }
.lang button { font-weight: 600; color: var(--ink); }
.lang button[aria-pressed="true"] { color: var(--accent); text-decoration: none; opacity: 1; }
.header__cta { min-height: 48px; }

/* ───────── 1. Первый экран ───────── */
.hero__title { font-size: clamp(2rem, 0.6rem + 3.4vw, 4rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; color: var(--accent); }
.hero__hours { margin-top: var(--space-2); color: var(--ink-muted); font-size: var(--step-1); font-variant-numeric: tabular-nums; }
.hero__rating { color: var(--ink-muted); text-decoration: none; font-size: var(--step--1); }
.hero__rating b { color: var(--ink); font: 800 var(--step-1)/1 var(--font-display); margin-right: var(--space-2); }
.hero__rating:hover span { text-decoration: underline; }

/* ───────── 2. Шоу ───────── */
.show__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(var(--space-7), 5vw, var(--space-9)); align-items: start; }
.show__grid { align-items: stretch; }
.show__media { margin-right: var(--signature-depth); margin-bottom: var(--signature-depth); }
.show__media .slot { aspect-ratio: auto; height: 100%; min-height: 28rem; }
.show .h2 { font-size: var(--step-3); }
.acts { margin-top: var(--space-6); border-top: 1px solid var(--line); counter-reset: none; }
.acts li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.acts__n { font: 600 var(--step--1)/1.9 var(--font-body); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.acts h3 { font-size: var(--step-1); font-weight: 800; letter-spacing: -0.01em; }
.acts p { margin-top: var(--space-1); color: var(--ink-muted); font-size: var(--step--1); }
.show__quote { margin-top: var(--space-7); }
.show__quote p { font: 800 var(--step-2)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--accent); }
cite { display: block; margin-top: var(--space-3); font-style: normal; font-size: var(--step--1); color: var(--ink-muted); }

/* ───────── 3. Бар: фото на ночи, текст на сирени ───────── */
.bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bar__night { position: relative; padding: var(--section) var(--space-9) calc(var(--section) + var(--signature-depth)) max(var(--gutter), (100vw - var(--container)) / 2); }
.bar__glass { width: 64%; margin-right: var(--signature-depth); }
.bar__cubes { position: relative; z-index: 3; width: 48%; margin: -40% calc(var(--signature-depth) + var(--space-3) - var(--space-9)) 0 auto; }   /* второй куб стопкой, как полки на стене: уходит в правый отступ тёмной половины и заходит только на угол коктейля, стакан открыт */
.bar__cubes .slot { box-shadow: 0 0 0 10px var(--surface); }   /* вырез — кадры не сливаются */
.bar__lilac { --signature-color: var(--lilac-line); --signature-face: color-mix(in oklab, var(--lilac-line) 22%, var(--lilac)); background: var(--lilac); color: var(--lilac-ink); padding: var(--section) max(var(--gutter), (100vw - var(--container)) / 2) var(--section) calc(var(--space-9) + var(--space-7)); display: flex; flex-direction: column; justify-content: center; }
.bar__lilac .eyebrow { color: var(--lilac-line); }
.bar__lilac .h2 { font-size: var(--step-4); }
.bar__lead { margin-top: var(--space-5); max-width: 32ch; font-size: var(--step-1); color: var(--lilac-muted); }
.menu-lines { margin-top: var(--space-7); border-top: 1px solid var(--lilac-line); }
.menu-lines li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid color-mix(in oklab, var(--lilac-line) 40%, transparent); font-size: var(--step-1); font-weight: 600; }
.menu-lines .acts__n { color: var(--lilac-line); }
.menu-lines b { font-weight: 800; font-family: var(--font-display); font-size: var(--step-0); letter-spacing: -0.01em; }
.bar__lilac .link-arrow { margin-top: var(--space-7); align-self: flex-start; }
.bar__lilac :focus-visible { outline-color: var(--lilac-ink); }

/* ───────── 4. Ночь ───────── */
.night__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--space-7), 6vw, var(--space-10)); align-items: center; }
.night__lead { margin-top: var(--space-5); font-size: var(--step-1); color: var(--ink-muted); }
.clock { grid-column: 1 / -1; margin-top: var(--space-6); display: grid; align-items: end; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: calc(var(--space-6) + var(--signature-depth)); padding-bottom: var(--signature-depth); }
.clock li { display: grid; gap: var(--space-2); padding: var(--space-5); margin-right: var(--signature-depth); }
.clock b { font: 800 clamp(1.5rem, 2.4vw, 3.25rem)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.clock span { color: var(--ink-muted); font-size: var(--step-1); }
.clock__peak { --signature-color: var(--accent-hover); --signature-face: color-mix(in oklab, var(--accent) 45%, var(--surface)); background: var(--accent); color: var(--on-accent); }
.clock__peak { padding: var(--space-6) var(--space-7) var(--space-5); }
.clock__peak b { font-size: clamp(3rem, 0.5rem + 5.6vw, 7rem); }
.clock__peak span { color: var(--on-accent); font-weight: 600; }
.night__media { margin-right: var(--signature-depth); }

/* ───────── 5. Правила ───────── */
.rules { --signature-color: var(--lilac-line); --signature-face: color-mix(in oklab, var(--lilac-line) 22%, var(--lilac)); background: var(--lilac); color: var(--lilac-ink); }
.rules .eyebrow { color: var(--lilac-line); }
.rules__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--space-7), 5vw, var(--space-9)); align-items: center; }
.rules__title { font-size: clamp(2.5rem, 0.8rem + 5.2vw, 6.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: .98; }
.rules__lead { margin-top: var(--space-5); font-size: var(--step-1); color: var(--lilac-muted); max-width: 28ch; }
.rules__card { padding: clamp(var(--space-5), 4vw, var(--space-8)); margin-right: var(--signature-depth); }
.deposit { display: grid; gap: var(--space-1); }
.deposit__label { font-weight: 600; font-size: var(--step-1); }
.deposit__sum { font: 800 clamp(2rem, 0.9rem + 3.4vw, 4.25rem)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.deposit__per { font-weight: 600; color: var(--lilac-muted); }
.rules__list { margin-top: var(--space-6); border-top: 1px solid var(--lilac-line); }
.rules__list > div { display: grid; grid-template-columns: minmax(7rem, 2fr) 3fr; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid color-mix(in oklab, var(--lilac-line) 40%, transparent); }
.rules__list dt { font-weight: 600; }
.rules__list dd { margin: 0; color: var(--lilac-muted); }
.rules__contacts { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-weight: 600; }
.rules__contacts a { text-underline-offset: 4px; }
.rules :focus-visible { outline-color: var(--lilac-ink); }

/* ───────── 6. Фото ───────── */
.photos__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(var(--space-7), 5vw, var(--space-9)); align-items: start; }
.photos__tall { margin-right: var(--signature-depth); }
.photos__title { font-size: var(--step-4); margin-bottom: var(--space-7); }
.photos__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-7); align-items: center; margin-bottom: var(--space-8); }
.photos__row--shift { margin-left: 10%; }
.photos__wide { margin-right: var(--signature-depth); }
.photos__quote p { font-size: var(--step-1); font-weight: 600; line-height: 1.35; }

/* ───────── 7. Бронь — финал ───────── */
.booking { --signature-color: var(--lilac-line); --signature-face: color-mix(in oklab, var(--lilac-line) 22%, var(--lilac)); background: var(--lilac); color: var(--lilac-ink); }
.booking :focus-visible { outline-color: var(--lilac-ink); }
.booking__card :focus-visible { outline-color: var(--accent); }
.booking__title { font-size: clamp(2rem, 0.4rem + 6.4vw, 7rem); font-weight: 800; letter-spacing: -0.045em; line-height: .95; color: var(--lilac-ink); margin-bottom: var(--space-8); }
.booking__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--space-7), 5vw, var(--space-9)); align-items: start; }
.booking__card { padding: clamp(var(--space-5), 3vw, var(--space-7)); margin-right: var(--signature-depth); background: var(--surface); color: var(--ink); container-type: inline-size; }
.form { max-width: none; }
.form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field label { font-size: var(--step--1); color: var(--ink-muted); font-weight: 600; }
.field input, .field select { font: inherit; color: var(--ink); width: 100%; min-height: 52px; padding: .7em .9em; background: var(--plane); border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); border-radius: 0; color-scheme: dark; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(-45deg, transparent 50%, var(--accent) 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field input:hover, .field select:hover { border-color: var(--accent); }
.field input::placeholder { color: var(--ink-muted); }
.calc { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-1) var(--space-4); padding: var(--space-4) 0; border-block: 1px solid var(--line); }
.calc__label { font-weight: 600; }
.calc__sum { white-space: nowrap; font: 800 var(--step-2)/1 var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; text-align: right; }
.calc__how { grid-column: 1 / -1; font-size: var(--step--1); color: var(--ink-muted); }
.form .btn { width: 100%; }
.form__status { font-weight: 600; color: var(--accent); }
.booking__media .slot { aspect-ratio: 16 / 9; }
.booking__phone { display: block; margin-top: var(--space-7); font: 800 clamp(1.75rem, 0.6rem + 3.3vw, 4rem)/1 var(--font-display); letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.booking__phone:hover { color: var(--lilac-line); }
.booking .muted, .booking .booking__hours { color: var(--lilac-muted); }
.booking__address { margin-top: var(--space-5); font-style: normal; display: grid; gap: var(--space-1); font-size: var(--step-1); }
.booking__links { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-weight: 600; }
.booking__links a { text-underline-offset: 4px; text-decoration-color: var(--lilac-line); }
.booking__hours { margin-top: var(--space-5); color: var(--ink-muted); }

/* Подвал */
.footer { border-top: 1px solid var(--line); padding-block: var(--space-7) var(--space-8); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-7); }
.footer__logo { width: 120px; }
.footer__slogan { font: 800 var(--step-0)/1.2 var(--font-display); color: var(--accent); }
.footer__copy { margin-left: auto; color: var(--ink-muted); }

/* ───────── Мобильная композиция — кадры 02, 04, 06, 08, 09, 13, 14 ───────── */
@media (max-width: 900px) {
  .logo img { width: 116px; }
  .header__actions .lang { display: flex; }   /* кадры показывают язык в шапке */
  .header__actions .lang button { min-width: 32px; }
  .header__actions { gap: var(--space-1); }

  /* меню на весь экран — кадр 09 */
  .mobile-menu { position: fixed; inset: var(--header-h) 0 0 0; background: var(--surface); overflow: hidden auto; padding: var(--space-5) var(--gutter) var(--space-7); border-top: 1px solid var(--line); display: flex; flex-direction: column; }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu ul { gap: 0; font-size: inherit; padding-right: var(--space-9); }
  .mobile-menu li a { display: block; padding-block: var(--space-4); border-bottom: 1px solid var(--line); text-decoration: none; font: 800 clamp(1.5rem, 7vw, 2.25rem)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; color: var(--accent); }
  .mobile-menu__foot { order: 3; display: grid; gap: var(--space-4); margin-top: var(--space-6); }
  .mobile-menu__phone { font: 800 var(--step-1)/1 var(--font-display); text-decoration: none; font-variant-numeric: tabular-nums; }
  .mobile-menu .lang { display: none; }   /* языки уже в шапке */
  .mobile-menu__cube { position: absolute; right: calc(-1 * var(--space-7)); top: var(--space-6); width: var(--space-9); height: 46%; z-index: -1; }
  .mobile-menu > nav, .mobile-menu__foot { position: relative; z-index: 1; }

  /* герой — кадр 13: заголовок → куб → рейтинг → действие */

  /* шоу — кадр 06 */
  .show__grid { display: flex; flex-direction: column; gap: 0; }
  .show__text { display: contents; }
  .show .eyebrow { order: 1; } .show .h2 { order: 2; }
  .show__media { order: 3; margin-top: var(--space-6); margin-bottom: var(--signature-depth); }
  .show__media .slot { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
  .acts { order: 4; } .show__quote { order: 5; }

  /* бар — кадр 02: весь на сирени, фото между вводом и списком */
  .bar { display: flex; flex-direction: column; background: var(--lilac); color: var(--lilac-ink); --signature-color: var(--lilac-line); padding: var(--section) var(--gutter); }
  .bar__night, .bar__lilac { display: contents; }
  .bar__lilac > * { order: 1; }
  .bar__glass { order: 2; width: auto; margin-top: var(--space-6); }
  .bar__glass .slot { aspect-ratio: 4 / 5; }
  .bar__cubes { display: none; }
  .menu-lines { order: 3; margin-top: calc(var(--space-6) + var(--signature-depth)); }
  .bar__lilac .link-arrow { order: 4; }

  /* ночь — кадр 14 */
  .night__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .night__text { display: contents; }
  .night .h2 { order: 1; }
  .clock { order: 2; grid-template-columns: 1fr; gap: calc(var(--space-3) + var(--signature-depth)); margin-top: var(--space-6); }
  .clock li { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
  .clock b { font-size: clamp(2rem, 9vw, 2.5rem); }
  .clock__peak b { font-size: clamp(2.5rem, 12vw, 3.25rem); }
  .clock span { font-size: var(--step-0); }
  .night__media { order: 3; margin-top: var(--space-5); }
  .night__lead { order: 4; margin-top: var(--space-5); }

  /* правила — кадр 04 */
  .rules__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .rules__list > div { grid-template-columns: 1fr; gap: var(--space-1); }

  /* фото — кадр 08 */
  .photos__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .photos__side { display: contents; }
  .photos__title { order: 1; margin-bottom: var(--space-6); }
  .photos__tall { order: 2; margin-bottom: calc(var(--space-6) + var(--signature-depth)); }
  .photos__tall .slot { aspect-ratio: 4 / 5; }
  .photos__row { order: 3; grid-template-columns: 1fr; gap: calc(var(--space-4) + var(--signature-depth)); margin: 0 0 var(--space-7); }
  .photos__row--shift { margin-left: 0; }
  .photos__side > .link-arrow { order: 4; align-self: flex-start; font-size: var(--step-0); }

  /* бронь — кадр 05 */
  .booking__title { margin-bottom: var(--space-6); }
  .sticky-cta.is-on.is-away { transform: translateY(calc(100% + 2 * var(--gutter))); }
  .booking__grid { grid-template-columns: 1fr; gap: calc(var(--space-7) + var(--signature-depth)); }
  .booking__phone { margin-top: var(--space-6); font-size: clamp(1.5rem, 7.4vw, 2.25rem); }
  .footer__copy { margin-left: 0; width: 100%; }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .nav__list { gap: var(--space-4); }
  .header__cta { display: none; }
}

@media (max-width: 520px) {
  .calc { grid-template-columns: 1fr; }
  .calc__sum { text-align: left; font-size: clamp(1.5rem, 7vw, 2rem); }
}

@media (max-width: 420px) {
  .form__pair { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
}

/* ───────── Плашка PowerUP (powerup-badge, не трогать) ───────── */
/* Плашка 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; } }

/* Если у сайта есть липкая нижняя панель (кнопки на телефоне) — поднять плашку над ней, пока панель видна.
   Пример для static-starter (.sticky-cta.is-on, высота ~76px):
   @media (max-width: 900px) { .sticky-cta.is-on:not(.is-away) ~ .pu-badge { bottom: 94px; } } */

@media (max-width: 900px) {
}

/* ───────── Заголовки по ширине колонки, а не экрана (critique-2: UZ и 960–1200) ───────── */
.container, .hero__text, .show__text, .bar, .bar__lilac, .night__text, .rules__head, .photos__side { container-type: inline-size; }
.hero__title { font-size: min(4rem, 10.2cqi); }
.h2, .bar__lilac .h2, .photos__title { font-size: min(var(--step-4), 12cqi); }   /* самое широкое слово «MC Kaamos» = 7.7em */
.show .h2 { font-size: min(var(--step-3), 12cqi); }
:lang(uz) .h2, :lang(uz) .bar__lilac .h2, :lang(uz) .photos__title { font-size: min(var(--step-4), 11cqi); }
:lang(uz) .show .h2 { font-size: min(var(--step-3), 11cqi); }
.rules__title { font-size: min(clamp(2.5rem, 0.8rem + 5.2vw, 6.5rem), 14cqi); }
:lang(uz) .rules__title { font-size: min(clamp(2.5rem, 0.8rem + 5.2vw, 6.5rem), 10cqi); }   /* «Kechangizdan» = 9.1em */
.booking__title { font-size: min(clamp(2rem, 0.4rem + 6.4vw, 7rem), 9.4cqi); }   /* «Забронировать» = 10.4em */
.calc { grid-template-columns: 1fr; }
.calc__sum, :lang(uz) .calc__sum { text-align: left; font-size: min(var(--step-3), 8.5cqi); }

/* ───────── Планшет 601–900: своя раскладка, не растянутый телефон (critique-2) ───────── */
@media (min-width: 601px) and (max-width: 900px) {
  .show__media .slot { aspect-ratio: 16 / 9; }
  .bar__glass { width: 64%; align-self: flex-start; }
  .bar__glass .slot { aspect-ratio: 3 / 4; }
  .night__media .slot { aspect-ratio: 16 / 10; }
  .clock { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; }
  .clock li { grid-template-columns: 1fr; padding: var(--space-4); }
  .clock b { font-size: 1.75rem; }
  .clock__peak b { font-size: 2.75rem; }
  .photos__tall { width: 72%; }
  .photos__tall .slot { aspect-ratio: 4 / 5; }
  .photos__row { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: calc(var(--space-5) + var(--signature-depth)); }
}


/* Пока форма брони в кадре — плашка уезжает на всех ширинах (critique-3) */
.pu-badge { transition: border-color .2s ease, bottom .5s cubic-bezier(0.2, 0.8, 0.2, 1), transform .4s cubic-bezier(0.2, 0.8, 0.2, 1); }
body.form-in-view .pu-badge { transform: translateY(calc(100% + 40px)); }
/* Ссылка меню: текст и стрелка не разрываются (critique-3, 960) */
.bar__lilac .link-arrow { white-space: nowrap; font-size: min(var(--step-1), max(0.9375rem, 5.6cqi)); }

/* ═════════ Ревизия 2: живой 3D-куб (direction.md) ═════════ */
.c3 { --s: 300px; --c3-edge: var(--accent); width: var(--s); height: var(--s); perspective: calc(var(--s) * 3.4); perspective-origin: 50% 35%; }
.c3__float { width: 100%; height: 100%; transform-style: preserve-3d; animation: c3-float 7s ease-in-out infinite alternate; }
@keyframes c3-float { from { transform: translateY(-6px) rotateZ(-0.8deg); } to { transform: translateY(8px) rotateZ(0.8deg); } }
.c3__cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx, -14deg)) rotateY(var(--ry, -28deg)); will-change: transform; }
.c3__face { position: absolute; inset: 0; margin: 0; overflow: hidden; background: var(--surface); backface-visibility: hidden; box-shadow: 0 0 48px color-mix(in oklab, var(--c3-edge) 26%, transparent); }
.c3__face::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--c3-edge); box-shadow: inset 0 0 40px color-mix(in oklab, var(--surface) 70%, transparent); pointer-events: none; }
.c3__face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c3__face--front { transform: translateZ(calc(var(--s) / 2)); }
.c3__face--right { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.c3__face--back { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.c3__face--left { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.c3__face--top { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); display: grid; place-items: center; }
.c3__face--top img { width: 80%; height: auto; object-fit: contain; }
.c3__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

/* Первый экран: сцена «залипает», прокрутка поворачивает куб гранями, в конце — наезд */
.hero { position: relative; height: 290svh; }
.hero__pin { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); display: flex; align-items: center; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--space-6), 5vw, var(--space-9)); align-items: center; }
.hero__text { opacity: var(--fade, 1); transform: translateY(calc((1 - var(--fade, 1)) * -48px)); }
.hero__hours { margin-top: var(--space-4); }
.hero__faces { margin-top: var(--space-6); max-width: 30rem; border-top: 1px solid var(--line); }
.hero__faces button { display: flex; gap: var(--space-4); align-items: baseline; width: 100%; padding: var(--space-3) 0; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink-muted); font-weight: 600; transition: color var(--dur-micro) var(--ease-out), padding var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.hero__faces button:hover { color: var(--ink); }
.hero__faces button[aria-current="true"] { color: var(--ink); padding-left: var(--space-4); box-shadow: inset 3px 0 0 var(--accent); }
.hero__action { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.hero__stage { display: grid; justify-items: center; gap: var(--space-7); }

/* Секции: фото въезжает поворотом грани, затем дорисовывается куб */
.cube .slot { transform-origin: 0 50%; transform: perspective(1600px) rotateY(-55deg); opacity: 0; transition: transform 900ms var(--ease-out), opacity 420ms var(--ease-out); }
.cube.is-built .slot { transform: none; opacity: 1; }

/* Финал: депозит + звонок, второй куб медленно вращается */
.booking__ask { font-weight: 600; font-size: var(--step-1); }
.stepper { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-3); }
.stepper__btn { width: 56px; height: 56px; display: grid; place-items: center; border: 2px solid var(--accent); background: none; color: var(--accent); font: 800 1.75rem/1 var(--font-display); transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.stepper__btn:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }
.stepper__btn:disabled { opacity: .35; cursor: not-allowed; }
.stepper__value { min-width: 2ch; text-align: center; font: 800 var(--step-4)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.booking__card .calc { margin-top: var(--space-5); }
.booking__actions { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.booking__actions .btn--big { justify-content: space-between; }
.btn--line { min-height: 52px; border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent); color: var(--ink); background: none; }
.btn--line:hover { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
.c3--spin .c3__face { box-shadow: 0 24px 48px color-mix(in oklab, var(--lilac-ink) 22%, transparent); }
.c3--spin .c3__cube { animation: c3-spin 24s linear infinite; animation-play-state: paused; }
.c3--spin.is-on .c3__cube { animation-play-state: running; }
@keyframes c3-spin { from { transform: rotateX(-16deg) rotateY(0deg); } to { transform: rotateX(-16deg) rotateY(-360deg); } }

/* Планшет и телефон: заголовок → куб → подпись грани → действие, всё в одном экране */
@media (max-width: 900px) {
  .hero { height: 270svh; }
  .hero__pin { align-items: stretch; }
  .hero__grid { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: var(--space-4); padding-block: var(--space-5) 76px; }   /* снизу место под плашку PowerUP */
  .hero__text { display: contents; }
  .hero .eyebrow { order: 1; margin-bottom: 0; }
  .hero__title { order: 1; }
  .hero__hours { order: 1; margin-top: 0; font-size: var(--step-0); color: var(--ink); }
  .hero__stage { order: 2; flex: 1; align-content: center; gap: 0; }
  .hero__faces { order: 3; margin: 0; max-width: none; border: 0; display: grid; }
  .hero__faces li { grid-area: 1 / 1; }
  .hero__faces button { justify-content: center; border: 0; padding: var(--space-2) 0; font-size: var(--step-1); transition: opacity var(--dur-reveal) var(--ease-out); }
  .hero__faces button[aria-current="true"] { padding-left: 0; box-shadow: none; }
  .hero__faces button[aria-current="false"] { opacity: 0; pointer-events: none; }
  .hero__action { order: 4; margin-top: 0; flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .hero__action .btn { justify-content: center; }
  .hero__rating { text-align: center; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .hero__action { flex-direction: row; justify-content: center; }
}
@media (max-width: 600px) { .hero__rating { display: none; } }   /* плашка PowerUP легла бы на рейтинг; рейтинг есть у отзывов */


@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero__pin { position: relative; top: 0; height: auto; padding-block: var(--space-8); }
  .c3__float, .c3--spin .c3__cube { animation: none; }
  .cube .slot { transform: none; opacity: 1; }
}



.photos__rating { margin-bottom: var(--space-5); color: var(--ink-muted); font-size: var(--step--1); }
.photos__rating b { color: var(--ink); font: 800 var(--step-2)/1 var(--font-display); margin-right: var(--space-2); }
@media (max-width: 900px) { .photos__rating { order: 4; } }

/* ═════════ Ревизия 2.1 — по critique-4 ═════════ */
/* Размер куба героя считается от свободной высоты экрана: повёрнутый куб (≈1.35 стороны) не наезжает на текст */
.hero { --cs: min(50svh, 29vw, 500px); --zoom-k: .7; }
.c3--hero { --s: var(--cs); position: relative; z-index: 2; pointer-events: none; transform: scale(calc(1 + var(--zp, 0) * var(--zoom-k))); }
.hero__stage { position: relative; height: calc(var(--cs) * 1.4); place-items: center; align-content: center; }
/* отсвет снизу — как от неоновой полки */
.c3--hero .c3__face--bottom { backface-visibility: visible; background: color-mix(in oklab, var(--accent) 30%, var(--surface)); box-shadow: 0 0 160px 60px color-mix(in oklab, var(--accent) 34%, transparent); }

/* Круги логотипа: толще и ярче, пульс в ритм зала */
.halo { position: absolute; left: 50%; top: 50%; width: calc(1.75 * var(--cs)); height: auto; max-width: none; transform: translate(-50%, -50%) scale(calc(1 + var(--zp, 0) * var(--zoom-k, 0))); opacity: var(--fade, 1); pointer-events: none; z-index: 0; overflow: visible; }
.halo circle { fill: none; stroke: var(--accent); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transform-origin: 100px 100px; animation: halo-beat .94s ease-out infinite; }
.halo circle:nth-child(1) { opacity: .5; } .halo circle:nth-child(3) { opacity: .9; animation-delay: .12s; }
.halo .halo__dash { stroke-width: 3px; stroke-dasharray: 2 9; opacity: .9; animation: halo-spin 40s linear infinite; }
@keyframes halo-beat { 0% { transform: scale(1.035); stroke-opacity: 1; } 100% { transform: scale(1); stroke-opacity: .55; } }
@keyframes halo-spin { to { transform: rotate(360deg); } }

/* Подсказка — в колонке текста, видна только до первого поворота */
.hero__hint { margin-top: var(--space-5); font: 600 var(--step--1)/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); opacity: var(--hint, 1); transition: opacity var(--dur-reveal) var(--ease-out); }
.hero__hint::after { content: " ↓"; }

/* Финал: куб масштаба героя с кругами, справа */
.booking__stage { --cs: min(400px, 30vw); position: relative; display: grid; place-items: center; height: calc(var(--cs) * 1.65); }
.c3--spin { --s: var(--cs); --c3-edge: var(--lilac-line); position: relative; z-index: 1; margin: 0; }
.halo--fin { width: calc(1.8 * var(--cs)); }
.halo--fin circle { stroke: var(--lilac-line); }
.booking__info .booking__phone { margin-top: var(--space-5); }

@media (max-width: 900px) {
  /* телефон: куб — главный, текст компактнее; снизу 76px под плашку */
  .hero { --cs: min(62vw, calc((100svh - var(--header-row) - 440px) / 1.45)); --zoom-k: .22; }   /* 440 = текст+подпись+кнопка+поля, замер 375×812 */
  .hero .eyebrow { display: none; }
  .hero__title { font-size: min(2.25rem, 8.8cqi); }
  .hero__stage { height: calc(var(--cs) * 1.45); flex: none; }
  .hero__hint { order: 3; margin-top: calc(-1 * var(--space-2)); text-align: center; font-size: 0.6875rem; }
  .booking__stage { --cs: min(62vw, 280px); }
  /* липкая «Позвонить» и плашка PowerUP — одной полосой */
  .sticky-cta { right: calc(var(--gutter) + 184px); }
  .sticky-cta .btn { min-height: 46px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .hero { --cs: min(52vw, calc((100svh - var(--header-row) - 520px) / 1.45)); }
}
@media (prefers-reduced-motion: reduce) { .halo circle { animation: none; } }

@media (max-width: 900px) and (max-height: 700px) {
  .hero { --cs: min(62vw, calc((100svh - var(--header-row) - 370px) / 1.45)); }
  .hero__hint, .hero__hours { display: none; }
}
.booking { overflow-x: clip; }   /* круги за кубом финала не расширяют страницу */