body { padding-bottom: 32px; }
.production-hero {
  width: calc(100% - clamp(10px, 2.2vw, 32px) * 2);
  max-width: 1600px; margin: 24px auto 0;
}
.hero-stage {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr);
  min-height: clamp(400px, 31.2vw, 480px); border-radius: 32px; overflow: hidden; background: #1f2936;
}
.hero-image-frame { position: absolute; inset: 0; z-index: -2; }
.production-photo { position: absolute; inset: 0; overflow: hidden; }
.production-photo img {
  display: block; max-width: none; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  transform-origin: 50% 50%; will-change: transform;
  animation: cinema-drift 84s cubic-bezier(.4, 0, .6, 1) infinite paused;
}
.production-hero.is-ready .production-photo img { animation-play-state: running; }
@keyframes cinema-drift {
  0%, 100% { transform: translate3d(-1%, 0, 0) scale(1.04); }
  48%, 52% { transform: translate3d(1%, 0, 0) scale(1.04); }
}
.hero-stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgb(17 29 43 / 95%) 0%, rgb(21 34 48 / 78%) 34%, rgb(21 34 48 / 62%) 59%, rgb(26 39 48 / 20%) 82%, rgb(23 37 46 / 5%) 100%), rgb(17 29 43 / 10%);
}
.hero-copy { position: relative; z-index: 1; min-width: 0; align-self: end; padding: 80px clamp(30px, 4vw, 64px) 36px; color: #fff; }
.hero-copy h1 { margin: 0; font-size: clamp(56.028px, 5.5062vw, 85.008px); font-weight: 700; line-height: 1.18; letter-spacing: .02em; white-space: nowrap; text-shadow: 0 2px 12px rgb(0 0 0 / 18%); }
.hero-actions { display: grid; grid-template-columns: minmax(0, 1fr) 228px; align-items: center; gap: clamp(28px, 3.3vw, 54px); margin-top: 28px; }
.production-order {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; justify-self: end;
  min-width: 228px; min-height: 56px; padding: 16px 20px; border: 0; border-radius: 16px; white-space: nowrap;
  color: #fff; background: linear-gradient(105deg, #0d7da0, #4a69d1);
  box-shadow: 0 5px 16px rgb(0 0 0 / 5%); text-shadow: 0 1px 3px rgb(0 0 0 / 5%);
  font: 700 17px/1.35 "Open Sans", Arial, sans-serif; cursor: pointer;
}
.production-order svg { flex-shrink: 0; }
.cinema-benefits { min-width: 0; }
.cinema-benefits ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.cinema-benefits li { display: flex; align-items: center; gap: 12px; min-width: 0; color: #fff; font-size: 16px; font-weight: 600; line-height: 1.45; }
.cinema-benefits li img { width: 52px; height: 52px; flex: 0 0 52px; filter: drop-shadow(0 1px 3px #111d2b55); }
.benefit-break { display: initial; }
@media (min-width: 1680px) {
  .cinema-benefits { width: 90%; }
  .cinema-benefits ul { gap: 21.6px; }
}
.order-popup { padding: 70px 28px 28px; }
.order-popup h2 { margin: 0; font-size: 26px; line-height: 1.2; }
.order-popup > p { margin: 10px 0 22px; color: #596675; font-size: 16px; }
.order-contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.order-contacts a { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 10px; border-radius: 16px; font-size: 16px; line-height: 1.25; background: #e5eaf0; }
.order-contacts a:hover { background: #dce3eb; }
.order-contacts img { flex-shrink: 0; }
@media (max-width: 1100px) {
  .hero-copy { padding: 56px 32px 28px; }
  .hero-copy h1 { font-size: clamp(50.4px, 6.825vw, 56.028px); }
  .hero-actions { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .production-order { min-width: 200px; gap: 14px; padding-inline: 18px; }
  .cinema-benefits ul { gap: 14px; }
  .cinema-benefits li { font-size: 15px; }
  .benefit-break { display: none; }
}
@media (max-width: 760px) {
  .production-hero { margin-top: 16px; }
  .hero-stage { min-height: 448px; border-radius: 26px; }
  .hero-stage::after { background: rgb(17 29 43 / 65%); }
  .production-photo { top: -20%; }
  .production-photo img { object-position: 18% 42%; }
  .hero-copy { align-self: stretch; display: flex; flex-direction: column; padding: 32px 24px 28px; }
  .hero-copy h1 { font-size: clamp(33.6px, 9.135vw, 46.2px); line-height: 1.12; white-space: normal; text-align: center; }
  .hero-title-continuation { display: block; white-space: nowrap; }
  .hero-actions { flex: 1; grid-template-rows: 1fr auto; gap: 24px; margin-top: 28px; }
  .production-order { width: min(100%, 228px); min-width: 0; min-height: 52px; font-size: 16px; padding: 14px 20px; gap: 24px; justify-content: space-between; justify-self: center; }
  .cinema-benefits ul { grid-template-columns: 1fr; }
  .cinema-benefits li img { width: 48px; height: 48px; flex-basis: 48px; }
}
@media (max-width: 360px) {
  .hero-copy { padding-inline: 20px; }
  .order-popup { padding-inline: 20px; }
  .order-contacts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .production-photo img { animation: none; will-change: auto; }
}