/* ═══════════════════════════════════════════════════════════════════════
   nav.css — ЕДИНЫЙ навбар-ПИЛЮЛЯ для всех подстраниц.
   Светлая тема (редизайн 2026-06-28): белый glassmorphism, тёмный overlay.
   Namespace .snav* → collision-free с home.css (.hdr/.nav/.mnav/.logo/.btn).
   Токены --c-* / --f-* берутся из home.css (:root подстраниц).
   §1.6 hover-гейт · §1.5 prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Плавающая пилюля (светлый glassmorphism) ── */
.snav,.snav-ov{font-family:var(--f-sans,'Onest','Onest Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif)}
.snav a,.snav-ov a,.snav .logo{text-decoration:none}
.snav button{border:none;background:none;cursor:pointer;font:inherit}
.snav{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:500;
  width:calc(100% - 48px);max-width:1060px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  background:rgba(255,255,255,0);border:1px solid rgba(255,255,255,0);border-radius:var(--r-pill);
  box-shadow:none;
  padding:8px 20px;transition:background .35s,box-shadow .35s,border-color .35s,top .3s;
  animation:snavIn .5s cubic-bezier(.22,.61,.36,1) .15s both;
}
@keyframes snavIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
/* при скролле навбар становится сплошной пилюлей (как на главной) */
.snav.scrolled{background:rgba(255,255,255,.97);border-color:var(--c-line,#E5E7EB);box-shadow:0 12px 40px rgba(6,29,41,.12);top:8px}

/* ── Логотип с анимацией букв ── */
.snav .logo{
  font-weight:700;letter-spacing:-.02em;font-size:24px;line-height:1;
  display:flex;align-items:center;gap:0;cursor:pointer;user-select:none;
  color:var(--c-text,#061D29);flex:none;
}
.snav .logo .lt{display:inline-block;transform-origin:50% 100%;transition:color .25s;will-change:transform}
.snav .logo .d{color:var(--c-accent,#6D49CE);display:inline-block;margin-left:2px;transform-origin:50% 50%;will-change:transform}
@media (hover:hover) and (pointer:fine){
  .snav .logo:hover .lt,.snav .logo:focus-visible .lt{color:var(--c-accent,#6D49CE);animation:ltHop .55s cubic-bezier(.34,1.56,.64,1) both}
  .snav .logo:hover .lt:nth-child(1),.snav .logo:focus-visible .lt:nth-child(1){animation-delay:0s}
  .snav .logo:hover .lt:nth-child(2),.snav .logo:focus-visible .lt:nth-child(2){animation-delay:.05s}
  .snav .logo:hover .lt:nth-child(3),.snav .logo:focus-visible .lt:nth-child(3){animation-delay:.1s}
  .snav .logo:hover .lt:nth-child(4),.snav .logo:focus-visible .lt:nth-child(4){animation-delay:.15s}
  .snav .logo:hover .lt:nth-child(5),.snav .logo:focus-visible .lt:nth-child(5){animation-delay:.2s}
  .snav .logo:hover .lt.jump,.snav .logo:focus-visible .lt.jump{animation:ltFlip .75s cubic-bezier(.5,.05,.2,1) both;animation-delay:.12s}
  .snav .logo:hover .d,.snav .logo:focus-visible .d{animation:dotDrop 1.05s cubic-bezier(.5,0,.25,1) both;animation-delay:.26s}
}
@keyframes ltHop{0%,100%{transform:translateY(0)}45%{transform:translateY(-9px)}}
@keyframes ltFlip{0%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-11px) rotateY(180deg)}100%{transform:translateY(0) rotateY(360deg)}}
@keyframes dotDrop{
  0%{transform:translateY(0) scale(1);border-radius:50%}
  22%{transform:translateY(-17px) scaleX(.7) scaleY(1.4);border-radius:50% 50% 50% 50%/65% 65% 35% 35%}
  52%{transform:translateY(0) scaleX(1.5) scaleY(.5);border-radius:50%}
  70%{transform:translateY(-5px) scaleX(.85) scaleY(1.15);border-radius:50%}
  86%{transform:translateY(0) scaleX(1.12) scaleY(.9);border-radius:50%}
  100%{transform:translateY(0) scale(1);border-radius:50%}
}

/* ── Правая часть: ссылки + CTA + бургер ── */
.snav-right{display:flex;align-items:center;gap:8px}
.snav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:2px;font-size:13.5px}
.snav-links a{padding:7px 14px;border-radius:var(--r-pill);font-size:13.5px;font-weight:500;color:var(--c-muted,#425D6D);transition:color .2s,background .2s;white-space:nowrap}
.snav-links a.active{color:var(--c-text,#061D29);background:rgba(109,73,206,.10)}
@media (hover:hover) and (pointer:fine){
  .snav-links a:hover{color:var(--c-text,#061D29)}
}
/* 🔴 Девятый пункт меню («Кейсы», 10.08.2026) не влезал: строка ссылок
   центрирована absolute, а по краям её держат логотип и CTA — запас был
   всего 17–19px с каждой стороны. С новым пунктом «Сайты» наезжали на
   логотип, а «Партнёрам» уходило под кнопку. Ширина шапки фиксирована,
   поэтому место берём из горизонтальных полей пунктов (14→9px, 9 пунктов ×
   10px = 90px) и из зазора между ними (2→0px, 8 стыков × 2px = 16px) —
   суммарно 106px, по 53px на сторону. Запас снова положительный.
   Правило одно и на ссылки, и на триггеры дропдаунов: разъедутся —
   снова наложится. Замерять после правки обязательно: ширина шапки
   фиксирована и «на глаз» перекрытие в 2px не видно. */
@media (min-width:1024px){
  .snav-links{gap:0}
  .snav-links a,
  .snav-links .snav-ddt{padding-inline:9px}
}
/* 🔴 2026-08-25, QA-волна 3. Десятый пункт — дропдаун «ИИ» (направление выросло
   до четырёх страниц). Замер на 1280: строка ссылок 655px, а между логотипом и
   CTA помещалось 582px — «Сайты» наезжали на логотип, «Партнёрам» уходило под
   кнопку. Ровно тот же дефект, что 10.08 с «Кейсами», и виден он только замером:
   ссылки центрированы position:absolute, поэтому переполнение не рвёт страницу
   и не даёт горизонтального скролла — просто два элемента лежат друг на друге.
   Взято место с двух сторон: пилюля шапки 960→1060 (контент страницы 1076px,
   так пилюля с ним и выравнивается) и сжатие полей на узком десктопе, где
   пилюля упирается в ширину экрана и шире 1060 стать не может.
   🔴 Добавляешь пункт — меряй заново: .snav-links.right против .snav-cta.left. */
@media (min-width:1024px) and (max-width:1139px){
  .snav-links,
  .snav-links a,
  .snav-links .snav-ddt{font-size:12.5px}
  .snav-links a,
  .snav-links .snav-ddt{padding-inline:6px}
}

/* Скользящий пилюля-фон (violet) — рисуется JS-ом, лежит за пунктами */
.snav-pill{position:absolute;left:0;top:50%;height:30px;transform:translateX(0);margin-top:-15px;
  border-radius:var(--r-pill);background:rgba(109,73,206,.10);opacity:0;pointer-events:none;z-index:0;
  transition:transform .32s cubic-bezier(.34,1.4,.5,1),width .32s cubic-bezier(.34,1.4,.5,1),opacity .25s}
.snav-links a,.snav-links .snav-dd{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.snav-pill{transition:opacity .2s}}

/* Дропдаун «Решения ▾» */
.snav-dd{position:relative;display:inline-flex;align-items:center}
.snav-dd>a{display:inline-flex;align-items:center;gap:5px}
.snav-dd>a::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.6;transition:transform .25s}
.snav-dd:hover>a::after,.snav-dd:focus-within>a::after,.snav-dd.open>a::after{transform:rotate(225deg) translateY(2px)}
.snav-ddm{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(6px);min-width:230px;background:#fff;border:1px solid var(--c-line2,#E5E7EB);border-radius:var(--r-md);box-shadow:0 20px 46px -18px rgba(14,17,24,.30);padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s;z-index:10}
.snav-ddm::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.snav-dd:hover .snav-ddm,.snav-dd:focus-within .snav-ddm,.snav-dd.open .snav-ddm{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* «Все решения» — обзорный пункт, отделён линией */
.snav-ddm a:last-child{margin-top:4px;border-top:1px solid var(--c-line2,#E5E7EB);padding-top:11px;color:var(--c-accent,#6D49CE);font-weight:600}
.snav-ddm a{padding:9px 12px;border-radius:var(--r-sm);font-size:13.5px;font-weight:500;color:var(--c-text,#061D29);white-space:nowrap;transition:background .15s,color .15s}
.snav-ddm a:hover{background:rgba(109,73,206,.08);color:var(--c-accent,#6D49CE)}
/* сгруппированный дропдаун «Решения» (Сайты / Боты / Услуги) */
.snav-ddm-grouped{min-width:250px;max-height:min(72vh,580px);overflow:auto}
.snav-ddm-grouped .ddm-h{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--c-faint,#5A7382);padding:11px 12px 4px}
.snav-ddm-grouped .ddm-h:first-child{padding-top:4px}
.snav-ddm-grouped a.ddm-h{color:var(--c-text,#061D29)}
.snav-ddm-grouped a.ddm-h:hover{background:transparent;color:var(--c-accent,#6D49CE)}
.snav-ddm-grouped a:last-child{margin-top:0;border-top:0;padding-top:9px;color:var(--c-text,#061D29);font-weight:500}
.snav-ddm-grouped a:last-child:hover{color:var(--c-accent,#6D49CE)}
/* ── Триггеры-разделы (Сайты/Боты/Услуги) — не ссылки, только раскрывают дропдаун ── */
.snav-links .snav-ddt{padding:7px 14px;border-radius:var(--r-pill);font-size:13.5px;font-weight:500;color:var(--c-muted,#425D6D);white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:color .2s;user-select:none}
@media (hover:hover) and (pointer:fine){.snav-dd:hover .snav-ddt{color:var(--c-text,#061D29)}}
.snav-dd>.snav-ddt::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55;transition:transform .25s}
.snav-dd:hover>.snav-ddt::after,.snav-dd.open>.snav-ddt::after{transform:rotate(225deg) translateY(2px)}
/* ── Flyout-дропдаун: список слева + превью-клон справа ── */
.snav-flyout{flex-direction:row;gap:6px;padding:10px;min-width:auto;left:0;transform:translateX(0) translateY(6px)}
.snav-dd:hover .snav-flyout,.snav-dd:focus-within .snav-flyout,.snav-dd.open .snav-flyout{transform:translateX(0) translateY(0)}
.snav-flyout .fly-list{display:flex;flex-direction:column;gap:2px;min-width:222px}
.snav-flyout .fly-list a{padding:9px 12px;border-radius:var(--r-sm);font-size:13.5px;font-weight:500;color:var(--c-text,#061D29);white-space:nowrap;transition:background .15s,color .15s}
.snav-flyout .fly-list a:hover{background:rgba(109,73,206,.08);color:var(--c-accent,#6D49CE)}
.snav-flyout .fly-list a:last-child{margin-top:0;border-top:0;padding-top:9px;color:var(--c-text,#061D29);font-weight:500}
.snav-flyout .fly-preview{position:relative;width:236px;border-left:1px solid var(--c-line2,#E5E7EB);margin-left:4px;padding:9px 12px 10px 16px}
.snav-flyout .fly-clone{opacity:0;transform:translateX(-10px);transition:opacity .25s ease,transform .25s cubic-bezier(.34,1.4,.5,1);pointer-events:none}
.snav-flyout .fly-clone.show{opacity:1;transform:translateX(0)}
.snav-flyout .fly-clone .fc-t{display:block;font-weight:700;font-size:15px;color:var(--c-text,#061D29)}
.snav-flyout .fly-clone .fc-d{display:block;margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--c-muted,#425D6D)}
.snav-flyout .fly-clone .fc-img{display:block;margin-top:10px;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-sm);border:.5px solid var(--c-line2,#E5E7EB);background:#F5F7FB}
/* ── Мобайл: группы-заголовки разделов ── */
.snav-mgroup{display:block;font-size:clamp(20px,5.4vw,25px);font-weight:600;letter-spacing:-.02em;line-height:1.2;text-transform:none;color:var(--c-text,#061D29);margin:6px 0 0;padding:2px;opacity:0;transform:translateY(22px);filter:blur(5px);transition:opacity 0s,transform 0s,filter 0s}

/* CTA — тёмная solid-кнопка (НЕ градиент, per ТЗ §2) */
.snav-cta{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:13px;font-weight:600;padding:0 18px;height:40px;border-radius:var(--r-sm);
  background:var(--c-ink,#061D29);color:#fff;border:1px solid transparent;overflow:hidden;
  transition:transform .3s cubic-bezier(.34,1.4,.5,1),box-shadow .3s,background .2s;white-space:nowrap;flex:none;
}
.snav-cta:before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);transition:left .6s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .snav-cta:hover{transform:translateY(-2px);background:#13303E;box-shadow:0 10px 26px -10px rgba(6,29,41,.4)}
  .snav-cta:hover:before{left:150%}
}
@media(hover:none){.snav-cta:before{content:none}}

/* ── Бургер (линии на белом фоне) ── */
/* 36×36 — ниже минимума тач-цели 44px (замер 28.07 на всех 105 страницах).
   Рисунок бургера (три полосы по 24px) не меняется, растёт только зона нажатия. */
.snav-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  background:none;border:none;cursor:pointer;padding:4px;z-index:1501;position:relative;flex:none;
}
.snav-burger span{display:block;height:1.5px;width:24px;background:var(--c-text,#061D29);border-radius:var(--r-sm);
  transition:transform .35s cubic-bezier(.77,0,.175,1),opacity .25s ease,width .3s ease}
.snav-burger.open span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.snav-burger.open span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}

/* ── Fullscreen-overlay — СВЕТЛЫЙ (под новый дизайн сайта) ── */
.snav-ov{
  position:fixed;inset:0;
  background:linear-gradient(180deg,#fbfaff 0%,#f6f4ff 52%,#edf1ff 100%);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15);z-index:1500;
  display:flex;flex-direction:column;padding:100px 36px calc(48px + env(safe-area-inset-bottom));
  clip-path:inset(0 0 100% 0);transition:clip-path .72s cubic-bezier(.76,0,.24,1);
  overflow-y:auto;overflow-x:hidden;visibility:hidden;pointer-events:none;
}
.snav-ov.open{clip-path:inset(0 0 0 0);visibility:visible;pointer-events:auto}
/* .closing: оверлей остаётся раскрытым и видимым, opacity-фейд задаётся инлайн из JS (надёжнее) */
.snav-ov.closing{visibility:visible;clip-path:inset(0 0 0 0)!important;pointer-events:none}
/* airy hero-свечения бренда — мягко плывут */
.snav-ov::before{content:"";position:absolute;inset:-12%;pointer-events:none;z-index:-1;
  background:
    radial-gradient(42% 32% at 12% 9%,rgba(109,73,206,.24),transparent 62%),
    radial-gradient(40% 30% at 93% 22%,rgba(74,99,224,.20),transparent 62%),
    radial-gradient(48% 34% at 74% 98%,rgba(26,164,124,.20),transparent 62%);
  opacity:0;transform:scale(1.05);transition:opacity .9s ease .05s,transform 1.3s ease}
.snav-ov.open::before{opacity:1;transform:scale(1);animation:ovGlow 16s ease-in-out infinite 1s}
@keyframes ovGlow{0%,100%{transform:scale(1) translate(0,0)}50%{transform:scale(1.03) translate(-10px,8px)}}
/* световой луч-«sweep» при открытии */
.snav-scanline{position:absolute;left:0;right:0;top:0;height:200px;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(109,73,206,.18),rgba(74,99,224,.07) 45%,transparent);
  opacity:0;transform:translateY(-220px)}
.snav-ov.open .snav-scanline{animation:ovSweep 1.15s cubic-bezier(.22,1,.36,1) .12s forwards}
@keyframes ovSweep{0%{opacity:0;transform:translateY(-220px)}35%{opacity:.9}100%{opacity:0;transform:translateY(115vh)}}
.snav-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;
  background:rgba(6,29,41,.04);border:1px solid #E5E7EB;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#425D6D;
  transition:background .2s,border-color .2s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.snav-close svg{width:18px;height:18px}
.snav-close:hover{background:rgba(109,73,206,.2);border-color:rgba(109,73,206,.5);transform:rotate(90deg) scale(1.1)}
.snav-mnav{display:flex;flex-direction:column;gap:0;flex:1;position:relative}
/* топ-уровень (заголовки групп + прямые пункты): единый ритм и общий левый край, без номеров */
.snav-mnav > .snav-mlink{padding:9px 2px;gap:0}
/* точки-маркеры вместо цифр — на заголовках групп, прямых пунктах и подпунктах */
.snav-mgroup.snav-macc::before,
.snav-mnav > .snav-mlink::before,
.snav-msublink::before{content:"•"!important;color:var(--c-accent,#6D49CE);font-size:.6em;line-height:1;margin-right:14px;flex:none;position:static;left:auto;top:auto;transform:none;width:auto;opacity:.9}
.snav-mlink{font-size:clamp(20px,5.4vw,25px);font-weight:600;letter-spacing:-.02em;line-height:1.2;
  color:#061D29;text-decoration:none;padding:6px 2px;position:relative;
  display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(30px) scale(.985);filter:blur(6px);
  transition:color .25s ease,opacity 0s,transform 0s,filter 0s}
.snav-mlink::before{content:attr(data-mi);font-family:var(--f-mono,'JetBrains Mono',ui-monospace,monospace);font-size:11px;font-weight:400;
  color:var(--c-accent,#6D49CE);opacity:.6;letter-spacing:.05em}
.snav-mlink:hover,.snav-mlink.active{color:var(--c-accent,#6D49CE)}
.snav-mlink::after{content:'';position:absolute;bottom:0;left:0;height:1px;width:0;background:var(--c-accent,#6D49CE);
  transition:width .35s cubic-bezier(.23,1,.32,1)}
.snav-mlink:hover::after{width:100%}
.snav-msublink{font-size:clamp(15px,4vw,18px);font-weight:500;letter-spacing:-.01em;padding:5px 0 5px 18px;color:#425D6D;gap:0}
/* «Все решения →» — последний подпункт аккордеона, чуть акцентнее */
.snav-msuball{color:#6D49CE;font-weight:600;margin-top:2px}
/* ── Аккордеон «Решения» в мобильном меню (JS: .snav-macc на заголовке, .snav-msubwrap оборачивает подпункты) ── */
.snav-macc>.snav-mtoggle{display:block;width:9px;height:9px;flex:none;margin-left:6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .3s cubic-bezier(.23,1,.32,1)}
.snav-macc[aria-expanded="true"]>.snav-mtoggle{transform:rotate(225deg) translateY(2px)}
.snav-msubwrap{display:flex;flex-direction:column;overflow:hidden;
  max-height:0;opacity:0;transition:max-height .4s cubic-bezier(.23,1,.32,1),opacity .3s ease}
.snav-msubwrap.open{max-height:520px;opacity:1}
@media (prefers-reduced-motion:reduce){.snav-msubwrap{transition:opacity .2s}.snav-macc>.snav-mtoggle{transition:none}}
/* ── Группы Сайты/Боты/Услуги как аккордеоны ── */
.snav-mgroup.snav-macc{display:flex;align-items:center;cursor:pointer;user-select:none;padding:9px 2px;margin:0;transition:color .2s}
.snav-mgroup.snav-macc:hover{color:var(--c-accent,#6D49CE)}
.snav-mgroup.snav-macc>.snav-mtoggle{margin-left:auto;width:10px;height:10px}
/* подпункты видимы внутри раскрытого контейнера (не участвуют в стаггере открытия меню) */
.snav-msubwrap .snav-mlink{opacity:1;transform:none;filter:none}
.snav-msubwrap{gap:2px}
.snav-mfooter{margin-top:auto;padding-top:28px;border-top:1px solid #E5E7EB}
.snav-mcta{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;
  color:var(--c-accent,#6D49CE);text-decoration:none;opacity:0;transform:translateY(16px);transition:color .25s}
.snav-mcta:hover{color:#061D29}
.snav-msub{font-size:12px;color:#5A7382;margin-top:10px;font-family:var(--f-mono,'JetBrains Mono',ui-monospace,monospace);
  letter-spacing:.05em;opacity:0}

/* ── Порог мобильного меню: 1023px ──────────────────────────────────────
   Было: десктопное меню жило до 768px, а на 980px промежутки схлопывались
   в ноль (`gap:0`). Между 769 и 979px восемь пунктов меню (position:absolute,
   центрированы) физически не помещались между логотипом и кнопкой и ЛОЖИЛИСЬ
   ПОВЕРХ них: на 780px «Сайты» перекрывало логотип на 68px, а CTA закрывала
   «Партнёрам» на 91px. Измерено шагом 20px на 760–1020.
   Расширить контейнер нельзя: на 780px нужно ≈900px при доступных 732px.
   Поэтому порог поднят до 1023px — ниже работает бургер, а с 1024px
   раскладка выходит на проектные зазоры (логотип→меню 14px, меню→CTA 12px).
   Правило `gap:0` снято: оно было симптоматическим и больше не нужно. */
@media(max-width:1023px){
  .snav{border-radius:var(--r-md);top:12px;width:calc(100% - 24px);padding:10px 16px}
  .snav.scrolled{top:8px}
  .snav-links{display:none}
  .snav-cta{display:none}
  .snav-burger{display:inline-flex}
  @keyframes snavIn{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
}
/* от планшета вверх пилюля не должна растягиваться во всю ширину */
@media(min-width:600px) and (max-width:1023px){
  .snav{width:min(calc(100% - 48px), 720px);border-radius:var(--r-pill);padding:8px 20px}
}
@media (prefers-reduced-motion:reduce){
  .snav,.snav-burger span,.snav-ov,.snav-scanline{animation:none!important;transition-duration:.01ms!important}
}