:root{
  --bg:#0B0E14;
  --card:#0D111A;
  --txt:#D9E1FF;
  --muted:#A9B4D6;
  --a1:#B9D6FF;   /* top blue */
  --a2:#C6A8FF;   /* mid lilac */
  --a3:#B98CFF;   /* bottom violet */
  --accent:#9C7CFF;
  --brand:#C59DFF;
  --glass: rgba(16,19,26,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--txt);
  overflow-x: hidden;
}

/* Background layers */
.bg{position:fixed; inset:0; z-index:-3; overflow:hidden;}
.aurora{
  position:absolute; inset:-10% -10% -10% -10%;
  filter: blur(60px) saturate(120%);
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(128, 168, 230, 0.377), transparent 60%),
    radial-gradient(40% 40% at 80% 30%, rgba(90, 3, 221, 0.596), transparent 70%),
    radial-gradient(50% 50% at 40% 80%, rgba(185,140,255,.48), transparent 60%);
  animation: auroraMove 26s ease-in-out infinite alternate;
}
@keyframes auroraMove{
  0%{transform: translate3d(-2%,0,0) rotate(0deg) scale(1.02);}
  100%{transform: translate3d(2%,2%,0) rotate(2deg) scale(1.04);}
}

#stars{position:absolute; inset:0; z-index:-1}
.vignette{position:absolute; inset:0; background:radial-gradient(1200px 600px at 50% 30%, transparent 20%, rgba(0,0,0,.35) 70%); z-index:0;}
.noise{
  position:absolute; inset:-50% -50%;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22><filter id=%22n%22><feTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%222%22/></filter><rect width=%22400%22 height=%22400%22 filter=%22url(%23n)%22 opacity=%220.06%22/></svg>');
  background-size:400px 400px; mix-blend-mode:overlay; opacity:.35; animation:grain 6s steps(10) infinite; z-index:1;
}
@keyframes grain{0%{transform:translate(0,0)} 100%{transform:translate(5%, -5%)}}

/* Nav */
.nav{position:sticky; top:0; backdrop-filter: blur(12px) saturate(120%); background:linear-gradient(180deg, rgba(7,9,14,.75), rgba(7,9,14,.2)); border-bottom:1px solid rgba(201,155,255,.12); z-index:10}
.nav-inner{
  max-width:1200px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.2px}
.logo{height:26px; width:auto; filter: drop-shadow(0 6px 18px rgba(195,157,255,.35));}
.brand-name{opacity:.9}
.links{display:flex; gap:20px; opacity:.8}
.link{color:var(--txt); text-decoration:none; font-weight:500; opacity:.8}
.link:hover{opacity:1}
.cta-right{display:flex; gap:10px}

/* Buttons */
.btn{border:1px solid transparent; border-radius:12px; padding:10px 14px; font-weight:600; cursor:pointer; text-decoration:none; color:var(--txt); position:relative; overflow:hidden;}
.btn.ghost{background:transparent; border-color:rgba(201,155,255,.18)}
.btn.outline{background:transparent; border-color:rgba(201,155,255,.3)}
.btn.soft{background:rgba(201,155,255,.12); border-color:rgba(201,155,255,.14)}
.btn.solid{
  color:#FFFFFF; /* белый текст */
  background: linear-gradient(135deg,
              rgba(91,91,255,0.95) 0%,    /* electric indigo */
              rgba(156,77,255,0.98) 45%,  /* vivid violet  */
              rgba(0,200,255,0.95) 100%); /* neon cyan     */
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 8px 24px rgba(92, 55, 255, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn.solid:hover{
  transform: translateY(-1px);
  background: linear-gradient(135deg,
              rgba(103,103,255,1) 0%,
              rgba(175,102,255,1) 45%,
              rgba(0,215,255,1) 100%);
  box-shadow:
    0 12px 32px rgba(92, 55, 255, 0.45),
    0 0 0 4px rgba(141,97,255,0.22);
}

.btn.glow::after{
  content:''; position:absolute; inset:0; 
  background: radial-gradient(60% 140% at 40% -20%, rgba(255,255,255,.7), transparent 40%), 
              radial-gradient(80% 140% at 60% 120%, rgba(255,255,255,.4), transparent 50%);
  opacity:0; transition:.5s opacity;
}
.btn.glow:hover::after{opacity:.35}

/* Hero */
.hero{padding:76px 20px 80px}
.hero-inner{max-width:1200px; margin:0 auto; display:grid; grid-template-columns: 1.1fr 1fr; gap:48px; align-items:center}
.badge{display:inline-block; padding:8px 12px; border-radius:999px; font-weight:600; font-size:12px; color:var(--txt); background:rgba(185,140,255,.12); border:1px solid rgba(185,140,255,.18); backdrop-filter:blur(6px)}
h1{font-size: clamp(36px, 5vw, 64px); margin:16px 0 10px; line-height:1.02; letter-spacing:-.02em}
.gradient{background: linear-gradient(90deg, var(--a1), var(--a2) 40%, var(--a3)); -webkit-background-clip:text; background-clip:text; color:transparent; filter: drop-shadow(0 12px 32px rgba(195,157,255,.25));}
.sub{color:var(--muted); font-size: clamp(16px, 2vw, 18px); margin: 4px 0 18px}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin: 16px 0 12px}
.bullets{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:8px}
.bullets li{display:flex; align-items:center; gap:10px; color:#C6CFF6; opacity:.9}
.bullets svg{color:var(--brand)}

/* Visual app window */
.visual{position:relative}
.window{
  position:relative; width:min(560px, 92vw); margin:0 auto;
  border-radius:22px;
  background: linear-gradient(180deg, rgba(16,19,26,.85), rgba(16,19,26,.72)) padding-box,
              conic-gradient(from 160deg, rgba(185,214,255,.55), rgba(185,140,255,.55), rgba(185,214,255,.55)) border-box;
  border:1px solid transparent;
  box-shadow:
    0 40px 100px rgba(185,140,255,.22),
    0 8px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(14px) saturate(130%);
  transform: perspective(1200px) rotateX(6deg) rotateY(-6deg) translateZ(0);
  animation: float 9s ease-in-out infinite;
}
@keyframes float{
  0%{transform: perspective(1200px) rotateX(6deg) rotateY(-6deg) translateY(0px)}
  50%{transform: perspective(1200px) rotateX(5deg) rotateY(-7deg) translateY(-8px)}
  100%{transform: perspective(1200px) rotateX(6deg) rotateY(-6deg) translateY(0px)}
}
.titlebar{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid rgba(201,155,255,.12);}
.dot{width:10px; height:10px; border-radius:999px; display:inline-block; box-shadow:0 0 0 3px rgba(0,0,0,.25) inset;}
.red{background:#ff5f57}.yellow{background:#ffbd2e}.green{background:#28c840}
.title{margin-left:6px; font-weight:600; opacity:.9; letter-spacing:.1px}

.screen{position:relative; overflow:hidden; border-radius:0 0 22px 22px; background:#0b0f17}
.screen video, .screen img{display:block; width:100%; height:auto;}
.screen video{opacity:1}
.screen img{position:absolute; inset:0; object-fit:cover; opacity:0}
.screen[data-mode="image"] video{display:none}
.screen[data-mode="image"] img{opacity:1}
.screen-glow{position:absolute; inset:-20% -10% -30% -10%; pointer-events:none;
  background: radial-gradient(40% 60% at 50% 0%, rgba(185,214,255,.18), transparent 60%),
              radial-gradient(70% 60% at 80% 80%, rgba(185,140,255,.15), transparent 70%);
  mix-blend-mode: screen;
}

.halo{
  position:absolute; inset:auto 0 -80px 0; height:220px;
  background: radial-gradient(60% 40% at 50% -10%, rgba(185,140,255,.38), transparent 60%);
  filter: blur(26px); opacity:.8;
}

/* Footer */
.foot{padding:40px 20px; border-top:1px solid rgba(201,155,255,.12); background:linear-gradient(180deg, transparent, rgba(0,0,0,.25))}
.foot-inner{max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:12px; color:var(--muted)}
.sep{opacity:.5}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns: 1fr; gap:28px}
  .visual{order:-1}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .aurora, .window{animation: none !important}
}

.btn.solid{
  color:#FFFFFF; /* белый текст */
  background: linear-gradient(135deg,
              rgba(91,91,255,0.95) 0%,    /* electric indigo */
              rgba(156,77,255,0.98) 45%,  /* vivid violet  */
              rgba(0,200,255,0.95) 100%); /* neon cyan     */
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 8px 24px rgba(92, 55, 255, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn.solid:hover{
  transform: translateY(-1px);
  background: linear-gradient(135deg,
              rgba(103,103,255,1) 0%,
              rgba(175,102,255,1) 45%,
              rgba(0,215,255,1) 100%);
  box-shadow:
    0 12px 32px rgba(92, 55, 255, 0.45),
    0 0 0 4px rgba(141,97,255,0.22);
}

/* === OS buttons: анимация логотипов и разные градиенты === */
.os-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;

  /* по умолчанию ПУСТОГО места нет */
  padding-right: var(--pad-base, 14px);

  transition: padding .25s cubic-bezier(.2,.8,.2,1),
              box-shadow .25s ease, background .25s ease, transform .25s ease;
  white-space: nowrap;
}

.os-btn .label{ white-space: nowrap; }

.os-btn .os-icon{
  position: absolute;
  right: 10px;
  display: inline-flex;
  transform: translateX(14px);
  opacity: 0;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
  color: #fff;
  pointer-events: none;
}

/* На hover увеличиваем правый паддинг → кнопка расширяется, иконка заезжает */
.os-btn:hover{
  padding-right: var(--pad-expanded, 42px);
}
.os-btn:hover .os-icon{
  transform: translateX(0);
  opacity: 1;
}

/* Градиенты для ОС — оставляем как были */
.os-btn.win.btn.solid{
  background: linear-gradient(135deg,#3F4CFF 0%,#6B38FF 42%,#00C8FF 100%);
  box-shadow: 0 8px 24px rgba(63,76,255,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.os-btn.win.btn.solid:hover{
  background: linear-gradient(135deg,#5B67FF 0%,#875BFF 42%,#00D7FF 100%);
  box-shadow: 0 12px 32px rgba(63,76,255,.45), 0 0 0 4px rgba(0,200,255,.22);
}

.os-btn.mac.btn.solid{
  background: linear-gradient(135deg,#8E54FF 0%,#A267FF 45%,#5B5BFF 100%);
  box-shadow: 0 8px 24px rgba(142,84,255,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.os-btn.mac.btn.solid:hover{
  background: linear-gradient(135deg,#9F6CFF 0%,#B27DFF 45%,#7373FF 100%);
  box-shadow: 0 12px 32px rgba(142,84,255,.45), 0 0 0 4px rgba(141,97,255,.22);
}

/* Sections */
.section{padding:80px 20px}
.section-inner{max-width:1200px; margin:0 auto}
.section-title{font-size:clamp(28px,4vw,42px); margin:0 0 10px}
.section-sub{color:var(--muted); margin:0 0 28px}

/* Grids */
.grid{display:grid; gap:16px}
.features-grid{grid-template-columns:repeat(3,1fr)}
.how-grid{grid-template-columns:repeat(3,1fr); margin-top:12px}
.pricing-grid{ grid-template-columns:repeat(3,1fr); }

.price-card.yearly{ outline:1px solid rgba(91,91,255,.3); }
.price-card.yearly .pc-sub{ color:#CFE8FF; }

/* Cards */
.card.glass,.step.glass,.testi.glass,.price-card.glass,.qa.glass{
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.card h3,.step h3{margin:6px 0 6px}

/* Steps */
.how-grid{ grid-template-columns:repeat(3,1fr); gap:18px; }


.step{ position:relative; text-align:center; padding:34px 18px 18px; min-height:140px; }
.step h3{ margin:6px 0 6px; }
.step p{ color:var(--muted); margin:0; }
.step .num{
  position:absolute; left:50%; top:-14px; transform:translateX(-50%);
  width:36px; height:36px; border-radius:999px; display:grid; place-items:center;
  font-weight:800; color:#fff; letter-spacing:.2px;
  background: linear-gradient(135deg, var(--a2), var(--a3));
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 3px rgba(0,0,0,.25) inset;
}
/* Supported sites — крупные чипсы */
#sites .sites-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;          /* центрируем ряд */
  gap: 14px;                        /* расстояние между чипсами */
  margin-top: 14px;
}

#sites .sites-row li{
  /* размеры и типографика */
  font-size: clamp(10px, 1.2vw, 14px); /* чипсы чуть растут на больших экранах */
  font-weight: 600;
  line-height: 1;
  letter-spacing: .2px;
  padding: 16px 46px;               /* ↑ было меньше — делаем заметно больше */
  min-height: 44px;                 /* комфортная клик-зона */
  
  /* форма и стиль */
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #EAF0FF;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);

  /* интерактив */
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  cursor: default;                  /* поменяй на pointer, если это кнопки/ссылки */
}

#sites .sites-row li:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* чуть компактнее на очень маленьких экранах */
@media (max-width: 420px){
  #sites .sites-row{ gap: 10px; }
  #sites .sites-row li{ padding: 10px 14px; min-height: 40px; font-size: 14px; }
}

/* Pricing */
.billing-toggle{ display:none; }
.toggle-btn{border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); padding:8px 12px; border-radius:999px; cursor:pointer; color:var(--txt); font-weight:600}
.toggle-btn.active{background:linear-gradient(135deg, var(--a2), var(--a3)); border-color:transparent}
.price-card{display:flex; flex-direction:column; gap:14px; position:relative}
.price-card.pro{outline:1px solid rgba(185,140,255,.35)}
.pc-head{display:flex; align-items:center; gap:10px}
.pc-sub{color:var(--muted); margin:0}
.pc-badge{margin-left:auto; font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(185,140,255,.16); border:1px solid rgba(185,140,255,.22)}
.pc-price{display:flex; align-items:baseline; gap:6px; font-weight:800}
.pc-price .amount{font-size:42px}
.pc-price .amount.yearly{display:none}
.pc-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.pc-list li{display:flex; align-items:center; gap:8px}
.note{color:var(--muted); margin-top:8px}


/* === TESTIMONIALS — bubble (Telegram-style) ============================ */

/* 4 в ряд, плотнее между карточками */
#testimonials .section-inner{ max-width:1280px; }
.testi-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(250px, 1fr));
  gap:8px;
  align-items:stretch;
}

/* Баббл: фон/бордер как стекло, но с «хвостиком» и аватаркой снаружи */
#testimonials .testi.glass{
  --bubble-bg: rgba(255,255,255,.06);
  --bubble-br: rgba(255,255,255,.16);
  background: var(--bubble-bg);
  border: 1px solid var(--bubble-br);
  border-radius: 18px 18px 18px 8px;           /* хвост слева → нижний-левый меньше */
  padding: 12px 14px 12px 58px;               /* место слева под аватар/хвост */
  display:flex; flex-direction:column; gap:10px;
  min-height: 160px;
  position: relative;
  overflow: visible;                            /* чтобы аватар выступал наружу */
}

/* «Хвостик» — маленький ромб на левом ребре */
#testimonials .testi.glass::after{
  content:"";
  position:absolute; left:-8px; top:32px;
  width:16px; height:16px; transform:rotate(45deg);
  background: var(--bubble-bg);
  border-left:1px solid var(--bubble-br);
  border-bottom:1px solid var(--bubble-br);
  pointer-events:none;
}

/* Шапка: теперь без колонки под аватар — он абсолютно снаружи */
#testimonials .t-head{
  display:grid; grid-template-columns: 1fr;
  gap:4px; padding:0;
}
#testimonials .person{ min-width:0; }
#testimonials .person strong{ line-height:1.15; font-weight:700; }
#testimonials .person .role{ color:var(--muted); font-size:12px; }

/* Аватар — снаружи слева */
#testimonials .avatar{
  position:absolute; left:-24px; top:14px;
  width:40px; height:40px; aspect-ratio:1/1; border-radius:50%;
  display:grid; place-items:center; line-height:1;
  color:#fff; font-weight:800;
  background: linear-gradient(135deg,var(--a2),var(--a3));
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* Текст и звёзды (звёзды внизу «баббла») */
#testimonials .testi blockquote{ margin:0; color:#E9ECFF; overflow-wrap:anywhere; }
#testimonials .stars{ margin-top:auto; display:flex; gap:6px; pointer-events:none; }
#testimonials .stars svg{ width:14px; height:14px; fill:#F3C969; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
#testimonials .stars svg.half{ opacity:.6; }

/* Чётные карточки — «исходящие»: баббл справа, хвост и аватар справа */
.testi-grid .testi:nth-child(even){
  border-radius: 18px 18px 8px 18px;           /* зеркалим скругление */
  padding: 12px 58px 12px 14px;                /* место справа под аватар/хвост */
  --bubble-bg: rgba(160,140,255,.10);          /* для разнообразия слегка другой тон */
  --bubble-br: rgba(160,140,255,.28);
}
.testi-grid .testi:nth-child(even)::after{
  left:auto; right:-8px; top:32px;
  border-left:none; border-bottom:1px solid var(--bubble-br); border-right:1px solid var(--bubble-br);
}
.testi-grid .testi:nth-child(even) .avatar{
  left:auto; right:-24px;
}

/* Адаптив: 3 / 2 / 1 в ряд */
@media (max-width:1100px){ .testi-grid{ grid-template-columns: repeat(3, minmax(220px,1fr)); } }
@media (max-width:820px){  .testi-grid{ grid-template-columns: repeat(2, minmax(200px,1fr)); } }
@media (max-width:520px){  .testi-grid{ grid-template-columns: 1fr; } }


/* Testimonials — компактная высота */
#testimonials .testi.glass{
  min-height: 138px;                 /* было 160–220 */
  padding: 10px 12px 10px 54px;      /* меньше набивка */
}

#testimonials .testi.glass::after{
  top: 26px;                         /* хвостик подвинем выше */
  width: 14px; height: 14px;
  left: -7px;
}

#testimonials .avatar{
  width: 36px; height: 36px;         /* меньше аватар */
  left: -20px; top: 10px;
}

#testimonials .person strong{ font-size: 15px; line-height: 1.1; }
#testimonials .person .role{ font-size: 11px; }

#testimonials .testi blockquote{
  margin: 2px 0 0;
  font-size: 14px; line-height: 1.32;
  display: -webkit-box;              /* ограничим высоту текста, чтобы карточки не росли */
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#testimonials .stars{ gap: 5px; }
#testimonials .stars svg{ width: 12px; height: 12px; }

/* Центровка заголовков и подзаголовков секций */
.section-title,
.section-sub{
  text-align: center;
}

/* Узкий удобочитаемый подзаголовок и центрирование блока */
.section-sub{
  max-width: 820px;          /* чтобы не растягивался на всю ширину */
  margin: 0 auto 28px;       /* центр и стандартный низ */
}

/* Небольшой отступ сетки от заголовка */
.section .grid{ margin-top: 20px; }

/* Center the supported platforms row */
#sites .sites-row{
  justify-content: center;   /* центр по горизонтали */
  margin-top: 12px;          /* опционально — чуть воздуха сверху */
}

/* === Supported sites — аккуратные разделители-точки ==================== */
/* Общие настройки ряда */
#sites .sites-row{
  --chip-gap: 28px;                 /* расстояние между чипсами */
  column-gap: var(--chip-gap);
  row-gap: 14px;
  justify-content: center;
}

/* Ставим точку только между элементами (не у первого/последнего) */
#sites .sites-row li + li{
  position: relative;
}

/* Точка строго посередине промежутка */
#sites .sites-row li + li::before{
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  left: calc(-0.5 * var(--chip-gap));  /* центр между чипсами */
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.7);
  box-shadow:
    0 0 8px rgba(255,255,255,.35),
    0 0 0 2px rgba(255,255,255,.12) inset;
  pointer-events: none;
}

/* На узких экранах, где чипсы переносятся на новую строку, точки отключаем,
   чтобы они не висели "в воздухе" */
@media (max-width: 980px){
  #sites .sites-row{ --chip-gap: 18px; row-gap: 10px; }
  #sites .sites-row li + li::before{ display: none; }
}

/* Удаляем любые старые точки у чипсов */
#sites .sites-row li::before,
#sites .sites-row li::after{
  content: none !important;
}

/* Аккуратные точки строго между элементами */
#sites .sites-row{ --chip-gap: 28px; }         /* расстояние между чипсами */
#sites .sites-row li + li{ position: relative; }
#sites .sites-row li + li::before{
  content: "";
  position: absolute;
  left: calc(-0.5 * var(--chip-gap));          /* центр между соседями */
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.7);
  box-shadow: 0 0 8px rgba(255,255,255,.35),
              0 0 0 2px rgba(255,255,255,.12) inset;
  pointer-events: none;
}

/* На всякий: у первого элемента — не рисуем точку */
#sites .sites-row li:first-child::before{ display: none !important; }

/* Когда ряд переносится (мобильные) — точки отключаем */
@media (max-width: 980px){
  #sites .sites-row li + li::before{ display: none; }
}

/* Supported sites: убираем дефолтные маркеры UL/LI */
#sites .sites-row{
  list-style: none;      /* ← гасим bullets у ul */
  padding-left: 0;       /* убираем отступ под маркер */
  margin-top: 14px;      /* можно оставить свой отступ */
}

#sites .sites-row li{
  list-style: none;      /* на всякий, если где-то переопределялось */
}

#sites .sites-row li::marker{
  content: none;         /* Safari/Firefox: точно скрыть маркер */
}
/* Restore the centered dots between chips */
#sites .sites-row{
  list-style: none;           /* убираем дефолтные маркеры UL */
  padding-left: 0;
  --chip-gap: 28px;           /* расстояние между чипсами */
  column-gap: var(--chip-gap);
  row-gap: 14px;
  justify-content: center;
}

#sites .sites-row li{ list-style: none; position: relative; }
#sites .sites-row li::marker{ content: none; }  /* на всякий для Safari/Firefox */

/* точка ТОЛЬКО между элементами */
#sites .sites-row li + li::before{
  content: "" !important;     /* перебиваем прежнее content:none !important */
  position: absolute;
  left: calc(-0.5 * var(--chip-gap));
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.7);
  box-shadow: 0 0 8px rgba(255,255,255,.35),
              0 0 0 2px rgba(255,255,255,.12) inset;
  pointer-events: none;
}

/* у первого элемента никогда не рисуем */
#sites .sites-row li:first-child::before{ content: none !important; }

/* при переносе рядов точки отключаем */
@media (max-width:980px){
  #sites .sites-row li + li::before{ display: none; }
}