{"id":2378,"date":"2025-11-20T14:34:10","date_gmt":"2025-11-20T11:34:10","guid":{"rendered":"https:\/\/mechanogurus.ru\/?page_id=2378"},"modified":"2026-09-01T10:50:46","modified_gmt":"2026-09-01T07:50:46","slug":"home-page","status":"publish","type":"page","link":"https:\/\/mechanogurus.ru\/","title":{"rendered":"Home"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\">\n<!-- ==========================================================\n     MECHANOGURUS HOMEPAGE HERO\n     WordPress Custom HTML block\n========================================================== -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n<link rel=\"preconnect\" href=\"https:\/\/cdnjs.cloudflare.com\" crossorigin=\"\">\n<link rel=\"preconnect\" href=\"https:\/\/cdn.jsdelivr.net\" crossorigin=\"\">\n\n<link rel=\"preload\" href=\"\/wp-content\/uploads\/2025\/06\/Economizer2.glb\" as=\"fetch\" type=\"model\/gltf-binary\" fetchpriority=\"high\">\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;600;700&amp;family=DM+Sans:wght@400;500;600&amp;display=swap\" rel=\"stylesheet\">\n\n<script defer=\"\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\">\n<\/script>\n\n<script defer=\"\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\">\n<\/script>\n\n\n<style>\n\n\/* ==========================================================\n   RESET\n========================================================== *\/\n\n.mg-hero,\n.mg-hero * {\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n}\n\n\n\/* ==========================================================\n   HERO ROOT\n========================================================== *\/\n\n.mg-hero {\n  --mg-bg: #000000;\n  --mg-cream: #FEF4EE;\n  --mg-orange: #F28C00;\n  --mg-gold: #F2B839;\n  --mg-navy: #1B2A4A;\n  --mg-navy-deep: #0F1E3C;\n\n  position: relative;\n  z-index: 0;\n\n  width: 100%;\n  max-width: 100%;\n\n  margin: 0;\n  padding: 0;\n\n  overflow: hidden;\n\n  background: var(--mg-bg);\n  color: var(--mg-cream);\n\n  font-family: 'Roboto', sans-serif;\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  isolation: isolate;\n}\n\n\n\/* ==========================================================\n   MAIN CONTENT WIDTH\n========================================================== *\/\n\n.mg-hero__inner {\n  position: relative;\n  z-index: 1;\n\n  width: 100%;\n  max-width: 1200px;\n\n  margin: 0 auto;\n\n  padding:\n    clamp(58px, 5vw, 82px)\n    clamp(18px, 3vw, 30px)\n    0;\n}\n\n\n\/* ==========================================================\n   MAIN H1\n========================================================== *\/\n\n.mg-hero__heading-wrap {\n  position: relative;\n  z-index: 1;\n\n  width: 100%;\n  max-width: 1200px;\n\n  margin: 0 auto;\n\n  padding: 0 4px;\n\n  text-align: center;\n}\n\n\n.mg-hero__heading {\n  position: relative;\n  z-index: 1;\n\n  width: 100%;\n  max-width: 1200px;\n\n  margin: 0 auto;\n\n  color: var(--mg-cream);\n\n  font-family: 'Roboto', sans-serif;\n\n  \/*\n    Increased relative to previous version.\n\n    Large screens:\n    similar visual hierarchy to other homepage headings.\n  *\/\n  font-size: clamp(42px, 3.7vw, 58px);\n\n  font-weight: 700;\n\n  line-height: 1.04;\n\n  letter-spacing: -0.042em;\n\n  text-align: center;\n\n  text-wrap: balance;\n}\n\n\n.mg-hero__heading-accent {\n  color: var(--mg-orange);\n}\n\n\n\/* small orange accent *\/\n\n.mg-hero__heading::after {\n  content: \"\";\n\n  display: block;\n\n  width: 52px;\n  height: 3px;\n\n  margin: 22px auto 0;\n\n  border-radius: 99px;\n\n  background: var(--mg-orange);\n}\n\n\n\/* ==========================================================\n   3D MODEL AREA\n========================================================== *\/\n\n.mg-hero__model {\n  position: relative;\n  z-index: 1;\n\n  width: 100%;\n  max-width: 1200px;\n\n  height: clamp(430px, 48vw, 560px);\n\n  margin:\n    clamp(2px, 1vw, 10px)\n    auto\n    0;\n\n  overflow: hidden;\n\n  isolation: isolate;\n}\n\n\n\/* ==========================================================\n   WEBGL CANVAS\n========================================================== *\/\n\n#mg3d-canvas {\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 1;\n\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  opacity: 0;\n\n  outline: none;\n\n  pointer-events: none;\n\n  touch-action: pan-y pinch-zoom;\n\n  transition: opacity 0.6s ease;\n}\n\n\n#mg3d-canvas.loaded {\n  opacity: 1;\n}\n\n\n\/* ==========================================================\n   TEXT CONTRAST LAYER\n========================================================== *\/\n\n.mg-hero__service-shade {\n  position: absolute;\n\n  z-index: 3;\n\n  top: 48%;\n  left: 50%;\n\n  width: min(1050px, 115%);\n  height: 240px;\n\n  transform:\n    translate(-50%, -50%);\n\n  pointer-events: none;\n\n  background:\n    radial-gradient(\n      ellipse at center,\n      rgba(0,0,0,0.52) 0%,\n      rgba(0,0,0,0.25) 42%,\n      rgba(0,0,0,0) 74%\n    );\n}\n\n\n\/* ==========================================================\n   ROTATING SERVICE TEXT\n========================================================== *\/\n\n.mg-hero__service-wrap {\n  position: absolute;\n\n  z-index: 8;\n\n  top: 48%;\n  left: 50%;\n\n  width: 100%;\n  max-width: 1050px;\n\n  padding:\n    0\n    clamp(18px, 4vw, 50px);\n\n  transform:\n    translate(-50%, -50%);\n\n  text-align: center;\n\n  pointer-events: none;\n}\n\n\n.mg-hero__service {\n  margin: 0 auto;\n\n  color: var(--mg-cream);\n\n  font-family: 'Roboto', sans-serif;\n\n  font-size:\n    clamp(29px, 3vw, 40px);\n\n  font-weight: 700;\n\n  line-height: 1.13;\n\n  letter-spacing: -0.025em;\n\n  text-align: center;\n\n  text-wrap: balance;\n\n  text-shadow:\n    0 2px 8px rgba(0,0,0,0.95),\n    0 6px 25px rgba(0,0,0,0.72);\n\n  opacity: 1;\n\n  transform:\n    translateY(0);\n\n  transition:\n    opacity 0.4s ease,\n    transform 0.4s ease;\n}\n\n\n.mg-hero__service.is-changing {\n  opacity: 0;\n\n  transform:\n    translateY(8px);\n}\n\n\n\/* ==========================================================\n   CTA POSITION\n========================================================== *\/\n\n.mg-hero__cta-wrap {\n  position: absolute;\n\n  z-index: 12;\n\n  left: 50%;\n\n  bottom:\n    clamp(34px, 4vw, 52px);\n\n  transform:\n    translateX(-50%);\n}\n\n\n\/* ==========================================================\n   CTA BUTTON\n========================================================== *\/\n\n.mg-cta {\n  --btn-height: 54px;\n  --btn-radius: 30px;\n\n  --circle-size: 40px;\n  --circle-offset: 7px;\n\n  --speed: 0.45s;\n  --ease: cubic-bezier(0.4, 0, 0.15, 1);\n\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n\n  height: var(--btn-height);\n\n  padding:\n    0\n    calc(\n      var(--circle-size) +\n      var(--circle-offset) +\n      14px\n    )\n    0\n    28px;\n\n  overflow: hidden;\n\n  border:\n    2px solid rgba(242,184,57,0.20);\n\n  border-radius:\n    var(--btn-radius);\n\n  background:\n    var(--mg-cream);\n\n  box-shadow:\n    0 8px 30px rgba(0,0,0,0.35);\n\n  cursor: pointer;\n\n  text-decoration: none;\n\n  font-family:\n    'DM Sans',\n    sans-serif;\n\n  transition:\n    border-color var(--speed) var(--ease),\n    box-shadow var(--speed) var(--ease);\n}\n\n\n.mg-cta::before {\n  content: '';\n\n  position: absolute;\n\n  z-index: 1;\n\n  right:\n    calc(\n      var(--circle-offset) +\n      var(--circle-size) \/ 2\n    );\n\n  top: 50%;\n\n  width:\n    var(--circle-size);\n\n  height:\n    var(--circle-size);\n\n  border-radius: 50%;\n\n  background:\n    var(--mg-gold);\n\n  transform:\n    translate(50%, -50%)\n    scale(1);\n\n  transition:\n    transform var(--speed) var(--ease);\n\n  pointer-events: none;\n}\n\n\n.mg-cta:hover::before {\n  transform:\n    translate(50%, -50%)\n    scale(8);\n}\n\n\n.mg-cta:hover {\n  border-color:\n    var(--mg-gold);\n\n  box-shadow:\n    0 8px 34px rgba(242,184,57,0.26),\n    0 3px 10px rgba(0,0,0,0.30);\n}\n\n\n\/* CTA text *\/\n\n.mg-cta__text {\n  position: relative;\n\n  z-index: 2;\n\n  color:\n    var(--mg-navy);\n\n  font-size: 15px;\n\n  font-weight: 500;\n\n  line-height: 1;\n\n  white-space: nowrap;\n\n  pointer-events: none;\n}\n\n\n\/* CTA arrow *\/\n\n.mg-cta__arrow {\n  position: absolute;\n\n  z-index: 3;\n\n  right:\n    var(--circle-offset);\n\n  top: 50%;\n\n  width:\n    var(--circle-size);\n\n  height:\n    var(--circle-size);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 50%;\n\n  background:\n    var(--mg-gold);\n\n  transform:\n    translateY(-50%);\n\n  transition:\n    background var(--speed) var(--ease);\n\n  pointer-events: none;\n}\n\n\n.mg-cta__arrow svg {\n  width: 18px;\n  height: 18px;\n\n  fill: none;\n\n  stroke:\n    var(--mg-navy-deep);\n\n  stroke-width: 2.5;\n\n  stroke-linecap: round;\n  stroke-linejoin: round;\n\n  transition:\n    transform var(--speed) var(--ease);\n}\n\n\n.mg-cta:hover .mg-cta__arrow {\n  background: transparent;\n}\n\n\n.mg-cta:hover .mg-cta__arrow svg {\n  transform:\n    translateX(4px);\n}\n\n\n.mg-cta:focus-visible {\n  outline:\n    3px solid var(--mg-gold);\n\n  outline-offset: 4px;\n}\n\n\n\/* ==========================================================\n   TAGLINE\n========================================================== *\/\n\n.mg-hero__tagline {\n  position: relative;\n\n  z-index: 2;\n\n  width: 100%;\n  max-width: 1200px;\n\n  margin:\n    clamp(5px, 1vw, 10px)\n    auto\n    0;\n\n  padding:\n    0\n    15px\n    clamp(32px, 4vw, 48px);\n\n  color:\n    rgba(254,244,238,0.88);\n\n  font-family:\n    'Roboto',\n    sans-serif;\n\n  font-size:\n    clamp(21px, 2vw, 27px);\n\n  font-weight: 400;\n\n  line-height: 1.24;\n\n  letter-spacing:\n    -0.015em;\n\n  text-align: center;\n\n  text-wrap: balance;\n}\n\n\n.mg-hero__tagline strong {\n  color:\n    var(--mg-cream);\n\n  font-weight: 500;\n}\n\n\n\/* ==========================================================\n   MODEL LOADER\n========================================================== *\/\n\n.mg3d-model-loader {\n  position: absolute;\n\n  z-index: 10;\n\n  left: 50%;\n  bottom: 8px;\n\n  transform:\n    translateX(-50%);\n\n  color:\n    rgba(254,244,238,0.70);\n\n  font-size: 12px;\n\n  text-align: center;\n\n  pointer-events: none;\n}\n\n\n.mg3d-model-loader.hidden {\n  display: none;\n}\n\n\n.mg3d-model-loader.error::before {\n  display: none;\n}\n\n\n.mg3d-model-loader::before {\n  content: \"\";\n\n  display: block;\n\n  width: 24px;\n  height: 24px;\n\n  margin:\n    0 auto 8px;\n\n  border:\n    3px solid rgba(254,244,238,0.20);\n\n  border-top-color:\n    var(--mg-gold);\n\n  border-radius: 50%;\n\n  animation:\n    mg-loader-spin\n    0.8s linear infinite;\n}\n\n\n@keyframes mg-loader-spin {\n\n  to {\n    transform:\n      rotate(360deg);\n  }\n\n}\n\n\n\/* ==========================================================\n   LARGE DESKTOP\n========================================================== *\/\n\n@media (min-width: 1281px) {\n\n  .mg-hero__heading {\n    font-size:\n      clamp(48px, 3.7vw, 58px);\n\n    max-width: 1200px;\n  }\n\n\n  .mg-hero__service {\n    font-size:\n      clamp(32px, 2.8vw, 40px);\n  }\n\n}\n\n\n\/* ==========================================================\n   LAPTOP \/ NORMAL SCREEN\n========================================================== *\/\n\n@media\n(min-width: 1025px)\nand\n(max-width: 1280px) {\n\n  .mg-hero__inner {\n    padding-top: 58px;\n  }\n\n\n  .mg-hero__heading {\n    font-size:\n      clamp(40px, 3.7vw, 50px);\n\n    line-height: 1.05;\n  }\n\n\n  .mg-hero__service {\n    font-size:\n      clamp(28px, 3vw, 37px);\n  }\n\n}\n\n\n\/* ==========================================================\n   TABLET\n========================================================== *\/\n\n@media\n(min-width: 769px)\nand\n(max-width: 1024px) {\n\n  .mg-hero__inner {\n    padding:\n      48px\n      18px\n      0;\n  }\n\n\n  .mg-hero__heading-wrap {\n    padding:\n      0 12px;\n  }\n\n\n  .mg-hero__heading {\n    max-width: 900px;\n\n    font-size:\n      clamp(34px, 4.6vw, 44px);\n\n    line-height: 1.08;\n\n    letter-spacing:\n      -0.038em;\n\n    text-wrap: balance;\n  }\n\n\n  .mg-hero__model {\n    height:\n      clamp(405px, 54vw, 500px);\n  }\n\n\n  .mg-hero__service-wrap {\n    top: 47%;\n  }\n\n\n  .mg-hero__service {\n    font-size:\n      clamp(28px, 4vw, 37px);\n  }\n\n\n  .mg-hero__cta-wrap {\n    bottom: 40px;\n  }\n\n}\n\n\n\/* ==========================================================\n   MOBILE\n========================================================== *\/\n\n@media (max-width: 768px) {\n\n  .mg-hero__inner {\n    padding:\n      40px\n      12px\n      0;\n  }\n\n\n  .mg-hero__heading-wrap {\n    padding:\n      0 10px;\n  }\n\n\n  .mg-hero__heading {\n    max-width: 650px;\n\n    font-size:\n      clamp(29px, 6.3vw, 38px);\n\n    line-height: 1.08;\n\n    letter-spacing:\n      -0.035em;\n\n    text-wrap: balance;\n  }\n\n\n  .mg-hero__heading::after {\n    margin-top: 17px;\n  }\n\n\n  .mg-hero__model {\n    height:\n      clamp(390px, 78vw, 510px);\n\n    margin-top: 0;\n  }\n\n\n  .mg-hero__service-wrap {\n    top: 47%;\n\n    padding:\n      0 22px;\n  }\n\n\n  .mg-hero__service {\n    max-width: 650px;\n\n    font-size:\n      clamp(27px, 5.2vw, 35px);\n\n    line-height: 1.13;\n  }\n\n\n  .mg-hero__cta-wrap {\n    bottom: 42px;\n  }\n\n\n  .mg-hero__tagline {\n    font-size:\n      clamp(20px, 3.5vw, 25px);\n  }\n\n}\n\n\n\/* ==========================================================\n   MOBILE PHONE\n========================================================== *\/\n\n@media (max-width: 480px) {\n\n  .mg-hero__inner {\n    padding:\n      34px\n      7px\n      0;\n  }\n\n\n  .mg-hero__heading-wrap {\n    padding:\n      0 7px;\n  }\n\n\n  .mg-hero__heading {\n    max-width: 430px;\n\n    font-size:\n      clamp(28px, 7.8vw, 34px);\n\n    line-height: 1.07;\n\n    letter-spacing:\n      -0.034em;\n\n    text-wrap: balance;\n  }\n\n\n  .mg-hero__heading::after {\n    width: 42px;\n\n    margin-top: 15px;\n  }\n\n\n  .mg-hero__model {\n    height:\n      clamp(420px, 118vw, 505px);\n\n    margin-top: -2px;\n  }\n\n\n  .mg-hero__service-wrap {\n    top: 46%;\n\n    padding:\n      0 13px;\n  }\n\n\n  .mg-hero__service {\n    max-width: 420px;\n\n    font-size:\n      clamp(24px, 6.8vw, 30px);\n\n    line-height: 1.12;\n  }\n\n\n  .mg-hero__service-shade {\n    top: 46%;\n\n    width: 135%;\n    height: 220px;\n  }\n\n\n  .mg-hero__cta-wrap {\n    bottom: 32px;\n  }\n\n\n  .mg-cta {\n    --btn-height: 48px;\n    --circle-size: 36px;\n    --circle-offset: 6px;\n\n    padding-left: 21px;\n  }\n\n\n  .mg-cta__text {\n    font-size: 14px;\n  }\n\n\n  .mg-cta__arrow svg {\n    width: 16px;\n    height: 16px;\n  }\n\n\n  .mg-hero__tagline {\n    max-width: 390px;\n\n    margin-top: 4px;\n\n    padding:\n      0\n      14px\n      34px;\n\n    font-size:\n      clamp(20px, 5.3vw, 23px);\n\n    line-height: 1.22;\n  }\n\n}\n\n\n\/* ==========================================================\n   SMALL MOBILE\n========================================================== *\/\n\n@media (max-width: 374px) {\n\n  .mg-hero__inner {\n    padding-top: 30px;\n  }\n\n\n  .mg-hero__heading {\n    font-size:\n      clamp(25px, 7.8vw, 29px);\n  }\n\n\n  .mg-hero__model {\n    height:\n      clamp(380px, 120vw, 445px);\n  }\n\n\n  .mg-hero__service {\n    font-size:\n      clamp(22px, 6.8vw, 26px);\n  }\n\n\n  .mg-hero__cta-wrap {\n    bottom: 28px;\n  }\n\n\n  .mg-hero__tagline {\n    font-size:\n      clamp(18px, 5.4vw, 21px);\n  }\n\n}\n\n\n\/* ==========================================================\n   LANDSCAPE MOBILE\n========================================================== *\/\n\n@media\n(max-height: 500px)\nand\n(orientation: landscape) {\n\n  .mg-hero__inner {\n    padding-top: 28px;\n  }\n\n\n  .mg-hero__heading {\n    font-size:\n      clamp(24px, 4vw, 32px);\n\n    line-height: 1.06;\n  }\n\n\n  .mg-hero__model {\n    height:\n      clamp(290px, 75vh, 370px);\n  }\n\n\n  .mg-hero__service-wrap {\n    top: 44%;\n  }\n\n\n  .mg-hero__service {\n    font-size:\n      clamp(22px, 3.5vw, 29px);\n  }\n\n\n  .mg-hero__cta-wrap {\n    bottom: 20px;\n  }\n\n}\n\n\n\/* ==========================================================\n   TOUCH\n========================================================== *\/\n\n@media (hover: none) {\n\n  .mg-cta:active::before {\n    transform:\n      translate(50%, -50%)\n      scale(8);\n  }\n\n\n  .mg-cta:active .mg-cta__arrow {\n    background: transparent;\n  }\n\n}\n\n\n\/* ==========================================================\n   REDUCED MOTION\n========================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .mg-hero__service {\n    transition: none;\n  }\n\n\n  .mg3d-model-loader::before {\n    animation: none;\n  }\n\n}\n\n<\/style>\n\n\n<!-- ==========================================================\n     HTML\n========================================================== -->\n\n<section class=\"mg-hero\" aria-labelledby=\"mg-main-heading\" data-model-url=\"\/wp-content\/uploads\/2025\/06\/Economizer2.glb\">\n\n  <div class=\"mg-hero__inner\">\n\n\n    <!-- ======================================================\n         STATIC H1\n    ======================================================= -->\n\n    <div class=\"mg-hero__heading-wrap\">\n\n      <h1 id=\"mg-main-heading\" class=\"mg-hero__heading\">\n        \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0434\u043b\u044f \n        <span class=\"mg-hero__heading-accent\">\n          \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430\n        <\/span>\n      <\/h1>\n\n    <\/div>\n\n\n    <!-- ======================================================\n         3D MODEL\n    ======================================================= -->\n\n    <div class=\"mg-hero__model\">\n\n\n      <canvas id=\"mg3d-canvas\" aria-label=\"\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f 3D-\u043c\u043e\u0434\u0435\u043b\u044c \u044d\u043a\u043e\u043d\u043e\u043c\u0430\u0439\u0437\u0435\u0440\u0430\">\n      <\/canvas>\n\n\n      <!-- subtle dark area behind text -->\n\n      <div class=\"mg-hero__service-shade\" aria-hidden=\"true\">\n      <\/div>\n\n\n      <!-- ====================================================\n           ROTATING SERVICES\n      ===================================================== -->\n\n      <div class=\"mg-hero__service-wrap\">\n\n        <div id=\"mg3d-service\" class=\"mg-hero__service\">\n          \u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f.\n        <\/div>\n\n      <\/div>\n\n\n      <!-- ====================================================\n           CTA\n      ===================================================== -->\n\n      <div class=\"mg-hero__cta-wrap\">\n\n        <a href=\"https:\/\/n8n.mechanogurus.ru\/form\/105adc81-c50a-40f0-ab54-f0b65857d49e\" class=\"mg-cta\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"\u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 Mechanogurus\">\n\n          <span class=\"mg-cta__text\">\n            \u041e\u0431\u0441\u0443\u0434\u0438\u043c?\n          <\/span>\n\n\n          <span class=\"mg-cta__arrow\" aria-hidden=\"true\">\n\n            <svg viewBox=\"0 0 24 24\">\n\n              <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\">\n              <\/line>\n\n              <polyline points=\"13 6 19 12 13 18\">\n              <\/polyline>\n\n            <\/svg>\n\n          <\/span>\n\n        <\/a>\n\n      <\/div>\n\n\n      <!-- loader -->\n\n      <div class=\"mg3d-model-loader\" id=\"mg3d-model-status\" role=\"status\" aria-live=\"polite\">\n        3D-\u043c\u043e\u0434\u0435\u043b\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f\u2026\n      <\/div>\n\n    <\/div>\n\n\n    <!-- ======================================================\n         TAGLINE\n    ======================================================= -->\n\n    <div class=\"mg-hero__tagline\">\n\n      <strong>\n        \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0435 \u0431\u044e\u0440\u043e\n      <\/strong>\n\n      \u0446\u0438\u0444\u0440\u043e\u0432\u043e\u0439 \u044d\u043f\u043e\u0445\u0438\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n<!-- ==========================================================\n     ROTATING SERVICES\n========================================================== -->\n\n<script>\n(() => {\n\n  const initMGServices = () => {\n\n    const block =\n      document.querySelector('.mg-hero');\n\n\n    if (\n      !block ||\n      block.dataset.serviceReady === 'true'\n    ) {\n      return;\n    }\n\n\n    block.dataset.serviceReady =\n      'true';\n\n\n    const service =\n      block.querySelector('#mg3d-service');\n\n\n    if (!service) {\n      return;\n    }\n\n\n    const messages = [\n\n      '\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f.',\n\n      '\u0412\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0438 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c CAD, PDM \u0438 PLM.',\n\n      '\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b.',\n\n      '\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b.'\n\n    ];\n\n\n    let currentIndex = 0;\n\n\n    const reducedMotion =\n      window.matchMedia(\n        '(prefers-reduced-motion: reduce)'\n      ).matches;\n\n\n    if (reducedMotion) {\n      return;\n    }\n\n\n    const changeService = () => {\n\n      service.classList.add(\n        'is-changing'\n      );\n\n\n      setTimeout(() => {\n\n        currentIndex =\n          (currentIndex + 1)\n          %\n          messages.length;\n\n\n        service.textContent =\n          messages[currentIndex];\n\n\n        service.classList.remove(\n          'is-changing'\n        );\n\n      }, 400);\n\n    };\n\n\n    setInterval(\n      changeService,\n      4000\n    );\n\n  };\n\n\n  if (\n    document.readyState === 'loading'\n  ) {\n\n    document.addEventListener(\n      'DOMContentLoaded',\n      initMGServices,\n      {\n        once: true\n      }\n    );\n\n  }\n\n  else {\n\n    initMGServices();\n\n  }\n\n})();\n<\/script>\n\n\n<!-- ==========================================================\n     THREE.JS\n========================================================== -->\n\n<script>\n(() => {\n\n  const initThreeJS = () => {\n\n    const block =\n      document.querySelector('.mg-hero');\n\n\n    if (\n      !block ||\n      block.dataset.viewerReady === 'true'\n    ) {\n      return;\n    }\n\n\n    const canvas =\n      block.querySelector('#mg3d-canvas');\n\n\n    const container =\n      block.querySelector('.mg-hero__model');\n\n\n    const loaderElement =\n      block.querySelector('#mg3d-model-status');\n\n\n    if (\n      !canvas ||\n      !container ||\n      !loaderElement\n    ) {\n      return;\n    }\n\n\n    block.dataset.viewerReady =\n      'true';\n\n\n    if (\n      !window.THREE ||\n      !THREE.GLTFLoader\n    ) {\n\n      loaderElement.textContent =\n        '\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 3D-\u043c\u043e\u0434\u0435\u043b\u0438.';\n\n\n      loaderElement.classList.add(\n        'error'\n      );\n\n\n      return;\n\n    }\n\n\n    const MODEL_URL =\n      block.dataset.modelUrl;\n\n\n    const reducedMotion =\n      window.matchMedia(\n        '(prefers-reduced-motion: reduce)'\n      ).matches;\n\n\n    const lowPowerDevice =\n      Boolean(\n\n        (\n          navigator.hardwareConcurrency\n            ?\n            navigator.hardwareConcurrency <= 4\n            :\n            false\n        )\n\n        ||\n\n        (\n          navigator.deviceMemory\n            ?\n            navigator.deviceMemory <= 4\n            :\n            false\n        )\n\n      );\n\n\n    \/* ======================================================\n       SCENE\n    ====================================================== *\/\n\n    const scene =\n      new THREE.Scene();\n\n\n    \/* ======================================================\n       CAMERA\n    ====================================================== *\/\n\n    const camera =\n      new THREE.PerspectiveCamera(\n\n        45,\n\n        container.clientWidth \/\n        container.clientHeight,\n\n        0.1,\n\n        1000\n\n      );\n\n\n    camera.position.set(\n      0,\n      1,\n      6\n    );\n\n\n    camera.lookAt(\n      0,\n      0,\n      0\n    );\n\n\n    \/* ======================================================\n       RENDERER\n    ====================================================== *\/\n\n    const renderer =\n      new THREE.WebGLRenderer({\n\n        canvas,\n\n        alpha: true,\n\n        antialias:\n          !(\n            lowPowerDevice ||\n            window.devicePixelRatio >= 2\n          ),\n\n        powerPreference:\n          'high-performance',\n\n        stencil: false,\n\n        depth: true\n\n      });\n\n\n    renderer.setSize(\n      container.clientWidth,\n      container.clientHeight\n    );\n\n\n    renderer.setPixelRatio(\n\n      Math.min(\n\n        window.devicePixelRatio,\n\n        lowPowerDevice\n          ? 1\n          : 1.5\n\n      )\n\n    );\n\n\n    renderer.shadowMap.enabled =\n      !lowPowerDevice;\n\n\n    renderer.shadowMap.type =\n      THREE.PCFSoftShadowMap;\n\n\n    renderer.outputEncoding =\n      THREE.sRGBEncoding;\n\n\n    \/* ======================================================\n       LIGHTS\n    ====================================================== *\/\n\n    const ambientLight =\n      new THREE.AmbientLight(\n        0xffffff,\n        0.6\n      );\n\n\n    scene.add(\n      ambientLight\n    );\n\n\n    const directionalLight1 =\n      new THREE.DirectionalLight(\n        0xffffff,\n        0.8\n      );\n\n\n    directionalLight1.position.set(\n      5,\n      8,\n      5\n    );\n\n\n    directionalLight1.castShadow =\n      !lowPowerDevice;\n\n\n    scene.add(\n      directionalLight1\n    );\n\n\n    const directionalLight2 =\n      new THREE.DirectionalLight(\n        0xe0e0e0,\n        0.4\n      );\n\n\n    directionalLight2.position.set(\n      -5,\n      3,\n      -5\n    );\n\n\n    scene.add(\n      directionalLight2\n    );\n\n\n    const fillLight =\n      new THREE.DirectionalLight(\n        0xb0b0b0,\n        0.3\n      );\n\n\n    fillLight.position.set(\n      0,\n      -5,\n      0\n    );\n\n\n    scene.add(\n      fillLight\n    );\n\n\n    \/* ======================================================\n       STATE\n    ====================================================== *\/\n\n    let model = null;\n\n    let isModelLoaded = false;\n\n    let animationFrameId = null;\n\n    let lastFrameTime = 0;\n\n\n    THREE.Cache.enabled = true;\n\n\n    \/* ======================================================\n       GLTF LOADER\n    ====================================================== *\/\n\n    const gltfLoader =\n      new THREE.GLTFLoader();\n\n\n    \/* ======================================================\n       MATERIAL\n    ====================================================== *\/\n\n    const sharedMaterial =\n      new THREE.MeshStandardMaterial({\n\n        color: 0xa0a0a0,\n\n        metalness: 0.3,\n\n        roughness: 0.6\n\n      });\n\n\n    const disposeMaterial =\n      material => {\n\n        if (\n          Array.isArray(material)\n        ) {\n\n          material.forEach(\n            disposeMaterial\n          );\n\n        }\n\n        else if (material) {\n\n          material.dispose();\n\n        }\n\n      };\n\n\n    \/* ======================================================\n       RENDER\n    ====================================================== *\/\n\n    const render = () => {\n\n      renderer.render(\n        scene,\n        camera\n      );\n\n    };\n\n\n    \/* ======================================================\n       ANIMATION\n    ====================================================== *\/\n\n    const animate =\n      currentTime => {\n\n        animationFrameId =\n          null;\n\n\n        if (\n          !isModelLoaded ||\n          document.hidden\n        ) {\n          return;\n        }\n\n\n        if (\n          currentTime -\n          lastFrameTime\n          >=\n          1000 \/ 30\n        ) {\n\n          const elapsed =\n            Math.min(\n\n              currentTime -\n              lastFrameTime,\n\n              100\n\n            );\n\n\n          lastFrameTime =\n            currentTime;\n\n\n          if (\n            !reducedMotion &&\n            model\n          ) {\n\n            model.rotation.y +=\n              0.00048 *\n              elapsed;\n\n          }\n\n\n          render();\n\n        }\n\n\n        if (\n          !reducedMotion\n        ) {\n\n          animationFrameId =\n            requestAnimationFrame(\n              animate\n            );\n\n        }\n\n      };\n\n\n    const startAnimation = () => {\n\n      if (\n        animationFrameId ||\n        !isModelLoaded ||\n        document.hidden\n      ) {\n        return;\n      }\n\n\n      lastFrameTime =\n        performance.now();\n\n\n      animationFrameId =\n        requestAnimationFrame(\n          animate\n        );\n\n    };\n\n\n    const stopAnimation = () => {\n\n      if (\n        animationFrameId\n      ) {\n\n        cancelAnimationFrame(\n          animationFrameId\n        );\n\n      }\n\n\n      animationFrameId =\n        null;\n\n    };\n\n\n    \/* ======================================================\n       MODEL LOADED\n    ====================================================== *\/\n\n    const onModelLoaded =\n      gltf => {\n\n\n        model =\n          gltf.scene;\n\n\n        model.traverse(\n          child => {\n\n            if (\n              child.isMesh\n            ) {\n\n              disposeMaterial(\n                child.material\n              );\n\n\n              child.material =\n                sharedMaterial;\n\n\n              child.castShadow =\n                !lowPowerDevice;\n\n\n              child.receiveShadow =\n                !lowPowerDevice;\n\n\n              child.frustumCulled =\n                true;\n\n            }\n\n          }\n        );\n\n\n        \/* Auto centre \/ scale *\/\n\n        const box =\n          new THREE.Box3()\n            .setFromObject(\n              model\n            );\n\n\n        const center =\n          box.getCenter(\n            new THREE.Vector3()\n          );\n\n\n        const size =\n          box.getSize(\n            new THREE.Vector3()\n          );\n\n\n        const maxDim =\n          Math.max(\n            size.x,\n            size.y,\n            size.z\n          );\n\n\n        const scale =\n          4.5 \/\n          maxDim;\n\n\n        model.scale.multiplyScalar(\n          scale\n        );\n\n\n        model.position\n          .copy(center)\n          .multiplyScalar(\n            -scale\n          );\n\n\n        scene.add(\n          model\n        );\n\n\n        isModelLoaded =\n          true;\n\n\n        loaderElement\n          .classList\n          .add('hidden');\n\n\n        canvas\n          .classList\n          .add('loaded');\n\n\n        render();\n\n        startAnimation();\n\n      };\n\n\n    \/* ======================================================\n       ERROR\n    ====================================================== *\/\n\n    const onLoadError =\n      error => {\n\n        console.error(\n          '\u041e\u0448\u0438\u0431\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 3D-\u043c\u043e\u0434\u0435\u043b\u0438:',\n          error\n        );\n\n\n        loaderElement.textContent =\n          '\u041d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c 3D-\u043c\u043e\u0434\u0435\u043b\u044c.';\n\n\n        loaderElement.classList.add(\n          'error'\n        );\n\n      };\n\n\n    \/* ======================================================\n       PROGRESS\n    ====================================================== *\/\n\n    const updateProgress =\n      xhr => {\n\n        if (\n          xhr.lengthComputable\n        ) {\n\n          const pct =\n            Math.round(\n\n              (\n                xhr.loaded \/\n                xhr.total\n              )\n              *\n              100\n\n            );\n\n\n          loaderElement.textContent =\n            `3D-\u043c\u043e\u0434\u0435\u043b\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f\u2026 ${pct}%`;\n\n        }\n\n      };\n\n\n    \/* ======================================================\n       LOAD MODEL\n    ====================================================== *\/\n\n    if (!MODEL_URL) {\n\n      onLoadError(\n        new Error(\n          'URL 3D-\u043c\u043e\u0434\u0435\u043b\u0438 \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d.'\n        )\n      );\n\n      return;\n\n    }\n\n\n    gltfLoader.load(\n\n      MODEL_URL,\n\n      onModelLoaded,\n\n      updateProgress,\n\n      onLoadError\n\n    );\n\n\n    \/* ======================================================\n       RESIZE\n    ====================================================== *\/\n\n    let resizeFrameId;\n\n\n    const handleResize = () => {\n\n      cancelAnimationFrame(\n        resizeFrameId\n      );\n\n\n      resizeFrameId =\n        requestAnimationFrame(\n          () => {\n\n            const width =\n              container.clientWidth;\n\n\n            const height =\n              container.clientHeight;\n\n\n            if (\n              !width ||\n              !height\n            ) {\n              return;\n            }\n\n\n            camera.aspect =\n              width \/\n              height;\n\n\n            camera.updateProjectionMatrix();\n\n\n            renderer.setSize(\n              width,\n              height,\n              false\n            );\n\n\n            renderer.setPixelRatio(\n\n              Math.min(\n\n                window.devicePixelRatio,\n\n                lowPowerDevice\n                  ? 1\n                  : 1.5\n\n              )\n\n            );\n\n\n            render();\n\n          }\n        );\n\n    };\n\n\n    if (\n      'ResizeObserver'\n      in window\n    ) {\n\n      new ResizeObserver(\n        handleResize\n      ).observe(\n        container\n      );\n\n    }\n\n    else {\n\n      window.addEventListener(\n        'resize',\n        handleResize,\n        {\n          passive: true\n        }\n      );\n\n    }\n\n\n    \/* ======================================================\n       VISIBILITY\n    ====================================================== *\/\n\n    document.addEventListener(\n      'visibilitychange',\n      () => {\n\n        if (\n          document.hidden\n        ) {\n\n          stopAnimation();\n\n        }\n\n        else {\n\n          startAnimation();\n\n        }\n\n      }\n    );\n\n  };\n\n\n  \/* ========================================================\n     INIT\n  ======================================================== *\/\n\n  if (\n    document.readyState ===\n    'loading'\n  ) {\n\n    document.addEventListener(\n      'DOMContentLoaded',\n      initThreeJS,\n      {\n        once: true\n      }\n    );\n\n  }\n\n  else {\n\n    initThreeJS();\n\n  }\n\n})();\n<\/script>\n\n\n<noscript>\n\n  <p style=\"\n      color:#FEF4EE;\n      text-align:center;\n      font-family:Roboto,sans-serif;\n    \">\n    \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439, \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 CAD, PDM \u0438 PLM,\n    \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432.\n  <\/p>\n\n<\/noscript>\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<!--\n  MG: Our Services \u2014 Homepage expanding panels\n  WordPress Custom HTML block \u2014 self-contained\n\n  MOBILE DESIGN:\n  Collapsed = service name only\n  Expanded = service name + pain + solution + description + CTA\n-->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link\n  href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@500;600;700&#038;family=Manrope:wght@400;600;700&#038;display=swap\"\n  rel=\"stylesheet\"\n>\n\n<style>\n\/* ==========================================================\n   RESET\n   ========================================================== *\/\n\n.mgp-wrap,\n.mgp-wrap *,\n.mgp-wrap *::before,\n.mgp-wrap *::after {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n\n\/* ==========================================================\n   MAIN WRAPPER \u2014 DESKTOP\n   ========================================================== *\/\n\n.mgp-wrap {\n  display: flex;\n  flex-direction: row;\n\n  width: 100%;\n  max-width: 1400px;\n\n  margin: 0 auto;\n\n  gap: 10px;\n\n  height: 64vh;\n  min-height: 340px;\n}\n\n\n\/* ==========================================================\n   PANELS\n   ========================================================== *\/\n\n.mgp-panel {\n  position: relative;\n\n  flex: 1;\n\n  min-width: 80px;\n\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n\n  border-radius: 10px;\n\n  cursor: pointer;\n\n  overflow: hidden;\n\n  transition:\n    flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n\n  outline: none;\n}\n\n\n\/* Dark overlay *\/\n\n.mgp-panel::before {\n  content: '';\n\n  position: absolute;\n  inset: 0;\n\n  background:\n    linear-gradient(\n      160deg,\n      rgba(0,0,0,0.32) 0%,\n      rgba(0,0,0,0.78) 100%\n    );\n\n  z-index: 1;\n\n  transition:\n    background 0.4s ease;\n}\n\n\n.mgp-panel:hover::before,\n.mgp-panel:focus-visible::before {\n  background:\n    linear-gradient(\n      160deg,\n      rgba(0,0,0,0.24) 0%,\n      rgba(0,0,0,0.72) 100%\n    );\n}\n\n\n.mgp-panel:focus-visible {\n  box-shadow:\n    inset 0 0 0 2px #F2B839;\n}\n\n\n\/* Expanded desktop panel *\/\n\n.mgp-panel.active {\n  flex: 4;\n}\n\n\n.mgp-panel.active::before {\n  background:\n    linear-gradient(\n      160deg,\n      rgba(0,0,0,0.38) 0%,\n      rgba(0,0,0,0.82) 100%\n    );\n}\n\n\n\/* ==========================================================\n   PANEL CONTENT\n   ========================================================== *\/\n\n.mgp-inner {\n  position: absolute;\n  inset: 0;\n\n  z-index: 2;\n\n  display: flex;\n  flex-direction: column;\n\n  justify-content: center;\n  align-items: center;\n\n  padding: 24px 16px;\n\n  overflow: hidden;\n}\n\n\n\/* Expanded desktop content *\/\n\n.mgp-panel.active .mgp-inner {\n  justify-content: flex-start;\n  align-items: flex-start;\n\n  padding: 36px;\n\n  top: 0;\n  bottom: auto;\n\n  height: auto;\n}\n\n\n\/* ==========================================================\n   TITLE\n   ========================================================== *\/\n\n.mgp-title {\n  font-family:\n    'Oswald',\n    'Arial Narrow',\n    sans-serif;\n\n  font-size: 22px;\n  font-weight: 600;\n\n  color: #fff;\n\n  letter-spacing: 4px;\n\n  text-transform: uppercase;\n\n  white-space: nowrap;\n\n  line-height: 1;\n\n  writing-mode: vertical-rl;\n  text-orientation: mixed;\n\n  transform: rotate(180deg);\n\n  flex-shrink: 0;\n}\n\n\n\/* Expanded title *\/\n\n.mgp-panel.active .mgp-title {\n  writing-mode: horizontal-tb;\n\n  transform: rotate(0deg);\n\n  font-size: 48px;\n\n  letter-spacing: 3px;\n\n  white-space: normal;\n\n  margin-bottom: 10px;\n\n  line-height: 1.05;\n}\n\n\n\/* ==========================================================\n   PAIN \/ QUESTION\n   ========================================================== *\/\n\n.mgp-pain {\n  display: none;\n\n  font-family:\n    'Manrope',\n    'Segoe UI',\n    sans-serif;\n\n  font-size: 17px;\n\n  font-weight: 600;\n\n  color: #F2B839;\n\n  letter-spacing: 0.2px;\n\n  line-height: 1.45;\n\n  margin-bottom: 12px;\n\n  width: 100%;\n}\n\n\n.mgp-panel.active .mgp-pain {\n  display: block;\n}\n\n\n\/* ==========================================================\n   SHORT SOLUTION\n   ========================================================== *\/\n\n.mgp-solution {\n  display: none;\n\n  font-family:\n    'Manrope',\n    'Segoe UI',\n    sans-serif;\n\n  font-size: 15px;\n\n  color: rgba(255,255,255,0.72);\n\n  font-style: italic;\n\n  margin-bottom: 16px;\n}\n\n\n.mgp-panel.active .mgp-solution {\n  display: block;\n}\n\n\n\/* ==========================================================\n   DESCRIPTION\n   ========================================================== *\/\n\n.mgp-desc {\n  display: none;\n\n  font-family:\n    'Manrope',\n    'Segoe UI',\n    sans-serif;\n\n  font-size: 15px;\n\n  color: rgba(255,255,255,0.88);\n\n  line-height: 1.65;\n\n  margin-bottom: 20px;\n\n  width: 100%;\n}\n\n\n.mgp-panel.active .mgp-desc {\n  display: block;\n}\n\n\n.mgp-desc ul {\n  list-style: none;\n\n  padding: 0;\n\n  display: flex;\n\n  flex-direction: column;\n\n  gap: 8px;\n}\n\n\n.mgp-desc li {\n  padding-left: 22px;\n\n  position: relative;\n}\n\n\n.mgp-desc li::before {\n  content: '';\n\n  position: absolute;\n\n  left: 0;\n  top: 9px;\n\n  width: 8px;\n  height: 8px;\n\n  background: #E1830F;\n\n  border-radius: 50%;\n}\n\n\n\/* ==========================================================\n   CTA\n   ========================================================== *\/\n\n.mgp-cta {\n  display: none;\n\n  font-family:\n    'Manrope',\n    'Segoe UI',\n    sans-serif;\n\n  font-size: 14px;\n\n  font-weight: 600;\n\n  color: #fff;\n\n  text-decoration: none;\n\n  letter-spacing: 1.2px;\n\n  text-transform: uppercase;\n\n  border-bottom: 2px solid #F2B839;\n\n  padding-bottom: 3px;\n}\n\n\n.mgp-cta:hover {\n  color: #F2B839;\n}\n\n\n.mgp-panel.active .mgp-cta {\n  display: inline-block;\n}\n\n\n\/* ==========================================================\n   PANEL BACKGROUNDS\n   ========================================================== *\/\n\n\n\/* 1 \u2014 \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 *\/\n\n.mgp-panel:nth-child(1) {\n  background-image:\n    url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/reengineering.png');\n}\n\n\n\/* 2 \u2014 \u0426\u0438\u0444\u0440\u043e\u0432\u0430\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0438\u044f *\/\n\n.mgp-panel:nth-child(2) {\n  background-image:\n    url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/solidworks-pdm-implementation-service.jpg');\n}\n\n\n\/* 3 \u2014 \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430 *\/\n\n.mgp-panel:nth-child(3) {\n  background-image:\n    url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/Analysis_slider_tile.jpg');\n}\n\n\n\/* 4 \u2014 \u0410\u0434\u0434\u0438\u0442\u0438\u0432\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 *\/\n\n.mgp-panel:nth-child(4) {\n  background-image:\n    url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/Standard_procedures.jpg');\n}\n\n\n\/* ==========================================================\n   TABLET\n   ========================================================== *\/\n\n@media (max-width: 1024px) and (min-width: 769px) {\n\n  .mgp-wrap {\n    height: 56vh;\n  }\n\n\n  .mgp-panel {\n    min-width: 64px;\n  }\n\n\n  .mgp-title {\n    font-size: 18px;\n\n    letter-spacing: 3px;\n  }\n\n\n  .mgp-panel.active .mgp-title {\n    font-size: 36px;\n  }\n\n\n  .mgp-pain {\n    font-size: 15px;\n  }\n\n\n  .mgp-desc {\n    font-size: 14px;\n  }\n\n\n  .mgp-panel.active .mgp-inner {\n    padding: 24px;\n  }\n}\n\n\n\/* ==========================================================\n   MOBILE\n   OPTION 1:\n   CLOSED = TITLE ONLY\n   ========================================================== *\/\n\n@media (max-width: 768px) {\n\n  \/* ----------------------------------------------------------\n     STACK\n     ---------------------------------------------------------- *\/\n\n  .mgp-wrap {\n    flex-direction: column;\n\n    width: 100%;\n\n    height: auto;\n    min-height: 0;\n\n    gap: 8px;\n  }\n\n\n  \/* ----------------------------------------------------------\n     CLOSED PANEL\n     ---------------------------------------------------------- *\/\n\n  .mgp-panel {\n    flex: none;\n\n    width: 100%;\n\n    height: 70px;\n\n    min-width: 0;\n\n    border-radius: 9px;\n\n    background-position: center;\n\n    transition:\n      height 0.55s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n\n  \/* Slightly brighter image in closed state *\/\n\n  .mgp-panel::before {\n    background:\n      linear-gradient(\n        90deg,\n        rgba(0,0,0,0.68) 0%,\n        rgba(0,0,0,0.48) 55%,\n        rgba(0,0,0,0.62) 100%\n      );\n  }\n\n\n  \/* ----------------------------------------------------------\n     EXPANDED PANEL\n     ---------------------------------------------------------- *\/\n\n  .mgp-panel.active {\n    flex: none;\n\n    height: 400px;\n  }\n\n\n  .mgp-panel.active::before {\n    background:\n      linear-gradient(\n        160deg,\n        rgba(0,0,0,0.38) 0%,\n        rgba(0,0,0,0.84) 100%\n      );\n  }\n\n\n  \/* ----------------------------------------------------------\n     CLOSED CONTENT\n     ---------------------------------------------------------- *\/\n\n  .mgp-inner {\n    flex-direction: row;\n\n    flex-wrap: nowrap;\n\n    justify-content: flex-start;\n\n    align-items: center;\n\n    padding:\n      0\n      46px\n      0\n      20px;\n\n    overflow: hidden;\n  }\n\n\n  \/* ----------------------------------------------------------\n     EXPANDED CONTENT\n     ---------------------------------------------------------- *\/\n\n  .mgp-panel.active .mgp-inner {\n    flex-direction: column;\n\n    flex-wrap: nowrap;\n\n    justify-content: flex-start;\n\n    align-items: flex-start;\n\n    padding: 20px;\n\n    top: 0;\n    bottom: auto;\n\n    height: auto;\n\n    overflow: hidden;\n  }\n\n\n  \/* ----------------------------------------------------------\n     CLOSED TITLE\n     ---------------------------------------------------------- *\/\n\n  .mgp-title {\n    writing-mode: horizontal-tb;\n\n    transform: none;\n\n    width: 100%;\n\n    font-size:\n      clamp(\n        15px,\n        4.3vw,\n        18px\n      );\n\n    font-weight: 600;\n\n    letter-spacing:\n      clamp(\n        1.5px,\n        0.55vw,\n        2.4px\n      );\n\n    line-height: 1.1;\n\n    white-space: nowrap;\n\n    overflow: visible;\n\n    text-overflow: unset;\n\n    color: #fff;\n  }\n\n\n  \/* ----------------------------------------------------------\n     EXPANDED TITLE\n     ---------------------------------------------------------- *\/\n\n  .mgp-panel.active .mgp-title {\n    width: 100%;\n\n    font-size: 25px;\n\n    line-height: 1.08;\n\n    letter-spacing: 2px;\n\n    white-space: normal;\n\n    margin-bottom: 10px;\n  }\n\n\n  \/* ----------------------------------------------------------\n     IMPORTANT:\n     PAIN IS HIDDEN WHILE CLOSED\n     ---------------------------------------------------------- *\/\n\n  .mgp-pain {\n    display: none;\n  }\n\n\n  .mgp-panel.active .mgp-pain {\n    display: block;\n\n    width: 100%;\n\n    font-size: 13.5px;\n\n    line-height: 1.45;\n\n    margin-bottom: 10px;\n  }\n\n\n  \/* ----------------------------------------------------------\n     SOLUTION\n     ---------------------------------------------------------- *\/\n\n  .mgp-solution {\n    font-size: 12.5px;\n\n    line-height: 1.4;\n\n    margin-bottom: 12px;\n  }\n\n\n  \/* ----------------------------------------------------------\n     DESCRIPTION\n     ---------------------------------------------------------- *\/\n\n  .mgp-desc {\n    font-size: 13px;\n\n    line-height: 1.55;\n\n    margin-bottom: 14px;\n  }\n\n\n  .mgp-desc ul {\n    gap: 6px;\n  }\n\n\n  .mgp-desc li {\n    padding-left: 18px;\n  }\n\n\n  .mgp-desc li::before {\n    width: 7px;\n    height: 7px;\n\n    top: 7px;\n  }\n\n\n  \/* ----------------------------------------------------------\n     CTA\n     ---------------------------------------------------------- *\/\n\n  .mgp-cta {\n    font-size: 12.5px;\n\n    letter-spacing: 0.9px;\n  }\n\n\n  \/* ----------------------------------------------------------\n     ARROW\n     ---------------------------------------------------------- *\/\n\n  .mgp-panel::after {\n    content: '\u203a';\n\n    position: absolute;\n\n    right: 18px;\n\n    top: 50%;\n\n    transform:\n      translateY(-52%);\n\n    z-index: 3;\n\n    font-family:\n      Arial,\n      sans-serif;\n\n    font-size: 25px;\n\n    font-weight: 300;\n\n    line-height: 1;\n\n    color:\n      rgba(\n        255,\n        255,\n        255,\n        0.58\n      );\n  }\n\n\n  .mgp-panel.active::after {\n    display: none;\n  }\n\n}\n\n\n\/* ==========================================================\n   SMALL MOBILE\n   ========================================================== *\/\n\n@media (max-width: 400px) {\n\n  .mgp-panel {\n    height: 68px;\n  }\n\n\n  .mgp-panel.active {\n    height: 410px;\n  }\n\n\n  .mgp-inner {\n    padding:\n      0\n      42px\n      0\n      17px;\n  }\n\n\n  .mgp-title {\n    font-size:\n      clamp(\n        14px,\n        4.2vw,\n        16px\n      );\n\n    letter-spacing: 1.6px;\n  }\n\n\n  .mgp-panel.active .mgp-inner {\n    padding: 18px;\n  }\n\n\n  .mgp-panel.active .mgp-title {\n    font-size: 22px;\n\n    letter-spacing: 1.7px;\n  }\n\n\n  .mgp-panel.active .mgp-pain {\n    font-size: 13px;\n  }\n\n\n  .mgp-desc {\n    font-size: 12.5px;\n  }\n\n\n  .mgp-panel::after {\n    right: 16px;\n  }\n}\n\n\n\/* ==========================================================\n   TOUCH DEVICES\n   ========================================================== *\/\n\n@media (hover: none) {\n\n  .mgp-panel:hover::before {\n    background:\n      linear-gradient(\n        160deg,\n        rgba(0,0,0,0.32) 0%,\n        rgba(0,0,0,0.78) 100%\n      );\n  }\n\n\n  @media (max-width: 768px) {\n\n    .mgp-panel:hover::before {\n      background:\n        linear-gradient(\n          90deg,\n          rgba(0,0,0,0.68) 0%,\n          rgba(0,0,0,0.48) 55%,\n          rgba(0,0,0,0.62) 100%\n        );\n    }\n\n\n    .mgp-panel.active::before {\n      background:\n        linear-gradient(\n          160deg,\n          rgba(0,0,0,0.38) 0%,\n          rgba(0,0,0,0.84) 100%\n        );\n    }\n\n  }\n\n}\n\n\n\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .mgp-panel {\n    transition: none;\n  }\n\n}\n<\/style>\n\n\n<div class=\"mgp-wrap\">\n\n\n  <!-- ======================================================\n       1. \u0420\u0410\u0417\u0420\u0410\u0411\u041e\u0422\u041a\u0410 \u0418\u0417\u0414\u0415\u041b\u0418\u0419\n       ====================================================== -->\n\n  <div\n    class=\"mgp-panel\"\n    role=\"button\"\n    tabindex=\"0\"\n    aria-expanded=\"false\"\n  >\n\n    <div class=\"mgp-inner\">\n\n      <h2 class=\"mgp-title\">\n        \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439\n      <\/h2>\n\n      <p class=\"mgp-pain\">\n        \u0415\u0441\u0442\u044c \u0438\u0434\u0435\u044f, \u0437\u0430\u043a\u0430\u0437 \u0438\u043b\u0438 \u0442\u0435\u043d\u0434\u0435\u0440, \u043d\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      <\/p>\n\n      <p class=\"mgp-solution\">\n        \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c.\n      <\/p>\n\n      <div class=\"mgp-desc\">\n\n        <ul>\n\n          <li>\n            \u0413\u043e\u0442\u043e\u0432\u0430\u044f \u041a\u0414 \u0438 3D-\u043c\u043e\u0434\u0435\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e\n          <\/li>\n\n          <li>\n            \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u2014 \u043c\u0435\u043d\u044c\u0448\u0435 \u043c\u0430\u0441\u0441\u044b, \u043d\u0438\u0436\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c, \u043a\u043e\u0440\u043e\u0447\u0435 \u0441\u0440\u043e\u043a\u0438\n          <\/li>\n\n          <li>\n            \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0447\u0451\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043d\u0438\u0436\u0430\u044e\u0442 \u0440\u0438\u0441\u043a\u0438 \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f\n          <\/li>\n\n          <li>\n            \u0410\u0432\u0442\u043e\u0440\u0441\u043a\u043e\u0435 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u0434\u043e \u0441\u0434\u0430\u0447\u0438 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0443\n          <\/li>\n\n        <\/ul>\n\n      <\/div>\n\n      <a\n        href=\"https:\/\/mechanogurus.ru\/?page_id=1431\"\n        class=\"mgp-cta\"\n      >\n        \u0423\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u2192\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n\n\n\n  <!-- ======================================================\n       2. \u0426\u0418\u0424\u0420\u041e\u0412\u0410\u042f \u0418\u041d\u0416\u0415\u041d\u0415\u0420\u0418\u042f\n       ====================================================== -->\n\n  <div\n    class=\"mgp-panel\"\n    role=\"button\"\n    tabindex=\"0\"\n    aria-expanded=\"false\"\n  >\n\n    <div class=\"mgp-inner\">\n\n      <h2 class=\"mgp-title\">\n        \u0426\u0438\u0444\u0440\u043e\u0432\u0430\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0438\u044f\n      <\/h2>\n\n      <p class=\"mgp-pain\">\n        CAD \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u0432\u043e\u043a\u0440\u0443\u0433 \u043d\u0435\u0433\u043e \u2014 \u043d\u0435\u0442?\n      <\/p>\n\n      <p class=\"mgp-solution\">\n        \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u043c.\n      <\/p>\n\n      <div class=\"mgp-desc\">\n\n        <ul>\n\n          <li>\n            SOLIDWORKS PDM \/ PLM \u2014 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u043e\u043d\u0435\u0446 \u0445\u0430\u043e\u0441\u0443 \u0432\u0435\u0440\u0441\u0438\u0439\n          <\/li>\n\n          <li>\n            CAD-\u0441\u0435\u0440\u0432\u0435\u0440\u044b \u0438 VDI \u2014 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0431\u044b\u0441\u0442\u0440\u043e, \u0431\u0435\u0437 \u043f\u0440\u043e\u0441\u0442\u043e\u0435\u0432\n          <\/li>\n\n          <li>\n            Add-ins, PDM Loader \u0438 API \u2014 \u0440\u0443\u0442\u0438\u043d\u0430 \u0443\u0445\u043e\u0434\u0438\u0442 \u0438\u0437 \u0440\u0443\u043a \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430\n          <\/li>\n\n          <li>\n            \u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438, AI \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u2014 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0439 \u043e\u0442\u0434\u0435\u043b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u0441\u0438\u0441\u0442\u0435\u043c\u0430\n          <\/li>\n\n        <\/ul>\n\n      <\/div>\n\n      <a\n        href=\"https:\/\/mechanogurus.ru\/?page_id=506\"\n        class=\"mgp-cta\"\n      >\n        \u0423\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u2192\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n\n\n\n  <!-- ======================================================\n       3. \u0410\u0412\u0422\u041e\u041c\u0410\u0422\u0418\u0417\u0410\u0426\u0418\u042f \u0411\u0418\u0417\u041d\u0415\u0421\u0410\n       ====================================================== -->\n\n  <div\n    class=\"mgp-panel\"\n    role=\"button\"\n    tabindex=\"0\"\n    aria-expanded=\"false\"\n  >\n\n    <div class=\"mgp-inner\">\n\n      <h2 class=\"mgp-title\">\n        \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430\n      <\/h2>\n\n      <p class=\"mgp-pain\">\n        \u0421\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044f\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u0435\u0436\u0434\u0443 \u0441\u0430\u0439\u0442\u043e\u043c, CRM, \u043f\u043e\u0447\u0442\u043e\u0439 \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u043c\u0438?\n      <\/p>\n\n      <p class=\"mgp-solution\">\n        \u0421\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c.\n      <\/p>\n\n      <div class=\"mgp-desc\">\n\n        <ul>\n\n          <li>\n            CRM, helpdesk, \u0441\u0430\u0439\u0442 \u0438 \u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043a\u0430\u043a \u0435\u0434\u0438\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\n          <\/li>\n\n          <li>\n            \u0417\u0430\u044f\u0432\u043a\u0438, \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\n          <\/li>\n\n          <li>\n            API, n8n \u0438 AI \u0443\u0441\u0442\u0440\u0430\u043d\u044f\u044e\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0440\u0443\u0447\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438\n          <\/li>\n\n          <li>\n            \u041f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c\u0438, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438 \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438\n          <\/li>\n\n        <\/ul>\n\n      <\/div>\n\n      <a\n        href=\"https:\/\/mechanogurus.ru\/?page_id=392\"\n        class=\"mgp-cta\"\n      >\n        \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u2192\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n\n\n\n  <!-- ======================================================\n       4. \u0410\u0414\u0414\u0418\u0422\u0418\u0412\u041d\u042b\u0415 \u0422\u0415\u0425\u041d\u041e\u041b\u041e\u0413\u0418\u0418\n       ====================================================== -->\n\n  <div\n    class=\"mgp-panel\"\n    role=\"button\"\n    tabindex=\"0\"\n    aria-expanded=\"false\"\n  >\n\n    <div class=\"mgp-inner\">\n\n      <h2 class=\"mgp-title\">\n        \u0410\u0434\u0434\u0438\u0442\u0438\u0432\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438\n      <\/h2>\n\n      <p class=\"mgp-pain\">\n        \u041d\u0443\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0438\u043b\u0438 \u0435\u0434\u0438\u043d\u0438\u0447\u043d\u0443\u044e \u0434\u0435\u0442\u0430\u043b\u044c?\n      <\/p>\n\n      <p class=\"mgp-solution\">\n        \u0418\u0437\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c.\n      <\/p>\n\n      <div class=\"mgp-desc\">\n\n        <ul>\n\n          <li>\n            \u0411\u044b\u0441\u0442\u0440\u043e\u0435 \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043e\u0432 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0435\u0442\u0430\u043b\u0435\u0439\n          <\/li>\n\n          <li>\n            3D-\u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0438 \u0440\u0435\u0432\u0435\u0440\u0441-\u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u0430\n          <\/li>\n\n          <li>\n            \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u0438\u043b\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0434\u0435\u0442\u0430\u043b\u0435\u0439 \u043f\u043e \u0441\u043a\u0430\u043d\u0443\n          <\/li>\n\n          <li>\n            \u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u043a \u0438\u0441\u043f\u044b\u0442\u0430\u043d\u0438\u044f\u043c \u0438 \u0441\u0435\u0440\u0438\u0439\u043d\u043e\u043c\u0443 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0443\n          <\/li>\n\n        <\/ul>\n\n      <\/div>\n\n      <a\n        href=\"https:\/\/mechanogurus.ru\/?page_id=1924\"\n        class=\"mgp-cta\"\n      >\n        \u0423\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u2192\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n\n\n<\/div>\n\n\n<script>\n(function () {\n\n  const root =\n    document.currentScript &&\n    document.currentScript.previousElementSibling;\n\n\n  const wrap =\n    root &&\n    root.classList &&\n    root.classList.contains('mgp-wrap')\n      ? root\n      : document.querySelector('.mgp-wrap');\n\n\n  if (!wrap) {\n    return;\n  }\n\n\n  const panels =\n    wrap.querySelectorAll('.mgp-panel');\n\n\n  let timer = null;\n\n\n\n  \/* ========================================================\n     TIMER\n     ======================================================== *\/\n\n  function clearT() {\n\n    if (timer) {\n\n      clearTimeout(timer);\n\n      timer = null;\n\n    }\n\n  }\n\n\n\n  function startT() {\n\n    clearT();\n\n\n    timer =\n      setTimeout(function () {\n\n        panels.forEach(function (panel) {\n\n          setExpanded(\n            panel,\n            false\n          );\n\n        });\n\n      }, 6000);\n\n  }\n\n\n\n  \/* ========================================================\n     PANEL STATE\n     ======================================================== *\/\n\n  function setExpanded(\n    panel,\n    expanded\n  ) {\n\n    panel.classList.toggle(\n      'active',\n      expanded\n    );\n\n\n    panel.setAttribute(\n      'aria-expanded',\n      expanded\n        ? 'true'\n        : 'false'\n    );\n\n  }\n\n\n\n  function closeAll(except) {\n\n    panels.forEach(function (panel) {\n\n      if (panel !== except) {\n\n        setExpanded(\n          panel,\n          false\n        );\n\n      }\n\n    });\n\n  }\n\n\n\n  function togglePanel(panel) {\n\n    const isActive =\n      panel.classList.contains('active');\n\n\n    closeAll(panel);\n\n\n    if (!isActive) {\n\n      setExpanded(\n        panel,\n        true\n      );\n\n\n      startT();\n\n    }\n\n    else {\n\n      setExpanded(\n        panel,\n        false\n      );\n\n\n      clearT();\n\n    }\n\n  }\n\n\n\n  \/* ========================================================\n     EVENTS\n     ======================================================== *\/\n\n  panels.forEach(function (panel) {\n\n\n    \/* Click *\/\n\n    panel.addEventListener(\n      'click',\n      function (event) {\n\n        if (\n          event.target.closest('.mgp-cta')\n        ) {\n          return;\n        }\n\n\n        togglePanel(panel);\n\n      }\n    );\n\n\n    \/* Keyboard *\/\n\n    panel.addEventListener(\n      'keydown',\n      function (event) {\n\n        if (\n          event.target.closest('.mgp-cta')\n        ) {\n          return;\n        }\n\n\n        if (\n          event.key === 'Enter' ||\n          event.key === ' '\n        ) {\n\n          event.preventDefault();\n\n          togglePanel(panel);\n\n        }\n\n      }\n    );\n\n\n    \/* Desktop hover *\/\n\n    panel.addEventListener(\n      'mouseenter',\n      function () {\n\n        if (\n          panel.classList.contains('active')\n        ) {\n\n          startT();\n\n        }\n\n      }\n    );\n\n\n    \/* Keyboard focus *\/\n\n    panel.addEventListener(\n      'focusin',\n      function () {\n\n        if (\n          panel.classList.contains('active')\n        ) {\n\n          startT();\n\n        }\n\n      }\n    );\n\n  });\n\n})();\n<\/script>\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-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<!-- MECHANOGURUS | Engineering hero block | Option 1 | Russian site -->\n<!-- Paste this entire code into a WordPress Custom HTML block. -->\n\n<section class=\"mg-engineering-hero\" aria-labelledby=\"mg-engineering-hero-title\">\n  <div class=\"mg-engineering-hero__inner\">\n\n    <div class=\"mg-engineering-hero__visual\" aria-hidden=\"true\">\n      <img\n        src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/08\/GasPiston_RUMO-02.png\"\n        alt=\"\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n        decoding=\"async\"\n      >\n    <\/div>\n\n    <div class=\"mg-engineering-hero__content\">\n      <h2 class=\"mg-engineering-hero__title\" id=\"mg-engineering-hero-title\">\n        <span>\u0412\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430.<\/span>\n        <span>\u041d\u0430\u0448\u0435 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/span>\n      <\/h2>\n\n      <p class=\"mg-engineering-hero__text\">\n        \u0411\u0435\u0440\u0451\u043c \u043d\u0430 \u0441\u0435\u0431\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0432\u044b\u043f\u0443\u0441\u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0438 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0435 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f.\n      <\/p>\n\n      <a class=\"mg-engineering-hero__button\"\n         href=\"https:\/\/mechanogurus.ru\/?page_id=392\"\n         aria-label=\"\u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0441 Mechanogurus\">\n        \u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443\n        <span class=\"mg-engineering-hero__button-arrow\" aria-hidden=\"true\">\u2192<\/span>\n      <\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n  \/* Remove WordPress content-width restrictions around this block. *\/\n  .wp-block-html:has(.mg-engineering-hero),\n  .entry-content > .wp-block-html:has(.mg-engineering-hero),\n  .wp-block-post-content > .wp-block-html:has(.mg-engineering-hero),\n  .wp-block-group:has(.mg-engineering-hero),\n  .wp-block-group:has(.mg-engineering-hero) > .wp-block-group__inner-container,\n  .is-layout-constrained:has(.mg-engineering-hero),\n  .entry-content:has(.mg-engineering-hero) > .wp-block-html {\n    display: block !important;\n    width: 100% !important;\n    max-width: none !important;\n    margin-left: auto !important;\n    margin-right: auto !important;\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n    margin-top: 0 !important;\n    margin-bottom: 0 !important;\n    float: none !important;\n  }\n\n  .mg-engineering-hero,\n  .mg-engineering-hero * {\n    box-sizing: border-box;\n  }\n\n  .mg-engineering-hero {\n    --mg-hero-width: 1400px;\n    --mg-hero-text: #fef4ee;\n    --mg-hero-muted: #d7d8da;\n    --mg-hero-accent: #f0b323;\n    position: relative;\n    width: 100% !important;\n    max-width: none !important;\n    margin: 0 auto !important;\n    overflow: hidden;\n    background: transparent;\n    color: var(--mg-hero-text);\n    font-family: \"DM Sans\", \"Roboto\", Arial, sans-serif;\n  }\n\n  \/* Option 1: image and centered copy share the same full-width stage. *\/\n  .mg-engineering-hero__inner {\n    position: relative;\n    isolation: isolate;\n    display: grid;\n    place-items: center;\n    width: calc(100% - 40px);\n    max-width: var(--mg-hero-width);\n    min-height: clamp(500px, 42vw, 640px);\n    margin-inline: auto;\n    padding: clamp(32px, 3.5vw, 52px) clamp(20px, 4vw, 64px);\n    overflow: hidden;\n    background: transparent;\n  }\n\n  .mg-engineering-hero__visual {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    min-width: 0;\n    pointer-events: none;\n    background: transparent;\n  }\n\n  .mg-engineering-hero__visual img {\n    display: block;\n    width: 100%;\n    max-width: none;\n    height: 100%;\n    max-height: none;\n    object-fit: cover;\n    object-position: 50% 52%;\n    transform: scale(1.14);\n    transform-origin: 54% 52%;\n    background: transparent;\n  }\n\n  \/* Improves readability without adding a solid block background. *\/\n  .mg-engineering-hero__inner::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n    pointer-events: none;\n    background: radial-gradient(\n      ellipse at center,\n      rgba(14, 17, 20, 0.62) 0%,\n      rgba(14, 17, 20, 0.30) 42%,\n      rgba(14, 17, 20, 0) 74%\n    );\n  }\n\n  .mg-engineering-hero__content {\n    position: relative;\n    z-index: 2;\n    width: min(100%, 1000px);\n    min-width: 0;\n    margin-inline: auto;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n  }\n\n  .mg-engineering-hero__title {\n    margin: 0;\n    color: var(--mg-hero-text);\n    font-size: clamp(40px, 3.8vw, 68px);\n    font-weight: 700;\n    line-height: 0.98;\n    letter-spacing: -0.045em;\n    text-align: center;\n    text-wrap: balance;\n    overflow-wrap: normal;\n    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.72);\n  }\n\n  .mg-engineering-hero__title span {\n    display: block;\n  }\n\n  .mg-engineering-hero__title span + span {\n    margin-top: 0.16em;\n  }\n\n  .mg-engineering-hero__text {\n    width: min(100%, 760px);\n    margin: clamp(24px, 2.7vw, 38px) auto 0;\n    color: var(--mg-hero-muted);\n    font-size: clamp(17px, 1.35vw, 21px);\n    font-weight: 400;\n    line-height: 1.55;\n    text-align: center;\n    text-wrap: balance;\n    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);\n  }\n\n  .mg-engineering-hero__button {\n    min-height: 54px;\n    margin-top: clamp(30px, 3.2vw, 46px);\n    padding: 15px 22px 15px 25px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n    border: 1px solid var(--mg-hero-accent);\n    border-radius: 999px;\n    background: var(--mg-hero-accent);\n    color: #16191d;\n    font-size: 16px;\n    font-weight: 700;\n    line-height: 1;\n    text-decoration: none;\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);\n    transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;\n  }\n\n  .mg-engineering-hero__button:hover,\n  .mg-engineering-hero__button:focus-visible {\n    background: rgba(18, 21, 24, 0.82);\n    color: var(--mg-hero-text);\n    transform: translateY(-2px);\n  }\n\n  .mg-engineering-hero__button:focus-visible {\n    outline: 3px solid rgba(240, 179, 35, 0.35);\n    outline-offset: 4px;\n  }\n\n  .mg-engineering-hero__button-arrow {\n    font-size: 22px;\n    line-height: 0;\n  }\n\n  @media (max-width: 1180px) {\n    .mg-engineering-hero__title {\n      font-size: clamp(38px, 4.6vw, 56px);\n    }\n  }\n\n  @media (max-width: 900px) {\n    .mg-engineering-hero__inner {\n      width: calc(100% - 36px);\n      min-height: clamp(500px, 76vw, 610px);\n      padding: 38px clamp(18px, 5vw, 42px);\n    }\n\n    .mg-engineering-hero__visual img {\n      width: 100%;\n      height: 100%;\n      max-height: none;\n      object-fit: cover;\n      object-position: 56% 52%;\n      transform: scale(1.18);\n      transform-origin: 57% 52%;\n    }\n\n    .mg-engineering-hero__title {\n      max-width: 720px;\n      font-size: clamp(40px, 8.5vw, 64px);\n    }\n  }\n\n  @media (max-width: 480px) {\n    .mg-engineering-hero__inner {\n      width: calc(100% - 24px);\n      min-height: 520px;\n      padding: 32px 16px;\n    }\n\n    .mg-engineering-hero__visual {\n      align-items: stretch;\n      padding-top: 0;\n    }\n\n    .mg-engineering-hero__visual img {\n      width: 100%;\n      height: 100%;\n      max-height: none;\n      object-fit: cover;\n      object-position: 61% 52%;\n      transform: scale(1.24);\n      transform-origin: 62% 52%;\n    }\n\n    .mg-engineering-hero__content {\n      justify-content: center;\n    }\n\n    .mg-engineering-hero__title {\n      font-size: clamp(34px, 11vw, 48px);\n      line-height: 1.01;\n    }\n\n    .mg-engineering-hero__text {\n      margin-top: 22px;\n      font-size: 16px;\n      line-height: 1.5;\n    }\n\n    .mg-engineering-hero__button {\n      width: min(100%, 320px);\n      margin-top: 28px;\n    }\n  }\n\n  \/* Phone-only cinematic pan: right side of the image to the left, then back. *\/\n  @keyframes mg-engineering-mobile-pan {\n    0%, 8% {\n      object-position: 78% 52%;\n    }\n\n    92%, 100% {\n      object-position: 24% 52%;\n    }\n  }\n\n  @media (max-width: 767px) and (hover: none) and (pointer: coarse) {\n    .mg-engineering-hero__visual img {\n      animation: mg-engineering-mobile-pan 18s ease-in-out infinite alternate;\n      will-change: object-position;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .mg-engineering-hero__button {\n      transition: none;\n    }\n\n    .mg-engineering-hero__visual img {\n      animation: none !important;\n      object-position: 61% 52%;\n    }\n  }\n<\/style>\n<\/div>\n\n\n\n<!--\n  MG: Engineering Projects Teaser \u2014 Homepage Block\n  WordPress Custom HTML \u2014 self-contained\n  File: EngineeringProjects_TEASER.html\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&amp;family=DM+Sans:wght@700&amp;family=Rajdhani:wght@400;500;600;700&amp;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 Apple-style header \u2014 full width of site header (1400px) \u2500\u2500 *\/\n.mg-bento .section-header {\n  text-align: left;\n  margin: 0 0 48px;\n  padding: 0 25px;\n  position: relative;\n  z-index: 2;\n  width: 100%;\n  max-width: none;\n  box-sizing: border-box;\n}\n\n.mg-bento .apple-headline {\n  font-family: 'DM Sans', 'Roboto', Arial, sans-serif;\n  font-size: clamp(40px, 3.8vw, 68px);\n  font-weight: 700;\n  letter-spacing: -0.045em;\n  line-height: 0.98;\n  color: #fef4ee;\n  margin: 0 0 6px;\n  width: 100%;\n  max-width: none;\n  -webkit-font-smoothing: antialiased;\n  text-wrap: balance;\n  overflow-wrap: normal;\n  text-align: center;\n}\n\n.mg-bento .apple-subhead {\n  font-family: 'DM Sans', 'Roboto', Arial, sans-serif;\n  font-size: clamp(40px, 3.8vw, 68px);\n  font-weight: 700;\n  letter-spacing: -0.045em;\n  line-height: 0.98;\n  color: #fef4ee;\n  margin: 0 0 20px;\n  width: 100%;\n  max-width: none;\n  -webkit-font-smoothing: antialiased;\n  text-wrap: balance;\n  overflow-wrap: normal;\n  text-align: center;\n}\n\n.mg-bento .apple-body-wrap {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  min-height: 3.2em;\n}\n\n.mg-bento .apple-body {\n  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;\n  font-size: clamp(0.9rem, 0.4vw + 0.85rem, 1.125rem);\n  font-weight: 400;\n  letter-spacing: -0.01em;\n  line-height: 1.5;\n  color: var(--text-secondary);\n  margin: 0;\n  width: 100%;\n  max-width: none;\n  opacity: 0;\n  transform: translateY(100%);\n  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),\n              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);\n  -webkit-font-smoothing: antialiased;\n  text-wrap: pretty;\n}\n\n.mg-bento .apple-body.is-in {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mg-bento .apple-body {\n    opacity: 1;\n    transform: none;\n    transition: none;\n  }\n}\n\n\/* \u2500\u2500 Bento Grid \u2500\u2500 *\/\n.mg-bento .bento-grid {\n  display: grid;\n  grid-template-columns: 1fr 1.7fr 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 Option 2: featured card centred across 2 rows \u2500\u2500 *\/\n.mg-bento .bento-card.featured {\n  grid-column: 2;\n  grid-row: 1 \/ 3;\n  background: var(--card-bg-alt);\n  border-color: rgba(242,184,57,0.28);\n}\n\n\/* Two supporting projects on the left, two on the right. *\/\n.mg-bento .bento-grid > .bento-card:nth-child(2) {\n  grid-column: 1;\n  grid-row: 1;\n}\n\n.mg-bento .bento-grid > .bento-card:nth-child(3) {\n  grid-column: 3;\n  grid-row: 1;\n}\n\n.mg-bento .bento-grid > .bento-card:nth-child(4) {\n  grid-column: 1;\n  grid-row: 2;\n}\n\n.mg-bento .bento-grid > .bento-card:nth-child(5) {\n  grid-column: 3;\n  grid-row: 2;\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 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 \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.mg-bento .bento-card:not(.featured) .img-carousel-slide img {\n  padding: 8px;\n  object-fit: cover;\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  padding: 0;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.mg-bento .bento-card.featured:hover .carousel-arrow,\n.mg-bento .bento-card:not(.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.mg-bento .bento-card:not(.featured) .carousel-arrow {\n  width: 26px;\n  height: 26px;\n}\n.mg-bento .bento-card:not(.featured) .carousel-arrow.prev { left: 8px; }\n.mg-bento .bento-card:not(.featured) .carousel-arrow.next { right: 8px; }\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 .bento-card:not(.featured) .carousel-dots {\n  bottom: 8px;\n  gap: 4px;\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 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: 1fr 1.5fr 1fr;\n    gap: 12px;\n  }\n}\n\n@media (max-width: 1180px) {\n  .mg-bento .apple-headline,\n  .mg-bento .apple-subhead {\n    font-size: clamp(38px, 4.6vw, 56px);\n  }\n}\n\n@media (max-width: 900px) {\n  .mg-bento .apple-headline,\n  .mg-bento .apple-subhead {\n    font-size: clamp(40px, 8.5vw, 64px);\n  }\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-grid > .bento-card:not(.featured) {\n    grid-column: auto;\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 {\n    padding: 0 16px;\n    margin-bottom: 32px;\n  }\n  .mg-bento .apple-body {\n    font-size: clamp(0.88rem, 3.2vw, 1rem);\n  }\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  .mg-bento .section-header { padding: 0 12px; }\n}\n\n@media (max-width: 480px) {\n  .mg-bento .apple-headline,\n  .mg-bento .apple-subhead {\n    font-size: clamp(34px, 11vw, 48px);\n    line-height: 1.01;\n  }\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  .mg-bento .carousel-arrow { opacity: 1; }\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      <h2 class=\"apple-headline\">\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u0438\u044f \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435.<\/h2>\n      <p class=\"apple-subhead\">\u041c\u044b \u0442\u043e\u0436\u0435.<\/p>\n      <div class=\"apple-body-wrap\">\n        <p class=\"apple-body\" id=\"mg-apple-body\">\u041c\u044b \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438, \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c \u043f\u0440\u043e\u0449\u0435, \u0442\u043e\u0447\u043d\u0435\u0435 \u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u043d\u0435\u0435.<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"bento-grid\">\n\n      <!-- \u2500\u2500 FEATURED: \u041a\u0412\u041e\u0423 \u2014 centre column, spans 2 rows \u2500\u2500 -->\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\"><\/path><\/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\"><\/path><\/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      <!-- \u2500\u2500 Row 1, Col 1: \u041f\u0430\u0432\u0438\u043b\u044c\u043e\u043d-\u0443\u043a\u0440\u044b\u0442\u0438\u0435 \u041e\u042d\u042150 \u2500\u2500 -->\n      <article class=\"bento-card\">\n        <div class=\"viewer-container\">\n          <div class=\"img-carousel\" id=\"oes50-carousel\">\n            <div class=\"img-carousel-track\" id=\"oes50-track\"><\/div>\n            <button class=\"carousel-arrow prev\" id=\"oes50-prev\" aria-label=\"\u041d\u0430\u0437\u0430\u0434\"><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\"><\/path><\/svg><\/button>\n            <button class=\"carousel-arrow next\" id=\"oes50-next\" aria-label=\"\u0412\u043f\u0435\u0440\u0451\u0434\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M9 18l6-6-6-6\"><\/path><\/svg><\/button>\n            <div class=\"carousel-dots\" id=\"oes50-dots\"><\/div>\n          <\/div>\n        <\/div>\n        <div class=\"card-info\">\n          <span class=\"card-category\">\u0421\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435<\/span>\n          <span class=\"card-title\">\u041f\u0430\u0432\u0438\u043b\u044c\u043e\u043d-\u0443\u043a\u0440\u044b\u0442\u0438\u0435 \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043a\u043e-\u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0433\u043e \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u041e\u042d\u042150<\/span>\n          <p class=\"card-desc\">\u0412\u0441\u0435\u043f\u043e\u0433\u043e\u0434\u043d\u043e\u0435 \u0431\u043b\u043e\u0447\u043d\u043e-\u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0435 \u0443\u043a\u0440\u044b\u0442\u0438\u0435 \u0442\u0435\u043b\u0435\u0441\u043a\u043e\u043f\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u0430 \u0441 \u043e\u0442\u043a\u0430\u0442\u043d\u043e\u0439 \u043a\u0440\u044b\u0448\u0435\u0439, \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043f\u0440\u0438\u0432\u043e\u0434\u043e\u043c \u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c \u043a\u0440\u0430\u043d-\u0431\u0430\u043b\u043e\u0447\u043d\u044b\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u043c.<\/p>\n        <\/div>\n      <\/article>\n\n      <!-- \u2500\u2500 Row 1, Col 3: Reactor \u2500\u2500 -->\n      <article class=\"bento-card\">\n        <div class=\"viewer-container\">\n          <model-viewer src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/06\/Reactor2.glb\" alt=\"\u0420\u0435\u0430\u043a\u0442\u043e\u0440\" camera-controls=\"\" disable-zoom=\"\" auto-rotate=\"\" rotation-per-second=\"25deg\" shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\" environment-image=\"neutral\" camera-orbit=\"45deg 70deg 105%\" 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\"><\/path><\/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      <!-- \u2500\u2500 Row 2, Col 1: \u041f\u043e\u0440\u0448\u043d\u0435\u0432\u044b\u0435 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0442\u0430\u043d\u0446\u0438\u0438 \u2500\u2500 -->\n      <article class=\"bento-card\">\n        <div class=\"viewer-container\">\n          <div class=\"img-carousel\" id=\"porshn-carousel\">\n            <div class=\"img-carousel-track\" id=\"porshn-track\"><\/div>\n            <button class=\"carousel-arrow prev\" id=\"porshn-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\"><\/path><\/svg>\n            <\/button>\n            <button class=\"carousel-arrow next\" id=\"porshn-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\"><\/path><\/svg>\n            <\/button>\n            <div class=\"carousel-dots\" id=\"porshn-dots\"><\/div>\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\u043e\u0440\u0448\u043d\u0435\u0432\u044b\u0435 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0442\u0430\u043d\u0446\u0438\u0438 0,75\u20131 \u041c\u0412\u0442<\/span>\n          <p class=\"card-desc\">\u0414\u0438\u0437\u0435\u043b\u044c\u043d\u044b\u0435 \u0438 \u0433\u0430\u0437\u043e\u043f\u043e\u0440\u0448\u043d\u0435\u0432\u044b\u0435 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0442\u0430\u043d\u0446\u0438\u0438 \u0431\u043b\u043e\u0447\u043d\u043e-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. \u0420\u0430\u0431\u043e\u0442\u0430 \u043d\u0430 \u043f\u043e\u043f\u0443\u0442\u043d\u043e\u043c \u0433\u0430\u0437\u0435 \u0438 \u0442\u044f\u0436\u0451\u043b\u043e\u043c \u0442\u043e\u043f\u043b\u0438\u0432\u0435.<\/p>\n        <\/div>\n      <\/article>\n\n      <!-- \u2500\u2500 Row 2, Col 3: \u0420\u0430\u0441\u0447\u0451\u0442 \u043f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u0424\u0421-400-1 \u2500\u2500 -->\n      <article class=\"bento-card\">\n        <div class=\"viewer-container\">\n          <div class=\"img-carousel\" id=\"filter-carousel\">\n            <div class=\"img-carousel-track\" id=\"filter-track\"><\/div>\n            <button class=\"carousel-arrow prev\" id=\"filter-prev\" aria-label=\"\u041d\u0430\u0437\u0430\u0434\"><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\"><\/path><\/svg><\/button>\n            <button class=\"carousel-arrow next\" id=\"filter-next\" aria-label=\"\u0412\u043f\u0435\u0440\u0451\u0434\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M9 18l6-6-6-6\"><\/path><\/svg><\/button>\n            <div class=\"carousel-dots\" id=\"filter-dots\"><\/div>\n          <\/div>\n        <\/div>\n        <div class=\"card-info\">\n          <span class=\"card-category\">\u0420\u0430\u0441\u0447\u0451\u0442\u044b<\/span>\n          <span class=\"card-title\">\u0420\u0430\u0441\u0447\u0451\u0442 \u043d\u0430 \u043f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u0440\u043f\u0443\u0441\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u0430 \u0424\u0421-400-1<\/span>\n          <p class=\"card-desc\">\u0410\u043d\u0430\u043b\u0438\u0437 \u043d\u0430\u043f\u0440\u044f\u0436\u0451\u043d\u043d\u043e-\u0434\u0435\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u0440\u043f\u0443\u0441\u0430 \u0432 ANSYS \u043f\u043e \u0413\u041e\u0421\u0422 34233.1-2017. \u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u044b \u043f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0438 \u0443\u0441\u0442\u043e\u0439\u0447\u0438\u0432\u043e\u0441\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438.<\/p>\n        <\/div>\n      <\/article>\n\n    <\/div><!-- \/.bento-grid -->\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\"><\/path>\n        <\/svg>\n      <\/a>\n    <\/div>\n\n  <\/section>\n<\/div>\n\n<script>\n(function () {\n\n  \/* \u2500\u2500 Apple body: scroll-up reveal from bottom \u2500\u2500 *\/\n  (function initAppleBody() {\n    var body = document.getElementById('mg-apple-body');\n    if (!body) return;\n\n    function reveal() {\n      body.classList.add('is-in');\n    }\n\n    if ('IntersectionObserver' in window) {\n      var io = new IntersectionObserver(function (entries) {\n        entries.forEach(function (entry) {\n          if (entry.isIntersecting) {\n            setTimeout(reveal, 280);\n            io.disconnect();\n          }\n        });\n      }, { threshold: 0.35 });\n      io.observe(body.closest('.section-header') || body);\n    } else {\n      setTimeout(reveal, 400);\n    }\n  })();\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 Shared carousel builder \u2500\u2500 *\/\n  function initCarousel(opts) {\n    var BASE = opts.base || 'https:\/\/mechanogurus.ru';\n    var images = opts.images;\n    var track = document.getElementById(opts.trackId);\n    var dotsEl = document.getElementById(opts.dotsId);\n    var counter = opts.counterId ? document.getElementById(opts.counterId) : null;\n    var prevBtn = document.getElementById(opts.prevId);\n    var nextBtn = document.getElementById(opts.nextId);\n    var carousel = document.getElementById(opts.carouselId);\n    if (!track || !dotsEl || !prevBtn || !nextBtn || !carousel) return;\n\n    var total = images.length;\n    var current = 0;\n    var autoTimer;\n\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 = src.indexOf('http') === 0 ? src : (BASE + src);\n      img.alt = (opts.altPrefix || '\u0421\u043b\u0430\u0439\u0434') + ' ' + (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      if (counter) counter.textContent = (current + 1) + ' \/ ' + total;\n    }\n\n    function startAuto() {\n      clearInterval(autoTimer);\n      autoTimer = setInterval(function () { goTo(current + 1); }, opts.interval || 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    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    carousel.addEventListener('mouseenter', stopAuto);\n    carousel.addEventListener('mouseleave', startAuto);\n\n    if (counter) counter.textContent = '1 \/ ' + total;\n    startAuto();\n  }\n\n  \/* \u2500\u2500 \u041a\u0412\u041e\u0423 image carousel \u2500\u2500 *\/\n  initCarousel({\n    carouselId: 'kvou-carousel',\n    trackId: 'kvou-track',\n    dotsId: 'kvou-dots',\n    counterId: 'kvou-counter',\n    prevId: 'kvou-prev',\n    nextId: 'kvou-next',\n    altPrefix: '\u041a\u0412\u041e\u0423',\n    interval: 3500,\n    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\n  \/* \u2500\u2500 \u041f\u043e\u0440\u0448\u043d\u0435\u0432\u044b\u0435 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0442\u0430\u043d\u0446\u0438\u0438 carousel \u2500\u2500 *\/\n  initCarousel({\n    carouselId: 'porshn-carousel',\n    trackId: 'porshn-track',\n    dotsId: 'porshn-dots',\n    prevId: 'porshn-prev',\n    nextId: 'porshn-next',\n    altPrefix: '\u041f\u043e\u0440\u0448\u043d\u0435\u0432\u0430\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u0441\u0442\u0430\u043d\u0446\u0438\u044f',\n    interval: 4000,\n    images: [\n      '\/wp-content\/uploads\/2026\/03\/IMG_0977-scaled.jpeg',\n      '\/wp-content\/uploads\/2026\/03\/IMG_0976-scaled.jpeg',\n      '\/wp-content\/uploads\/2026\/03\/IMG_0830-scaled.jpeg',\n      '\/wp-content\/uploads\/2026\/03\/IMG_0841-scaled.jpeg',\n      '\/wp-content\/uploads\/2026\/03\/IMG_1001-scaled.jpeg',\n      '\/wp-content\/uploads\/2026\/03\/IMG_0999-scaled.jpeg',\n      '\/wp-content\/uploads\/2026\/03\/IMG_0978-scaled.jpeg',\n      '\/wp-content\/uploads\/2026\/03\/IMG_0967.jpeg'\n    ]\n  });\n\n  \/* \u2500\u2500 \u041f\u0430\u0432\u0438\u043b\u044c\u043e\u043d-\u0443\u043a\u0440\u044b\u0442\u0438\u0435 \u041e\u042d\u042150 carousel \u2500\u2500 *\/\n  initCarousel({\n    carouselId: 'oes50-carousel',\n    trackId: 'oes50-track',\n    dotsId: 'oes50-dots',\n    prevId: 'oes50-prev',\n    nextId: 'oes50-next',\n    altPrefix: '\u041f\u0430\u0432\u0438\u043b\u044c\u043e\u043d-\u0443\u043a\u0440\u044b\u0442\u0438\u0435 \u041e\u042d\u042150',\n    interval: 4200,\n    images: [\n      '\/wp-content\/uploads\/2026\/04\/Telescope-11.jpg',\n      '\/wp-content\/uploads\/2026\/04\/Telescope-02.jpg',\n      '\/wp-content\/uploads\/2026\/04\/Telescope-03.jpg',\n      '\/wp-content\/uploads\/2026\/04\/Telescope-04.jpg',\n      '\/wp-content\/uploads\/2026\/04\/Telescope-05.jpg',\n      '\/wp-content\/uploads\/2026\/04\/Telescope-06.jpg',\n      '\/wp-content\/uploads\/2026\/04\/Telescope-07.jpg',\n      '\/wp-content\/uploads\/2026\/04\/Telescope-08.jpg',\n      '\/wp-content\/uploads\/2026\/04\/Telescope-09.png',\n      '\/wp-content\/uploads\/2026\/04\/Telescope-10.png'\n    ]\n  });\n\n  \/* \u2500\u2500 \u0420\u0430\u0441\u0447\u0451\u0442 \u043f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u0440\u043f\u0443\u0441\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u0430 \u0424\u0421-400-1 carousel \u2500\u2500 *\/\n  initCarousel({\n    carouselId: 'filter-carousel',\n    trackId: 'filter-track',\n    dotsId: 'filter-dots',\n    prevId: 'filter-prev',\n    nextId: 'filter-next',\n    altPrefix: '\u0420\u0430\u0441\u0447\u0451\u0442 \u043f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u0424\u0421-400-1',\n    interval: 3800,\n    images: [\n      '\/wp-content\/uploads\/2026\/03\/filter_strength_1.jpg',\n      '\/wp-content\/uploads\/2026\/03\/filter_strength_4.jpg',\n      '\/wp-content\/uploads\/2026\/03\/filter_strength_3.jpg',\n      '\/wp-content\/uploads\/2026\/03\/filter_strength_2.jpg'\n    ]\n  });\n\n})();\n<\/script>\n\n\n\n\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<!-- MECHANOGURUS | Engineering Backbone | WordPress Custom HTML -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;600;700;800&amp;family=Montserrat:wght@700;800&amp;display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* =========================================================\n   WORDPRESS WIDTH RESET\n   ========================================================= *\/\n\n.wp-block-html:has(.mg-backbone),\n.entry-content > .wp-block-html:has(.mg-backbone),\n.wp-block-post-content > .wp-block-html:has(.mg-backbone),\n.wp-block-group:has(.mg-backbone),\n.wp-block-group:has(.mg-backbone) > .wp-block-group__inner-container,\n.is-layout-constrained:has(.mg-backbone) {\n    display:block !important;\n    width:100% !important;\n    max-width:none !important;\n    margin-left:auto !important;\n    margin-right:auto !important;\n    padding-left:0 !important;\n    padding-right:0 !important;\n    float:none !important;\n}\n\n\n\/* =========================================================\n   ROOT\n   ========================================================= *\/\n\n.mg-backbone,\n.mg-backbone *,\n.mg-backbone *::before,\n.mg-backbone *::after {\n    box-sizing:border-box;\n}\n\n.mg-backbone {\n    --orange:#f2a51a;\n    --orange-soft:rgba(242,165,26,.10);\n    --text:#ffffff;\n    --muted:rgba(255,255,255,.68);\n    --border:rgba(255,255,255,.13);\n\n    width:100% !important;\n    max-width:1400px !important;\n\n    margin:clamp(32px,5vw,76px) auto !important;\n\n    padding:\n        0\n        clamp(18px,3vw,34px);\n\n    overflow:hidden;\n\n    color:var(--text);\n    background:transparent !important;\n\n    font-family:\n        \"Manrope\",\n        \"Segoe UI\",\n        sans-serif;\n\n    -webkit-font-smoothing:antialiased;\n}\n\n.mg-backbone h2,\n.mg-backbone h3,\n.mg-backbone p {\n    margin:0;\n    padding:0;\n    color:inherit !important;\n}\n\n\n\/* =========================================================\n   HEADER\n   ========================================================= *\/\n\n.mg-backbone__header {\n    width:100%;\n    max-width:none;\n\n    margin:\n        0 auto\n        clamp(38px,4vw,58px);\n\n    padding:0;\n\n    text-align:center;\n}\n\n.mg-backbone__title {\n    width:100%;\n    max-width:1320px;\n\n    margin-left:auto !important;\n    margin-right:auto !important;\n\n    font-family:\n        \"Montserrat\",\n        \"Manrope\",\n        sans-serif;\n\n    \/*\n       Reduced to match the hierarchy of other\n       homepage section headings.\n    *\/\n    font-size:\n        clamp(\n            1.9rem,\n            1.25rem + 1.45vw,\n            2.85rem\n        );\n\n    font-weight:800;\n\n    line-height:1.08;\n\n    letter-spacing:-.035em;\n\n    text-wrap:normal;\n}\n\n.mg-backbone__brand {\n    color:var(--orange) !important;\n}\n\n.mg-backbone__lead {\n    width:100%;\n    max-width:900px;\n\n    margin:\n        clamp(14px,1.5vw,20px)\n        auto\n        0 !important;\n\n    color:var(--muted) !important;\n\n    font-size:\n        clamp(\n            .9rem,\n            .85rem + .12vw,\n            .98rem\n        );\n\n    line-height:1.6;\n}\n\n\n\/* =========================================================\n   TIMELINE\n   ========================================================= *\/\n\n.mg-backbone__flow {\n    position:relative;\n\n    width:100%;\n    max-width:1180px;\n\n    margin:0 auto;\n\n    display:flex;\n    flex-direction:column;\n\n    gap:\n        clamp(\n            22px,\n            3vw,\n            38px\n        );\n}\n\n\n\/* central line *\/\n\n.mg-backbone__flow::before {\n    content:\"\";\n\n    position:absolute;\n\n    top:80px;\n    bottom:80px;\n\n    left:50%;\n\n    width:2px;\n\n    transform:\n        translateX(-50%);\n\n    background:\n        linear-gradient(\n            to bottom,\n            transparent 0,\n            var(--orange) 5%,\n            var(--orange) 95%,\n            transparent 100%\n        );\n\n    box-shadow:\n        0 0 8px\n        rgba(242,165,26,.32);\n}\n\n\n\/* =========================================================\n   CENTRAL LOGO NODE\n   ========================================================= *\/\n\n.mg-backbone__brand-node {\n    position:relative;\n    z-index:5;\n\n    width:\n        clamp(\n            112px,\n            11vw,\n            150px\n        );\n\n    aspect-ratio:1;\n\n    margin:\n        0 auto\n        clamp(10px,1vw,18px);\n\n    display:grid;\n    place-items:center;\n\n    border-radius:22px;\n\n    border:\n        1px solid\n        rgba(242,165,26,.42);\n\n    background:\n        rgba(8,8,8,.96);\n\n    box-shadow:\n        0 0 0 8px rgba(255,255,255,.018),\n        0 18px 55px rgba(0,0,0,.45),\n        0 0 35px rgba(242,165,26,.09);\n}\n\n.mg-backbone__brand-node::before {\n    content:\"\";\n\n    position:absolute;\n\n    inset:10px;\n\n    border:\n        1px solid\n        rgba(255,255,255,.12);\n\n    border-radius:15px;\n}\n\n.mg-backbone__brand-node img {\n    position:relative;\n    z-index:2;\n\n    display:block;\n\n    width:68%;\n    height:auto;\n\n    object-fit:contain;\n}\n\n.mg-backbone__brand-node::after {\n    content:\"\";\n\n    position:absolute;\n\n    left:50%;\n    top:100%;\n\n    width:2px;\n    height:42px;\n\n    transform:\n        translateX(-50%);\n\n    background:\n        var(--orange);\n\n    box-shadow:\n        0 0 8px\n        rgba(242,165,26,.4);\n}\n\n\n\/* =========================================================\n   ROW\n   ========================================================= *\/\n\n.mg-backbone__row {\n    position:relative;\n    z-index:2;\n\n    width:100%;\n\n    display:grid;\n\n    grid-template-columns:\n        minmax(0,1fr)\n        84px\n        minmax(0,1fr);\n\n    align-items:center;\n}\n\n.mg-backbone__row--left\n.mg-backbone__card {\n    grid-column:1;\n}\n\n.mg-backbone__row--right\n.mg-backbone__card {\n    grid-column:3;\n}\n\n\n\/* =========================================================\n   CENTRAL NODE\n   ========================================================= *\/\n\n.mg-backbone__node {\n    position:absolute;\n\n    left:50%;\n    top:50%;\n\n    width:16px;\n    height:16px;\n\n    transform:\n        translate(-50%,-50%);\n\n    border:\n        2px solid\n        var(--orange);\n\n    border-radius:50%;\n\n    background:#070707;\n\n    box-shadow:\n        0 0 0 6px rgba(242,165,26,.08),\n        0 0 18px rgba(242,165,26,.35);\n\n    z-index:4;\n\n    transition:\n        transform .28s ease,\n        box-shadow .28s ease,\n        background .28s ease;\n}\n\n\n\/* =========================================================\n   HORIZONTAL CONNECTORS\n   ========================================================= *\/\n\n.mg-backbone__row--left::after,\n.mg-backbone__row--right::after {\n    content:\"\";\n\n    position:absolute;\n\n    top:50%;\n\n    height:2px;\n\n    box-shadow:\n        0 0 7px\n        rgba(242,165,26,.24);\n\n    z-index:1;\n}\n\n.mg-backbone__row--left::after {\n    left:\n        calc(\n            50% - 42px\n        );\n\n    width:42px;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(242,165,26,.28),\n            var(--orange)\n        );\n}\n\n.mg-backbone__row--right::after {\n    left:50%;\n\n    width:42px;\n\n    background:\n        linear-gradient(\n            90deg,\n            var(--orange),\n            rgba(242,165,26,.28)\n        );\n}\n\n\n\/* =========================================================\n   CARD\n   ========================================================= *\/\n\n.mg-backbone__card {\n    position:relative;\n\n    width:100%;\n\n    display:grid;\n\n    grid-template-columns:\n        48px\n        minmax(0,1fr);\n\n    gap:16px;\n\n    padding:\n        clamp(\n            18px,\n            2vw,\n            25px\n        );\n\n    border:\n        1px solid\n        var(--border);\n\n    border-radius:16px;\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(255,255,255,.045),\n            rgba(255,255,255,.018)\n        );\n\n    box-shadow:\n        0 14px 35px\n        rgba(0,0,0,.14);\n\n    transition:\n        transform .3s ease,\n        background .3s ease,\n        border-color .3s ease,\n        box-shadow .3s ease;\n}\n\n.mg-backbone__card:hover,\n.mg-backbone__card:focus,\n.mg-backbone__card.is-active {\n    outline:none;\n\n    transform:\n        translateY(-3px);\n\n    border-color:\n        rgba(242,165,26,.52);\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(242,165,26,.09),\n            rgba(255,255,255,.025)\n        );\n\n    box-shadow:\n        0 20px 48px rgba(0,0,0,.25),\n        inset 0 0 0 1px rgba(242,165,26,.04);\n}\n\n\n\/* active node *\/\n\n.mg-backbone__row:has(.mg-backbone__card:hover)\n.mg-backbone__node,\n\n.mg-backbone__row:has(.mg-backbone__card:focus)\n.mg-backbone__node,\n\n.mg-backbone__row:has(.mg-backbone__card.is-active)\n.mg-backbone__node {\n    transform:\n        translate(-50%,-50%)\n        scale(1.25);\n\n    background:\n        var(--orange);\n\n    box-shadow:\n        0 0 0 7px rgba(242,165,26,.11),\n        0 0 24px rgba(242,165,26,.62);\n}\n\n\n\/* =========================================================\n   ICON\n   ========================================================= *\/\n\n.mg-backbone__icon {\n    width:48px;\n    height:48px;\n\n    display:grid;\n    place-items:center;\n\n    border:\n        1px solid\n        rgba(242,165,26,.34);\n\n    border-radius:13px;\n\n    color:\n        var(--orange);\n\n    background:\n        rgba(242,165,26,.09);\n}\n\n.mg-backbone__icon svg {\n    width:23px;\n    height:23px;\n\n    fill:none;\n\n    stroke:\n        currentColor;\n\n    stroke-width:1.8;\n\n    stroke-linecap:round;\n    stroke-linejoin:round;\n}\n\n\n\/* =========================================================\n   COPY\n   ========================================================= *\/\n\n.mg-backbone__copy {\n    min-width:0;\n}\n\n.mg-backbone__card-title {\n    font-size:\n        clamp(\n            1.02rem,\n            .93rem + .25vw,\n            1.18rem\n        );\n\n    font-weight:800;\n\n    line-height:1.3;\n\n    letter-spacing:-.015em;\n}\n\n.mg-backbone__text {\n    margin-top:\n        8px !important;\n\n    color:\n        var(--muted) !important;\n\n    font-size:\n        clamp(\n            .84rem,\n            .79rem + .14vw,\n            .94rem\n        );\n\n    line-height:1.58;\n}\n\n\n\/* =========================================================\n   END NODE\n   ========================================================= *\/\n\n.mg-backbone__end {\n    position:relative;\n    z-index:3;\n\n    width:12px;\n    height:12px;\n\n    margin:\n        6px auto 0;\n\n    border-radius:50%;\n\n    border:\n        2px solid\n        var(--orange);\n\n    background:#080808;\n\n    box-shadow:\n        0 0 0 5px\n        rgba(242,165,26,.08);\n}\n\n\n\/* =========================================================\n   CTA\n   ========================================================= *\/\n\n.mg-backbone__cta-wrap {\n    display:flex;\n    justify-content:center;\n\n    margin-top:\n        clamp(\n            38px,\n            5vw,\n            68px\n        );\n}\n\n.mg-backbone__cta {\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n\n    gap:10px;\n\n    min-height:54px;\n\n    padding:\n        14px 24px;\n\n    border-radius:999px;\n\n    color:#111 !important;\n\n    background:\n        var(--orange);\n\n    font-family:\n        \"Montserrat\",\n        \"Manrope\",\n        sans-serif;\n\n    font-weight:800;\n\n    text-decoration:none !important;\n\n    box-shadow:\n        0 12px 30px\n        rgba(242,165,26,.22);\n\n    transition:\n        transform .25s ease,\n        box-shadow .25s ease;\n}\n\n.mg-backbone__cta:hover {\n    color:#111 !important;\n\n    transform:\n        translateY(-2px);\n\n    box-shadow:\n        0 18px 38px\n        rgba(242,165,26,.32);\n}\n\n.mg-backbone__cta svg {\n    width:18px;\n    height:18px;\n\n    fill:none;\n\n    stroke:\n        currentColor;\n\n    stroke-width:2;\n}\n\n\n\/* =========================================================\n   TABLET \/ IPAD PORTRAIT\n   ========================================================= *\/\n\n@media (max-width:900px) {\n\n    .mg-backbone {\n        padding:\n            0\n            clamp(\n                18px,\n                4vw,\n                34px\n            );\n    }\n\n    .mg-backbone__header {\n        width:100%;\n        max-width:none;\n\n        margin-bottom:36px;\n    }\n\n    .mg-backbone__title {\n        width:100%;\n        max-width:none;\n\n        font-size:\n            clamp(\n                1.8rem,\n                3.6vw,\n                2.35rem\n            );\n\n        line-height:1.09;\n\n        letter-spacing:-.032em;\n\n        text-wrap:normal;\n    }\n\n    .mg-backbone__flow {\n        max-width:760px;\n\n        gap:22px;\n    }\n\n    .mg-backbone__flow::before {\n        left:34px;\n\n        top:104px;\n        bottom:36px;\n\n        transform:none;\n    }\n\n    .mg-backbone__brand-node {\n        margin-left:0;\n        margin-right:auto;\n\n        width:100px;\n\n        border-radius:18px;\n    }\n\n    .mg-backbone__brand-node::before {\n        inset:8px;\n\n        border-radius:12px;\n    }\n\n    .mg-backbone__brand-node::after {\n        left:33px;\n\n        transform:none;\n\n        height:44px;\n    }\n\n    .mg-backbone__row {\n        display:block;\n\n        padding-left:84px;\n    }\n\n    .mg-backbone__row--left\n    .mg-backbone__card,\n\n    .mg-backbone__row--right\n    .mg-backbone__card {\n        width:100%;\n    }\n\n    .mg-backbone__node {\n        left:34px;\n    }\n\n    .mg-backbone__row--left::after,\n    .mg-backbone__row--right::after {\n        left:34px;\n\n        width:50px;\n\n        top:50%;\n\n        background:\n            linear-gradient(\n                90deg,\n                var(--orange),\n                rgba(242,165,26,.28)\n            );\n    }\n\n    .mg-backbone__end {\n        margin-left:28px;\n        margin-right:0;\n    }\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width:640px) {\n\n    .mg-backbone {\n        margin:\n            26px auto\n            38px !important;\n\n        padding:\n            0 14px;\n    }\n\n\n    \/* Header *\/\n\n    .mg-backbone__header {\n        width:100%;\n        max-width:none;\n\n        margin-bottom:30px;\n    }\n\n    .mg-backbone__title {\n        width:100%;\n        max-width:none;\n\n        font-size:\n            clamp(\n                1.62rem,\n                6.5vw,\n                2rem\n            );\n\n        line-height:1.1;\n\n        letter-spacing:-.03em;\n\n        text-wrap:normal;\n    }\n\n    .mg-backbone__lead {\n        width:100%;\n        max-width:560px;\n\n        margin-top:\n            13px !important;\n\n        font-size:.9rem;\n\n        line-height:1.55;\n    }\n\n\n    \/* flow *\/\n\n    .mg-backbone__flow {\n        gap:16px;\n    }\n\n    .mg-backbone__flow::before {\n        left:22px;\n\n        top:82px;\n        bottom:28px;\n    }\n\n\n    \/* logo *\/\n\n    .mg-backbone__brand-node {\n        width:72px;\n\n        margin-left:0;\n\n        border-radius:14px;\n\n        box-shadow:\n            0 12px 36px rgba(0,0,0,.35),\n            0 0 24px rgba(242,165,26,.08);\n    }\n\n    .mg-backbone__brand-node::before {\n        inset:6px;\n\n        border-radius:9px;\n    }\n\n    .mg-backbone__brand-node img {\n        width:70%;\n    }\n\n    .mg-backbone__brand-node::after {\n        left:21px;\n\n        height:30px;\n    }\n\n\n    \/* rows *\/\n\n    .mg-backbone__row {\n        padding-left:56px;\n    }\n\n    .mg-backbone__node {\n        left:22px;\n\n        width:13px;\n        height:13px;\n\n        border-width:2px;\n    }\n\n    .mg-backbone__row--left::after,\n    .mg-backbone__row--right::after {\n        left:22px;\n\n        width:34px;\n    }\n\n\n    \/* card *\/\n\n    .mg-backbone__card {\n        grid-template-columns:\n            40px\n            minmax(0,1fr);\n\n        gap:12px;\n\n        padding:\n            16px 14px;\n\n        border-radius:13px;\n\n        background:\n            rgba(255,255,255,.035);\n\n        box-shadow:none;\n    }\n\n    .mg-backbone__card:hover,\n    .mg-backbone__card:focus,\n    .mg-backbone__card.is-active {\n        transform:none;\n    }\n\n\n    \/* icon *\/\n\n    .mg-backbone__icon {\n        width:40px;\n        height:40px;\n\n        border-radius:10px;\n    }\n\n    .mg-backbone__icon svg {\n        width:20px;\n        height:20px;\n    }\n\n\n    \/* copy *\/\n\n    .mg-backbone__card-title {\n        font-size:1rem;\n\n        line-height:1.28;\n    }\n\n    .mg-backbone__text {\n        margin-top:\n            7px !important;\n\n        font-size:.84rem;\n\n        line-height:1.52;\n    }\n\n\n    \/* end *\/\n\n    .mg-backbone__end {\n        width:10px;\n        height:10px;\n\n        margin-left:17px;\n    }\n\n\n    \/* CTA *\/\n\n    .mg-backbone__cta-wrap {\n        margin-top:32px;\n    }\n\n    .mg-backbone__cta {\n        width:100%;\n        max-width:360px;\n\n        min-height:50px;\n\n        padding:\n            14px 18px;\n    }\n}\n\n\n\/* =========================================================\n   VERY SMALL MOBILE\n   ========================================================= *\/\n\n@media (max-width:380px) {\n\n    .mg-backbone {\n        padding:\n            0 10px;\n    }\n\n    .mg-backbone__title {\n        font-size:1.58rem;\n    }\n\n    .mg-backbone__row {\n        padding-left:49px;\n    }\n\n    .mg-backbone__flow::before,\n    .mg-backbone__node {\n        left:18px;\n    }\n\n    .mg-backbone__row--left::after,\n    .mg-backbone__row--right::after {\n        left:18px;\n\n        width:31px;\n    }\n\n    .mg-backbone__brand-node {\n        width:66px;\n    }\n\n    .mg-backbone__brand-node::after {\n        left:17px;\n    }\n\n    .mg-backbone__card {\n        grid-template-columns:\n            36px\n            minmax(0,1fr);\n\n        gap:10px;\n\n        padding:\n            14px 11px;\n    }\n\n    .mg-backbone__icon {\n        width:36px;\n        height:36px;\n    }\n\n    .mg-backbone__icon svg {\n        width:18px;\n        height:18px;\n    }\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n   ========================================================= *\/\n\n@media (prefers-reduced-motion:reduce) {\n\n    .mg-backbone__card,\n    .mg-backbone__node,\n    .mg-backbone__cta {\n        transition:none;\n    }\n\n    .mg-backbone__card:hover,\n    .mg-backbone__cta:hover {\n        transform:none;\n    }\n}\n<\/style>\n\n\n<section\n    class=\"mg-backbone\"\n    aria-labelledby=\"mg-backbone-title\"\n>\n\n    <!-- HEADER -->\n\n    <header class=\"mg-backbone__header\">\n\n        <h2\n            class=\"mg-backbone__title\"\n            id=\"mg-backbone-title\"\n        >\n            \u041a\u043e\u0433\u0434\u0430\n            <span class=\"mg-backbone__brand\">\n                Mechanogurus\n            <\/span>\n            \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u0435\u043d\n        <\/h2>\n\n        <p class=\"mg-backbone__lead\">\n            \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u044f \u0431\u044b \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439 \u043d\u0438\u0436\u0435 \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u0432\u0430\u0448\u0443,\n            \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043f\u043e\u043c\u043e\u0447\u044c.\n        <\/p>\n\n    <\/header>\n\n\n    <!-- ENGINEERING BACKBONE -->\n\n    <div class=\"mg-backbone__flow\">\n\n\n        <!-- MECHANOGURUS -->\n\n        <div\n            class=\"mg-backbone__brand-node\"\n            aria-label=\"Mechanogurus\"\n        >\n            <img decoding=\"async\"\n                src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/cropped-mg.png\"\n                alt=\"Mechanogurus\"\n            >\n        <\/div>\n\n\n        <!-- 01 -->\n\n        <div class=\"mg-backbone__row mg-backbone__row--left\">\n\n            <span class=\"mg-backbone__node\"><\/span>\n\n            <article\n                class=\"mg-backbone__card\"\n                tabindex=\"0\"\n            >\n\n                <span class=\"mg-backbone__icon\">\n\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"><\/path>\n                        <circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle>\n                        <path d=\"M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <div class=\"mg-backbone__copy\">\n\n                    <h3 class=\"mg-backbone__card-title\">\n                        \u041d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043e\u0432?\n                    <\/h3>\n\n                    <p class=\"mg-backbone__text\">\n                        \u0412\u043e\u0437\u044c\u043c\u0451\u043c \u0447\u0430\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430 \u0441\u0435\u0431\u044f.\n                        \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c 3D-\u043c\u043e\u0434\u0435\u043b\u0438, \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u0447\u0435\u0440\u0442\u0435\u0436\u0438\n                        \u0432 SolidWorks \u0431\u0435\u0437 \u043d\u0430\u0439\u043c\u0430 \u043d\u043e\u0432\u044b\u0445 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432.\n                    <\/p>\n\n                <\/div>\n\n            <\/article>\n\n        <\/div>\n\n\n        <!-- 02 -->\n\n        <div class=\"mg-backbone__row mg-backbone__row--right\">\n\n            <span class=\"mg-backbone__node\"><\/span>\n\n            <article\n                class=\"mg-backbone__card\"\n                tabindex=\"0\"\n            >\n\n                <span class=\"mg-backbone__icon\">\n\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path>\n                        <path d=\"M14 2v6h6\"><\/path>\n                        <path d=\"M8 13h8M8 17h8\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <div class=\"mg-backbone__copy\">\n\n                    <h3 class=\"mg-backbone__card-title\">\n                        \u0415\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e PDF \u0438\u043b\u0438 DWG?\n                    <\/h3>\n\n                    <p class=\"mg-backbone__text\">\n                        \u041f\u0435\u0440\u0435\u0432\u0435\u0434\u0451\u043c \u0441\u0442\u0430\u0440\u044b\u0435 \u0447\u0435\u0440\u0442\u0435\u0436\u0438 \u0432 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435\n                        3D-\u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e\n                        \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430.\n                    <\/p>\n\n                <\/div>\n\n            <\/article>\n\n        <\/div>\n\n\n        <!-- 03 -->\n\n        <div class=\"mg-backbone__row mg-backbone__row--left\">\n\n            <span class=\"mg-backbone__node\"><\/span>\n\n            <article\n                class=\"mg-backbone__card\"\n                tabindex=\"0\"\n            >\n\n                <span class=\"mg-backbone__icon\">\n\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z\"><\/path>\n                        <path d=\"M15 5l4 4\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <div class=\"mg-backbone__copy\">\n\n                    <h3 class=\"mg-backbone__card-title\">\n                        \u041d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e?\n                    <\/h3>\n\n                    <p class=\"mg-backbone__text\">\n                        \u0412\u043d\u0435\u0441\u0451\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c,\n                        \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u043e\u0432\u044b\u0435 \u0434\u0435\u0442\u0430\u043b\u0438 \u0438\u043b\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043c\n                        \u043d\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0438\u0437\u0434\u0435\u043b\u0438\u044f.\n                    <\/p>\n\n                <\/div>\n\n            <\/article>\n\n        <\/div>\n\n\n        <!-- 04 -->\n\n        <div class=\"mg-backbone__row mg-backbone__row--right\">\n\n            <span class=\"mg-backbone__node\"><\/span>\n\n            <article\n                class=\"mg-backbone__card\"\n                tabindex=\"0\"\n            >\n\n                <span class=\"mg-backbone__icon\">\n\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"><\/path>\n                        <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <div class=\"mg-backbone__copy\">\n\n                    <h3 class=\"mg-backbone__card-title\">\n                        \u041d\u0443\u0436\u043d\u044b \u0447\u0435\u0440\u0442\u0435\u0436\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430?\n                    <\/h3>\n\n                    <p class=\"mg-backbone__text\">\n                        \u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043c \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442 \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u0447\u0435\u0440\u0442\u0435\u0436\u0435\u0439\n                        \u0434\u043b\u044f \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u0437\u0430\u043a\u0443\u043f\u043a\u0438,\n                        \u0441\u0432\u0430\u0440\u043a\u0438 \u0438 \u043c\u043e\u043d\u0442\u0430\u0436\u0430.\n                    <\/p>\n\n                <\/div>\n\n            <\/article>\n\n        <\/div>\n\n\n        <!-- 05 -->\n\n        <div class=\"mg-backbone__row mg-backbone__row--left\">\n\n            <span class=\"mg-backbone__node\"><\/span>\n\n            <article\n                class=\"mg-backbone__card\"\n                tabindex=\"0\"\n            >\n\n                <span class=\"mg-backbone__icon\">\n\n                    <svg viewBox=\"0 0 24 24\">\n                        <path d=\"M3 3v18h18\"><\/path>\n                        <path d=\"M7 14l4-4 4 4 5-6\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <div class=\"mg-backbone__copy\">\n\n                    <h3 class=\"mg-backbone__card-title\">\n                        \u041d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u0434\u0435\u043b\u0438\u044f?\n                    <\/h3>\n\n                    <p class=\"mg-backbone__text\">\n                        \u0412\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0440\u0430\u0441\u0447\u0451\u0442\u044b \u043f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u0438,\n                        \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0438 \u0443\u0431\u0435\u0434\u0438\u043c\u0441\u044f,\n                        \u0447\u0442\u043e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e.\n                    <\/p>\n\n                <\/div>\n\n            <\/article>\n\n        <\/div>\n\n\n        <!-- 06 -->\n\n        <div class=\"mg-backbone__row mg-backbone__row--right\">\n\n            <span class=\"mg-backbone__node\"><\/span>\n\n            <article\n                class=\"mg-backbone__card\"\n                tabindex=\"0\"\n            >\n\n                <span class=\"mg-backbone__icon\">\n\n                    <svg viewBox=\"0 0 24 24\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n                        <path d=\"M9.1 9a3 3 0 1 1 5.8 1c0 2-3 3-3 3\"><\/path>\n                        <path d=\"M12 17h.01\"><\/path>\n                    <\/svg>\n\n                <\/span>\n\n                <div class=\"mg-backbone__copy\">\n\n                    <h3 class=\"mg-backbone__card-title\">\n                        \u0415\u0441\u0442\u044c \u0438\u0434\u0435\u044f, \u043d\u043e \u043d\u0435\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430?\n                    <\/h3>\n\n                    <p class=\"mg-backbone__text\">\n                        \u041f\u043e\u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0438\u0434\u0435\u044e \u0432 \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u0438\u0437\u0434\u0435\u043b\u0438\u0435 \u2014\n                        \u043e\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0434\u043e \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0430\n                        \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.\n                    <\/p>\n\n                <\/div>\n\n            <\/article>\n\n        <\/div>\n\n\n        <!-- END -->\n\n        <div\n            class=\"mg-backbone__end\"\n            aria-hidden=\"true\"\n        ><\/div>\n\n    <\/div>\n\n\n    <!-- CTA -->\n\n    <div class=\"mg-backbone__cta-wrap\">\n\n        <a\n            class=\"mg-backbone__cta\"\n            href=\"https:\/\/n8n.mechanogurus.ru\/form\/105adc81-c50a-40f0-ab54-f0b65857d49e\"\n        >\n\n            \u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443\n\n            <svg\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                <path d=\"M5 12h14\"><\/path>\n                <path d=\"M13 6l6 6-6 6\"><\/path>\n            <\/svg>\n\n        <\/a>\n\n    <\/div>\n\n<\/section>\n\n\n<script>\n(function(){\n\n    var root =\n        document.querySelector(\".mg-backbone\");\n\n    if(!root) return;\n\n    var cards =\n        [].slice.call(\n            root.querySelectorAll(\n                \".mg-backbone__card\"\n            )\n        );\n\n    var timer = null;\n    var index = 0;\n\n    var reduce =\n        window.matchMedia(\n            \"(prefers-reduced-motion: reduce)\"\n        ).matches;\n\n\n    function activate(next){\n\n        cards.forEach(\n            function(card,i){\n\n                card.classList.toggle(\n                    \"is-active\",\n                    i === next\n                );\n\n            }\n        );\n\n    }\n\n\n    function start(){\n\n        if(reduce || timer) return;\n\n        activate(index);\n\n        timer =\n            window.setInterval(\n                function(){\n\n                    index =\n                        (index + 1) %\n                        cards.length;\n\n                    activate(index);\n\n                },\n                2400\n            );\n\n    }\n\n\n    function stop(){\n\n        if(timer){\n            window.clearInterval(timer);\n        }\n\n        timer = null;\n    }\n\n\n    cards.forEach(\n        function(card,i){\n\n            card.addEventListener(\n                \"mouseenter\",\n                function(){\n\n                    stop();\n\n                    index = i;\n\n                    activate(i);\n                }\n            );\n\n            card.addEventListener(\n                \"mouseleave\",\n                start\n            );\n\n            card.addEventListener(\n                \"focus\",\n                function(){\n\n                    stop();\n\n                    index = i;\n\n                    activate(i);\n                }\n            );\n\n            card.addEventListener(\n                \"blur\",\n                start\n            );\n\n        }\n    );\n\n\n    if(\"IntersectionObserver\" in window){\n\n        var observer =\n            new IntersectionObserver(\n                function(entries){\n\n                    if(entries[0].isIntersecting){\n                        start();\n                    }\n                    else{\n                        stop();\n                    }\n\n                },\n                {\n                    threshold:.18\n                }\n            );\n\n        observer.observe(root);\n\n    }\n    else{\n        start();\n    }\n\n})();\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-background-color has-text-color has-link-color wp-elements-1 has-global-padding is-layout-constrained wp-container-core-group-is-layout-ca27d633 wp-block-group-is-layout-constrained\" style=\"padding-top:20px;padding-right:30px;padding-bottom:20px;padding-left:51px\">\n<style>\n\/* =========================================================\n   MECHANOGURUS \u2014 MODERN ENGINEERING PROCESS\n   Simplified version: 4 sticky screens + 4 metrics\n   ========================================================= *\/\n\n\n\/* \u2500\u2500 WordPress \/ theme resets \u2500\u2500 *\/\n\n.wp-block-html:has(.mg-vdi),\n.entry-content .wp-block-html:has(.mg-vdi) {\n  display: block !important;\n  max-width: none !important;\n  width: 100% !important;\n  margin: 0 auto !important;\n  padding: 0 !important;\n  float: none !important;\n}\n\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\n\/* \u2500\u2500 Root \u2500\u2500 *\/\n\n.mg-vdi {\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    \"Open Sans\",\n    \"Helvetica Neue\",\n    sans-serif;\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  position: relative;\n  isolation: isolate;\n\n  display: block;\n\n  width: 100% !important;\n  max-width: 1400px !important;\n\n  margin-left: auto !important;\n  margin-right: auto !important;\n\n  padding: 0 25px;\n\n  color: #fff;\n  line-height: 1.5;\n  background: transparent;\n}\n\n\n\/* \u2500\u2500 Reset theme typography \u2500\u2500 *\/\n\n.mg-vdi h2,\n.mg-vdi p {\n  font-family: inherit;\n  text-transform: none;\n  letter-spacing: inherit;\n  border: none;\n  background: none;\n}\n\n.mg-vdi h2::before,\n.mg-vdi p::before {\n  content: none;\n  display: none;\n}\n\n\n\/* \u2500\u2500 Full viewport black background \u2500\u2500 *\/\n\n.mg-vdi .card-bg {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n\n  width: 100vw;\n  margin-left: -50vw;\n\n  z-index: 0;\n\n  background: #000;\n\n  pointer-events: none;\n}\n\n\n\/* \u2500\u2500 Sticky stack \u2500\u2500 *\/\n\n.mg-vdi .perfect-stack-container {\n  position: relative;\n  z-index: 0;\n\n  width: 100%;\n\n  \/* 4 screens instead of previous 6 *\/\n  min-height: 400vh;\n  min-height: 400svh;\n\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n}\n\n\n\/* \u2500\u2500 Cards \u2500\u2500 *\/\n\n.mg-vdi .stack-card {\n  position: -webkit-sticky;\n  position: sticky;\n\n  top: 0;\n\n  width: 100%;\n\n  align-self: stretch;\n\n  height: 100vh;\n  height: 100svh;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  overflow: hidden;\n\n  margin: 0;\n\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 .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\n\n\/* \u2500\u2500 Content panel \u2500\u2500 *\/\n\n.mg-vdi .card-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  width: 100%;\n  max-width: 100%;\n\n  min-height: 58%;\n  max-height: 92%;\n\n  overflow-y: auto;\n\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  margin: 0;\n\n  flex: 0 1 auto;\n\n  background: rgba(15,15,15,0.95);\n\n  border-radius: 20px;\n\n  padding:\n    clamp(24px, 4vw, 46px)\n    clamp(20px, 5vw, 56px);\n\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\n  text-align: center;\n\n  position: relative;\n  z-index: 2;\n}\n\n.mg-vdi .card-content::-webkit-scrollbar {\n  display: none;\n}\n\n\n\/* \u2500\u2500 Glass effect desktop \u2500\u2500 *\/\n\n@media (hover: hover) and (pointer: fine) {\n\n  @supports\n    (backdrop-filter: blur(20px)) or\n    (-webkit-backdrop-filter: blur(20px)) {\n\n    .mg-vdi .card-content {\n      background: rgba(15,15,15,0.72);\n\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n    }\n  }\n}\n\n\n\/* \u2500\u2500 Typography \u2500\u2500 *\/\n\n.mg-vdi .card-content h2 {\n  width: 100%;\n\n  margin: 0 0 clamp(1rem, 2.2vw, 1.7rem);\n\n  padding-bottom: clamp(0.65rem, 1.3vw, 1rem);\n\n  position: relative;\n\n  font-size: clamp(1.65rem, 4vw, 3.15rem);\n  line-height: 1.16;\n  font-weight: 700;\n\n  color: #fff;\n\n  letter-spacing: -0.035em;\n}\n\n\n\/* Orange accent line *\/\n\n.mg-vdi .card-content h2::after {\n  content: \"\";\n\n  display: block;\n\n  width: 42px;\n  height: 3px;\n\n  margin:\n    clamp(0.6rem, 1vw, 0.85rem)\n    auto\n    0;\n\n  background: linear-gradient(\n    90deg,\n    #F2B839,\n    #E1830F\n  );\n\n  border-radius: 2px;\n}\n\n\n\/* Main copy *\/\n\n.mg-vdi .card-content p {\n  margin: 0 auto;\n\n  max-width: 1000px;\n\n  font-size: clamp(1rem, 2vw, 1.55rem);\n  line-height: 1.58;\n\n  color: rgba(255,255,255,0.82);\n\n  font-weight: 400;\n}\n\n\n\/* \u2500\u2500 Small pillar label \u2500\u2500 *\/\n\n.mg-vdi .mg-pillar-label {\n  display: inline-flex;\n\n  align-items: center;\n  justify-content: center;\n\n  margin-bottom: clamp(12px, 1.6vw, 18px);\n\n  padding: 7px 12px;\n\n  border-radius: 999px;\n\n  border: 1px solid rgba(242,184,57,0.24);\n\n  background: rgba(242,184,57,0.07);\n\n  color: #F2B839;\n\n  font-size: clamp(0.68rem, 1vw, 0.82rem);\n  font-weight: 700;\n\n  line-height: 1;\n\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n\n\n\/* \u2500\u2500 Slide animation \u2500\u2500 *\/\n\n.mg-vdi .slide-in {\n  animation:\n    mg-vdi-slidein\n    0.95s\n    cubic-bezier(0.22,1,0.36,1)\n    forwards;\n}\n\n@keyframes mg-vdi-slidein {\n\n  from {\n    transform: translateY(22px) scale(0.97);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0) scale(1);\n    opacity: 1;\n  }\n}\n\n\n\/* =========================================================\n   PROGRESS DOTS\n   ========================================================= *\/\n\n.mg-vdi .mg-dots {\n  position: fixed;\n\n  right: 22px;\n  top: 50%;\n\n  transform: translateY(-50%);\n\n  display: flex;\n  flex-direction: column;\n\n  gap: 11px;\n\n  z-index: 100;\n\n  pointer-events: none;\n\n  opacity: 0;\n\n  transition: opacity 0.35s ease;\n}\n\n.mg-vdi .mg-dots.visible {\n  opacity: 1;\n}\n\n.mg-vdi .mg-dot {\n  display: block;\n\n  width: 7px;\n  height: 7px;\n\n  border-radius: 50%;\n\n  background: rgba(255,255,255,0.20);\n\n  border:\n    1px solid\n    rgba(255,255,255,0.15);\n\n  transition:\n    background .3s,\n    transform .3s,\n    border-color .3s;\n}\n\n.mg-vdi .mg-dot.active {\n  background: #F2B839;\n  border-color: #F2B839;\n\n  transform: scale(1.5);\n\n  box-shadow:\n    0 0 7px\n    rgba(242,184,57,0.6);\n}\n\n\n\/* =========================================================\n   SCROLL HINT\n   ========================================================= *\/\n\n.mg-vdi .mg-scroll-hint {\n  display: none;\n\n  position: absolute;\n\n  bottom:\n    max(\n      20px,\n      env(safe-area-inset-bottom)\n    );\n\n  left: 50%;\n\n  transform: translateX(-50%);\n\n  flex-direction: column;\n  align-items: center;\n\n  gap: 4px;\n\n  z-index: 10;\n\n  pointer-events: none;\n\n  opacity: 0.5;\n\n  animation:\n    mg-hint-bounce\n    2s\n    ease-in-out\n    infinite;\n}\n\n.mg-vdi .card-1 .mg-scroll-hint {\n  display: flex;\n}\n\n.mg-vdi .mg-scroll-hint span {\n  font-size: 0.6rem;\n\n  letter-spacing: 0.12em;\n\n  color: rgba(255,255,255,0.6);\n\n  text-transform: uppercase;\n}\n\n.mg-vdi .mg-scroll-hint svg {\n  width: 16px;\n  height: 16px;\n\n  stroke: rgba(255,255,255,0.5);\n\n  stroke-width: 1.5;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n\n  fill: none;\n}\n\n@keyframes mg-hint-bounce {\n\n  0%,\n  100% {\n    transform:\n      translateX(-50%)\n      translateY(0);\n  }\n\n  50% {\n    transform:\n      translateX(-50%)\n      translateY(5px);\n  }\n}\n\n\n\/* =========================================================\n   METRICS \u2014 4 ONLY\n   ========================================================= *\/\n\n.mg-vdi .mg-metrics {\n  display: grid;\n\n  grid-template-columns:\n    repeat(4, minmax(0, 1fr));\n\n  gap: 12px;\n\n  width: 100%;\n\n  margin-top:\n    clamp(1.5rem, 3vw, 2.5rem);\n}\n\n.mg-vdi .mg-metric {\n  min-width: 0;\n\n  display: flex;\n  flex-direction: column;\n\n  align-items: center;\n  justify-content: center;\n\n  gap: 6px;\n\n  min-height: 100px;\n\n  padding:\n    clamp(12px, 1.5vw, 18px)\n    clamp(8px, 1.2vw, 14px);\n\n  background:\n    rgba(242,184,57,0.065);\n\n  border:\n    1px solid\n    rgba(242,184,57,0.18);\n\n  border-radius: 13px;\n}\n\n.mg-vdi .mg-metric-val {\n  font-size:\n    clamp(1.25rem, 2.2vw, 1.9rem);\n\n  font-weight: 700;\n\n  color: #F2B839;\n\n  line-height: 1;\n\n  white-space: nowrap;\n}\n\n.mg-vdi .mg-metric-lbl {\n  max-width: 230px;\n\n  font-size:\n    clamp(0.68rem, 1vw, 0.82rem);\n\n  color:\n    rgba(255,255,255,0.52);\n\n  line-height: 1.35;\n\n  text-align: center;\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media\n(hover: none) and\n(pointer: coarse) {\n\n  .mg-vdi .mg-dots {\n    display: none;\n  }\n\n  .mg-vdi .card-1 .mg-scroll-hint {\n    display: flex;\n  }\n}\n\n\n@media (max-width: 768px) {\n\n  .mg-vdi .card-content {\n    min-height: 56%;\n\n    padding:\n      24px\n      20px;\n  }\n\n  .mg-vdi .card-content h2 {\n    font-size:\n      clamp(1.45rem, 6vw, 2.2rem);\n\n    letter-spacing: -0.025em;\n  }\n\n  .mg-vdi .card-content p {\n    font-size:\n      clamp(1rem, 3.7vw, 1.2rem);\n\n    line-height: 1.5;\n  }\n\n  .mg-vdi .mg-metrics {\n    grid-template-columns:\n      repeat(2, minmax(0,1fr));\n\n    gap: 9px;\n\n    margin-top: 1.4rem;\n  }\n\n  .mg-vdi .mg-metric {\n    min-height: 88px;\n  }\n}\n\n\n\/* \u2500\u2500 Mobile landscape \u2500\u2500 *\/\n\n@media\n(max-width: 768px) and\n(orientation: landscape) {\n\n  .mg-vdi .card-content {\n    max-height: 96%;\n\n    padding: 17px 24px;\n\n    border-radius: 14px;\n\n    justify-content: flex-start;\n  }\n\n  .mg-vdi .mg-pillar-label {\n    margin-bottom: 8px;\n  }\n\n  .mg-vdi .card-content h2 {\n    font-size:\n      clamp(1.15rem, 3.5vw, 1.7rem);\n\n    margin-bottom: 0.5rem;\n\n    padding-bottom: 0.45rem;\n  }\n\n  .mg-vdi .card-content p {\n    font-size:\n      clamp(0.85rem, 2vw, 1.05rem);\n\n    line-height: 1.4;\n  }\n\n  .mg-vdi .mg-metrics {\n    grid-template-columns:\n      repeat(4, minmax(0,1fr));\n\n    margin-top: 0.8rem;\n\n    gap: 7px;\n  }\n\n  .mg-vdi .mg-metric {\n    min-height: 70px;\n\n    padding: 8px 6px;\n  }\n\n  .mg-vdi .mg-metric-val {\n    font-size:\n      clamp(1rem, 2vw, 1.35rem);\n  }\n\n  .mg-vdi .mg-metric-lbl {\n    font-size: 0.58rem;\n  }\n}\n\n\n\/* \u2500\u2500 Small phones \u2500\u2500 *\/\n\n@media (max-width: 480px) {\n\n  .mg-vdi {\n    padding: 0 16px;\n  }\n\n  .mg-vdi .card-content {\n    border-radius: 16px;\n  }\n\n  .mg-vdi .mg-pillar-label {\n    font-size: 0.64rem;\n\n    padding: 6px 10px;\n  }\n}\n\n\n@media (max-width: 360px) {\n\n  .mg-vdi .card-content h2 {\n    font-size: 1.35rem;\n\n    letter-spacing: 0;\n  }\n\n  .mg-vdi .card-content p {\n    font-size: 0.94rem;\n  }\n\n  .mg-vdi .mg-metrics {\n    gap: 6px;\n  }\n\n  .mg-vdi .mg-metric-val {\n    font-size: 1.05rem;\n  }\n\n  .mg-vdi .mg-metric-lbl {\n    font-size: 0.57rem;\n  }\n}\n\n\n\/* \u2500\u2500 Reduced motion \u2500\u2500 *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .mg-vdi .mg-scroll-hint {\n    animation: none !important;\n  }\n\n  .mg-vdi .slide-in {\n    animation: none !important;\n\n    opacity: 1;\n\n    transform: none;\n  }\n}\n\n<\/style>\n\n\n<div\n  class=\"mg-vdi wp-landing-block\"\n  data-mg-vdi=\"\"\n>\n\n  <!-- Progress dots -->\n  <div\n    class=\"mg-dots\"\n    aria-hidden=\"true\"\n  >\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  <\/div>\n\n\n  <div class=\"perfect-stack-container\">\n\n\n    <!-- =====================================================\n         1 \u2014 INTRODUCTION\n         ===================================================== -->\n\n    <div class=\"stack-card card-1\">\n\n      <div\n        class=\"card-bg\"\n        aria-hidden=\"true\"\n      ><\/div>\n\n      <div class=\"card-content\">\n\n        <h2>\n          \u041c\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f\n          \u0432 \u0435\u0434\u0438\u043d\u043e\u0439 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435\n        <\/h2>\n\n        <p>\n          \u041f\u0440\u043e\u0435\u043a\u0442\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435\n          \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u044b\n          \u0432 \u043e\u0434\u043d\u043e\u043c \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435.\n          \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u043e\u0439,\n          \u043f\u0440\u043e\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0439 \u0438 \u043c\u0435\u043d\u0435\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0439\n          \u043e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u0432.\n        <\/p>\n\n      <\/div>\n\n\n      <div\n        class=\"mg-scroll-hint\"\n        aria-hidden=\"true\"\n      >\n\n        <span>\u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u0435<\/span>\n\n        <svg\n          viewBox=\"0 0 24 24\"\n          aria-hidden=\"true\"\n        >\n          <polyline\n            points=\"6 9 12 15 18 9\"\n          ><\/polyline>\n        <\/svg>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         2 \u2014 MANAGED PROCESS\n         ===================================================== -->\n\n    <div class=\"stack-card card-2\">\n\n      <div\n        class=\"card-bg\"\n        aria-hidden=\"true\"\n      ><\/div>\n\n      <div class=\"card-content\">\n\n        <div class=\"mg-pillar-label\">\n          01 \/ \u041f\u0440\u043e\u0446\u0435\u0441\u0441\n        <\/div>\n\n        <h2>\n          \u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\n        <\/h2>\n\n        <p>\n          \u0417\u0430\u0434\u0430\u0447\u0438, \u0441\u0440\u043e\u043a\u0438 \u0438 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c\n          \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0435\u0434\u0438\u043d\u043e\u043c \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u043a\u043e\u043d\u0442\u0443\u0440\u0435.\n          \u0421\u0442\u0430\u0442\u0443\u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u0435\u043d \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u2014\n          \u043e\u0442 \u043f\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0434\u043e \u0432\u044b\u043f\u0443\u0441\u043a\u0430\n          \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.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         3 \u2014 ENGINEERING DATA\n         ===================================================== -->\n\n    <div class=\"stack-card card-3\">\n\n      <div\n        class=\"card-bg\"\n        aria-hidden=\"true\"\n      ><\/div>\n\n      <div class=\"card-content\">\n\n        <div class=\"mg-pillar-label\">\n          02 \/ \u0414\u0430\u043d\u043d\u044b\u0435\n        <\/div>\n\n        <h2>\n          \u0415\u0434\u0438\u043d\u044b\u0435 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435\n        <\/h2>\n\n        <p>\n          PDM, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438,\n          \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0438 \u043f\u043e\u043a\u0443\u043f\u043d\u044b\u0445 \u0438\u0437\u0434\u0435\u043b\u0438\u0439\n          \u0438 \u0437\u0430\u0449\u0438\u0449\u0451\u043d\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c\n          \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438\n          \u0438 \u043d\u0435\u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         4 \u2014 AUTOMATION + METRICS\n         ===================================================== -->\n\n    <div class=\"stack-card card-4\">\n\n      <div\n        class=\"card-bg\"\n        aria-hidden=\"true\"\n      ><\/div>\n\n      <div class=\"card-content\">\n\n        <div class=\"mg-pillar-label\">\n          03 \/ \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f\n        <\/div>\n\n        <h2>\n          \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\n        <\/h2>\n\n        <p>\n          \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438, \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b\n          \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u044b\u043f\u0443\u0441\u043a\u0430 \u041a\u0414 \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u044e\u0442\n          \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438.\n          \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,\n          \u0430 \u043d\u0435 \u043d\u0430 \u0440\u0443\u0442\u0438\u043d\u043d\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435.\n        <\/p>\n\n\n        <div class=\"mg-metrics\">\n\n          <div class=\"mg-metric\">\n\n            <span class=\"mg-metric-val\">\n              5300+\n            <\/span>\n\n            <span class=\"mg-metric-lbl\">\n              \u043f\u043e\u043a\u0443\u043f\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0443\u044e\u0449\u0438\u0445\n              \u0432 \u0435\u0434\u0438\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435\n            <\/span>\n\n          <\/div>\n\n\n          <div class=\"mg-metric\">\n\n            <span class=\"mg-metric-val\">\n              &lt;50 \u043c\u0441\n            <\/span>\n\n            <span class=\"mg-metric-lbl\">\n              \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0439\n              \u0441\u0435\u0441\u0441\u0438\u0438 \u043f\u043e \u0420\u0424\n            <\/span>\n\n          <\/div>\n\n\n          <div class=\"mg-metric\">\n\n            <span class=\"mg-metric-val\">\n              \u00d72\u20133\n            <\/span>\n\n            <span class=\"mg-metric-lbl\">\n              \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445\n              \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432\n            <\/span>\n\n          <\/div>\n\n\n          <div class=\"mg-metric\">\n\n            <span class=\"mg-metric-val\">\n              100%\n            <\/span>\n\n            <span class=\"mg-metric-lbl\">\n              \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\n              \u043f\u0440\u043e\u0435\u043a\u0442\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 PDM\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n  <\/div>\n<\/div>\n\n\n<script>\n(function () {\n\n  'use strict';\n\n\n  function initMgVdi(vdi) {\n\n    if (\n      !vdi ||\n      vdi.dataset.mgVdiInit === '1'\n    ) {\n      return;\n    }\n\n\n    vdi.dataset.mgVdiInit = '1';\n\n\n    var cards =\n      vdi.querySelectorAll(\n        '.card-content'\n      );\n\n    var dots =\n      vdi.querySelectorAll(\n        '.mg-dot'\n      );\n\n    var dotsWrap =\n      vdi.querySelector(\n        '.mg-dots'\n      );\n\n    var TOTAL = dots.length;\n\n\n    var isTouch =\n      ('ontouchstart' in window) ||\n      (navigator.maxTouchPoints > 0);\n\n\n\n    \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       CONTENT APPEARANCE\n       \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n    if (\n      'IntersectionObserver'\n      in window\n    ) {\n\n      var io =\n        new IntersectionObserver(\n          function (entries) {\n\n            entries.forEach(\n              function (entry) {\n\n                if (\n                  entry.isIntersecting\n                ) {\n\n                  entry.target\n                    .classList\n                    .add('slide-in');\n\n                }\n\n              }\n            );\n\n          },\n          {\n            threshold: 0.08,\n            rootMargin:\n              '0px 0px -60px 0px'\n          }\n        );\n\n\n      cards.forEach(\n        function (card) {\n\n          io.observe(card);\n\n        }\n      );\n\n    } else {\n\n      cards.forEach(\n        function (card) {\n\n          card\n            .classList\n            .add('slide-in');\n\n        }\n      );\n\n    }\n\n\n\n    \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       DESKTOP PROGRESS DOTS\n       \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n    if (\n      !isTouch &&\n      dotsWrap\n    ) {\n\n      function updateDots() {\n\n        var rect =\n          vdi.getBoundingClientRect();\n\n        var blockTop =\n          -rect.top;\n\n        var scrollable =\n          vdi.offsetHeight -\n          window.innerHeight;\n\n\n        if (\n          blockTop < 0 ||\n          blockTop > scrollable\n        ) {\n\n          dotsWrap\n            .classList\n            .remove('visible');\n\n          return;\n        }\n\n\n        dotsWrap\n          .classList\n          .add('visible');\n\n\n        var ratio =\n          scrollable > 0\n            ? blockTop \/ scrollable\n            : 0;\n\n\n        var idx =\n          Math.min(\n            Math.floor(\n              ratio * TOTAL\n            ),\n            TOTAL - 1\n          );\n\n\n        dots.forEach(\n          function (dot, i) {\n\n            dot\n              .classList\n              .toggle(\n                'active',\n                i === idx\n              );\n\n          }\n        );\n\n      }\n\n\n      window.addEventListener(\n        'scroll',\n        updateDots,\n        { passive: true }\n      );\n\n\n      window.addEventListener(\n        'resize',\n        updateDots,\n        { passive: true }\n      );\n\n\n      updateDots();\n\n    }\n\n\n\n    \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       REDUCED MOTION\n       \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n    if (\n      window\n        .matchMedia(\n          '(prefers-reduced-motion: reduce)'\n        )\n        .matches\n    ) {\n\n      cards.forEach(\n        function (card) {\n\n          card\n            .classList\n            .add('slide-in');\n\n        }\n      );\n\n    }\n\n\n\n    \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       MOBILE EDGE SCROLL PROTECTION\n       \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n    if (isTouch) {\n\n      var touchStartY = 0;\n\n\n      vdi.addEventListener(\n        'touchstart',\n        function (e) {\n\n          touchStartY =\n            e.touches[0].clientY;\n\n        },\n        { passive: true }\n      );\n\n\n      vdi.addEventListener(\n        'touchmove',\n        function (e) {\n\n          var delta =\n            e.touches[0].clientY -\n            touchStartY;\n\n\n          var atTop =\n            window.scrollY === 0;\n\n\n          var atBottom =\n            window.scrollY >=\n            document.documentElement\n              .scrollHeight -\n            window.innerHeight;\n\n\n          if (\n            (atTop && delta > 0) ||\n            (atBottom && delta < 0)\n          ) {\n\n            e.preventDefault();\n\n          }\n\n        },\n        { passive: false }\n      );\n\n    }\n\n\n\n    \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       VIEWPORT HEIGHT\n       \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n    function setVh() {\n\n      document\n        .documentElement\n        .style\n        .setProperty(\n          '--mg-vh',\n          (\n            window.innerHeight *\n            0.01\n          ) + 'px'\n        );\n\n    }\n\n\n    window.addEventListener(\n      'resize',\n      setVh,\n      { passive: true }\n    );\n\n\n    setVh();\n\n  }\n\n\n\n  function boot() {\n\n    document\n      .querySelectorAll(\n        '[data-mg-vdi]'\n      )\n      .forEach(initMgVdi);\n\n  }\n\n\n  if (\n    document.readyState ===\n    'loading'\n  ) {\n\n    document.addEventListener(\n      'DOMContentLoaded',\n      boot\n    );\n\n  } else {\n\n    boot();\n\n  }\n\n})();\n<\/script>\n<\/div>\n\n\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<!--\n  MECHANOGURUS \u2014 Automation Teasers\n  WordPress Custom HTML \u2014 self-contained\n\n  Updated:\n  - Equal image sizes\n  - Rounded image corners\n  - Proof line removed\n  - Large service description moved above image\n  - Visible \"Mechanogurus\" replaced with \"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\"\n  - Reduced heading\/subheading sizes to better match other homepage blocks\n  - Max width 1400px\n  - Responsive for desktop, tablet and mobile\n-->\n\n<div class=\"mgas-wrap\" data-mgas>\n\n<style>\n\n\/* =========================================================\n   RESET\n========================================================= *\/\n\n.mgas-wrap,\n.mgas-wrap *{\n  box-sizing:border-box;\n}\n\n.wp-block-html:has(.mgas-wrap),\n.entry-content > .wp-block-html:has(.mgas-wrap),\n.wp-block-post-content > .wp-block-html:has(.mgas-wrap){\n  display:block !important;\n  width:100% !important;\n  max-width:none !important;\n  margin-left:auto !important;\n  margin-right:auto !important;\n  padding:0 !important;\n  float:none !important;\n}\n\n\n\/* =========================================================\n   MAIN WRAPPER\n========================================================= *\/\n\n.mgas-wrap{\n\n  --mgas-max:1400px;\n  --mgas-gutter:20px;\n\n  --mgas-accent:#F59E0B;\n  --mgas-accent-hover:#ffb52d;\n\n  --mgas-text:#ffffff;\n  --mgas-muted:#d4d4d4;\n\n  width:100% !important;\n  max-width:var(--mgas-max) !important;\n\n  margin:\n    clamp(30px,4vw,64px)\n    auto;\n\n  padding-left:var(--mgas-gutter);\n  padding-right:var(--mgas-gutter);\n\n  color:var(--mgas-text);\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Roboto,\n    \"Helvetica Neue\",\n    Arial,\n    sans-serif;\n\n  overflow:visible;\n}\n\n\n\/* =========================================================\n   SHELL\n========================================================= *\/\n\n.mgas-shell{\n  position:relative;\n  width:100%;\n  min-width:0;\n}\n\n\n\/* =========================================================\n   TRACK\n========================================================= *\/\n\n.mgas-track{\n\n  display:flex;\n\n  width:100%;\n\n  overflow-x:auto;\n  overflow-y:hidden;\n\n  scroll-snap-type:x mandatory;\n  scroll-behavior:smooth;\n\n  overscroll-behavior-inline:contain;\n  -webkit-overflow-scrolling:touch;\n\n  scrollbar-width:none;\n\n  touch-action:pan-x pan-y;\n}\n\n.mgas-track::-webkit-scrollbar{\n  display:none;\n}\n\n\n\/* =========================================================\n   SLIDE\n========================================================= *\/\n\n.mgas-slide{\n\n  flex:0 0 100%;\n\n  width:100%;\n  min-width:100%;\n\n  scroll-snap-align:start;\n  scroll-snap-stop:always;\n\n  padding:\n    clamp(20px,2.5vw,34px)\n    0\n    clamp(22px,3vw,40px);\n\n  text-align:center;\n}\n\n\n\/* =========================================================\n   BADGE\n========================================================= *\/\n\n.mgas-badge{\n\n  display:inline-flex;\n\n  align-items:center;\n  justify-content:center;\n\n  min-height:38px;\n\n  max-width:100%;\n\n  margin:\n    0\n    auto\n    clamp(18px,2vw,24px);\n\n  padding:\n    9px\n    24px;\n\n  border-radius:999px;\n\n  background:var(--mgas-accent);\n\n  color:#fff;\n\n  font-size:\n    clamp(10.5px,.9vw,13px);\n\n  font-weight:800;\n\n  line-height:1.25;\n\n  letter-spacing:.75px;\n\n  text-transform:uppercase;\n}\n\n\n\/* =========================================================\n   MAIN HEADLINE\n   Reduced to match other homepage blocks\n========================================================= *\/\n\n.mgas-title{\n\n  width:100%;\n  max-width:1050px;\n\n  margin:\n    0\n    auto\n    clamp(16px,2vw,22px);\n\n  padding:0;\n\n  color:#fff;\n\n  font-size:\n    clamp(1.7rem,2.7vw,2.7rem);\n\n  line-height:1.14;\n\n  font-weight:800;\n\n  letter-spacing:-.025em;\n\n  text-align:center;\n\n  text-wrap:balance;\n\n  border:0 !important;\n\n  overflow-wrap:normal;\n  word-break:normal;\n}\n\n\n\/* =========================================================\n   SERVICE DESCRIPTION\n   Larger than body text, but clearly below heading\n========================================================= *\/\n\n.mgas-lead{\n\n  width:100%;\n  max-width:980px;\n\n  margin:\n    0\n    auto\n    clamp(24px,2.6vw,32px);\n\n  padding:\n    0\n    20px;\n\n  color:var(--mgas-muted);\n\n  font-size:\n    clamp(1.15rem,1.65vw,1.55rem);\n\n  line-height:1.42;\n\n  font-weight:600;\n\n  letter-spacing:-.01em;\n\n  text-align:center;\n\n  text-wrap:balance;\n}\n\n\n.mgas-lead strong{\n\n  color:#fff;\n\n  font-weight:700;\n}\n\n\n\/* =========================================================\n   IMAGE AREA\n========================================================= *\/\n\n.mgas-visual{\n\n  width:100%;\n  max-width:100%;\n\n  margin:\n    0\n    auto\n    clamp(28px,3vw,38px);\n\n  padding:0;\n}\n\n\n\/* Equal display box for both images *\/\n\n.mgas-image-frame{\n\n  width:100%;\n  max-width:1200px;\n\n  aspect-ratio:16 \/ 7;\n\n  margin:0 auto;\n\n  overflow:hidden;\n\n  border-radius:\n    clamp(14px,1.5vw,22px);\n\n  background:#111;\n}\n\n\n\/* Both images always occupy the same visible rectangle *\/\n\n.mgas-image{\n\n  display:block;\n\n  width:100%;\n  height:100%;\n\n  margin:0;\n\n  border:0;\n\n  object-fit:cover;\n\n  object-position:center;\n}\n\n\n\/* =========================================================\n   CTA\n========================================================= *\/\n\n.mgas-button-container{\n\n  width:100%;\n\n  text-align:center;\n}\n\n\n.mgas-button{\n\n  display:inline-flex;\n\n  align-items:center;\n  justify-content:center;\n\n  min-height:48px;\n\n  padding:\n    15px\n    32px;\n\n  border-radius:11px;\n\n  background:var(--mgas-accent);\n\n  color:#fff !important;\n\n  font-size:\n    clamp(1rem,1.1vw,1.1rem);\n\n  font-weight:750;\n\n  line-height:1.25;\n\n  text-decoration:none !important;\n\n  white-space:nowrap;\n\n  transition:\n    background .22s ease,\n    transform .22s ease,\n    box-shadow .22s ease;\n}\n\n\n@media (hover:hover) and (pointer:fine){\n\n  .mgas-button:hover{\n\n    background:var(--mgas-accent-hover);\n\n    transform:translateY(-2px);\n\n    box-shadow:\n      0 12px 28px\n      rgba(245,158,11,.25);\n  }\n\n}\n\n\n\/* =========================================================\n   ARROWS\n========================================================= *\/\n\n.mgas-arrow{\n\n  position:absolute;\n\n  top:50%;\n\n  z-index:20;\n\n  display:grid;\n  place-items:center;\n\n  width:46px;\n  height:46px;\n\n  padding:0;\n\n  border:\n    1px solid\n    rgba(255,255,255,.15);\n\n  border-radius:50%;\n\n  background:\n    rgba(24,24,24,.92);\n\n  color:#fff;\n\n  font-family:inherit;\n\n  font-size:23px;\n\n  line-height:1;\n\n  cursor:pointer;\n\n  transform:\n    translateY(-50%);\n\n  backdrop-filter:blur(7px);\n  -webkit-backdrop-filter:blur(7px);\n\n  transition:\n    background .2s ease,\n    border-color .2s ease,\n    transform .2s ease;\n}\n\n\n.mgas-prev{\n  left:\n    calc(-1 * var(--mgas-gutter));\n}\n\n\n.mgas-next{\n  right:\n    calc(-1 * var(--mgas-gutter));\n}\n\n\n@media (hover:hover) and (pointer:fine){\n\n  .mgas-arrow:hover{\n\n    background:var(--mgas-accent);\n\n    border-color:var(--mgas-accent);\n\n    transform:\n      translateY(-50%)\n      scale(1.05);\n  }\n\n}\n\n\n\/* =========================================================\n   DOT NAVIGATION\n========================================================= *\/\n\n.mgas-bottom-nav{\n\n  display:flex;\n\n  align-items:center;\n  justify-content:center;\n\n  margin-top:\n    clamp(5px,1vw,10px);\n}\n\n\n.mgas-dots{\n\n  display:flex;\n\n  align-items:center;\n  justify-content:center;\n\n  gap:8px;\n}\n\n\n.mgas-dot{\n\n  width:9px;\n  height:9px;\n\n  padding:0;\n\n  border:0;\n\n  border-radius:50%;\n\n  background:#555;\n\n  cursor:pointer;\n\n  transition:\n    width .2s ease,\n    border-radius .2s ease,\n    background .2s ease;\n}\n\n\n.mgas-dot.is-active{\n\n  width:28px;\n\n  border-radius:999px;\n\n  background:var(--mgas-accent);\n}\n\n\n\/* =========================================================\n   MOBILE HINT\n========================================================= *\/\n\n.mgas-hint{\n\n  display:none;\n\n  margin:\n    10px\n    0\n    0;\n\n  color:#888;\n\n  font-size:12px;\n\n  line-height:1.4;\n\n  text-align:center;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width:960px){\n\n  .mgas-wrap{\n    --mgas-gutter:16px;\n  }\n\n\n  .mgas-title{\n\n    max-width:800px;\n\n    font-size:\n      clamp(1.65rem,4.5vw,2.35rem);\n  }\n\n\n  .mgas-lead{\n\n    max-width:780px;\n\n    font-size:\n      clamp(1.1rem,2.8vw,1.4rem);\n  }\n\n\n  .mgas-image-frame{\n\n    max-width:100%;\n\n    aspect-ratio:16 \/ 8;\n  }\n\n\n  .mgas-arrow{\n\n    width:42px;\n    height:42px;\n\n    font-size:21px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width:600px){\n\n  .mgas-wrap{\n\n    --mgas-gutter:10px;\n\n    margin-top:22px;\n    margin-bottom:22px;\n  }\n\n\n  .mgas-slide{\n\n    padding:\n      16px\n      0\n      22px;\n  }\n\n\n  .mgas-badge{\n\n    min-height:34px;\n\n    margin-bottom:17px;\n\n    padding:\n      8px\n      17px;\n\n    font-size:10px;\n\n    letter-spacing:.55px;\n  }\n\n\n  .mgas-title{\n\n    margin-bottom:15px;\n\n    padding:\n      0\n      8px;\n\n    font-size:\n      clamp(1.55rem,6.8vw,2rem);\n\n    line-height:1.14;\n\n    letter-spacing:-.02em;\n  }\n\n\n  .mgas-title br{\n    display:none;\n  }\n\n\n  .mgas-lead{\n\n    max-width:100%;\n\n    margin-bottom:22px;\n\n    padding:\n      0\n      12px;\n\n    font-size:\n      clamp(1.05rem,4.6vw,1.28rem);\n\n    line-height:1.45;\n  }\n\n\n  .mgas-image-frame{\n\n    width:100%;\n\n    max-width:100%;\n\n    aspect-ratio:4 \/ 3;\n\n    border-radius:14px;\n  }\n\n\n  .mgas-visual{\n\n    margin-bottom:24px;\n  }\n\n\n  .mgas-button{\n\n    width:100%;\n\n    max-width:360px;\n\n    padding:\n      14px\n      22px;\n\n    white-space:normal;\n  }\n\n\n  .mgas-arrow{\n\n    width:36px;\n    height:36px;\n\n    font-size:18px;\n\n    background:\n      rgba(24,24,24,.86);\n  }\n\n\n  .mgas-prev{\n    left:-3px;\n  }\n\n\n  .mgas-next{\n    right:-3px;\n  }\n\n\n  .mgas-hint{\n    display:block;\n  }\n\n}\n\n\n\/* =========================================================\n   VERY SMALL MOBILE\n========================================================= *\/\n\n@media (max-width:380px){\n\n  .mgas-wrap{\n    --mgas-gutter:7px;\n  }\n\n\n  .mgas-title{\n\n    font-size:\n      clamp(1.45rem,7vw,1.8rem);\n  }\n\n\n  .mgas-lead{\n\n    font-size:\n      clamp(1rem,4.8vw,1.18rem);\n  }\n\n\n  .mgas-arrow{\n\n    width:34px;\n    height:34px;\n\n    font-size:17px;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion:reduce){\n\n  .mgas-track{\n    scroll-behavior:auto;\n  }\n\n\n  .mgas-button,\n  .mgas-arrow,\n  .mgas-dot{\n    transition:none !important;\n  }\n\n}\n\n<\/style>\n\n\n<div class=\"mgas-shell\">\n\n\n  <div\n    class=\"mgas-track\"\n    aria-label=\"\u041d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\"\n  >\n\n\n    <!-- ==================================================\n         BUSINESS AUTOMATION\n    =================================================== -->\n\n    <section\n      class=\"mgas-slide mgas-slide--business\"\n      data-mgas-slide\n      aria-labelledby=\"mgas-business-title\"\n    >\n\n\n      <div class=\"mgas-badge\">\n        \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432\n      <\/div>\n\n\n      <h2\n        class=\"mgas-title\"\n        id=\"mgas-business-title\"\n      >\n        \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0440\u0443\u0442\u0438\u043d\u0443.<br>\n        \u0423\u0441\u043a\u043e\u0440\u044c\u0442\u0435 \u0440\u0430\u0431\u043e\u0442\u0443 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438.\n      <\/h2>\n\n\n      <p class=\"mgas-lead\">\n\n        <strong>\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441<\/strong> \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 CRM,\n        Helpdesk, \u0444\u0430\u0439\u043b\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0440\u0430\u0431\u043e\u0447\u0438\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0442\u0430\u043a,\n        \u0447\u0442\u043e\u0431\u044b \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b\u0430\u0441\u044c \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438.\n\n      <\/p>\n\n\n      <div class=\"mgas-visual\">\n\n        <div class=\"mgas-image-frame\">\n\n          <img\n            class=\"mgas-image\"\n            src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/08\/BussinessAutomationTeaser.png\"\n            alt=\"\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\"\n            loading=\"lazy\"\n            decoding=\"async\"\n          >\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"mgas-button-container\">\n\n        <a\n          class=\"mgas-button\"\n          href=\"https:\/\/mechanogurus.ru\/?page_id=392\"\n        >\n          \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u2192\n        <\/a>\n\n      <\/div>\n\n\n    <\/section>\n\n\n\n    <!-- ==================================================\n         CAD \/ PDM \/ PLM AUTOMATION\n    =================================================== -->\n\n    <section\n      class=\"mgas-slide mgas-slide--cad\"\n      data-mgas-slide\n      aria-labelledby=\"mgas-cad-title\"\n    >\n\n\n      <div class=\"mgas-badge\">\n        \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f CAD, PDM, PLM\n      <\/div>\n\n\n      <h2\n        class=\"mgas-title\"\n        id=\"mgas-cad-title\"\n      >\n        \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043e\u0440\u043e\u0433\u043e.<br>\n        \u041d\u0435 \u0442\u0440\u0430\u0442\u044c\u0442\u0435 \u0435\u0433\u043e \u043d\u0430 \u0440\u0443\u0442\u0438\u043d\u0443.\n      <\/h2>\n\n\n      <p class=\"mgas-lead\">\n\n        <strong>\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441<\/strong> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u0442\n        \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 CAD \u0438 PDM,\n        \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u0442 \u0435\u0434\u0438\u043d\u044b\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438\n        \u0438 \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0443\u0447\u043d\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.\n\n      <\/p>\n\n\n      <div class=\"mgas-visual\">\n\n        <div class=\"mgas-image-frame\">\n\n          <img\n            class=\"mgas-image\"\n            src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/08\/Automation_CAD_PDM_02.png\"\n            alt=\"\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f CAD, PDM \u0438 PLM \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\"\n            loading=\"lazy\"\n            decoding=\"async\"\n          >\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"mgas-button-container\">\n\n        <a\n          class=\"mgas-button\"\n          href=\"https:\/\/mechanogurus.ru\/?page_id=4606\"\n        >\n          \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u2192\n        <\/a>\n\n      <\/div>\n\n\n    <\/section>\n\n\n  <\/div>\n\n\n\n  <!-- ARROWS -->\n\n  <button\n    class=\"mgas-arrow mgas-prev\"\n    type=\"button\"\n    aria-label=\"\u041f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u0431\u043b\u043e\u043a\"\n  >\n    \u2039\n  <\/button>\n\n\n  <button\n    class=\"mgas-arrow mgas-next\"\n    type=\"button\"\n    aria-label=\"\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0431\u043b\u043e\u043a\"\n  >\n    \u203a\n  <\/button>\n\n\n\n  <!-- DOTS -->\n\n  <div\n    class=\"mgas-bottom-nav\"\n    aria-label=\"\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438\"\n  >\n\n    <div class=\"mgas-dots\">\n\n\n      <button\n        class=\"mgas-dot is-active\"\n        type=\"button\"\n        aria-label=\"\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432\"\n        data-mgas-index=\"0\"\n      ><\/button>\n\n\n      <button\n        class=\"mgas-dot\"\n        type=\"button\"\n        aria-label=\"\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f CAD, PDM, PLM\"\n        data-mgas-index=\"1\"\n      ><\/button>\n\n\n    <\/div>\n\n  <\/div>\n\n\n  <p class=\"mgas-hint\">\n    \u041f\u0440\u043e\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u0430\u043b\u044c\u0446\u0435\u043c \u0432\u043b\u0435\u0432\u043e \u0438\u043b\u0438 \u0432\u043f\u0440\u0430\u0432\u043e\n  <\/p>\n\n\n<\/div>\n\n\n\n<script>\n\n(function(){\n\n  var root =\n    document.querySelector('[data-mgas]');\n\n  if(!root) return;\n\n\n  var track =\n    root.querySelector('.mgas-track');\n\n\n  var slides =\n    Array.prototype.slice.call(\n      root.querySelectorAll('[data-mgas-slide]')\n    );\n\n\n  var dots =\n    Array.prototype.slice.call(\n      root.querySelectorAll('.mgas-dot')\n    );\n\n\n  var prev =\n    root.querySelector('.mgas-prev');\n\n\n  var next =\n    root.querySelector('.mgas-next');\n\n\n  if(!track || slides.length < 2) return;\n\n\n  var activeIndex = 0;\n\n  var scrollTimer = null;\n\n  var autoplayTimer = null;\n\n  var autoplayDelay = 6000;\n\n\n  var reducedMotion =\n    window.matchMedia(\n      '(prefers-reduced-motion: reduce)'\n    ).matches;\n\n\n\n  function nearestIndex(){\n\n    var left =\n      track.scrollLeft;\n\n    var best = 0;\n\n    var distance =\n      Infinity;\n\n\n    slides.forEach(\n      function(slide,index){\n\n        var d =\n          Math.abs(\n            slide.offsetLeft -\n            left\n          );\n\n\n        if(d < distance){\n\n          distance = d;\n\n          best = index;\n\n        }\n\n      }\n    );\n\n\n    return best;\n\n  }\n\n\n\n  function update(index){\n\n    activeIndex =\n      Math.max(\n        0,\n        Math.min(\n          slides.length - 1,\n          index\n        )\n      );\n\n\n    dots.forEach(\n      function(dot,i){\n\n        dot.classList.toggle(\n          'is-active',\n          i === activeIndex\n        );\n\n\n        dot.setAttribute(\n          'aria-current',\n          i === activeIndex\n            ? 'true'\n            : 'false'\n        );\n\n      }\n    );\n\n  }\n\n\n\n  function goTo(index,manual){\n\n    var total =\n      slides.length;\n\n\n    var target =\n      ((index % total) + total)\n      % total;\n\n\n    track.scrollTo({\n\n      left:\n        slides[target].offsetLeft,\n\n      behavior:\n        reducedMotion\n          ? 'auto'\n          : 'smooth'\n\n    });\n\n\n    update(target);\n\n\n    if(manual){\n      restartAutoplay();\n    }\n\n  }\n\n\n\n  function startAutoplay(){\n\n    if(reducedMotion)\n      return;\n\n\n    stopAutoplay();\n\n\n    autoplayTimer =\n      window.setInterval(\n        function(){\n\n          goTo(\n            activeIndex + 1,\n            false\n          );\n\n        },\n        autoplayDelay\n      );\n\n  }\n\n\n\n  function stopAutoplay(){\n\n    if(autoplayTimer){\n\n      window.clearInterval(\n        autoplayTimer\n      );\n\n      autoplayTimer = null;\n\n    }\n\n  }\n\n\n\n  function restartAutoplay(){\n\n    stopAutoplay();\n    startAutoplay();\n\n  }\n\n\n\n  if(prev){\n\n    prev.addEventListener(\n      'click',\n      function(){\n\n        goTo(\n          activeIndex - 1,\n          true\n        );\n\n      }\n    );\n\n  }\n\n\n\n  if(next){\n\n    next.addEventListener(\n      'click',\n      function(){\n\n        goTo(\n          activeIndex + 1,\n          true\n        );\n\n      }\n    );\n\n  }\n\n\n\n  dots.forEach(\n    function(dot){\n\n      dot.addEventListener(\n        'click',\n        function(){\n\n          goTo(\n            Number(\n              dot.getAttribute(\n                'data-mgas-index'\n              )\n            ),\n            true\n          );\n\n        }\n      );\n\n    }\n  );\n\n\n\n  track.addEventListener(\n    'scroll',\n    function(){\n\n      window.clearTimeout(\n        scrollTimer\n      );\n\n\n      scrollTimer =\n        window.setTimeout(\n          function(){\n\n            update(\n              nearestIndex()\n            );\n\n          },\n          100\n        );\n\n    },\n    {\n      passive:true\n    }\n  );\n\n\n\n  root.addEventListener(\n    'mouseenter',\n    stopAutoplay\n  );\n\n\n  root.addEventListener(\n    'mouseleave',\n    startAutoplay\n  );\n\n\n  root.addEventListener(\n    'focusin',\n    stopAutoplay\n  );\n\n\n  root.addEventListener(\n    'focusout',\n    function(){\n\n      window.setTimeout(\n        function(){\n\n          if(\n            !root.contains(\n              document.activeElement\n            )\n          ){\n\n            startAutoplay();\n\n          }\n\n        },\n        0\n      );\n\n    }\n  );\n\n\n\n  track.addEventListener(\n    'touchstart',\n    stopAutoplay,\n    {\n      passive:true\n    }\n  );\n\n\n  track.addEventListener(\n    'touchend',\n    function(){\n\n      window.setTimeout(\n        startAutoplay,\n        2500\n      );\n\n    },\n    {\n      passive:true\n    }\n  );\n\n\n\n  document.addEventListener(\n    'visibilitychange',\n    function(){\n\n      if(document.hidden){\n\n        stopAutoplay();\n\n      }\n      else{\n\n        startAutoplay();\n\n      }\n\n    }\n  );\n\n\n\n  var resizeTimer = null;\n\n\n  window.addEventListener(\n    'resize',\n    function(){\n\n      window.clearTimeout(\n        resizeTimer\n      );\n\n\n      resizeTimer =\n        window.setTimeout(\n          function(){\n\n            track.scrollTo({\n\n              left:\n                slides[activeIndex].offsetLeft,\n\n              behavior:'auto'\n\n            });\n\n          },\n          120\n        );\n\n    }\n  );\n\n\n\n  update(0);\n  startAutoplay();\n\n})();\n\n<\/script>\n\n\n<\/div>\n<!-- \/MECHANOGURUS AUTOMATION TEASERS -->\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<!--\n  MG: \u0410\u043d\u0430\u043b\u0438\u0437 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u2014 Homepage Teaser Block v6\n  WordPress Custom HTML block \u2014 self-contained\n\n  How to use:\n  1. Editor \u2192 \"+\" \u2192 Custom HTML\n  2. Paste this entire file\n  3. Place at the same level as other homepage blocks (not inside a padded Group)\n  4. Width matches site header (.header): max-width 1400px, centered\n\n  CTA \"\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u0443\u0441\u043b\u0443\u0433\u0430\u0445\" \u2192 https:\/\/mechanogurus.ru\/?page_id=1147\n-->\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700;800&amp;family=DM+Sans:wght@400;500;600&amp;display=swap\" rel=\"stylesheet\">\n\n<div class=\"mga-root\" data-mga=\"\">\n<style>\n\/* \u2500\u2500 WordPress wrapper resets \u2500\u2500 *\/\n.wp-block-html:has(.mga-root),\n.entry-content > .wp-block-html:has(.mga-root) {\n  display: block !important;\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n  padding: 0 !important;\n  float: none !important;\n}\n\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\n  \/* Match site header (.header): max-width 1400px, centered *\/\n  --mga-max: 1400px;\n  --mga-gutter: 20px;\n\n  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\n  color: var(--text);\n  background: none !important;\n  line-height: 1.6;\n  box-sizing: border-box;\n  overflow-x: clip;\n\n  width: 100% !important;\n  max-width: var(--mga-max) !important;\n  margin-left: auto !important;\n  margin-right: auto !important;\n  margin-top: clamp(40px, 4vw, 80px);\n  margin-bottom: clamp(40px, 4vw, 80px);\n  padding-left: var(--mga-gutter);\n  padding-right: var(--mga-gutter);\n}\n\n.mga-root *,\n.mga-root *::before,\n.mga-root *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n\/* Neutralise theme heading bleed *\/\n.mga-root h3,\n.mga-root p {\n  font-family: inherit;\n  text-transform: none;\n  border: none;\n  background: none;\n}\n.mga-root h3::before,\n.mga-root p::before {\n  content: none;\n  display: none;\n}\n\n\/* \u2500\u2500 CARD \u2500\u2500 *\/\n.mga-card {\n  position: relative;\n  width: 100%;\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  min-width: 0;\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\n@media (max-width: 1100px) {\n  .mga-card { padding: 34px 32px 30px; }\n}\n\n@media (max-width: 900px) {\n  .mga-root { --mga-gutter: 16px; }\n  .mga-card { padding: 30px 24px 28px; border-radius: 18px; }\n  .mga-metrics { flex-wrap: wrap; }\n  .mga-metric {\n    flex: 1 1 50%;\n    border-bottom: 1px solid var(--border);\n  }\n  .mga-metric:nth-child(2n) { border-right: none; }\n  .mga-metric:nth-child(n+3) { border-bottom: none; }\n}\n\n@media (max-width: 700px) {\n  .mga-root { --mga-gutter: 12px; }\n  .mga-card { padding: 28px 20px 24px; border-radius: 16px; }\n  .mga-metric { flex: 1 1 50%; padding: 12px 14px; }\n  .mga-actions { gap: 12px; }\n}\n\n@media (max-width: 560px) {\n  .mga-root { --mga-gutter: 12px; }\n  .mga-card { padding: 24px 16px 22px; }\n  .mga-metrics { border-radius: 10px; }\n  .mga-metric { flex: 1 1 50%; }\n  .mga-actions {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .mga-cta {\n    justify-content: center;\n    width: 100%;\n  }\n  .mga-link {\n    justify-content: center;\n    width: 100%;\n    padding: 8px 0;\n  }\n  .mga-pills { gap: 5px; }\n  .mga-pill {\n    font-size: 10px;\n    padding: 4px 9px;\n    white-space: normal;\n  }\n  .mga-hook { font-size: 14px; padding-left: 12px; }\n  .mga-solution { padding: 14px 15px; }\n}\n\n@media (max-width: 360px) {\n  .mga-root { --mga-gutter: 10px; }\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\n@media (hover: none) and (pointer: coarse) {\n  .mga-card {\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mga-roi-dot { animation: none; }\n  .mga-cta,\n  .mga-cta::before,\n  .mga-cta__text,\n  .mga-cta__arrow,\n  .mga-cta__arrow svg { transition: none; }\n}\n<\/style>\n\n  <div class=\"mga-card\">\n\n    <div class=\"mga-roi\">\n      <span class=\"mga-roi-dot\" aria-hidden=\"true\"><\/span>\n      \u0410\u0443\u0434\u0438\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432\n    <\/div>\n\n    <p class=\"mga-hook\">\n      \u041e\u0442\u0434\u0435\u043b \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d \u043d\u0430 100%, \u0430 \u0422\u041a\u041f \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0443\u0445\u043e\u0434\u044f\u0442 \u0441 \u043e\u043f\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u2014 \u0437\u043d\u0430\u043a\u043e\u043c\u043e?\n    <\/p>\n\n    <h3>\n      \u041d\u0430\u0439\u0434\u0451\u043c, \u0433\u0434\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e<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    <div class=\"mga-solution\">\n      <div class=\"mga-solution-label\">\u0427\u0442\u043e \u0434\u0430\u0451\u0442 \u0430\u0443\u0434\u0438\u0442 \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441<\/div>\n      <ul class=\"mga-solution-list\">\n        <li>\u0412\u044b\u044f\u0432\u0438\u043c \u0443\u0437\u043a\u0438\u0435 \u043c\u0435\u0441\u0442\u0430: \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u041a\u0414, \u0440\u0443\u0447\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u0441\u0431\u043e\u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u00ab\u043d\u0435\u0437\u0430\u043c\u0435\u043d\u0438\u043c\u044b\u0445\u00bb \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u043e\u0432<\/li>\n        <li>\u0421\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0440\u0435\u0435\u0441\u0442\u0440 \u043f\u043e\u0442\u0435\u0440\u044c \u0432 \u0447\u0430\u0441\u0430\u0445 \u2014 \u0438\u0437\u043c\u0435\u0440\u0438\u043c\u044b\u0435 \u0446\u0438\u0444\u0440\u044b \u0434\u043b\u044f \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430, \u043d\u0435 \u043e\u0431\u0449\u0438\u0435 \u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u043a\u0438<\/li>\n        <li>\u041f\u0440\u0438\u043e\u0440\u0438\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0434\u043e\u0440\u043e\u0436\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0443: \u0447\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441\u043d\u0430\u0447\u0430\u043b\u0430, \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0422\u041a\u041f \u0443\u0436\u0435 \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u043c\u0435\u0441\u044f\u0446<\/li>\n        <li>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043f\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c\u0443 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0443 MG-S001D \u2014 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e, \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c\u043e, \u0431\u0435\u0437 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0445 \u0441\u043e\u0432\u0435\u0449\u0430\u043d\u0438\u0439<\/li>\n      <\/ul>\n    <\/div>\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    <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\">\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442 MG-S001D<\/span>\n      <span class=\"mga-pill\">\u0421\u0430\u043c\u043e\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0431\u043e\u043b\u0435\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430<\/span>\n    <\/div>\n\n    <div class=\"mga-actions\">\n      <a class=\"mga-cta\" href=\"https:\/\/n8n.mechanogurus.ru\/webhook\/2948d681-1b7a-4b6c-947e-783005ac2f47\/chat\" target=\"_blank\" rel=\"noopener\"><span class=\"mga-cta__text\">\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0437\u0430\u044f\u0432\u043a\u0443<\/span><span class=\"mga-cta__arrow\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"13 6 19 12 13 18\"><\/polyline><\/svg><\/span><\/a>\n      <a class=\"mga-link\" href=\"https:\/\/mechanogurus.ru\/?page_id=1147\" rel=\"noopener\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u0443\u0441\u043b\u0443\u0433\u0430\u0445 \u2192<\/a>\n    <\/div>\n\n  <\/div>\n<\/div>\n<!-- \/MG: Homepage Audit Teaser -->\n<\/div>\n\n\n\n<div class=\"wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<!--\n  MG: \u041a\u0430\u043a \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u2014 Homepage Simplified Workflow\n  WordPress Custom HTML block \u2014 self-contained\n\n  How to use:\n  1. Editor \u2192 \"+\" \u2192 Custom HTML\n  2. Paste this entire file\n  3. Place at the same level as other homepage blocks (not inside a padded Group)\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&amp;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 .intro {\n  max-width: 720px;\n  margin: 0 auto 2.5rem;\n  text-align: center;\n}\n\n.mg-workflow .intro-title {\n  font-size: clamp(1.5rem, 3vw, 2rem);\n  font-weight: 800;\n  color: #fff;\n  margin-bottom: 0.75rem;\n  letter-spacing: -0.02em;\n}\n\n.mg-workflow .intro-desc {\n  color: var(--muted);\n  font-size: 15px;\n  line-height: 1.6;\n}\n\n.mg-workflow .intro-desc strong {\n  color: rgba(255,255,255,0.85);\n  font-weight: 600;\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  .mg-workflow .intro { margin-bottom: 2rem; }\n  .mg-workflow .intro-desc { font-size: 14px; }\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=\"intro\">\n    <h2 class=\"intro-title\">\u041a\u0430\u043a \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c<\/h2>\n    <p class=\"intro-desc\">\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043e\u0442 \u0438\u0434\u0435\u0438 \u0434\u043e \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0417\u0430 \u043a\u0443\u043b\u0438\u0441\u0430\u043c\u0438 \u043d\u0430\u0448\u0430 <strong>\u0446\u0438\u0444\u0440\u043e\u0432\u0430\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0438 AI-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b<\/strong> \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u0435\u0435 \u2014 \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n  <\/div>\n\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\u0430\u0441\u0441\u043a\u0430\u0436\u0438\u0442\u0435 \u043e \u0437\u0430\u0434\u0430\u0447\u0435<\/div>\n          <p class=\"desc\">\u041e\u043f\u0438\u0448\u0438\u0442\u0435 \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u2014 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0438\u0442\u0435 \u043e \u0446\u0435\u043b\u044f\u0445, \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u0445 \u0438 \u0441\u0440\u043e\u043a\u0430\u0445. \u041c\u044b \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0441\u043b\u0443\u0448\u0430\u0435\u043c \u0438 \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433.<\/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\">\u041d\u0430\u0447\u0430\u0442\u044c<\/span>\n              <span class=\"card-btn__arrow\">\n                <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"13 6 19 12 13 18\"><\/polyline><\/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\">\u0421\u043e\u0433\u043b\u0430\u0441\u0443\u0435\u043c \u044d\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, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\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\">03<\/div>\n        <div>\n          <div class=\"title\">\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/div>\n          <p class=\"desc\">\u0413\u043e\u0442\u043e\u0432\u0438\u043c \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0439 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u2014 \u0431\u0435\u0437 \u0441\u043a\u0440\u044b\u0442\u044b\u0445 \u043f\u043b\u0430\u0442\u0435\u0436\u0435\u0439 \u0438 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043e\u043f\u043b\u0430\u0442.<\/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\">\u0417\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0434\u043e\u0433\u043e\u0432\u043e\u0440<\/div>\n          <p class=\"desc\">\u0415\u0441\u043b\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0432\u0430\u0441 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442, \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0435 \u0434\u0435\u0442\u0430\u043b\u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0432 \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0435 \u0438 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u043a \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e.<\/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\">\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/div>\n          <p class=\"desc\">\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u043f\u043e \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0451\u043d\u043d\u043e\u043c\u0443 \u043f\u043b\u0430\u043d\u0443. \u0412\u044b \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u043f\u043e\u0440\u0442\u0430\u043b\u0435 \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\">06<\/div>\n        <div>\n          <div class=\"title\">\u041f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/div>\n          <p class=\"desc\">\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0434\u0430\u0447\u0430 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \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 \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0430\u0446\u0438\u0438.<\/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><!-- \/.mg-workflow -->\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-2\" 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<!-- \u2550\u2550\u2550 OUR CLIENTS BLOCK \u2550\u2550\u2550 -->\n<section class=\"mg-clients\">\n  <div class=\"mg-clients-inner\">\n\n    <!-- Marquee -->\n    <div class=\"mg-marquee-wrap\">\n      <div class=\"mg-marquee-track\">\n        <!-- \u2500\u2500 Original set \u2500\u2500 -->\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        <!-- \u2500\u2500 Duplicate set (seamless loop) \u2500\u2500 -->\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>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0434\u043b\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f. \u041e\u0431\u0441\u0443\u0434\u0438\u043c? 3D-\u043c\u043e\u0434\u0435\u043b\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f\u2026 \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\u0439, \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 CAD, PDM \u0438 PLM, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0415\u0441\u0442\u044c \u0438\u0434\u0435\u044f, \u0437\u0430\u043a\u0430\u0437 \u0438\u043b\u0438 \u0442\u0435\u043d\u0434\u0435\u0440, \u043d\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? \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c. \u0413\u043e\u0442\u043e\u0432\u0430\u044f \u041a\u0414 \u0438 3D-\u043c\u043e\u0434\u0435\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u2014 [&hellip;]<\/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"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f: \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f &#8211; \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mechanogurus.ru\/\" \/>\n<meta property=\"og:locale\" content=\"ru_RU\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f: \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f &#8211; \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\" \/>\n<meta property=\"og:description\" content=\"\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0434\u043b\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f. \u041e\u0431\u0441\u0443\u0434\u0438\u043c? 3D-\u043c\u043e\u0434\u0435\u043b\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f\u2026 \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\u0439, \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 CAD, PDM \u0438 PLM, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0415\u0441\u0442\u044c \u0438\u0434\u0435\u044f, \u0437\u0430\u043a\u0430\u0437 \u0438\u043b\u0438 \u0442\u0435\u043d\u0434\u0435\u0440, \u043d\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? \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c. \u0413\u043e\u0442\u043e\u0432\u0430\u044f \u041a\u0414 \u0438 3D-\u043c\u043e\u0434\u0435\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u2014 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mechanogurus.ru\/\" \/>\n<meta property=\"og:site_name\" content=\"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-01T07:50:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/01\/IMG_0252.jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 \u043c\u0438\u043d\u0443\u0442\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/\",\"url\":\"https:\\\/\\\/mechanogurus.ru\\\/\",\"name\":\"\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f: \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f &#8211; \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/mechanogurus.ru\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/IMG_0252.jpeg\",\"datePublished\":\"2025-11-20T11:34:10+00:00\",\"dateModified\":\"2026-09-01T07:50:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#breadcrumb\"},\"inLanguage\":\"ru-RU\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/mechanogurus.ru\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ru-RU\",\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#primaryimage\",\"url\":\"https:\\\/\\\/mechanogurus.ru\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/IMG_0252.jpeg\",\"contentUrl\":\"https:\\\/\\\/mechanogurus.ru\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/IMG_0252.jpeg\",\"width\":760,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/mechanogurus.ru\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#website\",\"url\":\"https:\\\/\\\/mechanogurus.ru\\\/\",\"name\":\"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\",\"description\":\"\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432\",\"publisher\":{\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#organization\"},\"alternateName\":\"Mechanogurus\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/mechanogurus.ru\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ru-RU\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#organization\",\"name\":\"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\",\"alternateName\":\"Mechanogurus\",\"url\":\"https:\\\/\\\/mechanogurus.ru\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ru-RU\",\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/mechanogurus.ru\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/mg_enginalytics_side_rus-scaled.png\",\"contentUrl\":\"https:\\\/\\\/mechanogurus.ru\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/mg_enginalytics_side_rus-scaled.png\",\"width\":2560,\"height\":549,\"caption\":\"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\"},\"image\":{\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f: \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f &#8211; \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mechanogurus.ru\/","og_locale":"ru_RU","og_type":"article","og_title":"\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f: \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f &#8211; \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441","og_description":"\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0434\u043b\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f. \u041e\u0431\u0441\u0443\u0434\u0438\u043c? 3D-\u043c\u043e\u0434\u0435\u043b\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f\u2026 \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\u0439, \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 CAD, PDM \u0438 PLM, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0415\u0441\u0442\u044c \u0438\u0434\u0435\u044f, \u0437\u0430\u043a\u0430\u0437 \u0438\u043b\u0438 \u0442\u0435\u043d\u0434\u0435\u0440, \u043d\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? \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c. \u0413\u043e\u0442\u043e\u0432\u0430\u044f \u041a\u0414 \u0438 3D-\u043c\u043e\u0434\u0435\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u2014 [&hellip;]","og_url":"https:\/\/mechanogurus.ru\/","og_site_name":"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441","article_modified_time":"2026-09-01T07:50:46+00:00","og_image":[{"url":"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/01\/IMG_0252.jpeg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f":"11 \u043c\u0438\u043d\u0443\u0442"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mechanogurus.ru\/","url":"https:\/\/mechanogurus.ru\/","name":"\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0437\u0434\u0435\u043b\u0438\u044f: \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f &#8211; \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441","isPartOf":{"@id":"https:\/\/mechanogurus.ru\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mechanogurus.ru\/#primaryimage"},"image":{"@id":"https:\/\/mechanogurus.ru\/#primaryimage"},"thumbnailUrl":"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/01\/IMG_0252.jpeg","datePublished":"2025-11-20T11:34:10+00:00","dateModified":"2026-09-01T07:50:46+00:00","breadcrumb":{"@id":"https:\/\/mechanogurus.ru\/#breadcrumb"},"inLanguage":"ru-RU","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mechanogurus.ru\/"]}]},{"@type":"ImageObject","inLanguage":"ru-RU","@id":"https:\/\/mechanogurus.ru\/#primaryimage","url":"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/01\/IMG_0252.jpeg","contentUrl":"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/01\/IMG_0252.jpeg","width":760,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/mechanogurus.ru\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mechanogurus.ru\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/mechanogurus.ru\/#website","url":"https:\/\/mechanogurus.ru\/","name":"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441","description":"\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432","publisher":{"@id":"https:\/\/mechanogurus.ru\/#organization"},"alternateName":"Mechanogurus","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mechanogurus.ru\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ru-RU"},{"@type":"Organization","@id":"https:\/\/mechanogurus.ru\/#organization","name":"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441","alternateName":"Mechanogurus","url":"https:\/\/mechanogurus.ru\/","logo":{"@type":"ImageObject","inLanguage":"ru-RU","@id":"https:\/\/mechanogurus.ru\/#\/schema\/logo\/image\/","url":"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/mg_enginalytics_side_rus-scaled.png","contentUrl":"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/mg_enginalytics_side_rus-scaled.png","width":2560,"height":549,"caption":"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441"},"image":{"@id":"https:\/\/mechanogurus.ru\/#\/schema\/logo\/image\/"}}]}},"_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":587,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages\/2378\/revisions"}],"predecessor-version":[{"id":4836,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages\/2378\/revisions\/4836"}],"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}]}}