/* ---- Hero video player (replaces tilted phone mockup) ---- */
.hero-video-wrap { position:relative; }
.video-frame {
  position:relative; border-radius:24px; overflow:hidden; background:var(--dark3);
  box-shadow:0 30px 70px rgba(10,10,11,.45); aspect-ratio:9/16; max-height:640px;
  border:6px solid #1d1d22;
}
.video-frame video { width:100%; height:100%; object-fit:cover; display:block; }
.video-frame .vid-tag {
  position:absolute; top:18px; left:18px; z-index:3; background:var(--grad); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.8px; padding:6px 13px; border-radius:9999px;
  box-shadow:0 6px 18px rgba(255,92,0,.4);
}
.video-frame .sound-btn {
  position:absolute; top:16px; right:16px; z-index:3; width:38px; height:38px; border-radius:50%;
  background:rgba(10,10,11,.55); border:1px solid rgba(255,255,255,.3); color:#fff; cursor:pointer;
  font-size:15px; display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.video-frame .sound-btn:hover { background:rgba(10,10,11,.8); }
.video-frame .mute-hint {
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:3;
  background:rgba(10,10,11,.65); color:#fff; font-size:11.5px; font-weight:600; padding:6px 14px;
  border-radius:9999px; pointer-events:none; opacity:1; transition:opacity .4s;
}
.video-frame .mute-hint.hide { opacity:0; }
.video-frame .progress { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.2); z-index:3; }
.video-frame .progress i { display:block; height:100%; width:0%; background:var(--grad); }

/* side badges beside the video */
.hero-video-wrap .side-badge {
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:12px 16px; box-shadow:0 16px 40px rgba(20,20,23,.14); font-size:13px; font-weight:700;
  display:flex; align-items:center; gap:10px;
}
.hero-video-wrap .side-badge .ic { width:34px; height:34px; border-radius:10px; background:#FFF0E5; display:flex; align-items:center; justify-content:center; font-size:17px; }
.hero-video-wrap .sb-1 { top:6%; left:-46px; }
.hero-video-wrap .sb-2 { bottom:12%; right:-42px; }

@media (max-width:960px){
  .hero-video-wrap { max-width:320px; margin:0 auto; }
  .hero-video-wrap .sb-1 { left:-8px; }
  .hero-video-wrap .sb-2 { right:-8px; }
}