/* SellerMetrika cinematic Hero v4 — the right-hand illustration only.
   The existing dark page, top navigation, left copy and CTA are preserved. */
#top.hero .hero-stage.smc4-host { position:relative; width:100%; min-width:0; }
#sm-hero-cinema-v4 { width:100%; position:relative; container:smc4 / inline-size; isolation:isolate; color:#f5f8f6; }
#sm-hero-cinema-v4 * { box-sizing:border-box; }
#sm-hero-cinema-v4 .smc4-eyebrow { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#adc2b7; font-size:12px; margin:0 2px 8px; }
#sm-hero-cinema-v4 .smc4-eyebrow>span:first-child::before {content:''; display:inline-block; width:6px; height:6px; margin-right:8px; vertical-align:middle; border-radius:50%; background:#c5fb6b; box-shadow:0 0 9px #b8ff6d77;}
#sm-hero-cinema-v4 .smc4-eyebrow-right {color:#bdf96a; font-weight:650;}
#sm-hero-cinema-v4 .smc4-scene { position:relative; width:100%; aspect-ratio:1.29 / 1; min-height:0; overflow:visible; }
/* Existing PHOTO/RENDER: no CSS-drawn computer or monitor. A real screenshot is embedded in its physical screen. */
#sm-hero-cinema-v4 .smc4-photo {position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; border-radius:16px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%);
}
#sm-hero-cinema-v4 .smc4-photo::after {content:''; position:absolute; inset:auto 0 0; height:18%; z-index:2; background:linear-gradient(180deg, transparent,#0a0d10); pointer-events:none;}
#sm-hero-cinema-v4 .smc4-photo .smc4-plate {position:absolute; display:block; width:123%; max-width:none; height:auto; left:-11.5%; top:1.5%; filter:saturate(.92) brightness(.88);}
/* Physical display in the photographic plate: cropped REAL screenshot positioned within the bezel. */
#sm-hero-cinema-v4 .smc4-screen-wrap {position:absolute; width:54%; height:48%; left:22.4%; top:11.4%; overflow:hidden; background:#0b0e13; border-radius:3px; border:1px solid #0b1116;
  box-shadow:inset 0 0 12px #0009,0 0 8px #0016;
}
#sm-hero-cinema-v4 .smc4-screen {display:block; width:100%; height:100%; object-fit:fill; filter:contrast(1.04) saturate(.94); }
/* Independent cards: same design language as SellerMetrika dashboard, not part of the photo. */
#sm-hero-cinema-v4 .smc4-cards {position:absolute; inset:0; z-index:3; pointer-events:none;}
#sm-hero-cinema-v4 .smc4-card {position:absolute; width:21.6%; min-height:109px; padding:12px 11px 11px; border-radius:14px; overflow:hidden;
  border:1px solid rgba(193,251,129,.45); background:linear-gradient(138deg,rgba(34,84,58,.96),rgba(15,42,31,.96));
  box-shadow:0 12px 28px #000a, inset 0 1px #ffffff16; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
#sm-hero-cinema-v4 .smc4-card.burgundy {border-color:rgba(244,143,172,.42); background:linear-gradient(135deg,rgba(103,49,67,.96),rgba(49,30,46,.96));}
#sm-hero-cinema-v4 .smc4-card-head {font-size:11px; font-weight:730; line-height:1.25; display:flex; align-items:center; justify-content:space-between; gap:3px; margin:0 0 8px; }
#sm-hero-cinema-v4 .smc4-card-head svg {flex:none; width:14px; height:14px; color:#c5fb6a; }
#sm-hero-cinema-v4 .smc4-card.burgundy .smc4-card-head svg {color:#f7a3c2;}
#sm-hero-cinema-v4 .smc4-card-value {font-size:clamp(13px,1.25vw,20px); font-weight:800; letter-spacing:-.035em; white-space:nowrap; line-height:1.1;}
#sm-hero-cinema-v4 .smc4-card-detail {font-size:9px; line-height:1.3; color:#c4d4cd; margin:8px 0 0; min-height:12px;}
#sm-hero-cinema-v4 .smc4-card.burgundy .smc4-card-detail {color:#e4c5cf;}
#sm-hero-cinema-v4 .smc4-card-delta {display:inline-block; margin-top:7px; padding:3px 8px; font-size:10px; font-weight:730; line-height:1.3; border-radius:20px; color:#ddffa4; border:1px solid #b6fa7655; background:#87bd2740;}
#sm-hero-cinema-v4 .smc4-card.burgundy .smc4-card-delta {color:#ffbcd0; border-color:#ef9db055; background:#a35b7036;}
#sm-hero-cinema-v4 .left-one {left:0; top:8%;} #sm-hero-cinema-v4 .left-two {left:0; top:33%;} #sm-hero-cinema-v4 .left-three {left:0; top:58%;}
#sm-hero-cinema-v4 .right-one {right:0; top:8%;} #sm-hero-cinema-v4 .right-two {right:0; top:33%;} #sm-hero-cinema-v4 .right-three {right:0; top:58%;}
#sm-hero-cinema-v4 .smc4-note {margin:2px 0 0; text-align:center; font-size:11px; color:#9daead; line-height:1.35;}
/* Start hidden only after JS has created the scene; old site stays visible when JS is disabled. */
#sm-hero-cinema-v4[data-state="waiting"] [data-smc4-animate] {opacity:0;}
#sm-hero-cinema-v4[data-state="played"] [data-smc4-animate] {animation-duration:.78s; animation-timing-function:cubic-bezier(.16,.78,.23,1);animation-fill-mode:both;animation-iteration-count:1;}
#sm-hero-cinema-v4[data-state="played"] [data-smc4-animate="photo"] {animation-name:smc4-photo-enter;animation-delay:.08s;}
#sm-hero-cinema-v4[data-state="played"] .left-one {animation-name:smc4-left-enter;animation-delay:.38s;}
#sm-hero-cinema-v4[data-state="played"] .right-one {animation-name:smc4-right-enter;animation-delay:.51s;}
#sm-hero-cinema-v4[data-state="played"] .left-two {animation-name:smc4-left-enter;animation-delay:.64s;}
#sm-hero-cinema-v4[data-state="played"] .right-two {animation-name:smc4-right-enter;animation-delay:.77s;}
#sm-hero-cinema-v4[data-state="played"] .left-three {animation-name:smc4-left-enter;animation-delay:.90s;}
#sm-hero-cinema-v4[data-state="played"] .right-three {animation-name:smc4-right-enter;animation-delay:1.03s;}
#sm-hero-cinema-v4[data-state="played"] [data-smc4-animate="caption"] {animation-name:smc4-caption-enter;animation-delay:1.26s;animation-duration:.6s;}
@keyframes smc4-photo-enter {from{opacity:0;transform:translateY(25px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes smc4-left-enter {from{opacity:0;transform:translateX(-76px) rotate(-5deg) scale(.94);}to{opacity:1;transform:none;}}
@keyframes smc4-right-enter {from{opacity:0;transform:translateX(76px) rotate(5deg) scale(.94);}to{opacity:1;transform:none;}}
@keyframes smc4-caption-enter {from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
/* Component/container responsive behavior, independent of surrounding header breakpoints. */
@container smc4 (max-width: 690px) {
  #sm-hero-cinema-v4 .smc4-card {min-height:98px; padding:9px 8px; border-radius:11px;}
  #sm-hero-cinema-v4 .smc4-card-head {font-size:10px;margin-bottom:6px;}
  #sm-hero-cinema-v4 .smc4-card-head svg {width:12px;height:12px;}
  #sm-hero-cinema-v4 .smc4-card-value {font-size:clamp(12px,2.1cqw,16px);}
  #sm-hero-cinema-v4 .smc4-card-detail {font-size:8px;margin-top:6px;}
  #sm-hero-cinema-v4 .smc4-card-delta {font-size:9px;padding:2px 6px; margin-top:6px;}
}
@container smc4 (max-width: 545px) {
  #sm-hero-cinema-v4 .smc4-scene {aspect-ratio:auto; overflow:visible;}
  #sm-hero-cinema-v4 .smc4-photo {position:relative; display:block; width:100%; aspect-ratio:1.6 / 1;}
  #sm-hero-cinema-v4 .smc4-photo .smc4-plate {top:-3%;width:138%;left:-19%;}
  #sm-hero-cinema-v4 .smc4-screen-wrap {left:19.1%;top:10.7%;width:60.8%;height:67%;}
  #sm-hero-cinema-v4 .smc4-cards {position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:3px;}
  #sm-hero-cinema-v4 .smc4-card {position:relative; left:auto;right:auto;top:auto; width:100%;min-height:102px;padding:10px 11px;border-radius:12px;}
  #sm-hero-cinema-v4 .smc4-card-head {font-size:11px;} 
  #sm-hero-cinema-v4 .smc4-card-value {font-size:clamp(14px,4.1cqw,19px);}
  #sm-hero-cinema-v4 .smc4-card-detail {font-size:9px;}
  #sm-hero-cinema-v4 .smc4-note {margin-top:12px;}
  #sm-hero-cinema-v4[data-state="played"] .smc4-card {animation-name:smc4-mobile-enter;}
  @keyframes smc4-mobile-enter {from{opacity:0;transform:translateY(24px) scale(.97);}to{opacity:1;transform:none;}}
}
@container smc4 (max-width: 340px) {
  #sm-hero-cinema-v4 .smc4-eyebrow {font-size:10px;}
  #sm-hero-cinema-v4 .smc4-card {padding:9px 8px;}
  #sm-hero-cinema-v4 .smc4-card-value {font-size:13px;}
}
@media (prefers-reduced-motion:reduce) {
  #sm-hero-cinema-v4 [data-smc4-animate] {animation:none!important;opacity:1!important;transform:none!important;}
}

/* SMC4_MONITOR_SCREEN_FIX_V41 */
/* The photographic plate already contains a complete readable dashboard.
   Suppress the extra cropped 1614px overlay that stretched and hid the right edge. */
#sm-hero-cinema-v4 .smc4-screen-wrap { display: none !important; }