.hero{
  position: relative;
  padding: 28px 0 18px;
  overflow:hidden;
}

 .hero__tapes{
  position:absolute;
  top:-80px;
  bottom:-80px;
  left:50%;
  width:100vw;
  transform: translateX(-50%);
  pointer-events:none;
  opacity: .95;
  z-index: 0;
}

 .hero__inner{
  position: relative;
  z-index: 1;
  width: min(var(--container), calc(100% - 40px));
  margin-inline:auto;
}

.hero__videoWrap{
  position: relative;
  border-radius: var(--r2);
  border: 1px solid rgba(15, 20, 35, 0);
  background: rgba(255, 255, 255, 0);
  box-shadow: var(--shadow);
  overflow:hidden;

  width: min(860px, 100%);
  margin-inline:auto;
}

.hero__video{
  width: 100%;
  height: 350px;
  display:block;
  object-fit: cover;
}

@media (max-width: 720px){
    .hero__video{
        width: 100%;
        height: 215px;
        display:block;
        object-fit: cover;
}
}
    

.hero__hint{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:center;
  color: rgba(15,20,35,.62);
  font-weight: 720;
  letter-spacing:-0.01em;
}

.hero__hintDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  box-shadow: 0 0 0 6px rgba(255,122,24,.10);
  animation: hintPulse 1.6s ease-in-out infinite;
}

@keyframes hintPulse{
  0%,100%{ transform: scale(1); box-shadow: 0 0 0 6px rgba(255,122,24,.10); }
  50%{ transform: scale(1.12); box-shadow: 0 0 0 10px rgba(124,92,255,.10); }
}

 .tape{
  position:absolute;
  left:50%;
  width:160vw;
  max-width: 2200px;
  height: 44px;
  display:flex;
  align-items:center;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(15,20,35,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.38));
  box-shadow: 0 18px 60px rgba(10,16,32,.10);
  transform: translateX(-50%) rotate(var(--rot, -7deg));
  opacity: .62;
  filter: saturate(1.06);
}

.tape__inner{
  display:flex;
  width: max-content;
  gap: 18px;
  white-space: nowrap;
  will-change: transform;
  animation: marquee var(--dur, 16s) linear infinite;
  animation-delay: var(--delay, 0s);
  animation-direction: var(--dir, normal);
}

.tape__group{
  display:flex;
  gap: 18px;
  padding-right: 18px; /* seamless spacing at loop edge */
}

.tape__word{
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 13px;
  color: rgba(15,20,35,.62);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.tape__word strong{
  color: rgba(255,122,24,.72);
  font-weight: 950;
}

@keyframes marquee{
  to{ transform: translateX(-50%); }
}

@media (max-width: 720px){
  .hero{ padding: 20px 0 14px; }
   .hero__inner{
  position: relative;
  z-index: 1;
  width: min(var(--container), calc(100% - 40px));
  margin-inline:auto;
}
   .tape{
  position:absolute;
  left:50%;
  width:160vw;
  max-width: 2200px;
  height: 44px;
  display:flex;
  align-items:center;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(15,20,35,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.38));
  box-shadow: 0 18px 60px rgba(10,16,32,.10);
  transform: translateX(-50%) rotate(var(--rot, -7deg));
  opacity: .62;
  filter: saturate(1.06);
}
  .tape__word{ font-size: 12px; }
}

@media (prefers-reduced-motion: reduce){
  .tape__inner{ animation: none; }
  .hero__hintDot{ animation: none; }
}