.ar-module-visual {
  position: relative;
  isolation: isolate;
  min-height: 620px;
  overflow: hidden;
  background: radial-gradient(circle at 52% 43%, rgba(46,107,255,.24), transparent 30%), linear-gradient(145deg, #0b1421, #111c2b 62%, #09111c);
}

.ar-module-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom,#000,transparent 88%);
}

.ar-module-visual::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 74px;
  left: 8%;
  z-index: 4;
  height: 1px;
  background: linear-gradient(90deg,transparent,#6390ff,transparent);
  box-shadow: 0 0 20px rgba(46,107,255,.72);
}

.ar-module-visual > img,
.ar-module-visual > video {
  position: absolute;
  inset: 28px 20px 66px;
  width: calc(100% - 40px);
  height: calc(100% - 94px);
  object-fit: contain;
  object-position: center bottom;
  mask-image: linear-gradient(to bottom,#000 0 89%,transparent 99%);
}

.ar-module-visual > video { z-index: 2; }
.ar-module-lockup { position: absolute; top: 23px; left: 22px; z-index: 6; display: flex; align-items: center; gap: 9px; }
.ar-module-lockup img { width: 116px; height: auto; }
.ar-module-lockup b { color: #6f98ff; font-family: var(--display); font-size: 17px; letter-spacing: .05em; }
.ar-module-live { position: absolute; top: 23px; right: 22px; z-index: 6; display: grid; grid-template-columns: auto 1fr; gap: 0 8px; padding: 11px 13px; border: 1px solid rgba(122,160,255,.26); border-radius: 12px; background: rgba(8,15,25,.75); backdrop-filter: blur(13px); }
.ar-module-live i { grid-row: 1 / 3; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #56dc99; box-shadow: 0 0 0 4px rgba(86,220,153,.1); }
.ar-module-live span { color: #80a5ff; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.ar-module-live strong { color: #e8eef8; font-size: 9px; line-height: 1.3; }
.ar-module-facts { position: absolute; right: 0; bottom: 0; left: 0; z-index: 6; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); min-height: 74px; border-top: 1px solid rgba(255,255,255,.13); background: rgba(8,15,25,.83); backdrop-filter: blur(14px); }
.ar-module-facts span { display: grid; align-content: center; min-width: 0; padding: 10px; border-left: 1px solid rgba(255,255,255,.1); color: #8f9daf; font-size: 9px; font-weight: 800; text-align: center; text-transform: uppercase; }
.ar-module-facts span:first-child { border-left: 0; }
.ar-module-facts strong { color: #fff; font-family: var(--display); font-size: 17px; font-weight: 650; line-height: 1; }

@media (max-width: 940px) {
  #module-ar .ar-module-visual { height: 500px; min-height: 500px; aspect-ratio: auto; }
}

@media (max-width: 700px) {
  #module-ar .ar-module-visual { height: 380px; min-height: 380px; }
  .ar-module-visual > img,
  .ar-module-visual > video { inset: 22px 10px 62px; width: calc(100% - 20px); height: calc(100% - 84px); }
  .ar-module-lockup { top: 14px; left: 14px; }
  .ar-module-lockup img { width: 88px; }
  .ar-module-lockup b { font-size: 14px; }
  .ar-module-live { top: 52px; right: 12px; max-width: 160px; padding: 8px 9px; }
  .ar-module-live strong { font-size: 8px; }
  .ar-module-facts { min-height: 62px; }
  .ar-module-facts span { padding: 8px 4px; font-size: 8px; }
  .ar-module-facts strong { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-module-visual > video { display: none; }
}