/* styles.css — вид Lychee («Салон-галерея»). Всё из токенов.
   Порядок: сигнатура → шапка и кнопки → первый экран → секции → мобильная композиция. */

/* ── Сигнатура: золотая рама со срезанными углами + паспарту ── */
.frame {
  --cut: var(--signature-cut);
  --chamfer: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  --ci: max(2px, calc(var(--signature-cut) - var(--signature-band) * 0.6));
  --chamfer-in: polygon(var(--ci) 0, calc(100% - var(--ci)) 0, 100% var(--ci), 100% calc(100% - var(--ci)),
    calc(100% - var(--ci)) 100%, var(--ci) 100%, 0 calc(100% - var(--ci)), 0 var(--ci));
  position: relative;
  isolation: isolate;
  padding: var(--signature-band);
  background: var(--signature-gilt);
  clip-path: var(--chamfer);
}
.frame::before { /* тёмная фаска между золотом и картиной */
  content: "";
  position: absolute; inset: calc(var(--signature-band) - 2px); z-index: -1;
  background: var(--signature-mat-bg);
  clip-path: var(--chamfer-in);
}
.frame > .slot { clip-path: var(--chamfer-in); }
.frame::after { /* золотой блик при наведении */
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, var(--signature-glow) 50%, transparent 62%);
  transform: translateX(-130%);
}
@media (hover: hover) {
  .frame:hover::after { transform: translateX(130%); transition: transform var(--dur-sheen) var(--ease-out); }
}

/* Развеска: рама появляется, качнувшись на гвозде */
.js .hang { opacity: 0; transform-origin: 50% 0; }
.hang.is-hung { animation: hang var(--dur-hang) var(--ease-out) both; animation-delay: var(--d, 0ms); }
.js .hero .frame--main.hang { opacity: 1; }
.hero .frame--main.is-hung { animation-name: hang-soft; }
@keyframes hang {
  0% { opacity: 0; transform: translateY(-14px) rotate(-2.5deg); }
  35% { opacity: 1; transform: translateY(0) rotate(1.4deg); }
  60% { transform: rotate(-0.7deg); }
  80% { transform: rotate(0.3deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes hang-soft {
  0% { transform: rotate(-1.6deg); }
  40% { transform: rotate(0.9deg); }
  70% { transform: rotate(-0.4deg); }
  100% { transform: none; }
}

/* ── Общее ── */
body { font-size: var(--step-0); }
::selection { background: var(--gold); color: var(--evening); }
.on-plaster { position: relative; isolation: isolate; background: var(--plaster); color: var(--ink-green); }
.on-plaster::before { /* фактура настоящей штукатурки со стены y6 */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("images/plaster.webp") 0 0 / 640px repeat;
  mix-blend-mode: multiply; opacity: 0.1;
}
.on-plaster :focus-visible { outline-color: var(--ink-green); }
h2 { font-size: var(--step-5); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.caps {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--gold);
}
.on-plaster .caps { color: var(--ink-green-muted); }

/* ── Шапка и кнопки ── */
.header { background: var(--evening); color: var(--cream); border-bottom: 1px solid color-mix(in oklab, var(--gold) 28%, transparent); }
.logo { display: block; flex: none; }
.logo img { height: 52px; width: auto; }
.nav__list { gap: var(--space-6); }
.nav__list a { text-decoration: none; font-size: var(--step--1); letter-spacing: 0.04em; padding-block: var(--space-2); background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.nav__list a:hover { color: var(--gold); background-size: 100% 1px; }
.lang button { color: var(--cream); }
.lang button[aria-pressed="true"] { color: var(--gold); }

.btn { border-radius: var(--radius-pill); font-weight: 600; font-size: var(--step--1); letter-spacing: 0.04em; padding-inline: 1.8em; min-height: 52px; }
.btn--primary:hover { background: var(--cream); }
.btn:not(.btn--primary) { border-color: var(--gold); color: var(--gold); }
.btn:not(.btn--primary):hover { background: var(--gold); color: var(--evening); }
.header__cta { background: transparent; color: var(--gold); border-color: var(--gold); min-height: 44px; }
.header__cta:hover { background: var(--gold); color: var(--evening); }
.on-plaster .btn--primary { background: var(--evening); color: var(--gold); }
.on-plaster .btn--primary:hover { background: var(--plane); color: var(--cream); }

.mobile-menu { background: var(--evening); border-top-color: color-mix(in oklab, var(--gold) 28%, transparent); min-height: calc(100svh - var(--header-h)); }
.mobile-menu ul { font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); }
.mobile-menu ul a, .mobile-menu .nav__list a { font-size: inherit; letter-spacing: -0.01em; text-decoration: none; }
.mobile-menu__foot { display: grid; gap: var(--space-4); margin-top: var(--space-7); color: var(--cream-muted); }
.mobile-menu__phone { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); color: var(--gold); text-decoration: none; }

/* ── Первый экран: стена-галерея ── */
.hero__inner {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5);
  align-items: center; min-height: calc(100svh - var(--header-h));
  padding-block: var(--space-8) var(--space-9);
}
.hero__text { grid-column: 1 / 6; display: grid; gap: var(--space-5); justify-items: start; }
.hero__title { font-size: var(--step-5); font-weight: 600; letter-spacing: -0.025em; line-height: 0.98; }
.hero__lead { font-size: var(--step-1); max-width: 30ch; color: var(--ink-green-muted); }
.status { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.03em; }
.status__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-green-muted); }
[data-open="true"] .status__dot { background: var(--turquoise); box-shadow: 0 0 0 4px color-mix(in oklab, var(--turquoise) 25%, transparent); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); margin-top: var(--space-4); }
.rating { display: inline-flex; align-items: baseline; gap: var(--space-3); text-decoration: none; }
.rating__num { font-variant-numeric: lining-nums; font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); line-height: 1; }
.rating__text { font-size: var(--step--1); max-width: 14ch; line-height: 1.3; text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); text-underline-offset: 3px; }

.hero__hang { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); }
.frame--main { grid-column: 1 / 8; grid-row: 1; --signature-band: clamp(10px, 1.1vw, 16px); --signature-cut: 22px; }
.frame--dog { grid-column: 9 / 13; grid-row: 1; align-self: end; margin-bottom: var(--space-8); --d: 260ms; }
.hero__hang .frame { translate: var(--px, 0) var(--py, 0); transition: translate 600ms var(--ease-out); }

/* Латунная лампа над главной рамой: горит, когда Lychee открыт */
.lamp {
  grid-column: 1 / 8; grid-row: 1; align-self: start; justify-self: center; z-index: 3;
  position: relative; width: 44%; height: 30px; margin-top: -40px;
}
.lamp::before { /* кронштейн */
  content: ""; position: absolute; left: 50%; top: 0; width: 3px; height: 34px; translate: -50% -22px;
  background: linear-gradient(var(--gold), oklch(0.55 0.07 70));
}
.lamp__shade { /* абажур: латунный желоб, раскрытый вниз */
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, oklch(0.45 0.06 68 / 0.7), transparent 22%, oklch(0.97 0.06 92 / 0.55) 38%, transparent 55%, oklch(0.45 0.06 68 / 0.75)),
    linear-gradient(180deg, oklch(0.88 0.07 88), var(--gold) 45%, oklch(0.5 0.07 68));
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  border-radius: 3px;
}
.lamp::after { /* тёплый конус света на картину и стену */
  content: ""; position: absolute; left: -45%; right: -45%; top: 26px; height: 480px; pointer-events: none;
  background: radial-gradient(ellipse 48% 66% at 50% 0, var(--signature-light), transparent 74%);
  mix-blend-mode: hard-light;
  opacity: 0; transition: opacity 1.4s var(--ease-out);
}
[data-open="true"] .lamp::after { opacity: 1; }
.hero { overflow: clip; background: radial-gradient(ellipse 75% 85% at 64% 32%, transparent 50%, oklch(0.72 0.015 110 / 0.18)), var(--plaster); }
.hero__hang { position: relative; }
.hero__hang .frame { z-index: 1; }
.hero__hang::before { /* пятно света лампы на стене */
  content: ""; position: absolute; z-index: 0; left: -12%; width: 82%; top: -40px; height: 115%; pointer-events: none;
  background: radial-gradient(ellipse 50% 55% at 50% 12%, oklch(0.97 0.05 88 / 0.9), transparent 72%);
  -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%);
  opacity: 0; transition: opacity 1.4s var(--ease-out);
}
[data-open="true"] .hero__hang::before { opacity: 1; }
[data-open="true"] .frame--main { background: linear-gradient(180deg, oklch(0.98 0.06 92 / 0.85), transparent 16%), var(--signature-gilt); }
[data-open="true"] .lamp__shade { box-shadow: 0 6px 18px -4px var(--signature-light); }

/* ── Салон ── */
.salon__inner {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-6);
  padding-block: var(--section);
  border-top: 1px solid color-mix(in oklab, var(--ink-green) 16%, transparent); /* молдинг: стык двух стен */
}
.salon__title { grid-column: 1 / 8; font-family: var(--font-display); font-size: var(--step-0); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-green-muted); }
.salon__quote { grid-column: 1 / 9; grid-row: 2; margin: 0; }
.salon__quote p { font-family: var(--font-display); font-weight: 600; font-size: var(--step-4); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.salon__quote cite { display: block; margin-top: var(--space-4); font-style: normal; font-size: var(--step--1); color: var(--ink-green-muted); }
.salon__text { grid-column: 2 / 7; grid-row: 3; font-size: var(--step-1); max-width: 46ch; }
.salon__art { grid-column: 9 / 13; grid-row: 1 / 5; align-self: start; }

/* ── Меню ── */
.menu { padding-block: var(--section); }
.menu__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.menu__note { font-size: var(--step--1); color: var(--cream-muted); }
.tabs { display: flex; gap: var(--space-6); margin-block: var(--space-7) var(--space-8); border-bottom: 1px solid color-mix(in oklab, var(--gold) 30%, transparent); }
.tabs [role="tab"] {
  background: none; border: 0; padding: var(--space-3) 0; margin-bottom: -1px; min-height: 44px;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--cream-muted); border-bottom: 1px solid transparent; transition: color var(--dur-micro) var(--ease-out);
}
.tabs [role="tab"]:hover { color: var(--cream); }
.tabs [aria-selected="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.menu__panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-7); align-items: start; }
.menu__panel:focus-visible { outline-offset: 8px; }
.menu__art { grid-column: 1 / 6; grid-row: 1 / 3; }
#panel-bar .menu__art { grid-column: 2 / 5; }
#panel-hookah .menu__art { grid-column: 1 / 8; }
.dishes, .menu__hookah { grid-column: 7 / 13; }
.dishes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
.dishes li { padding-block: var(--space-4); border-bottom: 1px solid color-mix(in oklab, var(--gold) 28%, transparent); font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.15; }
.menu__hookah { font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); line-height: 1.1; align-self: center; }
.menu__minis { grid-column: 7 / 13; align-items: start; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--space-5); }
.menu__minis .frame:first-child { grid-column: 1 / 4; }
.menu__minis .frame:last-child { grid-column: 4 / 7; margin-top: var(--space-8); --d: 160ms; }

/* ── Залы ── */
.halls { background: var(--plane); padding-block: var(--section); }
.halls__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-8); align-items: start; }
.halls h2 { grid-column: 1 / 13; }
.hall { display: grid; gap: var(--space-4); }
.hall--smoke { grid-column: 1 / 7; }
.hall--clean { grid-column: 8 / 12; margin-top: var(--space-10); }
.hall .frame { margin-bottom: var(--space-3); }
.hall h3 { font-size: var(--step-3); font-weight: 600; letter-spacing: -0.01em; }
.hall p { max-width: 40ch; color: var(--cream-muted); }
.hall__terrace { grid-column: 2 / 6; }
.halls__facts { grid-column: 7 / 13; align-self: center; display: grid; gap: var(--space-5); }
.halls__facts li { display: flex; align-items: baseline; gap: var(--space-4); font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.15; }
.halls__facts li::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--gold); rotate: 45deg; translate: 0 -0.2em; }

/* ── Кальян: самая тёмная секция, один луч ── */
.hookah {
  padding-block: var(--section);
  background: radial-gradient(ellipse 38% 60% at 30% 40%, color-mix(in oklab, var(--gold) 16%, transparent), transparent 70%), var(--evening);
}
.hookah__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: center; }
.hookah__art { grid-column: 2 / 6; }
.hookah__text { grid-column: 7 / 12; display: grid; gap: var(--space-5); justify-items: start; }
.hookah__lead { font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); line-height: 1.1; color: var(--gold); }
.hookah__text p:not(.hookah__lead) { max-width: 44ch; color: var(--cream-muted); }

/* ── Отзывы: этикетки к картинам ── */
.reviews__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-7); padding-block: var(--section); }
.reviews__head { grid-column: 1 / 5; display: grid; gap: var(--space-4); align-content: start; }
.reviews__score { display: grid; gap: var(--space-4); font-size: var(--step--1); color: var(--ink-green-muted); }
.reviews__num { font-variant-numeric: lining-nums; font-family: var(--font-display); font-weight: 600; font-size: clamp(6rem, 13vw, 11rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--ink-green); }
.quotes { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.quotes li:nth-child(even) { margin-top: var(--space-9); }
.quotes blockquote { margin: 0; padding-left: var(--space-5); border-left: 1px solid var(--ink-green-muted); font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.15; }
.reviews__more { grid-column: 6 / 13; justify-self: start; font-weight: 600; font-size: var(--step--1); text-underline-offset: 4px; }

/* ── Бронь, контакты, финал ── */
.contacts { padding-top: var(--section); overflow: hidden; }
.contacts__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: center; }
.contacts__text { grid-column: 1 / 6; display: grid; gap: var(--space-6); justify-items: start; }
.contacts__lead { font-size: var(--step-1); max-width: 40ch; color: var(--cream-muted); }
.contacts__info { font-style: normal; display: grid; gap: var(--space-2); padding-top: var(--space-5); border-top: 1px solid color-mix(in oklab, var(--gold) 28%, transparent); width: 100%; }
.contacts__address { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.15; color: var(--cream); }
.contacts__info p:not(.contacts__address) { color: var(--cream-muted); }
.contacts__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-3); }
.contacts__links a { color: var(--cream); text-underline-offset: 4px; }
.contacts__links a:hover { color: var(--gold); }

/* Табличка брони: золочёная рама, внутри — поле логотипа */
.plaque {
  grid-column: 7 / 13;
  --signature-mat-bg: var(--plane); --signature-band: clamp(8px, 0.9vw, 13px); --signature-cut: 22px;
  display: grid; gap: var(--space-5); justify-items: start;
  padding: clamp(32px, 4.4vw, 64px);
}
.plaque .caps { color: var(--gold); }
.plaque__phone {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  font-variant-numeric: lining-nums; line-height: 1; letter-spacing: -0.01em; white-space: nowrap;
  color: var(--cream); text-decoration: none; transition: color var(--dur-micro) var(--ease-out);
}
.plaque__phone:hover { color: var(--gold); }
.plaque__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }
.plaque__halls { padding-top: var(--space-5); border-top: 1px solid color-mix(in oklab, var(--gold) 30%, transparent); width: 100%; font-size: var(--step--1); letter-spacing: 0.06em; color: var(--cream-muted); }

.finale { display: flex; align-items: center; gap: var(--space-6); width: min(100% - 2 * var(--gutter), var(--container)); margin: var(--space-9) auto 0; padding-bottom: var(--space-8); }
.finale__mark { width: clamp(56px, 8vw, 140px); flex: none; }
.finale__line { font-family: var(--font-display); font-weight: 600; font-size: var(--step-finale); line-height: 0.8; letter-spacing: -0.04em; color: var(--gold); white-space: nowrap; }

.sticky-cta.is-on.is-away { transform: translateY(calc(100% + 2 * var(--gutter))); }
.dish--noted { display: grid; gap: var(--space-1); }
.dish__note { font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); line-height: 1.4; color: var(--cream-muted); }
.mobile-menu__phone, .contacts__address { font-variant-numeric: lining-nums; }

.footer { padding-block: var(--space-6); border-top: 1px solid color-mix(in oklab, var(--gold) 20%, transparent); color: var(--cream-muted); }

/* ── Мобильная композиция ── */
@media (max-width: 900px) {
  .logo img { height: 40px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; row-gap: var(--space-8); padding-block: var(--space-7) var(--space-8); }
  .hero__inner { row-gap: var(--space-4); padding-top: var(--space-6); }
  .hero__text { display: contents; }
  .hero__text > * { grid-column: 1; justify-self: start; }
  .hero .caps { order: 1; }
  .hero__title { order: 2; font-size: clamp(2.75rem, 13.6vw, 3.75rem); }
  h2 { font-size: 2.5rem; }
  .hero .caps { letter-spacing: 0.14em; font-size: var(--step--1); }
  .hero__hang { order: 3; grid-column: 1; justify-self: center; width: 70%; display: block; }
  .hero__hang::before { left: -30%; width: 160%; top: 10px; height: 100%; }
  .hero__actions { order: 4; margin-top: var(--space-2); }
  .hero__lead { order: 5; margin-top: var(--space-3); }
  .hero .status { order: 6; }
  .frame--dog { display: none; }
  .hero__hang { padding-top: var(--space-5); }
  .lamp { width: 52%; height: 24px; margin: 0 auto var(--space-4); display: block; }

  .salon__inner { grid-template-columns: minmax(0, 1fr); }
  .salon__title, .salon__quote, .salon__text { grid-column: 1; grid-row: auto; }
  .salon__art { grid-column: 1; grid-row: auto; width: 78%; justify-self: end; margin-top: 0; }

  .tabs { gap: var(--space-5); overflow-x: auto; scrollbar-width: none; margin-block: var(--space-6); }
  .menu__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-6); }
  .menu__art, #panel-bar .menu__art, #panel-hookah .menu__art, .dishes, .menu__hookah, .menu__minis { grid-column: 1 / -1; grid-row: auto; }
  #panel-bar .menu__art { width: 62%; }
  .menu__minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu__minis .frame:first-child, .menu__minis .frame:last-child { grid-column: auto; }
  .dishes { grid-template-columns: minmax(0, 1fr); }
  .dishes li { font-size: 1.375rem; padding-block: var(--space-3); }

  .halls__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-7); }
  .halls h2, .hall--smoke, .hall--clean, .hall__terrace, .halls__facts { grid-column: 1; }
  .hall--clean { margin-top: 0; width: 84%; justify-self: end; }
  .hall__terrace { width: 84%; }

  .hookah__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-7); }
  .hookah__art { grid-column: 1; width: 72%; }
  .hookah__text { grid-column: 1; }

  .reviews__inner { grid-template-columns: minmax(0, 1fr); }
  .reviews__head, .quotes, .reviews__more { grid-column: 1; }
  .quotes { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .quotes li:nth-child(even) { margin-top: 0; padding-left: var(--space-7); }

  .contacts__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); }
  .contacts__inner { row-gap: var(--space-6); }
  .contacts__text { display: contents; }
  .contacts__text > *, .plaque { grid-column: 1; justify-self: start; }
  .contacts h2 { order: 1; }
  .plaque { order: 2; justify-self: stretch; margin-inline: calc(var(--gutter) * -0.5); }
  .contacts__lead { order: 3; }
  .contacts__info { order: 4; }
  .plaque__phone { font-size: clamp(1.75rem, 9vw, 2.5rem); }
  .plaque__actions { width: 100%; }
  .plaque__actions .btn { flex: 1 1 100%; }
  .finale { flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-top: var(--space-8); }
  .finale__line { font-size: 16vw; }
}

@media (min-width: 481px) and (max-width: 900px) {
  .sticky-cta { left: auto; }
  .sticky-cta .btn { width: auto; }
  .plaque__actions .btn { flex: 0 1 auto; }
  .plaque { justify-self: start; margin-inline: 0; width: min(100%, 36rem); }
}

@media (prefers-reduced-motion: reduce) {
  .js .hang { opacity: 1; }
  .hang.is-hung { animation: none; }
  .hero__hang .frame { translate: none; }
  .frame::after { display: none; }
}

/* ── Плашка 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) { .sticky-cta.is-on:not(.is-away) ~ .pu-badge { bottom: 86px; } }