/* V20 — Infograpia-inspired visual preview wall, adapted to Premium Mockup */
.pm-visual-showcase{
  position:relative;
  overflow:hidden;
  padding:66px 0 72px;
  background:linear-gradient(180deg,#f7f9fc 0%,#f4f7fb 48%,#f8fafc 100%);
  border-top:1px solid #e8edf4;
  border-bottom:1px solid #e6ebf2;
}
.pm-visual-showcase-head{
  max-width:900px;
  margin:0 auto 30px;
  padding:0 24px;
  text-align:center;
}
.pm-visual-showcase-head>span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 11px;
  border-radius:999px;
  background:#e9f1ff;
  color:#2865d7;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}
.pm-visual-showcase-head h2{
  margin:13px 0 8px;
  color:#101a2d;
  font-size:clamp(28px,3vw,42px);
  line-height:1.12;
  letter-spacing:-.035em;
}
.pm-visual-showcase-head p{
  max-width:730px;
  margin:0 auto;
  color:#66758d;
  font-size:15px;
  line-height:1.7;
}
.pm-visual-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:10px 0 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4.5%,#000 95.5%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 4.5%,#000 95.5%,transparent 100%);
}
.pm-visual-marquee+.pm-visual-marquee{margin-top:8px}
.pm-visual-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:pm-v20-left 140s linear infinite;
}
.pm-visual-marquee.is-reverse .pm-visual-track{
  animation-name:pm-v20-right;
  animation-duration:150s;
}
.pm-visual-marquee:hover .pm-visual-track{animation-play-state:paused}
.pm-visual-group{display:flex;gap:22px;padding-right:22px}
.pm-visual-card{
  flex:0 0 420px;
  width:420px;
  height:244px;
  display:block;
  color:inherit!important;
  text-decoration:none!important;
  border-radius:18px;
  outline:none;
}
.pm-visual-frame{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border:0;
  border-radius:18px;
  background:#fff;
  box-shadow:0 11px 28px rgba(32,50,82,.075);
  transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease;
}
.pm-visual-card:hover .pm-visual-frame,
.pm-visual-card:focus-visible .pm-visual-frame{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:0 22px 46px rgba(31,58,105,.16);
}
.pm-visual-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
  transition:transform .36s ease,filter .36s ease;
}
.pm-visual-card:hover img{transform:scale(1.018);filter:saturate(1.03)}
.pm-visual-overlay{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  min-height:74px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:14px;
  background:rgba(12,26,52,.88);
  color:#fff;
  box-shadow:0 10px 26px rgba(7,18,39,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .24s ease,transform .24s ease;
}
.pm-visual-card:hover .pm-visual-overlay,
.pm-visual-card:focus-visible .pm-visual-overlay{opacity:1;transform:none}
.pm-visual-overlay small{
  display:block;
  margin-bottom:3px;
  color:#afc9ff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.pm-visual-overlay strong{
  display:block;
  overflow:hidden;
  color:#fff;
  font-size:15px;
  line-height:1.25;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.pm-visual-overlay span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:7px;
  color:#dbe7ff;
  font-size:10px;
  font-weight:700;
}
.pm-visual-overlay i{font-style:normal;font-size:13px}
.pm-visual-placeholder{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:28px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 20%,rgba(56,120,255,.14),transparent 28%),
    radial-gradient(circle at 82% 78%,rgba(91,74,234,.11),transparent 31%),
    linear-gradient(135deg,#fff,#f5f8ff);
}
.pm-visual-placeholder b{
  display:grid;
  place-items:center;
  width:74px;
  height:74px;
  border-radius:20px;
  background:#edf4ff;
  color:#2866d7;
  border:1px solid #d6e5ff;
  font-size:21px;
  letter-spacing:.03em;
}
.pm-visual-placeholder span{max-width:260px;color:#41516a;font-size:15px;font-weight:800}
@keyframes pm-v20-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pm-v20-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(max-width:760px){
  .pm-visual-showcase{padding:48px 0 54px}
  .pm-visual-showcase-head{margin-bottom:20px}
  .pm-visual-showcase-head p{font-size:13px}
  .pm-visual-group{gap:14px;padding-right:14px}
  .pm-visual-card{flex-basis:310px;width:310px;height:184px;border-radius:15px}
  .pm-visual-frame{border-radius:15px}
  .pm-visual-overlay{left:9px;right:9px;bottom:9px;min-height:64px;padding:9px 11px;border-radius:11px}
  .pm-visual-overlay strong{font-size:13px}
  .pm-visual-track{animation-duration:125s}
  .pm-visual-marquee.is-reverse .pm-visual-track{animation-duration:135s}
}
@media(hover:none){
  .pm-visual-overlay{opacity:1;transform:none;background:linear-gradient(180deg,transparent,rgba(9,22,46,.86));left:0;right:0;bottom:0;border:0;border-radius:0;padding:26px 13px 10px;min-height:62px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .pm-visual-overlay small,.pm-visual-overlay span{display:none}
}
@media(prefers-reduced-motion:reduce){.pm-visual-track{animation-play-state:paused!important;transform:none!important}}

/* V21 root hotfix — image-only moving wall. No legacy text-card body. */
.pm-visual-card{height:252px!important;}
.pm-visual-frame{background:#fff!important;}
.pm-visual-frame>img{width:100%!important;height:100%!important;object-fit:contain!important;background:#fff!important;}
.pm-visual-placeholder{position:relative;overflow:hidden;background:#fff!important;padding:0!important;}
.pm-v21-demo-art{position:absolute;inset:20px;border-radius:12px;background:linear-gradient(180deg,#fbfcff,#f5f8fd);border:1px solid #edf1f7;overflow:hidden}
.pm-v21-demo-art:before{content:"";position:absolute;left:24px;right:24px;top:22px;height:9px;border-radius:5px;background:#e4ebf6;box-shadow:0 18px 0 #eef2f8}
.pm-v21-bar{position:absolute;bottom:30px;width:48px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#5b8df7,#2d66da)}
.pm-v21-bar.b1{left:42px;height:64px}.pm-v21-bar.b2{left:104px;height:96px}.pm-v21-bar.b3{left:166px;height:126px}
.pm-v21-node{position:absolute;width:42px;height:42px;border-radius:50%;background:#fff;border:8px solid #6f83f5;box-shadow:0 4px 12px rgba(34,57,104,.08)}
.pm-v21-node.n1{right:150px;top:76px}.pm-v21-node.n2{right:88px;top:110px}.pm-v21-node.n3{right:28px;top:72px}
.pm-v21-line{position:absolute;height:5px;background:#d9e2f1;transform-origin:left center;border-radius:3px}
.pm-v21-line.l1{right:105px;top:104px;width:66px;transform:rotate(28deg)}.pm-v21-line.l2{right:47px;top:111px;width:68px;transform:rotate(-30deg)}
@media(max-width:760px){.pm-visual-card{height:188px!important}.pm-v21-demo-art{inset:14px}.pm-v21-bar{width:32px}.pm-v21-bar.b1{left:28px;height:44px}.pm-v21-bar.b2{left:70px;height:68px}.pm-v21-bar.b3{left:112px;height:88px}.pm-v21-node{width:30px;height:30px;border-width:6px}.pm-v21-node.n1{right:100px;top:58px}.pm-v21-node.n2{right:60px;top:82px}.pm-v21-node.n3{right:20px;top:56px}}