/* Product stage: a real image, dimensional frame, and independently moving layers. */
.hero-art {
  position: absolute;
  width: 61%;
  max-width: 1030px;
  aspect-ratio: 1.22;
  right: -2%;
  top: 55%;
  transform: translateY(-50%);
  pointer-events: none;
}
.orbit-parallax { height: 100%; transition: transform 650ms var(--ease); }
.product-showcase { height: 100%; padding: 0; animation: none; isolation: isolate; }
.product-showcase::before, .product-showcase::after { content: none; }
.product-stage-light {
  position: absolute;
  z-index: -2;
  width: 114%;
  max-width: none;
  height: 112%;
  object-fit: fill;
  left: -8%;
  top: 6%;
  mix-blend-mode: screen;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 84%, transparent), linear-gradient(transparent, #000 18%, #000 79%, transparent);
  mask-composite: intersect;
  animation: stage-breathe 7s ease-in-out infinite;
}
.product-light-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; }
.orbit-tracer { stroke: #ffbd7a; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .3 1 .8 2 4 92; filter: drop-shadow(0 0 5px #ff542e); animation: orbit-trace 13s linear infinite; opacity: .75; }
.screen-rig {
  position: absolute;
  width: 80%;
  top: 17%;
  left: 13%;
  transform: perspective(1300px) rotateX(calc(6deg + var(--rx, 0deg))) rotateY(calc(-13deg + var(--ry, 0deg))) rotateZ(-5deg);
  transform-style: preserve-3d;
  transition: transform 750ms var(--ease);
}
.screen-backplate { position: absolute; inset: 0; border-radius: 16px; pointer-events: none; border: 1px solid #ff8e6860; background: linear-gradient(135deg, #57302848, #130e0d85 50%, #8e322d25); box-shadow: 0 0 18px #ff53251c; }
.backplate-far { transform: translate3d(26px, -25px, -68px) rotate(8deg); opacity: .65; }
.backplate-near { transform: translate3d(11px, -12px, -33px) rotate(-3deg); opacity: .85; }
.product-screen {
  display: block;
  position: relative;
  width: 100%;
  padding: 9px;
  border: 1px solid #c0a89c;
  border-radius: 17px;
  background: linear-gradient(130deg, #646064, #151519 20%, #242124 75%, #ae6753);
  box-shadow: inset 0 0 0 2px #262328, 4px 3px 0 #3b3030, 7px 5px 0 #211b1d, 8px 6px 1px #ff7c58, 0 13px 34px #fb50272b, 0 34px 46px #0009;
  pointer-events: auto;
  cursor: zoom-in;
  overflow: hidden;
  transform: translateZ(0);
  transition: box-shadow 400ms, border-color 400ms;
}
.product-screen:hover, .product-screen:focus-visible { border-color: #fff0dc; box-shadow: inset 0 0 0 2px #302a2e, 4px 3px 0 #49322e, 7px 5px 0 #332524, 8px 6px 1px #ffb594, 0 13px 44px #fb50274d, 0 34px 46px #0009; }
.screen-image-window { position: relative; display: block; width: 100%; aspect-ratio: 1445 / 930; border-radius: 8px; overflow: hidden; background: #f6f8fb; }
.hero-product { position: absolute; left: -4.84%; top: -3.23%; width: 109.76%; height: auto; max-width: none; aspect-ratio: auto; object-fit: initial; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.product-screen::after { content: ""; position: absolute; inset: -50%; pointer-events: none; background: linear-gradient(115deg, transparent 42%, #fff2 48%, transparent 54%); transform: translateX(-75%); animation: screen-glint 10s ease-in-out infinite; }
.screen-expand { position: absolute; z-index: 2; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #ffffff36; border-radius: 9px; color: white; background: #10141de8; box-shadow: 0 3px 15px #0003; font-size: 12px; opacity: 0; transform: translate(-50%, 5px); transition: opacity 250ms, transform 250ms; }
.screen-expand .icon { width: 16px; height: 16px; }
.product-screen:hover .screen-expand, .product-screen:focus-visible .screen-expand { opacity: 1; transform: translate(-50%, 0); }
.product-platforms { position: absolute; inset: 0; display: block; margin: 0; padding: 0; list-style: none; z-index: 3; }
.product-platforms li { position: absolute; display: block; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; font-size: clamp(14px, 1.3vw, 22px); transform: translate3d(calc(var(--mx, 0px) * -.45), calc(var(--my, 0px) * -.45), 0); transition: transform 900ms var(--ease); }
.platform-tile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 17px 20px;
  color: #f5f3f1;
  border: 1px solid #b6a29b91;
  border-bottom-color: #ff7959a6;
  border-radius: 13px;
  background: linear-gradient(145deg, #594b49ed, #171719fa 36%, #121216f7 80%, #643127ee);
  box-shadow: inset 0 1px 1px #ffffff50, inset -3px -3px 4px #ff724020, 3px 3px 0 #413431, 4px 4px 0 #f0744c88, 0 16px 22px #0008;
  transform: perspective(600px) rotateY(-13deg) rotateZ(-7deg);
  animation: platform-hover 6s ease-in-out infinite;
  font-weight: 600;
  white-space: nowrap;
}
.platform-beacon { display: block; width: 11px; height: 15px; flex: 0 0 auto; border-radius: 50%; background: var(--platform-color); box-shadow: 0 0 14px var(--platform-color); }
.product-platforms .platform-mercado { --platform-color: #ffdf31; left: 0; top: 25%; }
.product-platforms .platform-amazon { --platform-color: #ffa829; right: -1%; top: 22%; }
.product-platforms .platform-tiktok { --platform-color: #2aeae4; left: -3%; top: 70%; font-size: clamp(12px, 1.13vw, 19px); }
.product-platforms .platform-ozon { --platform-color: #3283ff; right: -2%; top: 63%; }
.platform-amazon .platform-tile { animation-delay: -2s; }
.platform-tiktok .platform-tile { animation-delay: -3.8s; }
.platform-ozon .platform-tile { animation-delay: -1.2s; }
.product-embers { position: absolute; inset: 0; z-index: -1; }
.product-embers i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffc18c; box-shadow: 0 0 7px 2px #ff622a; animation: ember-drift 7s ease-in-out infinite; }
.product-embers i:nth-child(1) { left: 9%; top: 57%; }
.product-embers i:nth-child(2) { left: 96%; top: 40%; animation-delay: -3s; }
.product-embers i:nth-child(3) { left: 32%; top: 9%; animation-delay: -1s; width: 2px; height: 2px; }
.product-embers i:nth-child(4) { left: 65%; top: 86%; animation-delay: -4s; }
.product-embers i:nth-child(5) { left: 91%; top: 76%; animation-delay: -5s; width: 2px; height: 2px; }
.product-embers i:nth-child(6) { left: 2%; top: 85%; animation-delay: -2s; width: 2px; height: 2px; }
.hero-art.is-suspended *, .hero-art.is-suspended *::after { animation-play-state: paused !important; }
.product-preview-is-open { overflow: hidden; }
.product-dialog { width: min(1320px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); padding: 0; margin: auto; border: 1px solid #6b4840; border-radius: 18px; color: var(--text); background: #111; overflow: auto; overscroll-behavior: contain; box-shadow: 0 24px 100px #000c; }
.product-dialog::backdrop { background: #000d; backdrop-filter: blur(14px); }
.product-dialog-bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #141313f5; padding: 14px 20px; border-bottom: 1px solid #302624; }
.product-dialog h2 { font-size: 17px; font-weight: 600; }
.product-dialog h2 span { color: #999; font-size: 12px; font-weight: 400; margin-left: 14px; }
.product-dialog-close { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #ffffff0b; }
.product-dialog-close:hover { background: #ffffff1d; }
.product-dialog-image { overflow-x: auto; background: #090909; }
.product-dialog-image img { width: 100%; height: auto; }
.product-dialog-note { padding: 12px 20px 17px; font-size: 12px; color: #999; line-height: 1.6; }
.product-dialog-note span { display: none; }
@keyframes platform-hover { 0%, 100% { transform: perspective(600px) translateY(0) rotateY(-13deg) rotateZ(-7deg); } 50% { transform: perspective(600px) translateY(-9px) rotateY(-10deg) rotateZ(-5deg); } }
@keyframes stage-breathe { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.025); } }
@keyframes orbit-trace { to { stroke-dashoffset: -100; } }
@keyframes screen-glint { 0%, 65%, 100% { transform: translateX(-75%); opacity: 0; } 70% { opacity: .7; } 84% { transform: translateX(75%); opacity: 0; } }
@keyframes ember-drift { 0%, 100% { opacity: .15; transform: translateY(4px); } 50% { opacity: .8; transform: translateY(-16px); } }
@media (min-width: 1800px) { .hero-art { width: 63%; max-width: 1100px; } }
@media (max-width: 1150px) { .hero-art { width: 60%; top: 55%; right: -2%; } .platform-tile { padding: 13px 15px; gap: 9px; } .platform-beacon { width: 9px; height: 12px; } .product-screen { padding: 7px; border-radius: 14px; } }
@media (min-width: 801px) and (max-width: 980px) { .hero h1 { font-size: 7vw; } .hero-art { width: 60%; right: -2%; } .platform-tile { padding: 11px 13px; } .product-platforms li { font-size: 13px; } .product-platforms .platform-tiktok { font-size: 11px; } }
@media (max-width: 800px) {
  .hero-stage { display: flex; flex-direction: column; align-items: stretch; height: auto; min-height: 0; padding-top: 145px; }
  .hero-copy { width: 100%; }
  .hero h1 { font-size: clamp(60px, 9vw, 76px); }
  .hero-art { position: relative; right: auto; top: auto; transform: none; width: min(100%, 690px); margin: 24px auto 10px; aspect-ratio: 1.22; align-self: center; }
  .product-platforms li { font-size: 18px; }
  .product-platforms .platform-tiktok { font-size: 16px; }
  .product-screen { padding: 7px; }
  .hero-bottom { min-height: 82px; }
}
@media (max-width: 600px) {
  .hero-stage { padding-top: 128px; }
  .hero h1 { font-size: clamp(52px, 12.7vw, 75px); }
  .hero-art { width: calc(100% + 16px); max-width: 560px; margin-top: 34px; margin-bottom: 12px; aspect-ratio: 1.13; }
  .screen-rig { width: 84%; left: 10%; top: 21%; transform: perspective(900px) rotateX(4deg) rotateY(-10deg) rotateZ(-5deg); }
  .screen-backplate { border-radius: 9px; }
  .backplate-far { transform: translate3d(10px, -15px, -44px) rotate(8deg); }
  .backplate-near { transform: translate3d(6px, -8px, -20px) rotate(-3deg); }
  .product-screen { padding: 4px; border-radius: 9px; box-shadow: inset 0 0 0 1px #272429, 3px 3px 0 #44332e, 4px 4px 1px #ff855d, 0 15px 30px #ff4d2524; }
  .screen-image-window { border-radius: 5px; }
  .product-platforms li { font-size: 12px; }
  .product-platforms .platform-tiktok { font-size: 11px; }
  .platform-tile { padding: 11px 13px; gap: 7px; border-radius: 9px; }
  .platform-beacon { width: 7px; height: 10px; }
  .product-platforms .platform-mercado { left: -1%; top: 14%; }
  .product-platforms .platform-amazon { right: 0; top: 12%; }
  .product-platforms .platform-tiktok { left: -1%; top: 80%; }
  .product-platforms .platform-ozon { right: 0; top: 75%; }
  .product-stage-light { width: 121%; left: -10%; height: 106%; top: 12%; }
  .screen-expand { left: auto; right: 9px; bottom: 9px; padding: 6px; opacity: 1; transform: none; }
  .product-screen:hover .screen-expand, .product-screen:focus-visible .screen-expand { transform: none; }
  .screen-expand>span { display: none; }
  .screen-expand .icon { width: 14px; height: 14px; }
  .hero-product-note { font-size: 10px; }
  .product-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 13px; }
  .product-dialog-bar { padding: 10px 13px; }
  .product-dialog h2 { font-size: 15px; }
  .product-dialog h2 span { display: block; margin: 3px 0 0; font-size: 11px; }
  .product-dialog-image img { min-width: 780px; max-width: none; }
  .product-dialog-note { padding-inline: 13px; font-size: 11px; }
  .product-dialog-note span { display: block; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .hero-art *, .hero-art *::after { animation: none !important; transition: none !important; } .orbit-tracer { opacity: .3; } }