.hero-traffic { width: min(100%, 342px); margin-top: 18px; padding: 16px 18px 14px; border: 1px solid #2c3851; border-radius: 17px; color: #fff; background: linear-gradient(135deg, #101426, #1b2639); box-shadow: 0 18px 35px #1014261c; }
.hero-traffic-top { display: flex; align-items: center; justify-content: space-between; color: #b9c1cf; font-size: 10px; }
.hero-traffic-top > span { display: inline-flex; align-items: center; gap: 7px; }
.hero-traffic-top b { color: #f5cb4b; font-size: 11px; }
.hero-traffic-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #84c3b4; box-shadow: 0 0 0 5px #84c3b426; }
.hero-traffic-value { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.hero-traffic-value strong { color: #fff; font-size: 36px; line-height: 1; letter-spacing: -1px; }
.hero-traffic-value span { color: #aeb8c5; font-size: 11px; }
.hero-traffic-value em { margin-inline-start: auto; color: #ef734d; font-size: 22px; font-style: normal; }
.hero-traffic-chart { height: 27px; display: flex; align-items: end; gap: 5px; margin-top: 13px; padding-top: 7px; border-top: 1px solid #ffffff16; }
.hero-traffic-chart i { width: 15px; height: 8px; display: block; border-radius: 4px 4px 1px 1px; background: #84c3b4; opacity: .72; }
.hero-traffic-chart i:nth-child(2) { height: 11px; background: #84c3b4; }
.hero-traffic-chart i:nth-child(3) { height: 14px; background: #f5cb4b; }
.hero-traffic-chart i:nth-child(4) { height: 17px; background: #f5cb4b; }
.hero-traffic-chart i:nth-child(5) { height: 21px; background: #ef734d; }
.hero-traffic-chart i:nth-child(6) { height: 25px; background: #ef734d; }

@media (max-width: 760px) {
  .hero-traffic { width: min(100%, 342px); margin-right: auto; margin-left: auto; }
}