Menu with Typewriter<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@700&family=DM+Sans:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\n <style>\n * {\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n }\n\n body {\n background-color: #1a1a1a;\n margin: 0;\n padding: 0;\n font-family: 'Roboto', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow-x: hidden;\n max-width: 100%;\n }\n\n .tw-block-wrapper {\n width: 100%;\n max-width: 100%;\n overflow-x: hidden;\n padding: 20px 20px 0 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .menu-container {\n text-align: center;\n margin: 10px auto 30px auto;\n font-family: 'Roboto', sans-serif;\n color: #FEF4EE;\n font-size: 14px;\n width: 100%;\n max-width: 1200px;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: 5px;\n padding: 0 10px;\n }\n\n .menu-link {\n color: #FEF4EE;\n text-decoration: none;\n transition: color 0.3s, text-decoration 0.3s;\n cursor: pointer;\n padding: 0 5px;\n position: relative;\n display: inline-block;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n\n .menu-link:not(:last-child)::after {\n content: \"\u25cf\";\n color: #FEF4EE;\n margin-left: 10px;\n margin-right: 5px;\n font-size: 1.2em;\n vertical-align: middle;\n opacity: 0.7;\n }\n\n .menu-link:hover { color: #FEF4EE; text-decoration: underline; }\n .menu-link:active { transform: translateY(1px); }\n .menu-link.active { color: #FEF4EE; font-weight: bold; text-decoration: none; }\n\n .typewriter-container {\n min-height: 150px;\n font-family: 'Roboto', sans-serif;\n color: #FEF4EE;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0 20px;\n transition: opacity 0.3s ease;\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n z-index: 2;\n }\n\n \/* \u2500\u2500 CTA Button \u2014 absolute overlay inside .model-container \u2500\u2500 *\/\n .mg-btn-wrap {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 10;\n pointer-events: auto;\n }\n\n .mg-cta {\n --mg-gold: #F2B839;\n --mg-navy: #1B2A4A;\n --mg-navy-deep: #0F1E3C;\n --mg-cream: #FEF4EE;\n --btn-height: 54px;\n --btn-radius: 30px;\n --circle-size: 40px;\n --circle-offset: 7px;\n --speed: 0.45s;\n --ease: cubic-bezier(0.4, 0, 0.15, 1);\n\n position: relative;\n display: inline-flex;\n align-items: center;\n height: var(--btn-height);\n padding: 0 calc(var(--circle-size) + var(--circle-offset) + 14px) 0 28px;\n border: 2px solid rgba(242, 184, 57, 0.15);\n border-radius: var(--btn-radius);\n background: var(--mg-cream);\n cursor: pointer;\n text-decoration: none;\n overflow: hidden;\n font-family: 'DM Sans', sans-serif;\n transition:\n border-color var(--speed) var(--ease),\n box-shadow var(--speed) var(--ease);\n -webkit-tap-highlight-color: transparent;\n }\n\n .mg-cta::before {\n content: '';\n position: absolute;\n right: calc(var(--circle-offset) + var(--circle-size) \/ 2);\n top: 50%;\n width: var(--circle-size);\n height: var(--circle-size);\n background: var(--mg-gold);\n border-radius: 50%;\n transform: translate(50%, -50%) scale(1);\n transition: transform var(--speed) var(--ease);\n z-index: 1;\n pointer-events: none;\n }\n\n .mg-cta:hover::before { transform: translate(50%, -50%) scale(8); }\n\n .mg-cta:hover {\n border-color: var(--mg-gold);\n box-shadow:\n 0 8px 32px rgba(242, 184, 57, 0.25),\n 0 2px 8px rgba(0, 0, 0, 0.2);\n }\n\n .mg-cta__text {\n position: relative;\n z-index: 2;\n font-size: 15px;\n font-weight: 500;\n color: var(--mg-navy);\n white-space: nowrap;\n letter-spacing: -0.01em;\n line-height: 1;\n transition: color var(--speed) var(--ease);\n pointer-events: none;\n }\n\n .mg-cta:hover .mg-cta__text { color: var(--mg-navy-deep); }\n\n .mg-cta__arrow {\n position: absolute;\n z-index: 3;\n right: var(--circle-offset);\n top: 50%;\n transform: translateY(-50%);\n width: var(--circle-size);\n height: var(--circle-size);\n border-radius: 50%;\n background: var(--mg-gold);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background var(--speed) var(--ease);\n pointer-events: none;\n }\n\n .mg-cta:hover .mg-cta__arrow { background: transparent; }\n\n .mg-cta__arrow svg {\n width: 18px;\n height: 18px;\n stroke: var(--mg-navy-deep);\n stroke-width: 2.5;\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n transition: transform var(--speed) var(--ease);\n }\n\n .mg-cta:hover .mg-cta__arrow svg { transform: translateX(4px); }\n .mg-cta:focus-visible { outline: 3px solid var(--mg-gold); outline-offset: 4px; }\n\n @media (hover: none) {\n .mg-cta:active::before { transform: translate(50%, -50%) scale(8); }\n .mg-cta:active {\n border-color: var(--mg-gold);\n box-shadow: 0 8px 32px rgba(242, 184, 57, 0.25), 0 2px 8px rgba(0, 0, 0, 0.2);\n }\n .mg-cta:active .mg-cta__text { color: var(--mg-navy-deep); }\n .mg-cta:active .mg-cta__arrow { background: transparent; }\n .mg-cta:active .mg-cta__arrow svg { transform: translateX(4px); }\n }\n \/* \u2500\u2500 end CTA \u2500\u2500 *\/\n\n .model-container {\n width: 100%;\n max-width: 1200px;\n height: clamp(250px, 45vw, 500px);\n margin: -90px auto 0;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1;\n }\n\n #canvas3d {\n width: 100%;\n height: 100%;\n display: block;\n outline: none;\n opacity: 0;\n transition: opacity 0.5s ease-in-out;\n }\n\n #canvas3d.loaded { opacity: 1; }\n\n .model-loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #FEF4EE;\n font-size: 14px;\n opacity: 0.7;\n pointer-events: none;\n }\n\n .model-loader.hidden { display: none; }\n\n .typewriter-heading {\n margin: 0;\n color: #FEF4EE;\n white-space: normal;\n word-wrap: break-word;\n overflow-wrap: break-word;\n hyphens: auto;\n text-align: center;\n font-weight: 700;\n font-family: 'Roboto', sans-serif;\n font-size: clamp(22px, 4.5vw, 48px);\n line-height: 1.25;\n transition: opacity 0.3s ease;\n width: 100%;\n max-width: 100%;\n padding: 0 10px;\n position: relative;\n display: block;\n margin-left: auto;\n margin-right: auto;\n box-sizing: border-box;\n }\n\n @media (hover: none) and (pointer: coarse) {\n .menu-link {\n padding: 8px 5px;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .menu-container {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 5px;\n }\n }\n\n @media (max-width: 374px) {\n .tw-block-wrapper { padding: 12px 8px 0 8px; }\n .menu-container { font-size: 12px; gap: 0 3px; padding: 0 5px; margin-bottom: 16px; }\n .menu-link { font-size: 12px; padding: 5px 2px; min-height: 36px; display: inline-flex; align-items: center; }\n .menu-link:not(:last-child)::after { margin-left: 4px; margin-right: 2px; font-size: 0.9em; }\n .typewriter-container { padding: 0 8px; min-height: 90px; }\n .typewriter-heading { font-size: clamp(16px, 6.5vw, 22px); line-height: 1.4; padding: 0 3px; }\n .mg-cta { --btn-height: 44px; --circle-size: 34px; --circle-offset: 5px; padding-left: 18px; }\n .mg-cta__text { font-size: 13px; }\n .model-container { height: clamp(200px, 60vw, 280px); margin-top: -20px; }\n }\n\n @media (max-width: 480px) {\n .tw-block-wrapper { padding: 14px 12px 0 12px; }\n .menu-container { font-size: 13px; margin-bottom: 20px; gap: 0 5px; padding: 0 5px; }\n .menu-link { padding: 6px 3px; min-height: 36px; font-size: 13px; }\n .menu-link:not(:last-child)::after { margin-left: 6px; margin-right: 3px; font-size: 1em; }\n .typewriter-container { min-height: 100px; padding: 0 10px; }\n .typewriter-heading { font-size: clamp(18px, 5.5vw, 28px); line-height: 1.35; padding: 0 5px; }\n .mg-cta { --btn-height: 48px; --circle-size: 36px; --circle-offset: 6px; padding-left: 22px; }\n .mg-cta__text { font-size: 14px; }\n .mg-cta__arrow svg { width: 16px; height: 16px; }\n .model-container { height: clamp(220px, 70vw, 350px); margin-top: -30px; }\n }\n\n @media (min-width: 481px) and (max-width: 768px) {\n .tw-block-wrapper { padding: 16px 16px 0 16px; }\n .menu-container { font-size: 14px; padding: 0 15px; }\n .typewriter-container { padding: 0 20px; }\n .typewriter-heading { font-size: clamp(24px, 4.5vw, 36px); line-height: 1.3; padding: 0 10px; }\n .menu-link:not(:last-child)::after { margin-left: 8px; margin-right: 4px; }\n .model-container { height: clamp(300px, 55vw, 420px); margin-top: -30px; }\n }\n\n @media (min-width: 769px) and (max-width: 1024px) {\n .menu-container { font-size: 15px; padding: 0 20px; }\n .typewriter-container { padding: 0 25px; }\n .typewriter-heading { font-size: clamp(28px, 4.2vw, 42px); line-height: 1.28; padding: 0 15px; }\n .menu-link:not(:last-child)::after { margin-left: 9px; margin-right: 4px; }\n .model-container { height: clamp(380px, 42vw, 480px); margin-top: -40px; }\n }\n\n @media (min-width: 1025px) and (max-width: 1200px) {\n .menu-container { font-size: 15px; padding: 0 25px; }\n .typewriter-container { padding: 0 30px; }\n .typewriter-heading { font-size: clamp(32px, 3.8vw, 46px); line-height: 1.26; padding: 0 20px; }\n }\n\n @media (min-width: 1201px) {\n .menu-container { font-size: 16px; padding: 0 30px; }\n .typewriter-container { padding: 0 40px; }\n .typewriter-heading { font-size: 48px; line-height: 1.25; padding: 0 30px; }\n }\n\n @media (min-width: 1921px) {\n .menu-container { font-size: 18px; max-width: 1600px; }\n .typewriter-container { max-width: 1600px; padding: 0 50px; }\n .typewriter-heading { font-size: 56px; line-height: 1.24; }\n }\n\n @media (max-height: 500px) and (orientation: landscape) {\n .tw-block-wrapper { padding: 10px 16px 0 16px; }\n .menu-container { margin: 5px auto 15px auto; font-size: 13px; }\n .typewriter-container { min-height: 60px; padding: 0 15px; }\n .typewriter-heading { font-size: clamp(16px, 3.5vw, 28px); line-height: 1.2; }\n .mg-btn-wrap { padding: 10px 0 5px; }\n .model-container { height: clamp(200px, 40vh, 340px); margin-top: -20px; }\n }\n\n @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {\n .typewriter-heading { font-size: clamp(26px, 3.8vw, 40px); padding: 0 20px; line-height: 1.25; }\n .typewriter-container { padding: 0 30px; }\n }\n\n @supports (-webkit-touch-callout: none) {\n .typewriter-heading { -webkit-text-size-adjust: 100%; text-align: center; }\n .typewriter-container { -webkit-box-align: center; -webkit-box-pack: center; }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .typewriter-heading { transition: none; }\n }\n\n @media (prefers-color-scheme: dark) {\n body { background-color: #1a1a1a; }\n }\n\n @media (prefers-contrast: high) {\n .menu-link { text-decoration: underline; }\n .menu-link.active { text-decoration: double underline; }\n }\n\n @media print {\n body { background-color: white; color: black; }\n .menu-link { color: black; }\n .typewriter-heading { color: black; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"tw-block-wrapper\">\n\n <div class=\"menu-container\">\n <a class=\"menu-link active\" data-quote=\"\u0412\u043d\u0435\u0448\u043d\u0435\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0435 \u0431\u044e\u0440\u043e: \u0431\u0435\u0440\u0451\u043c \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u0434\u043e\u0432\u043e\u0434\u0438\u043c \u0434\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\">\u0414\u043b\u044f \u0432\u0441\u0435\u0445<\/a>\n <a class=\"menu-link\" data-quote=\"\u0421\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u043c \u0441\u0440\u043e\u043a\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 2 \u0440\u0430\u0437\u0430 \u0431\u0435\u0437 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0448\u0442\u0430\u0442\u0430\">\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0443<\/a>\n <a class=\"menu-link\" data-quote=\"\u041d\u0430\u0432\u043e\u0434\u0438\u043c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432 CAD\/PDM \u0437\u0430 30 \u0434\u043d\u0435\u0439 \u2014 \u0431\u0435\u0437 \u0445\u0430\u043e\u0441\u0430 \u0438 \u043f\u043e\u0442\u0435\u0440\u044c \u0434\u0430\u043d\u043d\u044b\u0445\">IT<\/a>\n <a class=\"menu-link\" data-quote=\"\u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0440\u0443\u0447\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043c \u0434\u043e 200+ \u0447\u0430\u0441\u043e\u0432 \u0432 \u043c\u0435\u0441\u044f\u0446\">\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/a>\n <\/div>\n\n <div class=\"typewriter-container\">\n <h1 id=\"projects-heading\" class=\"typewriter-heading active\">\u0426\u0438\u0444\u0440\u043e\u0432\u0438\u0437\u0438\u0440\u0443\u0435\u043c, \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u0443\u0435\u043c, \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c<\/h1>\n <\/div>\n\n <div class=\"model-container\">\n <canvas id=\"canvas3d\"><\/canvas>\n <div class=\"model-loader\" id=\"modelLoader\">Loading 3D model…<\/div>\n \n <div class=\"mg-btn-wrap\">\n <a href=\"https:\/\/n8n.mechanogurus.ru\/form\/105adc81-c50a-40f0-ab54-f0b65857d49e\" class=\"mg-cta\" role=\"button\" target=\"_blank\" rel=\"noopener noreferrer\">\n <span class=\"mg-cta__text\">\u041e\u0431\u0441\u0443\u0434\u0438\u043c ?<\/span>\n <span class=\"mg-cta__arrow\">\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"13 6 19 12 13 18\"\/><\/svg>\n <\/span>\n <\/a>\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\n document.documentElement.classList.remove('no-js');\n document.documentElement.classList.add('js');\n\n document.addEventListener('DOMContentLoaded', function() {\n const menuLinks = document.querySelectorAll('.menu-link');\n const heading = document.getElementById('projects-heading');\n let activeTimeout;\n let lastActiveLink = document.querySelector('.menu-link.active');\n let isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n\n let lastActiveIndex = 0;\n try {\n lastActiveIndex = parseInt(localStorage.getItem('lastActiveIndex')) || 0;\n } catch (e) {}\n\n lastActiveIndex = (lastActiveIndex + 1) % menuLinks.length;\n\n try {\n localStorage.setItem('lastActiveIndex', lastActiveIndex);\n } catch (e) {}\n\n menuLinks.forEach((link, index) => {\n if (index === lastActiveIndex) {\n link.classList.add('active');\n lastActiveLink = link;\n heading.textContent = link.getAttribute('data-quote');\n } else {\n link.classList.remove('active');\n }\n });\n\n function updateHeading(newQuote, immediate = false) {\n if (immediate) {\n heading.textContent = newQuote;\n heading.style.opacity = '1';\n return;\n }\n heading.style.opacity = '0';\n setTimeout(() => {\n heading.textContent = newQuote;\n heading.style.opacity = '1';\n }, 300);\n }\n\n function activateLink(link) {\n menuLinks.forEach(l => l.classList.remove('active'));\n link.classList.add('active');\n lastActiveLink = link;\n const newQuote = link.getAttribute('data-quote');\n updateHeading(newQuote);\n const clickedIndex = Array.from(menuLinks).indexOf(link);\n try {\n localStorage.setItem('lastActiveIndex', clickedIndex);\n } catch (e) {}\n }\n\n menuLinks.forEach(link => {\n link.addEventListener('click', function(e) {\n e.preventDefault();\n activateLink(this);\n });\n\n if (isTouchDevice) {\n link.addEventListener('touchstart', function(e) {\n if (e.touches.length > 1) e.preventDefault();\n }, { passive: true });\n link.addEventListener('touchend', function(e) {\n e.preventDefault();\n activateLink(this);\n });\n }\n\n if (!isTouchDevice) {\n link.addEventListener('mouseenter', function() {\n clearTimeout(activeTimeout);\n updateHeading(this.getAttribute('data-quote'));\n });\n link.addEventListener('mouseleave', function() {\n if (this !== lastActiveLink) {\n heading.style.opacity = '0';\n activeTimeout = setTimeout(() => {\n updateHeading(lastActiveLink.getAttribute('data-quote'), true);\n }, 300);\n }\n });\n }\n });\n\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Tab') document.body.classList.add('keyboard-navigation');\n });\n document.addEventListener('mousedown', function() {\n document.body.classList.remove('keyboard-navigation');\n });\n\n let resizeTimeout;\n window.addEventListener('resize', function() {\n clearTimeout(resizeTimeout);\n resizeTimeout = setTimeout(function() {\n heading.style.opacity = '0.8';\n setTimeout(() => { heading.style.opacity = '1'; }, 100);\n }, 250);\n });\n\n setTimeout(() => { heading.style.opacity = '1'; }, 100);\n });\n<\/script>\n\n<script>\n const initThreeJS = () => {\n const canvas = document.getElementById('canvas3d');\n const container = document.querySelector('.model-container');\n const loaderElement = document.getElementById('modelLoader');\n\n const scene = new THREE.Scene();\n\n const camera = new THREE.PerspectiveCamera(\n 45,\n container.clientWidth \/ container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.set(0, 1, 6);\n camera.lookAt(0, 0, 0);\n\n const renderer = new THREE.WebGLRenderer({\n canvas: canvas,\n alpha: true,\n antialias: window.devicePixelRatio < 2,\n powerPreference: \"high-performance\",\n stencil: false,\n depth: true\n });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n renderer.outputEncoding = THREE.sRGBEncoding;\n\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);\n scene.add(ambientLight);\n\n const directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.8);\n directionalLight1.position.set(5, 8, 5);\n directionalLight1.castShadow = true;\n directionalLight1.shadow.mapSize.width = 1024;\n directionalLight1.shadow.mapSize.height = 1024;\n directionalLight1.shadow.camera.near = 0.5;\n directionalLight1.shadow.camera.far = 50;\n scene.add(directionalLight1);\n\n const directionalLight2 = new THREE.DirectionalLight(0xe0e0e0, 0.4);\n directionalLight2.position.set(-5, 3, -5);\n scene.add(directionalLight2);\n\n const fillLight = new THREE.DirectionalLight(0xb0b0b0, 0.3);\n fillLight.position.set(0, -5, 0);\n scene.add(fillLight);\n\n let model = null;\n let isModelLoaded = false;\n\n const planeGeometry = new THREE.PlaneGeometry(30, 30);\n const planeMaterial = new THREE.ShadowMaterial({ opacity: 0.3 });\n const plane = new THREE.Mesh(planeGeometry, planeMaterial);\n plane.rotation.x = -Math.PI \/ 2;\n plane.position.y = -2;\n plane.receiveShadow = true;\n scene.add(plane);\n\n THREE.Cache.enabled = true;\n\n const gltfLoader = new THREE.GLTFLoader();\n const startTime = performance.now();\n\n gltfLoader.load(\n '\/wp-content\/uploads\/2025\/06\/Reservoir6.glb',\n function(gltf) {\n model = gltf.scene;\n\n model.traverse((child) => {\n if (child.isMesh) {\n child.material = new THREE.MeshStandardMaterial({\n color: 0xa0a0a0,\n metalness: 0.3,\n roughness: 0.6,\n flatShading: false\n });\n child.castShadow = true;\n child.receiveShadow = true;\n if (child.geometry) child.geometry.computeBoundingSphere();\n child.frustumCulled = true;\n }\n });\n\n const box = new THREE.Box3().setFromObject(model);\n const center = box.getCenter(new THREE.Vector3());\n const size = box.getSize(new THREE.Vector3());\n\n const maxDim = Math.max(size.x, size.y, size.z);\n const scale = 4.5 \/ maxDim;\n model.scale.multiplyScalar(scale);\n model.position.sub(center.multiplyScalar(scale));\n\n scene.add(model);\n isModelLoaded = true;\n\n if (loaderElement) loaderElement.classList.add('hidden');\n canvas.classList.add('loaded');\n\n const loadTime = performance.now() - startTime;\n console.log(`Model loaded in ${loadTime.toFixed(0)}ms`);\n\n if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n model.rotation.set(0, 0, 0);\n }\n },\n function(xhr) {\n if (xhr.lengthComputable && loaderElement) {\n const pct = Math.round((xhr.loaded \/ xhr.total) * 100);\n loaderElement.textContent = `Loading 3D model... ${pct}%`;\n }\n },\n function(error) {\n console.error('Error loading model:', error);\n if (loaderElement) loaderElement.textContent = 'Failed to load 3D model';\n }\n );\n\n let lastTime = 0;\n const targetFPS = 60;\n const frameInterval = 1000 \/ targetFPS;\n\n const animate = (currentTime) => {\n requestAnimationFrame(animate);\n const deltaTime = currentTime - lastTime;\n if (deltaTime >= frameInterval) {\n lastTime = currentTime - (deltaTime % frameInterval);\n if (model && isModelLoaded) model.rotation.y += 0.008;\n renderer.render(scene, camera);\n }\n };\n\n animate(0);\n\n let resizeTimeout;\n const handleResize = () => {\n clearTimeout(resizeTimeout);\n resizeTimeout = setTimeout(() => {\n const width = container.clientWidth;\n const height = container.clientHeight;\n camera.aspect = width \/ height;\n camera.updateProjectionMatrix();\n renderer.setSize(width, height);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n }, 100);\n };\n\n window.addEventListener('resize', handleResize, { passive: true });\n\n document.addEventListener('visibilitychange', () => {\n if (document.hidden) {\n renderer.setAnimationLoop(null);\n } else {\n animate(0);\n }\n });\n };\n\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initThreeJS);\n } else {\n initThreeJS();\n }\n<\/script>\n\n<noscript>\n <style>\n .menu-link:hover { text-decoration: underline; }\n <\/style>\n<\/noscript>\n\n<\/body>\n<\/html>\n\n\n\n<p class=\"has-text-align-center has-background-color has-text-color has-link-color has-large-font-size wp-elements-2a9a06dda5ad26237db4c277f2d7e477 wp-block-paragraph\">\u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0435 \u0431\u044e\u0440\u043e \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0439 \u044d\u043f\u043e\u0445\u0438<\/p>\n<\/div>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\">\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n .mgp-wrap {\n display: flex;\n flex-direction: row;\n width: 100%;\n max-width: 1400px;\n margin: 0 auto;\n gap: 10px;\n height: 64vh;\n min-height: 340px;\n }\n\n .mgp-panel {\n position: relative;\n flex: 1;\n min-width: 80px;\n background-size: cover;\n background-position: center;\n border-radius: 10px;\n cursor: pointer;\n overflow: hidden;\n transition: flex 0.6s cubic-bezier(0.4,0,0.2,1);\n }\n\n .mgp-panel::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(160deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.78) 100%);\n z-index: 1;\n transition: background 0.4s;\n }\n\n .mgp-panel.active {\n flex: 4;\n }\n .mgp-panel.active::before {\n background: linear-gradient(160deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.82) 100%);\n }\n\n \/* \u2500\u2500 Collapsed inner: vertically centered \u2500\u2500 *\/\n .mgp-inner {\n position: absolute;\n inset: 0;\n z-index: 2;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 24px 16px;\n overflow: hidden;\n }\n\n \/* \u2500\u2500 Expanded inner: top-left column \u2500\u2500 *\/\n .mgp-panel.active .mgp-inner {\n justify-content: flex-start;\n align-items: flex-start;\n padding: 36px 36px 36px;\n top: 0;\n bottom: auto;\n height: auto;\n }\n\n \/* \u2500\u2500 Title: vertical when collapsed \u2500\u2500 *\/\n .mgp-title {\n font-family: 'Bebas Neue', 'Impact', sans-serif;\n font-size: 22px;\n font-weight: 400;\n color: #fff;\n letter-spacing: 5px;\n text-transform: uppercase;\n white-space: nowrap;\n line-height: 1;\n -webkit-text-stroke: 0.5px #fff;\n writing-mode: vertical-rl;\n text-orientation: mixed;\n transform: rotate(180deg);\n flex-shrink: 0;\n }\n .mgp-panel.active .mgp-title {\n writing-mode: horizontal-tb;\n transform: rotate(0deg);\n font-size: 48px;\n letter-spacing: 3px;\n white-space: normal;\n margin-bottom: 10px;\n line-height: 1.05;\n }\n\n \/* \u2500\u2500 Pain: hidden when collapsed, shown when active \u2500\u2500 *\/\n .mgp-pain {\n display: none;\n font-family: 'Manrope', 'Segoe UI', sans-serif;\n font-size: 17px;\n font-weight: 600;\n color: #F2B839;\n letter-spacing: 0.2px;\n line-height: 1.45;\n margin-bottom: 12px;\n width: 100%;\n }\n .mgp-panel.active .mgp-pain { display: block; }\n\n .mgp-solution {\n display: none;\n font-family: 'Manrope', 'Segoe UI', sans-serif;\n font-size: 15px;\n color: rgba(255,255,255,0.72);\n font-style: italic;\n margin-bottom: 16px;\n }\n .mgp-panel.active .mgp-solution { display: block; }\n\n .mgp-desc {\n display: none;\n font-family: 'Manrope', 'Segoe UI', sans-serif;\n font-size: 15px;\n color: rgba(255,255,255,0.88);\n line-height: 1.65;\n margin-bottom: 20px;\n width: 100%;\n }\n .mgp-panel.active .mgp-desc { display: block; }\n .mgp-desc ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }\n .mgp-desc li { padding-left: 22px; position: relative; }\n .mgp-desc li::before {\n content: '';\n position: absolute;\n left: 0; top: 9px;\n width: 8px; height: 8px;\n background: #E1830F;\n border-radius: 50%;\n }\n\n .mgp-cta {\n display: none;\n font-family: 'Manrope', 'Segoe UI', sans-serif;\n font-size: 14px;\n font-weight: 600;\n color: #fff;\n text-decoration: none;\n letter-spacing: 1.2px;\n text-transform: uppercase;\n border-bottom: 2px solid #F2B839;\n padding-bottom: 3px;\n }\n .mgp-cta:hover { color: #F2B839; }\n .mgp-panel.active .mgp-cta { display: inline-block; }\n\n .mgp-panel:nth-child(1) { background-image: url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/solidworks-pdm-implementation-service.jpg'); }\n .mgp-panel:nth-child(2) { background-image: url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/reengineering.png'); }\n .mgp-panel:nth-child(3) { background-image: url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/Standard_procedures.jpg'); }\n\n \/* \u2500\u2500 Tablet \u2500\u2500 *\/\n @media (max-width: 1024px) and (min-width: 769px) {\n .mgp-wrap { height: 56vh; }\n .mgp-panel { min-width: 64px; }\n .mgp-title { font-size: 18px; }\n .mgp-panel.active .mgp-title { font-size: 36px; }\n .mgp-pain { font-size: 15px; }\n .mgp-desc { font-size: 14px; }\n .mgp-panel.active .mgp-inner { padding: 24px 24px 24px; }\n }\n\n \/* \u2500\u2500 Mobile: back to horizontal rows stacked vertically \u2500\u2500 *\/\n @media (max-width: 768px) {\n .mgp-wrap {\n flex-direction: column;\n height: auto;\n min-height: 0;\n gap: 8px;\n }\n\n .mgp-panel {\n flex: none;\n width: 100%;\n height: 80px;\n min-width: 0;\n transition: height 0.55s cubic-bezier(0.4,0,0.2,1);\n }\n .mgp-panel.active {\n flex: none;\n height: 400px;\n }\n\n \/* Collapsed: horizontal row with title + pain *\/\n .mgp-inner {\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: center;\n padding: 10px 16px;\n gap: 0;\n row-gap: 3px;\n }\n .mgp-panel.active .mgp-inner {\n flex-direction: column;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n padding: 18px 18px 18px;\n top: 0;\n bottom: auto;\n height: auto;\n }\n\n \/* Title horizontal on mobile collapsed *\/\n .mgp-title {\n writing-mode: horizontal-tb;\n transform: none;\n font-size: 17px;\n letter-spacing: 3px;\n width: calc(100% - 28px);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n order: 1;\n }\n .mgp-panel.active .mgp-title {\n writing-mode: horizontal-tb;\n transform: none;\n font-size: 26px;\n width: 100%;\n white-space: normal;\n overflow: visible;\n text-overflow: unset;\n margin-bottom: 8px;\n letter-spacing: 2px;\n }\n\n \/* Pain visible in collapsed row on mobile too *\/\n .mgp-pain {\n display: block;\n font-size: 12px;\n width: 100%;\n order: 2;\n line-height: 1.35;\n margin-bottom: 0;\n }\n .mgp-panel.active .mgp-pain {\n font-size: 13.5px;\n margin-bottom: 10px;\n }\n\n \/* Arrow top-right *\/\n .mgp-panel::after {\n content: '\u203a';\n position: absolute;\n right: 16px;\n top: 14px;\n font-size: 20px;\n color: rgba(255,255,255,0.45);\n z-index: 3;\n font-family: sans-serif;\n }\n .mgp-panel.active::after { display: none; }\n\n .mgp-solution { font-size: 12.5px; margin-bottom: 12px; }\n .mgp-desc { font-size: 13px; margin-bottom: 14px; }\n .mgp-desc ul { gap: 6px; }\n .mgp-desc li { padding-left: 18px; }\n .mgp-desc li::before { width: 7px; height: 7px; top: 7px; }\n .mgp-cta { font-size: 12.5px; }\n }\n\n @media (max-width: 400px) {\n .mgp-panel { height: 74px; }\n .mgp-panel.active { height: 370px; }\n .mgp-title { font-size: 15px; }\n .mgp-panel.active .mgp-title { font-size: 22px; }\n .mgp-pain { font-size: 11px; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"mgp-wrap\">\n\n <div class=\"mgp-panel\">\n <div class=\"mgp-inner\">\n <h2 class=\"mgp-title\">\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u0441 \u041a\u0414<\/h2>\n <p class=\"mgp-pain\">\u041a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d \u2014 \u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u041a\u0414 \u0441\u0432\u043e\u0438\u043c\u0438 \u0441\u0438\u043b\u0430\u043c\u0438 \u043d\u0435 \u0432\u044b\u0439\u0434\u0435\u0442?<\/p>\n <p class=\"mgp-solution\">\u0411\u0435\u0440\u0451\u043c \u0437\u0430\u0434\u0430\u0447\u0443 \u043e\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0434\u043e \u043f\u0443\u0441\u043a\u043e\u043d\u0430\u043b\u0430\u0434\u043a\u0438<\/p>\n <div class=\"mgp-desc\"><ul>\n <li>\u0423\u0441\u043b\u0443\u0433\u0438 \u0413\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0438 \u0413\u0418\u041f \u2014 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u0432\u0430\u0448\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435<\/li>\n <li>\u041f\u0440\u0435\u0434\u043f\u0440\u043e\u0435\u043a\u0442\u043d\u044b\u0435 \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438<\/li>\n <li>\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0447\u0451\u0442\u044b, \u043f\u043e\u0434\u0431\u043e\u0440 \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0430 \u0443\u0437\u043b\u043e\u0432<\/li>\n <li>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0439 \u0438 \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/li>\n <li>\u0421\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u043d\u0430 \u044d\u0442\u0430\u043f\u0430\u0445 \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u0443\u0441\u043a\u043e\u043d\u0430\u043b\u0430\u0434\u043a\u0438<\/li>\n <\/ul><\/div>\n <a href=\"https:\/\/mechanogurus.ru\/?page_id=1714\" class=\"mgp-cta\" target=\"_blank\">\u0423\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u2192<\/a>\n <\/div>\n <\/div>\n\n <div class=\"mgp-panel\">\n <div class=\"mgp-inner\">\n <h2 class=\"mgp-title\">\u0418\u0422 \u0420\u0435\u0448\u0435\u043d\u0438\u044f<\/h2>\n <p class=\"mgp-pain\">CAD \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442, \u0444\u0430\u0439\u043b\u044b \u0442\u0435\u0440\u044f\u044e\u0442\u0441\u044f, \u0430 PDM \u0442\u0430\u043a \u0438 \u043d\u0435 \u0432\u0437\u043b\u0435\u0442\u0435\u043b?<\/p>\n <p class=\"mgp-solution\">\u0412\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0430\u043c<\/p>\n <div class=\"mgp-desc\"><ul>\n <li>\u0412\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 CAD\/PDM\/PLM \u0438 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 VDI-\u0440\u0435\u0448\u0435\u043d\u0438\u0439<\/li>\n <li>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 1\u0421, ERP \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u043c\u0438<\/li>\n <li>\u041e\u0442\u043a\u0430\u0437\u043e\u0443\u0441\u0442\u043e\u0439\u0447\u0438\u0432\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0438 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/li>\n <li>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 n8n \u0438 IoT-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b<\/li>\n <\/ul><\/div>\n <a href=\"https:\/\/mechanogurus.ru\/?page_id=503\" class=\"mgp-cta\" target=\"_blank\">\u0423\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u2192<\/a>\n <\/div>\n <\/div>\n\n <div class=\"mgp-panel\">\n <div class=\"mgp-inner\">\n <h2 class=\"mgp-title\">\u0410\u0434\u0434\u0438\u0442\u0438\u0432\u043d\u044b\u0435 \u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438<\/h2>\n <p class=\"mgp-pain\">\u041d\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u043d\u0430\u0442\u0430 \u2014 \u043d\u0430\u043f\u0435\u0447\u0430\u0442\u0430\u0435\u043c \u043c\u0430\u043a\u0435\u0442 \u0434\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u0441\u0442\u0435\u043d\u0434\u0430<\/p>\n <p class=\"mgp-solution\">\u0421\u043a\u0430\u043d\u0438\u0440\u0443\u0435\u043c, \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u0443\u0435\u043c \u0438 \u043f\u0435\u0447\u0430\u0442\u0430\u0435\u043c \u044d\u043a\u0441\u043f\u043e\u043d\u0430\u0442 \u00ab\u043f\u043e\u0434 \u043a\u043b\u044e\u0447\u00bb<\/p>\n <div class=\"mgp-desc\"><ul>\n <li>3D-\u043f\u0435\u0447\u0430\u0442\u044c PLA, PETG, ABS, TPU \u0438 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0442\u0430\u043c\u0438 \u043d\u0430 BambuLab<\/li>\n <li>3D-\u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u0440\u0435\u0432\u0435\u0440\u0441-\u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u0430 \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430<\/li>\n <li>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432, \u0432\u044b\u0431\u043e\u0440 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0438 \u0440\u0435\u0436\u0438\u043c\u043e\u0432 \u043f\u0435\u0447\u0430\u0442\u0438<\/li>\n <li>\u041f\u043e\u0441\u0442\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0438 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0432 \u0438\u0437\u0434\u0435\u043b\u0438\u0435<\/li>\n <\/ul><\/div>\n <a href=\"https:\/\/mechanogurus.ru\/?page_id=1924\" class=\"mgp-cta\" target=\"_blank\">\u0423\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u2192<\/a>\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\n const panels = document.querySelectorAll('.mgp-panel');\n let timer = null;\n function clearT() { if (timer) { clearTimeout(timer); timer = null; } }\n function startT() {\n clearT();\n timer = setTimeout(() => panels.forEach(p => p.classList.remove('active')), 6000);\n }\n panels.forEach(panel => {\n panel.addEventListener('click', e => {\n if (e.target.closest('.mgp-cta')) return;\n const isActive = panel.classList.contains('active');\n panels.forEach(p => p.classList.remove('active'));\n if (!isActive) { panel.classList.add('active'); startT(); } else { clearT(); }\n });\n panel.addEventListener('mouseenter', () => { if (panel.classList.contains('active')) startT(); });\n });\n<\/script>\n\n<\/body>\n<\/html>\n<\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-landing-block\">\n\n<style>\n.wp-landing-block,\n.wp-landing-block *,\n.wp-landing-block *::before,\n.wp-landing-block *::after{\n\tbox-sizing:border-box;\n}\n\n\/* =========================\n ROOT CONTAINER\n========================= *\/\n.wp-landing-block{\n\t--radius:24px;\n\t--accent:#E1830F;\n\t--accent-yellow:#F2B839;\n\t--bg:#FEF4EE;\n\t--gap:clamp(24px,3vw,48px);\n\n\t\/* \u2705 unified font size *\/\n\t--text-base: clamp(.9rem,1.1vw,1.05rem);\n\n\twidth:calc(100% - 50px);\n\tmargin:60px auto;\n\n\tmax-width:1600px;\n\tpadding:var(--gap);\n\n\tbackground:var(--bg);\n\tborder-radius:var(--radius);\n\n\tdisplay:grid;\n\tgrid-template-columns:1.2fr 1fr;\n\tgap:var(--gap);\n\n\talign-items:stretch;\n\tcolor:#000;\n}\n\n\/* =========================\n MEDIA\n========================= *\/\n.wp-landing-block__media{\n\tposition:relative;\n\tborder-radius:var(--radius);\n\toverflow:hidden;\n\tbox-shadow:0 30px 60px rgba(0,0,0,.15);\n\tdisplay:flex;\n}\n\n.wp-landing-block__media img{\n\twidth:100%;\n\theight:100%;\n\tobject-fit:cover;\n\tobject-position:center;\n\tdisplay:block;\n}\n\n\/* =========================\n CONTENT\n========================= *\/\n.wp-landing-block__content{\n\tdisplay:flex;\n\tflex-direction:column;\n\tjustify-content:space-between;\n}\n\n\/* KEEP heading unchanged *\/\n.wp-landing-block__title{\n\tfont-size:clamp(1.4rem,2.2vw,2.4rem);\n\tfont-weight:700;\n\tcolor:var(--accent);\n\tmargin:0 0 1.2rem;\n\tline-height:1.2;\n}\n\n\/* \u2705 unified text *\/\n.wp-landing-block__intro{\n\tfont-size:var(--text-base);\n\tline-height:1.6;\n\tmargin:0 0 1.5rem;\n}\n\n.wp-landing-block__heading{\n\tfont-size:var(--text-base);\n\tfont-weight:600;\n\tmargin:0 0 .75rem;\n}\n\n.wp-landing-block__list{\n\tlist-style:none;\n\tpadding:0;\n\tmargin:0 0 1.5rem;\n}\n\n.wp-landing-block__item{\n\tdisplay:flex;\n\tgap:10px;\n\tmargin-bottom:.6rem;\n\tpadding:.6rem .8rem;\n\tbackground:rgba(226,131,15,.06);\n\tborder-radius:12px;\n\tfont-size:var(--text-base);\n\tline-height:1.6;\n}\n\n.wp-landing-block__marker{\n\tcolor:var(--accent);\n}\n\n.wp-landing-block__solution{\n\tbackground:rgba(226,131,15,.06);\n\tborder-left:5px solid var(--accent);\n\tpadding:1rem 1.2rem;\n\tborder-radius:0 16px 16px 0;\n\tmargin-bottom:1.5rem;\n}\n\n.wp-landing-block__solution-text{\n\tmargin:0;\n\tline-height:1.6;\n\tfont-size:var(--text-base);\n}\n\n\/* =========================\n CTA RIGHT ALIGNED\n========================= *\/\n.wp-landing-block__cta{\n\talign-self:flex-end;\n\tdisplay:inline-flex;\n\talign-items:center;\n\tjustify-content:center;\n\tpadding:.9rem 2rem;\n\tborder-radius:999px;\n\tbackground:linear-gradient(135deg,var(--accent),var(--accent-yellow));\n\tfont-weight:700;\n\ttext-decoration:none;\n\tcolor:#000;\n\ttransition:.2s ease;\n}\n\n.wp-landing-block__cta:hover{\n\ttransform:translateY(-3px);\n\tbox-shadow:0 15px 35px rgba(226,131,15,.35);\n}\n\n\/* =========================\n MOBILE\n========================= *\/\n@media(max-width:960px){\n\t.wp-landing-block{\n\t\tgrid-template-columns:1fr;\n\t}\n\t.wp-landing-block__media{\n\t\taspect-ratio:16\/9;\n\t}\n\t.wp-landing-block__cta{\n\t\talign-self:stretch;\n\t}\n}\n<\/style>\n\n<section class=\"wp-landing-block__media\">\n\t<img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/01\/IMG_0252.jpeg\" alt=\"Engineering Drone\">\n<\/section>\n\n<section class=\"wp-landing-block__content\">\n\t<h2 class=\"wp-landing-block__title\">\n\t\t\u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u043d\u0435 \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f? \u041f\u043e\u043b\u0443\u0447\u0430\u0439\u0442\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0435\u0437 \u043d\u0430\u0439\u043c\u0430.\n\t<\/h2>\n\n\t<p class=\"wp-landing-block__intro\">\n\t\t\u041c\u044b \u2014 \u0432\u0430\u0448\u0430 \u0432\u043d\u0435\u0448\u043d\u044f\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430. \u0411\u0435\u0440\u0451\u043c \u0437\u0430\u0434\u0430\u0447\u0438 \u043e\u0442 \u0438\u0434\u0435\u0438 \u0434\u043e \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u041a\u0414 \u0438 \u0434\u043e\u0432\u043e\u0434\u0438\u043c \u0434\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430. \u0411\u0435\u0437 \u043d\u0430\u0439\u043c\u0430, \u0431\u0435\u0437 \u043f\u0440\u043e\u0441\u0442\u043e\u0435\u0432 \u0438 \u0431\u0435\u0437 \u043b\u0438\u0448\u043d\u0438\u0445 \u0437\u0430\u0442\u0440\u0430\u0442.\n\t<\/p>\n\n\t<h3 class=\"wp-landing-block__heading\">\u0423\u0437\u043d\u0430\u0451\u0442\u0435 \u044d\u0442\u0438 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438?<\/h3>\n\n\t<ul class=\"wp-landing-block__list\">\n\t\t<li class=\"wp-landing-block__item\">\n\t\t\t<span class=\"wp-landing-block__marker\">\u25c6<\/span>\n\t\t\t\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u0442\u043e\u0438\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432\n\t\t<\/li>\n\t\t<li class=\"wp-landing-block__item\">\n\t\t\t<span class=\"wp-landing-block__marker\">\u25c6<\/span>\n\t\t\t\u0428\u0442\u0430\u0442 \u0434\u043e\u0440\u043e\u0433\u043e\u0439, \u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043d\u0435\u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u0430\u044f\n\t\t<\/li>\n\t\t<li class=\"wp-landing-block__item\">\n\t\t\t<span class=\"wp-landing-block__marker\">\u25c6<\/span>\n\t\t\t\u0421\u0440\u043e\u043a\u0438 \u0433\u043e\u0440\u044f\u0442, \u0430 \u043d\u0430\u0439\u0442\u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430 \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\n\t\t<\/li>\n\t<\/ul>\n\n\t<div class=\"wp-landing-block__solution\">\n\t\t<h3 class=\"wp-landing-block__heading\">\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441:<\/h3>\n\t\t<p class=\"wp-landing-block__solution-text\">\n\t\t\t\u041c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u043a\u0430\u043a \u0432\u043d\u0435\u0448\u043d\u044f\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0438 \u0431\u0435\u0440\u0451\u043c \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0437\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u0412\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u0432 \u0441\u0440\u043e\u043a, \u0441 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c \u0431\u044e\u0434\u0436\u0435\u0442\u043e\u043c \u0438 \u0431\u0435\u0437 \u043a\u0430\u0434\u0440\u043e\u0432\u044b\u0445 \u0440\u0438\u0441\u043a\u043e\u0432.\n\t\t<\/p>\n\t<\/div>\n\n\t<a href=\"#\" class=\"wp-landing-block__cta\">\u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443<\/a>\n<\/section>\n\n<\/div>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<script type=\"module\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/model-viewer\/3.5.0\/model-viewer.min.js\"><\/script>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Rajdhani:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n.mg-bento, .mg-bento *, .mg-bento *::before, .mg-bento *::after {\n box-sizing: border-box;\n}\n\n.mg-bento {\n --gold: #F2B839;\n --orange: #E1830F;\n --dark-bg: #0a0a0a;\n --card-bg: rgba(16,16,16,0.97);\n --card-bg-alt: rgba(20,16,8,0.95);\n --glass-border: rgba(242,184,57,0.18);\n --glass-border-h: rgba(242,184,57,0.45);\n --text-primary: #ffffff;\n --text-secondary: rgba(255,255,255,0.55);\n --text-muted: rgba(255,255,255,0.3);\n\n font-family: 'Rajdhani', sans-serif;\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 25px;\n width: 100%;\n}\n\n\/* \u2500\u2500 Section \u2500\u2500 *\/\n.mg-bento .projects-section {\n padding: 64px 0;\n position: relative;\n width: calc(100% + 50px);\n margin-left: -25px;\n}\n\n\/* \u2500\u2500 Header \u2500\u2500 *\/\n.mg-bento .section-header {\n text-align: center;\n margin-bottom: 44px;\n padding: 0 25px;\n position: relative;\n z-index: 2;\n}\n\n.mg-bento .section-tag {\n font-size: 0.65rem;\n letter-spacing: 5px;\n text-transform: uppercase;\n color: var(--orange);\n display: block;\n margin-bottom: 10px;\n}\n\n.mg-bento .section-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(1.8rem, 4vw, 2.8rem);\n letter-spacing: 4px;\n background: linear-gradient(135deg, var(--gold) 0%, var(--orange) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n line-height: 1.2;\n margin: 0;\n}\n\n\/* \u2500\u2500 Bento Grid \u2500\u2500 *\/\n.mg-bento .bento-grid {\n display: grid;\n grid-template-columns: 1.7fr 1fr 1fr;\n grid-template-rows: auto auto;\n gap: 14px;\n padding: 0 25px;\n position: relative;\n z-index: 2;\n}\n\n\/* \u2500\u2500 Base card \u2500\u2500 *\/\n.mg-bento .bento-card {\n background: var(--card-bg);\n border: 1px solid var(--glass-border);\n border-radius: 16px;\n overflow: hidden;\n position: relative;\n transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s ease;\n cursor: default;\n}\n\n.mg-bento .bento-card:hover {\n border-color: var(--glass-border-h);\n transform: translateY(-4px);\n box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 24px rgba(242,184,57,0.1);\n}\n\n\/* \u2500\u2500 Featured card (spans 2 rows) \u2500\u2500 *\/\n.mg-bento .bento-card.featured {\n grid-column: 1;\n grid-row: 1 \/ 3;\n background: var(--card-bg-alt);\n border-color: rgba(242,184,57,0.28);\n}\n\n.mg-bento .bento-card.featured:hover {\n border-color: rgba(242,184,57,0.6);\n box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 40px rgba(242,184,57,0.15);\n}\n\n\/* \u2500\u2500 Featured badge \u2500\u2500 *\/\n.mg-bento .featured-badge {\n position: absolute;\n top: 16px;\n right: 16px;\n z-index: 10;\n background: linear-gradient(135deg, var(--gold), var(--orange));\n color: #0a0a0a;\n font-size: 0.6rem;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n padding: 4px 10px;\n border-radius: 4px;\n pointer-events: none;\n}\n\n\/* \u2500\u2500 NDA badge \u2500\u2500 *\/\n.mg-bento .nda-badge {\n position: absolute;\n top: 16px;\n left: 16px;\n z-index: 10;\n background: rgba(0,0,0,0.65);\n border: 1px solid rgba(255,255,255,0.15);\n color: rgba(255,255,255,0.5);\n font-size: 0.55rem;\n font-weight: 600;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n padding: 3px 8px;\n border-radius: 3px;\n pointer-events: none;\n backdrop-filter: blur(4px);\n}\n\n\/* \u2500\u2500 Viewer container \u2500\u2500 *\/\n.mg-bento .viewer-container {\n position: relative;\n background: linear-gradient(160deg, #131313 0%, #0a0a0a 100%);\n overflow: hidden;\n}\n\n.mg-bento .bento-card.featured .viewer-container {\n height: 320px;\n}\n\n.mg-bento .bento-card:not(.featured) .viewer-container {\n height: 140px;\n}\n\n.mg-bento .viewer-container::after {\n content: '';\n position: absolute;\n bottom: 0; left: 0; right: 0;\n height: 50px;\n background: linear-gradient(to top, var(--card-bg) 0%, transparent 100%);\n pointer-events: none;\n z-index: 1;\n}\n\n.mg-bento .bento-card.featured .viewer-container::after {\n background: linear-gradient(to top, var(--card-bg-alt) 0%, transparent 100%);\n height: 60px;\n}\n\n\/* \u2500\u2500 Grid pattern overlay on viewer \u2500\u2500 *\/\n.mg-bento .viewer-container::before {\n content: '';\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(rgba(242,184,57,0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(242,184,57,0.03) 1px, transparent 1px);\n background-size: 24px 24px;\n pointer-events: none;\n z-index: 0;\n}\n\n.mg-bento model-viewer {\n width: 100%;\n height: 100%;\n --poster-color: transparent;\n filter: contrast(1.06) drop-shadow(0 0 8px rgba(242,184,57,0.12));\n position: relative;\n z-index: 1;\n}\n\n.mg-bento model-viewer::part(default-progress-bar) {\n background: var(--gold);\n height: 2px;\n}\n\n\/* \u2500\u2500 Rotate hint \u2500\u2500 *\/\n.mg-bento .rotate-hint {\n position: absolute;\n bottom: 14px;\n right: 14px;\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0,0,0,0.55);\n border: 1px solid rgba(255,255,255,0.1);\n border-radius: 50%;\n z-index: 3;\n opacity: 0.5;\n transition: opacity 0.3s;\n backdrop-filter: blur(4px);\n}\n\n.mg-bento .bento-card:hover .rotate-hint { opacity: 0; }\n\n.mg-bento .rotate-hint svg {\n width: 14px; height: 14px;\n color: rgba(255,255,255,0.7);\n animation: mg-bento-spin 5s linear infinite;\n}\n\n@keyframes mg-bento-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n\/* \u2500\u2500 Image Carousel (featured card) \u2500\u2500 *\/\n.mg-bento .img-carousel {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.mg-bento .img-carousel-track {\n display: flex;\n height: 100%;\n transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);\n will-change: transform;\n}\n\n.mg-bento .img-carousel-slide {\n flex: 0 0 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(160deg, #131313 0%, #0a0a0a 100%);\n}\n\n.mg-bento .img-carousel-slide img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center;\n padding: 16px;\n display: block;\n user-select: none;\n -webkit-user-drag: none;\n}\n\n\/* Prev \/ Next arrows *\/\n.mg-bento .carousel-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 4;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0,0,0,0.6);\n border: 1px solid rgba(242,184,57,0.25);\n border-radius: 50%;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.25s, border-color 0.25s, background 0.25s;\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n}\n\n.mg-bento .bento-card.featured:hover .carousel-arrow { opacity: 1; }\n\n.mg-bento .carousel-arrow:hover {\n background: rgba(242,184,57,0.18);\n border-color: rgba(242,184,57,0.6);\n}\n\n.mg-bento .carousel-arrow svg {\n width: 14px; height: 14px;\n color: #F2B839;\n pointer-events: none;\n}\n\n.mg-bento .carousel-arrow.prev { left: 12px; }\n.mg-bento .carousel-arrow.next { right: 12px; }\n\n\/* Dot indicators *\/\n.mg-bento .carousel-dots {\n position: absolute;\n bottom: 14px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 5px;\n z-index: 4;\n pointer-events: none;\n}\n\n.mg-bento .carousel-dot {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: rgba(255,255,255,0.25);\n transition: background 0.3s, transform 0.3s;\n}\n\n.mg-bento .carousel-dot.active {\n background: var(--gold);\n transform: scale(1.4);\n}\n\n\/* Slide counter *\/\n.mg-bento .carousel-counter {\n position: absolute;\n top: 12px;\n left: 14px;\n z-index: 4;\n font-size: 0.65rem;\n font-weight: 600;\n letter-spacing: 2px;\n color: rgba(255,255,255,0.45);\n pointer-events: none;\n font-family: 'Rajdhani', sans-serif;\n}\n\n\/* \u2500\u2500 Card info \u2500\u2500 *\/\n.mg-bento .card-info {\n padding: 16px 20px 20px;\n}\n\n.mg-bento .bento-card.featured .card-info {\n padding: 20px 24px 24px;\n}\n\n.mg-bento .card-category {\n font-size: 0.6rem;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--orange);\n display: block;\n margin-bottom: 5px;\n}\n\n.mg-bento .card-title {\n font-family: 'Bebas Neue', sans-serif;\n letter-spacing: 2px;\n color: var(--text-primary);\n display: block;\n line-height: 1.2;\n margin-bottom: 0;\n}\n\n.mg-bento .bento-card.featured .card-title {\n font-size: 1.9rem;\n margin-bottom: 10px;\n}\n\n.mg-bento .bento-card:not(.featured) .card-title {\n font-size: 1.25rem;\n}\n\n.mg-bento .card-desc {\n font-size: 0.82rem;\n line-height: 1.6;\n color: var(--text-secondary);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.mg-bento .bento-card.featured .card-desc {\n -webkit-line-clamp: 3;\n}\n\n.mg-bento .bento-card:not(.featured) .card-desc {\n -webkit-line-clamp: 2;\n font-size: 0.76rem;\n margin-top: 4px;\n}\n\n\/* \u2500\u2500 Divider line in featured \u2500\u2500 *\/\n.mg-bento .card-divider {\n height: 1px;\n background: linear-gradient(90deg, rgba(242,184,57,0.3), transparent);\n margin: 0 24px;\n}\n\n\/* \u2500\u2500 Tags row in featured card \u2500\u2500 *\/\n.mg-bento .card-tags {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n padding: 12px 24px 20px;\n}\n\n.mg-bento .card-tag {\n font-size: 0.6rem;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n color: var(--text-muted);\n background: rgba(255,255,255,0.04);\n border: 1px solid rgba(255,255,255,0.08);\n padding: 3px 9px;\n border-radius: 3px;\n}\n\n\/* \u2500\u2500 \"Image only\" small card (no model, stylized bg) \u2500\u2500 *\/\n.mg-bento .bento-card.accent {\n background: linear-gradient(135deg, #0f0d06 0%, #151108 100%);\n border-color: rgba(242,184,57,0.22);\n}\n\n\/* \u2500\u2500 Project count card \u2500\u2500 *\/\n.mg-bento .bento-card.stat-card {\n background: linear-gradient(135deg, rgba(242,184,57,0.08) 0%, rgba(225,131,15,0.04) 100%);\n border-color: rgba(242,184,57,0.25);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 28px 20px;\n text-align: center;\n gap: 6px;\n}\n\n.mg-bento .stat-number {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 3.5rem;\n letter-spacing: 3px;\n background: linear-gradient(135deg, var(--gold), var(--orange));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n line-height: 1;\n}\n\n.mg-bento .stat-label {\n font-size: 0.65rem;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--text-secondary);\n line-height: 1.4;\n}\n\n.mg-bento .stat-sublabel {\n font-size: 0.58rem;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--text-muted);\n margin-top: 2px;\n}\n\n\/* \u2500\u2500 CTA \u2500\u2500 *\/\n.mg-bento .cta-container {\n text-align: center;\n margin-top: 36px;\n padding: 0 25px;\n position: relative;\n z-index: 2;\n}\n\n.mg-bento .view-all-btn {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: 'Rajdhani', sans-serif;\n font-size: 0.88rem;\n font-weight: 700;\n letter-spacing: 3px;\n text-transform: uppercase;\n text-decoration: none;\n color: var(--dark-bg);\n background: linear-gradient(135deg, var(--gold), var(--orange));\n padding: 14px 36px;\n border-radius: 4px;\n transition: all 0.3s ease;\n box-shadow: 0 6px 28px rgba(242,184,57,0.28);\n white-space: nowrap;\n}\n\n.mg-bento .view-all-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 12px 40px rgba(242,184,57,0.42);\n color: var(--dark-bg);\n text-decoration: none;\n}\n\n.mg-bento .view-all-btn svg {\n width: 17px; height: 17px;\n transition: transform 0.3s ease;\n flex-shrink: 0;\n}\n\n.mg-bento .view-all-btn:hover svg { transform: translateX(5px); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n@media (max-width: 1100px) {\n .mg-bento .bento-grid {\n grid-template-columns: 1.5fr 1fr 1fr;\n gap: 12px;\n }\n}\n\n@media (max-width: 900px) {\n .mg-bento .bento-grid {\n grid-template-columns: 1fr 1fr;\n grid-template-rows: auto;\n }\n .mg-bento .bento-card.featured {\n grid-column: 1 \/ 3;\n grid-row: auto;\n }\n .mg-bento .bento-card.featured .viewer-container { height: 260px; }\n .mg-bento .stat-card { min-height: 120px; }\n}\n\n@media (max-width: 768px) {\n .mg-bento { padding: 0 16px; }\n .mg-bento .projects-section {\n padding: 44px 0;\n width: calc(100% + 32px);\n margin-left: -16px;\n }\n .mg-bento .bento-grid { padding: 0 16px; gap: 10px; }\n .mg-bento .section-header { padding: 0 16px; margin-bottom: 32px; }\n .mg-bento .cta-container { padding: 0 16px; }\n}\n\n@media (max-width: 560px) {\n .mg-bento .bento-grid {\n grid-template-columns: 1fr;\n }\n .mg-bento .bento-card.featured {\n grid-column: 1;\n }\n .mg-bento .bento-card.featured .viewer-container { height: 220px; }\n .mg-bento .bento-card:not(.featured) .viewer-container { height: 130px; }\n .mg-bento .stat-number { font-size: 2.8rem; }\n}\n\n@media (hover: none) {\n .mg-bento .bento-card:hover {\n transform: none;\n border-color: var(--glass-border);\n box-shadow: none;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .mg-bento .bento-card { transition: none; }\n .mg-bento .rotate-hint svg { animation: none; }\n}\n<\/style>\n\n<div class=\"mg-bento\">\n <section class=\"projects-section\">\n\n <div class=\"section-header\">\n <span class=\"section-tag\">\u041d\u0430\u0448\u0435 \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e<\/span>\n <h2 class=\"section-title\">\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b<\/h2>\n <\/div>\n\n <div class=\"bento-grid\">\n\n \n <article class=\"bento-card featured\">\n <div class=\"viewer-container\">\n <div class=\"img-carousel\" id=\"kvou-carousel\">\n <div class=\"img-carousel-track\" id=\"kvou-track\"><\/div>\n <button class=\"carousel-arrow prev\" id=\"kvou-prev\" aria-label=\"\u041d\u0430\u0437\u0430\u0434\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\n <\/button>\n <button class=\"carousel-arrow next\" id=\"kvou-next\" aria-label=\"\u0412\u043f\u0435\u0440\u0451\u0434\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\n <\/button>\n <div class=\"carousel-dots\" id=\"kvou-dots\"><\/div>\n <span class=\"carousel-counter\" id=\"kvou-counter\">1 \/ 16<\/span>\n <\/div>\n <\/div>\n <div class=\"featured-badge\">Featured<\/div>\n <div class=\"card-info\">\n <span class=\"card-category\">\u041d\u0435\u0444\u0442\u0435\u0433\u0430\u0437 \u00b7 \u0413\u0430\u0437\u043e\u0442\u0443\u0440\u0431\u0438\u043d\u043d\u044b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438<\/span>\n <span class=\"card-title\">\u041a\u0412\u041e\u0423 \u0434\u043b\u044f \u0413\u0422\u0423<\/span>\n <p class=\"card-desc\">\u041a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u043e\u0435 \u0432\u043e\u0437\u0434\u0443\u0445\u043e\u043e\u0447\u0438\u0441\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u0433\u0430\u0437\u043e\u0442\u0443\u0440\u0431\u0438\u043d\u043d\u044b\u0445 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043e\u043a. \u041c\u043d\u043e\u0433\u043e\u0441\u0442\u0443\u043f\u0435\u043d\u0447\u0430\u0442\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0432\u043e\u0437\u0434\u0443\u0445\u0430 \u0441 \u0438\u043d\u0435\u0440\u0446\u0438\u043e\u043d\u043d\u044b\u043c, \u043a\u043e\u0430\u043b\u0435\u0441\u0446\u0438\u0440\u0443\u044e\u0449\u0438\u043c \u0438 \u0442\u043e\u043d\u043a\u043e\u0439 \u043e\u0447\u0438\u0441\u0442\u043a\u043e\u0439.<\/p>\n <\/div>\n <div class=\"card-divider\"><\/div>\n <div class=\"card-tags\">\n <span class=\"card-tag\">SolidWorks<\/span>\n <span class=\"card-tag\">\u041a\u0414 + \u0422\u0414<\/span>\n <span class=\"card-tag\">3D-\u043c\u043e\u0434\u0435\u043b\u044c<\/span>\n <span class=\"card-tag\">\u0420\u0430\u0441\u0447\u0451\u0442<\/span>\n <\/div>\n <\/article>\n\n \n <article class=\"bento-card\">\n <div class=\"viewer-container\">\n <model-viewer\n src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/06\/Economizer2.glb\"\n alt=\"\u042d\u043a\u043e\u043d\u043e\u043c\u0430\u0439\u0437\u0435\u0440\"\n camera-controls disable-zoom auto-rotate rotation-per-second=\"25deg\"\n shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\"\n environment-image=\"neutral\"\n camera-orbit=\"45deg 70deg 105%\"\n interaction-prompt=\"none\" loading=\"lazy\">\n <\/model-viewer>\n <div class=\"rotate-hint\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"card-info\">\n <span class=\"card-category\">\u042d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u043a\u0430<\/span>\n <span class=\"card-title\">\u041f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u044b\u0439 \u044d\u043a\u043e\u043d\u043e\u043c\u0430\u0439\u0437\u0435\u0440<\/span>\n <p class=\"card-desc\">\u0423\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0435\u043f\u043b\u0430 \u0434\u044b\u043c\u043e\u0432\u044b\u0445 \u0433\u0430\u0437\u043e\u0432 \u043a\u043e\u0442\u043b\u043e\u0432 \u0438 \u043f\u0435\u0447\u0435\u0439. \u0421\u0438\u0441\u0442\u0435\u043c\u044b \u0442\u0435\u043f\u043b\u043e\u0441\u043d\u0430\u0431\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u0430\u044f \u0442\u0435\u043f\u043b\u043e\u044d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u043a\u0430.<\/p>\n <\/div>\n <\/article>\n\n \n <article class=\"bento-card\">\n <div class=\"viewer-container\">\n <model-viewer\n src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/06\/Reactor2.glb\"\n alt=\"\u0420\u0435\u0430\u043a\u0442\u043e\u0440\"\n camera-controls disable-zoom auto-rotate rotation-per-second=\"25deg\"\n shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\"\n environment-image=\"neutral\"\n camera-orbit=\"45deg 70deg 105%\"\n interaction-prompt=\"none\" loading=\"lazy\">\n <\/model-viewer>\n <div class=\"rotate-hint\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"card-info\">\n <span class=\"card-category\">\u042d\u043a\u043e\u043b\u043e\u0433\u0438\u044f<\/span>\n <span class=\"card-title\">\u0420\u0435\u0430\u043a\u0442\u043e\u0440 \u0442\u0435\u0440\u043c\u043e\u043a\u0430\u0442\u0430\u043b\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u043a\u0438\u0441\u043b\u0435\u043d\u0438\u044f<\/span>\n <p class=\"card-desc\">\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0441\u0430\u0434\u043a\u043e\u0432 \u0441\u0442\u043e\u0447\u043d\u044b\u0445 \u0432\u043e\u0434. \u041e\u043a\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0432\u043b\u0430\u0436\u043d\u044b\u0445 \u043e\u0441\u0430\u0434\u043a\u043e\u0432 \u0432 \u043f\u0441\u0435\u0432\u0434\u043e\u043e\u0436\u0438\u0436\u0435\u043d\u043d\u043e\u043c \u0441\u043b\u043e\u0435.<\/p>\n <\/div>\n <\/article>\n\n \n <article class=\"bento-card\">\n <div class=\"viewer-container\">\n <model-viewer\n src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/06\/Reservoir6.glb\"\n alt=\"\u0420\u0435\u0437\u0435\u0440\u0432\u0443\u0430\u0440\"\n camera-controls disable-zoom auto-rotate rotation-per-second=\"25deg\"\n shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\"\n environment-image=\"neutral\"\n camera-orbit=\"45deg 70deg 105%\"\n interaction-prompt=\"none\" loading=\"lazy\">\n <\/model-viewer>\n <div class=\"rotate-hint\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"card-info\">\n <span class=\"card-category\">\u041d\u0435\u0444\u0442\u0435\u0433\u0430\u0437<\/span>\n <span class=\"card-title\">\u0420\u0412\u0421-200\u043c\u00b3<\/span>\n <p class=\"card-desc\">\u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0435\u0437\u0435\u0440\u0432\u0443\u0430\u0440 \u0434\u043b\u044f \u043d\u0435\u0444\u0442\u0435\u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432. \u041d\u0435\u0444\u0442\u0435\u0431\u0430\u0437\u044b, \u0410\u0417\u0421, \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b.<\/p>\n <\/div>\n <\/article>\n\n \n <article class=\"bento-card stat-card\">\n <span class=\"stat-number\">16+<\/span>\n <span class=\"stat-label\">\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445<br>\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432<\/span>\n <span class=\"stat-sublabel\">\u042d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u043a\u0430 \u00b7 \u041d\u0435\u0444\u0442\u0435\u0433\u0430\u0437 \u00b7 \u042d\u043a\u043e\u043b\u043e\u0433\u0438\u044f<\/span>\n <\/article>\n\n <\/div>\n\n <div class=\"cta-container\">\n <a href=\"https:\/\/mechanogurus.ru\/?page_id=1714\" class=\"view-all-btn\" target=\"_blank\" rel=\"noopener noreferrer\">\n \u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0441\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n <\/svg>\n <\/a>\n <\/div>\n\n <\/section>\n<\/div>\n\n<script>\n(function () {\n\n \/* \u2500\u2500 model-viewer auto-rotate resume \u2500\u2500 *\/\n document.querySelectorAll('.mg-bento model-viewer').forEach(function (viewer) {\n viewer.addEventListener('camera-change', function (e) {\n if (e.detail && e.detail.source === 'user-interaction') {\n viewer.autoRotate = false;\n clearTimeout(viewer._mgResume);\n viewer._mgResume = setTimeout(function () { viewer.autoRotate = true; }, 3000);\n }\n });\n });\n\n \/* \u2500\u2500 \u041a\u0412\u041e\u0423 image carousel \u2500\u2500 *\/\n var BASE = 'https:\/\/mechanogurus.ru';\n var images = [\n '\/wp-content\/uploads\/2026\/03\/KVOU-1FH_1_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-1FH_2_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-1FV_1_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-1FV_2_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-1FV_3_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-1FV_4_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-1FV_5_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-2FV_2_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-1FV_6_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-2FV_1_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-2FV_3_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-2FH_1_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-2FH_2_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-2FH_3_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-3FH_1_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-3FH_2_logo.png'\n ];\n\n var track = document.getElementById('kvou-track');\n var dotsEl = document.getElementById('kvou-dots');\n var counter = document.getElementById('kvou-counter');\n var prevBtn = document.getElementById('kvou-prev');\n var nextBtn = document.getElementById('kvou-next');\n var total = images.length;\n var current = 0;\n var autoTimer;\n\n \/* Build slides *\/\n images.forEach(function (src, i) {\n var slide = document.createElement('div');\n slide.className = 'img-carousel-slide';\n var img = document.createElement('img');\n img.src = BASE + src;\n img.alt = '\u041a\u0412\u041e\u0423 ' + (i + 1);\n img.loading = i === 0 ? 'eager' : 'lazy';\n img.draggable = false;\n slide.appendChild(img);\n track.appendChild(slide);\n\n var dot = document.createElement('span');\n dot.className = 'carousel-dot' + (i === 0 ? ' active' : '');\n dotsEl.appendChild(dot);\n });\n\n var dots = dotsEl.querySelectorAll('.carousel-dot');\n\n function goTo(idx) {\n if (idx < 0) idx = total - 1;\n if (idx >= total) idx = 0;\n current = idx;\n track.style.transform = 'translateX(-' + (current * 100) + '%)';\n dots.forEach(function (d, i) { d.classList.toggle('active', i === current); });\n counter.textContent = (current + 1) + ' \/ ' + total;\n }\n\n function startAuto() {\n clearInterval(autoTimer);\n autoTimer = setInterval(function () { goTo(current + 1); }, 3500);\n }\n\n function stopAuto() { clearInterval(autoTimer); }\n\n prevBtn.addEventListener('click', function () { stopAuto(); goTo(current - 1); startAuto(); });\n nextBtn.addEventListener('click', function () { stopAuto(); goTo(current + 1); startAuto(); });\n\n \/* Touch\/swipe *\/\n var carousel = document.getElementById('kvou-carousel');\n var touchStartX = 0;\n carousel.addEventListener('touchstart', function (e) {\n touchStartX = e.changedTouches[0].clientX;\n stopAuto();\n }, { passive: true });\n carousel.addEventListener('touchend', function (e) {\n var dx = e.changedTouches[0].clientX - touchStartX;\n if (Math.abs(dx) > 40) goTo(current + (dx < 0 ? 1 : -1));\n startAuto();\n }, { passive: true });\n\n \/* Pause on hover *\/\n carousel.addEventListener('mouseenter', stopAuto);\n carousel.addEventListener('mouseleave', startAuto);\n\n startAuto();\n\n})();\n<\/script>\n\n\n\n<div class=\"ucw-wrap\">\n<style>\n.ucw-wrap,\n.ucw-wrap *{ box-sizing:border-box; }\n\n\/* ---------- OUTER ---------- *\/\n.ucw-wrap{\n --outer: clamp(24px, 4vw, 80px);\n --outer_plus: 30px;\n --outer_tight: max(0px, calc(var(--outer) - var(--outer_plus)));\n\n --maxw: 1600px;\n width: calc(100% - (var(--outer_tight) * 2));\n max-width: var(--maxw);\n margin: clamp(40px, 4vw, 80px) auto;\n}\n\n\/* ---------- INNER BLOCK ---------- *\/\n.ucw{\n --radius: 19px;\n --accent: #E1830F;\n --accent-yellow: #F2B839;\n --bg: #FEF4EE;\n --text: #000;\n\n --gap: clamp(18px, 2.2vw, 36px);\n --pad: clamp(18px, 2.6vw, 48px);\n\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n color: var(--text);\n\n background: var(--bg);\n border-radius: var(--radius);\n box-shadow: 0 30px 60px rgba(0,0,0,0.08);\n\n border: none !important;\n outline: none !important;\n\n display: grid;\n grid-template-columns: 1fr 1.2fr;\n gap: 0;\n align-items: stretch;\n overflow: hidden;\n}\n\n\/* ---------- LEFT PANEL ---------- *\/\n.ucw-media{\n position: relative;\n display: flex;\n min-height: 400px;\n}\n\n.ucw-media img{\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n display: block;\n transition: opacity .35s ease;\n}\n\n\/* ---------- DETAIL PANEL (overlays image) ---------- *\/\n.ucw-detail{\n position: absolute;\n inset: 0;\n background: linear-gradient(145deg, #1a0e00, #2e1800);\n padding: clamp(24px, 3vw, 44px);\n display: flex;\n flex-direction: column;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n transition: opacity .35s ease;\n}\n\n.ucw-detail.is-active{\n opacity: 1;\n pointer-events: auto;\n}\n\n.ucw-media img.is-hidden{\n opacity: 0;\n pointer-events: none;\n}\n\n.ucw-detail__num{\n font-size: 3.5rem;\n font-weight: 900;\n color: var(--accent);\n opacity: .25;\n line-height: 1;\n margin-bottom: 8px;\n font-variant-numeric: tabular-nums;\n}\n\n.ucw-detail__title{\n font-size: clamp(1.1rem, 1.8vw, 1.5rem);\n font-weight: 800;\n color: #F2B839;\n margin: 0 0 16px;\n line-height: 1.25;\n}\n\n.ucw-detail__body{\n font-size: clamp(.9rem, 1.1vw, 1rem);\n line-height: 1.7;\n color: rgba(255,255,255,.82);\n margin: 0 0 28px;\n}\n\n\/* ---------- TIMER BAR ---------- *\/\n.ucw-detail__timer{\n width: 100%;\n height: 3px;\n background: rgba(255,255,255,.12);\n border-radius: 999px;\n margin-bottom: 20px;\n overflow: hidden;\n}\n\n.ucw-detail__timer-bar{\n height: 100%;\n width: 100%;\n background: linear-gradient(90deg, var(--accent), var(--accent-yellow));\n border-radius: 999px;\n transform-origin: left;\n transform: scaleX(1);\n transition: none;\n}\n\n.ucw-detail__timer-bar.is-running{\n transform: scaleX(0);\n transition: transform 6s linear;\n}\n\n.ucw-detail__close{\n align-self: flex-start;\n display: inline-flex;\n align-items: center;\n gap: 7px;\n background: rgba(226,131,15,.15);\n border: 1px solid rgba(226,131,15,.3);\n color: var(--accent);\n font-size: .82rem;\n font-weight: 700;\n padding: 7px 16px;\n border-radius: 999px;\n cursor: pointer;\n transition: background .2s ease;\n}\n\n.ucw-detail__close:hover{\n background: rgba(226,131,15,.28);\n}\n\n\/* ---------- RIGHT CONTENT ---------- *\/\n.ucw-content{\n padding: var(--pad);\n display: flex;\n flex-direction: column;\n}\n\n\/* ---------- HEADER ---------- *\/\n.ucw-header{ margin-bottom: var(--gap); }\n\n.ucw-h{\n font-size: clamp(1.35rem, 2.2vw, 2.4rem);\n line-height: 1.2;\n margin: 0 0 12px;\n color: var(--accent);\n position: relative;\n padding-bottom: 14px;\n border: none !important;\n}\n\n.ucw-h::after{\n content:'';\n position:absolute;\n left:0;\n bottom:0;\n width: clamp(80px, 12vw, 200px);\n height: 3px;\n background: linear-gradient(90deg, var(--accent), transparent);\n}\n\n.ucw-sub{\n font-size: clamp(0.95rem, 1.1vw, 1.05rem);\n line-height: 1.55;\n color: #000;\n opacity: 0.78;\n margin: 0;\n}\n\n\/* ---------- GRID ---------- *\/\n.ucw-grid{\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: clamp(10px, 1.2vw, 14px) clamp(16px, 2vw, 32px);\n margin-bottom: var(--gap);\n align-items: start;\n}\n\n.ucw-item{ position: relative; }\n\n.ucw-radio{\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n pointer-events: none;\n}\n\n\/* ---------- CARD ---------- *\/\n.ucw-card{\n border-radius: 16px;\n background: rgba(226,131,15,0.06);\n overflow: hidden;\n transition: transform .22s ease, background .25s ease, box-shadow .25s ease;\n border: none !important;\n outline: none !important;\n box-shadow: none !important;\n}\n\n.ucw-card:hover{\n background: rgba(226,131,15,0.12);\n transform: translateX(8px);\n box-shadow: -6px 0 0 var(--accent) !important;\n}\n\n\/* ---------- LABEL ---------- *\/\n.ucw-lbl{\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n cursor: pointer;\n user-select: none;\n}\n\n.ucw-num{\n font-size: 0.72rem;\n font-weight: 800;\n color: var(--accent);\n min-width: 22px;\n}\n\n.ucw-txt{\n font-size: clamp(0.92rem, 1.05vw, 0.98rem);\n line-height: 1.35;\n font-weight: 650;\n flex: 1;\n}\n\n\/* ---------- CHECKED \u2014 left border only ---------- *\/\n.ucw-radio:checked + .ucw-card{\n background: rgba(226,131,15,0.10);\n box-shadow: -6px 0 0 var(--accent) !important;\n}\n\n\/* ---------- FOOTER ---------- *\/\n.ucw-footer{\n display: grid;\n grid-template-columns: 1fr auto;\n gap: var(--gap);\n align-items: center;\n margin-top: auto;\n}\n\n.ucw-sol{\n padding: clamp(14px, 1.6vw, 20px);\n background: rgba(226,131,15,0.06);\n border-left: 5px solid var(--accent) !important;\n border-radius: 0 12px 12px 0;\n}\n\n.ucw-sol h3{\n margin: 0 0 6px;\n font-size: 0.95rem;\n color: var(--accent);\n}\n\n.ucw-sol p{\n margin: 0;\n font-size: 0.9rem;\n opacity: 0.8;\n}\n\n.ucw-cta{\n padding: 16px 40px;\n background: linear-gradient(135deg, var(--accent), var(--accent-yellow));\n border-radius: 999px;\n text-decoration: none;\n font-weight: 800;\n color: #000;\n white-space: nowrap;\n transition: transform .22s ease, box-shadow .22s ease;\n}\n\n.ucw-cta:hover{\n transform: translateY(-3px);\n box-shadow: 0 16px 36px rgba(226,131,15,.35);\n color: #000;\n text-decoration: none;\n}\n\n\/* ---------- RESPONSIVE ---------- *\/\n@media (max-width: 960px){\n .ucw{\n grid-template-columns: 1fr;\n }\n .ucw-media{\n min-height: 260px;\n aspect-ratio: 16\/9;\n }\n .ucw-grid{ grid-template-columns: 1fr; }\n .ucw-footer{ grid-template-columns: 1fr; }\n .ucw-cta{ text-align: center; }\n}\n\n@media (max-width: 600px){\n .ucw-wrap{\n width: calc(100% - 24px);\n }\n}\n<\/style>\n\n<div class=\"ucw\">\n\n \n <div class=\"ucw-media\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ExternalEngineering.jpeg\" alt=\"\u0412\u043d\u0435\u0448\u043d\u044f\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430\" loading=\"lazy\">\n <div class=\"ucw-detail\" id=\"ucw-detail\">\n <div class=\"ucw-detail__num\" id=\"ucw-detail-num\">01<\/div>\n <h3 class=\"ucw-detail__title\" id=\"ucw-detail-title\"><\/h3>\n <p class=\"ucw-detail__body\" id=\"ucw-detail-body\"><\/p>\n <div class=\"ucw-detail__timer\">\n <div class=\"ucw-detail__timer-bar\" id=\"ucw-timer-bar\"><\/div>\n <\/div>\n <button class=\"ucw-detail__close\" id=\"ucw-detail-close\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M1 1l10 10M11 1L1 11\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <\/svg>\n \u0417\u0430\u043a\u0440\u044b\u0442\u044c\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"ucw-content\">\n\n <div class=\"ucw-header\">\n <h2 class=\"ucw-h\">\u041a\u043e\u0433\u0434\u0430 \u0432\u0430\u0448\u0435\u043c\u0443 \u0431\u0438\u0437\u043d\u0435\u0441\u0443 \u043d\u0443\u0436\u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u044f\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430?<\/h2>\n <p class=\"ucw-sub\">\u0417\u0430 \u0433\u043e\u0434\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u044b \u0432\u044b\u0434\u0435\u043b\u0438\u043b\u0438 8 \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0438\u0437\u043d\u0435\u0441\u0443 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u043d\u0435\u0448\u043d\u044f\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430.<\/p>\n <\/div>\n\n <div class=\"ucw-grid\">\n\n <div class=\"ucw-item\">\n <input type=\"radio\" name=\"ucw\" id=\"ucw1\" class=\"ucw-radio\"\n data-num=\"01\"\n data-title=\"\u0421\u0440\u043e\u0447\u043d\u044b\u0435 \u0437\u0430\u043a\u0430\u0437\u044b \u0438 \u043f\u0438\u043a\u043e\u0432\u044b\u0435 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438\"\n data-body=\"\u041a\u043e\u0433\u0434\u0430 \u043e\u0431\u044a\u0451\u043c \u0437\u0430\u043a\u0430\u0437\u043e\u0432 \u0440\u0435\u0437\u043a\u043e \u0440\u0430\u0441\u0442\u0451\u0442, \u0430 \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043d\u0435 \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e \u0441\u0440\u043e\u043a\u0430\u043c\u0438. \u041c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432.\">\n <div class=\"ucw-card\">\n <label class=\"ucw-lbl\" for=\"ucw1\">\n <span class=\"ucw-num\">01<\/span>\n <span class=\"ucw-txt\">\u0421\u0440\u043e\u0447\u043d\u044b\u0435 \u0437\u0430\u043a\u0430\u0437\u044b \u0438 \u043f\u0438\u043a\u043e\u0432\u044b\u0435 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"ucw-item\">\n <input type=\"radio\" name=\"ucw\" id=\"ucw2\" class=\"ucw-radio\"\n data-num=\"02\"\n data-title=\"\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b\"\n data-body=\"\u041d\u0435\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u041a\u0411, \u043d\u043e \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e. \u041c\u044b \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0435\u0437 \u043d\u0430\u0439\u043c\u0430 \u0448\u0442\u0430\u0442\u0430.\">\n <div class=\"ucw-card\">\n <label class=\"ucw-lbl\" for=\"ucw2\">\n <span class=\"ucw-num\">02<\/span>\n <span class=\"ucw-txt\">\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"ucw-item\">\n <input type=\"radio\" name=\"ucw\" id=\"ucw3\" class=\"ucw-radio\"\n data-num=\"03\"\n data-title=\"\u0425\u0430\u043e\u0441 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438\"\n data-body=\"\u0427\u0435\u0440\u0442\u0435\u0436\u0438 \u0440\u0430\u0437\u0431\u0440\u043e\u0441\u0430\u043d\u044b, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442. \u041c\u044b \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043c \u041a\u0414 \u0432 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u0435\u0451 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u043e\u0439.\">\n <div class=\"ucw-card\">\n <label class=\"ucw-lbl\" for=\"ucw3\">\n <span class=\"ucw-num\">03<\/span>\n <span class=\"ucw-txt\">\u0425\u0430\u043e\u0441 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"ucw-item\">\n <input type=\"radio\" name=\"ucw\" id=\"ucw4\" class=\"ucw-radio\"\n data-num=\"04\"\n data-title=\"\u0421\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0441\u0435\u0431\u0435\u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438\"\n data-body=\"\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u0441\u043d\u0438\u0437\u0438\u0442\u044c \u0437\u0430\u0442\u0440\u0430\u0442\u044b \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e.\">\n <div class=\"ucw-card\">\n <label class=\"ucw-lbl\" for=\"ucw4\">\n <span class=\"ucw-num\">04<\/span>\n <span class=\"ucw-txt\">\u0421\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0441\u0435\u0431\u0435\u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"ucw-item\">\n <input type=\"radio\" name=\"ucw\" id=\"ucw5\" class=\"ucw-radio\"\n data-num=\"05\"\n data-title=\"\u0421\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u0442\u0440\u0430\u0442 \u043d\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\"\n data-body=\"\u041d\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0448\u0442\u0430\u0442. \u0412\u044b \u043f\u043b\u0430\u0442\u0438\u0442\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.\">\n <div class=\"ucw-card\">\n <label class=\"ucw-lbl\" for=\"ucw5\">\n <span class=\"ucw-num\">05<\/span>\n <span class=\"ucw-txt\">\u0421\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u0442\u0440\u0430\u0442 \u043d\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"ucw-item\">\n <input type=\"radio\" name=\"ucw\" id=\"ucw6\" class=\"ucw-radio\"\n data-num=\"06\"\n data-title=\"\u0422\u0443\u043f\u0438\u043a \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435\"\n data-body=\"\u041a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u0438 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443.\">\n <div class=\"ucw-card\">\n <label class=\"ucw-lbl\" for=\"ucw6\">\n <span class=\"ucw-num\">06<\/span>\n <span class=\"ucw-txt\">\u0422\u0443\u043f\u0438\u043a \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"ucw-item\">\n <input type=\"radio\" name=\"ucw\" id=\"ucw7\" class=\"ucw-radio\"\n data-num=\"07\"\n data-title=\"\u0418\u0434\u0435\u044f \u0431\u0435\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438\"\n data-body=\"\u041f\u043e\u043c\u043e\u0433\u0430\u0435\u043c \u0434\u043e\u0432\u0435\u0441\u0442\u0438 \u0438\u0434\u0435\u044e \u0434\u043e \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430.\">\n <div class=\"ucw-card\">\n <label class=\"ucw-lbl\" for=\"ucw7\">\n <span class=\"ucw-num\">07<\/span>\n <span class=\"ucw-txt\">\u0418\u0434\u0435\u044f \u0431\u0435\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"ucw-item\">\n <input type=\"radio\" name=\"ucw\" id=\"ucw8\" class=\"ucw-radio\"\n data-num=\"08\"\n data-title=\"\u0420\u0435\u0432\u0435\u0440\u0441-\u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\"\n data-body=\"\u0421\u043e\u0437\u0434\u0430\u0451\u043c 3D-\u043c\u043e\u0434\u0435\u043b\u044c \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043f\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0434\u0435\u0442\u0430\u043b\u0438.\">\n <div class=\"ucw-card\">\n <label class=\"ucw-lbl\" for=\"ucw8\">\n <span class=\"ucw-num\">08<\/span>\n <span class=\"ucw-txt\">\u0420\u0435\u0432\u0435\u0440\u0441-\u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"ucw-footer\">\n <div class=\"ucw-sol\">\n <h3>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0430\u043c\u0438:<\/h3>\n <p>\u0412\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432 \u0441\u0440\u043e\u043a, \u0431\u0435\u0437 \u043a\u0430\u0434\u0440\u043e\u0432\u044b\u0445 \u0440\u0438\u0441\u043a\u043e\u0432.<\/p>\n <\/div>\n <a href=\"https:\/\/n8n.mechanogurus.ru\/form\/105adc81-c50a-40f0-ab54-f0b65857d49e\" class=\"ucw-cta\">\n \u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443 \u2192\n <\/a>\n <\/div>\n\n <\/div>\n\n<\/div>\n\n<script>\n(function(){\n const radios = document.querySelectorAll('.ucw-radio');\n const detail = document.getElementById('ucw-detail');\n const img = document.querySelector('.ucw-media img');\n const dNum = document.getElementById('ucw-detail-num');\n const dTitle = document.getElementById('ucw-detail-title');\n const dBody = document.getElementById('ucw-detail-body');\n const closeBtn = document.getElementById('ucw-detail-close');\n const timerBar = document.getElementById('ucw-timer-bar');\n\n let autoHideTimer = null;\n\n function showDetail(radio) {\n dNum.textContent = radio.dataset.num;\n dTitle.textContent = radio.dataset.title;\n dBody.textContent = radio.dataset.body;\n\n detail.classList.add('is-active');\n img.classList.add('is-hidden');\n\n \/\/ reset timer bar\n timerBar.classList.remove('is-running');\n timerBar.style.transition = 'none';\n timerBar.style.transform = 'scaleX(1)';\n\n \/\/ trigger reflow so transition restarts cleanly\n void timerBar.offsetWidth;\n timerBar.style.transition = '';\n timerBar.classList.add('is-running');\n\n clearTimeout(autoHideTimer);\n autoHideTimer = setTimeout(hideDetail, 6000);\n }\n\n function hideDetail() {\n clearTimeout(autoHideTimer);\n autoHideTimer = null;\n timerBar.classList.remove('is-running');\n detail.classList.remove('is-active');\n img.classList.remove('is-hidden');\n radios.forEach(r => r.checked = false);\n }\n\n radios.forEach(radio => {\n radio.addEventListener('change', function() {\n if (this.checked) showDetail(this);\n });\n });\n\n closeBtn.addEventListener('click', hideDetail);\n})();\n<\/script>\n\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-background-color has-text-color has-link-color wp-elements-f681540f52347ed1336722c582dc52c5 is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:20px;padding-right:30px;padding-bottom:20px;padding-left:51px\">\n<style>\n.mg-vdi,\n.mg-vdi *,\n.mg-vdi *::before,\n.mg-vdi *::after {\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n}\n\n.mg-vdi {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n position: relative;\n isolation: isolate;\n}\n\n\/* \u2500\u2500 Per-card background (clipped by stack-card overflow:hidden) \u2500\u2500 *\/\n.mg-vdi .card-bg {\n position: absolute;\n inset: 0;\n z-index: 0;\n background: #000;\n pointer-events: none;\n overflow: hidden;\n}\n\n.mg-vdi .orange-glow {\n position: absolute;\n width: 700px; height: 700px;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n background: radial-gradient(circle, rgba(242,184,57,0.12) 0%, rgba(255,100,0,0.06) 25%, transparent 70%);\n filter: blur(70px);\n animation: mg-vdi-pulse 8s ease-in-out infinite;\n pointer-events: none;\n}\n\n@keyframes mg-vdi-pulse {\n 0%, 100% { opacity: 0.6; transform: translate(-50%,-50%) scale(1); }\n 50% { opacity: 0.9; transform: translate(-50%,-50%) scale(1.1); }\n}\n\n.mg-vdi .gradient-bg {\n position: absolute;\n width: 200%; height: 200%;\n background:\n radial-gradient(circle at 20% 30%, rgba(242,184,57,0.04) 0%, transparent 40%),\n radial-gradient(circle at 80% 70%, rgba(255,100,0,0.03) 0%, transparent 40%),\n linear-gradient(135deg, #000 0%, #0a0a0a 50%, #000 100%);\n animation: mg-vdi-grad 30s ease-in-out infinite alternate;\n pointer-events: none;\n}\n\n@keyframes mg-vdi-grad {\n 0% { transform: translate(0,0) rotate(0deg); }\n 100% { transform: translate(-10%,-10%) rotate(3deg); }\n}\n\n.mg-vdi .circuit-grid {\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(to right, rgba(242,184,57,0.06) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(242,184,57,0.06) 1px, transparent 1px);\n background-size: 60px 60px;\n animation: mg-vdi-grid 40s linear infinite;\n opacity: 0.3;\n pointer-events: none;\n}\n\n@keyframes mg-vdi-grid {\n 0% { transform: translate(0,0); }\n 100% { transform: translate(60px,60px); }\n}\n\n\/* \u2500\u2500 Stack container \u2500\u2500 *\/\n.mg-vdi .perfect-stack-container {\n position: relative;\n z-index: 0;\n width: 100%;\n \/* 6 cards \u00d7 100svh \u2014 uses small viewport height so browser chrome doesn't count *\/\n min-height: 600vh;\n min-height: 600svh;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n\/* \u2500\u2500 Stack cards \u2500\u2500 *\/\n.mg-vdi .stack-card {\n position: -webkit-sticky;\n position: sticky;\n top: 0;\n width: 100%;\n \/* svh: excludes mobile browser chrome so card never clips behind address bar *\/\n height: 100vh;\n height: 100svh;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n \/* Safe area insets for notched phones *\/\n padding:\n max(16px, env(safe-area-inset-top))\n max(16px, env(safe-area-inset-right))\n max(16px, env(safe-area-inset-bottom))\n max(16px, env(safe-area-inset-left));\n}\n\n.mg-vdi .stack-card::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: 1;\n background: linear-gradient(135deg,\n rgba(242,184,57,0.09),\n transparent 30%,\n transparent 70%,\n rgba(242,184,57,0.05));\n pointer-events: none;\n}\n\n.mg-vdi .card-1 { z-index: 1; }\n.mg-vdi .card-2 { z-index: 2; }\n.mg-vdi .card-3 { z-index: 3; }\n.mg-vdi .card-4 { z-index: 4; }\n.mg-vdi .card-5 { z-index: 5; }\n.mg-vdi .card-6 { z-index: 6; }\n\n\/* \u2500\u2500 Card content panel \u2500\u2500 *\/\n.mg-vdi .card-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 92%;\n max-width: 1200px;\n \/* Height: flexible so content never clips on short phones *\/\n min-height: 60%;\n max-height: 92%;\n overflow-y: auto;\n \/* Hide scrollbar but allow scroll if needed on very small screens *\/\n scrollbar-width: none;\n -ms-overflow-style: none;\n margin: auto;\n background: rgba(15,15,15,0.95);\n border-radius: 20px;\n padding: clamp(20px, 4vw, 40px) clamp(20px, 5vw, 48px);\n box-shadow:\n 0 16px 48px rgba(0,0,0,0.8),\n inset 0 1px 0 rgba(242,184,57,0.12);\n text-align: center;\n position: relative;\n z-index: 2;\n}\n\n.mg-vdi .card-content::-webkit-scrollbar { display: none; }\n\n\/* Backdrop blur only on capable desktop \u2014 too heavy on mobile GPU *\/\n@media (hover: hover) and (pointer: fine) {\n @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {\n .mg-vdi .card-content {\n background: rgba(15,15,15,0.72);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n }\n }\n}\n\n\/* \u2500\u2500 Typography \u2500\u2500 *\/\n.mg-vdi .card-content h2 {\n \/* Mobile floor is 1.5rem (24px), not 2.2rem \u2014 prevents overflow on 360px phones *\/\n font-size: clamp(1.5rem, 5vw, 3.2rem);\n margin: 0 0 clamp(1rem, 2.5vw, 2rem);\n line-height: 1.25;\n font-weight: 700;\n color: #ffffff;\n width: 100%;\n letter-spacing: -0.3px;\n padding-bottom: clamp(0.7rem, 1.5vw, 1.2rem);\n position: relative;\n}\n\n.mg-vdi .card-content h2::after {\n content: '';\n display: block;\n width: 40px;\n height: 3px;\n background: linear-gradient(90deg, #F2B839, #E1830F);\n border-radius: 2px;\n margin: clamp(0.5rem, 1vw, 0.9rem) auto 0;\n}\n\n.mg-vdi .card-content p {\n \/* Mobile floor 1rem (16px) \u2014 readable without zooming *\/\n font-size: clamp(1rem, 3.2vw, 1.75rem);\n line-height: 1.6;\n color: rgba(255,255,255,0.88);\n max-width: 92%;\n margin: 0 auto;\n font-weight: 400;\n}\n\n\/* \u2500\u2500 Slide-in animation \u2500\u2500 *\/\n.mg-vdi .slide-in {\n animation: mg-vdi-slidein 1.1s cubic-bezier(0.22,1,0.36,1) forwards;\n}\n\n@keyframes mg-vdi-slidein {\n from { transform: translateY(24px) scale(0.96); opacity: 0; }\n to { transform: translateY(0) scale(1); opacity: 1; }\n}\n\n\/* \u2500\u2500 Progress dots \u2014 desktop only \u2500\u2500\n position:fixed can be clipped on mobile by WP stacking contexts *\/\n.mg-vdi .mg-dots {\n position: fixed;\n right: 22px;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n flex-direction: column;\n gap: 11px;\n z-index: 100;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.4s;\n}\n\n.mg-vdi .mg-dots.visible { opacity: 1; }\n\n.mg-vdi .mg-dot {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: rgba(255,255,255,0.2);\n border: 1px solid rgba(255,255,255,0.15);\n transition: background .3s, transform .3s, border-color .3s;\n display: block;\n}\n\n.mg-vdi .mg-dot.active {\n background: #F2B839;\n border-color: #F2B839;\n transform: scale(1.5);\n box-shadow: 0 0 7px rgba(242,184,57,0.6);\n}\n\n\/* \u2500\u2500 Scroll hint (mobile only) \u2500\u2500 *\/\n.mg-vdi .mg-scroll-hint {\n display: none;\n position: absolute;\n bottom: max(20px, env(safe-area-inset-bottom));\n left: 50%;\n transform: translateX(-50%);\n flex-direction: column;\n align-items: center;\n gap: 4px;\n z-index: 10;\n pointer-events: none;\n opacity: 0.5;\n animation: mg-hint-bounce 2s ease-in-out infinite;\n}\n\n.mg-vdi .stack-card-1 .mg-scroll-hint { display: flex; }\n\n.mg-vdi .mg-scroll-hint span {\n font-size: 0.6rem;\n letter-spacing: 0.12em;\n color: rgba(255,255,255,0.6);\n text-transform: uppercase;\n}\n\n.mg-vdi .mg-scroll-hint svg {\n width: 16px; height: 16px;\n stroke: rgba(255,255,255,0.5);\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n fill: none;\n}\n\n@keyframes mg-hint-bounce {\n 0%,100% { transform: translateX(-50%) translateY(0); }\n 50% { transform: translateX(-50%) translateY(5px); }\n}\n\n\/* \u2500\u2500 Metrics grid \u2500\u2500 *\/\n.mg-vdi .mg-metrics {\n display: grid;\n \/* Desktop: 5 columns; collapses gracefully via auto-fill *\/\n grid-template-columns: repeat(5, 1fr);\n gap: 12px;\n margin-top: clamp(1.2rem, 2.5vw, 2rem);\n width: 100%;\n}\n\n.mg-vdi .mg-metric {\n background: rgba(242,184,57,0.07);\n border: 1px solid rgba(242,184,57,0.20);\n border-radius: 12px;\n padding: clamp(10px, 1.5vw, 16px) clamp(8px, 1.2vw, 12px);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n}\n\n.mg-vdi .mg-metric-val {\n font-size: clamp(1.1rem, 2.2vw, 1.8rem);\n font-weight: 700;\n color: #F2B839;\n line-height: 1;\n white-space: nowrap;\n}\n\n.mg-vdi .mg-metric-lbl {\n font-size: clamp(0.62rem, 1.1vw, 0.76rem);\n color: rgba(255,255,255,0.48);\n line-height: 1.3;\n text-align: center;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MOBILE BREAKPOINTS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n\/* Touch devices: reduce heavy animations to save battery *\/\n@media (hover: none) and (pointer: coarse) {\n .mg-vdi .gradient-bg { animation-duration: 60s; }\n .mg-vdi .circuit-grid { animation-duration: 80s; opacity: 0.18; }\n .mg-vdi .orange-glow { filter: blur(50px); animation-duration: 12s; }\n .mg-vdi .mg-dots { display: none; } \/* fixed positioning unreliable on mobile *\/\n}\n\n\/* Tablet portrait *\/\n@media (max-width: 768px) {\n .mg-vdi .mg-metrics {\n grid-template-columns: repeat(3, 1fr);\n }\n \/* Last metric spans full width to avoid orphan *\/\n .mg-vdi .mg-metric:last-child {\n grid-column: 1 \/ -1;\n }\n}\n\n\/* Phone landscape *\/\n@media (max-width: 768px) and (orientation: landscape) {\n .mg-vdi .card-content {\n max-height: 96%;\n padding: 16px 24px;\n border-radius: 14px;\n justify-content: flex-start;\n padding-top: 20px;\n }\n .mg-vdi .card-content h2 {\n font-size: clamp(1.2rem, 4vw, 1.8rem);\n margin-bottom: 0.6rem;\n padding-bottom: 0.5rem;\n }\n .mg-vdi .card-content p { font-size: clamp(0.88rem, 2.2vw, 1.15rem); }\n .mg-vdi .mg-metrics { grid-template-columns: repeat(3, 1fr); margin-top: 0.8rem; gap: 7px; }\n .mg-vdi .mg-metric:last-child { grid-column: auto; }\n .mg-vdi .mg-metric-val { font-size: clamp(1rem, 2vw, 1.4rem); }\n}\n\n\/* Phone portrait \u2264 480px \u2014 2-col metrics, tighter padding *\/\n@media (max-width: 480px) {\n .mg-vdi .card-content {\n width: 94%;\n border-radius: 16px;\n }\n .mg-vdi .mg-metrics {\n grid-template-columns: repeat(2, 1fr);\n }\n .mg-vdi .mg-metric:last-child {\n grid-column: 1 \/ -1;\n }\n}\n\n\/* Very small phones \u2264 360px *\/\n@media (max-width: 360px) {\n .mg-vdi .card-content h2 { font-size: 1.3rem; letter-spacing: 0; }\n .mg-vdi .card-content p { font-size: 0.95rem; max-width: 100%; }\n .mg-vdi .mg-metrics { grid-template-columns: repeat(2, 1fr); gap: 6px; }\n .mg-vdi .mg-metric-val { font-size: 1rem; }\n .mg-vdi .mg-metric-lbl { font-size: 0.58rem; }\n}\n\n\/* \u2500\u2500 Reduced motion \u2500\u2500 *\/\n@media (prefers-reduced-motion: reduce) {\n .mg-vdi .gradient-bg,\n .mg-vdi .circuit-grid,\n .mg-vdi .orange-glow,\n .mg-vdi .mg-scroll-hint { animation: none !important; }\n .mg-vdi .slide-in { animation: none !important; opacity: 1; transform: none; }\n}\n<\/style>\n\n<div class=\"mg-vdi\">\n\n \n <div class=\"mg-dots\" id=\"mg-vdi-dots\">\n <span class=\"mg-dot active\"><\/span>\n <span class=\"mg-dot\"><\/span>\n <span class=\"mg-dot\"><\/span>\n <span class=\"mg-dot\"><\/span>\n <span class=\"mg-dot\"><\/span>\n <span class=\"mg-dot\"><\/span>\n <\/div>\n\n <div class=\"perfect-stack-container\">\n\n <div class=\"stack-card card-1\">\n <div class=\"card-bg\">\n <div class=\"gradient-bg\"><\/div>\n <div class=\"circuit-grid\"><\/div>\n <div class=\"orange-glow\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <h2>\u041c\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u0432 \u0435\u0434\u0438\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u2014 \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0438\u044f<\/h2>\n <p>\u0412\u0441\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u00ab\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\u00bb \u0432\u0435\u0434\u0443\u0442\u0441\u044f \u0432 \u0435\u0434\u0438\u043d\u043e\u0439 \u0437\u0430\u0449\u0438\u0449\u0451\u043d\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435. \n\u042d\u0442\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043f\u043e\u0442\u0435\u0440\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u0435\u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u0432 \u041a\u0414 \u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043e\u0432.\n\u0412\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u0430\u043a \u043e\u0442 \u043e\u0434\u043d\u043e\u0439 \u0441\u043b\u0430\u0436\u0435\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b.<\/p>\n <\/div>\n \n <div class=\"mg-scroll-hint\" aria-hidden=\"true\">\n <span>\u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u0435<\/span>\n <svg viewBox=\"0 0 24 24\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"stack-card card-2\">\n <div class=\"card-bg\">\n <div class=\"gradient-bg\"><\/div>\n <div class=\"circuit-grid\"><\/div>\n <div class=\"orange-glow\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <h2>\u0412\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441, \u0430 \u043d\u0435 \u0445\u0430\u043e\u0441 \u0432 \u0437\u0430\u0434\u0430\u0447\u0430\u0445<\/h2>\n <p>\u0420\u0430\u0431\u043e\u0442\u0430 \u0440\u0430\u0437\u0431\u0438\u0442\u0430 \u043d\u0430 \u044d\u0442\u0430\u043f\u044b \u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0441 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c\u0438 \u0441\u0440\u043e\u043a\u0430\u043c\u0438 \u0438 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438. \n\u0412\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u0438\u0434\u0438\u0442\u0435 \u0432 \u041a\u0430\u043d\u0431\u0430\u043d\u0435, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438 \u043d\u0430 \u043a\u0430\u043a\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f. \n\u041d\u0438\u043a\u0430\u043a\u0438\u0445 \u00ab\u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c\u00bb \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u0441\u0442\u0430\u0442\u0443\u0441 \u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0432\u043f\u0435\u0440\u0451\u0434.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"stack-card card-3\">\n <div class=\"card-bg\">\n <div class=\"gradient-bg\"><\/div>\n <div class=\"circuit-grid\"><\/div>\n <div class=\"orange-glow\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <h2>\u041d\u0438\u043a\u0430\u043a\u0438\u0445 \u00ab\u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439\u00bb \u0438 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/h2>\n <p>\u0412\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f. \n\u0420\u0430\u0431\u043e\u0442\u0430 \u0432\u0435\u0434\u0451\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0437\u0430\u0434\u0430\u0447, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \n\u0412\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u0438\u0434\u0438\u0442\u0435 \u0441\u0442\u0430\u0442\u0443\u0441 \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"stack-card card-4\">\n <div class=\"card-bg\">\n <div class=\"gradient-bg\"><\/div>\n <div class=\"circuit-grid\"><\/div>\n <div class=\"orange-glow\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <h2>\u0426\u0438\u0444\u0440\u043e\u0432\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0443\u0441\u043a\u043e\u0440\u044f\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0432 2\u20133 \u0440\u0430\u0437\u0430<\/h2>\n <p>\u041c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0441\u0431\u043e\u0440\u043e\u043a \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u0418\u043d\u0436\u0435\u043d\u0435\u0440 \u0442\u0440\u0430\u0442\u0438\u0442 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u2014 \u043d\u0435 \u043d\u0430 \u0440\u0443\u0442\u0438\u043d\u043d\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435<\/p>\n <\/div>\n <\/div>\n\n <div class=\"stack-card card-5\">\n <div class=\"card-bg\">\n <div class=\"gradient-bg\"><\/div>\n <div class=\"circuit-grid\"><\/div>\n <div class=\"orange-glow\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <h2>\u0412\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043d\u0430\u0448\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0434\u0451\u0436\u043d\u043e \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u044b<\/h2>\n <p>\u0412\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0437\u0430\u0449\u0438\u0449\u0451\u043d\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0443\u0440\u0435 \u2014 \u043d\u0435 \u043d\u0430 \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0430\u0445 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u043e\u0432, \u043d\u0435 \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0434\u0438\u0441\u043a\u0430\u0445. \u0427\u0435\u0440\u0442\u0435\u0436\u0438, \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0438\u0437\u0432\u043d\u0435. \u0412\u0430\u0448\u0430 \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432\u0430\u0448\u0435\u0439<\/p>\n <\/div>\n <\/div>\n\n <div class=\"stack-card card-6\">\n <div class=\"card-bg\">\n <div class=\"gradient-bg\"><\/div>\n <div class=\"circuit-grid\"><\/div>\n <div class=\"orange-glow\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <h2>\u0418\u0442\u043e\u0433: \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u2014 \u0433\u0434\u0435 \u0431\u044b \u043c\u044b \u043d\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0438\u0441\u044c<\/h2>\n <p>\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u2014 \u043d\u0435 \u0446\u0435\u043b\u044c, \u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0438\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u0432 \u043f\u043e\u0434 \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0433\u0435\u043e\u0433\u0440\u0430\u0444\u0438\u0438<\/p>\n <div class=\"mg-metrics\">\n <div class=\"mg-metric\">\n <span class=\"mg-metric-val\">5300+<\/span>\n <span class=\"mg-metric-lbl\">\u043f\u043e\u043a\u0443\u043f\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0443\u044e\u0449\u0438\u0445 \u0432 \u0435\u0434\u0438\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435<\/span>\n <\/div>\n <div class=\"mg-metric\">\n <span class=\"mg-metric-val\"><50 \u043c\u0441<\/span>\n <span class=\"mg-metric-lbl\">\u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0441\u0435\u0441\u0441\u0438\u0438 \u0438\u0437 \u043b\u044e\u0431\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0420\u0424<\/span>\n <\/div>\n <div class=\"mg-metric\">\n <span class=\"mg-metric-val\">\u00d72\u20133<\/span>\n <span class=\"mg-metric-lbl\">\u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 \u0437\u0430 \u0441\u0447\u0451\u0442 \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432<\/span>\n <\/div>\n <div class=\"mg-metric\">\n <span class=\"mg-metric-val\">100%<\/span>\n <span class=\"mg-metric-lbl\">\u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 PDM<\/span>\n <\/div>\n <div class=\"mg-metric\">\n <span class=\"mg-metric-val\">\u0432\u0441\u044f \u0420\u0424<\/span>\n <span class=\"mg-metric-lbl\">\u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u0431\u0430\u0437\u0435 \u041f\u041a\u0418 \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\n\n<script>\n(function () {\n var vdi = document.querySelector('.mg-vdi');\n var cards = document.querySelectorAll('.mg-vdi .card-content');\n var dots = document.querySelectorAll('.mg-vdi .mg-dot');\n var dotsWrap = document.getElementById('mg-vdi-dots');\n var TOTAL = dots.length;\n var isTouch = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);\n\n if (!vdi) return;\n\n \/* \u2500\u2500 Slide-in via IntersectionObserver \u2500\u2500 *\/\n if ('IntersectionObserver' in window) {\n var io = new IntersectionObserver(function (entries) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) entry.target.classList.add('slide-in');\n });\n }, { threshold: 0.08, rootMargin: '0px 0px -60px 0px' });\n cards.forEach(function (c) { io.observe(c); });\n } else {\n cards.forEach(function (c) { c.classList.add('slide-in'); });\n }\n\n \/* \u2500\u2500 Progress dots (skip on touch \u2014 CSS already hides them,\n but also skip the scroll listener overhead) \u2500\u2500 *\/\n if (!isTouch) {\n function updateDots() {\n var rect = vdi.getBoundingClientRect();\n var blockTop = -rect.top;\n var scrollable = vdi.offsetHeight - window.innerHeight;\n if (blockTop < 0 || blockTop > scrollable) {\n dotsWrap.classList.remove('visible');\n return;\n }\n dotsWrap.classList.add('visible');\n var idx = Math.min(Math.floor((blockTop \/ scrollable) * TOTAL), TOTAL - 1);\n dots.forEach(function (d, i) { d.classList.toggle('active', i === idx); });\n }\n window.addEventListener('scroll', updateDots, { passive: true });\n window.addEventListener('resize', updateDots, { passive: true });\n updateDots();\n }\n\n \/* \u2500\u2500 Reduced motion: skip animation entirely \u2500\u2500 *\/\n if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n cards.forEach(function (c) { c.classList.add('slide-in'); });\n }\n\n \/* \u2500\u2500 iOS: prevent elastic overscroll at block boundaries \u2500\u2500 *\/\n if (isTouch) {\n var touchStartY = 0;\n vdi.addEventListener('touchstart', function (e) {\n touchStartY = e.touches[0].clientY;\n }, { passive: true });\n vdi.addEventListener('touchmove', function (e) {\n var delta = e.touches[0].clientY - touchStartY;\n var atTop = window.scrollY === 0;\n var atBottom = window.scrollY >= document.body.scrollHeight - window.innerHeight;\n if ((atTop && delta > 0) || (atBottom && delta < 0)) {\n e.preventDefault();\n }\n }, { passive: false });\n }\n\n \/* \u2500\u2500 Viewport height fix for mobile browser chrome \u2500\u2500\n Sets --vh custom property to actual visible height,\n used as fallback where svh isn't supported yet *\/\n function setVh() {\n var vh = window.innerHeight * 0.01;\n document.documentElement.style.setProperty('--mg-vh', vh + 'px');\n }\n window.addEventListener('resize', setVh, { passive: true });\n setVh();\n})();\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-landing-block mg-collab\">\n\n<style>\n.wp-landing-block.mg-collab,\n.wp-landing-block.mg-collab *,\n.wp-landing-block.mg-collab *::before,\n.wp-landing-block.mg-collab *::after {\n box-sizing: border-box;\n}\n\n.wp-landing-block.mg-collab {\n --acc: #E1830F;\n --acc2: #F2B839;\n\n width: calc(100% - 50px);\n max-width: 1600px;\n margin: 80px auto;\n padding: clamp(24px, 3vw, 48px);\n\n background: #FEF4EE;\n border-radius: 24px;\n border: 1px solid rgba(226,131,15,.18);\n box-shadow: 0 25px 80px rgba(226,131,15,.14);\n\n display: grid;\n grid-template-columns: 1.2fr 1fr;\n gap: clamp(24px, 3vw, 48px);\n align-items: stretch;\n\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n -webkit-font-smoothing: antialiased;\n}\n\n\/* \u2500\u2500 LEFT CONTENT COLUMN \u2500\u2500 *\/\n.mg-collab__content {\n display: flex;\n flex-direction: column;\n}\n\n.mg-collab__tag {\n display: inline-block;\n background: rgba(226,131,15,.12);\n color: var(--acc);\n font-size: 11px;\n font-weight: 700;\n letter-spacing: .07em;\n text-transform: uppercase;\n padding: 4px 14px;\n border-radius: 999px;\n margin-bottom: 16px;\n width: fit-content;\n}\n\n.mg-collab__title {\n font-size: clamp(1.6rem, 2.8vw, 2.6rem);\n font-weight: 800;\n color: var(--acc);\n line-height: 1.25;\n margin: 0 0 14px;\n}\n\n.mg-collab__intro {\n font-size: clamp(.95rem, 1.2vw, 1.05rem);\n line-height: 1.7;\n color: #444;\n margin: 0 0 28px;\n}\n\n.mg-collab__divider {\n height: 1px;\n background: rgba(226,131,15,.2);\n margin-bottom: 24px;\n}\n\n.mg-collab__grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n align-items: start;\n margin-bottom: 28px;\n}\n\n.mg-collab__col {\n background: #fff;\n border-radius: 14px;\n padding: 22px 24px;\n border: 1px solid rgba(226,131,15,.18);\n display: flex;\n flex-direction: column;\n}\n\n.mg-collab__col-head {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 14px;\n padding-bottom: 12px;\n border-bottom: 1px solid rgba(226,131,15,.15);\n}\n\n.mg-collab__col-icon {\n width: 34px;\n height: 34px;\n border-radius: 8px;\n background: #FEF4EE;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.mg-collab__col-icon svg {\n width: 18px;\n height: 18px;\n}\n\n.mg-collab__col-title {\n font-weight: 700;\n font-size: .95rem;\n color: #1a1a1a;\n margin: 0;\n}\n\n.mg-collab__col-sub {\n font-size: .78rem;\n color: #888;\n margin: 2px 0 0;\n}\n\n.mg-collab__list {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 9px;\n}\n\n.mg-collab__item {\n display: flex;\n gap: 9px;\n font-size: .92rem;\n line-height: 1.55;\n color: #333;\n align-items: flex-start;\n}\n\n.mg-collab__dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--acc);\n flex-shrink: 0;\n margin-top: 7px;\n}\n\n.mg-collab__cta-wrap {\n display: flex;\n justify-content: center;\n margin-top: auto;\n}\n\n.mg-collab__cta {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: .9rem 2.6rem;\n border-radius: 999px;\n background: linear-gradient(135deg, var(--acc), var(--acc2));\n font-weight: 700;\n font-size: 1rem;\n color: #000;\n text-decoration: none;\n border: none;\n cursor: pointer;\n transition: transform .22s ease, box-shadow .22s ease;\n}\n\n.mg-collab__cta:hover {\n transform: translateY(-3px);\n box-shadow: 0 16px 36px rgba(226,131,15,.35);\n color: #000;\n text-decoration: none;\n}\n\n\/* \u2500\u2500 RIGHT IMAGE COLUMN \u2500\u2500 *\/\n.mg-collab__media {\n position: relative;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 30px 60px rgba(0,0,0,.15);\n display: flex;\n}\n\n.mg-collab__media img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n display: block;\n}\n\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n@media (max-width: 960px) {\n .wp-landing-block.mg-collab {\n grid-template-columns: 1fr;\n }\n .mg-collab__media {\n aspect-ratio: 16\/9;\n order: -1;\n }\n .mg-collab__grid {\n grid-template-columns: 1fr;\n }\n}\n\n@media (max-width: 600px) {\n .wp-landing-block.mg-collab {\n width: calc(100% - 24px);\n margin: 48px auto;\n }\n}\n<\/style>\n\n\n<div class=\"mg-collab__content\">\n\n <div class=\"mg-collab__tag\">\u041f\u0430\u0440\u0442\u043d\u0451\u0440\u0441\u0442\u0432\u043e<\/div>\n\n <h2 class=\"mg-collab__title\">\n \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0438\u044f \u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442. \u0423 \u0432\u0430\u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e. \u042d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u043f\u0430\u0440\u0442\u043d\u0451\u0440\u0441\u0442\u0432\u043e.\n <\/h2>\n\n <p class=\"mg-collab__intro\">\n Mechanogurus \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b \u0438 \u043e\u0442\u043a\u0440\u044b\u0442 \u043a \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f\u043c\u0438 \u043c\u0430\u043b\u043e\u0433\u043e \u0438 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430. \u041c\u044b \u0431\u0435\u0440\u0451\u043c \u043d\u0430 \u0441\u0435\u0431\u044f \u043f\u043e\u043b\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u2014 \u0432\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 \u0441\u0435\u0440\u0438\u0439\u043d\u044b\u0439 \u0432\u044b\u043f\u0443\u0441\u043a \u0438 \u0432\u044b\u0432\u043e\u0434 \u043d\u0430 \u0440\u044b\u043d\u043e\u043a.\n <\/p>\n\n <div class=\"mg-collab__divider\"><\/div>\n\n <div class=\"mg-collab__grid\">\n\n <div class=\"mg-collab__col\">\n <div class=\"mg-collab__col-head\">\n <div class=\"mg-collab__col-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#E1830F\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n <path d=\"M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83\"\/>\n <\/svg>\n <\/div>\n <div>\n <p class=\"mg-collab__col-title\">\u0421\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b Mechanogurus<\/p>\n <p class=\"mg-collab__col-sub\">\u0418\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433 \u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/p>\n <\/div>\n <\/div>\n <ul class=\"mg-collab__list\">\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 (Design Engineering)<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u0410\u043d\u0430\u043b\u0438\u0437 \u0440\u044b\u043d\u043a\u0430 \u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u041f\u043e\u0434\u0431\u043e\u0440 \u043f\u043e\u0441\u0442\u0430\u0432\u0449\u0438\u043a\u043e\u0432 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0438 \u0434\u043e\u0440\u043e\u0433\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0445 \u041f\u041a\u0418<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u041a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u043f\u043e\u0434 \u0440\u044b\u043d\u043e\u043a<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u0421\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430<\/li>\n <\/ul>\n <\/div>\n\n <div class=\"mg-collab__col\">\n <div class=\"mg-collab__col-head\">\n <div class=\"mg-collab__col-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#E1830F\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"\/>\n <path d=\"M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2\"\/>\n <line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"16\"\/>\n <line x1=\"10\" y1=\"14\" x2=\"14\" y2=\"14\"\/>\n <\/svg>\n <\/div>\n <div>\n <p class=\"mg-collab__col-title\">\u0421\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430<\/p>\n <p class=\"mg-collab__col-sub\">\u0412\u044b\u043f\u0443\u0441\u043a \u0438 \u043b\u043e\u0433\u0438\u0441\u0442\u0438\u043a\u0430<\/p>\n <\/div>\n <\/div>\n <ul class=\"mg-collab__list\">\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0438 \u0441\u0431\u043e\u0440\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u0417\u0430\u043a\u0443\u043f\u043a\u0430 \u041f\u041a\u0418<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u041b\u043e\u0433\u0438\u0441\u0442\u0438\u043a\u0430<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u0420\u0430\u0441\u0447\u0451\u0442 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0435\u0431\u0435\u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c\u044e<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u0421\u0431\u043e\u0440\u043a\u0430 \u0438 \u0448\u0435\u0444-\u043c\u043e\u043d\u0442\u0430\u0436 \u0443 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430<\/li>\n <\/ul>\n <\/div>\n\n <\/div>\n\n <div class=\"mg-collab__cta-wrap\">\n <a href=\"mailto:info@mechanogurus.ru\" class=\"mg-collab__cta\">\n \u041f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u2192\n <\/a>\n <\/div>\n\n<\/div>\n\n\n<div class=\"mg-collab__media\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/Partnership.jpg\" alt=\"\u041f\u0430\u0440\u0442\u043d\u0451\u0440\u0441\u0442\u0432\u043e Mechanogurus\" loading=\"lazy\">\n<\/div>\n\n<\/div>\n\n\n\n\n<section class=\"mg-gurus\">\n\n <div class=\"mg-gurus__header\">\n <div class=\"mg-gurus__eyebrow\">\n <span class=\"mg-gurus__line\"><\/span>\n <span class=\"mg-gurus__eyebrow-text\">\u041a\u041e\u041c\u0410\u041d\u0414\u0410 \u042d\u041a\u0421\u041f\u0415\u0420\u0422\u041e\u0412<\/span>\n <span class=\"mg-gurus__line\"><\/span>\n <\/div>\n <h2 class=\"mg-gurus__title\">\u041d\u0430\u0448\u0438 <em>\u0413\u0443\u0440\u0443<\/em><\/h2>\n <p class=\"mg-gurus__subtitle\">\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u044b \u0441 \u043c\u043d\u043e\u0433\u043e\u043b\u0435\u0442\u043d\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0432 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043e\u0442\u0440\u0430\u0441\u043b\u044f\u0445 \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u0441\u0442\u0438<\/p>\n <\/div>\n\n <div class=\"mg-gurus__carousel-wrap\">\n\n \n <button class=\"mg-carr-btn mg-carr-btn--prev\" aria-label=\"\u041d\u0430\u0437\u0430\u0434\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M13 4L7 10L13 16\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n <button class=\"mg-carr-btn mg-carr-btn--next\" aria-label=\"\u0412\u043f\u0435\u0440\u0451\u0434\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M7 4L13 10L7 16\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n\n \n <div class=\"mg-gurus__track-outer\">\n <div class=\"mg-gurus__track\">\n\n <div class=\"mg-guru-card\">\n <div class=\"mg-guru-card__inner\">\n <div class=\"mg-guru-card__photo-wrap\">\n <div class=\"mg-guru-card__hex-border\"><\/div>\n <div class=\"mg-guru-card__hex-frame\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/animated_2.png\" alt=\"\u0413\u0423\u0420\u0423 \u2014 \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043f\u0440\u043e\u0434\u0430\u043a\u0442-\u0434\u0438\u0437\u0430\u0439\u043d\" class=\"mg-guru-card__photo\" \/>\n <\/div>\n <div class=\"mg-guru-card__badge\">GURU<\/div>\n <\/div>\n <div class=\"mg-guru-card__body\">\n <div class=\"mg-guru-card__name\">\u041a\u0438\u0440\u0430\u043d \u041b.<\/div>\n <div class=\"mg-guru-card__domain\">\u0418\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/div>\n <p class=\"mg-guru-card__spec\">\u0413\u0423\u0420\u0423 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043f\u0440\u043e\u0434\u0430\u043a\u0442-\u0434\u0438\u0437\u0430\u0439\u043d\u0430<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mg-guru-card\">\n <div class=\"mg-guru-card__inner\">\n <div class=\"mg-guru-card__photo-wrap\">\n <div class=\"mg-guru-card__hex-border\"><\/div>\n <div class=\"mg-guru-card__hex-frame\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/animated_3.png\" alt=\"\u0413\u0423\u0420\u0423 \u2014 \u0421\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\" class=\"mg-guru-card__photo\" \/>\n <\/div>\n <div class=\"mg-guru-card__badge\">GURU<\/div>\n <\/div>\n <div class=\"mg-guru-card__body\">\n <div class=\"mg-guru-card__name\">\u0418\u043b\u044c\u044f \u0428.<\/div>\n <div class=\"mg-guru-card__domain\">\u0421\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/div>\n <p class=\"mg-guru-card__spec\">\u0413\u0423\u0420\u0423 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mg-guru-card\">\n <div class=\"mg-guru-card__inner\">\n <div class=\"mg-guru-card__photo-wrap\">\n <div class=\"mg-guru-card__hex-border\"><\/div>\n <div class=\"mg-guru-card__hex-frame\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/animated_4.png\" alt=\"\u0413\u0423\u0420\u0423 \u2014 \u041e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0413\u041f\u0410\/\u042d\u0413\u0422\u0410\/\u0414\u0413\u0423\/\u0413\u041f\u0423\" class=\"mg-guru-card__photo\" \/>\n <\/div>\n <div class=\"mg-guru-card__badge\">GURU<\/div>\n <\/div>\n <div class=\"mg-guru-card__body\">\n <div class=\"mg-guru-card__name\">\u0410\u043b\u0435\u043a\u0441\u0430\u043d\u0434\u0440 \u0414.<\/div>\n <div class=\"mg-guru-card__domain\">\u041e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0413\u041f\u0410 \/ \u042d\u0413\u0422\u0410 \/ \u0414\u0413\u0423 \/ \u0413\u041f\u0423<\/div>\n <p class=\"mg-guru-card__spec\">\u0413\u0423\u0420\u0423 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0413\u041f\u0410\/\u042d\u0413\u0422\u0410\/\u0414\u0413\u0423\/\u0413\u041f\u0423<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mg-guru-card\">\n <div class=\"mg-guru-card__inner\">\n <div class=\"mg-guru-card__photo-wrap\">\n <div class=\"mg-guru-card__hex-border\"><\/div>\n <div class=\"mg-guru-card__hex-frame\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/animated_1.png\" alt=\"\u0413\u0423\u0420\u0423 \u2014 \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0447\u0451\u0442\u044b \u0438 1\u0421\" class=\"mg-guru-card__photo\" \/>\n <\/div>\n <div class=\"mg-guru-card__badge\">GURU<\/div>\n <\/div>\n <div class=\"mg-guru-card__body\">\n <div class=\"mg-guru-card__name\">\u0410\u043d\u0430\u0441\u0442\u0430\u0441\u0438\u044f \u041a.<\/div>\n <div class=\"mg-guru-card__domain\">\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0447\u0451\u0442\u044b \u0438 1\u0421<\/div>\n <p class=\"mg-guru-card__spec\">\u0413\u0423\u0420\u0423 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0440\u0430\u0441\u0447\u0451\u0442\u043e\u0432, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 1\u0421 \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0439 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mg-guru-card\">\n <div class=\"mg-guru-card__inner\">\n <div class=\"mg-guru-card__photo-wrap\">\n <div class=\"mg-guru-card__hex-border\"><\/div>\n <div class=\"mg-guru-card__hex-frame\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/animated_5.png\" alt=\"\u0413\u0423\u0420\u0423 \u2014 \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043d\u043e\u0440\u043c\u043e\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u041a\u0414\" class=\"mg-guru-card__photo\" \/>\n <\/div>\n <div class=\"mg-guru-card__badge\">GURU<\/div>\n <\/div>\n <div class=\"mg-guru-card__body\">\n <div class=\"mg-guru-card__name\">\u0412\u0430\u043b\u0435\u043d\u0442\u0438\u043d\u0430 \u0417.<\/div>\n <div class=\"mg-guru-card__domain\">\u041d\u043e\u0440\u043c\u043e\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u041a\u0414<\/div>\n <p class=\"mg-guru-card__spec\">\u0413\u0423\u0420\u0423 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0437\u0430\u0446\u0438\u0438, \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043d\u043e\u0440\u043c\u043e\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u041a\u0414<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n \n <div class=\"mg-carr-dots\" aria-label=\"\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043f\u043e \u0441\u043b\u0430\u0439\u0434\u0430\u043c\"><\/div>\n\n <\/div>\n\n<\/section>\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Rajdhani:wght@400;500;600;700&display=swap');\n\n\/* \u2500\u2500 Variables & section \u2500\u2500 *\/\n.mg-gurus {\n --gold: #F2B839;\n --orange: #E1830F;\n --dark: #0d0d0d;\n --dark2: #141414;\n --dark3: #1c1c1c;\n --border: rgba(242,184,57,0.18);\n --border-hover: rgba(242,184,57,0.55);\n --text-primary: #ffffff;\n --text-secondary: rgba(255,255,255,0.6);\n --gap: 20px;\n --visible: 4; \/* cards visible at once on desktop *\/\n background: var(--dark);\n padding: 80px 20px 90px;\n font-family: 'Rajdhani', sans-serif;\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n}\n.mg-gurus *, .mg-gurus *::before, .mg-gurus *::after { box-sizing: border-box; }\n\n.mg-gurus::before {\n content: '';\n position: absolute; inset: 0;\n background-image:\n linear-gradient(rgba(242,184,57,0.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(242,184,57,0.04) 1px, transparent 1px);\n background-size: 48px 48px;\n pointer-events: none;\n}\n.mg-gurus::after {\n content: '';\n position: absolute; inset: 0;\n background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(242,184,57,0.07) 0%, transparent 70%);\n pointer-events: none;\n}\n\n\/* \u2500\u2500 Header \u2500\u2500 *\/\n.mg-gurus__header {\n text-align: center;\n margin-bottom: 56px;\n position: relative;\n z-index: 1;\n}\n.mg-gurus__eyebrow {\n display: flex; align-items: center; justify-content: center;\n gap: 14px; margin-bottom: 16px;\n}\n.mg-gurus__line {\n display: block; width: 48px; height: 1px;\n background: linear-gradient(90deg, transparent, var(--gold));\n}\n.mg-gurus__eyebrow .mg-gurus__line:last-child {\n background: linear-gradient(90deg, var(--gold), transparent);\n}\n.mg-gurus__eyebrow-text {\n font-family: 'Rajdhani', sans-serif;\n font-size: 11px; font-weight: 700;\n letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase;\n}\n.mg-gurus__title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(42px, 6vw, 72px);\n letter-spacing: 0.04em; color: var(--text-primary);\n line-height: 1; margin: 0 0 12px; font-weight: 400;\n}\n.mg-gurus__title em { font-style: normal; color: var(--gold); }\n.mg-gurus__subtitle {\n font-size: 15px; color: var(--text-secondary);\n max-width: 500px; margin: 0 auto; line-height: 1.6; font-weight: 400;\n}\n\n\/* \u2500\u2500 Carousel wrapper \u2500\u2500 *\/\n.mg-gurus__carousel-wrap {\n position: relative;\n max-width: 1100px;\n margin: 0 auto;\n z-index: 1;\n \/* side padding makes room for arrow buttons *\/\n padding: 0 44px;\n}\n\n\/* \u2500\u2500 Arrow buttons \u2500\u2500 *\/\n.mg-carr-btn {\n position: absolute;\n top: 50%;\n transform: translateY(-60%);\n width: 36px; height: 36px;\n background: var(--dark2);\n border: 1px solid var(--border);\n border-radius: 50%;\n color: var(--gold);\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: background 0.25s, border-color 0.25s, opacity 0.25s;\n z-index: 10;\n padding: 0;\n}\n.mg-carr-btn:hover { background: var(--dark3); border-color: var(--border-hover); }\n.mg-carr-btn--prev { left: 0; }\n.mg-carr-btn--next { right: 0; }\n.mg-carr-btn:disabled { opacity: 0.25; cursor: default; }\n\n\/* \u2500\u2500 Track outer (clips overflow) \u2500\u2500 *\/\n.mg-gurus__track-outer {\n overflow: hidden;\n width: 100%;\n}\n\n\/* \u2500\u2500 Track (flex row of cards) \u2500\u2500 *\/\n.mg-gurus__track {\n display: flex;\n gap: var(--gap);\n transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);\n will-change: transform;\n cursor: grab;\n user-select: none;\n}\n.mg-gurus__track.mg-dragging {\n transition: none;\n cursor: grabbing;\n}\n\n\/* \u2500\u2500 Card \u2500\u2500 *\/\n.mg-guru-card {\n flex: 0 0 calc((100% - var(--gap) * (var(--visible) - 1)) \/ var(--visible));\n min-width: 0;\n display: flex;\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.55s ease, transform 0.55s ease;\n}\n.mg-guru-card.mg-visible { opacity: 1; transform: translateY(0); }\n.mg-guru-card:nth-child(2) { transition-delay: 0.08s; }\n.mg-guru-card:nth-child(3) { transition-delay: 0.16s; }\n.mg-guru-card:nth-child(4) { transition-delay: 0.24s; }\n.mg-guru-card:nth-child(5) { transition-delay: 0.32s; }\n\n.mg-guru-card__inner {\n background: var(--dark2);\n border: 1px solid var(--border);\n border-radius: 16px;\n padding: 32px 20px 28px;\n display: flex; flex-direction: column; align-items: center; gap: 20px;\n width: 100%;\n transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;\n position: relative; overflow: hidden; cursor: default;\n}\n.mg-guru-card__inner::before {\n content: '';\n position: absolute; top: 0; left: 0; right: 0; height: 2px;\n background: linear-gradient(90deg, transparent, var(--gold), transparent);\n opacity: 0; transition: opacity 0.35s ease;\n}\n.mg-guru-card:hover .mg-guru-card__inner {\n border-color: var(--border-hover);\n box-shadow: 0 0 32px rgba(242,184,57,0.08), 0 8px 32px rgba(0,0,0,0.4);\n transform: translateY(-4px);\n}\n.mg-guru-card:hover .mg-guru-card__inner::before { opacity: 1; }\n\n\/* \u2500\u2500 Hex photo \u2500\u2500 *\/\n.mg-guru-card__photo-wrap {\n position: relative; width: 120px; height: 120px; flex-shrink: 0;\n}\n.mg-guru-card__hex-border {\n position: absolute; inset: -4px;\n clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);\n background: linear-gradient(135deg, var(--gold), var(--orange), transparent 70%);\n opacity: 0.6; transition: opacity 0.35s ease;\n}\n.mg-guru-card:hover .mg-guru-card__hex-border { opacity: 1; }\n.mg-guru-card__hex-frame {\n width: 100%; height: 100%;\n clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);\n overflow: hidden; background: var(--dark3);\n position: relative; z-index: 1;\n}\n.mg-guru-card__photo {\n width: 100%; height: 100%; object-fit: cover;\n object-position: center top; display: block;\n transition: transform 0.5s ease;\n}\n.mg-guru-card:hover .mg-guru-card__photo { transform: scale(1.06); }\n\n.mg-guru-card__badge {\n position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);\n background: var(--gold); color: #000;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 11px; letter-spacing: 0.18em;\n padding: 2px 10px; border-radius: 20px; z-index: 2; white-space: nowrap;\n}\n\n\/* \u2500\u2500 Card body \u2500\u2500 *\/\n.mg-guru-card__body {\n text-align: center; flex: 1;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 6px;\n}\n.mg-guru-card__name {\n font-family: 'Rajdhani', sans-serif;\n font-size: 17px; font-weight: 700;\n letter-spacing: 0.04em; color: var(--text-primary); line-height: 1.1;\n}\n.mg-guru-card__domain {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 16px; letter-spacing: 0.06em; color: var(--gold); line-height: 1.25;\n}\n.mg-guru-card__spec {\n font-size: 13px; color: var(--text-secondary);\n line-height: 1.55; font-weight: 400; margin: 0;\n}\n\n\/* \u2500\u2500 Dot indicators \u2500\u2500 *\/\n.mg-carr-dots {\n display: flex; align-items: center; justify-content: center;\n gap: 8px; margin-top: 28px;\n}\n.mg-carr-dot {\n width: 6px; height: 6px; border-radius: 50%;\n background: rgba(242,184,57,0.25);\n border: none; padding: 0; cursor: pointer;\n transition: background 0.25s, transform 0.25s;\n}\n.mg-carr-dot.active {\n background: var(--gold);\n transform: scale(1.4);\n}\n\n\/* \u2500\u2500 Responsive \u2500\u2500 *\/\n@media (max-width: 1024px) {\n .mg-gurus { --visible: 3; }\n .mg-guru-card__photo-wrap { width: 100px; height: 100px; }\n}\n@media (max-width: 768px) {\n .mg-gurus { --visible: 2; padding: 60px 16px 70px; }\n .mg-gurus__header { margin-bottom: 40px; }\n .mg-gurus__carousel-wrap { padding: 0 38px; }\n .mg-carr-btn { width: 30px; height: 30px; }\n}\n@media (max-width: 480px) {\n .mg-gurus { --visible: 1; padding: 48px 12px 56px; }\n .mg-gurus__carousel-wrap { padding: 0 34px; }\n .mg-guru-card__inner { padding: 24px 14px 20px; gap: 14px; }\n .mg-guru-card__photo-wrap { width: 96px; height: 96px; }\n .mg-guru-card__badge { font-size: 9px; padding: 1px 8px; }\n .mg-guru-card__domain { font-size: 14px; }\n .mg-guru-card__spec { font-size: 13px; }\n .mg-gurus__subtitle { font-size: 13px; }\n .mg-carr-btn { width: 28px; height: 28px; }\n}\n<\/style>\n\n<script>\n(function () {\n var section = document.querySelector('.mg-gurus');\n if (!section) return;\n\n var track = section.querySelector('.mg-gurus__track');\n var cards = Array.from(section.querySelectorAll('.mg-guru-card'));\n var btnPrev = section.querySelector('.mg-carr-btn--prev');\n var btnNext = section.querySelector('.mg-carr-btn--next');\n var dotsWrap = section.querySelector('.mg-carr-dots');\n\n var total = cards.length;\n var current = 0;\n\n \/* \u2500\u2500 how many cards visible? read from CSS custom prop \u2500\u2500 *\/\n function getVisible() {\n var v = parseInt(getComputedStyle(section).getPropertyValue('--visible').trim(), 10);\n return isNaN(v) ? 4 : v;\n }\n\n \/* \u2500\u2500 build dots \u2500\u2500 *\/\n function buildDots() {\n dotsWrap.innerHTML = '';\n var vis = getVisible();\n var count = total - vis + 1;\n if (count < 1) count = 1;\n for (var i = 0; i < count; i++) {\n var d = document.createElement('button');\n d.className = 'mg-carr-dot' + (i === current ? ' active' : '');\n d.setAttribute('aria-label', '\u0421\u043b\u0430\u0439\u0434 ' + (i + 1));\n d.dataset.idx = i;\n dotsWrap.appendChild(d);\n }\n }\n\n \/* \u2500\u2500 calculate px offset for index \u2500\u2500 *\/\n function getOffset(idx) {\n if (!cards.length) return 0;\n var outer = section.querySelector('.mg-gurus__track-outer');\n var outerW = outer.offsetWidth;\n var vis = getVisible();\n var gap = parseFloat(getComputedStyle(track).gap) || 20;\n var cardW = (outerW - gap * (vis - 1)) \/ vis;\n return idx * (cardW + gap);\n }\n\n \/* \u2500\u2500 apply position \u2500\u2500 *\/\n function goTo(idx) {\n var vis = getVisible();\n var max = Math.max(0, total - vis);\n idx = Math.max(0, Math.min(idx, max));\n current = idx;\n\n track.style.transform = 'translateX(-' + getOffset(idx) + 'px)';\n\n btnPrev.disabled = (current === 0);\n btnNext.disabled = (current >= max);\n\n var dots = dotsWrap.querySelectorAll('.mg-carr-dot');\n dots.forEach(function (d, i) {\n d.classList.toggle('active', i === current);\n });\n }\n\n \/* \u2500\u2500 init \u2500\u2500 *\/\n buildDots();\n goTo(0);\n\n \/* \u2500\u2500 arrow clicks \u2500\u2500 *\/\n btnPrev.addEventListener('click', function () { goTo(current - 1); });\n btnNext.addEventListener('click', function () { goTo(current + 1); });\n\n \/* \u2500\u2500 dot clicks \u2500\u2500 *\/\n dotsWrap.addEventListener('click', function (e) {\n var dot = e.target.closest('.mg-carr-dot');\n if (dot) goTo(parseInt(dot.dataset.idx, 10));\n });\n\n \/* \u2500\u2500 drag \/ swipe \u2500\u2500 *\/\n var startX = 0, startOffset = 0, isDragging = false;\n\n function dragStart(x) {\n isDragging = true;\n startX = x;\n startOffset = getOffset(current);\n track.classList.add('mg-dragging');\n }\n function dragMove(x) {\n if (!isDragging) return;\n var delta = startX - x;\n track.style.transform = 'translateX(-' + (startOffset + delta) + 'px)';\n }\n function dragEnd(x) {\n if (!isDragging) return;\n isDragging = false;\n track.classList.remove('mg-dragging');\n var delta = startX - x;\n var vis = getVisible();\n var gap = parseFloat(getComputedStyle(track).gap) || 20;\n var outer = section.querySelector('.mg-gurus__track-outer');\n var cardW = (outer.offsetWidth - gap * (vis - 1)) \/ vis;\n var threshold = cardW * 0.25;\n if (delta > threshold) goTo(current + 1);\n else if (delta < -threshold) goTo(current - 1);\n else goTo(current);\n }\n\n track.addEventListener('mousedown', function (e) { dragStart(e.clientX); });\n window.addEventListener('mousemove', function (e) { dragMove(e.clientX); });\n window.addEventListener('mouseup', function (e) { dragEnd(e.clientX); });\n\n track.addEventListener('touchstart', function (e) { dragStart(e.touches[0].clientX); }, { passive: true });\n track.addEventListener('touchmove', function (e) { dragMove(e.touches[0].clientX); }, { passive: true });\n track.addEventListener('touchend', function (e) { dragEnd(e.changedTouches[0].clientX); });\n\n \/* \u2500\u2500 IntersectionObserver reveal \u2500\u2500 *\/\n var io = new IntersectionObserver(function (entries) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n cards.forEach(function (c) { c.classList.add('mg-visible'); });\n io.disconnect();\n }\n });\n }, { threshold: 0.1 });\n io.observe(section);\n\n \/* \u2500\u2500 recalc on resize \u2500\u2500 *\/\n var resizeTimer;\n window.addEventListener('resize', function () {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(function () {\n buildDots();\n goTo(Math.min(current, Math.max(0, total - getVisible())));\n }, 150);\n });\n})();\n<\/script>\n\n\n\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700;800&family=DM+Sans:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\n<div class=\"mga-root\">\n<style>\n.mga-root {\n --gold: #F2B839;\n --gold2: #E1830F;\n --bg-glass: rgba(255,255,255,0.04);\n --bg-glass2: rgba(255,255,255,0.07);\n --border: rgba(255,255,255,0.08);\n --border-gold: rgba(242,184,57,0.22);\n --text: #ffffff;\n --text-2: rgba(255,255,255,0.68);\n --text-3: rgba(255,255,255,0.38);\n --gradient: linear-gradient(135deg, #F2B839 0%, #E1830F 100%);\n font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\n color: var(--text);\n background: none !important;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n overflow-x: hidden;\n line-height: 1.6;\n}\n.mga-root *, .mga-root *::before, .mga-root *::after {\n box-sizing: border-box; margin: 0; padding: 0;\n}\n\n\/* \u2500\u2500 WIDTH MANAGEMENT (based on UCW example) \u2500\u2500 *\/\n.mga-root {\n --outer: clamp(24px, 4vw, 80px);\n --outer_plus: 30px;\n --outer_tight: max(0px, calc(var(--outer) - var(--outer_plus)));\n --maxw: 1600px;\n width: calc(100% - (var(--outer_tight) * 2));\n max-width: var(--maxw);\n margin: clamp(40px, 4vw, 80px) auto;\n}\n\n\/* \u2500\u2500 CARD \u2500\u2500 *\/\n.mga-card {\n position: relative;\n background: var(--bg-glass);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border: 1px solid var(--border);\n border-radius: 20px;\n overflow: hidden;\n padding: 40px 44px 36px;\n transition: border-color .3s ease, box-shadow .3s ease;\n}\n.mga-card:hover {\n border-color: var(--border-gold);\n box-shadow: 0 20px 60px rgba(0,0,0,0.25);\n}\n.mga-card::before {\n content: '';\n position: absolute;\n top: 0; left: 0;\n width: 4px; height: 100%;\n background: var(--gradient);\n opacity: .7;\n transition: opacity .3s;\n}\n.mga-card:hover::before { opacity: 1; }\n.mga-card::after {\n content: '';\n position: absolute; inset: 0;\n background: radial-gradient(ellipse 55% 70% at 105% 10%, rgba(242,184,57,.06) 0%, transparent 65%);\n pointer-events: none;\n}\n\n\/* \u2500\u2500 BADGE \u2500\u2500 *\/\n.mga-roi {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 7px 16px;\n background: rgba(242,184,57,.1);\n border: 1px solid rgba(242,184,57,.25);\n border-radius: 100px;\n font-size: 11px;\n font-weight: 600;\n color: var(--gold);\n letter-spacing: .04em;\n text-transform: uppercase;\n margin-bottom: 18px;\n position: relative; z-index: 1;\n}\n.mga-roi-dot {\n width: 7px; height: 7px;\n background: var(--gold);\n border-radius: 50%;\n flex-shrink: 0;\n animation: mga-pulse 2.2s ease-in-out infinite;\n}\n@keyframes mga-pulse {\n 0%,100% { opacity:1; transform:scale(1); }\n 50% { opacity:.45; transform:scale(1.25); }\n}\n\n\/* \u2500\u2500 HOOK QUESTION \u2500\u2500 *\/\n.mga-hook {\n font-size: clamp(15px, 2vw, 19px);\n font-weight: 700;\n line-height: 1.38;\n color: var(--text-2);\n margin-bottom: 10px;\n position: relative; z-index: 1;\n padding-left: 16px;\n border-left: 3px solid rgba(242,184,57,.45);\n}\n\n\/* \u2500\u2500 MAIN HEADING \u2500\u2500 *\/\n.mga-card h3 {\n font-size: clamp(18px, 2.8vw, 28px);\n font-weight: 800;\n line-height: 1.18;\n color: var(--text);\n margin-bottom: 18px;\n position: relative; z-index: 1;\n}\n.mga-gold-text {\n background: var(--gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n\/* \u2500\u2500 SOLUTION BLOCK \u2500\u2500 *\/\n.mga-solution {\n position: relative; z-index: 1;\n background: rgba(242,184,57,.05);\n border: 1px solid rgba(242,184,57,.14);\n border-radius: 12px;\n padding: 18px 20px;\n margin-bottom: 26px;\n}\n.mga-solution-label {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: .1em;\n text-transform: uppercase;\n color: var(--gold);\n margin-bottom: 10px;\n}\n.mga-solution-list {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 7px;\n}\n.mga-solution-list li {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n font-size: clamp(12px, 1.4vw, 13px);\n color: var(--text-2);\n line-height: 1.55;\n}\n.mga-solution-list li::before {\n content: '';\n flex-shrink: 0;\n width: 16px; height: 16px;\n margin-top: 1px;\n background: rgba(242,184,57,.15);\n border: 1px solid rgba(242,184,57,.3);\n border-radius: 50%;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23F2B839' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\");\n background-size: 10px 10px;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n\/* \u2500\u2500 METRICS ROW \u2500\u2500 *\/\n.mga-metrics {\n display: flex;\n gap: 0;\n margin-bottom: 24px;\n border: 1px solid var(--border);\n border-radius: 12px;\n overflow: hidden;\n position: relative; z-index: 1;\n}\n.mga-metric {\n flex: 1;\n padding: 14px 16px;\n border-right: 1px solid var(--border);\n background: var(--bg-glass2);\n}\n.mga-metric:last-child { border-right: none; }\n.mga-metric-val {\n font-family: 'Montserrat', sans-serif;\n font-size: clamp(17px, 2.2vw, 22px);\n font-weight: 800;\n color: var(--gold);\n line-height: 1;\n margin-bottom: 4px;\n}\n.mga-metric-lbl {\n font-size: 10px;\n font-weight: 500;\n color: var(--text-3);\n line-height: 1.4;\n text-transform: uppercase;\n letter-spacing: .04em;\n}\n\n\/* \u2500\u2500 PILLS \u2500\u2500 *\/\n.mga-pills {\n display: flex;\n flex-wrap: wrap;\n gap: 7px;\n margin-bottom: 28px;\n position: relative; z-index: 1;\n}\n.mga-pill {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n background: rgba(255,255,255,.04);\n border: 1px solid var(--border);\n border-radius: 20px;\n padding: 5px 11px;\n font-size: 11px;\n font-weight: 500;\n color: rgba(255,255,255,.6);\n white-space: nowrap;\n transition: border-color .2s, color .2s;\n}\n.mga-pill:hover { border-color: var(--border-gold); color: var(--gold); }\n.mga-pill::before {\n content: '';\n width: 4px; height: 4px;\n background: var(--gold2);\n border-radius: 50%;\n flex-shrink: 0;\n}\n\n\/* \u2500\u2500 ACTIONS \u2500\u2500 *\/\n.mga-actions {\n display: flex;\n gap: 16px;\n align-items: center;\n flex-wrap: wrap;\n position: relative; z-index: 1;\n}\n\n\/* \u2500\u2500 PRIMARY BUTTON \u2500\u2500 *\/\n.mga-cta {\n --btn-h: 50px;\n --r: 28px;\n --circ: 38px;\n --off: 6px;\n --spd: 0.42s;\n --ease: cubic-bezier(0.4,0,0.15,1);\n position: relative;\n display: inline-flex;\n align-items: center;\n height: var(--btn-h);\n padding: 0 calc(var(--circ) + var(--off) + 14px) 0 26px;\n border: 2px solid rgba(242,184,57,.2);\n border-radius: var(--r);\n background: #fef4ee;\n cursor: pointer;\n text-decoration: none;\n overflow: hidden;\n font-family: 'DM Sans', sans-serif;\n transition: border-color var(--spd) var(--ease), box-shadow var(--spd) var(--ease);\n -webkit-tap-highlight-color: transparent;\n}\n.mga-cta::before {\n content: '';\n position: absolute;\n right: calc(var(--off) + var(--circ)\/2);\n top: 50%;\n width: var(--circ); height: var(--circ);\n background: var(--gold);\n border-radius: 50%;\n transform: translate(50%,-50%) scale(1);\n transition: transform var(--spd) var(--ease);\n z-index: 1;\n pointer-events: none;\n}\n.mga-cta:hover::before { transform: translate(50%,-50%) scale(9); }\n.mga-cta:hover {\n border-color: var(--gold);\n box-shadow: 0 8px 28px rgba(242,184,57,.28), 0 2px 8px rgba(0,0,0,.18);\n}\n.mga-cta__text {\n position: relative; z-index: 2;\n font-size: 14px; font-weight: 600;\n color: #1b2a4a;\n white-space: nowrap;\n transition: color var(--spd) var(--ease);\n pointer-events: none;\n}\n.mga-cta:hover .mga-cta__text { color: #0f1e3c; }\n.mga-cta__arrow {\n position: absolute; z-index: 3;\n right: var(--off); top: 50%;\n transform: translateY(-50%);\n width: var(--circ); height: var(--circ);\n border-radius: 50%;\n background: var(--gold);\n display: flex; align-items: center; justify-content: center;\n transition: background var(--spd) var(--ease);\n pointer-events: none;\n}\n.mga-cta:hover .mga-cta__arrow { background: transparent; }\n.mga-cta__arrow svg {\n width: 17px; height: 17px;\n stroke: #1b2a4a; stroke-width: 2.5;\n fill: none; stroke-linecap: round; stroke-linejoin: round;\n transition: transform var(--spd) var(--ease);\n}\n.mga-cta:hover .mga-cta__arrow svg { transform: translateX(3px); }\n@media (hover: none) {\n .mga-cta:active::before { transform: translate(50%,-50%) scale(9); }\n .mga-cta:active { border-color: var(--gold); }\n .mga-cta:active .mga-cta__text { color: #0f1e3c; }\n .mga-cta:active .mga-cta__arrow { background: transparent; }\n}\n\n\/* \u2500\u2500 GHOST LINK \u2500\u2500 *\/\n.mga-link {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-family: 'DM Sans', sans-serif;\n font-size: 13px;\n font-weight: 500;\n color: var(--text-3);\n text-decoration: none;\n padding: 4px 0;\n border-bottom: 1px solid transparent;\n transition: color .2s, border-color .2s;\n white-space: nowrap;\n -webkit-tap-highlight-color: transparent;\n}\n.mga-link:hover { color: var(--gold); border-color: rgba(242,184,57,.5); }\n\n\/* \u2550\u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550\u2550 *\/\n@media (max-width: 700px) {\n .mga-card { padding: 28px 22px 26px; border-radius: 16px; }\n .mga-metrics { flex-wrap: wrap; }\n .mga-metric { flex: 1 1 45%; border-bottom: 1px solid var(--border); }\n .mga-metric:nth-child(3),\n .mga-metric:nth-child(4) { border-bottom: none; }\n}\n@media (max-width: 560px) {\n .mga-card { padding: 24px 16px 22px; }\n .mga-metric { flex: 1 1 44%; }\n .mga-metrics { border-radius: 10px; }\n .mga-actions { flex-direction: column; align-items: stretch; }\n .mga-cta { justify-content: center; width: 100%; }\n .mga-link { justify-content: center; width: 100%; padding: 8px 0; }\n .mga-pills { gap: 5px; }\n .mga-pill { font-size: 10px; padding: 4px 9px; }\n .mga-hook { font-size: 14px; padding-left: 12px; }\n .mga-solution { padding: 14px 15px; }\n}\n@media (max-width: 360px) {\n .mga-card { padding: 20px 13px 18px; }\n .mga-card h3 { font-size: 16px; }\n .mga-metric-val { font-size: 17px; }\n .mga-cta { --btn-h: 46px; --circ: 34px; }\n .mga-cta__text { font-size: 13px; }\n}\n@media (prefers-reduced-motion: reduce) {\n .mga-roi-dot { animation: none; }\n}\n<\/style>\n\n<div class=\"mga-card\">\n\n \n <div class=\"mga-roi\">\n <span class=\"mga-roi-dot\"><\/span>\n \u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432\n <\/div>\n\n \n <p class=\"mga-hook\">\n \u041f\u043e\u0447\u0435\u043c\u0443 \u043f\u0440\u0438 \u043f\u043e\u043b\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0422\u041a\u041f \u0432\u043e\u0432\u0440\u0435\u043c\u044f?\n <\/p>\n\n \n <h3>\n \u041d\u0430\u0439\u0434\u0451\u043c, \u0433\u0434\u0435 \u0432\u0430\u0448 \u0431\u0438\u0437\u043d\u0435\u0441<br>\n <span class=\"mga-gold-text\">\u0442\u0435\u0440\u044f\u0435\u0442 \u0447\u0430\u0441\u044b \u043d\u0430 \u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u0435<\/span>\n <\/h3>\n\n \n <div class=\"mga-solution\">\n <div class=\"mga-solution-label\">\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441<\/div>\n <ul class=\"mga-solution-list\">\n <li>\u0410\u0443\u0434\u0438\u0442 \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u0443\u0437\u043a\u0438\u0435 \u043c\u0435\u0441\u0442\u0430: \u0433\u0434\u0435 \u041a\u0414 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u0433\u0434\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u0442\u043e\u0440\u043c\u043e\u0437\u044f\u0442, \u0433\u0434\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u0442\u0440\u0430\u0442\u044f\u0442 \u0432\u0440\u0435\u043c\u044f \u0432\u043f\u0443\u0441\u0442\u0443\u044e<\/li>\n <li>\u0412\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0440\u0435\u0435\u0441\u0442\u0440 \u043f\u043e\u0442\u0435\u0440\u044c \u0432 \u0447\u0430\u0441\u0430\u0445 \u2014 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0446\u0438\u0444\u0440\u044b, \u043d\u0435 \u043e\u0431\u0449\u0438\u0435 \u0441\u043b\u043e\u0432\u0430<\/li>\n <li>\u0414\u043e\u0440\u043e\u0436\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u0430 \u0441 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430\u043c\u0438: \u0447\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441\u043d\u0430\u0447\u0430\u043b\u0430, \u0447\u0442\u043e\u0431\u044b \u0422\u041a\u041f \u0432\u044b\u0445\u043e\u0434\u0438\u043b\u0438 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0443\u0436\u0435 \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u043c\u0435\u0441\u044f\u0446<\/li>\n <li>\u0410\u0443\u0434\u0438\u0442 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0431\u0430\u0437\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430 MG-S001D \u2014 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e, \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c\u043e, \u0431\u0435\u0437 \u043b\u0438\u0448\u043d\u0438\u0445 \u0441\u043e\u0432\u0435\u0449\u0430\u043d\u0438\u0439<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"mga-metrics\">\n <div class=\"mga-metric\">\n <div class=\"mga-metric-val\">\u0434\u043e 40%<\/div>\n <div class=\"mga-metric-lbl\">\u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0442\u0435\u0440\u044c \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/div>\n <\/div>\n <div class=\"mga-metric\">\n <div class=\"mga-metric-val\">2\u20136 \u043d\u0435\u0434.<\/div>\n <div class=\"mga-metric-lbl\">\u0441\u0440\u043e\u043a \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0430\u0443\u0434\u0438\u0442\u0430<\/div>\n <\/div>\n <div class=\"mga-metric\">\n <div class=\"mga-metric-val\">8<\/div>\n <div class=\"mga-metric-lbl\">\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0430\u043d\u0430\u043b\u0438\u0437\u0430<\/div>\n <\/div>\n <div class=\"mga-metric\">\n <div class=\"mga-metric-val\">90%<\/div>\n <div class=\"mga-metric-lbl\">\u0442\u0438\u043f\u043e\u0432\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0432\u044b\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"mga-pills\">\n <span class=\"mga-pill\">\u0410\u0443\u0434\u0438\u0442 \u041a\u0414, CAD, PDM \u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432<\/span>\n <span class=\"mga-pill\">\u041a\u0430\u0440\u0442\u0430 \u0437\u0440\u0435\u043b\u043e\u0441\u0442\u0438 0\u20135<\/span>\n <span class=\"mga-pill\">\u0420\u0435\u0435\u0441\u0442\u0440 \u043f\u043e\u0442\u0435\u0440\u044c \u0432 \u0447\u0430\u0441\u0430\u0445<\/span>\n <span class=\"mga-pill\">\u0414\u043e\u0440\u043e\u0436\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439<\/span>\n <span class=\"mga-pill\">\u0410\u0443\u0434\u0438\u0442 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0431\u0430\u0437\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430 MG-S001D<\/span>\n <\/div>\n\n \n <div class=\"mga-actions\">\n <a class=\"mga-cta\"\n href=\"https:\/\/n8n.mechanogurus.ru\/webhook\/2948d681-1b7a-4b6c-947e-783005ac2f47\/chat\"\n target=\"_blank\" rel=\"noopener\">\n <span class=\"mga-cta__text\">\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0437\u0430\u044f\u0432\u043a\u0443<\/span>\n <span class=\"mga-cta__arrow\">\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"13 6 19 12 13 18\"\/><\/svg>\n <\/span>\n <\/a>\n <a class=\"mga-link\"\n href=\"https:\/\/mechanogurus.ru\/?page_id=506\"\n rel=\"noopener\">\n \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u0443\u0441\u043b\u0443\u0433\u0435 \u2192\n <\/a>\n <\/div>\n\n<\/div>\n<\/div>\n\n\n\n\n<div class=\"wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-center has-background-color has-text-color has-link-color has-system-font-font-family has-large-font-size wp-elements-87af1e0f8b98a18229425af16a627326\" style=\"font-style:normal;font-weight:400\"><strong><strong>\u041a\u0430\u043a \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c?<\/strong><\/strong><\/h2>\n\n\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* \u2705 Scoped reset \u2014 does NOT leak into WordPress *\/\n.mg-workflow,\n.mg-workflow *,\n.mg-workflow *::before,\n.mg-workflow *::after {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n\/* \u2705 NO body\/html rules \u2014 inherits WP theme *\/\n.mg-workflow {\n \/* CSS Variables scoped to .mg-workflow *\/\n --line-bg: #1e2530;\n --text: #e9edf5;\n --muted: #a8b2c1;\n --card-bg: rgba(255,255,255,0.03);\n --card-border: 1px solid rgba(255,255,255,0.08);\n --accent-orange: #ff6b35;\n --accent-yellow: #f7931e;\n --accent-green: #9fe870;\n --glow-orange: rgba(255,107,53,0.6);\n --glow-green: rgba(159,232,112,0.6);\n --timeline-center: 50%;\n --rail-width: 6px;\n --dot-size: 20px;\n --endpoint-size: 32px;\n --card-gap: 60px;\n --card-max-width: 920px;\n\n position: relative;\n z-index: 1;\n color: var(--text);\n font-family: \"Manrope\", \"Segoe UI\", sans-serif;\n -webkit-font-smoothing: antialiased;\n \n \/* \u2705 Header method: max-width + margin:auto + padding for edge gap *\/\n max-width: 1400px;\n margin: 0 auto;\n padding: clamp(2.5rem, 4vw, 3.5rem) 25px clamp(3.5rem, 5vw, 5rem);\n}\n\n.mg-workflow .timeline {\n position: relative;\n max-width: 1360px;\n margin: 0 auto;\n overflow: visible;\n}\n\n\/* \u2500\u2500 Rail \u2500\u2500 *\/\n.mg-workflow .rail-container {\n position: absolute;\n top: 0;\n left: var(--timeline-center);\n width: var(--rail-width);\n height: 100%;\n transform: translateX(-50%);\n pointer-events: none;\n z-index: 0;\n}\n\n.mg-workflow .rail {\n position: absolute;\n top: calc(var(--endpoint-size) \/ 2 + 35px);\n bottom: calc(var(--endpoint-size) \/ 2 + 35px);\n left: 0;\n width: 100%;\n background: var(--line-bg);\n border-radius: var(--rail-width);\n}\n\n.mg-workflow .rail-progress {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 0%;\n background: linear-gradient(180deg, #ff6b35 0%, #f7931e 50%, #9fe870 100%);\n border-radius: var(--rail-width);\n transition: height 0.05s linear;\n}\n\n.mg-workflow .rail-glow {\n position: absolute;\n left: 50%;\n top: 0%;\n transform: translate(-50%, -50%);\n width: 50px;\n height: 50px;\n background: radial-gradient(circle, var(--glow-orange) 0%, transparent 70%);\n border-radius: 50%;\n opacity: 0.9;\n pointer-events: none;\n transition: top 0.05s linear;\n}\n\n\/* \u2500\u2500 Endpoints \u2500\u2500 *\/\n.mg-workflow .endpoint {\n position: relative;\n display: flex;\n align-items: center;\n height: 70px;\n z-index: 5;\n}\n\n.mg-workflow .endpoint-circle {\n position: absolute;\n left: var(--timeline-center);\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--endpoint-size);\n height: var(--endpoint-size);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.mg-workflow .endpoint-core {\n width: var(--endpoint-size);\n height: var(--endpoint-size);\n border-radius: 50%;\n background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);\n box-shadow: \n 0 0 20px var(--glow-orange), \n 0 0 40px var(--glow-orange),\n 0 0 60px rgba(255,107,53,0.3);\n z-index: 2;\n}\n\n.mg-workflow .endpoint.finish .endpoint-core {\n background: linear-gradient(135deg, #9fe870 0%, #7ed957 100%);\n box-shadow: \n 0 0 20px var(--glow-green), \n 0 0 40px var(--glow-green),\n 0 0 60px rgba(159,232,112,0.3);\n}\n\n.mg-workflow .endpoint-pulse {\n position: absolute;\n width: var(--endpoint-size);\n height: var(--endpoint-size);\n border-radius: 50%;\n border: 2px solid var(--accent-orange);\n animation: mg-wf-pulse 2s ease-out infinite;\n}\n\n.mg-workflow .endpoint.finish .endpoint-pulse { border-color: var(--accent-green); }\n\n@keyframes mg-wf-pulse {\n 0% { transform: scale(1); opacity: 1; }\n 100% { transform: scale(2.5); opacity: 0; }\n}\n\n.mg-workflow .endpoint-label {\n position: absolute;\n font-size: 14px;\n font-weight: 800;\n letter-spacing: 3px;\n white-space: nowrap;\n}\n\n.mg-workflow .endpoint.start .endpoint-label {\n left: calc(var(--timeline-center) + var(--endpoint-size) \/ 2 + 20px);\n color: var(--accent-orange);\n text-shadow: 0 0 20px var(--glow-orange);\n}\n\n.mg-workflow .endpoint.finish .endpoint-label {\n right: calc(100% - var(--timeline-center) + var(--endpoint-size) \/ 2 + 20px);\n color: var(--accent-green);\n text-shadow: 0 0 20px var(--glow-green);\n}\n\n\/* \u2500\u2500 Timeline items \u2500\u2500 *\/\n.mg-workflow .item {\n position: relative;\n width: 100%;\n padding: 24px 0;\n display: flex;\n opacity: 0;\n transform: translateY(40px);\n transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),\n transform 0.6s cubic-bezier(0.4,0,0.2,1);\n}\n\n.mg-workflow .item.visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n.mg-workflow .item.left {\n justify-content: flex-start;\n padding-right: calc(var(--timeline-center) + var(--card-gap));\n}\n\n.mg-workflow .item.right {\n justify-content: flex-end;\n padding-left: calc(var(--timeline-center) + var(--card-gap));\n}\n\n\/* \u2500\u2500 Dots \u2500\u2500 *\/\n.mg-workflow .dot {\n position: absolute;\n left: var(--timeline-center);\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--dot-size);\n height: var(--dot-size);\n z-index: 5;\n}\n\n.mg-workflow .dot-core {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: var(--dot-size);\n height: var(--dot-size);\n border-radius: 50%;\n background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);\n box-shadow: 0 0 15px var(--glow-orange);\n transition: all 0.4s cubic-bezier(0.4,0,0.2,1);\n}\n\n.mg-workflow .dot-ring {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: calc(var(--dot-size) + 16px);\n height: calc(var(--dot-size) + 16px);\n border-radius: 50%;\n border: 2px solid rgba(255,107,53,0.3);\n opacity: 0;\n transition: all 0.4s ease;\n}\n\n.mg-workflow .item.active .dot-core {\n width: calc(var(--dot-size) + 6px);\n height: calc(var(--dot-size) + 6px);\n background: linear-gradient(135deg, #f7931e 0%, #9fe870 100%);\n box-shadow: \n 0 0 25px var(--glow-orange), \n 0 0 50px var(--glow-orange);\n}\n\n.mg-workflow .item.active .dot-ring {\n opacity: 1;\n border-color: rgba(247,147,30,0.6);\n animation: mg-wf-dot-pulse 1.5s ease-out infinite;\n}\n\n@keyframes mg-wf-dot-pulse {\n 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }\n 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }\n}\n\n\/* \u2500\u2500 Cards \u2500\u2500 *\/\n.mg-workflow .card {\n background: var(--card-bg);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n border-radius: 20px;\n padding: 28px 32px;\n box-shadow: 0 4px 30px rgba(0,0,0,0.3);\n border: var(--card-border);\n max-width: var(--card-max-width);\n width: 100%;\n position: relative;\n overflow: hidden;\n transition: box-shadow 0.3s ease, border-color 0.3s ease;\n}\n\n.mg-workflow .card::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(255,107,53,0.4), transparent);\n opacity: 0;\n transition: opacity 0.4s ease;\n}\n\n.mg-workflow .item.active .card::before { opacity: 1; }\n\n.mg-workflow .card:hover {\n box-shadow: 0 8px 50px rgba(255,107,53,0.15);\n border-color: rgba(255,107,53,0.2);\n}\n\n.mg-workflow .step-number {\n position: absolute;\n top: 12px;\n right: 16px;\n font-size: 12px;\n font-weight: 800;\n color: rgba(255,107,53,0.4);\n letter-spacing: 1px;\n}\n\n.mg-workflow .title {\n margin: 2px 0 8px;\n font-weight: 700;\n font-size: 17px;\n color: #fff;\n line-height: 1.3;\n}\n\n.mg-workflow .desc {\n color: var(--muted);\n line-height: 1.55;\n font-size: 14px;\n}\n\n\/* \u2500\u2500 In-card button \u2500\u2500 *\/\n.mg-workflow .card-btn-wrap { margin-top: 18px; }\n\n.mg-workflow .card-btn {\n --mg-gold: #F2B839;\n --mg-navy-deep: #0F1E3C;\n --btn-height: 46px;\n --btn-radius: 26px;\n --circle-size: 34px;\n --circle-offset: 6px;\n --speed: 0.45s;\n --ease: cubic-bezier(0.4,0,0.15,1);\n\n position: relative;\n display: inline-flex;\n align-items: center;\n height: var(--btn-height);\n padding: 0 calc(var(--circle-size) + var(--circle-offset) + 12px) 0 22px;\n border: 2px solid rgba(242,184,57,0.25);\n border-radius: var(--btn-radius);\n background: rgba(242,184,57,0.08);\n cursor: pointer;\n text-decoration: none;\n overflow: hidden;\n font-family: 'Manrope', sans-serif;\n transition:\n border-color var(--speed) var(--ease),\n box-shadow var(--speed) var(--ease);\n -webkit-tap-highlight-color: transparent;\n}\n\n.mg-workflow .card-btn::before {\n content: '';\n position: absolute;\n right: calc(var(--circle-offset) + var(--circle-size) \/ 2);\n top: 50%;\n width: var(--circle-size);\n height: var(--circle-size);\n background: var(--mg-gold);\n border-radius: 50%;\n transform: translate(50%, -50%) scale(1);\n transition: transform var(--speed) var(--ease);\n z-index: 1;\n pointer-events: none;\n}\n\n.mg-workflow .card-btn:hover::before { transform: translate(50%, -50%) scale(8); }\n.mg-workflow .card-btn:hover {\n border-color: var(--mg-gold);\n box-shadow: 0 6px 24px rgba(242,184,57,0.3);\n}\n\n.mg-workflow .card-btn__text {\n position: relative;\n z-index: 2;\n font-size: 14px;\n font-weight: 600;\n color: #f7931e;\n white-space: nowrap;\n letter-spacing: -0.01em;\n line-height: 1;\n transition: color var(--speed) var(--ease);\n pointer-events: none;\n}\n\n.mg-workflow .card-btn:hover .card-btn__text { color: var(--mg-navy-deep); }\n\n.mg-workflow .card-btn__arrow {\n position: absolute;\n z-index: 3;\n right: var(--circle-offset);\n top: 50%;\n transform: translateY(-50%);\n width: var(--circle-size);\n height: var(--circle-size);\n border-radius: 50%;\n background: var(--mg-gold);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background var(--speed) var(--ease);\n pointer-events: none;\n}\n\n.mg-workflow .card-btn:hover .card-btn__arrow { background: transparent; }\n\n.mg-workflow .card-btn__arrow svg {\n width: 15px;\n height: 15px;\n stroke: var(--mg-navy-deep);\n stroke-width: 2.5;\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n transition: transform var(--speed) var(--ease);\n}\n\n.mg-workflow .card-btn:hover .card-btn__arrow svg { transform: translateX(3px); }\n\n\/* \u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550 *\/\n@media (max-width: 1200px) {\n .mg-workflow { --card-max-width: 680px; }\n}\n\n@media (max-width: 900px) {\n .mg-workflow {\n --timeline-center: 30px;\n --dot-size: 18px;\n --endpoint-size: 28px;\n --card-gap: 40px;\n --card-max-width: 100%;\n padding-left: 16px;\n padding-right: 16px;\n }\n .mg-workflow .item.left,\n .mg-workflow .item.right {\n justify-content: flex-start;\n padding-left: calc(var(--timeline-center) + var(--card-gap));\n padding-right: 0;\n }\n .mg-workflow .card { max-width: 100%; }\n .mg-workflow .endpoint.start .endpoint-label,\n .mg-workflow .endpoint.finish .endpoint-label {\n left: calc(var(--timeline-center) + var(--endpoint-size) \/ 2 + 16px);\n right: auto;\n }\n}\n\n@media (max-width: 768px) {\n .mg-workflow { padding-left: 12px; padding-right: 12px; }\n}\n\n@media (max-width: 600px) {\n .mg-workflow {\n --timeline-center: 24px;\n --rail-width: 4px;\n --dot-size: 16px;\n --endpoint-size: 24px;\n --card-gap: 30px;\n padding-top: clamp(1.875rem, 3vw, 2.5rem);\n padding-bottom: clamp(2.5rem, 4vw, 3.75rem);\n }\n .mg-workflow .item { padding: 18px 0; }\n .mg-workflow .item.left,\n .mg-workflow .item.right {\n padding-left: calc(var(--timeline-center) + var(--card-gap));\n padding-right: 8px;\n }\n .mg-workflow .card {\n padding: 18px;\n border-radius: 16px;\n }\n .mg-workflow .title { font-size: 15px; }\n .mg-workflow .desc { font-size: 13px; }\n .mg-workflow .step-number { font-size: 10px; }\n .mg-workflow .endpoint-label {\n font-size: 11px;\n letter-spacing: 2px;\n }\n .mg-workflow .endpoint.start .endpoint-label,\n .mg-workflow .endpoint.finish .endpoint-label {\n left: calc(var(--timeline-center) + var(--endpoint-size) \/ 2 + 12px);\n right: auto;\n }\n .mg-workflow .endpoint { height: 55px; }\n .mg-workflow .rail {\n top: calc(var(--endpoint-size) \/ 2 + 27px);\n bottom: calc(var(--endpoint-size) \/ 2 + 27px);\n }\n}\n\n@media (max-width: 480px) {\n .mg-workflow { padding-left: 8px; padding-right: 8px; }\n}\n\n@media (max-width: 380px) {\n .mg-workflow {\n --timeline-center: 20px;\n --dot-size: 14px;\n --endpoint-size: 20px;\n --card-gap: 24px;\n }\n .mg-workflow .item.left,\n .mg-workflow .item.right {\n padding-left: calc(var(--timeline-center) + var(--card-gap));\n }\n .mg-workflow .card { padding: 14px; }\n .mg-workflow .title { font-size: 14px; }\n .mg-workflow .desc { font-size: 12px; }\n .mg-workflow .endpoint { height: 45px; }\n .mg-workflow .rail {\n top: calc(var(--endpoint-size) \/ 2 + 22px);\n bottom: calc(var(--endpoint-size) \/ 2 + 22px);\n }\n}\n\n@media (hover: none) {\n .mg-workflow .card-btn:active::before { transform: translate(50%, -50%) scale(8); }\n .mg-workflow .card-btn:active { border-color: var(--mg-gold); }\n .mg-workflow .card-btn:active .card-btn__text { color: var(--mg-navy-deep); }\n .mg-workflow .card-btn:active .card-btn__arrow { background: transparent; }\n .mg-workflow .card-btn:active .card-btn__arrow svg { transform: translateX(3px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .mg-workflow .item,\n .mg-workflow .card,\n .mg-workflow .dot-core,\n .mg-workflow .rail-progress,\n .mg-workflow .rail-glow {\n transition: none;\n }\n .mg-workflow .endpoint-pulse,\n .mg-workflow .item.active .dot-ring {\n animation: none;\n }\n .mg-workflow .item {\n opacity: 1;\n transform: none;\n }\n}\n\n@media (max-height: 500px) and (orientation: landscape) {\n .mg-workflow .item { padding: 14px 0; }\n .mg-workflow .endpoint { height: 40px; }\n}\n<\/style>\n\n<div class=\"mg-workflow\">\n <div class=\"timeline\" id=\"mgWfTimeline\">\n \n <div class=\"endpoint start\" id=\"mgWfTimelineStart\">\n <div class=\"endpoint-circle\">\n <div class=\"endpoint-pulse\"><\/div>\n <div class=\"endpoint-core\"><\/div>\n <\/div>\n <span class=\"endpoint-label\">\u0421\u0422\u0410\u0420\u0422<\/span>\n <\/div>\n\n <div class=\"rail-container\">\n <div class=\"rail\" aria-hidden=\"true\">\n <div class=\"rail-progress\"><\/div>\n <div class=\"rail-glow\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"item right\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">01<\/div>\n <div>\n <div class=\"title\">\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f<\/div>\n <p class=\"desc\">\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0439\u0442\u0435\u0441\u044c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u043e \u0432\u0441\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b.<\/p>\n <div class=\"card-btn-wrap\">\n <a href=\"https:\/\/n8n.mechanogurus.ru\/form\/105adc81-c50a-40f0-ab54-f0b65857d49e\" class=\"card-btn\" target=\"_blank\" rel=\"noopener noreferrer\">\n <span class=\"card-btn__text\">\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f<\/span>\n <span class=\"card-btn__arrow\">\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"13 6 19 12 13 18\"\/><\/svg>\n <\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item left\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">02<\/div>\n <div>\n <div class=\"title\">\u041e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 LAKI<\/div>\n <p class=\"desc\">\u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0435 \u0441 \u043d\u0430\u0448\u0438\u043c \u0418\u0418-\u0430\u0441\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043e\u043c LAKI \u2014 \u043e\u043d \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0437\u0430\u044f\u0432\u043a\u0443 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438 \u043e\u0442\u0432\u0435\u0442\u0438\u0442 \u043d\u0430 \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0422\u0417, \u044d\u0442\u043e \u043d\u0430\u043c \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0436\u0435\u0442!<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item right\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">03<\/div>\n <div>\n <div class=\"title\">\u041f\u0430\u0440\u0441\u0438\u043d\u0433 \u0422\u0417<\/div>\n <p class=\"desc\">\u0412\u0430\u0448\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f (\u043f\u0430\u0440\u0441\u0438\u043d\u0433) LAKI. \u041f\u0430\u0440\u0441\u0438\u043d\u0433 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043d\u0430\u0448\u0438\u043c \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0430\u043c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0432 \u0441\u0443\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item left\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">04<\/div>\n <div>\n <div class=\"title\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 WBS<\/div>\n <p class=\"desc\">LAKI \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442 (WBS) \u0438\u0437 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u0443\u043b\u043e\u0436\u0438\u0442\u044c\u0441\u044f \u0432 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0440\u043e\u043a\u0438.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item right\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">05<\/div>\n <div>\n <div class=\"title\">\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u0430\u044f\u0432\u043a\u0443<\/div>\n <p class=\"desc\">\u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0432\u0430\u0448\u0443 \u0437\u0430\u044f\u0432\u043a\u0443, \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e \u0440\u0435\u0448\u0430\u0435\u0442 \u0432\u0430\u0448 \u0432\u043e\u043f\u0440\u043e\u0441.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item left\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">06<\/div>\n <div>\n <div class=\"title\">\u042d\u0441\u043a\u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/div>\n <p class=\"desc\">\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u0441\u043a\u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item right\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">07<\/div>\n <div>\n <div class=\"title\">\u041e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438<\/div>\n <p class=\"desc\">\u041e\u0431\u0441\u0443\u0436\u0434\u0430\u0435\u043c \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WBS \u2014 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0435 \u0446\u0435\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0435\u0437 \u0441\u043a\u0440\u044b\u0442\u044b\u0445 \u043f\u043b\u0430\u0442\u0435\u0436\u0435\u0439.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item left\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">08<\/div>\n <div>\n <div class=\"title\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0430<\/div>\n <p class=\"desc\">\u0415\u0441\u043b\u0438 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u0430\u0441 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044e \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0430 \u0438 \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u0430.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item right\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">09<\/div>\n <div>\n <div class=\"title\">\u0421\u0442\u0430\u0440\u0442 \u0440\u0430\u0431\u043e\u0442\u044b & \u0414\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u043e\u0440\u0442\u0430\u043b\u0443<\/div>\n <p class=\"desc\">\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430! \u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0451\u043d\u043d\u043e\u043c\u0443 \u043f\u043b\u0430\u043d\u0443. \u0412\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u043f\u043e\u043b\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043f\u043e\u0440\u0442\u0430\u043b\u0443, \u0433\u0434\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item left\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">10<\/div>\n <div>\n <div class=\"title\">\u0421\u0434\u0430\u0447\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/div>\n <p class=\"desc\">\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0443 \u0441 \u043f\u043e\u043b\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"endpoint finish\" id=\"mgWfTimelineFinish\">\n <div class=\"endpoint-circle\">\n <div class=\"endpoint-pulse\"><\/div>\n <div class=\"endpoint-core\"><\/div>\n <\/div>\n <span class=\"endpoint-label\">\u0424\u0418\u041d\u0418\u0428<\/span>\n <\/div>\n\n <\/div>\n<\/div>\n\n<script>\n(function() {\n 'use strict';\n \n var timeline = document.getElementById('mgWfTimeline');\n var items = document.querySelectorAll('.mg-workflow .item[data-animate]');\n var rail = document.querySelector('.mg-workflow .rail');\n var railProgress = document.querySelector('.mg-workflow .rail-progress');\n var railGlow = document.querySelector('.mg-workflow .rail-glow');\n \n if (!timeline || !items.length || !rail) return;\n \n var visibilityObserver = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting && entry.intersectionRatio > 0.15) {\n entry.target.classList.add('visible');\n }\n });\n }, {\n root: null,\n rootMargin: '-5% 0px -5% 0px',\n threshold: [0, 0.15, 0.3]\n });\n \n var activeObserver = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting && entry.intersectionRatio > 0.4) {\n entry.target.classList.add('active');\n } else {\n entry.target.classList.remove('active');\n }\n });\n }, {\n root: null,\n rootMargin: '-35% 0px -35% 0px',\n threshold: [0, 0.4, 0.6, 1]\n });\n \n items.forEach(function(item) {\n visibilityObserver.observe(item);\n activeObserver.observe(item);\n });\n \n var currentProgress = 0;\n var targetProgress = 0;\n var rafId = null;\n \n function lerp(start, end, factor) { return start + (end - start) * factor; }\n \n function calculateProgress() {\n var railRect = rail.getBoundingClientRect();\n var viewHeight = window.innerHeight;\n var scrollCenter = viewHeight * 0.5;\n var railTop = railRect.top;\n var railHeight = railRect.height;\n var progressPoint = scrollCenter - railTop;\n return Math.min(Math.max(progressPoint \/ railHeight, 0), 1) * 100;\n }\n \n function animate() {\n var diff = Math.abs(currentProgress - targetProgress);\n if (diff > 0.1) {\n currentProgress = lerp(currentProgress, targetProgress, 0.12);\n updateRailVisuals(currentProgress);\n rafId = requestAnimationFrame(animate);\n } else {\n currentProgress = targetProgress;\n updateRailVisuals(targetProgress);\n rafId = null;\n }\n }\n \n function updateRailVisuals(progress) {\n railProgress.style.height = progress + '%';\n railGlow.style.top = progress + '%';\n \n if (progress < 50) {\n railGlow.style.background = 'radial-gradient(circle, rgba(255,107,53,0.8) 0%, transparent 70%)';\n } else if (progress < 80) {\n railGlow.style.background = 'radial-gradient(circle, rgba(247,147,30,0.8) 0%, transparent 70%)';\n } else {\n railGlow.style.background = 'radial-gradient(circle, rgba(159,232,112,0.8) 0%, transparent 70%)';\n }\n }\n \n function onScroll() {\n targetProgress = calculateProgress();\n if (!rafId) {\n rafId = requestAnimationFrame(animate);\n }\n }\n \n var ticking = false;\n function throttledScroll() {\n if (!ticking) {\n ticking = true;\n requestAnimationFrame(function() {\n onScroll();\n ticking = false;\n });\n }\n }\n \n window.addEventListener('scroll', throttledScroll, { passive: true });\n window.addEventListener('resize', throttledScroll, { passive: true });\n window.addEventListener('orientationchange', function() { setTimeout(throttledScroll, 100); });\n \n targetProgress = calculateProgress();\n currentProgress = targetProgress;\n updateRailVisuals(currentProgress);\n \n items.forEach(function(item) {\n var rect = item.getBoundingClientRect();\n if (rect.top < window.innerHeight * 0.85) {\n item.classList.add('visible');\n }\n });\n})();\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading has-text-align-center has-background-color has-text-color has-link-color has-system-font-font-family has-large-font-size wp-elements-f796da269f539fe2cf75a4b013282add\" style=\"font-style:normal;font-weight:400\"><strong><strong>\u041d\u0430\u0448\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u044b<\/strong><\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>\u041d\u0430\u0448\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u2014 Mechanogurus<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Onest:wght@400;500;600;700&family=Unbounded:wght@400;500;700&display=swap');\n\n :root {\n --mg-orange: #F2B839;\n --mg-deep: #E1830F;\n --mg-dark: #0D0D0D;\n --mg-darker: #080808;\n --mg-surface: #141414;\n --mg-border: rgba(242, 184, 57, 0.12);\n --mg-text: #e8e8e8;\n --mg-text-dim: #888888;\n --mg-glow: rgba(242, 184, 57, 0.08);\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n color: var(--mg-text);\n font-family: 'Onest', sans-serif;\n overflow-x: hidden;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n OUR CLIENTS \u2014 INFINITE MARQUEE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .mg-clients {\n padding: 24px 0;\n position: relative;\n overflow: hidden;\n }\n\n\n\n .mg-clients-inner {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n z-index: 1;\n }\n\n \/* \u2500\u2500 Header \u2500\u2500 *\/\n .mg-clients-header {\n text-align: center;\n margin-bottom: 56px;\n }\n\n .mg-clients-tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 18px;\n border: 1px solid var(--mg-border);\n border-radius: 100px;\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--mg-text-dim);\n margin-bottom: 24px;\n }\n\n .mg-clients-tag-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--mg-orange);\n animation: mgPulse 2s ease-in-out infinite;\n }\n\n @keyframes mgPulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.3; }\n }\n\n .mg-clients-header h2 {\n font-family: 'Unbounded', sans-serif;\n font-size: clamp(28px, 4vw, 44px);\n font-weight: 700;\n color: var(--mg-text);\n margin-bottom: 16px;\n line-height: 1.15;\n }\n\n .mg-clients-header h2 span {\n background: linear-gradient(135deg, var(--mg-orange), var(--mg-deep));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .mg-clients-header p {\n font-size: 15px;\n color: var(--mg-text-dim);\n max-width: 460px;\n margin: 0 auto;\n line-height: 1.65;\n }\n\n \/* \u2500\u2500 Marquee \u2500\u2500 *\/\n .mg-marquee-wrap {\n position: relative;\n overflow: hidden;\n padding: 12px 0;\n }\n\n \/* Edge fade masks *\/\n .mg-marquee-wrap::before,\n .mg-marquee-wrap::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n width: 140px;\n z-index: 2;\n pointer-events: none;\n }\n .mg-marquee-wrap::before {\n left: 0;\n background: linear-gradient(to right, var(--mg-darker), transparent);\n }\n .mg-marquee-wrap::after {\n right: 0;\n background: linear-gradient(to left, var(--mg-darker), transparent);\n }\n\n .mg-marquee-track {\n display: flex;\n gap: 40px;\n width: max-content;\n animation: mgMarquee 35s linear infinite;\n }\n .mg-marquee-track:hover {\n animation-play-state: paused;\n }\n\n @keyframes mgMarquee {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n }\n\n \/* \u2500\u2500 Logo cards \u2500\u2500 *\/\n .mg-logo-card {\n flex-shrink: 0;\n width: 190px;\n height: 104px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px 28px;\n background: var(--mg-surface);\n border: 1px solid var(--mg-border);\n border-radius: 14px;\n transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n cursor: pointer;\n position: relative;\n overflow: hidden;\n }\n\n \/* Bottom glow on hover *\/\n .mg-logo-card::before {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse 80% 60% at 50% 110%, var(--mg-glow), transparent 70%);\n opacity: 0;\n transition: opacity 0.45s ease;\n }\n\n \/* Top-edge highlight line *\/\n .mg-logo-card::after {\n content: '';\n position: absolute;\n top: 0;\n left: 20%;\n width: 60%;\n height: 1px;\n background: linear-gradient(to right, transparent, rgba(242, 184, 57, 0.3), transparent);\n opacity: 0;\n transition: opacity 0.45s ease;\n }\n\n .mg-logo-card:hover {\n border-color: rgba(242, 184, 57, 0.28);\n transform: translateY(-5px);\n box-shadow:\n 0 8px 24px rgba(0, 0, 0, 0.3),\n 0 12px 48px rgba(242, 184, 57, 0.06);\n }\n .mg-logo-card:hover::before { opacity: 1; }\n .mg-logo-card:hover::after { opacity: 1; }\n\n .mg-logo-card img {\n max-width: 100%;\n max-height: 60px;\n object-fit: contain;\n filter: grayscale(100%) brightness(1.8);\n opacity: 0.5;\n transition: all 0.45s ease;\n position: relative;\n z-index: 1;\n }\n .mg-logo-card:hover img {\n filter: grayscale(0%) brightness(1);\n opacity: 1;\n }\n\n \/* \u2500\u2500 Bottom section \u2500\u2500 *\/\n .mg-clients-footer {\n margin-top: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 32px;\n }\n\n .mg-clients-line {\n flex: 1;\n max-width: 120px;\n height: 1px;\n background: linear-gradient(to right, transparent, var(--mg-border), transparent);\n }\n\n .mg-clients-count {\n font-size: 13px;\n color: var(--mg-text-dim);\n letter-spacing: 0.04em;\n white-space: nowrap;\n }\n .mg-clients-count strong {\n color: var(--mg-orange);\n font-weight: 700;\n font-size: 24px;\n margin-right: 6px;\n font-family: 'Unbounded', sans-serif;\n }\n\n \/* \u2550\u2550\u2550 Responsive \u2550\u2550\u2550 *\/\n @media (max-width: 768px) {\n .mg-clients { padding: 20px 0; }\n .mg-clients-inner { padding: 0 20px; }\n .mg-marquee-wrap::before,\n .mg-marquee-wrap::after { width: 60px; }\n .mg-logo-card { width: 150px; height: 86px; padding: 16px 20px; border-radius: 10px; }\n .mg-logo-card img { max-height: 48px; }\n .mg-marquee-track { gap: 28px; }\n .mg-clients-footer { gap: 20px; }\n .mg-clients-line { max-width: 60px; }\n }\n\n @media (max-width: 480px) {\n .mg-clients { padding: 16px 0; }\n .mg-clients-header { margin-bottom: 36px; }\n .mg-logo-card { width: 130px; height: 74px; padding: 14px 16px; }\n .mg-logo-card img { max-height: 40px; }\n .mg-marquee-track { gap: 20px; }\n .mg-clients-count strong { font-size: 20px; }\n }\n<\/style>\n<\/head>\n<body>\n\n\n<section class=\"mg-clients\">\n <div class=\"mg-clients-inner\">\n\n \n <div class=\"mg-marquee-wrap\">\n <div class=\"mg-marquee-track\">\n \n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/\u0420\u0423\u041c\u041e_logo.png\" alt=\"\u0420\u0423\u041c\u041e\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/ikudzo-430x320-1-e1751961567254.png\" alt=\"Ikudzo\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/SRZ_Icon.png\" alt=\"SRZ\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/Silowyje_maschiny.svg_.png\" alt=\"\u0421\u0438\u043b\u043e\u0432\u044b\u0435 \u041c\u0430\u0448\u0438\u043d\u044b\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/02\/NPM_Logo.png\" alt=\"NPM\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/AT-Gaz_logo_ru-scaled-e1752178495359.png\" alt=\"AT-\u0413\u0430\u0437\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/02\/SZD_Logo.png\" alt=\"SZD\" loading=\"lazy\">\n <\/div>\n\n \n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/\u0420\u0423\u041c\u041e_logo.png\" alt=\"\u0420\u0423\u041c\u041e\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/ikudzo-430x320-1-e1751961567254.png\" alt=\"Ikudzo\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/SRZ_Icon.png\" alt=\"SRZ\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/Silowyje_maschiny.svg_.png\" alt=\"\u0421\u0438\u043b\u043e\u0432\u044b\u0435 \u041c\u0430\u0448\u0438\u043d\u044b\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/02\/NPM_Logo.png\" alt=\"NPM\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/AT-Gaz_logo_ru-scaled-e1752178495359.png\" alt=\"AT-\u0413\u0430\u0437\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/02\/SZD_Logo.png\" alt=\"SZD\" loading=\"lazy\">\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Menu with Typewriter \u0414\u043b\u044f \u0432\u0441\u0435\u0445 \u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0443 IT \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0426\u0438\u0444\u0440\u043e\u0432\u0438\u0437\u0438\u0440\u0443\u0435\u043c, \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u0443\u0435\u043c, \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c Loading 3D model… \u041e\u0431\u0441\u0443\u0434\u0438\u043c ? \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0435 \u0431\u044e\u0440\u043e \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0439 \u044d\u043f\u043e\u0445\u0438 \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u0441 \u041a\u0414 \u041a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d \u2014 \u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u041a\u0414 \u0441\u0432\u043e\u0438\u043c\u0438 \u0441\u0438\u043b\u0430\u043c\u0438 \u043d\u0435 \u0432\u044b\u0439\u0434\u0435\u0442? \u0411\u0435\u0440\u0451\u043c \u0437\u0430\u0434\u0430\u0447\u0443 \u043e\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0434\u043e \u043f\u0443\u0441\u043a\u043e\u043d\u0430\u043b\u0430\u0434\u043a\u0438 \u0423\u0441\u043b\u0443\u0433\u0438 \u0413\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0438 \u0413\u0418\u041f \u2014 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u0432\u0430\u0448\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u041f\u0440\u0435\u0434\u043f\u0440\u043e\u0435\u043a\u0442\u043d\u044b\u0435 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wp-custom-template-home-page","meta":{"footnotes":""},"class_list":["post-2378","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages\/2378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2378"}],"version-history":[{"count":481,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages\/2378\/revisions"}],"predecessor-version":[{"id":4528,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages\/2378\/revisions\/4528"}],"wp:attachment":[{"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n\n \n \n Menu with Typewriter<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@700&family=DM+Sans:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\n <style>\n * {\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n }\n\n body {\n background-color: #1a1a1a;\n margin: 0;\n padding: 0;\n font-family: 'Roboto', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow-x: hidden;\n max-width: 100%;\n }\n\n .tw-block-wrapper {\n width: 100%;\n max-width: 100%;\n overflow-x: hidden;\n padding: 20px 20px 0 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .menu-container {\n text-align: center;\n margin: 10px auto 30px auto;\n font-family: 'Roboto', sans-serif;\n color: #FEF4EE;\n font-size: 14px;\n width: 100%;\n max-width: 1200px;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: 5px;\n padding: 0 10px;\n }\n\n .menu-link {\n color: #FEF4EE;\n text-decoration: none;\n transition: color 0.3s, text-decoration 0.3s;\n cursor: pointer;\n padding: 0 5px;\n position: relative;\n display: inline-block;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n\n .menu-link:not(:last-child)::after {\n content: \"\u25cf\";\n color: #FEF4EE;\n margin-left: 10px;\n margin-right: 5px;\n font-size: 1.2em;\n vertical-align: middle;\n opacity: 0.7;\n }\n\n .menu-link:hover { color: #FEF4EE; text-decoration: underline; }\n .menu-link:active { transform: translateY(1px); }\n .menu-link.active { color: #FEF4EE; font-weight: bold; text-decoration: none; }\n\n .typewriter-container {\n min-height: 150px;\n font-family: 'Roboto', sans-serif;\n color: #FEF4EE;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0 20px;\n transition: opacity 0.3s ease;\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n z-index: 2;\n }\n\n \/* \u2500\u2500 CTA Button \u2014 absolute overlay inside .model-container \u2500\u2500 *\/\n .mg-btn-wrap {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 10;\n pointer-events: auto;\n }\n\n .mg-cta {\n --mg-gold: #F2B839;\n --mg-navy: #1B2A4A;\n --mg-navy-deep: #0F1E3C;\n --mg-cream: #FEF4EE;\n --btn-height: 54px;\n --btn-radius: 30px;\n --circle-size: 40px;\n --circle-offset: 7px;\n --speed: 0.45s;\n --ease: cubic-bezier(0.4, 0, 0.15, 1);\n\n position: relative;\n display: inline-flex;\n align-items: center;\n height: var(--btn-height);\n padding: 0 calc(var(--circle-size) + var(--circle-offset) + 14px) 0 28px;\n border: 2px solid rgba(242, 184, 57, 0.15);\n border-radius: var(--btn-radius);\n background: var(--mg-cream);\n cursor: pointer;\n text-decoration: none;\n overflow: hidden;\n font-family: 'DM Sans', sans-serif;\n transition:\n border-color var(--speed) var(--ease),\n box-shadow var(--speed) var(--ease);\n -webkit-tap-highlight-color: transparent;\n }\n\n .mg-cta::before {\n content: '';\n position: absolute;\n right: calc(var(--circle-offset) + var(--circle-size) \/ 2);\n top: 50%;\n width: var(--circle-size);\n height: var(--circle-size);\n background: var(--mg-gold);\n border-radius: 50%;\n transform: translate(50%, -50%) scale(1);\n transition: transform var(--speed) var(--ease);\n z-index: 1;\n pointer-events: none;\n }\n\n .mg-cta:hover::before { transform: translate(50%, -50%) scale(8); }\n\n .mg-cta:hover {\n border-color: var(--mg-gold);\n box-shadow:\n 0 8px 32px rgba(242, 184, 57, 0.25),\n 0 2px 8px rgba(0, 0, 0, 0.2);\n }\n\n .mg-cta__text {\n position: relative;\n z-index: 2;\n font-size: 15px;\n font-weight: 500;\n color: var(--mg-navy);\n white-space: nowrap;\n letter-spacing: -0.01em;\n line-height: 1;\n transition: color var(--speed) var(--ease);\n pointer-events: none;\n }\n\n .mg-cta:hover .mg-cta__text { color: var(--mg-navy-deep); }\n\n .mg-cta__arrow {\n position: absolute;\n z-index: 3;\n right: var(--circle-offset);\n top: 50%;\n transform: translateY(-50%);\n width: var(--circle-size);\n height: var(--circle-size);\n border-radius: 50%;\n background: var(--mg-gold);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background var(--speed) var(--ease);\n pointer-events: none;\n }\n\n .mg-cta:hover .mg-cta__arrow { background: transparent; }\n\n .mg-cta__arrow svg {\n width: 18px;\n height: 18px;\n stroke: var(--mg-navy-deep);\n stroke-width: 2.5;\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n transition: transform var(--speed) var(--ease);\n }\n\n .mg-cta:hover .mg-cta__arrow svg { transform: translateX(4px); }\n .mg-cta:focus-visible { outline: 3px solid var(--mg-gold); outline-offset: 4px; }\n\n @media (hover: none) {\n .mg-cta:active::before { transform: translate(50%, -50%) scale(8); }\n .mg-cta:active {\n border-color: var(--mg-gold);\n box-shadow: 0 8px 32px rgba(242, 184, 57, 0.25), 0 2px 8px rgba(0, 0, 0, 0.2);\n }\n .mg-cta:active .mg-cta__text { color: var(--mg-navy-deep); }\n .mg-cta:active .mg-cta__arrow { background: transparent; }\n .mg-cta:active .mg-cta__arrow svg { transform: translateX(4px); }\n }\n \/* \u2500\u2500 end CTA \u2500\u2500 *\/\n\n .model-container {\n width: 100%;\n max-width: 1200px;\n height: clamp(250px, 45vw, 500px);\n margin: -90px auto 0;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1;\n }\n\n #canvas3d {\n width: 100%;\n height: 100%;\n display: block;\n outline: none;\n opacity: 0;\n transition: opacity 0.5s ease-in-out;\n }\n\n #canvas3d.loaded { opacity: 1; }\n\n .model-loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #FEF4EE;\n font-size: 14px;\n opacity: 0.7;\n pointer-events: none;\n }\n\n .model-loader.hidden { display: none; }\n\n .typewriter-heading {\n margin: 0;\n color: #FEF4EE;\n white-space: normal;\n word-wrap: break-word;\n overflow-wrap: break-word;\n hyphens: auto;\n text-align: center;\n font-weight: 700;\n font-family: 'Roboto', sans-serif;\n font-size: clamp(22px, 4.5vw, 48px);\n line-height: 1.25;\n transition: opacity 0.3s ease;\n width: 100%;\n max-width: 100%;\n padding: 0 10px;\n position: relative;\n display: block;\n margin-left: auto;\n margin-right: auto;\n box-sizing: border-box;\n }\n\n @media (hover: none) and (pointer: coarse) {\n .menu-link {\n padding: 8px 5px;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .menu-container {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 5px;\n }\n }\n\n @media (max-width: 374px) {\n .tw-block-wrapper { padding: 12px 8px 0 8px; }\n .menu-container { font-size: 12px; gap: 0 3px; padding: 0 5px; margin-bottom: 16px; }\n .menu-link { font-size: 12px; padding: 5px 2px; min-height: 36px; display: inline-flex; align-items: center; }\n .menu-link:not(:last-child)::after { margin-left: 4px; margin-right: 2px; font-size: 0.9em; }\n .typewriter-container { padding: 0 8px; min-height: 90px; }\n .typewriter-heading { font-size: clamp(16px, 6.5vw, 22px); line-height: 1.4; padding: 0 3px; }\n .mg-cta { --btn-height: 44px; --circle-size: 34px; --circle-offset: 5px; padding-left: 18px; }\n .mg-cta__text { font-size: 13px; }\n .model-container { height: clamp(200px, 60vw, 280px); margin-top: -20px; }\n }\n\n @media (max-width: 480px) {\n .tw-block-wrapper { padding: 14px 12px 0 12px; }\n .menu-container { font-size: 13px; margin-bottom: 20px; gap: 0 5px; padding: 0 5px; }\n .menu-link { padding: 6px 3px; min-height: 36px; font-size: 13px; }\n .menu-link:not(:last-child)::after { margin-left: 6px; margin-right: 3px; font-size: 1em; }\n .typewriter-container { min-height: 100px; padding: 0 10px; }\n .typewriter-heading { font-size: clamp(18px, 5.5vw, 28px); line-height: 1.35; padding: 0 5px; }\n .mg-cta { --btn-height: 48px; --circle-size: 36px; --circle-offset: 6px; padding-left: 22px; }\n .mg-cta__text { font-size: 14px; }\n .mg-cta__arrow svg { width: 16px; height: 16px; }\n .model-container { height: clamp(220px, 70vw, 350px); margin-top: -30px; }\n }\n\n @media (min-width: 481px) and (max-width: 768px) {\n .tw-block-wrapper { padding: 16px 16px 0 16px; }\n .menu-container { font-size: 14px; padding: 0 15px; }\n .typewriter-container { padding: 0 20px; }\n .typewriter-heading { font-size: clamp(24px, 4.5vw, 36px); line-height: 1.3; padding: 0 10px; }\n .menu-link:not(:last-child)::after { margin-left: 8px; margin-right: 4px; }\n .model-container { height: clamp(300px, 55vw, 420px); margin-top: -30px; }\n }\n\n @media (min-width: 769px) and (max-width: 1024px) {\n .menu-container { font-size: 15px; padding: 0 20px; }\n .typewriter-container { padding: 0 25px; }\n .typewriter-heading { font-size: clamp(28px, 4.2vw, 42px); line-height: 1.28; padding: 0 15px; }\n .menu-link:not(:last-child)::after { margin-left: 9px; margin-right: 4px; }\n .model-container { height: clamp(380px, 42vw, 480px); margin-top: -40px; }\n }\n\n @media (min-width: 1025px) and (max-width: 1200px) {\n .menu-container { font-size: 15px; padding: 0 25px; }\n .typewriter-container { padding: 0 30px; }\n .typewriter-heading { font-size: clamp(32px, 3.8vw, 46px); line-height: 1.26; padding: 0 20px; }\n }\n\n @media (min-width: 1201px) {\n .menu-container { font-size: 16px; padding: 0 30px; }\n .typewriter-container { padding: 0 40px; }\n .typewriter-heading { font-size: 48px; line-height: 1.25; padding: 0 30px; }\n }\n\n @media (min-width: 1921px) {\n .menu-container { font-size: 18px; max-width: 1600px; }\n .typewriter-container { max-width: 1600px; padding: 0 50px; }\n .typewriter-heading { font-size: 56px; line-height: 1.24; }\n }\n\n @media (max-height: 500px) and (orientation: landscape) {\n .tw-block-wrapper { padding: 10px 16px 0 16px; }\n .menu-container { margin: 5px auto 15px auto; font-size: 13px; }\n .typewriter-container { min-height: 60px; padding: 0 15px; }\n .typewriter-heading { font-size: clamp(16px, 3.5vw, 28px); line-height: 1.2; }\n .mg-btn-wrap { padding: 10px 0 5px; }\n .model-container { height: clamp(200px, 40vh, 340px); margin-top: -20px; }\n }\n\n @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {\n .typewriter-heading { font-size: clamp(26px, 3.8vw, 40px); padding: 0 20px; line-height: 1.25; }\n .typewriter-container { padding: 0 30px; }\n }\n\n @supports (-webkit-touch-callout: none) {\n .typewriter-heading { -webkit-text-size-adjust: 100%; text-align: center; }\n .typewriter-container { -webkit-box-align: center; -webkit-box-pack: center; }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .typewriter-heading { transition: none; }\n }\n\n @media (prefers-color-scheme: dark) {\n body { background-color: #1a1a1a; }\n }\n\n @media (prefers-contrast: high) {\n .menu-link { text-decoration: underline; }\n .menu-link.active { text-decoration: double underline; }\n }\n\n @media print {\n body { background-color: white; color: black; }\n .menu-link { color: black; }\n .typewriter-heading { color: black; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"tw-block-wrapper\">\n\n <div class=\"menu-container\">\n <a class=\"menu-link active\" data-quote=\"\u0412\u043d\u0435\u0448\u043d\u0435\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0435 \u0431\u044e\u0440\u043e: \u0431\u0435\u0440\u0451\u043c \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u0434\u043e\u0432\u043e\u0434\u0438\u043c \u0434\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\">\u0414\u043b\u044f \u0432\u0441\u0435\u0445<\/a>\n <a class=\"menu-link\" data-quote=\"\u0421\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u043c \u0441\u0440\u043e\u043a\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 2 \u0440\u0430\u0437\u0430 \u0431\u0435\u0437 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0448\u0442\u0430\u0442\u0430\">\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0443<\/a>\n <a class=\"menu-link\" data-quote=\"\u041d\u0430\u0432\u043e\u0434\u0438\u043c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432 CAD\/PDM \u0437\u0430 30 \u0434\u043d\u0435\u0439 \u2014 \u0431\u0435\u0437 \u0445\u0430\u043e\u0441\u0430 \u0438 \u043f\u043e\u0442\u0435\u0440\u044c \u0434\u0430\u043d\u043d\u044b\u0445\">IT<\/a>\n <a class=\"menu-link\" data-quote=\"\u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0440\u0443\u0447\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043c \u0434\u043e 200+ \u0447\u0430\u0441\u043e\u0432 \u0432 \u043c\u0435\u0441\u044f\u0446\">\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/a>\n <\/div>\n\n <div class=\"typewriter-container\">\n <h1 id=\"projects-heading\" class=\"typewriter-heading active\">\u0426\u0438\u0444\u0440\u043e\u0432\u0438\u0437\u0438\u0440\u0443\u0435\u043c, \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u0443\u0435\u043c, \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c<\/h1>\n <\/div>\n\n <div class=\"model-container\">\n <canvas id=\"canvas3d\"><\/canvas>\n <div class=\"model-loader\" id=\"modelLoader\">Loading 3D model…<\/div>\n \n <div class=\"mg-btn-wrap\">\n <a href=\"https:\/\/n8n.mechanogurus.ru\/form\/105adc81-c50a-40f0-ab54-f0b65857d49e\" class=\"mg-cta\" role=\"button\" target=\"_blank\" rel=\"noopener noreferrer\">\n <span class=\"mg-cta__text\">\u041e\u0431\u0441\u0443\u0434\u0438\u043c ?<\/span>\n <span class=\"mg-cta__arrow\">\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"13 6 19 12 13 18\"\/><\/svg>\n <\/span>\n <\/a>\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\n document.documentElement.classList.remove('no-js');\n document.documentElement.classList.add('js');\n\n document.addEventListener('DOMContentLoaded', function() {\n const menuLinks = document.querySelectorAll('.menu-link');\n const heading = document.getElementById('projects-heading');\n let activeTimeout;\n let lastActiveLink = document.querySelector('.menu-link.active');\n let isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n\n let lastActiveIndex = 0;\n try {\n lastActiveIndex = parseInt(localStorage.getItem('lastActiveIndex')) || 0;\n } catch (e) {}\n\n lastActiveIndex = (lastActiveIndex + 1) % menuLinks.length;\n\n try {\n localStorage.setItem('lastActiveIndex', lastActiveIndex);\n } catch (e) {}\n\n menuLinks.forEach((link, index) => {\n if (index === lastActiveIndex) {\n link.classList.add('active');\n lastActiveLink = link;\n heading.textContent = link.getAttribute('data-quote');\n } else {\n link.classList.remove('active');\n }\n });\n\n function updateHeading(newQuote, immediate = false) {\n if (immediate) {\n heading.textContent = newQuote;\n heading.style.opacity = '1';\n return;\n }\n heading.style.opacity = '0';\n setTimeout(() => {\n heading.textContent = newQuote;\n heading.style.opacity = '1';\n }, 300);\n }\n\n function activateLink(link) {\n menuLinks.forEach(l => l.classList.remove('active'));\n link.classList.add('active');\n lastActiveLink = link;\n const newQuote = link.getAttribute('data-quote');\n updateHeading(newQuote);\n const clickedIndex = Array.from(menuLinks).indexOf(link);\n try {\n localStorage.setItem('lastActiveIndex', clickedIndex);\n } catch (e) {}\n }\n\n menuLinks.forEach(link => {\n link.addEventListener('click', function(e) {\n e.preventDefault();\n activateLink(this);\n });\n\n if (isTouchDevice) {\n link.addEventListener('touchstart', function(e) {\n if (e.touches.length > 1) e.preventDefault();\n }, { passive: true });\n link.addEventListener('touchend', function(e) {\n e.preventDefault();\n activateLink(this);\n });\n }\n\n if (!isTouchDevice) {\n link.addEventListener('mouseenter', function() {\n clearTimeout(activeTimeout);\n updateHeading(this.getAttribute('data-quote'));\n });\n link.addEventListener('mouseleave', function() {\n if (this !== lastActiveLink) {\n heading.style.opacity = '0';\n activeTimeout = setTimeout(() => {\n updateHeading(lastActiveLink.getAttribute('data-quote'), true);\n }, 300);\n }\n });\n }\n });\n\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Tab') document.body.classList.add('keyboard-navigation');\n });\n document.addEventListener('mousedown', function() {\n document.body.classList.remove('keyboard-navigation');\n });\n\n let resizeTimeout;\n window.addEventListener('resize', function() {\n clearTimeout(resizeTimeout);\n resizeTimeout = setTimeout(function() {\n heading.style.opacity = '0.8';\n setTimeout(() => { heading.style.opacity = '1'; }, 100);\n }, 250);\n });\n\n setTimeout(() => { heading.style.opacity = '1'; }, 100);\n });\n<\/script>\n\n<script>\n const initThreeJS = () => {\n const canvas = document.getElementById('canvas3d');\n const container = document.querySelector('.model-container');\n const loaderElement = document.getElementById('modelLoader');\n\n const scene = new THREE.Scene();\n\n const camera = new THREE.PerspectiveCamera(\n 45,\n container.clientWidth \/ container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.set(0, 1, 6);\n camera.lookAt(0, 0, 0);\n\n const renderer = new THREE.WebGLRenderer({\n canvas: canvas,\n alpha: true,\n antialias: window.devicePixelRatio < 2,\n powerPreference: \"high-performance\",\n stencil: false,\n depth: true\n });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n renderer.outputEncoding = THREE.sRGBEncoding;\n\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);\n scene.add(ambientLight);\n\n const directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.8);\n directionalLight1.position.set(5, 8, 5);\n directionalLight1.castShadow = true;\n directionalLight1.shadow.mapSize.width = 1024;\n directionalLight1.shadow.mapSize.height = 1024;\n directionalLight1.shadow.camera.near = 0.5;\n directionalLight1.shadow.camera.far = 50;\n scene.add(directionalLight1);\n\n const directionalLight2 = new THREE.DirectionalLight(0xe0e0e0, 0.4);\n directionalLight2.position.set(-5, 3, -5);\n scene.add(directionalLight2);\n\n const fillLight = new THREE.DirectionalLight(0xb0b0b0, 0.3);\n fillLight.position.set(0, -5, 0);\n scene.add(fillLight);\n\n let model = null;\n let isModelLoaded = false;\n\n const planeGeometry = new THREE.PlaneGeometry(30, 30);\n const planeMaterial = new THREE.ShadowMaterial({ opacity: 0.3 });\n const plane = new THREE.Mesh(planeGeometry, planeMaterial);\n plane.rotation.x = -Math.PI \/ 2;\n plane.position.y = -2;\n plane.receiveShadow = true;\n scene.add(plane);\n\n THREE.Cache.enabled = true;\n\n const gltfLoader = new THREE.GLTFLoader();\n const startTime = performance.now();\n\n gltfLoader.load(\n '\/wp-content\/uploads\/2025\/06\/Reservoir6.glb',\n function(gltf) {\n model = gltf.scene;\n\n model.traverse((child) => {\n if (child.isMesh) {\n child.material = new THREE.MeshStandardMaterial({\n color: 0xa0a0a0,\n metalness: 0.3,\n roughness: 0.6,\n flatShading: false\n });\n child.castShadow = true;\n child.receiveShadow = true;\n if (child.geometry) child.geometry.computeBoundingSphere();\n child.frustumCulled = true;\n }\n });\n\n const box = new THREE.Box3().setFromObject(model);\n const center = box.getCenter(new THREE.Vector3());\n const size = box.getSize(new THREE.Vector3());\n\n const maxDim = Math.max(size.x, size.y, size.z);\n const scale = 4.5 \/ maxDim;\n model.scale.multiplyScalar(scale);\n model.position.sub(center.multiplyScalar(scale));\n\n scene.add(model);\n isModelLoaded = true;\n\n if (loaderElement) loaderElement.classList.add('hidden');\n canvas.classList.add('loaded');\n\n const loadTime = performance.now() - startTime;\n console.log(`Model loaded in ${loadTime.toFixed(0)}ms`);\n\n if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n model.rotation.set(0, 0, 0);\n }\n },\n function(xhr) {\n if (xhr.lengthComputable && loaderElement) {\n const pct = Math.round((xhr.loaded \/ xhr.total) * 100);\n loaderElement.textContent = `Loading 3D model... ${pct}%`;\n }\n },\n function(error) {\n console.error('Error loading model:', error);\n if (loaderElement) loaderElement.textContent = 'Failed to load 3D model';\n }\n );\n\n let lastTime = 0;\n const targetFPS = 60;\n const frameInterval = 1000 \/ targetFPS;\n\n const animate = (currentTime) => {\n requestAnimationFrame(animate);\n const deltaTime = currentTime - lastTime;\n if (deltaTime >= frameInterval) {\n lastTime = currentTime - (deltaTime % frameInterval);\n if (model && isModelLoaded) model.rotation.y += 0.008;\n renderer.render(scene, camera);\n }\n };\n\n animate(0);\n\n let resizeTimeout;\n const handleResize = () => {\n clearTimeout(resizeTimeout);\n resizeTimeout = setTimeout(() => {\n const width = container.clientWidth;\n const height = container.clientHeight;\n camera.aspect = width \/ height;\n camera.updateProjectionMatrix();\n renderer.setSize(width, height);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n }, 100);\n };\n\n window.addEventListener('resize', handleResize, { passive: true });\n\n document.addEventListener('visibilitychange', () => {\n if (document.hidden) {\n renderer.setAnimationLoop(null);\n } else {\n animate(0);\n }\n });\n };\n\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initThreeJS);\n } else {\n initThreeJS();\n }\n<\/script>\n\n<noscript>\n <style>\n .menu-link:hover { text-decoration: underline; }\n <\/style>\n<\/noscript>\n\n<\/body>\n<\/html>\n\n\n\n<p class=\"has-text-align-center has-background-color has-text-color has-link-color has-large-font-size wp-elements-2a9a06dda5ad26237db4c277f2d7e477 wp-block-paragraph\">\u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0435 \u0431\u044e\u0440\u043e \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0439 \u044d\u043f\u043e\u0445\u0438<\/p>\n<\/div>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\">\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n .mgp-wrap {\n display: flex;\n flex-direction: row;\n width: 100%;\n max-width: 1400px;\n margin: 0 auto;\n gap: 10px;\n height: 64vh;\n min-height: 340px;\n }\n\n .mgp-panel {\n position: relative;\n flex: 1;\n min-width: 80px;\n background-size: cover;\n background-position: center;\n border-radius: 10px;\n cursor: pointer;\n overflow: hidden;\n transition: flex 0.6s cubic-bezier(0.4,0,0.2,1);\n }\n\n .mgp-panel::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(160deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.78) 100%);\n z-index: 1;\n transition: background 0.4s;\n }\n\n .mgp-panel.active {\n flex: 4;\n }\n .mgp-panel.active::before {\n background: linear-gradient(160deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.82) 100%);\n }\n\n \/* \u2500\u2500 Collapsed inner: vertically centered \u2500\u2500 *\/\n .mgp-inner {\n position: absolute;\n inset: 0;\n z-index: 2;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 24px 16px;\n overflow: hidden;\n }\n\n \/* \u2500\u2500 Expanded inner: top-left column \u2500\u2500 *\/\n .mgp-panel.active .mgp-inner {\n justify-content: flex-start;\n align-items: flex-start;\n padding: 36px 36px 36px;\n top: 0;\n bottom: auto;\n height: auto;\n }\n\n \/* \u2500\u2500 Title: vertical when collapsed \u2500\u2500 *\/\n .mgp-title {\n font-family: 'Bebas Neue', 'Impact', sans-serif;\n font-size: 22px;\n font-weight: 400;\n color: #fff;\n letter-spacing: 5px;\n text-transform: uppercase;\n white-space: nowrap;\n line-height: 1;\n -webkit-text-stroke: 0.5px #fff;\n writing-mode: vertical-rl;\n text-orientation: mixed;\n transform: rotate(180deg);\n flex-shrink: 0;\n }\n .mgp-panel.active .mgp-title {\n writing-mode: horizontal-tb;\n transform: rotate(0deg);\n font-size: 48px;\n letter-spacing: 3px;\n white-space: normal;\n margin-bottom: 10px;\n line-height: 1.05;\n }\n\n \/* \u2500\u2500 Pain: hidden when collapsed, shown when active \u2500\u2500 *\/\n .mgp-pain {\n display: none;\n font-family: 'Manrope', 'Segoe UI', sans-serif;\n font-size: 17px;\n font-weight: 600;\n color: #F2B839;\n letter-spacing: 0.2px;\n line-height: 1.45;\n margin-bottom: 12px;\n width: 100%;\n }\n .mgp-panel.active .mgp-pain { display: block; }\n\n .mgp-solution {\n display: none;\n font-family: 'Manrope', 'Segoe UI', sans-serif;\n font-size: 15px;\n color: rgba(255,255,255,0.72);\n font-style: italic;\n margin-bottom: 16px;\n }\n .mgp-panel.active .mgp-solution { display: block; }\n\n .mgp-desc {\n display: none;\n font-family: 'Manrope', 'Segoe UI', sans-serif;\n font-size: 15px;\n color: rgba(255,255,255,0.88);\n line-height: 1.65;\n margin-bottom: 20px;\n width: 100%;\n }\n .mgp-panel.active .mgp-desc { display: block; }\n .mgp-desc ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }\n .mgp-desc li { padding-left: 22px; position: relative; }\n .mgp-desc li::before {\n content: '';\n position: absolute;\n left: 0; top: 9px;\n width: 8px; height: 8px;\n background: #E1830F;\n border-radius: 50%;\n }\n\n .mgp-cta {\n display: none;\n font-family: 'Manrope', 'Segoe UI', sans-serif;\n font-size: 14px;\n font-weight: 600;\n color: #fff;\n text-decoration: none;\n letter-spacing: 1.2px;\n text-transform: uppercase;\n border-bottom: 2px solid #F2B839;\n padding-bottom: 3px;\n }\n .mgp-cta:hover { color: #F2B839; }\n .mgp-panel.active .mgp-cta { display: inline-block; }\n\n .mgp-panel:nth-child(1) { background-image: url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/solidworks-pdm-implementation-service.jpg'); }\n .mgp-panel:nth-child(2) { background-image: url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/reengineering.png'); }\n .mgp-panel:nth-child(3) { background-image: url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/Standard_procedures.jpg'); }\n\n \/* \u2500\u2500 Tablet \u2500\u2500 *\/\n @media (max-width: 1024px) and (min-width: 769px) {\n .mgp-wrap { height: 56vh; }\n .mgp-panel { min-width: 64px; }\n .mgp-title { font-size: 18px; }\n .mgp-panel.active .mgp-title { font-size: 36px; }\n .mgp-pain { font-size: 15px; }\n .mgp-desc { font-size: 14px; }\n .mgp-panel.active .mgp-inner { padding: 24px 24px 24px; }\n }\n\n \/* \u2500\u2500 Mobile: back to horizontal rows stacked vertically \u2500\u2500 *\/\n @media (max-width: 768px) {\n .mgp-wrap {\n flex-direction: column;\n height: auto;\n min-height: 0;\n gap: 8px;\n }\n\n .mgp-panel {\n flex: none;\n width: 100%;\n height: 80px;\n min-width: 0;\n transition: height 0.55s cubic-bezier(0.4,0,0.2,1);\n }\n .mgp-panel.active {\n flex: none;\n height: 400px;\n }\n\n \/* Collapsed: horizontal row with title + pain *\/\n .mgp-inner {\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: flex-start;\n align-items: center;\n padding: 10px 16px;\n gap: 0;\n row-gap: 3px;\n }\n .mgp-panel.active .mgp-inner {\n flex-direction: column;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: flex-start;\n padding: 18px 18px 18px;\n top: 0;\n bottom: auto;\n height: auto;\n }\n\n \/* Title horizontal on mobile collapsed *\/\n .mgp-title {\n writing-mode: horizontal-tb;\n transform: none;\n font-size: 17px;\n letter-spacing: 3px;\n width: calc(100% - 28px);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n order: 1;\n }\n .mgp-panel.active .mgp-title {\n writing-mode: horizontal-tb;\n transform: none;\n font-size: 26px;\n width: 100%;\n white-space: normal;\n overflow: visible;\n text-overflow: unset;\n margin-bottom: 8px;\n letter-spacing: 2px;\n }\n\n \/* Pain visible in collapsed row on mobile too *\/\n .mgp-pain {\n display: block;\n font-size: 12px;\n width: 100%;\n order: 2;\n line-height: 1.35;\n margin-bottom: 0;\n }\n .mgp-panel.active .mgp-pain {\n font-size: 13.5px;\n margin-bottom: 10px;\n }\n\n \/* Arrow top-right *\/\n .mgp-panel::after {\n content: '\u203a';\n position: absolute;\n right: 16px;\n top: 14px;\n font-size: 20px;\n color: rgba(255,255,255,0.45);\n z-index: 3;\n font-family: sans-serif;\n }\n .mgp-panel.active::after { display: none; }\n\n .mgp-solution { font-size: 12.5px; margin-bottom: 12px; }\n .mgp-desc { font-size: 13px; margin-bottom: 14px; }\n .mgp-desc ul { gap: 6px; }\n .mgp-desc li { padding-left: 18px; }\n .mgp-desc li::before { width: 7px; height: 7px; top: 7px; }\n .mgp-cta { font-size: 12.5px; }\n }\n\n @media (max-width: 400px) {\n .mgp-panel { height: 74px; }\n .mgp-panel.active { height: 370px; }\n .mgp-title { font-size: 15px; }\n .mgp-panel.active .mgp-title { font-size: 22px; }\n .mgp-pain { font-size: 11px; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"mgp-wrap\">\n\n <div class=\"mgp-panel\">\n <div class=\"mgp-inner\">\n <h2 class=\"mgp-title\">\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u0441 \u041a\u0414<\/h2>\n <p class=\"mgp-pain\">\u041a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d \u2014 \u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u041a\u0414 \u0441\u0432\u043e\u0438\u043c\u0438 \u0441\u0438\u043b\u0430\u043c\u0438 \u043d\u0435 \u0432\u044b\u0439\u0434\u0435\u0442?<\/p>\n <p class=\"mgp-solution\">\u0411\u0435\u0440\u0451\u043c \u0437\u0430\u0434\u0430\u0447\u0443 \u043e\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0434\u043e \u043f\u0443\u0441\u043a\u043e\u043d\u0430\u043b\u0430\u0434\u043a\u0438<\/p>\n <div class=\"mgp-desc\"><ul>\n <li>\u0423\u0441\u043b\u0443\u0433\u0438 \u0413\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0438 \u0413\u0418\u041f \u2014 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u0432\u0430\u0448\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435<\/li>\n <li>\u041f\u0440\u0435\u0434\u043f\u0440\u043e\u0435\u043a\u0442\u043d\u044b\u0435 \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438<\/li>\n <li>\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0447\u0451\u0442\u044b, \u043f\u043e\u0434\u0431\u043e\u0440 \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0430 \u0443\u0437\u043b\u043e\u0432<\/li>\n <li>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0439 \u0438 \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/li>\n <li>\u0421\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u043d\u0430 \u044d\u0442\u0430\u043f\u0430\u0445 \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u0443\u0441\u043a\u043e\u043d\u0430\u043b\u0430\u0434\u043a\u0438<\/li>\n <\/ul><\/div>\n <a href=\"https:\/\/mechanogurus.ru\/?page_id=1714\" class=\"mgp-cta\" target=\"_blank\">\u0423\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u2192<\/a>\n <\/div>\n <\/div>\n\n <div class=\"mgp-panel\">\n <div class=\"mgp-inner\">\n <h2 class=\"mgp-title\">\u0418\u0422 \u0420\u0435\u0448\u0435\u043d\u0438\u044f<\/h2>\n <p class=\"mgp-pain\">CAD \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442, \u0444\u0430\u0439\u043b\u044b \u0442\u0435\u0440\u044f\u044e\u0442\u0441\u044f, \u0430 PDM \u0442\u0430\u043a \u0438 \u043d\u0435 \u0432\u0437\u043b\u0435\u0442\u0435\u043b?<\/p>\n <p class=\"mgp-solution\">\u0412\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0430\u043c<\/p>\n <div class=\"mgp-desc\"><ul>\n <li>\u0412\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 CAD\/PDM\/PLM \u0438 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 VDI-\u0440\u0435\u0448\u0435\u043d\u0438\u0439<\/li>\n <li>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 1\u0421, ERP \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u043c\u0438<\/li>\n <li>\u041e\u0442\u043a\u0430\u0437\u043e\u0443\u0441\u0442\u043e\u0439\u0447\u0438\u0432\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0438 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/li>\n <li>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 n8n \u0438 IoT-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b<\/li>\n <\/ul><\/div>\n <a href=\"https:\/\/mechanogurus.ru\/?page_id=503\" class=\"mgp-cta\" target=\"_blank\">\u0423\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u2192<\/a>\n <\/div>\n <\/div>\n\n <div class=\"mgp-panel\">\n <div class=\"mgp-inner\">\n <h2 class=\"mgp-title\">\u0410\u0434\u0434\u0438\u0442\u0438\u0432\u043d\u044b\u0435 \u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438<\/h2>\n <p class=\"mgp-pain\">\u041d\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u043d\u0430\u0442\u0430 \u2014 \u043d\u0430\u043f\u0435\u0447\u0430\u0442\u0430\u0435\u043c \u043c\u0430\u043a\u0435\u0442 \u0434\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u0441\u0442\u0435\u043d\u0434\u0430<\/p>\n <p class=\"mgp-solution\">\u0421\u043a\u0430\u043d\u0438\u0440\u0443\u0435\u043c, \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u0443\u0435\u043c \u0438 \u043f\u0435\u0447\u0430\u0442\u0430\u0435\u043c \u044d\u043a\u0441\u043f\u043e\u043d\u0430\u0442 \u00ab\u043f\u043e\u0434 \u043a\u043b\u044e\u0447\u00bb<\/p>\n <div class=\"mgp-desc\"><ul>\n <li>3D-\u043f\u0435\u0447\u0430\u0442\u044c PLA, PETG, ABS, TPU \u0438 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0442\u0430\u043c\u0438 \u043d\u0430 BambuLab<\/li>\n <li>3D-\u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u0440\u0435\u0432\u0435\u0440\u0441-\u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u0430 \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430<\/li>\n <li>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432, \u0432\u044b\u0431\u043e\u0440 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0438 \u0440\u0435\u0436\u0438\u043c\u043e\u0432 \u043f\u0435\u0447\u0430\u0442\u0438<\/li>\n <li>\u041f\u043e\u0441\u0442\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0438 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0432 \u0438\u0437\u0434\u0435\u043b\u0438\u0435<\/li>\n <\/ul><\/div>\n <a href=\"https:\/\/mechanogurus.ru\/?page_id=1924\" class=\"mgp-cta\" target=\"_blank\">\u0423\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u2192<\/a>\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\n const panels = document.querySelectorAll('.mgp-panel');\n let timer = null;\n function clearT() { if (timer) { clearTimeout(timer); timer = null; } }\n function startT() {\n clearT();\n timer = setTimeout(() => panels.forEach(p => p.classList.remove('active')), 6000);\n }\n panels.forEach(panel => {\n panel.addEventListener('click', e => {\n if (e.target.closest('.mgp-cta')) return;\n const isActive = panel.classList.contains('active');\n panels.forEach(p => p.classList.remove('active'));\n if (!isActive) { panel.classList.add('active'); startT(); } else { clearT(); }\n });\n panel.addEventListener('mouseenter', () => { if (panel.classList.contains('active')) startT(); });\n });\n<\/script>\n\n<\/body>\n<\/html>\n<\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-landing-block\">\n\n<style>\n.wp-landing-block,\n.wp-landing-block *,\n.wp-landing-block *::before,\n.wp-landing-block *::after{\n\tbox-sizing:border-box;\n}\n\n\/* =========================\n ROOT CONTAINER\n========================= *\/\n.wp-landing-block{\n\t--radius:24px;\n\t--accent:#E1830F;\n\t--accent-yellow:#F2B839;\n\t--bg:#FEF4EE;\n\t--gap:clamp(24px,3vw,48px);\n\n\t\/* \u2705 unified font size *\/\n\t--text-base: clamp(.9rem,1.1vw,1.05rem);\n\n\twidth:calc(100% - 50px);\n\tmargin:60px auto;\n\n\tmax-width:1600px;\n\tpadding:var(--gap);\n\n\tbackground:var(--bg);\n\tborder-radius:var(--radius);\n\n\tdisplay:grid;\n\tgrid-template-columns:1.2fr 1fr;\n\tgap:var(--gap);\n\n\talign-items:stretch;\n\tcolor:#000;\n}\n\n\/* =========================\n MEDIA\n========================= *\/\n.wp-landing-block__media{\n\tposition:relative;\n\tborder-radius:var(--radius);\n\toverflow:hidden;\n\tbox-shadow:0 30px 60px rgba(0,0,0,.15);\n\tdisplay:flex;\n}\n\n.wp-landing-block__media img{\n\twidth:100%;\n\theight:100%;\n\tobject-fit:cover;\n\tobject-position:center;\n\tdisplay:block;\n}\n\n\/* =========================\n CONTENT\n========================= *\/\n.wp-landing-block__content{\n\tdisplay:flex;\n\tflex-direction:column;\n\tjustify-content:space-between;\n}\n\n\/* KEEP heading unchanged *\/\n.wp-landing-block__title{\n\tfont-size:clamp(1.4rem,2.2vw,2.4rem);\n\tfont-weight:700;\n\tcolor:var(--accent);\n\tmargin:0 0 1.2rem;\n\tline-height:1.2;\n}\n\n\/* \u2705 unified text *\/\n.wp-landing-block__intro{\n\tfont-size:var(--text-base);\n\tline-height:1.6;\n\tmargin:0 0 1.5rem;\n}\n\n.wp-landing-block__heading{\n\tfont-size:var(--text-base);\n\tfont-weight:600;\n\tmargin:0 0 .75rem;\n}\n\n.wp-landing-block__list{\n\tlist-style:none;\n\tpadding:0;\n\tmargin:0 0 1.5rem;\n}\n\n.wp-landing-block__item{\n\tdisplay:flex;\n\tgap:10px;\n\tmargin-bottom:.6rem;\n\tpadding:.6rem .8rem;\n\tbackground:rgba(226,131,15,.06);\n\tborder-radius:12px;\n\tfont-size:var(--text-base);\n\tline-height:1.6;\n}\n\n.wp-landing-block__marker{\n\tcolor:var(--accent);\n}\n\n.wp-landing-block__solution{\n\tbackground:rgba(226,131,15,.06);\n\tborder-left:5px solid var(--accent);\n\tpadding:1rem 1.2rem;\n\tborder-radius:0 16px 16px 0;\n\tmargin-bottom:1.5rem;\n}\n\n.wp-landing-block__solution-text{\n\tmargin:0;\n\tline-height:1.6;\n\tfont-size:var(--text-base);\n}\n\n\/* =========================\n CTA RIGHT ALIGNED\n========================= *\/\n.wp-landing-block__cta{\n\talign-self:flex-end;\n\tdisplay:inline-flex;\n\talign-items:center;\n\tjustify-content:center;\n\tpadding:.9rem 2rem;\n\tborder-radius:999px;\n\tbackground:linear-gradient(135deg,var(--accent),var(--accent-yellow));\n\tfont-weight:700;\n\ttext-decoration:none;\n\tcolor:#000;\n\ttransition:.2s ease;\n}\n\n.wp-landing-block__cta:hover{\n\ttransform:translateY(-3px);\n\tbox-shadow:0 15px 35px rgba(226,131,15,.35);\n}\n\n\/* =========================\n MOBILE\n========================= *\/\n@media(max-width:960px){\n\t.wp-landing-block{\n\t\tgrid-template-columns:1fr;\n\t}\n\t.wp-landing-block__media{\n\t\taspect-ratio:16\/9;\n\t}\n\t.wp-landing-block__cta{\n\t\talign-self:stretch;\n\t}\n}\n<\/style>\n\n<section class=\"wp-landing-block__media\">\n\t<img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/01\/IMG_0252.jpeg\" alt=\"Engineering Drone\">\n<\/section>\n\n<section class=\"wp-landing-block__content\">\n\t<h2 class=\"wp-landing-block__title\">\n\t\t\u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u043d\u0435 \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f? \u041f\u043e\u043b\u0443\u0447\u0430\u0439\u0442\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0435\u0437 \u043d\u0430\u0439\u043c\u0430.\n\t<\/h2>\n\n\t<p class=\"wp-landing-block__intro\">\n\t\t\u041c\u044b \u2014 \u0432\u0430\u0448\u0430 \u0432\u043d\u0435\u0448\u043d\u044f\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430. \u0411\u0435\u0440\u0451\u043c \u0437\u0430\u0434\u0430\u0447\u0438 \u043e\u0442 \u0438\u0434\u0435\u0438 \u0434\u043e \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u041a\u0414 \u0438 \u0434\u043e\u0432\u043e\u0434\u0438\u043c \u0434\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430. \u0411\u0435\u0437 \u043d\u0430\u0439\u043c\u0430, \u0431\u0435\u0437 \u043f\u0440\u043e\u0441\u0442\u043e\u0435\u0432 \u0438 \u0431\u0435\u0437 \u043b\u0438\u0448\u043d\u0438\u0445 \u0437\u0430\u0442\u0440\u0430\u0442.\n\t<\/p>\n\n\t<h3 class=\"wp-landing-block__heading\">\u0423\u0437\u043d\u0430\u0451\u0442\u0435 \u044d\u0442\u0438 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438?<\/h3>\n\n\t<ul class=\"wp-landing-block__list\">\n\t\t<li class=\"wp-landing-block__item\">\n\t\t\t<span class=\"wp-landing-block__marker\">\u25c6<\/span>\n\t\t\t\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u0442\u043e\u0438\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432\n\t\t<\/li>\n\t\t<li class=\"wp-landing-block__item\">\n\t\t\t<span class=\"wp-landing-block__marker\">\u25c6<\/span>\n\t\t\t\u0428\u0442\u0430\u0442 \u0434\u043e\u0440\u043e\u0433\u043e\u0439, \u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043d\u0435\u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u0430\u044f\n\t\t<\/li>\n\t\t<li class=\"wp-landing-block__item\">\n\t\t\t<span class=\"wp-landing-block__marker\">\u25c6<\/span>\n\t\t\t\u0421\u0440\u043e\u043a\u0438 \u0433\u043e\u0440\u044f\u0442, \u0430 \u043d\u0430\u0439\u0442\u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430 \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\n\t\t<\/li>\n\t<\/ul>\n\n\t<div class=\"wp-landing-block__solution\">\n\t\t<h3 class=\"wp-landing-block__heading\">\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441:<\/h3>\n\t\t<p class=\"wp-landing-block__solution-text\">\n\t\t\t\u041c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u043a\u0430\u043a \u0432\u043d\u0435\u0448\u043d\u044f\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0438 \u0431\u0435\u0440\u0451\u043c \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0437\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u0412\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u0432 \u0441\u0440\u043e\u043a, \u0441 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c \u0431\u044e\u0434\u0436\u0435\u0442\u043e\u043c \u0438 \u0431\u0435\u0437 \u043a\u0430\u0434\u0440\u043e\u0432\u044b\u0445 \u0440\u0438\u0441\u043a\u043e\u0432.\n\t\t<\/p>\n\t<\/div>\n\n\t<a href=\"#\" class=\"wp-landing-block__cta\">\u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443<\/a>\n<\/section>\n\n<\/div>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<script type=\"module\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/model-viewer\/3.5.0\/model-viewer.min.js\"><\/script>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Rajdhani:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n.mg-bento, .mg-bento *, .mg-bento *::before, .mg-bento *::after {\n box-sizing: border-box;\n}\n\n.mg-bento {\n --gold: #F2B839;\n --orange: #E1830F;\n --dark-bg: #0a0a0a;\n --card-bg: rgba(16,16,16,0.97);\n --card-bg-alt: rgba(20,16,8,0.95);\n --glass-border: rgba(242,184,57,0.18);\n --glass-border-h: rgba(242,184,57,0.45);\n --text-primary: #ffffff;\n --text-secondary: rgba(255,255,255,0.55);\n --text-muted: rgba(255,255,255,0.3);\n\n font-family: 'Rajdhani', sans-serif;\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 25px;\n width: 100%;\n}\n\n\/* \u2500\u2500 Section \u2500\u2500 *\/\n.mg-bento .projects-section {\n padding: 64px 0;\n position: relative;\n width: calc(100% + 50px);\n margin-left: -25px;\n}\n\n\/* \u2500\u2500 Header \u2500\u2500 *\/\n.mg-bento .section-header {\n text-align: center;\n margin-bottom: 44px;\n padding: 0 25px;\n position: relative;\n z-index: 2;\n}\n\n.mg-bento .section-tag {\n font-size: 0.65rem;\n letter-spacing: 5px;\n text-transform: uppercase;\n color: var(--orange);\n display: block;\n margin-bottom: 10px;\n}\n\n.mg-bento .section-title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(1.8rem, 4vw, 2.8rem);\n letter-spacing: 4px;\n background: linear-gradient(135deg, var(--gold) 0%, var(--orange) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n line-height: 1.2;\n margin: 0;\n}\n\n\/* \u2500\u2500 Bento Grid \u2500\u2500 *\/\n.mg-bento .bento-grid {\n display: grid;\n grid-template-columns: 1.7fr 1fr 1fr;\n grid-template-rows: auto auto;\n gap: 14px;\n padding: 0 25px;\n position: relative;\n z-index: 2;\n}\n\n\/* \u2500\u2500 Base card \u2500\u2500 *\/\n.mg-bento .bento-card {\n background: var(--card-bg);\n border: 1px solid var(--glass-border);\n border-radius: 16px;\n overflow: hidden;\n position: relative;\n transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s ease;\n cursor: default;\n}\n\n.mg-bento .bento-card:hover {\n border-color: var(--glass-border-h);\n transform: translateY(-4px);\n box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 24px rgba(242,184,57,0.1);\n}\n\n\/* \u2500\u2500 Featured card (spans 2 rows) \u2500\u2500 *\/\n.mg-bento .bento-card.featured {\n grid-column: 1;\n grid-row: 1 \/ 3;\n background: var(--card-bg-alt);\n border-color: rgba(242,184,57,0.28);\n}\n\n.mg-bento .bento-card.featured:hover {\n border-color: rgba(242,184,57,0.6);\n box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 40px rgba(242,184,57,0.15);\n}\n\n\/* \u2500\u2500 Featured badge \u2500\u2500 *\/\n.mg-bento .featured-badge {\n position: absolute;\n top: 16px;\n right: 16px;\n z-index: 10;\n background: linear-gradient(135deg, var(--gold), var(--orange));\n color: #0a0a0a;\n font-size: 0.6rem;\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n padding: 4px 10px;\n border-radius: 4px;\n pointer-events: none;\n}\n\n\/* \u2500\u2500 NDA badge \u2500\u2500 *\/\n.mg-bento .nda-badge {\n position: absolute;\n top: 16px;\n left: 16px;\n z-index: 10;\n background: rgba(0,0,0,0.65);\n border: 1px solid rgba(255,255,255,0.15);\n color: rgba(255,255,255,0.5);\n font-size: 0.55rem;\n font-weight: 600;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n padding: 3px 8px;\n border-radius: 3px;\n pointer-events: none;\n backdrop-filter: blur(4px);\n}\n\n\/* \u2500\u2500 Viewer container \u2500\u2500 *\/\n.mg-bento .viewer-container {\n position: relative;\n background: linear-gradient(160deg, #131313 0%, #0a0a0a 100%);\n overflow: hidden;\n}\n\n.mg-bento .bento-card.featured .viewer-container {\n height: 320px;\n}\n\n.mg-bento .bento-card:not(.featured) .viewer-container {\n height: 140px;\n}\n\n.mg-bento .viewer-container::after {\n content: '';\n position: absolute;\n bottom: 0; left: 0; right: 0;\n height: 50px;\n background: linear-gradient(to top, var(--card-bg) 0%, transparent 100%);\n pointer-events: none;\n z-index: 1;\n}\n\n.mg-bento .bento-card.featured .viewer-container::after {\n background: linear-gradient(to top, var(--card-bg-alt) 0%, transparent 100%);\n height: 60px;\n}\n\n\/* \u2500\u2500 Grid pattern overlay on viewer \u2500\u2500 *\/\n.mg-bento .viewer-container::before {\n content: '';\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(rgba(242,184,57,0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(242,184,57,0.03) 1px, transparent 1px);\n background-size: 24px 24px;\n pointer-events: none;\n z-index: 0;\n}\n\n.mg-bento model-viewer {\n width: 100%;\n height: 100%;\n --poster-color: transparent;\n filter: contrast(1.06) drop-shadow(0 0 8px rgba(242,184,57,0.12));\n position: relative;\n z-index: 1;\n}\n\n.mg-bento model-viewer::part(default-progress-bar) {\n background: var(--gold);\n height: 2px;\n}\n\n\/* \u2500\u2500 Rotate hint \u2500\u2500 *\/\n.mg-bento .rotate-hint {\n position: absolute;\n bottom: 14px;\n right: 14px;\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0,0,0,0.55);\n border: 1px solid rgba(255,255,255,0.1);\n border-radius: 50%;\n z-index: 3;\n opacity: 0.5;\n transition: opacity 0.3s;\n backdrop-filter: blur(4px);\n}\n\n.mg-bento .bento-card:hover .rotate-hint { opacity: 0; }\n\n.mg-bento .rotate-hint svg {\n width: 14px; height: 14px;\n color: rgba(255,255,255,0.7);\n animation: mg-bento-spin 5s linear infinite;\n}\n\n@keyframes mg-bento-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n\/* \u2500\u2500 Image Carousel (featured card) \u2500\u2500 *\/\n.mg-bento .img-carousel {\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.mg-bento .img-carousel-track {\n display: flex;\n height: 100%;\n transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);\n will-change: transform;\n}\n\n.mg-bento .img-carousel-slide {\n flex: 0 0 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(160deg, #131313 0%, #0a0a0a 100%);\n}\n\n.mg-bento .img-carousel-slide img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center;\n padding: 16px;\n display: block;\n user-select: none;\n -webkit-user-drag: none;\n}\n\n\/* Prev \/ Next arrows *\/\n.mg-bento .carousel-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 4;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0,0,0,0.6);\n border: 1px solid rgba(242,184,57,0.25);\n border-radius: 50%;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.25s, border-color 0.25s, background 0.25s;\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n}\n\n.mg-bento .bento-card.featured:hover .carousel-arrow { opacity: 1; }\n\n.mg-bento .carousel-arrow:hover {\n background: rgba(242,184,57,0.18);\n border-color: rgba(242,184,57,0.6);\n}\n\n.mg-bento .carousel-arrow svg {\n width: 14px; height: 14px;\n color: #F2B839;\n pointer-events: none;\n}\n\n.mg-bento .carousel-arrow.prev { left: 12px; }\n.mg-bento .carousel-arrow.next { right: 12px; }\n\n\/* Dot indicators *\/\n.mg-bento .carousel-dots {\n position: absolute;\n bottom: 14px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 5px;\n z-index: 4;\n pointer-events: none;\n}\n\n.mg-bento .carousel-dot {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: rgba(255,255,255,0.25);\n transition: background 0.3s, transform 0.3s;\n}\n\n.mg-bento .carousel-dot.active {\n background: var(--gold);\n transform: scale(1.4);\n}\n\n\/* Slide counter *\/\n.mg-bento .carousel-counter {\n position: absolute;\n top: 12px;\n left: 14px;\n z-index: 4;\n font-size: 0.65rem;\n font-weight: 600;\n letter-spacing: 2px;\n color: rgba(255,255,255,0.45);\n pointer-events: none;\n font-family: 'Rajdhani', sans-serif;\n}\n\n\/* \u2500\u2500 Card info \u2500\u2500 *\/\n.mg-bento .card-info {\n padding: 16px 20px 20px;\n}\n\n.mg-bento .bento-card.featured .card-info {\n padding: 20px 24px 24px;\n}\n\n.mg-bento .card-category {\n font-size: 0.6rem;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--orange);\n display: block;\n margin-bottom: 5px;\n}\n\n.mg-bento .card-title {\n font-family: 'Bebas Neue', sans-serif;\n letter-spacing: 2px;\n color: var(--text-primary);\n display: block;\n line-height: 1.2;\n margin-bottom: 0;\n}\n\n.mg-bento .bento-card.featured .card-title {\n font-size: 1.9rem;\n margin-bottom: 10px;\n}\n\n.mg-bento .bento-card:not(.featured) .card-title {\n font-size: 1.25rem;\n}\n\n.mg-bento .card-desc {\n font-size: 0.82rem;\n line-height: 1.6;\n color: var(--text-secondary);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.mg-bento .bento-card.featured .card-desc {\n -webkit-line-clamp: 3;\n}\n\n.mg-bento .bento-card:not(.featured) .card-desc {\n -webkit-line-clamp: 2;\n font-size: 0.76rem;\n margin-top: 4px;\n}\n\n\/* \u2500\u2500 Divider line in featured \u2500\u2500 *\/\n.mg-bento .card-divider {\n height: 1px;\n background: linear-gradient(90deg, rgba(242,184,57,0.3), transparent);\n margin: 0 24px;\n}\n\n\/* \u2500\u2500 Tags row in featured card \u2500\u2500 *\/\n.mg-bento .card-tags {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n padding: 12px 24px 20px;\n}\n\n.mg-bento .card-tag {\n font-size: 0.6rem;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n color: var(--text-muted);\n background: rgba(255,255,255,0.04);\n border: 1px solid rgba(255,255,255,0.08);\n padding: 3px 9px;\n border-radius: 3px;\n}\n\n\/* \u2500\u2500 \"Image only\" small card (no model, stylized bg) \u2500\u2500 *\/\n.mg-bento .bento-card.accent {\n background: linear-gradient(135deg, #0f0d06 0%, #151108 100%);\n border-color: rgba(242,184,57,0.22);\n}\n\n\/* \u2500\u2500 Project count card \u2500\u2500 *\/\n.mg-bento .bento-card.stat-card {\n background: linear-gradient(135deg, rgba(242,184,57,0.08) 0%, rgba(225,131,15,0.04) 100%);\n border-color: rgba(242,184,57,0.25);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 28px 20px;\n text-align: center;\n gap: 6px;\n}\n\n.mg-bento .stat-number {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 3.5rem;\n letter-spacing: 3px;\n background: linear-gradient(135deg, var(--gold), var(--orange));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n line-height: 1;\n}\n\n.mg-bento .stat-label {\n font-size: 0.65rem;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--text-secondary);\n line-height: 1.4;\n}\n\n.mg-bento .stat-sublabel {\n font-size: 0.58rem;\n letter-spacing: 2px;\n text-transform: uppercase;\n color: var(--text-muted);\n margin-top: 2px;\n}\n\n\/* \u2500\u2500 CTA \u2500\u2500 *\/\n.mg-bento .cta-container {\n text-align: center;\n margin-top: 36px;\n padding: 0 25px;\n position: relative;\n z-index: 2;\n}\n\n.mg-bento .view-all-btn {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n font-family: 'Rajdhani', sans-serif;\n font-size: 0.88rem;\n font-weight: 700;\n letter-spacing: 3px;\n text-transform: uppercase;\n text-decoration: none;\n color: var(--dark-bg);\n background: linear-gradient(135deg, var(--gold), var(--orange));\n padding: 14px 36px;\n border-radius: 4px;\n transition: all 0.3s ease;\n box-shadow: 0 6px 28px rgba(242,184,57,0.28);\n white-space: nowrap;\n}\n\n.mg-bento .view-all-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 12px 40px rgba(242,184,57,0.42);\n color: var(--dark-bg);\n text-decoration: none;\n}\n\n.mg-bento .view-all-btn svg {\n width: 17px; height: 17px;\n transition: transform 0.3s ease;\n flex-shrink: 0;\n}\n\n.mg-bento .view-all-btn:hover svg { transform: translateX(5px); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n@media (max-width: 1100px) {\n .mg-bento .bento-grid {\n grid-template-columns: 1.5fr 1fr 1fr;\n gap: 12px;\n }\n}\n\n@media (max-width: 900px) {\n .mg-bento .bento-grid {\n grid-template-columns: 1fr 1fr;\n grid-template-rows: auto;\n }\n .mg-bento .bento-card.featured {\n grid-column: 1 \/ 3;\n grid-row: auto;\n }\n .mg-bento .bento-card.featured .viewer-container { height: 260px; }\n .mg-bento .stat-card { min-height: 120px; }\n}\n\n@media (max-width: 768px) {\n .mg-bento { padding: 0 16px; }\n .mg-bento .projects-section {\n padding: 44px 0;\n width: calc(100% + 32px);\n margin-left: -16px;\n }\n .mg-bento .bento-grid { padding: 0 16px; gap: 10px; }\n .mg-bento .section-header { padding: 0 16px; margin-bottom: 32px; }\n .mg-bento .cta-container { padding: 0 16px; }\n}\n\n@media (max-width: 560px) {\n .mg-bento .bento-grid {\n grid-template-columns: 1fr;\n }\n .mg-bento .bento-card.featured {\n grid-column: 1;\n }\n .mg-bento .bento-card.featured .viewer-container { height: 220px; }\n .mg-bento .bento-card:not(.featured) .viewer-container { height: 130px; }\n .mg-bento .stat-number { font-size: 2.8rem; }\n}\n\n@media (hover: none) {\n .mg-bento .bento-card:hover {\n transform: none;\n border-color: var(--glass-border);\n box-shadow: none;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .mg-bento .bento-card { transition: none; }\n .mg-bento .rotate-hint svg { animation: none; }\n}\n<\/style>\n\n<div class=\"mg-bento\">\n <section class=\"projects-section\">\n\n <div class=\"section-header\">\n <span class=\"section-tag\">\u041d\u0430\u0448\u0435 \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e<\/span>\n <h2 class=\"section-title\">\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b<\/h2>\n <\/div>\n\n <div class=\"bento-grid\">\n\n \n <article class=\"bento-card featured\">\n <div class=\"viewer-container\">\n <div class=\"img-carousel\" id=\"kvou-carousel\">\n <div class=\"img-carousel-track\" id=\"kvou-track\"><\/div>\n <button class=\"carousel-arrow prev\" id=\"kvou-prev\" aria-label=\"\u041d\u0430\u0437\u0430\u0434\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\n <\/button>\n <button class=\"carousel-arrow next\" id=\"kvou-next\" aria-label=\"\u0412\u043f\u0435\u0440\u0451\u0434\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\n <\/button>\n <div class=\"carousel-dots\" id=\"kvou-dots\"><\/div>\n <span class=\"carousel-counter\" id=\"kvou-counter\">1 \/ 16<\/span>\n <\/div>\n <\/div>\n <div class=\"featured-badge\">Featured<\/div>\n <div class=\"card-info\">\n <span class=\"card-category\">\u041d\u0435\u0444\u0442\u0435\u0433\u0430\u0437 \u00b7 \u0413\u0430\u0437\u043e\u0442\u0443\u0440\u0431\u0438\u043d\u043d\u044b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438<\/span>\n <span class=\"card-title\">\u041a\u0412\u041e\u0423 \u0434\u043b\u044f \u0413\u0422\u0423<\/span>\n <p class=\"card-desc\">\u041a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u043e\u0435 \u0432\u043e\u0437\u0434\u0443\u0445\u043e\u043e\u0447\u0438\u0441\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u0433\u0430\u0437\u043e\u0442\u0443\u0440\u0431\u0438\u043d\u043d\u044b\u0445 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043e\u043a. \u041c\u043d\u043e\u0433\u043e\u0441\u0442\u0443\u043f\u0435\u043d\u0447\u0430\u0442\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0432\u043e\u0437\u0434\u0443\u0445\u0430 \u0441 \u0438\u043d\u0435\u0440\u0446\u0438\u043e\u043d\u043d\u044b\u043c, \u043a\u043e\u0430\u043b\u0435\u0441\u0446\u0438\u0440\u0443\u044e\u0449\u0438\u043c \u0438 \u0442\u043e\u043d\u043a\u043e\u0439 \u043e\u0447\u0438\u0441\u0442\u043a\u043e\u0439.<\/p>\n <\/div>\n <div class=\"card-divider\"><\/div>\n <div class=\"card-tags\">\n <span class=\"card-tag\">SolidWorks<\/span>\n <span class=\"card-tag\">\u041a\u0414 + \u0422\u0414<\/span>\n <span class=\"card-tag\">3D-\u043c\u043e\u0434\u0435\u043b\u044c<\/span>\n <span class=\"card-tag\">\u0420\u0430\u0441\u0447\u0451\u0442<\/span>\n <\/div>\n <\/article>\n\n \n <article class=\"bento-card\">\n <div class=\"viewer-container\">\n <model-viewer\n src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/06\/Economizer2.glb\"\n alt=\"\u042d\u043a\u043e\u043d\u043e\u043c\u0430\u0439\u0437\u0435\u0440\"\n camera-controls disable-zoom auto-rotate rotation-per-second=\"25deg\"\n shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\"\n environment-image=\"neutral\"\n camera-orbit=\"45deg 70deg 105%\"\n interaction-prompt=\"none\" loading=\"lazy\">\n <\/model-viewer>\n <div class=\"rotate-hint\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"card-info\">\n <span class=\"card-category\">\u042d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u043a\u0430<\/span>\n <span class=\"card-title\">\u041f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u044b\u0439 \u044d\u043a\u043e\u043d\u043e\u043c\u0430\u0439\u0437\u0435\u0440<\/span>\n <p class=\"card-desc\">\u0423\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0435\u043f\u043b\u0430 \u0434\u044b\u043c\u043e\u0432\u044b\u0445 \u0433\u0430\u0437\u043e\u0432 \u043a\u043e\u0442\u043b\u043e\u0432 \u0438 \u043f\u0435\u0447\u0435\u0439. \u0421\u0438\u0441\u0442\u0435\u043c\u044b \u0442\u0435\u043f\u043b\u043e\u0441\u043d\u0430\u0431\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u0430\u044f \u0442\u0435\u043f\u043b\u043e\u044d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u043a\u0430.<\/p>\n <\/div>\n <\/article>\n\n \n <article class=\"bento-card\">\n <div class=\"viewer-container\">\n <model-viewer\n src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/06\/Reactor2.glb\"\n alt=\"\u0420\u0435\u0430\u043a\u0442\u043e\u0440\"\n camera-controls disable-zoom auto-rotate rotation-per-second=\"25deg\"\n shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\"\n environment-image=\"neutral\"\n camera-orbit=\"45deg 70deg 105%\"\n interaction-prompt=\"none\" loading=\"lazy\">\n <\/model-viewer>\n <div class=\"rotate-hint\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"card-info\">\n <span class=\"card-category\">\u042d\u043a\u043e\u043b\u043e\u0433\u0438\u044f<\/span>\n <span class=\"card-title\">\u0420\u0435\u0430\u043a\u0442\u043e\u0440 \u0442\u0435\u0440\u043c\u043e\u043a\u0430\u0442\u0430\u043b\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u043a\u0438\u0441\u043b\u0435\u043d\u0438\u044f<\/span>\n <p class=\"card-desc\">\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0441\u0430\u0434\u043a\u043e\u0432 \u0441\u0442\u043e\u0447\u043d\u044b\u0445 \u0432\u043e\u0434. \u041e\u043a\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0432\u043b\u0430\u0436\u043d\u044b\u0445 \u043e\u0441\u0430\u0434\u043a\u043e\u0432 \u0432 \u043f\u0441\u0435\u0432\u0434\u043e\u043e\u0436\u0438\u0436\u0435\u043d\u043d\u043e\u043c \u0441\u043b\u043e\u0435.<\/p>\n <\/div>\n <\/article>\n\n \n <article class=\"bento-card\">\n <div class=\"viewer-container\">\n <model-viewer\n src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/06\/Reservoir6.glb\"\n alt=\"\u0420\u0435\u0437\u0435\u0440\u0432\u0443\u0430\u0440\"\n camera-controls disable-zoom auto-rotate rotation-per-second=\"25deg\"\n shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\"\n environment-image=\"neutral\"\n camera-orbit=\"45deg 70deg 105%\"\n interaction-prompt=\"none\" loading=\"lazy\">\n <\/model-viewer>\n <div class=\"rotate-hint\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"\/><\/svg>\n <\/div>\n <\/div>\n <div class=\"card-info\">\n <span class=\"card-category\">\u041d\u0435\u0444\u0442\u0435\u0433\u0430\u0437<\/span>\n <span class=\"card-title\">\u0420\u0412\u0421-200\u043c\u00b3<\/span>\n <p class=\"card-desc\">\u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0435\u0437\u0435\u0440\u0432\u0443\u0430\u0440 \u0434\u043b\u044f \u043d\u0435\u0444\u0442\u0435\u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432. \u041d\u0435\u0444\u0442\u0435\u0431\u0430\u0437\u044b, \u0410\u0417\u0421, \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b.<\/p>\n <\/div>\n <\/article>\n\n \n <article class=\"bento-card stat-card\">\n <span class=\"stat-number\">16+<\/span>\n <span class=\"stat-label\">\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445<br>\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432<\/span>\n <span class=\"stat-sublabel\">\u042d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u043a\u0430 \u00b7 \u041d\u0435\u0444\u0442\u0435\u0433\u0430\u0437 \u00b7 \u042d\u043a\u043e\u043b\u043e\u0433\u0438\u044f<\/span>\n <\/article>\n\n <\/div>\n\n <div class=\"cta-container\">\n <a href=\"https:\/\/mechanogurus.ru\/?page_id=1714\" class=\"view-all-btn\" target=\"_blank\" rel=\"noopener noreferrer\">\n \u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0441\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n <\/svg>\n <\/a>\n <\/div>\n\n <\/section>\n<\/div>\n\n<script>\n(function () {\n\n \/* \u2500\u2500 model-viewer auto-rotate resume \u2500\u2500 *\/\n document.querySelectorAll('.mg-bento model-viewer').forEach(function (viewer) {\n viewer.addEventListener('camera-change', function (e) {\n if (e.detail && e.detail.source === 'user-interaction') {\n viewer.autoRotate = false;\n clearTimeout(viewer._mgResume);\n viewer._mgResume = setTimeout(function () { viewer.autoRotate = true; }, 3000);\n }\n });\n });\n\n \/* \u2500\u2500 \u041a\u0412\u041e\u0423 image carousel \u2500\u2500 *\/\n var BASE = 'https:\/\/mechanogurus.ru';\n var images = [\n '\/wp-content\/uploads\/2026\/03\/KVOU-1FH_1_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-1FH_2_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-1FV_1_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-1FV_2_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-1FV_3_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-1FV_4_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-1FV_5_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-2FV_2_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-1FV_6_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-2FV_1_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-2FV_3_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-2FH_1_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-2FH_2_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-2FH_3_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-3FH_1_logo.png',\n '\/wp-content\/uploads\/2026\/03\/KVOU-3FH_2_logo.png'\n ];\n\n var track = document.getElementById('kvou-track');\n var dotsEl = document.getElementById('kvou-dots');\n var counter = document.getElementById('kvou-counter');\n var prevBtn = document.getElementById('kvou-prev');\n var nextBtn = document.getElementById('kvou-next');\n var total = images.length;\n var current = 0;\n var autoTimer;\n\n \/* Build slides *\/\n images.forEach(function (src, i) {\n var slide = document.createElement('div');\n slide.className = 'img-carousel-slide';\n var img = document.createElement('img');\n img.src = BASE + src;\n img.alt = '\u041a\u0412\u041e\u0423 ' + (i + 1);\n img.loading = i === 0 ? 'eager' : 'lazy';\n img.draggable = false;\n slide.appendChild(img);\n track.appendChild(slide);\n\n var dot = document.createElement('span');\n dot.className = 'carousel-dot' + (i === 0 ? ' active' : '');\n dotsEl.appendChild(dot);\n });\n\n var dots = dotsEl.querySelectorAll('.carousel-dot');\n\n function goTo(idx) {\n if (idx < 0) idx = total - 1;\n if (idx >= total) idx = 0;\n current = idx;\n track.style.transform = 'translateX(-' + (current * 100) + '%)';\n dots.forEach(function (d, i) { d.classList.toggle('active', i === current); });\n counter.textContent = (current + 1) + ' \/ ' + total;\n }\n\n function startAuto() {\n clearInterval(autoTimer);\n autoTimer = setInterval(function () { goTo(current + 1); }, 3500);\n }\n\n function stopAuto() { clearInterval(autoTimer); }\n\n prevBtn.addEventListener('click', function () { stopAuto(); goTo(current - 1); startAuto(); });\n nextBtn.addEventListener('click', function () { stopAuto(); goTo(current + 1); startAuto(); });\n\n \/* Touch\/swipe *\/\n var carousel = document.getElementById('kvou-carousel');\n var touchStartX = 0;\n carousel.addEventListener('touchstart', function (e) {\n touchStartX = e.changedTouches[0].clientX;\n stopAuto();\n }, { passive: true });\n carousel.addEventListener('touchend', function (e) {\n var dx = e.changedTouches[0].clientX - touchStartX;\n if (Math.abs(dx) > 40) goTo(current + (dx < 0 ? 1 : -1));\n startAuto();\n }, { passive: true });\n\n \/* Pause on hover *\/\n carousel.addEventListener('mouseenter', stopAuto);\n carousel.addEventListener('mouseleave', startAuto);\n\n startAuto();\n\n})();\n<\/script>\n\n\n\n<div class=\"ucw-wrap\">\n<style>\n.ucw-wrap,\n.ucw-wrap *{ box-sizing:border-box; }\n\n\/* ---------- OUTER ---------- *\/\n.ucw-wrap{\n --outer: clamp(24px, 4vw, 80px);\n --outer_plus: 30px;\n --outer_tight: max(0px, calc(var(--outer) - var(--outer_plus)));\n\n --maxw: 1600px;\n width: calc(100% - (var(--outer_tight) * 2));\n max-width: var(--maxw);\n margin: clamp(40px, 4vw, 80px) auto;\n}\n\n\/* ---------- INNER BLOCK ---------- *\/\n.ucw{\n --radius: 19px;\n --accent: #E1830F;\n --accent-yellow: #F2B839;\n --bg: #FEF4EE;\n --text: #000;\n\n --gap: clamp(18px, 2.2vw, 36px);\n --pad: clamp(18px, 2.6vw, 48px);\n\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n color: var(--text);\n\n background: var(--bg);\n border-radius: var(--radius);\n box-shadow: 0 30px 60px rgba(0,0,0,0.08);\n\n border: none !important;\n outline: none !important;\n\n display: grid;\n grid-template-columns: 1fr 1.2fr;\n gap: 0;\n align-items: stretch;\n overflow: hidden;\n}\n\n\/* ---------- LEFT PANEL ---------- *\/\n.ucw-media{\n position: relative;\n display: flex;\n min-height: 400px;\n}\n\n.ucw-media img{\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n display: block;\n transition: opacity .35s ease;\n}\n\n\/* ---------- DETAIL PANEL (overlays image) ---------- *\/\n.ucw-detail{\n position: absolute;\n inset: 0;\n background: linear-gradient(145deg, #1a0e00, #2e1800);\n padding: clamp(24px, 3vw, 44px);\n display: flex;\n flex-direction: column;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n transition: opacity .35s ease;\n}\n\n.ucw-detail.is-active{\n opacity: 1;\n pointer-events: auto;\n}\n\n.ucw-media img.is-hidden{\n opacity: 0;\n pointer-events: none;\n}\n\n.ucw-detail__num{\n font-size: 3.5rem;\n font-weight: 900;\n color: var(--accent);\n opacity: .25;\n line-height: 1;\n margin-bottom: 8px;\n font-variant-numeric: tabular-nums;\n}\n\n.ucw-detail__title{\n font-size: clamp(1.1rem, 1.8vw, 1.5rem);\n font-weight: 800;\n color: #F2B839;\n margin: 0 0 16px;\n line-height: 1.25;\n}\n\n.ucw-detail__body{\n font-size: clamp(.9rem, 1.1vw, 1rem);\n line-height: 1.7;\n color: rgba(255,255,255,.82);\n margin: 0 0 28px;\n}\n\n\/* ---------- TIMER BAR ---------- *\/\n.ucw-detail__timer{\n width: 100%;\n height: 3px;\n background: rgba(255,255,255,.12);\n border-radius: 999px;\n margin-bottom: 20px;\n overflow: hidden;\n}\n\n.ucw-detail__timer-bar{\n height: 100%;\n width: 100%;\n background: linear-gradient(90deg, var(--accent), var(--accent-yellow));\n border-radius: 999px;\n transform-origin: left;\n transform: scaleX(1);\n transition: none;\n}\n\n.ucw-detail__timer-bar.is-running{\n transform: scaleX(0);\n transition: transform 6s linear;\n}\n\n.ucw-detail__close{\n align-self: flex-start;\n display: inline-flex;\n align-items: center;\n gap: 7px;\n background: rgba(226,131,15,.15);\n border: 1px solid rgba(226,131,15,.3);\n color: var(--accent);\n font-size: .82rem;\n font-weight: 700;\n padding: 7px 16px;\n border-radius: 999px;\n cursor: pointer;\n transition: background .2s ease;\n}\n\n.ucw-detail__close:hover{\n background: rgba(226,131,15,.28);\n}\n\n\/* ---------- RIGHT CONTENT ---------- *\/\n.ucw-content{\n padding: var(--pad);\n display: flex;\n flex-direction: column;\n}\n\n\/* ---------- HEADER ---------- *\/\n.ucw-header{ margin-bottom: var(--gap); }\n\n.ucw-h{\n font-size: clamp(1.35rem, 2.2vw, 2.4rem);\n line-height: 1.2;\n margin: 0 0 12px;\n color: var(--accent);\n position: relative;\n padding-bottom: 14px;\n border: none !important;\n}\n\n.ucw-h::after{\n content:'';\n position:absolute;\n left:0;\n bottom:0;\n width: clamp(80px, 12vw, 200px);\n height: 3px;\n background: linear-gradient(90deg, var(--accent), transparent);\n}\n\n.ucw-sub{\n font-size: clamp(0.95rem, 1.1vw, 1.05rem);\n line-height: 1.55;\n color: #000;\n opacity: 0.78;\n margin: 0;\n}\n\n\/* ---------- GRID ---------- *\/\n.ucw-grid{\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: clamp(10px, 1.2vw, 14px) clamp(16px, 2vw, 32px);\n margin-bottom: var(--gap);\n align-items: start;\n}\n\n.ucw-item{ position: relative; }\n\n.ucw-radio{\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n pointer-events: none;\n}\n\n\/* ---------- CARD ---------- *\/\n.ucw-card{\n border-radius: 16px;\n background: rgba(226,131,15,0.06);\n overflow: hidden;\n transition: transform .22s ease, background .25s ease, box-shadow .25s ease;\n border: none !important;\n outline: none !important;\n box-shadow: none !important;\n}\n\n.ucw-card:hover{\n background: rgba(226,131,15,0.12);\n transform: translateX(8px);\n box-shadow: -6px 0 0 var(--accent) !important;\n}\n\n\/* ---------- LABEL ---------- *\/\n.ucw-lbl{\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n cursor: pointer;\n user-select: none;\n}\n\n.ucw-num{\n font-size: 0.72rem;\n font-weight: 800;\n color: var(--accent);\n min-width: 22px;\n}\n\n.ucw-txt{\n font-size: clamp(0.92rem, 1.05vw, 0.98rem);\n line-height: 1.35;\n font-weight: 650;\n flex: 1;\n}\n\n\/* ---------- CHECKED \u2014 left border only ---------- *\/\n.ucw-radio:checked + .ucw-card{\n background: rgba(226,131,15,0.10);\n box-shadow: -6px 0 0 var(--accent) !important;\n}\n\n\/* ---------- FOOTER ---------- *\/\n.ucw-footer{\n display: grid;\n grid-template-columns: 1fr auto;\n gap: var(--gap);\n align-items: center;\n margin-top: auto;\n}\n\n.ucw-sol{\n padding: clamp(14px, 1.6vw, 20px);\n background: rgba(226,131,15,0.06);\n border-left: 5px solid var(--accent) !important;\n border-radius: 0 12px 12px 0;\n}\n\n.ucw-sol h3{\n margin: 0 0 6px;\n font-size: 0.95rem;\n color: var(--accent);\n}\n\n.ucw-sol p{\n margin: 0;\n font-size: 0.9rem;\n opacity: 0.8;\n}\n\n.ucw-cta{\n padding: 16px 40px;\n background: linear-gradient(135deg, var(--accent), var(--accent-yellow));\n border-radius: 999px;\n text-decoration: none;\n font-weight: 800;\n color: #000;\n white-space: nowrap;\n transition: transform .22s ease, box-shadow .22s ease;\n}\n\n.ucw-cta:hover{\n transform: translateY(-3px);\n box-shadow: 0 16px 36px rgba(226,131,15,.35);\n color: #000;\n text-decoration: none;\n}\n\n\/* ---------- RESPONSIVE ---------- *\/\n@media (max-width: 960px){\n .ucw{\n grid-template-columns: 1fr;\n }\n .ucw-media{\n min-height: 260px;\n aspect-ratio: 16\/9;\n }\n .ucw-grid{ grid-template-columns: 1fr; }\n .ucw-footer{ grid-template-columns: 1fr; }\n .ucw-cta{ text-align: center; }\n}\n\n@media (max-width: 600px){\n .ucw-wrap{\n width: calc(100% - 24px);\n }\n}\n<\/style>\n\n<div class=\"ucw\">\n\n \n <div class=\"ucw-media\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/ExternalEngineering.jpeg\" alt=\"\u0412\u043d\u0435\u0448\u043d\u044f\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430\" loading=\"lazy\">\n <div class=\"ucw-detail\" id=\"ucw-detail\">\n <div class=\"ucw-detail__num\" id=\"ucw-detail-num\">01<\/div>\n <h3 class=\"ucw-detail__title\" id=\"ucw-detail-title\"><\/h3>\n <p class=\"ucw-detail__body\" id=\"ucw-detail-body\"><\/p>\n <div class=\"ucw-detail__timer\">\n <div class=\"ucw-detail__timer-bar\" id=\"ucw-timer-bar\"><\/div>\n <\/div>\n <button class=\"ucw-detail__close\" id=\"ucw-detail-close\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M1 1l10 10M11 1L1 11\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <\/svg>\n \u0417\u0430\u043a\u0440\u044b\u0442\u044c\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"ucw-content\">\n\n <div class=\"ucw-header\">\n <h2 class=\"ucw-h\">\u041a\u043e\u0433\u0434\u0430 \u0432\u0430\u0448\u0435\u043c\u0443 \u0431\u0438\u0437\u043d\u0435\u0441\u0443 \u043d\u0443\u0436\u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u044f\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430?<\/h2>\n <p class=\"ucw-sub\">\u0417\u0430 \u0433\u043e\u0434\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u044b \u0432\u044b\u0434\u0435\u043b\u0438\u043b\u0438 8 \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0438\u0437\u043d\u0435\u0441\u0443 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u043d\u0435\u0448\u043d\u044f\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430.<\/p>\n <\/div>\n\n <div class=\"ucw-grid\">\n\n <div class=\"ucw-item\">\n <input type=\"radio\" name=\"ucw\" id=\"ucw1\" class=\"ucw-radio\"\n data-num=\"01\"\n data-title=\"\u0421\u0440\u043e\u0447\u043d\u044b\u0435 \u0437\u0430\u043a\u0430\u0437\u044b \u0438 \u043f\u0438\u043a\u043e\u0432\u044b\u0435 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438\"\n data-body=\"\u041a\u043e\u0433\u0434\u0430 \u043e\u0431\u044a\u0451\u043c \u0437\u0430\u043a\u0430\u0437\u043e\u0432 \u0440\u0435\u0437\u043a\u043e \u0440\u0430\u0441\u0442\u0451\u0442, \u0430 \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043d\u0435 \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e \u0441\u0440\u043e\u043a\u0430\u043c\u0438. \u041c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432.\">\n <div class=\"ucw-card\">\n <label class=\"ucw-lbl\" for=\"ucw1\">\n <span class=\"ucw-num\">01<\/span>\n <span class=\"ucw-txt\">\u0421\u0440\u043e\u0447\u043d\u044b\u0435 \u0437\u0430\u043a\u0430\u0437\u044b \u0438 \u043f\u0438\u043a\u043e\u0432\u044b\u0435 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"ucw-item\">\n <input type=\"radio\" name=\"ucw\" id=\"ucw2\" class=\"ucw-radio\"\n data-num=\"02\"\n data-title=\"\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b\"\n data-body=\"\u041d\u0435\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u041a\u0411, \u043d\u043e \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e. \u041c\u044b \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0435\u0437 \u043d\u0430\u0439\u043c\u0430 \u0448\u0442\u0430\u0442\u0430.\">\n <div class=\"ucw-card\">\n <label class=\"ucw-lbl\" for=\"ucw2\">\n <span class=\"ucw-num\">02<\/span>\n <span class=\"ucw-txt\">\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"ucw-item\">\n <input type=\"radio\" name=\"ucw\" id=\"ucw3\" class=\"ucw-radio\"\n data-num=\"03\"\n data-title=\"\u0425\u0430\u043e\u0441 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438\"\n data-body=\"\u0427\u0435\u0440\u0442\u0435\u0436\u0438 \u0440\u0430\u0437\u0431\u0440\u043e\u0441\u0430\u043d\u044b, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442. \u041c\u044b \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043c \u041a\u0414 \u0432 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u0435\u0451 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u043e\u0439.\">\n <div class=\"ucw-card\">\n <label class=\"ucw-lbl\" for=\"ucw3\">\n <span class=\"ucw-num\">03<\/span>\n <span class=\"ucw-txt\">\u0425\u0430\u043e\u0441 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"ucw-item\">\n <input type=\"radio\" name=\"ucw\" id=\"ucw4\" class=\"ucw-radio\"\n data-num=\"04\"\n data-title=\"\u0421\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0441\u0435\u0431\u0435\u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438\"\n data-body=\"\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u0441\u043d\u0438\u0437\u0438\u0442\u044c \u0437\u0430\u0442\u0440\u0430\u0442\u044b \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e.\">\n <div class=\"ucw-card\">\n <label class=\"ucw-lbl\" for=\"ucw4\">\n <span class=\"ucw-num\">04<\/span>\n <span class=\"ucw-txt\">\u0421\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0441\u0435\u0431\u0435\u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"ucw-item\">\n <input type=\"radio\" name=\"ucw\" id=\"ucw5\" class=\"ucw-radio\"\n data-num=\"05\"\n data-title=\"\u0421\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u0442\u0440\u0430\u0442 \u043d\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\"\n data-body=\"\u041d\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0448\u0442\u0430\u0442. \u0412\u044b \u043f\u043b\u0430\u0442\u0438\u0442\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.\">\n <div class=\"ucw-card\">\n <label class=\"ucw-lbl\" for=\"ucw5\">\n <span class=\"ucw-num\">05<\/span>\n <span class=\"ucw-txt\">\u0421\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u0442\u0440\u0430\u0442 \u043d\u0430 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"ucw-item\">\n <input type=\"radio\" name=\"ucw\" id=\"ucw6\" class=\"ucw-radio\"\n data-num=\"06\"\n data-title=\"\u0422\u0443\u043f\u0438\u043a \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435\"\n data-body=\"\u041a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f \u0438 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443.\">\n <div class=\"ucw-card\">\n <label class=\"ucw-lbl\" for=\"ucw6\">\n <span class=\"ucw-num\">06<\/span>\n <span class=\"ucw-txt\">\u0422\u0443\u043f\u0438\u043a \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"ucw-item\">\n <input type=\"radio\" name=\"ucw\" id=\"ucw7\" class=\"ucw-radio\"\n data-num=\"07\"\n data-title=\"\u0418\u0434\u0435\u044f \u0431\u0435\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438\"\n data-body=\"\u041f\u043e\u043c\u043e\u0433\u0430\u0435\u043c \u0434\u043e\u0432\u0435\u0441\u0442\u0438 \u0438\u0434\u0435\u044e \u0434\u043e \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430.\">\n <div class=\"ucw-card\">\n <label class=\"ucw-lbl\" for=\"ucw7\">\n <span class=\"ucw-num\">07<\/span>\n <span class=\"ucw-txt\">\u0418\u0434\u0435\u044f \u0431\u0435\u0437 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"ucw-item\">\n <input type=\"radio\" name=\"ucw\" id=\"ucw8\" class=\"ucw-radio\"\n data-num=\"08\"\n data-title=\"\u0420\u0435\u0432\u0435\u0440\u0441-\u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\"\n data-body=\"\u0421\u043e\u0437\u0434\u0430\u0451\u043c 3D-\u043c\u043e\u0434\u0435\u043b\u044c \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043f\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0434\u0435\u0442\u0430\u043b\u0438.\">\n <div class=\"ucw-card\">\n <label class=\"ucw-lbl\" for=\"ucw8\">\n <span class=\"ucw-num\">08<\/span>\n <span class=\"ucw-txt\">\u0420\u0435\u0432\u0435\u0440\u0441-\u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"ucw-footer\">\n <div class=\"ucw-sol\">\n <h3>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0430\u043c\u0438:<\/h3>\n <p>\u0412\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432 \u0441\u0440\u043e\u043a, \u0431\u0435\u0437 \u043a\u0430\u0434\u0440\u043e\u0432\u044b\u0445 \u0440\u0438\u0441\u043a\u043e\u0432.<\/p>\n <\/div>\n <a href=\"https:\/\/n8n.mechanogurus.ru\/form\/105adc81-c50a-40f0-ab54-f0b65857d49e\" class=\"ucw-cta\">\n \u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443 \u2192\n <\/a>\n <\/div>\n\n <\/div>\n\n<\/div>\n\n<script>\n(function(){\n const radios = document.querySelectorAll('.ucw-radio');\n const detail = document.getElementById('ucw-detail');\n const img = document.querySelector('.ucw-media img');\n const dNum = document.getElementById('ucw-detail-num');\n const dTitle = document.getElementById('ucw-detail-title');\n const dBody = document.getElementById('ucw-detail-body');\n const closeBtn = document.getElementById('ucw-detail-close');\n const timerBar = document.getElementById('ucw-timer-bar');\n\n let autoHideTimer = null;\n\n function showDetail(radio) {\n dNum.textContent = radio.dataset.num;\n dTitle.textContent = radio.dataset.title;\n dBody.textContent = radio.dataset.body;\n\n detail.classList.add('is-active');\n img.classList.add('is-hidden');\n\n \/\/ reset timer bar\n timerBar.classList.remove('is-running');\n timerBar.style.transition = 'none';\n timerBar.style.transform = 'scaleX(1)';\n\n \/\/ trigger reflow so transition restarts cleanly\n void timerBar.offsetWidth;\n timerBar.style.transition = '';\n timerBar.classList.add('is-running');\n\n clearTimeout(autoHideTimer);\n autoHideTimer = setTimeout(hideDetail, 6000);\n }\n\n function hideDetail() {\n clearTimeout(autoHideTimer);\n autoHideTimer = null;\n timerBar.classList.remove('is-running');\n detail.classList.remove('is-active');\n img.classList.remove('is-hidden');\n radios.forEach(r => r.checked = false);\n }\n\n radios.forEach(radio => {\n radio.addEventListener('change', function() {\n if (this.checked) showDetail(this);\n });\n });\n\n closeBtn.addEventListener('click', hideDetail);\n})();\n<\/script>\n\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-background-color has-text-color has-link-color wp-elements-f681540f52347ed1336722c582dc52c5 is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:20px;padding-right:30px;padding-bottom:20px;padding-left:51px\">\n<style>\n.mg-vdi,\n.mg-vdi *,\n.mg-vdi *::before,\n.mg-vdi *::after {\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n}\n\n.mg-vdi {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n position: relative;\n isolation: isolate;\n}\n\n\/* \u2500\u2500 Per-card background (clipped by stack-card overflow:hidden) \u2500\u2500 *\/\n.mg-vdi .card-bg {\n position: absolute;\n inset: 0;\n z-index: 0;\n background: #000;\n pointer-events: none;\n overflow: hidden;\n}\n\n.mg-vdi .orange-glow {\n position: absolute;\n width: 700px; height: 700px;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n background: radial-gradient(circle, rgba(242,184,57,0.12) 0%, rgba(255,100,0,0.06) 25%, transparent 70%);\n filter: blur(70px);\n animation: mg-vdi-pulse 8s ease-in-out infinite;\n pointer-events: none;\n}\n\n@keyframes mg-vdi-pulse {\n 0%, 100% { opacity: 0.6; transform: translate(-50%,-50%) scale(1); }\n 50% { opacity: 0.9; transform: translate(-50%,-50%) scale(1.1); }\n}\n\n.mg-vdi .gradient-bg {\n position: absolute;\n width: 200%; height: 200%;\n background:\n radial-gradient(circle at 20% 30%, rgba(242,184,57,0.04) 0%, transparent 40%),\n radial-gradient(circle at 80% 70%, rgba(255,100,0,0.03) 0%, transparent 40%),\n linear-gradient(135deg, #000 0%, #0a0a0a 50%, #000 100%);\n animation: mg-vdi-grad 30s ease-in-out infinite alternate;\n pointer-events: none;\n}\n\n@keyframes mg-vdi-grad {\n 0% { transform: translate(0,0) rotate(0deg); }\n 100% { transform: translate(-10%,-10%) rotate(3deg); }\n}\n\n.mg-vdi .circuit-grid {\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(to right, rgba(242,184,57,0.06) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(242,184,57,0.06) 1px, transparent 1px);\n background-size: 60px 60px;\n animation: mg-vdi-grid 40s linear infinite;\n opacity: 0.3;\n pointer-events: none;\n}\n\n@keyframes mg-vdi-grid {\n 0% { transform: translate(0,0); }\n 100% { transform: translate(60px,60px); }\n}\n\n\/* \u2500\u2500 Stack container \u2500\u2500 *\/\n.mg-vdi .perfect-stack-container {\n position: relative;\n z-index: 0;\n width: 100%;\n \/* 6 cards \u00d7 100svh \u2014 uses small viewport height so browser chrome doesn't count *\/\n min-height: 600vh;\n min-height: 600svh;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n\/* \u2500\u2500 Stack cards \u2500\u2500 *\/\n.mg-vdi .stack-card {\n position: -webkit-sticky;\n position: sticky;\n top: 0;\n width: 100%;\n \/* svh: excludes mobile browser chrome so card never clips behind address bar *\/\n height: 100vh;\n height: 100svh;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n \/* Safe area insets for notched phones *\/\n padding:\n max(16px, env(safe-area-inset-top))\n max(16px, env(safe-area-inset-right))\n max(16px, env(safe-area-inset-bottom))\n max(16px, env(safe-area-inset-left));\n}\n\n.mg-vdi .stack-card::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: 1;\n background: linear-gradient(135deg,\n rgba(242,184,57,0.09),\n transparent 30%,\n transparent 70%,\n rgba(242,184,57,0.05));\n pointer-events: none;\n}\n\n.mg-vdi .card-1 { z-index: 1; }\n.mg-vdi .card-2 { z-index: 2; }\n.mg-vdi .card-3 { z-index: 3; }\n.mg-vdi .card-4 { z-index: 4; }\n.mg-vdi .card-5 { z-index: 5; }\n.mg-vdi .card-6 { z-index: 6; }\n\n\/* \u2500\u2500 Card content panel \u2500\u2500 *\/\n.mg-vdi .card-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 92%;\n max-width: 1200px;\n \/* Height: flexible so content never clips on short phones *\/\n min-height: 60%;\n max-height: 92%;\n overflow-y: auto;\n \/* Hide scrollbar but allow scroll if needed on very small screens *\/\n scrollbar-width: none;\n -ms-overflow-style: none;\n margin: auto;\n background: rgba(15,15,15,0.95);\n border-radius: 20px;\n padding: clamp(20px, 4vw, 40px) clamp(20px, 5vw, 48px);\n box-shadow:\n 0 16px 48px rgba(0,0,0,0.8),\n inset 0 1px 0 rgba(242,184,57,0.12);\n text-align: center;\n position: relative;\n z-index: 2;\n}\n\n.mg-vdi .card-content::-webkit-scrollbar { display: none; }\n\n\/* Backdrop blur only on capable desktop \u2014 too heavy on mobile GPU *\/\n@media (hover: hover) and (pointer: fine) {\n @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {\n .mg-vdi .card-content {\n background: rgba(15,15,15,0.72);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n }\n }\n}\n\n\/* \u2500\u2500 Typography \u2500\u2500 *\/\n.mg-vdi .card-content h2 {\n \/* Mobile floor is 1.5rem (24px), not 2.2rem \u2014 prevents overflow on 360px phones *\/\n font-size: clamp(1.5rem, 5vw, 3.2rem);\n margin: 0 0 clamp(1rem, 2.5vw, 2rem);\n line-height: 1.25;\n font-weight: 700;\n color: #ffffff;\n width: 100%;\n letter-spacing: -0.3px;\n padding-bottom: clamp(0.7rem, 1.5vw, 1.2rem);\n position: relative;\n}\n\n.mg-vdi .card-content h2::after {\n content: '';\n display: block;\n width: 40px;\n height: 3px;\n background: linear-gradient(90deg, #F2B839, #E1830F);\n border-radius: 2px;\n margin: clamp(0.5rem, 1vw, 0.9rem) auto 0;\n}\n\n.mg-vdi .card-content p {\n \/* Mobile floor 1rem (16px) \u2014 readable without zooming *\/\n font-size: clamp(1rem, 3.2vw, 1.75rem);\n line-height: 1.6;\n color: rgba(255,255,255,0.88);\n max-width: 92%;\n margin: 0 auto;\n font-weight: 400;\n}\n\n\/* \u2500\u2500 Slide-in animation \u2500\u2500 *\/\n.mg-vdi .slide-in {\n animation: mg-vdi-slidein 1.1s cubic-bezier(0.22,1,0.36,1) forwards;\n}\n\n@keyframes mg-vdi-slidein {\n from { transform: translateY(24px) scale(0.96); opacity: 0; }\n to { transform: translateY(0) scale(1); opacity: 1; }\n}\n\n\/* \u2500\u2500 Progress dots \u2014 desktop only \u2500\u2500\n position:fixed can be clipped on mobile by WP stacking contexts *\/\n.mg-vdi .mg-dots {\n position: fixed;\n right: 22px;\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n flex-direction: column;\n gap: 11px;\n z-index: 100;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.4s;\n}\n\n.mg-vdi .mg-dots.visible { opacity: 1; }\n\n.mg-vdi .mg-dot {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: rgba(255,255,255,0.2);\n border: 1px solid rgba(255,255,255,0.15);\n transition: background .3s, transform .3s, border-color .3s;\n display: block;\n}\n\n.mg-vdi .mg-dot.active {\n background: #F2B839;\n border-color: #F2B839;\n transform: scale(1.5);\n box-shadow: 0 0 7px rgba(242,184,57,0.6);\n}\n\n\/* \u2500\u2500 Scroll hint (mobile only) \u2500\u2500 *\/\n.mg-vdi .mg-scroll-hint {\n display: none;\n position: absolute;\n bottom: max(20px, env(safe-area-inset-bottom));\n left: 50%;\n transform: translateX(-50%);\n flex-direction: column;\n align-items: center;\n gap: 4px;\n z-index: 10;\n pointer-events: none;\n opacity: 0.5;\n animation: mg-hint-bounce 2s ease-in-out infinite;\n}\n\n.mg-vdi .stack-card-1 .mg-scroll-hint { display: flex; }\n\n.mg-vdi .mg-scroll-hint span {\n font-size: 0.6rem;\n letter-spacing: 0.12em;\n color: rgba(255,255,255,0.6);\n text-transform: uppercase;\n}\n\n.mg-vdi .mg-scroll-hint svg {\n width: 16px; height: 16px;\n stroke: rgba(255,255,255,0.5);\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n fill: none;\n}\n\n@keyframes mg-hint-bounce {\n 0%,100% { transform: translateX(-50%) translateY(0); }\n 50% { transform: translateX(-50%) translateY(5px); }\n}\n\n\/* \u2500\u2500 Metrics grid \u2500\u2500 *\/\n.mg-vdi .mg-metrics {\n display: grid;\n \/* Desktop: 5 columns; collapses gracefully via auto-fill *\/\n grid-template-columns: repeat(5, 1fr);\n gap: 12px;\n margin-top: clamp(1.2rem, 2.5vw, 2rem);\n width: 100%;\n}\n\n.mg-vdi .mg-metric {\n background: rgba(242,184,57,0.07);\n border: 1px solid rgba(242,184,57,0.20);\n border-radius: 12px;\n padding: clamp(10px, 1.5vw, 16px) clamp(8px, 1.2vw, 12px);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n}\n\n.mg-vdi .mg-metric-val {\n font-size: clamp(1.1rem, 2.2vw, 1.8rem);\n font-weight: 700;\n color: #F2B839;\n line-height: 1;\n white-space: nowrap;\n}\n\n.mg-vdi .mg-metric-lbl {\n font-size: clamp(0.62rem, 1.1vw, 0.76rem);\n color: rgba(255,255,255,0.48);\n line-height: 1.3;\n text-align: center;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MOBILE BREAKPOINTS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n\/* Touch devices: reduce heavy animations to save battery *\/\n@media (hover: none) and (pointer: coarse) {\n .mg-vdi .gradient-bg { animation-duration: 60s; }\n .mg-vdi .circuit-grid { animation-duration: 80s; opacity: 0.18; }\n .mg-vdi .orange-glow { filter: blur(50px); animation-duration: 12s; }\n .mg-vdi .mg-dots { display: none; } \/* fixed positioning unreliable on mobile *\/\n}\n\n\/* Tablet portrait *\/\n@media (max-width: 768px) {\n .mg-vdi .mg-metrics {\n grid-template-columns: repeat(3, 1fr);\n }\n \/* Last metric spans full width to avoid orphan *\/\n .mg-vdi .mg-metric:last-child {\n grid-column: 1 \/ -1;\n }\n}\n\n\/* Phone landscape *\/\n@media (max-width: 768px) and (orientation: landscape) {\n .mg-vdi .card-content {\n max-height: 96%;\n padding: 16px 24px;\n border-radius: 14px;\n justify-content: flex-start;\n padding-top: 20px;\n }\n .mg-vdi .card-content h2 {\n font-size: clamp(1.2rem, 4vw, 1.8rem);\n margin-bottom: 0.6rem;\n padding-bottom: 0.5rem;\n }\n .mg-vdi .card-content p { font-size: clamp(0.88rem, 2.2vw, 1.15rem); }\n .mg-vdi .mg-metrics { grid-template-columns: repeat(3, 1fr); margin-top: 0.8rem; gap: 7px; }\n .mg-vdi .mg-metric:last-child { grid-column: auto; }\n .mg-vdi .mg-metric-val { font-size: clamp(1rem, 2vw, 1.4rem); }\n}\n\n\/* Phone portrait \u2264 480px \u2014 2-col metrics, tighter padding *\/\n@media (max-width: 480px) {\n .mg-vdi .card-content {\n width: 94%;\n border-radius: 16px;\n }\n .mg-vdi .mg-metrics {\n grid-template-columns: repeat(2, 1fr);\n }\n .mg-vdi .mg-metric:last-child {\n grid-column: 1 \/ -1;\n }\n}\n\n\/* Very small phones \u2264 360px *\/\n@media (max-width: 360px) {\n .mg-vdi .card-content h2 { font-size: 1.3rem; letter-spacing: 0; }\n .mg-vdi .card-content p { font-size: 0.95rem; max-width: 100%; }\n .mg-vdi .mg-metrics { grid-template-columns: repeat(2, 1fr); gap: 6px; }\n .mg-vdi .mg-metric-val { font-size: 1rem; }\n .mg-vdi .mg-metric-lbl { font-size: 0.58rem; }\n}\n\n\/* \u2500\u2500 Reduced motion \u2500\u2500 *\/\n@media (prefers-reduced-motion: reduce) {\n .mg-vdi .gradient-bg,\n .mg-vdi .circuit-grid,\n .mg-vdi .orange-glow,\n .mg-vdi .mg-scroll-hint { animation: none !important; }\n .mg-vdi .slide-in { animation: none !important; opacity: 1; transform: none; }\n}\n<\/style>\n\n<div class=\"mg-vdi\">\n\n \n <div class=\"mg-dots\" id=\"mg-vdi-dots\">\n <span class=\"mg-dot active\"><\/span>\n <span class=\"mg-dot\"><\/span>\n <span class=\"mg-dot\"><\/span>\n <span class=\"mg-dot\"><\/span>\n <span class=\"mg-dot\"><\/span>\n <span class=\"mg-dot\"><\/span>\n <\/div>\n\n <div class=\"perfect-stack-container\">\n\n <div class=\"stack-card card-1\">\n <div class=\"card-bg\">\n <div class=\"gradient-bg\"><\/div>\n <div class=\"circuit-grid\"><\/div>\n <div class=\"orange-glow\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <h2>\u041c\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u0432 \u0435\u0434\u0438\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u2014 \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0438\u044f<\/h2>\n <p>\u0412\u0441\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u00ab\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\u00bb \u0432\u0435\u0434\u0443\u0442\u0441\u044f \u0432 \u0435\u0434\u0438\u043d\u043e\u0439 \u0437\u0430\u0449\u0438\u0449\u0451\u043d\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435. \n\u042d\u0442\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043f\u043e\u0442\u0435\u0440\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u0435\u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u0432 \u041a\u0414 \u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043e\u0432.\n\u0412\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u0430\u043a \u043e\u0442 \u043e\u0434\u043d\u043e\u0439 \u0441\u043b\u0430\u0436\u0435\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b.<\/p>\n <\/div>\n \n <div class=\"mg-scroll-hint\" aria-hidden=\"true\">\n <span>\u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u0435<\/span>\n <svg viewBox=\"0 0 24 24\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\n <\/div>\n <\/div>\n\n <div class=\"stack-card card-2\">\n <div class=\"card-bg\">\n <div class=\"gradient-bg\"><\/div>\n <div class=\"circuit-grid\"><\/div>\n <div class=\"orange-glow\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <h2>\u0412\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441, \u0430 \u043d\u0435 \u0445\u0430\u043e\u0441 \u0432 \u0437\u0430\u0434\u0430\u0447\u0430\u0445<\/h2>\n <p>\u0420\u0430\u0431\u043e\u0442\u0430 \u0440\u0430\u0437\u0431\u0438\u0442\u0430 \u043d\u0430 \u044d\u0442\u0430\u043f\u044b \u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0441 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c\u0438 \u0441\u0440\u043e\u043a\u0430\u043c\u0438 \u0438 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438. \n\u0412\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u0438\u0434\u0438\u0442\u0435 \u0432 \u041a\u0430\u043d\u0431\u0430\u043d\u0435, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438 \u043d\u0430 \u043a\u0430\u043a\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f. \n\u041d\u0438\u043a\u0430\u043a\u0438\u0445 \u00ab\u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c\u00bb \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u0441\u0442\u0430\u0442\u0443\u0441 \u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u0432\u043f\u0435\u0440\u0451\u0434.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"stack-card card-3\">\n <div class=\"card-bg\">\n <div class=\"gradient-bg\"><\/div>\n <div class=\"circuit-grid\"><\/div>\n <div class=\"orange-glow\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <h2>\u041d\u0438\u043a\u0430\u043a\u0438\u0445 \u00ab\u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439\u00bb \u0438 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/h2>\n <p>\u0412\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f. \n\u0420\u0430\u0431\u043e\u0442\u0430 \u0432\u0435\u0434\u0451\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0437\u0430\u0434\u0430\u0447, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \n\u0412\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u0438\u0434\u0438\u0442\u0435 \u0441\u0442\u0430\u0442\u0443\u0441 \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"stack-card card-4\">\n <div class=\"card-bg\">\n <div class=\"gradient-bg\"><\/div>\n <div class=\"circuit-grid\"><\/div>\n <div class=\"orange-glow\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <h2>\u0426\u0438\u0444\u0440\u043e\u0432\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0443\u0441\u043a\u043e\u0440\u044f\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0432 2\u20133 \u0440\u0430\u0437\u0430<\/h2>\n <p>\u041c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0441\u0431\u043e\u0440\u043e\u043a \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u0418\u043d\u0436\u0435\u043d\u0435\u0440 \u0442\u0440\u0430\u0442\u0438\u0442 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u2014 \u043d\u0435 \u043d\u0430 \u0440\u0443\u0442\u0438\u043d\u043d\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435<\/p>\n <\/div>\n <\/div>\n\n <div class=\"stack-card card-5\">\n <div class=\"card-bg\">\n <div class=\"gradient-bg\"><\/div>\n <div class=\"circuit-grid\"><\/div>\n <div class=\"orange-glow\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <h2>\u0412\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043d\u0430\u0448\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0434\u0451\u0436\u043d\u043e \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u044b<\/h2>\n <p>\u0412\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0437\u0430\u0449\u0438\u0449\u0451\u043d\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0443\u0440\u0435 \u2014 \u043d\u0435 \u043d\u0430 \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0430\u0445 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u043e\u0432, \u043d\u0435 \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0434\u0438\u0441\u043a\u0430\u0445. \u0427\u0435\u0440\u0442\u0435\u0436\u0438, \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0438\u0437\u0432\u043d\u0435. \u0412\u0430\u0448\u0430 \u0438\u043d\u0442\u0435\u043b\u043b\u0435\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432\u0430\u0448\u0435\u0439<\/p>\n <\/div>\n <\/div>\n\n <div class=\"stack-card card-6\">\n <div class=\"card-bg\">\n <div class=\"gradient-bg\"><\/div>\n <div class=\"circuit-grid\"><\/div>\n <div class=\"orange-glow\"><\/div>\n <\/div>\n <div class=\"card-content\">\n <h2>\u0418\u0442\u043e\u0433: \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u2014 \u0433\u0434\u0435 \u0431\u044b \u043c\u044b \u043d\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0438\u0441\u044c<\/h2>\n <p>\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u2014 \u043d\u0435 \u0446\u0435\u043b\u044c, \u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043b\u0443\u0447\u0448\u0438\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u0432 \u043f\u043e\u0434 \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0433\u0435\u043e\u0433\u0440\u0430\u0444\u0438\u0438<\/p>\n <div class=\"mg-metrics\">\n <div class=\"mg-metric\">\n <span class=\"mg-metric-val\">5300+<\/span>\n <span class=\"mg-metric-lbl\">\u043f\u043e\u043a\u0443\u043f\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0443\u044e\u0449\u0438\u0445 \u0432 \u0435\u0434\u0438\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435<\/span>\n <\/div>\n <div class=\"mg-metric\">\n <span class=\"mg-metric-val\"><50 \u043c\u0441<\/span>\n <span class=\"mg-metric-lbl\">\u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0441\u0435\u0441\u0441\u0438\u0438 \u0438\u0437 \u043b\u044e\u0431\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0420\u0424<\/span>\n <\/div>\n <div class=\"mg-metric\">\n <span class=\"mg-metric-val\">\u00d72\u20133<\/span>\n <span class=\"mg-metric-lbl\">\u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 \u0437\u0430 \u0441\u0447\u0451\u0442 \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432<\/span>\n <\/div>\n <div class=\"mg-metric\">\n <span class=\"mg-metric-val\">100%<\/span>\n <span class=\"mg-metric-lbl\">\u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 PDM<\/span>\n <\/div>\n <div class=\"mg-metric\">\n <span class=\"mg-metric-val\">\u0432\u0441\u044f \u0420\u0424<\/span>\n <span class=\"mg-metric-lbl\">\u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u0431\u0430\u0437\u0435 \u041f\u041a\u0418 \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\n\n<script>\n(function () {\n var vdi = document.querySelector('.mg-vdi');\n var cards = document.querySelectorAll('.mg-vdi .card-content');\n var dots = document.querySelectorAll('.mg-vdi .mg-dot');\n var dotsWrap = document.getElementById('mg-vdi-dots');\n var TOTAL = dots.length;\n var isTouch = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);\n\n if (!vdi) return;\n\n \/* \u2500\u2500 Slide-in via IntersectionObserver \u2500\u2500 *\/\n if ('IntersectionObserver' in window) {\n var io = new IntersectionObserver(function (entries) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) entry.target.classList.add('slide-in');\n });\n }, { threshold: 0.08, rootMargin: '0px 0px -60px 0px' });\n cards.forEach(function (c) { io.observe(c); });\n } else {\n cards.forEach(function (c) { c.classList.add('slide-in'); });\n }\n\n \/* \u2500\u2500 Progress dots (skip on touch \u2014 CSS already hides them,\n but also skip the scroll listener overhead) \u2500\u2500 *\/\n if (!isTouch) {\n function updateDots() {\n var rect = vdi.getBoundingClientRect();\n var blockTop = -rect.top;\n var scrollable = vdi.offsetHeight - window.innerHeight;\n if (blockTop < 0 || blockTop > scrollable) {\n dotsWrap.classList.remove('visible');\n return;\n }\n dotsWrap.classList.add('visible');\n var idx = Math.min(Math.floor((blockTop \/ scrollable) * TOTAL), TOTAL - 1);\n dots.forEach(function (d, i) { d.classList.toggle('active', i === idx); });\n }\n window.addEventListener('scroll', updateDots, { passive: true });\n window.addEventListener('resize', updateDots, { passive: true });\n updateDots();\n }\n\n \/* \u2500\u2500 Reduced motion: skip animation entirely \u2500\u2500 *\/\n if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n cards.forEach(function (c) { c.classList.add('slide-in'); });\n }\n\n \/* \u2500\u2500 iOS: prevent elastic overscroll at block boundaries \u2500\u2500 *\/\n if (isTouch) {\n var touchStartY = 0;\n vdi.addEventListener('touchstart', function (e) {\n touchStartY = e.touches[0].clientY;\n }, { passive: true });\n vdi.addEventListener('touchmove', function (e) {\n var delta = e.touches[0].clientY - touchStartY;\n var atTop = window.scrollY === 0;\n var atBottom = window.scrollY >= document.body.scrollHeight - window.innerHeight;\n if ((atTop && delta > 0) || (atBottom && delta < 0)) {\n e.preventDefault();\n }\n }, { passive: false });\n }\n\n \/* \u2500\u2500 Viewport height fix for mobile browser chrome \u2500\u2500\n Sets --vh custom property to actual visible height,\n used as fallback where svh isn't supported yet *\/\n function setVh() {\n var vh = window.innerHeight * 0.01;\n document.documentElement.style.setProperty('--mg-vh', vh + 'px');\n }\n window.addEventListener('resize', setVh, { passive: true });\n setVh();\n})();\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-landing-block mg-collab\">\n\n<style>\n.wp-landing-block.mg-collab,\n.wp-landing-block.mg-collab *,\n.wp-landing-block.mg-collab *::before,\n.wp-landing-block.mg-collab *::after {\n box-sizing: border-box;\n}\n\n.wp-landing-block.mg-collab {\n --acc: #E1830F;\n --acc2: #F2B839;\n\n width: calc(100% - 50px);\n max-width: 1600px;\n margin: 80px auto;\n padding: clamp(24px, 3vw, 48px);\n\n background: #FEF4EE;\n border-radius: 24px;\n border: 1px solid rgba(226,131,15,.18);\n box-shadow: 0 25px 80px rgba(226,131,15,.14);\n\n display: grid;\n grid-template-columns: 1.2fr 1fr;\n gap: clamp(24px, 3vw, 48px);\n align-items: stretch;\n\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n -webkit-font-smoothing: antialiased;\n}\n\n\/* \u2500\u2500 LEFT CONTENT COLUMN \u2500\u2500 *\/\n.mg-collab__content {\n display: flex;\n flex-direction: column;\n}\n\n.mg-collab__tag {\n display: inline-block;\n background: rgba(226,131,15,.12);\n color: var(--acc);\n font-size: 11px;\n font-weight: 700;\n letter-spacing: .07em;\n text-transform: uppercase;\n padding: 4px 14px;\n border-radius: 999px;\n margin-bottom: 16px;\n width: fit-content;\n}\n\n.mg-collab__title {\n font-size: clamp(1.6rem, 2.8vw, 2.6rem);\n font-weight: 800;\n color: var(--acc);\n line-height: 1.25;\n margin: 0 0 14px;\n}\n\n.mg-collab__intro {\n font-size: clamp(.95rem, 1.2vw, 1.05rem);\n line-height: 1.7;\n color: #444;\n margin: 0 0 28px;\n}\n\n.mg-collab__divider {\n height: 1px;\n background: rgba(226,131,15,.2);\n margin-bottom: 24px;\n}\n\n.mg-collab__grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n align-items: start;\n margin-bottom: 28px;\n}\n\n.mg-collab__col {\n background: #fff;\n border-radius: 14px;\n padding: 22px 24px;\n border: 1px solid rgba(226,131,15,.18);\n display: flex;\n flex-direction: column;\n}\n\n.mg-collab__col-head {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 14px;\n padding-bottom: 12px;\n border-bottom: 1px solid rgba(226,131,15,.15);\n}\n\n.mg-collab__col-icon {\n width: 34px;\n height: 34px;\n border-radius: 8px;\n background: #FEF4EE;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.mg-collab__col-icon svg {\n width: 18px;\n height: 18px;\n}\n\n.mg-collab__col-title {\n font-weight: 700;\n font-size: .95rem;\n color: #1a1a1a;\n margin: 0;\n}\n\n.mg-collab__col-sub {\n font-size: .78rem;\n color: #888;\n margin: 2px 0 0;\n}\n\n.mg-collab__list {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 9px;\n}\n\n.mg-collab__item {\n display: flex;\n gap: 9px;\n font-size: .92rem;\n line-height: 1.55;\n color: #333;\n align-items: flex-start;\n}\n\n.mg-collab__dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--acc);\n flex-shrink: 0;\n margin-top: 7px;\n}\n\n.mg-collab__cta-wrap {\n display: flex;\n justify-content: center;\n margin-top: auto;\n}\n\n.mg-collab__cta {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: .9rem 2.6rem;\n border-radius: 999px;\n background: linear-gradient(135deg, var(--acc), var(--acc2));\n font-weight: 700;\n font-size: 1rem;\n color: #000;\n text-decoration: none;\n border: none;\n cursor: pointer;\n transition: transform .22s ease, box-shadow .22s ease;\n}\n\n.mg-collab__cta:hover {\n transform: translateY(-3px);\n box-shadow: 0 16px 36px rgba(226,131,15,.35);\n color: #000;\n text-decoration: none;\n}\n\n\/* \u2500\u2500 RIGHT IMAGE COLUMN \u2500\u2500 *\/\n.mg-collab__media {\n position: relative;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 30px 60px rgba(0,0,0,.15);\n display: flex;\n}\n\n.mg-collab__media img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n display: block;\n}\n\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n@media (max-width: 960px) {\n .wp-landing-block.mg-collab {\n grid-template-columns: 1fr;\n }\n .mg-collab__media {\n aspect-ratio: 16\/9;\n order: -1;\n }\n .mg-collab__grid {\n grid-template-columns: 1fr;\n }\n}\n\n@media (max-width: 600px) {\n .wp-landing-block.mg-collab {\n width: calc(100% - 24px);\n margin: 48px auto;\n }\n}\n<\/style>\n\n\n<div class=\"mg-collab__content\">\n\n <div class=\"mg-collab__tag\">\u041f\u0430\u0440\u0442\u043d\u0451\u0440\u0441\u0442\u0432\u043e<\/div>\n\n <h2 class=\"mg-collab__title\">\n \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0438\u044f \u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442. \u0423 \u0432\u0430\u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e. \u042d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u043f\u0430\u0440\u0442\u043d\u0451\u0440\u0441\u0442\u0432\u043e.\n <\/h2>\n\n <p class=\"mg-collab__intro\">\n Mechanogurus \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b \u0438 \u043e\u0442\u043a\u0440\u044b\u0442 \u043a \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f\u043c\u0438 \u043c\u0430\u043b\u043e\u0433\u043e \u0438 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430. \u041c\u044b \u0431\u0435\u0440\u0451\u043c \u043d\u0430 \u0441\u0435\u0431\u044f \u043f\u043e\u043b\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u2014 \u0432\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 \u0441\u0435\u0440\u0438\u0439\u043d\u044b\u0439 \u0432\u044b\u043f\u0443\u0441\u043a \u0438 \u0432\u044b\u0432\u043e\u0434 \u043d\u0430 \u0440\u044b\u043d\u043e\u043a.\n <\/p>\n\n <div class=\"mg-collab__divider\"><\/div>\n\n <div class=\"mg-collab__grid\">\n\n <div class=\"mg-collab__col\">\n <div class=\"mg-collab__col-head\">\n <div class=\"mg-collab__col-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#E1830F\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n <path d=\"M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83\"\/>\n <\/svg>\n <\/div>\n <div>\n <p class=\"mg-collab__col-title\">\u0421\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b Mechanogurus<\/p>\n <p class=\"mg-collab__col-sub\">\u0418\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433 \u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/p>\n <\/div>\n <\/div>\n <ul class=\"mg-collab__list\">\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 (Design Engineering)<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u0410\u043d\u0430\u043b\u0438\u0437 \u0440\u044b\u043d\u043a\u0430 \u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u041f\u043e\u0434\u0431\u043e\u0440 \u043f\u043e\u0441\u0442\u0430\u0432\u0449\u0438\u043a\u043e\u0432 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0438 \u0434\u043e\u0440\u043e\u0433\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0445 \u041f\u041a\u0418<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u041a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u043f\u043e\u0434 \u0440\u044b\u043d\u043e\u043a<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u0421\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430<\/li>\n <\/ul>\n <\/div>\n\n <div class=\"mg-collab__col\">\n <div class=\"mg-collab__col-head\">\n <div class=\"mg-collab__col-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#E1830F\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"\/>\n <path d=\"M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2\"\/>\n <line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"16\"\/>\n <line x1=\"10\" y1=\"14\" x2=\"14\" y2=\"14\"\/>\n <\/svg>\n <\/div>\n <div>\n <p class=\"mg-collab__col-title\">\u0421\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430<\/p>\n <p class=\"mg-collab__col-sub\">\u0412\u044b\u043f\u0443\u0441\u043a \u0438 \u043b\u043e\u0433\u0438\u0441\u0442\u0438\u043a\u0430<\/p>\n <\/div>\n <\/div>\n <ul class=\"mg-collab__list\">\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0438 \u0441\u0431\u043e\u0440\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u0417\u0430\u043a\u0443\u043f\u043a\u0430 \u041f\u041a\u0418<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u041b\u043e\u0433\u0438\u0441\u0442\u0438\u043a\u0430<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u0420\u0430\u0441\u0447\u0451\u0442 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0435\u0431\u0435\u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c\u044e<\/li>\n <li class=\"mg-collab__item\"><span class=\"mg-collab__dot\"><\/span>\u0421\u0431\u043e\u0440\u043a\u0430 \u0438 \u0448\u0435\u0444-\u043c\u043e\u043d\u0442\u0430\u0436 \u0443 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430<\/li>\n <\/ul>\n <\/div>\n\n <\/div>\n\n <div class=\"mg-collab__cta-wrap\">\n <a href=\"mailto:info@mechanogurus.ru\" class=\"mg-collab__cta\">\n \u041f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u2192\n <\/a>\n <\/div>\n\n<\/div>\n\n\n<div class=\"mg-collab__media\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/Partnership.jpg\" alt=\"\u041f\u0430\u0440\u0442\u043d\u0451\u0440\u0441\u0442\u0432\u043e Mechanogurus\" loading=\"lazy\">\n<\/div>\n\n<\/div>\n\n\n\n\n<section class=\"mg-gurus\">\n\n <div class=\"mg-gurus__header\">\n <div class=\"mg-gurus__eyebrow\">\n <span class=\"mg-gurus__line\"><\/span>\n <span class=\"mg-gurus__eyebrow-text\">\u041a\u041e\u041c\u0410\u041d\u0414\u0410 \u042d\u041a\u0421\u041f\u0415\u0420\u0422\u041e\u0412<\/span>\n <span class=\"mg-gurus__line\"><\/span>\n <\/div>\n <h2 class=\"mg-gurus__title\">\u041d\u0430\u0448\u0438 <em>\u0413\u0443\u0440\u0443<\/em><\/h2>\n <p class=\"mg-gurus__subtitle\">\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u044b \u0441 \u043c\u043d\u043e\u0433\u043e\u043b\u0435\u0442\u043d\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0432 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043e\u0442\u0440\u0430\u0441\u043b\u044f\u0445 \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u0441\u0442\u0438<\/p>\n <\/div>\n\n <div class=\"mg-gurus__carousel-wrap\">\n\n \n <button class=\"mg-carr-btn mg-carr-btn--prev\" aria-label=\"\u041d\u0430\u0437\u0430\u0434\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M13 4L7 10L13 16\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n <button class=\"mg-carr-btn mg-carr-btn--next\" aria-label=\"\u0412\u043f\u0435\u0440\u0451\u0434\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M7 4L13 10L7 16\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/button>\n\n \n <div class=\"mg-gurus__track-outer\">\n <div class=\"mg-gurus__track\">\n\n <div class=\"mg-guru-card\">\n <div class=\"mg-guru-card__inner\">\n <div class=\"mg-guru-card__photo-wrap\">\n <div class=\"mg-guru-card__hex-border\"><\/div>\n <div class=\"mg-guru-card__hex-frame\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/animated_2.png\" alt=\"\u0413\u0423\u0420\u0423 \u2014 \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043f\u0440\u043e\u0434\u0430\u043a\u0442-\u0434\u0438\u0437\u0430\u0439\u043d\" class=\"mg-guru-card__photo\" \/>\n <\/div>\n <div class=\"mg-guru-card__badge\">GURU<\/div>\n <\/div>\n <div class=\"mg-guru-card__body\">\n <div class=\"mg-guru-card__name\">\u041a\u0438\u0440\u0430\u043d \u041b.<\/div>\n <div class=\"mg-guru-card__domain\">\u0418\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/div>\n <p class=\"mg-guru-card__spec\">\u0413\u0423\u0420\u0423 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043f\u0440\u043e\u0434\u0430\u043a\u0442-\u0434\u0438\u0437\u0430\u0439\u043d\u0430<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mg-guru-card\">\n <div class=\"mg-guru-card__inner\">\n <div class=\"mg-guru-card__photo-wrap\">\n <div class=\"mg-guru-card__hex-border\"><\/div>\n <div class=\"mg-guru-card__hex-frame\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/animated_3.png\" alt=\"\u0413\u0423\u0420\u0423 \u2014 \u0421\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\" class=\"mg-guru-card__photo\" \/>\n <\/div>\n <div class=\"mg-guru-card__badge\">GURU<\/div>\n <\/div>\n <div class=\"mg-guru-card__body\">\n <div class=\"mg-guru-card__name\">\u0418\u043b\u044c\u044f \u0428.<\/div>\n <div class=\"mg-guru-card__domain\">\u0421\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/div>\n <p class=\"mg-guru-card__spec\">\u0413\u0423\u0420\u0423 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mg-guru-card\">\n <div class=\"mg-guru-card__inner\">\n <div class=\"mg-guru-card__photo-wrap\">\n <div class=\"mg-guru-card__hex-border\"><\/div>\n <div class=\"mg-guru-card__hex-frame\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/animated_4.png\" alt=\"\u0413\u0423\u0420\u0423 \u2014 \u041e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0413\u041f\u0410\/\u042d\u0413\u0422\u0410\/\u0414\u0413\u0423\/\u0413\u041f\u0423\" class=\"mg-guru-card__photo\" \/>\n <\/div>\n <div class=\"mg-guru-card__badge\">GURU<\/div>\n <\/div>\n <div class=\"mg-guru-card__body\">\n <div class=\"mg-guru-card__name\">\u0410\u043b\u0435\u043a\u0441\u0430\u043d\u0434\u0440 \u0414.<\/div>\n <div class=\"mg-guru-card__domain\">\u041e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0413\u041f\u0410 \/ \u042d\u0413\u0422\u0410 \/ \u0414\u0413\u0423 \/ \u0413\u041f\u0423<\/div>\n <p class=\"mg-guru-card__spec\">\u0413\u0423\u0420\u0423 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0413\u041f\u0410\/\u042d\u0413\u0422\u0410\/\u0414\u0413\u0423\/\u0413\u041f\u0423<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mg-guru-card\">\n <div class=\"mg-guru-card__inner\">\n <div class=\"mg-guru-card__photo-wrap\">\n <div class=\"mg-guru-card__hex-border\"><\/div>\n <div class=\"mg-guru-card__hex-frame\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/animated_1.png\" alt=\"\u0413\u0423\u0420\u0423 \u2014 \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0447\u0451\u0442\u044b \u0438 1\u0421\" class=\"mg-guru-card__photo\" \/>\n <\/div>\n <div class=\"mg-guru-card__badge\">GURU<\/div>\n <\/div>\n <div class=\"mg-guru-card__body\">\n <div class=\"mg-guru-card__name\">\u0410\u043d\u0430\u0441\u0442\u0430\u0441\u0438\u044f \u041a.<\/div>\n <div class=\"mg-guru-card__domain\">\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0447\u0451\u0442\u044b \u0438 1\u0421<\/div>\n <p class=\"mg-guru-card__spec\">\u0413\u0423\u0420\u0423 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0440\u0430\u0441\u0447\u0451\u0442\u043e\u0432, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 1\u0421 \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0439 \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mg-guru-card\">\n <div class=\"mg-guru-card__inner\">\n <div class=\"mg-guru-card__photo-wrap\">\n <div class=\"mg-guru-card__hex-border\"><\/div>\n <div class=\"mg-guru-card__hex-frame\">\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2026\/04\/animated_5.png\" alt=\"\u0413\u0423\u0420\u0423 \u2014 \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043d\u043e\u0440\u043c\u043e\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u041a\u0414\" class=\"mg-guru-card__photo\" \/>\n <\/div>\n <div class=\"mg-guru-card__badge\">GURU<\/div>\n <\/div>\n <div class=\"mg-guru-card__body\">\n <div class=\"mg-guru-card__name\">\u0412\u0430\u043b\u0435\u043d\u0442\u0438\u043d\u0430 \u0417.<\/div>\n <div class=\"mg-guru-card__domain\">\u041d\u043e\u0440\u043c\u043e\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u041a\u0414<\/div>\n <p class=\"mg-guru-card__spec\">\u0413\u0423\u0420\u0423 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0437\u0430\u0446\u0438\u0438, \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043d\u043e\u0440\u043c\u043e\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u041a\u0414<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n \n <div class=\"mg-carr-dots\" aria-label=\"\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043f\u043e \u0441\u043b\u0430\u0439\u0434\u0430\u043c\"><\/div>\n\n <\/div>\n\n<\/section>\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=Rajdhani:wght@400;500;600;700&display=swap');\n\n\/* \u2500\u2500 Variables & section \u2500\u2500 *\/\n.mg-gurus {\n --gold: #F2B839;\n --orange: #E1830F;\n --dark: #0d0d0d;\n --dark2: #141414;\n --dark3: #1c1c1c;\n --border: rgba(242,184,57,0.18);\n --border-hover: rgba(242,184,57,0.55);\n --text-primary: #ffffff;\n --text-secondary: rgba(255,255,255,0.6);\n --gap: 20px;\n --visible: 4; \/* cards visible at once on desktop *\/\n background: var(--dark);\n padding: 80px 20px 90px;\n font-family: 'Rajdhani', sans-serif;\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n}\n.mg-gurus *, .mg-gurus *::before, .mg-gurus *::after { box-sizing: border-box; }\n\n.mg-gurus::before {\n content: '';\n position: absolute; inset: 0;\n background-image:\n linear-gradient(rgba(242,184,57,0.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(242,184,57,0.04) 1px, transparent 1px);\n background-size: 48px 48px;\n pointer-events: none;\n}\n.mg-gurus::after {\n content: '';\n position: absolute; inset: 0;\n background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(242,184,57,0.07) 0%, transparent 70%);\n pointer-events: none;\n}\n\n\/* \u2500\u2500 Header \u2500\u2500 *\/\n.mg-gurus__header {\n text-align: center;\n margin-bottom: 56px;\n position: relative;\n z-index: 1;\n}\n.mg-gurus__eyebrow {\n display: flex; align-items: center; justify-content: center;\n gap: 14px; margin-bottom: 16px;\n}\n.mg-gurus__line {\n display: block; width: 48px; height: 1px;\n background: linear-gradient(90deg, transparent, var(--gold));\n}\n.mg-gurus__eyebrow .mg-gurus__line:last-child {\n background: linear-gradient(90deg, var(--gold), transparent);\n}\n.mg-gurus__eyebrow-text {\n font-family: 'Rajdhani', sans-serif;\n font-size: 11px; font-weight: 700;\n letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase;\n}\n.mg-gurus__title {\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(42px, 6vw, 72px);\n letter-spacing: 0.04em; color: var(--text-primary);\n line-height: 1; margin: 0 0 12px; font-weight: 400;\n}\n.mg-gurus__title em { font-style: normal; color: var(--gold); }\n.mg-gurus__subtitle {\n font-size: 15px; color: var(--text-secondary);\n max-width: 500px; margin: 0 auto; line-height: 1.6; font-weight: 400;\n}\n\n\/* \u2500\u2500 Carousel wrapper \u2500\u2500 *\/\n.mg-gurus__carousel-wrap {\n position: relative;\n max-width: 1100px;\n margin: 0 auto;\n z-index: 1;\n \/* side padding makes room for arrow buttons *\/\n padding: 0 44px;\n}\n\n\/* \u2500\u2500 Arrow buttons \u2500\u2500 *\/\n.mg-carr-btn {\n position: absolute;\n top: 50%;\n transform: translateY(-60%);\n width: 36px; height: 36px;\n background: var(--dark2);\n border: 1px solid var(--border);\n border-radius: 50%;\n color: var(--gold);\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: background 0.25s, border-color 0.25s, opacity 0.25s;\n z-index: 10;\n padding: 0;\n}\n.mg-carr-btn:hover { background: var(--dark3); border-color: var(--border-hover); }\n.mg-carr-btn--prev { left: 0; }\n.mg-carr-btn--next { right: 0; }\n.mg-carr-btn:disabled { opacity: 0.25; cursor: default; }\n\n\/* \u2500\u2500 Track outer (clips overflow) \u2500\u2500 *\/\n.mg-gurus__track-outer {\n overflow: hidden;\n width: 100%;\n}\n\n\/* \u2500\u2500 Track (flex row of cards) \u2500\u2500 *\/\n.mg-gurus__track {\n display: flex;\n gap: var(--gap);\n transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);\n will-change: transform;\n cursor: grab;\n user-select: none;\n}\n.mg-gurus__track.mg-dragging {\n transition: none;\n cursor: grabbing;\n}\n\n\/* \u2500\u2500 Card \u2500\u2500 *\/\n.mg-guru-card {\n flex: 0 0 calc((100% - var(--gap) * (var(--visible) - 1)) \/ var(--visible));\n min-width: 0;\n display: flex;\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.55s ease, transform 0.55s ease;\n}\n.mg-guru-card.mg-visible { opacity: 1; transform: translateY(0); }\n.mg-guru-card:nth-child(2) { transition-delay: 0.08s; }\n.mg-guru-card:nth-child(3) { transition-delay: 0.16s; }\n.mg-guru-card:nth-child(4) { transition-delay: 0.24s; }\n.mg-guru-card:nth-child(5) { transition-delay: 0.32s; }\n\n.mg-guru-card__inner {\n background: var(--dark2);\n border: 1px solid var(--border);\n border-radius: 16px;\n padding: 32px 20px 28px;\n display: flex; flex-direction: column; align-items: center; gap: 20px;\n width: 100%;\n transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;\n position: relative; overflow: hidden; cursor: default;\n}\n.mg-guru-card__inner::before {\n content: '';\n position: absolute; top: 0; left: 0; right: 0; height: 2px;\n background: linear-gradient(90deg, transparent, var(--gold), transparent);\n opacity: 0; transition: opacity 0.35s ease;\n}\n.mg-guru-card:hover .mg-guru-card__inner {\n border-color: var(--border-hover);\n box-shadow: 0 0 32px rgba(242,184,57,0.08), 0 8px 32px rgba(0,0,0,0.4);\n transform: translateY(-4px);\n}\n.mg-guru-card:hover .mg-guru-card__inner::before { opacity: 1; }\n\n\/* \u2500\u2500 Hex photo \u2500\u2500 *\/\n.mg-guru-card__photo-wrap {\n position: relative; width: 120px; height: 120px; flex-shrink: 0;\n}\n.mg-guru-card__hex-border {\n position: absolute; inset: -4px;\n clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);\n background: linear-gradient(135deg, var(--gold), var(--orange), transparent 70%);\n opacity: 0.6; transition: opacity 0.35s ease;\n}\n.mg-guru-card:hover .mg-guru-card__hex-border { opacity: 1; }\n.mg-guru-card__hex-frame {\n width: 100%; height: 100%;\n clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);\n overflow: hidden; background: var(--dark3);\n position: relative; z-index: 1;\n}\n.mg-guru-card__photo {\n width: 100%; height: 100%; object-fit: cover;\n object-position: center top; display: block;\n transition: transform 0.5s ease;\n}\n.mg-guru-card:hover .mg-guru-card__photo { transform: scale(1.06); }\n\n.mg-guru-card__badge {\n position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);\n background: var(--gold); color: #000;\n font-family: 'Bebas Neue', sans-serif;\n font-size: 11px; letter-spacing: 0.18em;\n padding: 2px 10px; border-radius: 20px; z-index: 2; white-space: nowrap;\n}\n\n\/* \u2500\u2500 Card body \u2500\u2500 *\/\n.mg-guru-card__body {\n text-align: center; flex: 1;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 6px;\n}\n.mg-guru-card__name {\n font-family: 'Rajdhani', sans-serif;\n font-size: 17px; font-weight: 700;\n letter-spacing: 0.04em; color: var(--text-primary); line-height: 1.1;\n}\n.mg-guru-card__domain {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 16px; letter-spacing: 0.06em; color: var(--gold); line-height: 1.25;\n}\n.mg-guru-card__spec {\n font-size: 13px; color: var(--text-secondary);\n line-height: 1.55; font-weight: 400; margin: 0;\n}\n\n\/* \u2500\u2500 Dot indicators \u2500\u2500 *\/\n.mg-carr-dots {\n display: flex; align-items: center; justify-content: center;\n gap: 8px; margin-top: 28px;\n}\n.mg-carr-dot {\n width: 6px; height: 6px; border-radius: 50%;\n background: rgba(242,184,57,0.25);\n border: none; padding: 0; cursor: pointer;\n transition: background 0.25s, transform 0.25s;\n}\n.mg-carr-dot.active {\n background: var(--gold);\n transform: scale(1.4);\n}\n\n\/* \u2500\u2500 Responsive \u2500\u2500 *\/\n@media (max-width: 1024px) {\n .mg-gurus { --visible: 3; }\n .mg-guru-card__photo-wrap { width: 100px; height: 100px; }\n}\n@media (max-width: 768px) {\n .mg-gurus { --visible: 2; padding: 60px 16px 70px; }\n .mg-gurus__header { margin-bottom: 40px; }\n .mg-gurus__carousel-wrap { padding: 0 38px; }\n .mg-carr-btn { width: 30px; height: 30px; }\n}\n@media (max-width: 480px) {\n .mg-gurus { --visible: 1; padding: 48px 12px 56px; }\n .mg-gurus__carousel-wrap { padding: 0 34px; }\n .mg-guru-card__inner { padding: 24px 14px 20px; gap: 14px; }\n .mg-guru-card__photo-wrap { width: 96px; height: 96px; }\n .mg-guru-card__badge { font-size: 9px; padding: 1px 8px; }\n .mg-guru-card__domain { font-size: 14px; }\n .mg-guru-card__spec { font-size: 13px; }\n .mg-gurus__subtitle { font-size: 13px; }\n .mg-carr-btn { width: 28px; height: 28px; }\n}\n<\/style>\n\n<script>\n(function () {\n var section = document.querySelector('.mg-gurus');\n if (!section) return;\n\n var track = section.querySelector('.mg-gurus__track');\n var cards = Array.from(section.querySelectorAll('.mg-guru-card'));\n var btnPrev = section.querySelector('.mg-carr-btn--prev');\n var btnNext = section.querySelector('.mg-carr-btn--next');\n var dotsWrap = section.querySelector('.mg-carr-dots');\n\n var total = cards.length;\n var current = 0;\n\n \/* \u2500\u2500 how many cards visible? read from CSS custom prop \u2500\u2500 *\/\n function getVisible() {\n var v = parseInt(getComputedStyle(section).getPropertyValue('--visible').trim(), 10);\n return isNaN(v) ? 4 : v;\n }\n\n \/* \u2500\u2500 build dots \u2500\u2500 *\/\n function buildDots() {\n dotsWrap.innerHTML = '';\n var vis = getVisible();\n var count = total - vis + 1;\n if (count < 1) count = 1;\n for (var i = 0; i < count; i++) {\n var d = document.createElement('button');\n d.className = 'mg-carr-dot' + (i === current ? ' active' : '');\n d.setAttribute('aria-label', '\u0421\u043b\u0430\u0439\u0434 ' + (i + 1));\n d.dataset.idx = i;\n dotsWrap.appendChild(d);\n }\n }\n\n \/* \u2500\u2500 calculate px offset for index \u2500\u2500 *\/\n function getOffset(idx) {\n if (!cards.length) return 0;\n var outer = section.querySelector('.mg-gurus__track-outer');\n var outerW = outer.offsetWidth;\n var vis = getVisible();\n var gap = parseFloat(getComputedStyle(track).gap) || 20;\n var cardW = (outerW - gap * (vis - 1)) \/ vis;\n return idx * (cardW + gap);\n }\n\n \/* \u2500\u2500 apply position \u2500\u2500 *\/\n function goTo(idx) {\n var vis = getVisible();\n var max = Math.max(0, total - vis);\n idx = Math.max(0, Math.min(idx, max));\n current = idx;\n\n track.style.transform = 'translateX(-' + getOffset(idx) + 'px)';\n\n btnPrev.disabled = (current === 0);\n btnNext.disabled = (current >= max);\n\n var dots = dotsWrap.querySelectorAll('.mg-carr-dot');\n dots.forEach(function (d, i) {\n d.classList.toggle('active', i === current);\n });\n }\n\n \/* \u2500\u2500 init \u2500\u2500 *\/\n buildDots();\n goTo(0);\n\n \/* \u2500\u2500 arrow clicks \u2500\u2500 *\/\n btnPrev.addEventListener('click', function () { goTo(current - 1); });\n btnNext.addEventListener('click', function () { goTo(current + 1); });\n\n \/* \u2500\u2500 dot clicks \u2500\u2500 *\/\n dotsWrap.addEventListener('click', function (e) {\n var dot = e.target.closest('.mg-carr-dot');\n if (dot) goTo(parseInt(dot.dataset.idx, 10));\n });\n\n \/* \u2500\u2500 drag \/ swipe \u2500\u2500 *\/\n var startX = 0, startOffset = 0, isDragging = false;\n\n function dragStart(x) {\n isDragging = true;\n startX = x;\n startOffset = getOffset(current);\n track.classList.add('mg-dragging');\n }\n function dragMove(x) {\n if (!isDragging) return;\n var delta = startX - x;\n track.style.transform = 'translateX(-' + (startOffset + delta) + 'px)';\n }\n function dragEnd(x) {\n if (!isDragging) return;\n isDragging = false;\n track.classList.remove('mg-dragging');\n var delta = startX - x;\n var vis = getVisible();\n var gap = parseFloat(getComputedStyle(track).gap) || 20;\n var outer = section.querySelector('.mg-gurus__track-outer');\n var cardW = (outer.offsetWidth - gap * (vis - 1)) \/ vis;\n var threshold = cardW * 0.25;\n if (delta > threshold) goTo(current + 1);\n else if (delta < -threshold) goTo(current - 1);\n else goTo(current);\n }\n\n track.addEventListener('mousedown', function (e) { dragStart(e.clientX); });\n window.addEventListener('mousemove', function (e) { dragMove(e.clientX); });\n window.addEventListener('mouseup', function (e) { dragEnd(e.clientX); });\n\n track.addEventListener('touchstart', function (e) { dragStart(e.touches[0].clientX); }, { passive: true });\n track.addEventListener('touchmove', function (e) { dragMove(e.touches[0].clientX); }, { passive: true });\n track.addEventListener('touchend', function (e) { dragEnd(e.changedTouches[0].clientX); });\n\n \/* \u2500\u2500 IntersectionObserver reveal \u2500\u2500 *\/\n var io = new IntersectionObserver(function (entries) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n cards.forEach(function (c) { c.classList.add('mg-visible'); });\n io.disconnect();\n }\n });\n }, { threshold: 0.1 });\n io.observe(section);\n\n \/* \u2500\u2500 recalc on resize \u2500\u2500 *\/\n var resizeTimer;\n window.addEventListener('resize', function () {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(function () {\n buildDots();\n goTo(Math.min(current, Math.max(0, total - getVisible())));\n }, 150);\n });\n})();\n<\/script>\n\n\n\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700;800&family=DM+Sans:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\n<div class=\"mga-root\">\n<style>\n.mga-root {\n --gold: #F2B839;\n --gold2: #E1830F;\n --bg-glass: rgba(255,255,255,0.04);\n --bg-glass2: rgba(255,255,255,0.07);\n --border: rgba(255,255,255,0.08);\n --border-gold: rgba(242,184,57,0.22);\n --text: #ffffff;\n --text-2: rgba(255,255,255,0.68);\n --text-3: rgba(255,255,255,0.38);\n --gradient: linear-gradient(135deg, #F2B839 0%, #E1830F 100%);\n font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\n color: var(--text);\n background: none !important;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n overflow-x: hidden;\n line-height: 1.6;\n}\n.mga-root *, .mga-root *::before, .mga-root *::after {\n box-sizing: border-box; margin: 0; padding: 0;\n}\n\n\/* \u2500\u2500 WIDTH MANAGEMENT (based on UCW example) \u2500\u2500 *\/\n.mga-root {\n --outer: clamp(24px, 4vw, 80px);\n --outer_plus: 30px;\n --outer_tight: max(0px, calc(var(--outer) - var(--outer_plus)));\n --maxw: 1600px;\n width: calc(100% - (var(--outer_tight) * 2));\n max-width: var(--maxw);\n margin: clamp(40px, 4vw, 80px) auto;\n}\n\n\/* \u2500\u2500 CARD \u2500\u2500 *\/\n.mga-card {\n position: relative;\n background: var(--bg-glass);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border: 1px solid var(--border);\n border-radius: 20px;\n overflow: hidden;\n padding: 40px 44px 36px;\n transition: border-color .3s ease, box-shadow .3s ease;\n}\n.mga-card:hover {\n border-color: var(--border-gold);\n box-shadow: 0 20px 60px rgba(0,0,0,0.25);\n}\n.mga-card::before {\n content: '';\n position: absolute;\n top: 0; left: 0;\n width: 4px; height: 100%;\n background: var(--gradient);\n opacity: .7;\n transition: opacity .3s;\n}\n.mga-card:hover::before { opacity: 1; }\n.mga-card::after {\n content: '';\n position: absolute; inset: 0;\n background: radial-gradient(ellipse 55% 70% at 105% 10%, rgba(242,184,57,.06) 0%, transparent 65%);\n pointer-events: none;\n}\n\n\/* \u2500\u2500 BADGE \u2500\u2500 *\/\n.mga-roi {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 7px 16px;\n background: rgba(242,184,57,.1);\n border: 1px solid rgba(242,184,57,.25);\n border-radius: 100px;\n font-size: 11px;\n font-weight: 600;\n color: var(--gold);\n letter-spacing: .04em;\n text-transform: uppercase;\n margin-bottom: 18px;\n position: relative; z-index: 1;\n}\n.mga-roi-dot {\n width: 7px; height: 7px;\n background: var(--gold);\n border-radius: 50%;\n flex-shrink: 0;\n animation: mga-pulse 2.2s ease-in-out infinite;\n}\n@keyframes mga-pulse {\n 0%,100% { opacity:1; transform:scale(1); }\n 50% { opacity:.45; transform:scale(1.25); }\n}\n\n\/* \u2500\u2500 HOOK QUESTION \u2500\u2500 *\/\n.mga-hook {\n font-size: clamp(15px, 2vw, 19px);\n font-weight: 700;\n line-height: 1.38;\n color: var(--text-2);\n margin-bottom: 10px;\n position: relative; z-index: 1;\n padding-left: 16px;\n border-left: 3px solid rgba(242,184,57,.45);\n}\n\n\/* \u2500\u2500 MAIN HEADING \u2500\u2500 *\/\n.mga-card h3 {\n font-size: clamp(18px, 2.8vw, 28px);\n font-weight: 800;\n line-height: 1.18;\n color: var(--text);\n margin-bottom: 18px;\n position: relative; z-index: 1;\n}\n.mga-gold-text {\n background: var(--gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n\/* \u2500\u2500 SOLUTION BLOCK \u2500\u2500 *\/\n.mga-solution {\n position: relative; z-index: 1;\n background: rgba(242,184,57,.05);\n border: 1px solid rgba(242,184,57,.14);\n border-radius: 12px;\n padding: 18px 20px;\n margin-bottom: 26px;\n}\n.mga-solution-label {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: .1em;\n text-transform: uppercase;\n color: var(--gold);\n margin-bottom: 10px;\n}\n.mga-solution-list {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 7px;\n}\n.mga-solution-list li {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n font-size: clamp(12px, 1.4vw, 13px);\n color: var(--text-2);\n line-height: 1.55;\n}\n.mga-solution-list li::before {\n content: '';\n flex-shrink: 0;\n width: 16px; height: 16px;\n margin-top: 1px;\n background: rgba(242,184,57,.15);\n border: 1px solid rgba(242,184,57,.3);\n border-radius: 50%;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23F2B839' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\");\n background-size: 10px 10px;\n background-repeat: no-repeat;\n background-position: center;\n}\n\n\/* \u2500\u2500 METRICS ROW \u2500\u2500 *\/\n.mga-metrics {\n display: flex;\n gap: 0;\n margin-bottom: 24px;\n border: 1px solid var(--border);\n border-radius: 12px;\n overflow: hidden;\n position: relative; z-index: 1;\n}\n.mga-metric {\n flex: 1;\n padding: 14px 16px;\n border-right: 1px solid var(--border);\n background: var(--bg-glass2);\n}\n.mga-metric:last-child { border-right: none; }\n.mga-metric-val {\n font-family: 'Montserrat', sans-serif;\n font-size: clamp(17px, 2.2vw, 22px);\n font-weight: 800;\n color: var(--gold);\n line-height: 1;\n margin-bottom: 4px;\n}\n.mga-metric-lbl {\n font-size: 10px;\n font-weight: 500;\n color: var(--text-3);\n line-height: 1.4;\n text-transform: uppercase;\n letter-spacing: .04em;\n}\n\n\/* \u2500\u2500 PILLS \u2500\u2500 *\/\n.mga-pills {\n display: flex;\n flex-wrap: wrap;\n gap: 7px;\n margin-bottom: 28px;\n position: relative; z-index: 1;\n}\n.mga-pill {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n background: rgba(255,255,255,.04);\n border: 1px solid var(--border);\n border-radius: 20px;\n padding: 5px 11px;\n font-size: 11px;\n font-weight: 500;\n color: rgba(255,255,255,.6);\n white-space: nowrap;\n transition: border-color .2s, color .2s;\n}\n.mga-pill:hover { border-color: var(--border-gold); color: var(--gold); }\n.mga-pill::before {\n content: '';\n width: 4px; height: 4px;\n background: var(--gold2);\n border-radius: 50%;\n flex-shrink: 0;\n}\n\n\/* \u2500\u2500 ACTIONS \u2500\u2500 *\/\n.mga-actions {\n display: flex;\n gap: 16px;\n align-items: center;\n flex-wrap: wrap;\n position: relative; z-index: 1;\n}\n\n\/* \u2500\u2500 PRIMARY BUTTON \u2500\u2500 *\/\n.mga-cta {\n --btn-h: 50px;\n --r: 28px;\n --circ: 38px;\n --off: 6px;\n --spd: 0.42s;\n --ease: cubic-bezier(0.4,0,0.15,1);\n position: relative;\n display: inline-flex;\n align-items: center;\n height: var(--btn-h);\n padding: 0 calc(var(--circ) + var(--off) + 14px) 0 26px;\n border: 2px solid rgba(242,184,57,.2);\n border-radius: var(--r);\n background: #fef4ee;\n cursor: pointer;\n text-decoration: none;\n overflow: hidden;\n font-family: 'DM Sans', sans-serif;\n transition: border-color var(--spd) var(--ease), box-shadow var(--spd) var(--ease);\n -webkit-tap-highlight-color: transparent;\n}\n.mga-cta::before {\n content: '';\n position: absolute;\n right: calc(var(--off) + var(--circ)\/2);\n top: 50%;\n width: var(--circ); height: var(--circ);\n background: var(--gold);\n border-radius: 50%;\n transform: translate(50%,-50%) scale(1);\n transition: transform var(--spd) var(--ease);\n z-index: 1;\n pointer-events: none;\n}\n.mga-cta:hover::before { transform: translate(50%,-50%) scale(9); }\n.mga-cta:hover {\n border-color: var(--gold);\n box-shadow: 0 8px 28px rgba(242,184,57,.28), 0 2px 8px rgba(0,0,0,.18);\n}\n.mga-cta__text {\n position: relative; z-index: 2;\n font-size: 14px; font-weight: 600;\n color: #1b2a4a;\n white-space: nowrap;\n transition: color var(--spd) var(--ease);\n pointer-events: none;\n}\n.mga-cta:hover .mga-cta__text { color: #0f1e3c; }\n.mga-cta__arrow {\n position: absolute; z-index: 3;\n right: var(--off); top: 50%;\n transform: translateY(-50%);\n width: var(--circ); height: var(--circ);\n border-radius: 50%;\n background: var(--gold);\n display: flex; align-items: center; justify-content: center;\n transition: background var(--spd) var(--ease);\n pointer-events: none;\n}\n.mga-cta:hover .mga-cta__arrow { background: transparent; }\n.mga-cta__arrow svg {\n width: 17px; height: 17px;\n stroke: #1b2a4a; stroke-width: 2.5;\n fill: none; stroke-linecap: round; stroke-linejoin: round;\n transition: transform var(--spd) var(--ease);\n}\n.mga-cta:hover .mga-cta__arrow svg { transform: translateX(3px); }\n@media (hover: none) {\n .mga-cta:active::before { transform: translate(50%,-50%) scale(9); }\n .mga-cta:active { border-color: var(--gold); }\n .mga-cta:active .mga-cta__text { color: #0f1e3c; }\n .mga-cta:active .mga-cta__arrow { background: transparent; }\n}\n\n\/* \u2500\u2500 GHOST LINK \u2500\u2500 *\/\n.mga-link {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-family: 'DM Sans', sans-serif;\n font-size: 13px;\n font-weight: 500;\n color: var(--text-3);\n text-decoration: none;\n padding: 4px 0;\n border-bottom: 1px solid transparent;\n transition: color .2s, border-color .2s;\n white-space: nowrap;\n -webkit-tap-highlight-color: transparent;\n}\n.mga-link:hover { color: var(--gold); border-color: rgba(242,184,57,.5); }\n\n\/* \u2550\u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550\u2550 *\/\n@media (max-width: 700px) {\n .mga-card { padding: 28px 22px 26px; border-radius: 16px; }\n .mga-metrics { flex-wrap: wrap; }\n .mga-metric { flex: 1 1 45%; border-bottom: 1px solid var(--border); }\n .mga-metric:nth-child(3),\n .mga-metric:nth-child(4) { border-bottom: none; }\n}\n@media (max-width: 560px) {\n .mga-card { padding: 24px 16px 22px; }\n .mga-metric { flex: 1 1 44%; }\n .mga-metrics { border-radius: 10px; }\n .mga-actions { flex-direction: column; align-items: stretch; }\n .mga-cta { justify-content: center; width: 100%; }\n .mga-link { justify-content: center; width: 100%; padding: 8px 0; }\n .mga-pills { gap: 5px; }\n .mga-pill { font-size: 10px; padding: 4px 9px; }\n .mga-hook { font-size: 14px; padding-left: 12px; }\n .mga-solution { padding: 14px 15px; }\n}\n@media (max-width: 360px) {\n .mga-card { padding: 20px 13px 18px; }\n .mga-card h3 { font-size: 16px; }\n .mga-metric-val { font-size: 17px; }\n .mga-cta { --btn-h: 46px; --circ: 34px; }\n .mga-cta__text { font-size: 13px; }\n}\n@media (prefers-reduced-motion: reduce) {\n .mga-roi-dot { animation: none; }\n}\n<\/style>\n\n<div class=\"mga-card\">\n\n \n <div class=\"mga-roi\">\n <span class=\"mga-roi-dot\"><\/span>\n \u0414\u0438\u0430\u0433\u043d\u043e\u0441\u0442\u0438\u043a\u0430 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432\n <\/div>\n\n \n <p class=\"mga-hook\">\n \u041f\u043e\u0447\u0435\u043c\u0443 \u043f\u0440\u0438 \u043f\u043e\u043b\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0422\u041a\u041f \u0432\u043e\u0432\u0440\u0435\u043c\u044f?\n <\/p>\n\n \n <h3>\n \u041d\u0430\u0439\u0434\u0451\u043c, \u0433\u0434\u0435 \u0432\u0430\u0448 \u0431\u0438\u0437\u043d\u0435\u0441<br>\n <span class=\"mga-gold-text\">\u0442\u0435\u0440\u044f\u0435\u0442 \u0447\u0430\u0441\u044b \u043d\u0430 \u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u0435<\/span>\n <\/h3>\n\n \n <div class=\"mga-solution\">\n <div class=\"mga-solution-label\">\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441<\/div>\n <ul class=\"mga-solution-list\">\n <li>\u0410\u0443\u0434\u0438\u0442 \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u0443\u0437\u043a\u0438\u0435 \u043c\u0435\u0441\u0442\u0430: \u0433\u0434\u0435 \u041a\u0414 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u0433\u0434\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u0442\u043e\u0440\u043c\u043e\u0437\u044f\u0442, \u0433\u0434\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b \u0442\u0440\u0430\u0442\u044f\u0442 \u0432\u0440\u0435\u043c\u044f \u0432\u043f\u0443\u0441\u0442\u0443\u044e<\/li>\n <li>\u0412\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0440\u0435\u0435\u0441\u0442\u0440 \u043f\u043e\u0442\u0435\u0440\u044c \u0432 \u0447\u0430\u0441\u0430\u0445 \u2014 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0446\u0438\u0444\u0440\u044b, \u043d\u0435 \u043e\u0431\u0449\u0438\u0435 \u0441\u043b\u043e\u0432\u0430<\/li>\n <li>\u0414\u043e\u0440\u043e\u0436\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u0430 \u0441 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430\u043c\u0438: \u0447\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441\u043d\u0430\u0447\u0430\u043b\u0430, \u0447\u0442\u043e\u0431\u044b \u0422\u041a\u041f \u0432\u044b\u0445\u043e\u0434\u0438\u043b\u0438 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0443\u0436\u0435 \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u043c\u0435\u0441\u044f\u0446<\/li>\n <li>\u0410\u0443\u0434\u0438\u0442 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0431\u0430\u0437\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430 MG-S001D \u2014 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e, \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c\u043e, \u0431\u0435\u0437 \u043b\u0438\u0448\u043d\u0438\u0445 \u0441\u043e\u0432\u0435\u0449\u0430\u043d\u0438\u0439<\/li>\n <\/ul>\n <\/div>\n\n \n <div class=\"mga-metrics\">\n <div class=\"mga-metric\">\n <div class=\"mga-metric-val\">\u0434\u043e 40%<\/div>\n <div class=\"mga-metric-lbl\">\u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0442\u0435\u0440\u044c \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/div>\n <\/div>\n <div class=\"mga-metric\">\n <div class=\"mga-metric-val\">2\u20136 \u043d\u0435\u0434.<\/div>\n <div class=\"mga-metric-lbl\">\u0441\u0440\u043e\u043a \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0430\u0443\u0434\u0438\u0442\u0430<\/div>\n <\/div>\n <div class=\"mga-metric\">\n <div class=\"mga-metric-val\">8<\/div>\n <div class=\"mga-metric-lbl\">\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0430\u043d\u0430\u043b\u0438\u0437\u0430<\/div>\n <\/div>\n <div class=\"mga-metric\">\n <div class=\"mga-metric-val\">90%<\/div>\n <div class=\"mga-metric-lbl\">\u0442\u0438\u043f\u043e\u0432\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0432\u044b\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"mga-pills\">\n <span class=\"mga-pill\">\u0410\u0443\u0434\u0438\u0442 \u041a\u0414, CAD, PDM \u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432<\/span>\n <span class=\"mga-pill\">\u041a\u0430\u0440\u0442\u0430 \u0437\u0440\u0435\u043b\u043e\u0441\u0442\u0438 0\u20135<\/span>\n <span class=\"mga-pill\">\u0420\u0435\u0435\u0441\u0442\u0440 \u043f\u043e\u0442\u0435\u0440\u044c \u0432 \u0447\u0430\u0441\u0430\u0445<\/span>\n <span class=\"mga-pill\">\u0414\u043e\u0440\u043e\u0436\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439<\/span>\n <span class=\"mga-pill\">\u0410\u0443\u0434\u0438\u0442 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0431\u0430\u0437\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430 MG-S001D<\/span>\n <\/div>\n\n \n <div class=\"mga-actions\">\n <a class=\"mga-cta\"\n href=\"https:\/\/n8n.mechanogurus.ru\/webhook\/2948d681-1b7a-4b6c-947e-783005ac2f47\/chat\"\n target=\"_blank\" rel=\"noopener\">\n <span class=\"mga-cta__text\">\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0437\u0430\u044f\u0432\u043a\u0443<\/span>\n <span class=\"mga-cta__arrow\">\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"13 6 19 12 13 18\"\/><\/svg>\n <\/span>\n <\/a>\n <a class=\"mga-link\"\n href=\"https:\/\/mechanogurus.ru\/?page_id=506\"\n rel=\"noopener\">\n \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u0443\u0441\u043b\u0443\u0433\u0435 \u2192\n <\/a>\n <\/div>\n\n<\/div>\n<\/div>\n\n\n\n\n<div class=\"wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading has-text-align-center has-background-color has-text-color has-link-color has-system-font-font-family has-large-font-size wp-elements-87af1e0f8b98a18229425af16a627326\" style=\"font-style:normal;font-weight:400\"><strong><strong>\u041a\u0430\u043a \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c?<\/strong><\/strong><\/h2>\n\n\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* \u2705 Scoped reset \u2014 does NOT leak into WordPress *\/\n.mg-workflow,\n.mg-workflow *,\n.mg-workflow *::before,\n.mg-workflow *::after {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\n\/* \u2705 NO body\/html rules \u2014 inherits WP theme *\/\n.mg-workflow {\n \/* CSS Variables scoped to .mg-workflow *\/\n --line-bg: #1e2530;\n --text: #e9edf5;\n --muted: #a8b2c1;\n --card-bg: rgba(255,255,255,0.03);\n --card-border: 1px solid rgba(255,255,255,0.08);\n --accent-orange: #ff6b35;\n --accent-yellow: #f7931e;\n --accent-green: #9fe870;\n --glow-orange: rgba(255,107,53,0.6);\n --glow-green: rgba(159,232,112,0.6);\n --timeline-center: 50%;\n --rail-width: 6px;\n --dot-size: 20px;\n --endpoint-size: 32px;\n --card-gap: 60px;\n --card-max-width: 920px;\n\n position: relative;\n z-index: 1;\n color: var(--text);\n font-family: \"Manrope\", \"Segoe UI\", sans-serif;\n -webkit-font-smoothing: antialiased;\n \n \/* \u2705 Header method: max-width + margin:auto + padding for edge gap *\/\n max-width: 1400px;\n margin: 0 auto;\n padding: clamp(2.5rem, 4vw, 3.5rem) 25px clamp(3.5rem, 5vw, 5rem);\n}\n\n.mg-workflow .timeline {\n position: relative;\n max-width: 1360px;\n margin: 0 auto;\n overflow: visible;\n}\n\n\/* \u2500\u2500 Rail \u2500\u2500 *\/\n.mg-workflow .rail-container {\n position: absolute;\n top: 0;\n left: var(--timeline-center);\n width: var(--rail-width);\n height: 100%;\n transform: translateX(-50%);\n pointer-events: none;\n z-index: 0;\n}\n\n.mg-workflow .rail {\n position: absolute;\n top: calc(var(--endpoint-size) \/ 2 + 35px);\n bottom: calc(var(--endpoint-size) \/ 2 + 35px);\n left: 0;\n width: 100%;\n background: var(--line-bg);\n border-radius: var(--rail-width);\n}\n\n.mg-workflow .rail-progress {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 0%;\n background: linear-gradient(180deg, #ff6b35 0%, #f7931e 50%, #9fe870 100%);\n border-radius: var(--rail-width);\n transition: height 0.05s linear;\n}\n\n.mg-workflow .rail-glow {\n position: absolute;\n left: 50%;\n top: 0%;\n transform: translate(-50%, -50%);\n width: 50px;\n height: 50px;\n background: radial-gradient(circle, var(--glow-orange) 0%, transparent 70%);\n border-radius: 50%;\n opacity: 0.9;\n pointer-events: none;\n transition: top 0.05s linear;\n}\n\n\/* \u2500\u2500 Endpoints \u2500\u2500 *\/\n.mg-workflow .endpoint {\n position: relative;\n display: flex;\n align-items: center;\n height: 70px;\n z-index: 5;\n}\n\n.mg-workflow .endpoint-circle {\n position: absolute;\n left: var(--timeline-center);\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--endpoint-size);\n height: var(--endpoint-size);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.mg-workflow .endpoint-core {\n width: var(--endpoint-size);\n height: var(--endpoint-size);\n border-radius: 50%;\n background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);\n box-shadow: \n 0 0 20px var(--glow-orange), \n 0 0 40px var(--glow-orange),\n 0 0 60px rgba(255,107,53,0.3);\n z-index: 2;\n}\n\n.mg-workflow .endpoint.finish .endpoint-core {\n background: linear-gradient(135deg, #9fe870 0%, #7ed957 100%);\n box-shadow: \n 0 0 20px var(--glow-green), \n 0 0 40px var(--glow-green),\n 0 0 60px rgba(159,232,112,0.3);\n}\n\n.mg-workflow .endpoint-pulse {\n position: absolute;\n width: var(--endpoint-size);\n height: var(--endpoint-size);\n border-radius: 50%;\n border: 2px solid var(--accent-orange);\n animation: mg-wf-pulse 2s ease-out infinite;\n}\n\n.mg-workflow .endpoint.finish .endpoint-pulse { border-color: var(--accent-green); }\n\n@keyframes mg-wf-pulse {\n 0% { transform: scale(1); opacity: 1; }\n 100% { transform: scale(2.5); opacity: 0; }\n}\n\n.mg-workflow .endpoint-label {\n position: absolute;\n font-size: 14px;\n font-weight: 800;\n letter-spacing: 3px;\n white-space: nowrap;\n}\n\n.mg-workflow .endpoint.start .endpoint-label {\n left: calc(var(--timeline-center) + var(--endpoint-size) \/ 2 + 20px);\n color: var(--accent-orange);\n text-shadow: 0 0 20px var(--glow-orange);\n}\n\n.mg-workflow .endpoint.finish .endpoint-label {\n right: calc(100% - var(--timeline-center) + var(--endpoint-size) \/ 2 + 20px);\n color: var(--accent-green);\n text-shadow: 0 0 20px var(--glow-green);\n}\n\n\/* \u2500\u2500 Timeline items \u2500\u2500 *\/\n.mg-workflow .item {\n position: relative;\n width: 100%;\n padding: 24px 0;\n display: flex;\n opacity: 0;\n transform: translateY(40px);\n transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),\n transform 0.6s cubic-bezier(0.4,0,0.2,1);\n}\n\n.mg-workflow .item.visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n.mg-workflow .item.left {\n justify-content: flex-start;\n padding-right: calc(var(--timeline-center) + var(--card-gap));\n}\n\n.mg-workflow .item.right {\n justify-content: flex-end;\n padding-left: calc(var(--timeline-center) + var(--card-gap));\n}\n\n\/* \u2500\u2500 Dots \u2500\u2500 *\/\n.mg-workflow .dot {\n position: absolute;\n left: var(--timeline-center);\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--dot-size);\n height: var(--dot-size);\n z-index: 5;\n}\n\n.mg-workflow .dot-core {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: var(--dot-size);\n height: var(--dot-size);\n border-radius: 50%;\n background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);\n box-shadow: 0 0 15px var(--glow-orange);\n transition: all 0.4s cubic-bezier(0.4,0,0.2,1);\n}\n\n.mg-workflow .dot-ring {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: calc(var(--dot-size) + 16px);\n height: calc(var(--dot-size) + 16px);\n border-radius: 50%;\n border: 2px solid rgba(255,107,53,0.3);\n opacity: 0;\n transition: all 0.4s ease;\n}\n\n.mg-workflow .item.active .dot-core {\n width: calc(var(--dot-size) + 6px);\n height: calc(var(--dot-size) + 6px);\n background: linear-gradient(135deg, #f7931e 0%, #9fe870 100%);\n box-shadow: \n 0 0 25px var(--glow-orange), \n 0 0 50px var(--glow-orange);\n}\n\n.mg-workflow .item.active .dot-ring {\n opacity: 1;\n border-color: rgba(247,147,30,0.6);\n animation: mg-wf-dot-pulse 1.5s ease-out infinite;\n}\n\n@keyframes mg-wf-dot-pulse {\n 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }\n 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }\n}\n\n\/* \u2500\u2500 Cards \u2500\u2500 *\/\n.mg-workflow .card {\n background: var(--card-bg);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n border-radius: 20px;\n padding: 28px 32px;\n box-shadow: 0 4px 30px rgba(0,0,0,0.3);\n border: var(--card-border);\n max-width: var(--card-max-width);\n width: 100%;\n position: relative;\n overflow: hidden;\n transition: box-shadow 0.3s ease, border-color 0.3s ease;\n}\n\n.mg-workflow .card::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(255,107,53,0.4), transparent);\n opacity: 0;\n transition: opacity 0.4s ease;\n}\n\n.mg-workflow .item.active .card::before { opacity: 1; }\n\n.mg-workflow .card:hover {\n box-shadow: 0 8px 50px rgba(255,107,53,0.15);\n border-color: rgba(255,107,53,0.2);\n}\n\n.mg-workflow .step-number {\n position: absolute;\n top: 12px;\n right: 16px;\n font-size: 12px;\n font-weight: 800;\n color: rgba(255,107,53,0.4);\n letter-spacing: 1px;\n}\n\n.mg-workflow .title {\n margin: 2px 0 8px;\n font-weight: 700;\n font-size: 17px;\n color: #fff;\n line-height: 1.3;\n}\n\n.mg-workflow .desc {\n color: var(--muted);\n line-height: 1.55;\n font-size: 14px;\n}\n\n\/* \u2500\u2500 In-card button \u2500\u2500 *\/\n.mg-workflow .card-btn-wrap { margin-top: 18px; }\n\n.mg-workflow .card-btn {\n --mg-gold: #F2B839;\n --mg-navy-deep: #0F1E3C;\n --btn-height: 46px;\n --btn-radius: 26px;\n --circle-size: 34px;\n --circle-offset: 6px;\n --speed: 0.45s;\n --ease: cubic-bezier(0.4,0,0.15,1);\n\n position: relative;\n display: inline-flex;\n align-items: center;\n height: var(--btn-height);\n padding: 0 calc(var(--circle-size) + var(--circle-offset) + 12px) 0 22px;\n border: 2px solid rgba(242,184,57,0.25);\n border-radius: var(--btn-radius);\n background: rgba(242,184,57,0.08);\n cursor: pointer;\n text-decoration: none;\n overflow: hidden;\n font-family: 'Manrope', sans-serif;\n transition:\n border-color var(--speed) var(--ease),\n box-shadow var(--speed) var(--ease);\n -webkit-tap-highlight-color: transparent;\n}\n\n.mg-workflow .card-btn::before {\n content: '';\n position: absolute;\n right: calc(var(--circle-offset) + var(--circle-size) \/ 2);\n top: 50%;\n width: var(--circle-size);\n height: var(--circle-size);\n background: var(--mg-gold);\n border-radius: 50%;\n transform: translate(50%, -50%) scale(1);\n transition: transform var(--speed) var(--ease);\n z-index: 1;\n pointer-events: none;\n}\n\n.mg-workflow .card-btn:hover::before { transform: translate(50%, -50%) scale(8); }\n.mg-workflow .card-btn:hover {\n border-color: var(--mg-gold);\n box-shadow: 0 6px 24px rgba(242,184,57,0.3);\n}\n\n.mg-workflow .card-btn__text {\n position: relative;\n z-index: 2;\n font-size: 14px;\n font-weight: 600;\n color: #f7931e;\n white-space: nowrap;\n letter-spacing: -0.01em;\n line-height: 1;\n transition: color var(--speed) var(--ease);\n pointer-events: none;\n}\n\n.mg-workflow .card-btn:hover .card-btn__text { color: var(--mg-navy-deep); }\n\n.mg-workflow .card-btn__arrow {\n position: absolute;\n z-index: 3;\n right: var(--circle-offset);\n top: 50%;\n transform: translateY(-50%);\n width: var(--circle-size);\n height: var(--circle-size);\n border-radius: 50%;\n background: var(--mg-gold);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background var(--speed) var(--ease);\n pointer-events: none;\n}\n\n.mg-workflow .card-btn:hover .card-btn__arrow { background: transparent; }\n\n.mg-workflow .card-btn__arrow svg {\n width: 15px;\n height: 15px;\n stroke: var(--mg-navy-deep);\n stroke-width: 2.5;\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n transition: transform var(--speed) var(--ease);\n}\n\n.mg-workflow .card-btn:hover .card-btn__arrow svg { transform: translateX(3px); }\n\n\/* \u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550 *\/\n@media (max-width: 1200px) {\n .mg-workflow { --card-max-width: 680px; }\n}\n\n@media (max-width: 900px) {\n .mg-workflow {\n --timeline-center: 30px;\n --dot-size: 18px;\n --endpoint-size: 28px;\n --card-gap: 40px;\n --card-max-width: 100%;\n padding-left: 16px;\n padding-right: 16px;\n }\n .mg-workflow .item.left,\n .mg-workflow .item.right {\n justify-content: flex-start;\n padding-left: calc(var(--timeline-center) + var(--card-gap));\n padding-right: 0;\n }\n .mg-workflow .card { max-width: 100%; }\n .mg-workflow .endpoint.start .endpoint-label,\n .mg-workflow .endpoint.finish .endpoint-label {\n left: calc(var(--timeline-center) + var(--endpoint-size) \/ 2 + 16px);\n right: auto;\n }\n}\n\n@media (max-width: 768px) {\n .mg-workflow { padding-left: 12px; padding-right: 12px; }\n}\n\n@media (max-width: 600px) {\n .mg-workflow {\n --timeline-center: 24px;\n --rail-width: 4px;\n --dot-size: 16px;\n --endpoint-size: 24px;\n --card-gap: 30px;\n padding-top: clamp(1.875rem, 3vw, 2.5rem);\n padding-bottom: clamp(2.5rem, 4vw, 3.75rem);\n }\n .mg-workflow .item { padding: 18px 0; }\n .mg-workflow .item.left,\n .mg-workflow .item.right {\n padding-left: calc(var(--timeline-center) + var(--card-gap));\n padding-right: 8px;\n }\n .mg-workflow .card {\n padding: 18px;\n border-radius: 16px;\n }\n .mg-workflow .title { font-size: 15px; }\n .mg-workflow .desc { font-size: 13px; }\n .mg-workflow .step-number { font-size: 10px; }\n .mg-workflow .endpoint-label {\n font-size: 11px;\n letter-spacing: 2px;\n }\n .mg-workflow .endpoint.start .endpoint-label,\n .mg-workflow .endpoint.finish .endpoint-label {\n left: calc(var(--timeline-center) + var(--endpoint-size) \/ 2 + 12px);\n right: auto;\n }\n .mg-workflow .endpoint { height: 55px; }\n .mg-workflow .rail {\n top: calc(var(--endpoint-size) \/ 2 + 27px);\n bottom: calc(var(--endpoint-size) \/ 2 + 27px);\n }\n}\n\n@media (max-width: 480px) {\n .mg-workflow { padding-left: 8px; padding-right: 8px; }\n}\n\n@media (max-width: 380px) {\n .mg-workflow {\n --timeline-center: 20px;\n --dot-size: 14px;\n --endpoint-size: 20px;\n --card-gap: 24px;\n }\n .mg-workflow .item.left,\n .mg-workflow .item.right {\n padding-left: calc(var(--timeline-center) + var(--card-gap));\n }\n .mg-workflow .card { padding: 14px; }\n .mg-workflow .title { font-size: 14px; }\n .mg-workflow .desc { font-size: 12px; }\n .mg-workflow .endpoint { height: 45px; }\n .mg-workflow .rail {\n top: calc(var(--endpoint-size) \/ 2 + 22px);\n bottom: calc(var(--endpoint-size) \/ 2 + 22px);\n }\n}\n\n@media (hover: none) {\n .mg-workflow .card-btn:active::before { transform: translate(50%, -50%) scale(8); }\n .mg-workflow .card-btn:active { border-color: var(--mg-gold); }\n .mg-workflow .card-btn:active .card-btn__text { color: var(--mg-navy-deep); }\n .mg-workflow .card-btn:active .card-btn__arrow { background: transparent; }\n .mg-workflow .card-btn:active .card-btn__arrow svg { transform: translateX(3px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .mg-workflow .item,\n .mg-workflow .card,\n .mg-workflow .dot-core,\n .mg-workflow .rail-progress,\n .mg-workflow .rail-glow {\n transition: none;\n }\n .mg-workflow .endpoint-pulse,\n .mg-workflow .item.active .dot-ring {\n animation: none;\n }\n .mg-workflow .item {\n opacity: 1;\n transform: none;\n }\n}\n\n@media (max-height: 500px) and (orientation: landscape) {\n .mg-workflow .item { padding: 14px 0; }\n .mg-workflow .endpoint { height: 40px; }\n}\n<\/style>\n\n<div class=\"mg-workflow\">\n <div class=\"timeline\" id=\"mgWfTimeline\">\n \n <div class=\"endpoint start\" id=\"mgWfTimelineStart\">\n <div class=\"endpoint-circle\">\n <div class=\"endpoint-pulse\"><\/div>\n <div class=\"endpoint-core\"><\/div>\n <\/div>\n <span class=\"endpoint-label\">\u0421\u0422\u0410\u0420\u0422<\/span>\n <\/div>\n\n <div class=\"rail-container\">\n <div class=\"rail\" aria-hidden=\"true\">\n <div class=\"rail-progress\"><\/div>\n <div class=\"rail-glow\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"item right\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">01<\/div>\n <div>\n <div class=\"title\">\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f<\/div>\n <p class=\"desc\">\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0439\u0442\u0435\u0441\u044c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u043e \u0432\u0441\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b.<\/p>\n <div class=\"card-btn-wrap\">\n <a href=\"https:\/\/n8n.mechanogurus.ru\/form\/105adc81-c50a-40f0-ab54-f0b65857d49e\" class=\"card-btn\" target=\"_blank\" rel=\"noopener noreferrer\">\n <span class=\"card-btn__text\">\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f<\/span>\n <span class=\"card-btn__arrow\">\n <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"13 6 19 12 13 18\"\/><\/svg>\n <\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item left\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">02<\/div>\n <div>\n <div class=\"title\">\u041e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 LAKI<\/div>\n <p class=\"desc\">\u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0435 \u0441 \u043d\u0430\u0448\u0438\u043c \u0418\u0418-\u0430\u0441\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043e\u043c LAKI \u2014 \u043e\u043d \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0437\u0430\u044f\u0432\u043a\u0443 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438 \u043e\u0442\u0432\u0435\u0442\u0438\u0442 \u043d\u0430 \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0422\u0417, \u044d\u0442\u043e \u043d\u0430\u043c \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0436\u0435\u0442!<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item right\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">03<\/div>\n <div>\n <div class=\"title\">\u041f\u0430\u0440\u0441\u0438\u043d\u0433 \u0422\u0417<\/div>\n <p class=\"desc\">\u0412\u0430\u0448\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f (\u043f\u0430\u0440\u0441\u0438\u043d\u0433) LAKI. \u041f\u0430\u0440\u0441\u0438\u043d\u0433 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043d\u0430\u0448\u0438\u043c \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0430\u043c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0432 \u0441\u0443\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item left\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">04<\/div>\n <div>\n <div class=\"title\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 WBS<\/div>\n <p class=\"desc\">LAKI \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442 (WBS) \u0438\u0437 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u0443\u043b\u043e\u0436\u0438\u0442\u044c\u0441\u044f \u0432 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0440\u043e\u043a\u0438.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item right\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">05<\/div>\n <div>\n <div class=\"title\">\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u0430\u044f\u0432\u043a\u0443<\/div>\n <p class=\"desc\">\u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0432\u0430\u0448\u0443 \u0437\u0430\u044f\u0432\u043a\u0443, \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e \u0440\u0435\u0448\u0430\u0435\u0442 \u0432\u0430\u0448 \u0432\u043e\u043f\u0440\u043e\u0441.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item left\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">06<\/div>\n <div>\n <div class=\"title\">\u042d\u0441\u043a\u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/div>\n <p class=\"desc\">\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u0441\u043a\u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item right\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">07<\/div>\n <div>\n <div class=\"title\">\u041e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438<\/div>\n <p class=\"desc\">\u041e\u0431\u0441\u0443\u0436\u0434\u0430\u0435\u043c \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WBS \u2014 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0435 \u0446\u0435\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0435\u0437 \u0441\u043a\u0440\u044b\u0442\u044b\u0445 \u043f\u043b\u0430\u0442\u0435\u0436\u0435\u0439.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item left\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">08<\/div>\n <div>\n <div class=\"title\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0430<\/div>\n <p class=\"desc\">\u0415\u0441\u043b\u0438 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u0430\u0441 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044e \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0430 \u0438 \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u0430.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item right\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">09<\/div>\n <div>\n <div class=\"title\">\u0421\u0442\u0430\u0440\u0442 \u0440\u0430\u0431\u043e\u0442\u044b & \u0414\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u043e\u0440\u0442\u0430\u043b\u0443<\/div>\n <p class=\"desc\">\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430! \u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0451\u043d\u043d\u043e\u043c\u0443 \u043f\u043b\u0430\u043d\u0443. \u0412\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u043f\u043e\u043b\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043f\u043e\u0440\u0442\u0430\u043b\u0443, \u0433\u0434\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item left\" data-animate>\n <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n <div class=\"card\">\n <div class=\"step-number\">10<\/div>\n <div>\n <div class=\"title\">\u0421\u0434\u0430\u0447\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/div>\n <p class=\"desc\">\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0443 \u0441 \u043f\u043e\u043b\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"endpoint finish\" id=\"mgWfTimelineFinish\">\n <div class=\"endpoint-circle\">\n <div class=\"endpoint-pulse\"><\/div>\n <div class=\"endpoint-core\"><\/div>\n <\/div>\n <span class=\"endpoint-label\">\u0424\u0418\u041d\u0418\u0428<\/span>\n <\/div>\n\n <\/div>\n<\/div>\n\n<script>\n(function() {\n 'use strict';\n \n var timeline = document.getElementById('mgWfTimeline');\n var items = document.querySelectorAll('.mg-workflow .item[data-animate]');\n var rail = document.querySelector('.mg-workflow .rail');\n var railProgress = document.querySelector('.mg-workflow .rail-progress');\n var railGlow = document.querySelector('.mg-workflow .rail-glow');\n \n if (!timeline || !items.length || !rail) return;\n \n var visibilityObserver = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting && entry.intersectionRatio > 0.15) {\n entry.target.classList.add('visible');\n }\n });\n }, {\n root: null,\n rootMargin: '-5% 0px -5% 0px',\n threshold: [0, 0.15, 0.3]\n });\n \n var activeObserver = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting && entry.intersectionRatio > 0.4) {\n entry.target.classList.add('active');\n } else {\n entry.target.classList.remove('active');\n }\n });\n }, {\n root: null,\n rootMargin: '-35% 0px -35% 0px',\n threshold: [0, 0.4, 0.6, 1]\n });\n \n items.forEach(function(item) {\n visibilityObserver.observe(item);\n activeObserver.observe(item);\n });\n \n var currentProgress = 0;\n var targetProgress = 0;\n var rafId = null;\n \n function lerp(start, end, factor) { return start + (end - start) * factor; }\n \n function calculateProgress() {\n var railRect = rail.getBoundingClientRect();\n var viewHeight = window.innerHeight;\n var scrollCenter = viewHeight * 0.5;\n var railTop = railRect.top;\n var railHeight = railRect.height;\n var progressPoint = scrollCenter - railTop;\n return Math.min(Math.max(progressPoint \/ railHeight, 0), 1) * 100;\n }\n \n function animate() {\n var diff = Math.abs(currentProgress - targetProgress);\n if (diff > 0.1) {\n currentProgress = lerp(currentProgress, targetProgress, 0.12);\n updateRailVisuals(currentProgress);\n rafId = requestAnimationFrame(animate);\n } else {\n currentProgress = targetProgress;\n updateRailVisuals(targetProgress);\n rafId = null;\n }\n }\n \n function updateRailVisuals(progress) {\n railProgress.style.height = progress + '%';\n railGlow.style.top = progress + '%';\n \n if (progress < 50) {\n railGlow.style.background = 'radial-gradient(circle, rgba(255,107,53,0.8) 0%, transparent 70%)';\n } else if (progress < 80) {\n railGlow.style.background = 'radial-gradient(circle, rgba(247,147,30,0.8) 0%, transparent 70%)';\n } else {\n railGlow.style.background = 'radial-gradient(circle, rgba(159,232,112,0.8) 0%, transparent 70%)';\n }\n }\n \n function onScroll() {\n targetProgress = calculateProgress();\n if (!rafId) {\n rafId = requestAnimationFrame(animate);\n }\n }\n \n var ticking = false;\n function throttledScroll() {\n if (!ticking) {\n ticking = true;\n requestAnimationFrame(function() {\n onScroll();\n ticking = false;\n });\n }\n }\n \n window.addEventListener('scroll', throttledScroll, { passive: true });\n window.addEventListener('resize', throttledScroll, { passive: true });\n window.addEventListener('orientationchange', function() { setTimeout(throttledScroll, 100); });\n \n targetProgress = calculateProgress();\n currentProgress = targetProgress;\n updateRailVisuals(currentProgress);\n \n items.forEach(function(item) {\n var rect = item.getBoundingClientRect();\n if (rect.top < window.innerHeight * 0.85) {\n item.classList.add('visible');\n }\n });\n})();\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading has-text-align-center has-background-color has-text-color has-link-color has-system-font-font-family has-large-font-size wp-elements-f796da269f539fe2cf75a4b013282add\" style=\"font-style:normal;font-weight:400\"><strong><strong>\u041d\u0430\u0448\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u044b<\/strong><\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>\u041d\u0430\u0448\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u044b \u2014 Mechanogurus<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Onest:wght@400;500;600;700&family=Unbounded:wght@400;500;700&display=swap');\n\n :root {\n --mg-orange: #F2B839;\n --mg-deep: #E1830F;\n --mg-dark: #0D0D0D;\n --mg-darker: #080808;\n --mg-surface: #141414;\n --mg-border: rgba(242, 184, 57, 0.12);\n --mg-text: #e8e8e8;\n --mg-text-dim: #888888;\n --mg-glow: rgba(242, 184, 57, 0.08);\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n color: var(--mg-text);\n font-family: 'Onest', sans-serif;\n overflow-x: hidden;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n OUR CLIENTS \u2014 INFINITE MARQUEE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .mg-clients {\n padding: 24px 0;\n position: relative;\n overflow: hidden;\n }\n\n\n\n .mg-clients-inner {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n z-index: 1;\n }\n\n \/* \u2500\u2500 Header \u2500\u2500 *\/\n .mg-clients-header {\n text-align: center;\n margin-bottom: 56px;\n }\n\n .mg-clients-tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 6px 18px;\n border: 1px solid var(--mg-border);\n border-radius: 100px;\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--mg-text-dim);\n margin-bottom: 24px;\n }\n\n .mg-clients-tag-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--mg-orange);\n animation: mgPulse 2s ease-in-out infinite;\n }\n\n @keyframes mgPulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.3; }\n }\n\n .mg-clients-header h2 {\n font-family: 'Unbounded', sans-serif;\n font-size: clamp(28px, 4vw, 44px);\n font-weight: 700;\n color: var(--mg-text);\n margin-bottom: 16px;\n line-height: 1.15;\n }\n\n .mg-clients-header h2 span {\n background: linear-gradient(135deg, var(--mg-orange), var(--mg-deep));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .mg-clients-header p {\n font-size: 15px;\n color: var(--mg-text-dim);\n max-width: 460px;\n margin: 0 auto;\n line-height: 1.65;\n }\n\n \/* \u2500\u2500 Marquee \u2500\u2500 *\/\n .mg-marquee-wrap {\n position: relative;\n overflow: hidden;\n padding: 12px 0;\n }\n\n \/* Edge fade masks *\/\n .mg-marquee-wrap::before,\n .mg-marquee-wrap::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n width: 140px;\n z-index: 2;\n pointer-events: none;\n }\n .mg-marquee-wrap::before {\n left: 0;\n background: linear-gradient(to right, var(--mg-darker), transparent);\n }\n .mg-marquee-wrap::after {\n right: 0;\n background: linear-gradient(to left, var(--mg-darker), transparent);\n }\n\n .mg-marquee-track {\n display: flex;\n gap: 40px;\n width: max-content;\n animation: mgMarquee 35s linear infinite;\n }\n .mg-marquee-track:hover {\n animation-play-state: paused;\n }\n\n @keyframes mgMarquee {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n }\n\n \/* \u2500\u2500 Logo cards \u2500\u2500 *\/\n .mg-logo-card {\n flex-shrink: 0;\n width: 190px;\n height: 104px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px 28px;\n background: var(--mg-surface);\n border: 1px solid var(--mg-border);\n border-radius: 14px;\n transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n cursor: pointer;\n position: relative;\n overflow: hidden;\n }\n\n \/* Bottom glow on hover *\/\n .mg-logo-card::before {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse 80% 60% at 50% 110%, var(--mg-glow), transparent 70%);\n opacity: 0;\n transition: opacity 0.45s ease;\n }\n\n \/* Top-edge highlight line *\/\n .mg-logo-card::after {\n content: '';\n position: absolute;\n top: 0;\n left: 20%;\n width: 60%;\n height: 1px;\n background: linear-gradient(to right, transparent, rgba(242, 184, 57, 0.3), transparent);\n opacity: 0;\n transition: opacity 0.45s ease;\n }\n\n .mg-logo-card:hover {\n border-color: rgba(242, 184, 57, 0.28);\n transform: translateY(-5px);\n box-shadow:\n 0 8px 24px rgba(0, 0, 0, 0.3),\n 0 12px 48px rgba(242, 184, 57, 0.06);\n }\n .mg-logo-card:hover::before { opacity: 1; }\n .mg-logo-card:hover::after { opacity: 1; }\n\n .mg-logo-card img {\n max-width: 100%;\n max-height: 60px;\n object-fit: contain;\n filter: grayscale(100%) brightness(1.8);\n opacity: 0.5;\n transition: all 0.45s ease;\n position: relative;\n z-index: 1;\n }\n .mg-logo-card:hover img {\n filter: grayscale(0%) brightness(1);\n opacity: 1;\n }\n\n \/* \u2500\u2500 Bottom section \u2500\u2500 *\/\n .mg-clients-footer {\n margin-top: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 32px;\n }\n\n .mg-clients-line {\n flex: 1;\n max-width: 120px;\n height: 1px;\n background: linear-gradient(to right, transparent, var(--mg-border), transparent);\n }\n\n .mg-clients-count {\n font-size: 13px;\n color: var(--mg-text-dim);\n letter-spacing: 0.04em;\n white-space: nowrap;\n }\n .mg-clients-count strong {\n color: var(--mg-orange);\n font-weight: 700;\n font-size: 24px;\n margin-right: 6px;\n font-family: 'Unbounded', sans-serif;\n }\n\n \/* \u2550\u2550\u2550 Responsive \u2550\u2550\u2550 *\/\n @media (max-width: 768px) {\n .mg-clients { padding: 20px 0; }\n .mg-clients-inner { padding: 0 20px; }\n .mg-marquee-wrap::before,\n .mg-marquee-wrap::after { width: 60px; }\n .mg-logo-card { width: 150px; height: 86px; padding: 16px 20px; border-radius: 10px; }\n .mg-logo-card img { max-height: 48px; }\n .mg-marquee-track { gap: 28px; }\n .mg-clients-footer { gap: 20px; }\n .mg-clients-line { max-width: 60px; }\n }\n\n @media (max-width: 480px) {\n .mg-clients { padding: 16px 0; }\n .mg-clients-header { margin-bottom: 36px; }\n .mg-logo-card { width: 130px; height: 74px; padding: 14px 16px; }\n .mg-logo-card img { max-height: 40px; }\n .mg-marquee-track { gap: 20px; }\n .mg-clients-count strong { font-size: 20px; }\n }\n<\/style>\n<\/head>\n<body>\n\n\n<section class=\"mg-clients\">\n <div class=\"mg-clients-inner\">\n\n \n <div class=\"mg-marquee-wrap\">\n <div class=\"mg-marquee-track\">\n \n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/\u0420\u0423\u041c\u041e_logo.png\" alt=\"\u0420\u0423\u041c\u041e\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/ikudzo-430x320-1-e1751961567254.png\" alt=\"Ikudzo\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/SRZ_Icon.png\" alt=\"SRZ\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/Silowyje_maschiny.svg_.png\" alt=\"\u0421\u0438\u043b\u043e\u0432\u044b\u0435 \u041c\u0430\u0448\u0438\u043d\u044b\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/02\/NPM_Logo.png\" alt=\"NPM\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/AT-Gaz_logo_ru-scaled-e1752178495359.png\" alt=\"AT-\u0413\u0430\u0437\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/02\/SZD_Logo.png\" alt=\"SZD\" loading=\"lazy\">\n <\/div>\n\n \n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/\u0420\u0423\u041c\u041e_logo.png\" alt=\"\u0420\u0423\u041c\u041e\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/ikudzo-430x320-1-e1751961567254.png\" alt=\"Ikudzo\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/SRZ_Icon.png\" alt=\"SRZ\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/Silowyje_maschiny.svg_.png\" alt=\"\u0421\u0438\u043b\u043e\u0432\u044b\u0435 \u041c\u0430\u0448\u0438\u043d\u044b\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/02\/NPM_Logo.png\" alt=\"NPM\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/07\/AT-Gaz_logo_ru-scaled-e1752178495359.png\" alt=\"AT-\u0413\u0430\u0437\" loading=\"lazy\">\n <\/div>\n <div class=\"mg-logo-card\">\n <img decoding=\"async\" src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/02\/SZD_Logo.png\" alt=\"SZD\" loading=\"lazy\">\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n<\/section>\n\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Menu with Typewriter \u0414\u043b\u044f \u0432\u0441\u0435\u0445 \u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0443 IT \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0426\u0438\u0444\u0440\u043e\u0432\u0438\u0437\u0438\u0440\u0443\u0435\u043c, \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u0443\u0435\u043c, \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c Loading 3D model… \u041e\u0431\u0441\u0443\u0434\u0438\u043c ? \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0435 \u0431\u044e\u0440\u043e \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0439 \u044d\u043f\u043e\u0445\u0438 \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u0441 \u041a\u0414 \u041a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d \u2014 \u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u041a\u0414 \u0441\u0432\u043e\u0438\u043c\u0438 \u0441\u0438\u043b\u0430\u043c\u0438 \u043d\u0435 \u0432\u044b\u0439\u0434\u0435\u0442? \u0411\u0435\u0440\u0451\u043c \u0437\u0430\u0434\u0430\u0447\u0443 \u043e\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0434\u043e \u043f\u0443\u0441\u043a\u043e\u043d\u0430\u043b\u0430\u0434\u043a\u0438 \u0423\u0441\u043b\u0443\u0433\u0438 \u0413\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0438 \u0413\u0418\u041f \u2014 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u0432\u0430\u0448\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u041f\u0440\u0435\u0434\u043f\u0440\u043e\u0435\u043a\u0442\u043d\u044b\u0435 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wp-custom-template-home-page","meta":{"footnotes":""},"class_list":["post-2378","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages\/2378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2378"}],"version-history":[{"count":481,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages\/2378\/revisions"}],"predecessor-version":[{"id":4528,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages\/2378\/revisions\/4528"}],"wp:attachment":[{"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}