*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#05010b}
body{overflow-x:hidden;font-family:Arial,sans-serif}
.page{width:100%;min-height:100vh;display:flex;justify-content:center}
.stage{
  position:relative;
  width:min(100vw,1903px);
  aspect-ratio:1903/685;
  background:#08000f url("background.png") center top/100% 100% no-repeat;
  flex:none;
  overflow:hidden;
}

/* Exact ticker position from the reference */
.ticker{
  position:absolute;
  left:25.28%;top:2.63%;
  width:22.02%;height:11.83%;
  border:3px solid #00ff62;border-radius:13px;
  background:rgba(2,0,14,.91);
  box-shadow:0 0 7px #00ff62,0 0 20px rgba(0,255,98,.25),
             inset 0 0 22px rgba(0,255,98,.10);
  overflow:hidden;
  z-index:5;
}
.ticker:before,.ticker:after{
  content:"";position:absolute;top:0;bottom:0;width:25px;z-index:2;
  pointer-events:none
}
.ticker:before{left:0;background:linear-gradient(90deg,rgba(2,0,14,1),transparent)}
.ticker:after{right:0;background:linear-gradient(270deg,rgba(2,0,14,1),transparent)}
.ticker-mask{height:100%;display:flex;align-items:center;overflow:hidden}
.ticker-track{
  display:flex;align-items:center;gap:38px;
  width:max-content;white-space:nowrap;
  font:900 clamp(18px,2.05vw,40px)/1 Arial,sans-serif;
  color:#ff008e;
  text-shadow:0 0 4px #ff008e,0 0 12px #ff008e,0 0 22px rgba(255,0,142,.55);
  animation:marquee 8.7s linear infinite;
  will-change:transform;
}
.ticker-track em{
  font-style:normal;color:#00f7ff;font-size:.72em;
  text-shadow:0 0 5px #00f7ff,0 0 14px #00f7ff
}
@keyframes marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-33.333333%,0,0)}
}

/* Click/hover zones. They don't replace the supplied artwork. */
.hotspots{position:absolute;inset:0;z-index:6}
 .hs{
  position:absolute;display:block;border-radius:9px;
  outline:1px solid transparent;
  color:#000;
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease
}
/* The original button labels live inside background.png. On hover the white overlay hides them,
   and these CSS-generated labels replace them with real black text. */
.hs::before{
  content:attr(data-label);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:#000;font:900 italic 13px Arial,sans-serif;letter-spacing:2px;
  text-shadow:none;opacity:0;transition:opacity .12s ease;pointer-events:none
}
.hs::after{
  content:'›';position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:#000;font:900 21px Arial,sans-serif;line-height:1;opacity:0;
  transition:opacity .12s ease;pointer-events:none
}
.hs:hover{background:#fff;transform:translateY(-1px)}
.hs:hover::before,.hs:hover::after{opacity:1}
.wide.hs::after{right:16px}
.courier::before,.driver::before,.chemist::before,.sport::before,
.courier::after,.driver::after,.chemist::after,.sport::after{display:none}
.courier:hover,.driver:hover,.chemist:hover,.sport:hover{background:rgba(116,255,34,.055);transform:none}
.op1{left:37.25%;top:25.1%;width:9.65%;height:5.75%}
.bot1{left:25.62%;top:32.1%;width:9.65%;height:5.75%}
.op2{left:37.25%;top:32.1%;width:9.65%;height:5.75%}
.bot2{left:25.62%;top:39.65%;width:9.65%;height:5.75%}
.rutor{left:25.62%;top:47.8%;width:9.65%;height:5.75%}
.support{left:37.25%;top:39.65%;width:9.65%;height:5.75%}
.work{left:37.25%;top:47.8%;width:9.65%;height:5.75%}
.news{left:25.62%;top:71.8%;width:21.25%;height:5.8%}
.about{left:25.62%;top:78.7%;width:21.25%;height:5.8%}
.chat{left:25.62%;top:85.7%;width:21.25%;height:5.8%}
.courier{left:51.65%;top:55.0%;width:5.9%;height:39.2%;border-radius:0}
.driver{left:57.55%;top:55.0%;width:5.9%;height:39.2%;border-radius:0}
.chemist{left:63.45%;top:55.0%;width:5.9%;height:39.2%;border-radius:0}
.sport{left:69.35%;top:55.0%;width:5.9%;height:39.2%;border-radius:0}
.courier:hover,.driver:hover,.chemist:hover,.sport:hover{
  background:rgba(116,255,34,.055)
}
.work-anchor{position:absolute;left:51.5%;top:55%;width:24%;height:40%;pointer-events:none}

.cursor{
  position:fixed;width:8px;height:8px;border-radius:50%;background:#fff;
  pointer-events:none;z-index:20;opacity:0;transform:translate(-50%,-50%);
  mix-blend-mode:difference;transition:width .15s,height .15s,opacity .15s
}
.toast{
  position:fixed;left:50%;bottom:20px;z-index:30;
  padding:9px 16px;border:1px solid #74ff22;border-radius:8px;
  background:rgba(3,0,14,.94);color:#fff;font:700 12px Arial,sans-serif;
  opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:.18s
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:700px){
  body{overflow:auto}
  .page{min-height:100vh;align-items:flex-start}
  .stage{
    width:100vw;
    min-width:760px;
    margin-left:0;
    transform-origin:top left;
  }
  .ticker-track{font-size:20px}
}