.hv { position: relative; justify-self: end; margin-right: 36px; animation: rise .9s .15s cubic-bezier(.22, 1, .36, 1) both; }
/* ===== Первый экран: смартфон с живыми отзывами ===== */
.hv-phone { width: 280px; }
.hero-orb {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 42%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
}
.hero-orb.is-live { background: transparent; }
.hero-orb-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 128%;
  height: 128%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hv-phone .ip { z-index: 1; }
.ip {
  position: relative; aspect-ratio: 9 / 19.5; border-radius: 52px; padding: 9px;
  /* титановая рамка */
  background: linear-gradient(145deg, #C9CDD3 0%, #7E848D 18%, #3B4048 40%, #23272E 60%, #6C727B 82%, #B7BCC3 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 0 3px #15181D,
    0 60px 100px -40px rgba(0,0,0,.85), 0 0 90px -25px var(--glow);
  transform: perspective(1400px) rotateY(-12deg) rotateX(4deg) rotateZ(1deg);
  transform-origin: 50% 70%;
  will-change: transform, box-shadow;
  animation: phone-sway 6.5s cubic-bezier(.45, .05, .55, .95) infinite;
}
/* Плавное покачивание влево–вправо с лёгким 3D-наклоном и смещением тени */
@keyframes phone-sway {
  0%, 100% {
    transform: perspective(1400px) translate3d(-16px, 4px, 0) rotateY(-16deg) rotateX(5deg) rotateZ(1.4deg);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 0 3px #15181D,
      22px 58px 95px -42px rgba(0,0,0,.78), 0 0 90px -25px var(--glow);
  }
  50% {
    transform: perspective(1400px) translate3d(16px, -4px, 0) rotateY(-8deg) rotateX(3deg) rotateZ(-0.6deg);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 0 3px #15181D,
      -22px 62px 95px -42px rgba(0,0,0,.78), 0 0 90px -25px var(--glow);
  }
}
.ip-btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #5B6068, #A9AEB5); }
.ip-action { left: -3px; top: 17%; height: 4.5%; }
.ip-vol1 { left: -3px; top: 25%; height: 8%; }
.ip-vol2 { left: -3px; top: 35%; height: 8%; }
.ip-power { right: -3px; top: 27%; height: 12%; background: linear-gradient(270deg, #5B6068, #A9AEB5); }
.ip-cam { right: -3px; top: 52%; height: 7%; background: linear-gradient(270deg, #3E434A, #8D929A); }
.ip-screen {
  position: relative; height: 100%; border-radius: 44px; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #282F3F 0%, #222939 50%, #1A2131 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.8);
  font-family: "Onest", system-ui, sans-serif; color: #fff;
}
.ip-screen::after { /* блик на стекле */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.05) 100%);
}
.ip-status { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px 6px 28px; height: 44px; font-size: 13px; }
.ip-status b { font-weight: 600; letter-spacing: .01em; }
.ip-island { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); width: 74px; height: 22px; border-radius: 14px; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.ip-icons { display: flex; align-items: center; gap: 5px; }
.ip-icons i { display: block; background: #fff; }
.ip-icons .sig { width: 15px; height: 9px; -webkit-mask: linear-gradient(90deg,#000 0 3px,transparent 3px 4px,#000 4px 7px,transparent 7px 8px,#000 8px 11px,transparent 11px 12px,#000 12px); clip-path: polygon(0 75%,25% 75%,25% 50%,50% 50%,50% 25%,75% 25%,75% 0,100% 0,100% 100%,0 100%); }
.ip-icons .wifi { width: 13px; height: 9px; clip-path: polygon(50% 100%, 0 30%, 15% 12%, 50% 0, 85% 12%, 100% 30%); }
.ip-icons .bat { width: 22px; height: 10px; border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); position: relative; }
.ip-icons .bat::after { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 14px; border-radius: 1.5px; background: #fff; }
.ip-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 10px; font-size: 13px; font-weight: 600; }
.ip-head span { opacity: .9; }
.ip-back, .ip-more { width: 18px; height: 18px; background: rgba(255,255,255,.85); }
.ip-back { -webkit-mask: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); mask: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.ip-more { -webkit-mask: center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E"); mask: center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E"); }
/* видео целиком: 3:4, на всю ширину экрана, по центру */
.ip-video { flex: 1 1 auto; display: flex; align-items: center; min-height: 0; }
.ip-video video { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: contain; display: block; background: transparent; }
.ip-tabs { display: flex; justify-content: space-around; align-items: center; padding: 10px 18px 26px; border-top: 1px solid rgba(255,255,255,.06); background: rgba(14, 19, 30, .6); }
.ip-tabs i { position: relative; width: 22px; height: 22px; background: rgba(255,255,255,.55); }
.ip-tabs .t-home { background: #fff; -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7v9H4z'/%3E%3C/svg%3E"); mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7v9H4z'/%3E%3C/svg%3E"); }
.ip-tabs .t-grid { -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.ip-tabs .t-cart { -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h2l2.2 10h10.6L20 8H7'/%3E%3Ccircle cx='9' cy='19' r='1.4'/%3E%3Ccircle cx='17' cy='19' r='1.4'/%3E%3C/svg%3E"); mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h2l2.2 10h10.6L20 8H7'/%3E%3Ccircle cx='9' cy='19' r='1.4'/%3E%3Ccircle cx='17' cy='19' r='1.4'/%3E%3C/svg%3E"); }
.ip-tabs .t-user { -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); }
.ip-tabs .t-cart b { display: none; }
.ip-home { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 100px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.75); }
.hv-phone .chip.c1 { left: -70px; top: 70px; }
.hv-phone .chip.c2 { right: -60px; top: 46%; animation-delay: -1.3s; }
.hv-phone .chip.c3 { left: -84px; bottom: 90px; animation-delay: -2.6s; }

/* Плавающие иконки маркетплейсов */
.mp-float {
  position: absolute;
  z-index: 3;
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  background: transparent;
  box-shadow:
    0 16px 36px -14px rgba(0, 0, 0, .7),
    0 0 0 1px rgba(255, 255, 255, .12);
  pointer-events: none;
  animation: mp-float 4.8s ease-in-out infinite;
}
.mp-float img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-wb { left: -40px; top: 64px; }
.mp-ozon { right: -34px; top: 54%; animation-delay: -2.4s; animation-duration: 5.4s; }
@keyframes mp-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50% { transform: translate3d(0, -12px, 0) rotate(3deg); }
}

@media (max-width: 900px) {
  .hv-phone { width: 250px; margin-top: 12px; }
  .hero-orb { width: 300px; height: 300px; }
  .ip {
    border-radius: 46px;
    animation-name: phone-sway-flat;
  }
  .ip-screen { border-radius: 38px; }
  .mp-wb { left: -8px; top: 28px; }
  .mp-ozon { right: -6px; top: 58%; }
  .mp-float { width: 58px; height: 58px; border-radius: 16px; }
}
@keyframes phone-sway-flat {
  0%, 100% {
    transform: translate3d(-10px, 3px, 0) rotateZ(1deg);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 0 3px #15181D,
      14px 42px 70px -30px rgba(0,0,0,.7), 0 0 70px -25px var(--glow);
  }
  50% {
    transform: translate3d(10px, -3px, 0) rotateZ(-1deg);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 0 3px #15181D,
      -14px 46px 70px -30px rgba(0,0,0,.7), 0 0 70px -25px var(--glow);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hv { animation: none !important; }
  .ip { animation: none !important; transform: perspective(1400px) rotateY(-12deg) rotateX(4deg) rotateZ(1deg); }
  .mp-float { animation: none !important; }
}
@media (max-width: 900px) { .hv { justify-self: center; margin-right: 0; } }
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .ip { transform: none; }
}