<nav class="radikalwp-nav-dots" aria-label="بخش‌های صفحه"><a class="radikalwp-nav-dots-item is-active" href="#intro" data-dot="معرفی"><//a><a class="radikalwp-nav-dots-item" href="#features" data-dot="ویژگی‌ها"><//a><a class="radikalwp-nav-dots-item" href="#gallery" data-dot="نمونه‌ها"><//a><a class="radikalwp-nav-dots-item" href="#buy" data-dot="خرید"><//a><//nav>

.radikalwp-nav-dots {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 40;
}
.radikalwp-nav-dots-item {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: background .3s ease, transform .3s ease;
}
.radikalwp-nav-dots-item:hover { transform: scale(1.3); }
.radikalwp-nav-dots-item.is-active {
  background: #4f46e5;
  transform: scale(1.35);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, .18);
}
.radikalwp-nav-dots-item::after {
  content: attr(data-dot);
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #0f172a;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.radikalwp-nav-dots-item:hover::after { opacity: 1; }
@media (max-width: 768px) { .radikalwp-nav-dots { display: none; } }