<section id="vb-k7m-dock" class="vb-k7m-dock" data-section-name="Нижнее меню" aria-label="Навигация моушен-дизайнера" data-vibeblock-unique-section="yes">
<style>
.vb-k7m-dock,
.vb-k7m-dock * { box-sizing: border-box; }
.vb-k7m-dock input,
.vb-k7m-dock textarea,
.vb-k7m-dock select { font: inherit; }

.vb-k7m-dock { position: fixed; z-index: 80; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); left: 0; display: flex; justify-content: center; padding: 0 max(76px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); pointer-events: none; font-family: var(--t-text-font); }
.vb-k7m-dock__tray { position: relative; display: flex; align-items: flex-end; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid rgba(255,255,255,.52); border-radius: 21px; background: rgba(245,245,247,.72); box-shadow: 0 10px 28px rgba(0,0,0,.16); backdrop-filter: saturate(155%) blur(18px); -webkit-backdrop-filter: saturate(155%) blur(18px); pointer-events: auto; }
.vb-k7m-dock__item { --vb-k7m-scale: 1; position: relative; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 58px; height: 66px; padding: 0; border: 0; background: transparent; cursor: pointer; transform: translateY(calc((1 - var(--vb-k7m-scale)) * 19px)); transition: transform 230ms cubic-bezier(.16,1,.3,1); -webkit-tap-highlight-color: transparent; }
.vb-k7m-dock__item:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; border-radius: 12px; }
.vb-k7m-dock__folder { display: block; width: 54px; height: 48px; object-fit: contain; transform: scale(var(--vb-k7m-scale)); transform-origin: 50% 100%; transition: transform 230ms cubic-bezier(.16,1,.3,1); filter: drop-shadow(0 2px 2px rgba(0,0,0,.16)); }
.vb-k7m-dock__label { position: absolute; bottom: calc(100% + 16px); left: 50%; max-width: min(170px, calc(100vw - 32px)); padding: 7px 11px; border-radius: 8px; background: rgba(29,29,31,.9); color: #fff; font-family: var(--t-text-font); font-size: 13px; font-weight: 400; line-height: 1.25; letter-spacing: -.1px; opacity: 0; pointer-events: none; transform: translate(-50%, 6px); transition: opacity 150ms ease, transform 150ms ease; white-space: nowrap; }
.vb-k7m-dock__item:first-child .vb-k7m-dock__label { left: 0; transform: translate(0, 6px); }
.vb-k7m-dock__item:last-child .vb-k7m-dock__label { right: 0; left: auto; transform: translate(0, 6px); }
.vb-k7m-dock__item:hover .vb-k7m-dock__label, .vb-k7m-dock__item:focus-visible .vb-k7m-dock__label { opacity: 1; transform: translate(-50%, 0); }
.vb-k7m-dock__item:first-child:hover .vb-k7m-dock__label, .vb-k7m-dock__item:first-child:focus-visible .vb-k7m-dock__label, .vb-k7m-dock__item:last-child:hover .vb-k7m-dock__label, .vb-k7m-dock__item:last-child:focus-visible .vb-k7m-dock__label { transform: translate(0, 0); }
.vb-k7m-dock__dot { position: absolute; bottom: 0; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: #1d1d1f; opacity: 0; transform: translateX(-50%) scale(.5); transition: opacity 160ms ease, transform 160ms ease; }
.vb-k7m-dock__item[aria-current="page"] .vb-k7m-dock__dot { opacity: 1; transform: translateX(-50%) scale(1); }
.vb-k7m-dock__item:active .vb-k7m-dock__folder { transform: scale(.93); }

@media (max-width: 640px) {
.vb-k7m-dock { bottom: max(12px, env(safe-area-inset-bottom)); padding-right: max(68px, env(safe-area-inset-right)); padding-left: max(12px, env(safe-area-inset-left)); }
.vb-k7m-dock__tray { gap: 3px; padding: 7px 8px; border-radius: 17px; }
.vb-k7m-dock__item { width: clamp(29px, 9.1vw, 45px); height: 48px; transform: none; }
.vb-k7m-dock__folder { width: clamp(28px, 8.4vw, 40px); height: 36px; transform: none; }
.vb-k7m-dock__item:hover .vb-k7m-dock__label { opacity: 0; }
.vb-k7m-dock__item:focus-visible .vb-k7m-dock__label { opacity: 1; transform: translate(-50%, 0); }
.vb-k7m-dock__item:first-child:focus-visible .vb-k7m-dock__label, .vb-k7m-dock__item:last-child:focus-visible .vb-k7m-dock__label { transform: translate(0, 0); }
.vb-k7m-dock__item.vb-k7m-dock__item--pressed .vb-k7m-dock__folder { animation: vb-k7m-dock-spring 360ms cubic-bezier(.2,.9,.3,1); }
}
@media (prefers-reduced-motion: reduce) {
.vb-k7m-dock__item, .vb-k7m-dock__folder, .vb-k7m-dock__label, .vb-k7m-dock__dot { transition-duration: 1ms; animation: none !important; }
.vb-k7m-dock__item { transform: none; }
.vb-k7m-dock__folder { transform: none; }
}
@keyframes vb-k7m-dock-spring { 0% { transform: scale(1); } 44% { transform: scale(.82); } 76% { transform: scale(1.12); } 100% { transform: scale(1); } }
</style>

<nav class="vb-k7m-dock__tray" aria-label="Разделы портфолио">
<a class="vb-k7m-dock__item" href="#works" aria-current="page"><img class="vb-k7m-dock__folder" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 72'%3E%3Cpath fill='%235ba7ff' d='M4 16c0-5 4-9 9-9h23l8 9h31c5 0 9 4 9 9v35c0 5-4 9-9 9H13c-5 0-9-4-9-9z'/%3E%3Cpath fill='%2393c7ff' d='M4 25c0-5 4-9 9-9h62c5 0 9 4 9 9v35c0 5-4 9-9 9H13c-5 0-9-4-9-9z'/%3E%3C/svg%3E"><span class="vb-k7m-dock__label">Работы</span><span class="vb-k7m-dock__dot" aria-hidden="true"></span></a>
<a class="vb-k7m-dock__item" href="#about"><img class="vb-k7m-dock__folder" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 72'%3E%3Cpath fill='%23b47cff' d='M4 16c0-5 4-9 9-9h23l8 9h31c5 0 9 4 9 9v35c0 5-4 9-9 9H13c-5 0-9-4-9-9z'/%3E%3Cpath fill='%23d2b4ff' d='M4 25c0-5 4-9 9-9h62c5 0 9 4 9 9v35c0 5-4 9-9 9H13c-5 0-9-4-9-9z'/%3E%3C/svg%3E"><span class="vb-k7m-dock__label">Обо мне</span><span class="vb-k7m-dock__dot" aria-hidden="true"></span></a>
<a class="vb-k7m-dock__item" href="#services"><img class="vb-k7m-dock__folder" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 72'%3E%3Cpath fill='%23ff9e4a' d='M4 16c0-5 4-9 9-9h23l8 9h31c5 0 9 4 9 9v35c0 5-4 9-9 9H13c-5 0-9-4-9-9z'/%3E%3Cpath fill='%23ffc58d' d='M4 25c0-5 4-9 9-9h62c5 0 9 4 9 9v35c0 5-4 9-9 9H13c-5 0-9-4-9-9z'/%3E%3C/svg%3E"><span class="vb-k7m-dock__label">Услуги</span><span class="vb-k7m-dock__dot" aria-hidden="true"></span></a>
<a class="vb-k7m-dock__item" href="#blog"><img class="vb-k7m-dock__folder" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 72'%3E%3Cpath fill='%234abf8a' d='M4 16c0-5 4-9 9-9h23l8 9h31c5 0 9 4 9 9v35c0 5-4 9-9 9H13c-5 0-9-4-9-9z'/%3E%3Cpath fill='%2389d9b5' d='M4 25c0-5 4-9 9-9h62c5 0 9 4 9 9v35c0 5-4 9-9 9H13c-5 0-9-4-9-9z'/%3E%3C/svg%3E"><span class="vb-k7m-dock__label">Блог</span><span class="vb-k7m-dock__dot" aria-hidden="true"></span></a>
<a class="vb-k7m-dock__item" href="#contact"><img class="vb-k7m-dock__folder" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 72'%3E%3Cpath fill='%23ed6e91' d='M4 16c0-5 4-9 9-9h23l8 9h31c5 0 9 4 9 9v35c0 5-4 9-9 9H13c-5 0-9-4-9-9z'/%3E%3Cpath fill='%23f6a7bd' d='M4 25c0-5 4-9 9-9h62c5 0 9 4 9 9v35c0 5-4 9-9 9H13c-5 0-9-4-9-9z'/%3E%3C/svg%3E"><span class="vb-k7m-dock__label">Контакты</span><span class="vb-k7m-dock__dot" aria-hidden="true"></span></a>
<a class="vb-k7m-dock__item" href="https://www.behance.net/" target="_blank" rel="noopener noreferrer"><img class="vb-k7m-dock__folder" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 72'%3E%3Cpath fill='%23f2bd3e' d='M4 16c0-5 4-9 9-9h23l8 9h31c5 0 9 4 9 9v35c0 5-4 9-9 9H13c-5 0-9-4-9-9z'/%3E%3Cpath fill='%23ffe08a' d='M4 25c0-5 4-9 9-9h62c5 0 9 4 9 9v35c0 5-4 9-9 9H13c-5 0-9-4-9-9z'/%3E%3C/svg%3E"><span class="vb-k7m-dock__label">Behance</span><span class="vb-k7m-dock__dot" aria-hidden="true"></span></a>
<a class="vb-k7m-dock__item" href="https://t.me/" target="_blank" rel="noopener noreferrer"><img class="vb-k7m-dock__folder" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 72'%3E%3Cpath fill='%23ea6e67' d='M4 16c0-5 4-9 9-9h23l8 9h31c5 0 9 4 9 9v35c0 5-4 9-9 9H13c-5 0-9-4-9-9z'/%3E%3Cpath fill='%23f4a19c' d='M4 25c0-5 4-9 9-9h62c5 0 9 4 9 9v35c0 5-4 9-9 9H13c-5 0-9-4-9-9z'/%3E%3C/svg%3E"><span class="vb-k7m-dock__label">Telegram</span><span class="vb-k7m-dock__dot" aria-hidden="true"></span></a>
<a class="vb-k7m-dock__item" href="https://dribbble.com/" target="_blank" rel="noopener noreferrer"><img class="vb-k7m-dock__folder" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 72'%3E%3Cpath fill='%2350bfc5' d='M4 16c0-5 4-9 9-9h23l8 9h31c5 0 9 4 9 9v35c0 5-4 9-9 9H13c-5 0-9-4-9-9z'/%3E%3Cpath fill='%2389e0e4' d='M4 25c0-5 4-9 9-9h62c5 0 9 4 9 9v35c0 5-4 9-9 9H13c-5 0-9-4-9-9z'/%3E%3C/svg%3E"><span class="vb-k7m-dock__label">Dribbble</span><span class="vb-k7m-dock__dot" aria-hidden="true"></span></a>
</nav>
<script>
(function () {
var root = document.getElementById('vb-k7m-dock');
if (!root || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
var tray = root.querySelector('.vb-k7m-dock__tray');
var items = Array.prototype.slice.call(root.querySelectorAll('.vb-k7m-dock__item'));
var isTouch = window.matchMedia('(hover: none)').matches;
function resetWave() { items.forEach(function (item) { item.style.setProperty('--vb-k7m-scale', '1'); }); }
function wave(event) { if (isTouch) return; var pointerX = event.clientX; items.forEach(function (item) { var rect = item.getBoundingClientRect(); var distance = Math.abs(pointerX - (rect.left + rect.width / 2)); var scale = 1 + Math.max(0, 0.38 * (1 - distance / 118)); item.style.setProperty('--vb-k7m-scale', scale.toFixed(3)); }); }
tray.addEventListener('pointermove', wave);
tray.addEventListener('pointerleave', resetWave);
items.forEach(function (item) { item.addEventListener('click', function () { if (!isTouch) return; item.classList.remove('vb-k7m-dock__item--pressed'); void item.offsetWidth; item.classList.add('vb-k7m-dock__item--pressed'); }); item.addEventListener('animationend', function () { item.classList.remove('vb-k7m-dock__item--pressed'); }); });
}());
</script>
</section>