/* Общие стили для страниц со сценами: Доставка, Гарантия, Ремонт.
   Левая колонка: заголовок, текст, золотые кнопки. Правая: 3D-сцена. */

.contact-block.sc-hero { align-items: center; }
.contact-block.sc-hero .display { font-size: clamp(32px, 4vw, 60px); line-height: 1.04; }
.contact-block.sc-hero .display span { white-space: normal; }
.contact-block.sc-hero .contact-info > p { max-width: 34em; }

@media (max-width: 820px) {
  .contact-block.sc-hero .display { font-size: clamp(28px, 8vw, 42px) !important; }
}

/* кнопки Telegram / Instagram — как «Рассчитать обмен» на странице Trade-in */
.sc-hero .cta-buttons { gap: 16px; }
.sc-hero .cta-buttons .button {
  position: relative; overflow: hidden; justify-content: space-between; gap: 22px;
  min-height: 68px; padding: 0 10px 0 32px; border: 0; border-radius: 999px;
  background: var(--ea-grad); color: #000;
  font: 700 21px/1 var(--sf-pro); letter-spacing: 0;
  box-shadow: 0 16px 40px rgba(201,160,108,.32), 0 1px 0 rgba(255,255,255,.6) inset;
  transition: transform .25s, box-shadow .25s;
}
.sc-hero .cta-buttons .button:before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); transition: left .7s ease;
}
.sc-hero .cta-buttons .button:hover {
  background: var(--ea-grad); color: #000; transform: translateY(-4px);
  box-shadow: 0 24px 52px rgba(201,160,108,.46), 0 1px 0 rgba(255,255,255,.6) inset;
}
.sc-hero .cta-buttons .button:hover:before { left: 130%; }
.sc-hero .cta-buttons .button:active { transform: scale(.985); }
.sc-hero .cta-buttons .button:focus-visible { outline: 3px solid #f3d9b8; outline-offset: 4px; }
.sc-hero .cta-buttons .button span {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #0a0a0a; color: #f3d9b8; font-size: 26px; font-weight: 700; line-height: 1;
  transition: transform .3s;
}
.sc-hero .cta-buttons .button:hover span { transform: translate(3px, -3px); }

@media (max-width: 820px) {
  body .sc-hero .cta-buttons .button, body .sc-hero .cta-buttons .button.full {
    min-height: 56px !important; padding: 0 7px 0 22px !important; font-size: 17px !important; gap: 12px !important;
  }
  .sc-hero .cta-buttons .button span { width: 42px; height: 42px; font-size: 22px; }
}


/* ---------- сцена: общая основа ---------- */
.sc-stage {
  --s: .9;
  position: relative;
  margin: 0 -8vw 0 -1vw;
  height: clamp(440px, 46vw, 600px);
  perspective: 2000px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 60%, transparent 100%);
}
.sc-glow {
  position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(201,160,108,.16), transparent 65%);
  filter: blur(30px);
}
.sc-world {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d;
}
@media (max-width: 820px) { .sc-stage { margin: 0 -8vw; height: clamp(320px, 62vw, 520px); } }
@media (max-width: 480px) { .sc-stage { height: 300px; } }

/* ---------- параллелепипеды ---------- */
.bx { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d;
  transform: translate3d(var(--x), var(--y), var(--z)); }
.bx > i {
  position: absolute; display: block; font-style: normal; overflow: hidden;
  background: linear-gradient(rgba(0,0,0,var(--sh,0)), rgba(0,0,0,var(--sh,0))), var(--c);
  backface-visibility: hidden;
}
.bx > .t { --sh: 0;   width: var(--l); height: var(--w); left: calc(var(--l) / -2); top: calc(var(--w) / -2);
  transform: translateZ(calc(var(--h) / 2)); }
.bx > .y { --sh: .22; width: var(--l); height: var(--h); left: calc(var(--l) / -2); top: calc(var(--h) / -2);
  transform: translateY(calc(var(--w) / 2)) rotateX(-90deg); }
.bx > .x { --sh: .42; width: var(--w); height: var(--h); left: calc(var(--w) / -2); top: calc(var(--h) / -2);
  transform: rotateZ(-90deg) translateY(calc(var(--l) / 2)) rotateX(-90deg); }
.bx b { position: absolute; display: block; }


@media (max-width: 820px) { .br-desk { display: none; } }