/* Final hero reference pass. Loaded after home-production-fixes.css. */
html body:has(.ar-hero) .ar-visual { isolation:isolate; }
/* The production screenshot showed the original CSS handset AND the image handset. Never draw the CSS handset. */
html body:has(.ar-hero) .ar-visual .ar-device,
html body:has(.ar-hero) .ar-visual .ar-device.has-art {
  box-sizing:border-box !important;
  position:absolute !important;
  left:50% !important;
  top:-7px !important;
  width:min(410px,76%) !important;
  height:510px !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:translateX(-50%) !important;
  filter:none !important;
  z-index:2;
}
html body:has(.ar-hero) .ar-visual .ar-device::before,
html body:has(.ar-hero) .ar-visual .ar-device::after { display:none !important; content:none !important; }
html body:has(.ar-hero) .ar-visual .ar-device .ar-phone-art {
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  filter:drop-shadow(14px 23px 19px rgba(0,0,0,.37)) drop-shadow(0 0 27px rgba(40,85,244,.35));
}
/* The copy sits on the one artwork screen; it must not create a second handset. */
html body:has(.ar-hero) .ar-visual .ar-device .ar-device-content,
html body:has(.ar-hero) .ar-visual .ar-device.has-art .ar-device-content {
  display:block !important;
  position:absolute !important;
  z-index:3;
  inset:34% 25% auto 26% !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:#f4f8ff;
  text-align:center;
  text-shadow:0 2px 7px rgba(2,9,29,.65);
  font-family:Georgia,serif;
  font-style:italic;
  font-size:clamp(17px,1.28vw,21px);
  font-weight:400;
  line-height:1.36;
  transform:rotate(7deg);
}
html body:has(.ar-hero) .ar-visual .ar-orbit {
  inset:13% -2% 5%;
  border-color:rgba(55,137,255,.51);
  box-shadow:0 0 24px rgba(48,99,255,.23),inset 0 0 16px rgba(58,101,248,.13);
}
html body:has(.ar-hero) .ar-visual .ar-orbit::after { border-color:rgba(112,126,255,.22); }
/* Icons are independent floating objects, not six flat entries in two rigid columns. */
html body:has(.ar-hero) .ar-visual .ar-float { overflow:visible; z-index:4; }
html body:has(.ar-hero) .ar-visual .ar-float-icon { width:75px; height:75px; border-radius:21px; overflow:visible; transform-origin:center; will-change:transform; border:1px solid rgba(152,192,255,.35); box-shadow:0 13px 21px rgba(0,0,0,.35),0 0 23px rgba(49,113,255,.27); }
html body:has(.ar-hero) .ar-visual .ar-float-icon img { overflow:hidden; border-radius:20px; }
html body:has(.ar-hero) .ar-visual .ar-float > span:last-child { font-size:12px; line-height:1.23; text-shadow:0 3px 7px #06101d; }
html body:has(.ar-hero) .ar-visual [data-app-icon="sber"] { left:5%; right:auto; top:5%; }
html body:has(.ar-hero) .ar-visual [data-app-icon="max"] { left:auto; right:2%; top:6%; }
html body:has(.ar-hero) .ar-visual [data-app-icon="vk"] { left:0; right:auto; top:38%; }
html body:has(.ar-hero) .ar-visual [data-app-icon="tbank"] { left:auto; right:0; top:40%; }
html body:has(.ar-hero) .ar-visual [data-app-icon="psb"] { left:auto; right:7%; top:72%; }
html body:has(.ar-hero) .ar-visual [data-app-icon="alfa"] { left:6%; right:auto; top:72%; }
html body:has(.ar-hero) .ar-visual [data-app-icon="sber"] .ar-float-icon { transform:perspective(340px) rotate(-11deg) rotateY(-8deg) !important; box-shadow:0 0 28px rgba(38,221,137,.19),0 13px 22px rgba(0,0,0,.4); }
html body:has(.ar-hero) .ar-visual [data-app-icon="max"] .ar-float-icon { transform:perspective(340px) rotate(10deg) rotateY(9deg) !important; box-shadow:0 0 28px rgba(113,71,255,.3),0 13px 22px rgba(0,0,0,.4); }
html body:has(.ar-hero) .ar-visual [data-app-icon="vk"] .ar-float-icon { transform:perspective(340px) rotate(9deg) rotateY(-10deg) !important; box-shadow:0 0 24px rgba(37,127,255,.26),0 13px 22px rgba(0,0,0,.4); }
html body:has(.ar-hero) .ar-visual [data-app-icon="tbank"] .ar-float-icon { transform:perspective(340px) rotate(-9deg) rotateY(11deg) !important; box-shadow:0 0 24px rgba(255,210,62,.22),0 13px 22px rgba(0,0,0,.4); }
html body:has(.ar-hero) .ar-visual [data-app-icon="psb"] .ar-float-icon { transform:perspective(340px) rotate(7deg) rotateY(9deg) !important; }
html body:has(.ar-hero) .ar-visual [data-app-icon="alfa"] .ar-float-icon { transform:perspective(340px) rotate(-10deg) rotateY(-9deg) !important; }
@media(min-width:1100px) {
  html body:has(.ar-hero) .ar-hero { padding-bottom:48px; }
  html body:has(.ar-hero) .ar-hero-inner { min-height:520px; }
  html body:has(.ar-hero) .ar-visual { height:520px; }
}
@media(max-width:1109px) {
  html body:has(.ar-hero) .ar-visual .ar-float-desktop { display:none !important; }
  html body:has(.ar-hero) .ar-visual .ar-float-icon { width:45px; height:45px; border-radius:14px; }
  html body:has(.ar-hero) .ar-visual .ar-float-icon img { border-radius:13px; }
  html body:has(.ar-hero) .ar-visual .ar-device,
  html body:has(.ar-hero) .ar-visual .ar-device.has-art { top:0 !important; width:min(280px,88%) !important; height:345px !important; }
  html body:has(.ar-hero) .ar-visual .ar-device .ar-device-content { font-size:14px; }
}
@media(max-width:679px) {
  html body:has(.ar-hero) .ar-visual { isolation:isolate; }
  html body:has(.ar-hero) .ar-visual .ar-device,
  html body:has(.ar-hero) .ar-visual .ar-device.has-art { top:0 !important; width:min(160px,91%) !important; height:272px !important; }
  html body:has(.ar-hero) .ar-visual .ar-device .ar-device-content,
  html body:has(.ar-hero) .ar-visual .ar-device.has-art .ar-device-content { font-size:10px; inset:35% 25% auto 26% !important; }
  html body:has(.ar-hero) .ar-visual .ar-float-icon { width:36px; height:36px; border-radius:11px; }
  html body:has(.ar-hero) .ar-visual .ar-float-icon img { border-radius:10px; }
  html body:has(.ar-hero) .ar-visual .ar-float > span:last-child { font-size:8px; }
  html body:has(.ar-hero) .ar-visual [data-app-icon="sber"] { left:-1px; right:auto; top:20px; }
  html body:has(.ar-hero) .ar-visual [data-app-icon="max"] { left:-1px; right:auto; top:169px; }
  html body:has(.ar-hero) .ar-visual [data-app-icon="vk"] { left:auto; right:-2px; top:70px; }
  html body:has(.ar-hero) .ar-visual [data-app-icon="tbank"] { left:auto; right:-2px; top:190px; }
}
@media(max-width:360px) {
  html body:has(.ar-hero) .ar-visual .ar-device,
  html body:has(.ar-hero) .ar-visual .ar-device.has-art { width:min(146px,94%) !important; height:265px !important; }
  html body:has(.ar-hero) .ar-visual [data-app-icon="max"] { top:157px; }
  html body:has(.ar-hero) .ar-visual [data-app-icon="tbank"] { top:180px; }
}