{"id":1431,"date":"2025-07-17T14:11:41","date_gmt":"2025-07-17T11:11:41","guid":{"rendered":"http:\/\/192.168.25.197\/?page_id=1431"},"modified":"2026-09-11T10:28:31","modified_gmt":"2026-09-11T07:28:31","slug":"%d0%bd%d0%b0%d1%88%d0%b8-%d0%bf%d1%80%d0%be%d0%b5%d0%ba%d1%82%d1%8b","status":"publish","type":"page","link":"https:\/\/mechanogurus.ru\/?page_id=1431","title":{"rendered":"\u0418\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u043e\u0432\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438"},"content":{"rendered":"\n<!-- ==========================================================\n     MECHANOGURUS | PRODUCT DEVELOPMENT HERO\n     Page: \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u044f | Russian site\n     WordPress Custom HTML block\n\n     Updates:\n     - Removed yellow eyebrow heading\n     - Responsive for desktop \/ laptop \/ tablet \/ mobile\n     - Slow vertical image pan on smaller touch screens\n     ========================================================== -->\n\n<section class=\"mg-product-hero\" aria-labelledby=\"mg-product-hero-title\">\n\n  <div class=\"mg-product-hero__inner\">\n\n    <!-- Background engineering visual -->\n    <div class=\"mg-product-hero__visual\" aria-hidden=\"true\">\n      <img\n        src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/09\/GasPlantLaylout_OilTank-scaled.jpeg\"\n        alt=\"\"\n        loading=\"eager\"\n        fetchpriority=\"high\"\n        decoding=\"async\"\n      >\n    <\/div>\n\n    <!-- Hero content -->\n    <div class=\"mg-product-hero__content\">\n\n      <h1 class=\"mg-product-hero__title\" id=\"mg-product-hero-title\">\n        <span>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439<\/span>\n        <span>\u0438 \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u044f<\/span>\n      <\/h1>\n\n      <p class=\"mg-product-hero__text\">\n        \u041e\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0434\u043e 3D-\u043c\u043e\u0434\u0435\u043b\u0438,\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 \u0438 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f.\n      <\/p>\n\n      <a\n        class=\"mg-product-hero__button\"\n        href=\"#mg-contact\"\n        aria-label=\"\u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u0441 Mechanogurus\"\n      >\n        \u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\n        <span class=\"mg-product-hero__button-arrow\" aria-hidden=\"true\">\u2192<\/span>\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* ==========================================================\n   WORDPRESS WIDTH RESET\n   ========================================================== *\/\n\n.wp-block-html:has(.mg-product-hero),\n.entry-content > .wp-block-html:has(.mg-product-hero),\n.wp-block-post-content > .wp-block-html:has(.mg-product-hero),\n.wp-block-group:has(.mg-product-hero),\n.wp-block-group:has(.mg-product-hero) > .wp-block-group__inner-container,\n.is-layout-constrained:has(.mg-product-hero),\n.entry-content:has(.mg-product-hero) > .wp-block-html {\n\n  display: block !important;\n\n  width: 100% !important;\n  max-width: none !important;\n\n  margin-left: auto !important;\n  margin-right: auto !important;\n\n  margin-top: 0 !important;\n  margin-bottom: 0 !important;\n\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n\n  float: none !important;\n}\n\n\n\/* ==========================================================\n   BASE\n   ========================================================== *\/\n\n.mg-product-hero,\n.mg-product-hero * {\n  box-sizing: border-box;\n}\n\n\n.mg-product-hero {\n\n  --mg-width: 1400px;\n\n  --mg-text: #fef4ee;\n  --mg-muted: #d7d8da;\n  --mg-accent: #f0b323;\n\n  position: relative;\n\n  width: 100% !important;\n  max-width: none !important;\n\n  margin: 0 auto !important;\n\n  overflow: hidden;\n\n  background: transparent;\n\n  color: var(--mg-text);\n\n  font-family:\n    \"DM Sans\",\n    \"Roboto\",\n    Arial,\n    sans-serif;\n}\n\n\n\/* ==========================================================\n   MAIN STAGE\n   ========================================================== *\/\n\n.mg-product-hero__inner {\n\n  position: relative;\n\n  isolation: isolate;\n\n  display: grid;\n\n  place-items: center;\n\n  width: calc(100% - 40px);\n\n  max-width: var(--mg-width);\n\n  min-height: clamp(520px, 43vw, 660px);\n\n  margin-inline: auto;\n\n  padding:\n    clamp(40px, 4vw, 64px)\n    clamp(24px, 4.5vw, 72px);\n\n  overflow: hidden;\n\n  background: #111417;\n}\n\n\n\/* ==========================================================\n   BACKGROUND IMAGE\n   ========================================================== *\/\n\n.mg-product-hero__visual {\n\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 0;\n\n  width: 100%;\n  height: 100%;\n\n  overflow: hidden;\n\n  pointer-events: none;\n\n  background: #111417;\n}\n\n\n.mg-product-hero__visual img {\n\n  display: block;\n\n  width: 100%;\n  height: 100%;\n\n  max-width: none;\n  max-height: none;\n\n  object-fit: cover;\n\n  object-position: 50% 52%;\n\n  transform: scale(1.06);\n\n  transform-origin: center center;\n}\n\n\n\/* ==========================================================\n   IMAGE DARKENING\n   ========================================================== *\/\n\n.mg-product-hero__inner::before {\n\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 1;\n\n  pointer-events: none;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(8, 11, 14, 0.54) 0%,\n      rgba(8, 11, 14, 0.25) 38%,\n      rgba(8, 11, 14, 0.22) 62%,\n      rgba(8, 11, 14, 0.50) 100%\n    );\n}\n\n\n.mg-product-hero__inner::after {\n\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 1;\n\n  pointer-events: none;\n\n  background:\n    radial-gradient(\n      ellipse at center,\n      rgba(8, 11, 14, 0.72) 0%,\n      rgba(8, 11, 14, 0.48) 30%,\n      rgba(8, 11, 14, 0.18) 58%,\n      rgba(8, 11, 14, 0) 78%\n    );\n}\n\n\n\/* ==========================================================\n   CONTENT\n   ========================================================== *\/\n\n.mg-product-hero__content {\n\n  position: relative;\n\n  z-index: 2;\n\n  width: min(100%, 1050px);\n\n  min-width: 0;\n\n  margin-inline: auto;\n\n  display: flex;\n\n  flex-direction: column;\n\n  align-items: center;\n\n  justify-content: center;\n\n  text-align: center;\n}\n\n\n\/* ==========================================================\n   TITLE\n   ========================================================== *\/\n\n.mg-product-hero__title {\n\n  margin: 0;\n\n  max-width: 1000px;\n\n  color: var(--mg-text);\n\n  font-size:\n    clamp(\n      42px,\n      4vw,\n      72px\n    );\n\n  font-weight: 700;\n\n  line-height: 0.99;\n\n  letter-spacing: -0.045em;\n\n  text-align: center;\n\n  text-wrap: balance;\n\n  overflow-wrap: normal;\n\n  text-shadow:\n    0 3px 20px rgba(0, 0, 0, 0.82);\n}\n\n\n.mg-product-hero__title span {\n  display: block;\n}\n\n\n.mg-product-hero__title span + span {\n  margin-top: 0.13em;\n}\n\n\n\/* ==========================================================\n   DESCRIPTION\n   ========================================================== *\/\n\n.mg-product-hero__text {\n\n  width: min(100%, 780px);\n\n  margin:\n    clamp(26px, 2.7vw, 40px)\n    auto\n    0;\n\n  color: var(--mg-muted);\n\n  font-size:\n    clamp(\n      17px,\n      1.35vw,\n      21px\n    );\n\n  font-weight: 400;\n\n  line-height: 1.55;\n\n  text-align: center;\n\n  text-wrap: balance;\n\n  text-shadow:\n    0 2px 14px rgba(0, 0, 0, 0.92);\n}\n\n\n\/* ==========================================================\n   BUTTON\n   ========================================================== *\/\n\n.mg-product-hero__button {\n\n  min-height: 54px;\n\n  margin-top:\n    clamp(\n      30px,\n      3.2vw,\n      46px\n    );\n\n  padding:\n    15px\n    22px\n    15px\n    25px;\n\n  display: inline-flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  gap: 16px;\n\n  border:\n    1px solid\n    var(--mg-accent);\n\n  border-radius: 999px;\n\n  background: var(--mg-accent);\n\n  color: #16191d;\n\n  font-size: 16px;\n\n  font-weight: 700;\n\n  line-height: 1;\n\n  text-decoration: none;\n\n  box-shadow:\n    0 8px 24px rgba(0, 0, 0, 0.32);\n\n  transition:\n    transform 180ms ease,\n    background-color 180ms ease,\n    color 180ms ease,\n    border-color 180ms ease;\n}\n\n\n.mg-product-hero__button:hover,\n.mg-product-hero__button:focus-visible {\n\n  background:\n    rgba(18, 21, 24, 0.90);\n\n  color:\n    var(--mg-text);\n\n  transform:\n    translateY(-2px);\n}\n\n\n.mg-product-hero__button:focus-visible {\n\n  outline:\n    3px solid\n    rgba(240, 179, 35, 0.35);\n\n  outline-offset: 4px;\n}\n\n\n.mg-product-hero__button-arrow {\n\n  font-size: 22px;\n\n  line-height: 0;\n}\n\n\n\/* ==========================================================\n   LARGE SCREENS\n   ========================================================== *\/\n\n@media (min-width: 1500px) {\n\n  .mg-product-hero__inner {\n\n    min-height: 660px;\n  }\n\n}\n\n\n\/* ==========================================================\n   LAPTOP\n   ========================================================== *\/\n\n@media (max-width: 1180px) {\n\n  .mg-product-hero__inner {\n\n    width: calc(100% - 36px);\n\n    min-height:\n      clamp(\n        510px,\n        50vw,\n        620px\n      );\n  }\n\n\n  .mg-product-hero__title {\n\n    font-size:\n      clamp(\n        40px,\n        4.8vw,\n        60px\n      );\n  }\n\n\n  .mg-product-hero__visual img {\n\n    transform:\n      scale(1.08);\n  }\n\n}\n\n\n\/* ==========================================================\n   TABLET LANDSCAPE \/ SMALL LAPTOP\n   ========================================================== *\/\n\n@media (max-width: 1024px) {\n\n  .mg-product-hero__inner {\n\n    width: calc(100% - 32px);\n\n    min-height:\n      clamp(\n        500px,\n        61vw,\n        610px\n      );\n\n    padding:\n      42px\n      clamp(\n        24px,\n        5vw,\n        48px\n      );\n  }\n\n\n  .mg-product-hero__title {\n\n    max-width: 820px;\n\n    font-size:\n      clamp(\n        40px,\n        6vw,\n        58px\n      );\n  }\n\n\n  .mg-product-hero__text {\n\n    width: min(100%, 690px);\n\n    font-size:\n      clamp(\n        17px,\n        2vw,\n        20px\n      );\n  }\n\n\n  .mg-product-hero__visual img {\n\n    object-position:\n      50% 52%;\n\n    transform:\n      scale(1.12);\n  }\n\n}\n\n\n\/* ==========================================================\n   TABLET PORTRAIT\n   ========================================================== *\/\n\n@media (max-width: 768px) {\n\n  .mg-product-hero__inner {\n\n    width: calc(100% - 28px);\n\n    min-height:\n      clamp(\n        540px,\n        82vw,\n        650px\n      );\n\n    padding:\n      40px\n      clamp(\n        20px,\n        5vw,\n        38px\n      );\n  }\n\n\n  .mg-product-hero__title {\n\n    max-width: 680px;\n\n    font-size:\n      clamp(\n        38px,\n        8vw,\n        56px\n      );\n\n    line-height: 1;\n  }\n\n\n  .mg-product-hero__text {\n\n    width: min(100%, 610px);\n\n    margin-top: 26px;\n\n    font-size: 17px;\n\n    line-height: 1.52;\n  }\n\n\n  .mg-product-hero__button {\n\n    margin-top: 32px;\n  }\n\n\n  .mg-product-hero__visual img {\n\n    \/*\n       Extra zoom is intentional.\n       It provides enough image outside the viewport\n       for the vertical movement.\n    *\/\n\n    width: 100%;\n\n    height: 118%;\n\n    top: -9%;\n\n    position: relative;\n\n    object-fit: cover;\n\n    object-position: 50% 50%;\n\n    transform: scale(1.10);\n  }\n\n\n  .mg-product-hero__inner::before {\n\n    background:\n      rgba(8, 11, 14, 0.34);\n  }\n\n\n  .mg-product-hero__inner::after {\n\n    background:\n      radial-gradient(\n        ellipse at center,\n        rgba(7, 10, 13, 0.78) 0%,\n        rgba(7, 10, 13, 0.53) 35%,\n        rgba(7, 10, 13, 0.16) 68%,\n        rgba(7, 10, 13, 0) 92%\n      );\n  }\n\n}\n\n\n\/* ==========================================================\n   MOBILE\n   ========================================================== *\/\n\n@media (max-width: 480px) {\n\n  .mg-product-hero__inner {\n\n    width: calc(100% - 24px);\n\n    min-height: 560px;\n\n    padding:\n      34px\n      17px;\n  }\n\n\n  .mg-product-hero__content {\n\n    width: 100%;\n  }\n\n\n  .mg-product-hero__title {\n\n    width: 100%;\n\n    max-width: 460px;\n\n    font-size:\n      clamp(\n        34px,\n        10.5vw,\n        47px\n      );\n\n    line-height: 1.02;\n\n    letter-spacing: -0.04em;\n  }\n\n\n  .mg-product-hero__title span + span {\n\n    margin-top: 0.16em;\n  }\n\n\n  .mg-product-hero__text {\n\n    width: min(100%, 430px);\n\n    margin-top: 24px;\n\n    font-size: 16px;\n\n    line-height: 1.5;\n  }\n\n\n  .mg-product-hero__button {\n\n    width: min(100%, 310px);\n\n    min-height: 54px;\n\n    margin-top: 29px;\n\n    padding-left: 21px;\n    padding-right: 20px;\n  }\n\n\n  .mg-product-hero__visual img {\n\n    height: 124%;\n\n    top: -12%;\n\n    transform:\n      scale(1.08);\n  }\n\n}\n\n\n\/* ==========================================================\n   VERY SMALL MOBILE\n   ========================================================== *\/\n\n@media (max-width: 380px) {\n\n  .mg-product-hero__inner {\n\n    width: calc(100% - 20px);\n\n    min-height: 540px;\n\n    padding:\n      30px\n      14px;\n  }\n\n\n  .mg-product-hero__title {\n\n    font-size:\n      clamp(\n        31px,\n        10.5vw,\n        40px\n      );\n  }\n\n\n  .mg-product-hero__text {\n\n    font-size: 15.5px;\n  }\n\n\n  .mg-product-hero__button {\n\n    width: 100%;\n\n    max-width: 290px;\n\n    font-size: 15px;\n  }\n\n}\n\n\n\/* ==========================================================\n   VERTICAL IMAGE MOVEMENT\n   Smaller touch screens only\n\n   Moves the enlarged image gently:\n   UP -> CENTER -> DOWN -> CENTER\n\n   The hero itself remains stationary.\n   ========================================================== *\/\n\n@keyframes mg-product-vertical-pan {\n\n  0%,\n  8% {\n\n    transform:\n      translateY(-3.5%)\n      scale(1.10);\n  }\n\n\n  46% {\n\n    transform:\n      translateY(2.5%)\n      scale(1.10);\n  }\n\n\n  54% {\n\n    transform:\n      translateY(2.5%)\n      scale(1.10);\n  }\n\n\n  92%,\n  100% {\n\n    transform:\n      translateY(-3.5%)\n      scale(1.10);\n  }\n\n}\n\n\n\/* Tablet + mobile touch devices *\/\n\n@media\n(max-width: 767px)\nand (hover: none)\nand (pointer: coarse) {\n\n  .mg-product-hero__visual img {\n\n    animation:\n      mg-product-vertical-pan\n      18s\n      ease-in-out\n      infinite;\n\n    will-change: transform;\n  }\n\n}\n\n\n\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .mg-product-hero__button {\n\n    transition: none;\n  }\n\n\n  .mg-product-hero__visual img {\n\n    animation: none !important;\n\n    transform:\n      scale(1.10);\n  }\n\n}\n\n<\/style>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<style>\n\/* \u2705 Scoped reset \u2014 does NOT leak into WordPress *\/\n.mg-panels,\n.mg-panels *,\n.mg-panels *::before,\n.mg-panels *::after {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n.mg-panels {\n  display: block;\n  width: 100%;\n  max-width: 1400px;\n  margin: 0 auto;\n  padding: clamp(20px, 3vw, 40px) 25px;\n  background: transparent;\n  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.mg-panels .panels-container {\n  display: flex;\n  width: 100%;\n  height: clamp(450px, 70vh, 750px);\n  gap: clamp(4px, 1vw, 8px);\n}\n\n\/* \u2500\u2500 Panel \u2500\u2500 *\/\n.mg-panels .panel {\n  position: relative;\n  flex: 1; \/* all equal when none active *\/\n  min-width: clamp(50px, 8vw, 80px);\n  background-size: cover;\n  background-position: center;\n  border-radius: clamp(4px, 1vw, 8px);\n  cursor: pointer;\n  transition: flex 0.6s cubic-bezier(0.4,0,0.2,1);\n  overflow: hidden;\n}\n\n.mg-panels .panel::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);\n  transition: background 0.4s ease;\n  z-index: 1;\n}\n\n.mg-panels .panel.active { flex: 3; }\n\n.mg-panels .panel.active::before {\n  background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.25) 100%);\n}\n\n\/* \u2500\u2500 Panel content: flex column, top-aligned when expanded \u2500\u2500 *\/\n.mg-panels .panel-content {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  z-index: 2;\n  padding: clamp(10px, 2vw, 20px);\n  overflow: hidden;\n}\n\n.mg-panels .panel.active .panel-content {\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding: clamp(20px, 4vh, 40px) clamp(25px, 4vw, 50px);\n}\n\n\/* \u2500\u2500 Title vertical (collapsed) \u2500\u2500 *\/\n.mg-panels .panel-title {\n  writing-mode: vertical-rl;\n  text-orientation: mixed;\n  font-weight: 800;\n  color: white;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  text-shadow: 2px 2px 10px rgba(0,0,0,0.8);\n  transition: all 0.6s cubic-bezier(0.4,0,0.2,1);\n  transform: rotate(180deg);\n  white-space: nowrap;\n  font-size: clamp(12px, min(2.5vw, 2.5vh), 20px);\n  line-height: 1.1;\n  flex-shrink: 0;\n}\n\n\/* \u2500\u2500 Title horizontal (expanded) \u2500\u2500 *\/\n.mg-panels .panel.active .panel-title {\n  writing-mode: horizontal-tb;\n  transform: rotate(0deg);\n  letter-spacing: -0.02em;\n  white-space: normal;\n  font-size: clamp(20px, min(4vw, 5vh), 42px);\n  line-height: 1.05;\n  margin-bottom: clamp(10px, 1.5vh, 18px);\n}\n\n\/* \u2500\u2500 Intro text \u2500\u2500 *\/\n.mg-panels .panel-intro {\n  opacity: 0;\n  max-height: 0;\n  overflow: hidden;\n  transform: translateY(16px);\n  transition: opacity 0.5s ease, transform 0.5s ease, max-height 0.5s ease;\n  color: rgba(255,255,255,0.85);\n  font-size: clamp(12px, 1.6vw, 16px);\n  line-height: 1.5;\n  margin-bottom: clamp(10px, 1.5vh, 18px);\n  flex-shrink: 0;\n}\n\n.mg-panels .panel.active .panel-intro {\n  opacity: 1;\n  max-height: 120px;\n  transform: translateY(0);\n  transition-delay: 0.22s;\n}\n\n\/* \u2500\u2500 Description list \u2500\u2500 *\/\n.mg-panels .panel-description {\n  opacity: 0;\n  max-height: 0;\n  overflow: hidden;\n  transform: translateY(20px);\n  transition: opacity 0.5s ease, transform 0.5s ease, max-height 0.6s ease;\n  flex-shrink: 0;\n  width: 100%;\n}\n\n.mg-panels .panel.active .panel-description {\n  opacity: 1;\n  max-height: 400px;\n  transform: translateY(0);\n  transition-delay: 0.30s;\n}\n\n.mg-panels .panel-description ul {\n  list-style: none;\n  display: grid;\n  gap: clamp(8px, 1.5vh, 14px);\n}\n\n.mg-panels .panel-description li {\n  position: relative;\n  padding-left: clamp(16px, 2vw, 24px);\n  color: #f0f0f0;\n  font-size: clamp(12px, 1.6vw, 16px);\n  line-height: 1.4;\n}\n\n.mg-panels .panel-description li::before {\n  content: \"\u2022\";\n  position: absolute;\n  left: 0;\n  top: 0;\n  color: #c89b3c;\n  font-size: clamp(16px, 2vw, 20px);\n  line-height: 1;\n}\n\n\/* \u2500\u2500 Background images \u2500\u2500 *\/\n.mg-panels .panel:nth-child(1) {\n  background-image: url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/Standard_procedures.jpg');\n  background-color: #1a1a1a;\n}\n.mg-panels .panel:nth-child(2) {\n  background-image: url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/Analysis_slider_tile.jpg');\n  background-color: #1a1a1a;\n}\n.mg-panels .panel:nth-child(3) {\n  background-image: url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/solidworks-pdm-implementation-service.jpg');\n  background-color: #1a1a1a;\n}\n.mg-panels .panel:nth-child(4) {\n  background-image: url('https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/12\/reengineering.png');\n  background-color: #1a1a1a;\n}\n\n\/* \u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550 *\/\n\n@media (max-width: 1024px) {\n  .mg-panels .panels-container { height: clamp(400px, 65vh, 600px); }\n  .mg-panels .panel-title { font-size: clamp(11px, min(2.2vw, 2.2vh), 18px); }\n  .mg-panels .panel.active .panel-title { font-size: clamp(18px, min(3.5vw, 4.5vh), 32px); }\n}\n\n@media (max-width: 768px) {\n  .mg-panels { padding: clamp(16px, 2.5vw, 28px) 16px; }\n  .mg-panels .panels-container {\n    flex-direction: column;\n    height: auto;\n    gap: clamp(6px, 1.5vw, 10px);\n  }\n  .mg-panels .panel {\n    flex: 0 0 clamp(55px, 10vw, 80px);\n    min-width: auto;\n    width: 100%;\n  }\n  .mg-panels .panel.active { flex: 0 0 clamp(320px, 55vh, 420px); }\n\n  .mg-panels .panel-title {\n    writing-mode: horizontal-tb;\n    transform: rotate(0deg);\n    white-space: nowrap;\n    font-size: clamp(13px, min(4vw, 2.8vh), 18px);\n    letter-spacing: 0.03em;\n  }\n  .mg-panels .panel.active .panel-title {\n    font-size: clamp(18px, min(5.5vw, 4.5vh), 28px);\n    white-space: normal;\n    margin-bottom: 10px;\n  }\n  .mg-panels .panel.active .panel-content {\n    padding: clamp(15px, 3vh, 25px) clamp(15px, 3vw, 25px);\n  }\n  .mg-panels .panel-intro {\n    font-size: clamp(11px, min(2.8vw, 1.8vh), 14px);\n  }\n  .mg-panels .panel-description ul { gap: clamp(6px, 1.2vh, 10px); }\n  .mg-panels .panel-description li {\n    font-size: clamp(11px, min(2.8vw, 1.8vh), 14px);\n    padding-left: clamp(14px, 3.5vw, 20px);\n  }\n  .mg-panels .panel-description li::before { font-size: clamp(14px, 3.5vw, 18px); }\n}\n\n@media (max-width: 480px) {\n  .mg-panels { padding: 12px; }\n  .mg-panels .panel { flex: 0 0 50px; }\n  .mg-panels .panel.active { flex: 0 0 clamp(280px, 50vh, 380px); }\n  .mg-panels .panel-title { font-size: clamp(11px, min(3.5vw, 2.2vh), 15px); }\n  .mg-panels .panel.active .panel-title { font-size: clamp(16px, min(5vw, 4vh), 24px); }\n  .mg-panels .panel-description ul { gap: 6px; }\n}\n\n@media (max-width: 360px) {\n  .mg-panels .panel.active { flex: 0 0 clamp(260px, 48vh, 350px); }\n  .mg-panels .panel-title { font-size: clamp(10px, min(3.2vw, 2vh), 13px); }\n  .mg-panels .panel.active .panel-title { font-size: clamp(14px, min(4.5vw, 3.5vh), 20px); }\n  .mg-panels .panel-intro { display: none; }\n}\n\n@media (max-height: 500px) and (orientation: landscape) {\n  .mg-panels .panels-container { flex-direction: row; height: 85vh; }\n  .mg-panels .panel { flex: 1; min-width: 45px; }\n  .mg-panels .panel.active { flex: 3; }\n  .mg-panels .panel-title {\n    writing-mode: vertical-rl;\n    transform: rotate(180deg);\n    white-space: nowrap;\n    font-size: clamp(9px, 2.2vh, 13px);\n  }\n  .mg-panels .panel.active .panel-title {\n    writing-mode: horizontal-tb;\n    transform: rotate(0deg);\n    white-space: normal;\n    font-size: clamp(12px, 3.5vh, 20px);\n  }\n  .mg-panels .panel-intro { font-size: clamp(8px, 1.8vh, 11px); }\n  .mg-panels .panel-description ul { gap: 4px; }\n  .mg-panels .panel-description li { font-size: clamp(9px, 2vh, 12px); }\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n  .mg-panels .panel-title {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n}\n\n@media (hover: none) and (pointer: coarse) {\n  .mg-panels .panel { -webkit-tap-highlight-color: transparent; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mg-panels .panel,\n  .mg-panels .panel-title,\n  .mg-panels .panel-intro,\n  .mg-panels .panel-description,\n  .mg-panels .panel::before {\n    transition-duration: 0.01ms !important;\n  }\n}\n<\/style>\n\n<div class=\"mg-panels\">\n  <div class=\"panels-container\">\n\n    <div class=\"panel\">\n      <div class=\"panel-content\">\n        <h2 class=\"panel-title\">\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432<\/h2>\n        <p class=\"panel-intro\">\u041c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u0438 \u0443\u0437\u043b\u044b \u0441 \u043d\u0443\u043b\u044f, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u0437\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u043d\u0430 \u0440\u0430\u043d\u043d\u0438\u0445 \u044d\u0442\u0430\u043f\u0430\u0445.<\/p>\n        <div class=\"panel-description\">\n          <ul>\n            <li>\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u044f<\/li>\n            <li>\u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0443\u0437\u043b\u043e\u0432 \u0438 \u0441\u0431\u043e\u0440\u043e\u043a (DFM \/ DFA)<\/li>\n            <li>\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0447\u0451\u0442\u044b \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0434\u043e\u043f\u0443\u0441\u043a\u043e\u0432<\/li>\n            <li>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043a \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0438 \u0441\u0435\u0440\u0438\u0438<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"panel\">\n      <div class=\"panel-content\">\n        <h2 class=\"panel-title\">\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0439 \u0430\u043d\u0430\u043b\u0438\u0437<\/h2>\n        <p class=\"panel-intro\">\u041f\u0440\u043e\u0432\u043e\u0434\u0438\u043c \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0447\u0451\u0442\u044b \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0434\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e.<\/p>\n        <div class=\"panel-description\">\n          <ul>\n            <li>\u041f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u043d\u044b\u0435 \u0438 \u0436\u0451\u0441\u0442\u043a\u043e\u0441\u0442\u043d\u044b\u0435 \u0440\u0430\u0441\u0447\u0451\u0442\u044b<\/li>\n            <li>\u041e\u0446\u0435\u043d\u043a\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u0438 \u0443\u0441\u0442\u0430\u043b\u043e\u0441\u0442\u043d\u043e\u0439 \u0434\u043e\u043b\u0433\u043e\u0432\u0435\u0447\u043d\u043e\u0441\u0442\u0438<\/li>\n            <li>\u0422\u0435\u043f\u043b\u043e\u0432\u043e\u0439 \u0438 CFD-\u0430\u043d\u0430\u043b\u0438\u0437<\/li>\n            <li>\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u043e\u0442\u0447\u0451\u0442\u044b \u0441 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044f\u043c\u0438<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"panel\">\n      <div class=\"panel-content\">\n        <h2 class=\"panel-title\">3D \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u0432\u044b\u043f\u0443\u0441\u043a \u041a\u0414<\/h2>\n        <p class=\"panel-intro\">\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u043e\u0447\u043d\u044b\u0435 3D-\u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442 \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, \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u043a \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e.<\/p>\n        <div class=\"panel-description\">\n          <ul>\n            <li>3D-\u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u043e \u0447\u0435\u0440\u0442\u0435\u0436\u0430\u043c \u0438 \u041a\u0414 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430<\/li>\n            <li>\u0412\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u043f\u043e \u0430\u0440\u0445\u0438\u0432\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/li>\n            <li>\u0420\u0430\u0431\u043e\u0447\u0438\u0435 \u0447\u0435\u0440\u0442\u0435\u0436\u0438 \u0434\u0435\u0442\u0430\u043b\u0435\u0439 \u0438 \u0441\u0431\u043e\u0440\u043e\u043a<\/li>\n            <li>\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0434\u043e\u043f\u0443\u0441\u043a\u0438 \u0438 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"panel\">\n      <div class=\"panel-content\">\n        <h2 class=\"panel-title\">\u0420\u0435\u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433<\/h2>\n        <p class=\"panel-intro\">\u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c, \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u043c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u2014 \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c, \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0438\u043b\u0438 \u043c\u043e\u0434\u0435\u0440\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e.<\/p>\n        <div class=\"panel-description\">\n          <ul>\n            <li>\u0410\u043d\u0430\u043b\u0438\u0437 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430 \u0440\u0430\u0431\u043e\u0442\u044b<\/li>\n            <li>\u0412\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 3D-\u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0438 \u041a\u0414<\/li>\n            <li>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0434 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0438 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b<\/li>\n            <li>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044e<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(function () {\n  var panels = document.querySelectorAll('.mg-panels .panel');\n  var timer = null;\n\n  function clearTimer() {\n    if (timer) { clearTimeout(timer); timer = null; }\n  }\n\n  function startTimer() {\n    clearTimer();\n    timer = setTimeout(function () {\n      panels.forEach(function (p) { p.classList.remove('active'); });\n    }, 5000);\n  }\n\n  panels.forEach(function (panel) {\n    panel.addEventListener('click', function (e) {\n      \/* Hyperlink clicks navigate normally \u2014 no expand\/collapse side effect *\/\n      if (e.target.closest('a')) return;\n\n      var isActive = panel.classList.contains('active');\n\n      if (isActive) {\n        panel.classList.remove('active');\n        clearTimer();\n      } else {\n        panels.forEach(function (p) { p.classList.remove('active'); });\n        panel.classList.add('active');\n        startTimer();\n      }\n    });\n\n    \/* Hovering inside an open panel resets the countdown *\/\n    panel.addEventListener('mouseenter', function () {\n      if (panel.classList.contains('active')) startTimer();\n    });\n  });\n})();\n<\/script>\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<!-- ==========================================================\n     MECHANOGURUS | WHEN MG CAN HELP\n     Capability Hub\n     WordPress Custom HTML\n\n     UPDATED:\n     - Unified smaller responsive heading\n     - Smaller Mechanogurus central hub\n     - Corrected all desktop connector lines\n     - Central vertical engineering spine\n     - Smaller CTA text\/button\n     - Responsive desktop \/ tablet \/ mobile\n     ========================================================== -->\n\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n\n<link\n  href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;600;700;800&amp;family=Montserrat:wght@700;800&amp;display=swap\"\n  rel=\"stylesheet\"\n>\n\n\n<style>\n\n\/* ==========================================================\n   WORDPRESS WIDTH RESET\n   ========================================================== *\/\n\n.wp-block-html:has(.mg-hub),\n.entry-content > .wp-block-html:has(.mg-hub),\n.wp-block-post-content > .wp-block-html:has(.mg-hub),\n.wp-block-group:has(.mg-hub),\n.wp-block-group:has(.mg-hub) > .wp-block-group__inner-container,\n.is-layout-constrained:has(.mg-hub) {\n\n  display: block !important;\n\n  width: 100% !important;\n\n  max-width: none !important;\n\n  margin-left: auto !important;\n\n  margin-right: auto !important;\n\n  padding-left: 0 !important;\n\n  padding-right: 0 !important;\n\n  float: none !important;\n}\n\n\n\/* ==========================================================\n   RESET\n   ========================================================== *\/\n\n.mg-hub,\n.mg-hub *,\n.mg-hub *::before,\n.mg-hub *::after {\n\n  box-sizing: border-box;\n}\n\n\n.mg-hub h2,\n.mg-hub h3,\n.mg-hub p {\n\n  margin: 0;\n\n  padding: 0;\n\n  color: inherit !important;\n}\n\n\n\/* ==========================================================\n   ROOT\n   ========================================================== *\/\n\n.mg-hub {\n\n  --orange:\n    #f2a51a;\n\n  --soft:\n    rgba(242,165,26,.13);\n\n  --muted:\n    rgba(255,255,255,.68);\n\n  --line:\n    rgba(255,255,255,.13);\n\n\n  width:\n    100% !important;\n\n  max-width:\n    1400px !important;\n\n\n  margin:\n    clamp(28px,4vw,58px)\n    auto !important;\n\n\n  padding:\n    0\n    20px;\n\n\n  overflow:\n    hidden;\n\n\n  color:\n    #fff;\n\n\n  background:\n    transparent !important;\n\n\n  font-family:\n    \"Manrope\",\n    \"Segoe UI\",\n    sans-serif;\n\n\n  -webkit-font-smoothing:\n    antialiased;\n}\n\n\n\/* ==========================================================\n   HEADER\n   ========================================================== *\/\n\n.mg-hub__header {\n\n  width:\n    100%;\n\n\n  max-width:\n    1050px;\n\n\n  margin:\n    0\n    auto\n    clamp(34px,4vw,52px);\n\n\n  text-align:\n    center;\n}\n\n\n\/* ==========================================================\n   MAIN HEADING\n   Reduced large-screen size\n   ========================================================== *\/\n\n.mg-hub__title {\n\n  max-width:\n    1000px;\n\n\n  margin:\n    0\n    auto;\n\n\n  font-family:\n    \"Montserrat\",\n    \"Manrope\",\n    sans-serif;\n\n\n  font-size:\n    clamp(\n      38px,\n      3.6vw,\n      56px\n    );\n\n\n  font-weight:\n    800;\n\n\n  line-height:\n    1.05;\n\n\n  letter-spacing:\n    -0.042em;\n\n\n  text-align:\n    center;\n\n\n  text-wrap:\n    balance;\n}\n\n\n.mg-hub__brand {\n\n  color:\n    var(--orange) !important;\n}\n\n\n\/* ==========================================================\n   LEAD TEXT\n   ========================================================== *\/\n\n.mg-hub__lead {\n\n  max-width:\n    760px;\n\n\n  margin:\n    clamp(16px,1.8vw,22px)\n    auto\n    0 !important;\n\n\n  color:\n    var(--muted) !important;\n\n\n  font-size:\n    clamp(\n      16px,\n      1.15vw,\n      18px\n    );\n\n\n  font-weight:\n    400;\n\n\n  line-height:\n    1.6;\n\n\n  text-align:\n    center;\n\n\n  text-wrap:\n    balance;\n}\n\n\n\/* ==========================================================\n   CAPABILITY MAP\n   ========================================================== *\/\n\n.mg-hub__map {\n\n  \/*\n   * Smaller centre hub.\n   *\/\n\n  --hub-size:\n    clamp(\n      150px,\n      14vw,\n      190px\n    );\n\n\n  \/*\n   * Distance from cards to hub column.\n   *\/\n\n  --connector:\n    clamp(\n      38px,\n      5vw,\n      70px\n    );\n\n\n  position:\n    relative;\n\n\n  display:\n    grid;\n\n\n  grid-template-columns:\n\n    minmax(0,1fr)\n\n    var(--hub-size)\n\n    minmax(0,1fr);\n\n\n  grid-template-areas:\n\n    \"one hub four\"\n\n    \"two hub five\"\n\n    \"three hub six\";\n\n\n  gap:\n    18px\n    var(--connector);\n\n\n  align-items:\n    stretch;\n}\n\n\n\/* ==========================================================\n   CENTRAL VERTICAL SPINE\n   ========================================================== *\/\n\n.mg-hub__map::before {\n\n  content:\n    \"\";\n\n\n  position:\n    absolute;\n\n\n  z-index:\n    0;\n\n\n  top:\n    9%;\n\n\n  bottom:\n    9%;\n\n\n  left:\n    50%;\n\n\n  width:\n    2px;\n\n\n  transform:\n    translateX(-50%);\n\n\n  background:\n    linear-gradient(\n      180deg,\n\n      transparent 0%,\n\n      rgba(242,165,26,.55) 7%,\n\n      var(--orange) 19%,\n\n      var(--orange) 81%,\n\n      rgba(242,165,26,.55) 93%,\n\n      transparent 100%\n    );\n\n\n  box-shadow:\n    0 0 8px\n    rgba(242,165,26,.30);\n\n\n  pointer-events:\n    none;\n}\n\n\n\/* ==========================================================\n   CENTRAL HUB\n   ========================================================== *\/\n\n.mg-hub__center {\n\n  grid-area:\n    hub;\n\n\n  position:\n    relative;\n\n\n  z-index:\n    5;\n\n\n  align-self:\n    center;\n\n\n  justify-self:\n    center;\n\n\n  width:\n    var(--hub-size);\n\n\n  aspect-ratio:\n    1;\n\n\n  display:\n    grid;\n\n\n  place-items:\n    center;\n\n\n  border:\n    1px solid\n    rgba(255,255,255,.24);\n\n\n  border-radius:\n    15px;\n\n\n  background-color:\n    #090a0b;\n\n\n  background-image:\n    url(\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/cropped-mg.png\");\n\n\n  background-repeat:\n    no-repeat;\n\n\n  background-position:\n    center;\n\n\n  background-size:\n    60% auto;\n\n\n  box-shadow:\n\n    0 0 0 7px\n    rgba(255,255,255,.012),\n\n    0 20px 54px\n    rgba(0,0,0,.28);\n}\n\n\n\/* ==========================================================\n   HUB INNER BORDER\n   ========================================================== *\/\n\n.mg-hub__center::before {\n\n  content:\n    \"\";\n\n\n  position:\n    absolute;\n\n\n  inset:\n    11px;\n\n\n  z-index:\n    2;\n\n\n  border:\n    1px solid\n    rgba(242,165,26,.22);\n\n\n  border-radius:\n    9px;\n\n\n  pointer-events:\n    none;\n}\n\n\n\/* ==========================================================\n   HIDDEN ACCESSIBILITY IMAGE\n   ========================================================== *\/\n\n.mg-hub__logo {\n\n  position:\n    absolute !important;\n\n\n  width:\n    1px !important;\n\n\n  height:\n    1px !important;\n\n\n  padding:\n    0 !important;\n\n\n  margin:\n    -1px !important;\n\n\n  overflow:\n    hidden !important;\n\n\n  clip:\n    rect(0,0,0,0) !important;\n\n\n  white-space:\n    nowrap !important;\n\n\n  border:\n    0 !important;\n}\n\n\n\/* ==========================================================\n   CARDS\n   ========================================================== *\/\n\n.mg-hub__card {\n\n  position:\n    relative;\n\n\n  z-index:\n    2;\n\n\n  min-width:\n    0;\n\n\n  display:\n    grid;\n\n\n  grid-template-columns:\n\n    42px\n\n    minmax(0,1fr);\n\n\n  gap:\n    13px;\n\n\n  align-content:\n    center;\n\n\n  padding:\n    19px;\n\n\n  border:\n    1px solid\n    var(--line);\n\n\n  border-radius:\n    14px;\n\n\n  background:\n    rgba(255,255,255,.035);\n\n\n  transition:\n\n    border-color .3s,\n\n    background .3s,\n\n    transform .3s,\n\n    box-shadow .3s;\n}\n\n\n\/* ==========================================================\n   HORIZONTAL CONNECTION LINE\n\n   Extends through:\n   card -> normal gap -> half hub column\n\n   This connects every row to the central spine.\n   ========================================================== *\/\n\n.mg-hub__card::after {\n\n  content:\n    \"\";\n\n\n  position:\n    absolute;\n\n\n  z-index:\n    1;\n\n\n  top:\n    calc(50% - 1px);\n\n\n  width:\n    calc(\n      var(--connector)\n      +\n      (var(--hub-size) \/ 2)\n    );\n\n\n  height:\n    2px;\n\n\n  background:\n    var(--orange);\n\n\n  opacity:\n    .88;\n\n\n  box-shadow:\n    0 0 8px\n    rgba(242,165,26,.38);\n\n\n  pointer-events:\n    none;\n\n\n  transition:\n\n    opacity .35s,\n\n    box-shadow .35s;\n}\n\n\n\/* ==========================================================\n   CONNECTION NODES\n   ========================================================== *\/\n\n.mg-hub__card::before {\n\n  content:\n    \"\";\n\n\n  position:\n    absolute;\n\n\n  z-index:\n    6;\n\n\n  top:\n    calc(50% - 5px);\n\n\n  width:\n    10px;\n\n\n  height:\n    10px;\n\n\n  border:\n    2px solid\n    var(--orange);\n\n\n  border-radius:\n    50%;\n\n\n  background:\n    #0d0d0d;\n\n\n  box-shadow:\n\n    0 0 0 3px\n    rgba(242,165,26,.12),\n\n    0 0 12px\n    rgba(242,165,26,.42);\n\n\n  pointer-events:\n    none;\n}\n\n\n\/* ==========================================================\n   LEFT CARDS\n   ========================================================== *\/\n\n.mg-hub__left::after {\n\n  left:\n    100%;\n\n\n  background:\n    linear-gradient(\n      90deg,\n\n      rgba(242,165,26,.72),\n\n      var(--orange)\n    );\n}\n\n\n.mg-hub__left::before {\n\n  right:\n    calc(\n      -1 *\n      (\n        var(--connector)\n        +\n        (var(--hub-size) \/ 2)\n      )\n      -\n      5px\n    );\n}\n\n\n\/* ==========================================================\n   RIGHT CARDS\n   ========================================================== *\/\n\n.mg-hub__right::after {\n\n  right:\n    100%;\n\n\n  background:\n    linear-gradient(\n      270deg,\n\n      rgba(242,165,26,.72),\n\n      var(--orange)\n    );\n}\n\n\n.mg-hub__right::before {\n\n  left:\n    calc(\n      -1 *\n      (\n        var(--connector)\n        +\n        (var(--hub-size) \/ 2)\n      )\n      -\n      5px\n    );\n}\n\n\n\/* ==========================================================\n   ACTIVE \/ HOVER\n   ========================================================== *\/\n\n.mg-hub__card.is-active,\n\n.mg-hub__card:hover,\n\n.mg-hub__card:focus {\n\n  outline:\n    0;\n\n\n  border-color:\n    rgba(242,165,26,.55);\n\n\n  background:\n    rgba(242,165,26,.075);\n\n\n  transform:\n    translateY(-2px);\n\n\n  box-shadow:\n    0 16px 38px\n    rgba(0,0,0,.24);\n}\n\n\n.mg-hub__card.is-active::after,\n\n.mg-hub__card:hover::after,\n\n.mg-hub__card:focus::after {\n\n  opacity:\n    1;\n\n\n  box-shadow:\n    0 0 15px\n    rgba(242,165,26,.72);\n}\n\n\n.mg-hub__card.is-active::before,\n\n.mg-hub__card:hover::before,\n\n.mg-hub__card:focus::before {\n\n  box-shadow:\n\n    0 0 0 4px\n    rgba(242,165,26,.15),\n\n    0 0 16px\n    rgba(242,165,26,.70);\n}\n\n\n\/* ==========================================================\n   GRID POSITIONS\n   ========================================================== *\/\n\n.mg-hub__card:nth-of-type(1) {\n\n  grid-area:\n    one;\n}\n\n\n.mg-hub__card:nth-of-type(2) {\n\n  grid-area:\n    two;\n}\n\n\n.mg-hub__card:nth-of-type(3) {\n\n  grid-area:\n    three;\n}\n\n\n.mg-hub__card:nth-of-type(4) {\n\n  grid-area:\n    four;\n}\n\n\n.mg-hub__card:nth-of-type(5) {\n\n  grid-area:\n    five;\n}\n\n\n.mg-hub__card:nth-of-type(6) {\n\n  grid-area:\n    six;\n}\n\n\n\/* ==========================================================\n   ICONS\n   ========================================================== *\/\n\n.mg-hub__icon {\n\n  width:\n    42px;\n\n\n  height:\n    42px;\n\n\n  display:\n    grid;\n\n\n  place-items:\n    center;\n\n\n  border:\n    1px solid\n    rgba(242,165,26,.34);\n\n\n  border-radius:\n    11px;\n\n\n  color:\n    var(--orange);\n\n\n  background:\n    var(--soft);\n}\n\n\n.mg-hub__icon svg {\n\n  width:\n    21px;\n\n\n  height:\n    21px;\n\n\n  fill:\n    none;\n\n\n  stroke:\n    currentColor;\n\n\n  stroke-width:\n    1.8;\n\n\n  stroke-linecap:\n    round;\n\n\n  stroke-linejoin:\n    round;\n}\n\n\n\/* ==========================================================\n   CARD TEXT\n   ========================================================== *\/\n\n.mg-hub__copy {\n\n  min-width:\n    0;\n}\n\n\n.mg-hub__card-title {\n\n  font-size:\n    clamp(\n      15px,\n      .88rem + .20vw,\n      17px\n    );\n\n\n  font-weight:\n    800;\n\n\n  line-height:\n    1.3;\n}\n\n\n.mg-hub__text {\n\n  margin-top:\n    7px !important;\n\n\n  color:\n    var(--muted) !important;\n\n\n  font-size:\n    clamp(\n      12.5px,\n      .76rem + .12vw,\n      14px\n    );\n\n\n  line-height:\n    1.55;\n}\n\n\n\/* ==========================================================\n   CTA\n   ========================================================== *\/\n\n.mg-hub__cta-wrap {\n\n  display:\n    flex;\n\n\n  justify-content:\n    center;\n\n\n  margin-top:\n    clamp(\n      30px,\n      4vw,\n      48px\n    );\n}\n\n\n.mg-hub__cta {\n\n  display:\n    inline-flex;\n\n\n  align-items:\n    center;\n\n\n  justify-content:\n    center;\n\n\n  gap:\n    9px;\n\n\n  min-height:\n    48px;\n\n\n  padding:\n    12px\n    20px;\n\n\n  border-radius:\n    999px;\n\n\n  color:\n    #111 !important;\n\n\n  background:\n    var(--orange);\n\n\n  font-family:\n    \"Montserrat\",\n    \"Manrope\",\n    sans-serif;\n\n\n  \/*\n   * Approx. 20\u201325% smaller visual scale\n   * than previous CTA.\n   *\/\n\n  font-size:\n    13px;\n\n\n  font-weight:\n    800;\n\n\n  line-height:\n    1;\n\n\n  letter-spacing:\n    -0.01em;\n\n\n  text-decoration:\n    none !important;\n\n\n  box-shadow:\n    0 10px 26px\n    rgba(242,165,26,.22);\n\n\n  transition:\n\n    transform .25s,\n\n    box-shadow .25s;\n}\n\n\n.mg-hub__cta:hover {\n\n  color:\n    #111 !important;\n\n\n  transform:\n    translateY(-2px);\n\n\n  box-shadow:\n    0 14px 32px\n    rgba(242,165,26,.31);\n}\n\n\n.mg-hub__cta svg {\n\n  width:\n    16px;\n\n\n  height:\n    16px;\n\n\n  fill:\n    none;\n\n\n  stroke:\n    currentColor;\n\n\n  stroke-width:\n    2;\n}\n\n\n\/* ==========================================================\n   LAPTOP\n   ========================================================== *\/\n\n@media\n(max-width: 1180px) {\n\n  .mg-hub__title {\n\n    font-size:\n      clamp(\n        36px,\n        4.2vw,\n        50px\n      );\n  }\n\n\n  .mg-hub__map {\n\n    --hub-size:\n      clamp(\n        145px,\n        15vw,\n        175px\n      );\n\n\n    --connector:\n      clamp(\n        32px,\n        4vw,\n        55px\n      );\n  }\n\n}\n\n\n\/* ==========================================================\n   TABLET\n   ========================================================== *\/\n\n@media\n(max-width: 1050px) {\n\n  .mg-hub__map {\n\n    --hub-size:\n      170px;\n\n\n    grid-template-columns:\n      1fr\n      1fr;\n\n\n    grid-template-areas:\n\n      \"hub hub\"\n\n      \"one four\"\n\n      \"two five\"\n\n      \"three six\";\n\n\n    gap:\n      16px;\n  }\n\n\n  \/*\n   * Desktop topology is no longer useful\n   * after reflow.\n   *\/\n\n  .mg-hub__map::before {\n\n    display:\n      none;\n  }\n\n\n  .mg-hub__center {\n\n    width:\n      var(--hub-size);\n\n\n    margin:\n      0\n      auto\n      14px;\n\n\n    background-size:\n      60% auto;\n  }\n\n\n  .mg-hub__card::after,\n\n  .mg-hub__card::before {\n\n    display:\n      none;\n  }\n\n}\n\n\n\/* ==========================================================\n   TABLET PORTRAIT\n   ========================================================== *\/\n\n@media\n(max-width: 768px) {\n\n  .mg-hub {\n\n    padding:\n      0\n      16px;\n  }\n\n\n  .mg-hub__header {\n\n    max-width:\n      720px;\n\n\n    margin-bottom:\n      30px;\n  }\n\n\n  .mg-hub__title {\n\n    font-size:\n      clamp(\n        34px,\n        6.7vw,\n        46px\n      );\n\n\n    line-height:\n      1.07;\n  }\n\n\n  .mg-hub__lead {\n\n    font-size:\n      16px;\n\n\n    line-height:\n      1.55;\n  }\n\n\n  .mg-hub__map {\n\n    --hub-size:\n      150px;\n  }\n\n}\n\n\n\/* ==========================================================\n   MOBILE\n   ========================================================== *\/\n\n@media\n(max-width: 640px) {\n\n  .mg-hub {\n\n    padding:\n      0\n      14px;\n\n\n    margin:\n      22px\n      auto\n      32px !important;\n  }\n\n\n  .mg-hub__header {\n\n    margin-bottom:\n      28px;\n  }\n\n\n  .mg-hub__title {\n\n    font-size:\n      clamp(\n        30px,\n        8.3vw,\n        39px\n      );\n\n\n    line-height:\n      1.08;\n\n\n    letter-spacing:\n      -.035em;\n  }\n\n\n  .mg-hub__lead {\n\n    margin-top:\n      14px !important;\n\n\n    font-size:\n      15.5px;\n\n\n    line-height:\n      1.55;\n  }\n\n\n  .mg-hub__map {\n\n    --hub-size:\n      120px;\n\n\n    grid-template-columns:\n      1fr;\n\n\n    grid-template-areas:\n\n      \"hub\"\n\n      \"one\"\n\n      \"two\"\n\n      \"three\"\n\n      \"four\"\n\n      \"five\"\n\n      \"six\";\n\n\n    gap:\n      14px;\n  }\n\n\n  .mg-hub__map::before {\n\n    display:\n      none;\n  }\n\n\n  \/* ========================================================\n     MOBILE HUB\n     ======================================================== *\/\n\n  .mg-hub__center {\n\n    width:\n      var(--hub-size);\n\n\n    margin:\n      0\n      auto\n      18px;\n\n\n    border-radius:\n      12px;\n\n\n    background-size:\n      65% auto;\n\n\n    box-shadow:\n\n      0 0 0 6px\n      rgba(255,255,255,.012),\n\n      0 16px 34px\n      rgba(0,0,0,.28);\n  }\n\n\n  .mg-hub__center::before {\n\n    inset:\n      8px;\n\n\n    border-radius:\n      7px;\n  }\n\n\n  \/*\n   * Line from central logo down\n   * to first card.\n   *\/\n\n  .mg-hub__center::after {\n\n    content:\n      \"\";\n\n\n    position:\n      absolute;\n\n\n    z-index:\n      -1;\n\n\n    left:\n      calc(50% - 1px);\n\n\n    top:\n      100%;\n\n\n    width:\n      2px;\n\n\n    height:\n      34px;\n\n\n    background:\n      var(--orange);\n\n\n    box-shadow:\n      0 0 8px\n      rgba(242,165,26,.48);\n  }\n\n\n  \/* ========================================================\n     MOBILE CARDS\n     ======================================================== *\/\n\n  .mg-hub__card {\n\n    grid-template-columns:\n\n      38px\n\n      minmax(0,1fr);\n\n\n    gap:\n      12px;\n\n\n    padding:\n      15px\n      14px;\n\n\n    border-radius:\n      12px;\n\n\n    background:\n      rgba(255,255,255,.045);\n  }\n\n\n  .mg-hub__icon {\n\n    width:\n      38px;\n\n\n    height:\n      38px;\n\n\n    border-radius:\n      10px;\n  }\n\n\n  .mg-hub__icon svg {\n\n    width:\n      19px;\n\n\n    height:\n      19px;\n  }\n\n\n  .mg-hub__card-title {\n\n    font-size:\n      15.5px;\n  }\n\n\n  .mg-hub__text {\n\n    font-size:\n      13px;\n\n\n    line-height:\n      1.5;\n  }\n\n\n  \/*\n   * Remove desktop connection dot.\n   *\/\n\n  .mg-hub__card::before {\n\n    display:\n      none;\n  }\n\n\n  \/*\n   * Vertical connector between cards.\n   *\/\n\n  .mg-hub__card::after {\n\n    display:\n      block;\n\n\n    left:\n      32px;\n\n\n    right:\n      auto;\n\n\n    top:\n      100%;\n\n\n    width:\n      2px;\n\n\n    height:\n      14px;\n\n\n    background:\n      var(--orange);\n\n\n    opacity:\n      .88;\n\n\n    box-shadow:\n      0 0 7px\n      rgba(242,165,26,.35);\n  }\n\n\n  .mg-hub__card:last-of-type::after {\n\n    display:\n      none;\n  }\n\n\n  .mg-hub__card:hover,\n\n  .mg-hub__card:focus {\n\n    transform:\n      none;\n  }\n\n\n  \/* ========================================================\n     MOBILE CTA\n     ======================================================== *\/\n\n  .mg-hub__cta-wrap {\n\n    margin-top:\n      28px;\n  }\n\n\n  .mg-hub__cta {\n\n    width:\n      min(\n        100%,\n        320px\n      );\n\n\n    min-height:\n      48px;\n\n\n    padding:\n      12px\n      18px;\n\n\n    font-size:\n      13px;\n  }\n\n}\n\n\n\/* ==========================================================\n   SMALL MOBILE\n   ========================================================== *\/\n\n@media\n(max-width: 380px) {\n\n  .mg-hub {\n\n    padding:\n      0\n      10px;\n  }\n\n\n  .mg-hub__title {\n\n    font-size:\n      29px;\n  }\n\n\n  .mg-hub__map {\n\n    --hub-size:\n      110px;\n  }\n\n\n  .mg-hub__card {\n\n    grid-template-columns:\n\n      34px\n\n      minmax(0,1fr);\n\n\n    gap:\n      10px;\n\n\n    padding:\n      13px\n      11px;\n  }\n\n\n  .mg-hub__icon {\n\n    width:\n      34px;\n\n\n    height:\n      34px;\n  }\n\n\n  .mg-hub__card::after {\n\n    left:\n      27px;\n  }\n\n\n  .mg-hub__cta {\n\n    font-size:\n      12.5px;\n  }\n\n}\n\n\n\/* ==========================================================\n   TOUCH DEVICES\n   ========================================================== *\/\n\n@media\n(hover: none) {\n\n  .mg-hub__card:hover {\n\n    transform:\n      none;\n  }\n\n\n  .mg-hub__cta:hover {\n\n    transform:\n      none;\n  }\n\n}\n\n\n\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/\n\n@media\n(prefers-reduced-motion: reduce) {\n\n  .mg-hub__card,\n\n  .mg-hub__cta {\n\n    transition:\n      none;\n  }\n\n\n  .mg-hub__card:hover,\n\n  .mg-hub__cta:hover {\n\n    transform:\n      none;\n  }\n\n}\n\n<\/style>\n\n\n\n<!-- ==========================================================\n     HTML\n     ========================================================== -->\n\n<section\n  class=\"mg-hub\"\n  aria-labelledby=\"mg-hub-title\"\n>\n\n\n  <!-- ======================================================\n       HEADER\n       ====================================================== -->\n\n  <header class=\"mg-hub__header\">\n\n    <h2\n      class=\"mg-hub__title\"\n      id=\"mg-hub-title\"\n    >\n\n      \u041a\u043e\u0433\u0434\u0430\n\n      <span class=\"mg-hub__brand\">\n        \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441 \u041a\u0411\n      <\/span>\n\n      \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u0435\u043d\n\n    <\/h2>\n\n\n    <p class=\"mg-hub__lead\">\n\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\n    <\/p>\n\n  <\/header>\n\n\n\n  <!-- ======================================================\n       CAPABILITY MAP\n       ====================================================== -->\n\n  <div class=\"mg-hub__map\">\n\n\n    <!-- ====================================================\n         CENTRAL HUB\n         ==================================================== -->\n\n    <div\n      class=\"mg-hub__center\"\n      role=\"img\"\n      aria-label=\"Mechanogurus \u041a\u0411\"\n    >\n\n      <img decoding=\"async\"\n        class=\"mg-hub__logo\"\n        src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/05\/cropped-mg.png\"\n        alt=\"\"\n        aria-hidden=\"true\"\n      >\n\n    <\/div>\n\n\n\n    <!-- ====================================================\n         CARD 1\n         ==================================================== -->\n\n    <article\n      class=\"mg-hub__card mg-hub__left\"\n      tabindex=\"0\"\n    >\n\n      <span class=\"mg-hub__icon\">\n\n        <svg viewBox=\"0 0 24 24\">\n\n          <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"><\/path>\n\n          <circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle>\n\n          <path d=\"M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75\"><\/path>\n\n        <\/svg>\n\n      <\/span>\n\n\n      <div class=\"mg-hub__copy\">\n\n        <h3 class=\"mg-hub__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-hub__text\">\n\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\n        <\/p>\n\n      <\/div>\n\n    <\/article>\n\n\n\n    <!-- ====================================================\n         CARD 2\n         ==================================================== -->\n\n    <article\n      class=\"mg-hub__card mg-hub__left\"\n      tabindex=\"0\"\n    >\n\n      <span class=\"mg-hub__icon\">\n\n        <svg viewBox=\"0 0 24 24\">\n\n          <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M8 13h8M8 17h8\"><\/path>\n\n        <\/svg>\n\n      <\/span>\n\n\n      <div class=\"mg-hub__copy\">\n\n        <h3 class=\"mg-hub__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-hub__text\">\n\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\n        <\/p>\n\n      <\/div>\n\n    <\/article>\n\n\n\n    <!-- ====================================================\n         CARD 3\n         ==================================================== -->\n\n    <article\n      class=\"mg-hub__card mg-hub__left\"\n      tabindex=\"0\"\n    >\n\n      <span class=\"mg-hub__icon\">\n\n        <svg viewBox=\"0 0 24 24\">\n\n          <path d=\"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5ZM15 5l4 4\"><\/path>\n\n        <\/svg>\n\n      <\/span>\n\n\n      <div class=\"mg-hub__copy\">\n\n        <h3 class=\"mg-hub__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-hub__text\">\n\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\n        <\/p>\n\n      <\/div>\n\n    <\/article>\n\n\n\n    <!-- ====================================================\n         CARD 4\n         ==================================================== -->\n\n    <article\n      class=\"mg-hub__card mg-hub__right\"\n      tabindex=\"0\"\n    >\n\n      <span class=\"mg-hub__icon\">\n\n        <svg viewBox=\"0 0 24 24\">\n\n          <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"><\/path>\n\n        <\/svg>\n\n      <\/span>\n\n\n      <div class=\"mg-hub__copy\">\n\n        <h3 class=\"mg-hub__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-hub__text\">\n\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\n        <\/p>\n\n      <\/div>\n\n    <\/article>\n\n\n\n    <!-- ====================================================\n         CARD 5\n         ==================================================== -->\n\n    <article\n      class=\"mg-hub__card mg-hub__right\"\n      tabindex=\"0\"\n    >\n\n      <span class=\"mg-hub__icon\">\n\n        <svg viewBox=\"0 0 24 24\">\n\n          <path d=\"M3 3v18h18M7 14l4-4 4 4 5-6\"><\/path>\n\n        <\/svg>\n\n      <\/span>\n\n\n      <div class=\"mg-hub__copy\">\n\n        <h3 class=\"mg-hub__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-hub__text\">\n\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\n        <\/p>\n\n      <\/div>\n\n    <\/article>\n\n\n\n    <!-- ====================================================\n         CARD 6\n         ==================================================== -->\n\n    <article\n      class=\"mg-hub__card mg-hub__right\"\n      tabindex=\"0\"\n    >\n\n      <span class=\"mg-hub__icon\">\n\n        <svg viewBox=\"0 0 24 24\">\n\n          <circle\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\">\n          <\/circle>\n\n          <path d=\"M9.1 9a3 3 0 1 1 5.8 1c0 2-3 3-3 3M12 17h.01\"><\/path>\n\n        <\/svg>\n\n      <\/span>\n\n\n      <div class=\"mg-hub__copy\">\n\n        <h3 class=\"mg-hub__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-hub__text\">\n\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\n        <\/p>\n\n      <\/div>\n\n    <\/article>\n\n\n  <\/div>\n\n\n\n  <!-- ======================================================\n       CTA\n       ====================================================== -->\n\n  <div class=\"mg-hub__cta-wrap\">\n\n    <a\n      class=\"mg-hub__cta\"\n      href=\"https:\/\/n8n.mechanogurus.ru\/form\/105adc81-c50a-40f0-ab54-f0b65857d49e\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n    >\n\n      \u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443\n\n\n      <svg\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n      >\n\n        <path d=\"M5 12h14M13 6l6 6-6 6\"><\/path>\n\n      <\/svg>\n\n    <\/a>\n\n  <\/div>\n\n\n<\/section>\n\n\n\n<!-- ==========================================================\n     ACTIVE CARD ANIMATION\n     ========================================================== -->\n\n<script>\n\n(function () {\n\n\n  var root =\n    document.querySelector(\n      \".mg-hub\"\n    );\n\n\n  if (!root) {\n    return;\n  }\n\n\n  var cards =\n    [].slice.call(\n\n      root.querySelectorAll(\n        \".mg-hub__card\"\n      )\n\n    );\n\n\n  if (!cards.length) {\n    return;\n  }\n\n\n  var timer =\n    null;\n\n\n  var index =\n    0;\n\n\n  var reduce =\n    window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    ).matches;\n\n\n\n  \/* ========================================================\n     ACTIVATE CARD\n     ======================================================== *\/\n\n  function activate(next) {\n\n\n    cards.forEach(\n\n      function (card, i) {\n\n\n        card.classList.toggle(\n\n          \"is-active\",\n\n          i === next\n\n        );\n\n      }\n\n    );\n\n  }\n\n\n\n  \/* ========================================================\n     START ROTATION\n     ======================================================== *\/\n\n  function start() {\n\n\n    if (\n      reduce ||\n      timer\n    ) {\n\n      return;\n\n    }\n\n\n    activate(\n      index\n    );\n\n\n    timer =\n      window.setInterval(\n\n        function () {\n\n\n          index =\n            (\n              index + 1\n            )\n            %\n            cards.length;\n\n\n          activate(\n            index\n          );\n\n        },\n\n        2200\n\n      );\n\n  }\n\n\n\n  \/* ========================================================\n     STOP ROTATION\n     ======================================================== *\/\n\n  function stop() {\n\n\n    if (timer) {\n\n\n      window.clearInterval(\n        timer\n      );\n\n    }\n\n\n    timer =\n      null;\n\n  }\n\n\n\n  \/* ========================================================\n     CARD INTERACTIONS\n     ======================================================== *\/\n\n  cards.forEach(\n\n    function (\n      card,\n      i\n    ) {\n\n\n      card.addEventListener(\n\n        \"mouseenter\",\n\n        function () {\n\n\n          stop();\n\n\n          activate(\n            i\n          );\n\n        }\n\n      );\n\n\n      card.addEventListener(\n\n        \"mouseleave\",\n\n        function () {\n\n\n          index =\n            i;\n\n\n          start();\n\n        }\n\n      );\n\n\n      card.addEventListener(\n\n        \"focus\",\n\n        function () {\n\n\n          stop();\n\n\n          activate(\n            i\n          );\n\n        }\n\n      );\n\n\n      card.addEventListener(\n\n        \"blur\",\n\n        function () {\n\n\n          index =\n            i;\n\n\n          start();\n\n        }\n\n      );\n\n    }\n\n  );\n\n\n\n  \/* ========================================================\n     RUN ONLY WHILE SECTION IS VISIBLE\n     ======================================================== *\/\n\n  if (\n    \"IntersectionObserver\"\n    in window\n  ) {\n\n\n    var observer =\n      new IntersectionObserver(\n\n        function (entries) {\n\n\n          if (\n            entries[0].isIntersecting\n          ) {\n\n\n            start();\n\n          }\n\n          else {\n\n\n            stop();\n\n          }\n\n        },\n\n        {\n          threshold:\n            .2\n        }\n\n      );\n\n\n    observer.observe(\n      root\n    );\n\n  }\n\n  else {\n\n\n    start();\n\n  }\n\n\n})();\n\n<\/script>\n<\/div>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<!-- ==========================================================\n     MECHANOGURUS | \u042d\u041a\u0421\u041f\u0415\u0420\u0422\u0418\u0417\u0410\n     Clean engineering capability grid\n     No images \/ no numbering\n     Centered heading and introduction\n     WordPress Custom HTML block\n     ========================================================== -->\n\n<style>\n.mg-expertise,\n.mg-expertise *,\n.mg-expertise *::before,\n.mg-expertise *::after {\n  box-sizing: border-box;\n}\n\n.mg-expertise {\n  --mg-width: 1400px;\n  --mg-card: #15181b;\n  --mg-card-hover: #191d21;\n  --mg-text: #f5f5f3;\n  --mg-muted: rgba(245,245,243,0.62);\n  --mg-border: rgba(255,255,255,0.08);\n  --mg-border-hover: rgba(255,255,255,0.18);\n  --mg-accent: #f0b323;\n\n  width: 100%;\n  max-width: var(--mg-width);\n\n  margin: 0 auto;\n\n  padding:\n    clamp(32px, 4vw, 64px)\n    clamp(18px, 3vw, 28px);\n\n  font-family:\n    \"DM Sans\",\n    \"Roboto\",\n    Arial,\n    sans-serif;\n}\n\n\n\/* ==========================================================\n   HEADER\n   ========================================================== *\/\n\n.mg-expertise__header {\n  width: 100%;\n  max-width: 900px;\n\n  margin:\n    0\n    auto\n    clamp(32px, 4vw, 50px);\n\n  text-align: center;\n}\n\n\n.mg-expertise__title {\n  margin: 0;\n\n  color: var(--mg-text);\n\n  font-size:\n    clamp(\n      34px,\n      3.3vw,\n      54px\n    );\n\n  font-weight: 700;\n\n  line-height: 1.05;\n\n  letter-spacing: -0.04em;\n\n  text-align: center;\n}\n\n\n.mg-expertise__intro {\n  width: 100%;\n  max-width: 760px;\n\n  margin:\n    clamp(16px, 2vw, 22px)\n    auto\n    0;\n\n  color: var(--mg-muted);\n\n  font-size:\n    clamp(\n      16px,\n      1.25vw,\n      19px\n    );\n\n  font-weight: 400;\n\n  line-height: 1.6;\n\n  text-align: center;\n\n  text-wrap: balance;\n}\n\n\n\/* ==========================================================\n   GRID\n   ========================================================== *\/\n\n.mg-expertise__grid {\n  display: grid;\n\n  grid-template-columns:\n    repeat(3, minmax(0, 1fr));\n\n  gap:\n    clamp(\n      16px,\n      2vw,\n      24px\n    );\n\n  align-items: stretch;\n}\n\n\n\/* ==========================================================\n   CARD\n   ========================================================== *\/\n\n.mg-expertise-card {\n  position: relative;\n\n  min-width: 0;\n  min-height: 235px;\n\n  overflow: hidden;\n\n  display: flex;\n  flex-direction: column;\n\n  border:\n    1px solid\n    var(--mg-border);\n\n  border-radius: 16px;\n\n  background:\n    linear-gradient(\n      180deg,\n      rgba(255,255,255,0.018) 0%,\n      rgba(255,255,255,0.004) 100%\n    ),\n    var(--mg-card);\n\n  box-shadow:\n    0 10px 30px rgba(0,0,0,0.16);\n\n  transition:\n    transform 220ms ease,\n    border-color 220ms ease,\n    background-color 220ms ease,\n    box-shadow 220ms ease;\n}\n\n\n\/* Subtle engineering accent *\/\n\n.mg-expertise-card::before {\n  content: \"\";\n\n  position: absolute;\n\n  top: 0;\n  left: 0;\n\n  width: 64px;\n  height: 2px;\n\n  background: var(--mg-accent);\n\n  transition:\n    width 260ms ease;\n}\n\n\n.mg-expertise-card:hover {\n  transform:\n    translateY(-4px);\n\n  border-color:\n    var(--mg-border-hover);\n\n  background:\n    var(--mg-card-hover);\n\n  box-shadow:\n    0 16px 36px rgba(0,0,0,0.22);\n}\n\n\n.mg-expertise-card:hover::before {\n  width: 110px;\n}\n\n\n\/* ==========================================================\n   LINK\n   ========================================================== *\/\n\n.mg-expertise-card__link {\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  flex-direction: column;\n\n  padding:\n    clamp(24px, 2.2vw, 32px);\n\n  color: inherit;\n\n  text-decoration: none;\n}\n\n\n\/* ==========================================================\n   CATEGORY\n   ========================================================== *\/\n\n.mg-expertise-card__category {\n  margin-bottom: 20px;\n\n  color: var(--mg-accent);\n\n  font-size: 11px;\n\n  font-weight: 700;\n\n  line-height: 1;\n\n  letter-spacing: 0.14em;\n\n  text-transform: uppercase;\n}\n\n\n\/* ==========================================================\n   TITLE\n   ========================================================== *\/\n\n.mg-expertise-card__title {\n  margin: 0;\n\n  color: var(--mg-text);\n\n  font-size:\n    clamp(\n      22px,\n      1.8vw,\n      29px\n    );\n\n  font-weight: 700;\n\n  line-height: 1.15;\n\n  letter-spacing: -0.025em;\n\n  text-wrap: balance;\n}\n\n\n\/* ==========================================================\n   DESCRIPTION\n   ========================================================== *\/\n\n.mg-expertise-card__description {\n  margin:\n    14px\n    0\n    0;\n\n  max-width: 34em;\n\n  color: var(--mg-muted);\n\n  font-size: 15px;\n\n  font-weight: 400;\n\n  line-height: 1.55;\n}\n\n\n\/* ==========================================================\n   ARROW\n   ========================================================== *\/\n\n.mg-expertise-card__arrow {\n  margin-top: auto;\n\n  padding-top: 28px;\n\n  display: flex;\n\n  justify-content: flex-end;\n\n  align-items: center;\n\n  color: var(--mg-accent);\n\n  font-size: 22px;\n\n  line-height: 1;\n\n  transition:\n    transform 200ms ease;\n}\n\n\n.mg-expertise-card:hover\n.mg-expertise-card__arrow {\n  transform:\n    translateX(5px);\n}\n\n\n\/* ==========================================================\n   TABLET \/ SMALL LAPTOP\n   ========================================================== *\/\n\n@media (max-width: 1024px) {\n\n  .mg-expertise {\n    padding-left: 20px;\n    padding-right: 20px;\n  }\n\n\n  .mg-expertise__grid {\n    grid-template-columns:\n      repeat(\n        2,\n        minmax(0, 1fr)\n      );\n  }\n\n\n  .mg-expertise-card {\n    min-height: 225px;\n  }\n\n\n  .mg-expertise-card__title {\n    font-size:\n      clamp(\n        22px,\n        2.6vw,\n        28px\n      );\n  }\n\n}\n\n\n\/* ==========================================================\n   TABLET PORTRAIT \/ MOBILE\n   ========================================================== *\/\n\n@media (max-width: 700px) {\n\n  .mg-expertise {\n    padding-left: 14px;\n    padding-right: 14px;\n  }\n\n\n  .mg-expertise__header {\n    max-width: 620px;\n\n    margin-bottom: 30px;\n  }\n\n\n  .mg-expertise__grid {\n    grid-template-columns: 1fr;\n\n    gap: 14px;\n  }\n\n\n  .mg-expertise-card {\n    min-height: 195px;\n\n    border-radius: 14px;\n  }\n\n\n  .mg-expertise-card__link {\n    padding:\n      24px\n      20px;\n  }\n\n\n  .mg-expertise-card__title {\n    font-size:\n      clamp(\n        22px,\n        6vw,\n        27px\n      );\n  }\n\n\n  .mg-expertise-card__description {\n    max-width: 42em;\n  }\n\n\n  .mg-expertise-card__arrow {\n    padding-top: 22px;\n  }\n\n}\n\n\n\/* ==========================================================\n   SMALL MOBILE\n   ========================================================== *\/\n\n@media (max-width: 420px) {\n\n  .mg-expertise {\n    padding-left: 10px;\n    padding-right: 10px;\n  }\n\n\n  .mg-expertise__header {\n    margin-bottom: 26px;\n  }\n\n\n  .mg-expertise__title {\n    font-size:\n      clamp(\n        31px,\n        9vw,\n        40px\n      );\n  }\n\n\n  .mg-expertise__intro {\n    max-width: 360px;\n\n    font-size: 16px;\n\n    line-height: 1.55;\n  }\n\n\n  .mg-expertise-card {\n    min-height: 185px;\n  }\n\n\n  .mg-expertise-card__link {\n    padding:\n      22px\n      18px;\n  }\n\n\n  .mg-expertise-card__category {\n    margin-bottom: 17px;\n\n    font-size: 10.5px;\n  }\n\n\n  .mg-expertise-card__description {\n    font-size: 14.5px;\n  }\n\n}\n\n\n\/* ==========================================================\n   TOUCH DEVICES\n   ========================================================== *\/\n\n@media (hover: none) {\n\n  .mg-expertise-card:hover {\n    transform: none;\n  }\n\n\n  .mg-expertise-card:hover::before {\n    width: 64px;\n  }\n\n\n  .mg-expertise-card:hover\n  .mg-expertise-card__arrow {\n    transform: none;\n  }\n\n}\n\n\n\/* ==========================================================\n   REDUCED MOTION\n   ========================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .mg-expertise-card,\n  .mg-expertise-card::before,\n  .mg-expertise-card__arrow {\n    transition: none;\n  }\n\n}\n<\/style>\n\n\n<section\n  class=\"mg-expertise\"\n  aria-labelledby=\"mg-expertise-title\"\n>\n\n\n  <!-- ======================================================\n       SECTION HEADER\n       ====================================================== -->\n\n  <div class=\"mg-expertise__header\">\n\n    <h2\n      class=\"mg-expertise__title\"\n      id=\"mg-expertise-title\"\n    >\n      \u042d\u043a\u0441\u043f\u0435\u0440\u0442\u0438\u0437\u0430\n    <\/h2>\n\n    <p class=\"mg-expertise__intro\">\n      \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u0435 \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u2014\n      \u043e\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0438 \u0440\u0430\u0441\u0447\u0451\u0442\u043e\u0432 \u0434\u043e \u0440\u0430\u0431\u043e\u0447\u0435\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0439\n      \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0438 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f.\n    <\/p>\n\n  <\/div>\n\n\n  <!-- ======================================================\n       CAPABILITY GRID\n       ====================================================== -->\n\n  <div class=\"mg-expertise__grid\">\n\n\n    <!-- ====================================================\n         ENERGY\n         ==================================================== -->\n\n    <article class=\"mg-expertise-card\">\n\n      <a\n        class=\"mg-expertise-card__link\"\n        href=\"#\"\n      >\n\n        <div class=\"mg-expertise-card__category\">\n          \u042d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u043a\u0430\n        <\/div>\n\n        <h3 class=\"mg-expertise-card__title\">\n          \u042d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0438 \u043f\u0440\u0438\u0432\u043e\u0434\u043d\u043e\u0435 \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435\n        <\/h3>\n\n        <p class=\"mg-expertise-card__description\">\n          \u0413\u0430\u0437\u043e\u0442\u0443\u0440\u0431\u0438\u043d\u043d\u044b\u0435 \u0430\u0433\u0440\u0435\u0433\u0430\u0442\u044b, \u0433\u0430\u0437\u043e\u043f\u043e\u0440\u0448\u043d\u0435\u0432\u044b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438,\n          \u0434\u0438\u0437\u0435\u043b\u044c-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435.\n        <\/p>\n\n        <div\n          class=\"mg-expertise-card__arrow\"\n          aria-hidden=\"true\"\n        >\n          \u2192\n        <\/div>\n\n      <\/a>\n\n    <\/article>\n\n\n    <!-- ====================================================\n         RENEWABLE ENERGY\n         ==================================================== -->\n\n    <article class=\"mg-expertise-card\">\n\n      <a\n        class=\"mg-expertise-card__link\"\n        href=\"#\"\n      >\n\n        <div class=\"mg-expertise-card__category\">\n          \u0412\u043e\u0437\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c\u0430\u044f \u044d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u043a\u0430\n        <\/div>\n\n        <h3 class=\"mg-expertise-card__title\">\n          \u0421\u043e\u043b\u043d\u0435\u0447\u043d\u044b\u0435 \u044d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b\n        <\/h3>\n\n        <p class=\"mg-expertise-card__description\">\n          \u041a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u043b\u043d\u0435\u0447\u043d\u044b\u0435 \u043f\u0430\u043d\u0435\u043b\u0438,\n          \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435\n          \u0441\u043e\u043b\u043d\u0435\u0447\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u0434 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0430\u0446\u0438\u0438.\n        <\/p>\n\n        <div\n          class=\"mg-expertise-card__arrow\"\n          aria-hidden=\"true\"\n        >\n          \u2192\n        <\/div>\n\n      <\/a>\n\n    <\/article>\n\n\n    <!-- ====================================================\n         METAL STRUCTURES\n         ==================================================== -->\n\n    <article class=\"mg-expertise-card\">\n\n      <a\n        class=\"mg-expertise-card__link\"\n        href=\"#\"\n      >\n\n        <div class=\"mg-expertise-card__category\">\n          \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438\n        <\/div>\n\n        <h3 class=\"mg-expertise-card__title\">\n          \u041c\u0435\u0442\u0430\u043b\u043b\u043e\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438\n        <\/h3>\n\n        <p class=\"mg-expertise-card__description\">\n          \u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0435\u0442\u0430\u043b\u043b\u043e\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u0433\u043e\n          \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c.\n        <\/p>\n\n        <div\n          class=\"mg-expertise-card__arrow\"\n          aria-hidden=\"true\"\n        >\n          \u2192\n        <\/div>\n\n      <\/a>\n\n    <\/article>\n\n\n    <!-- ====================================================\n         ENCLOSURES\n         ==================================================== -->\n\n    <article class=\"mg-expertise-card\">\n\n      <a\n        class=\"mg-expertise-card__link\"\n        href=\"#\"\n      >\n\n        <div class=\"mg-expertise-card__category\">\n          \u0417\u0430\u0449\u0438\u0442\u0430 \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u044f\n        <\/div>\n\n        <h3 class=\"mg-expertise-card__title\">\n          \u0417\u0430\u0449\u0438\u0442\u043d\u044b\u0435 \u0438 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u043a\u043e\u0436\u0443\u0445\u0438\n        <\/h3>\n\n        <p class=\"mg-expertise-card__description\">\n          \u0428\u0443\u043c\u043e\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u043e\u043d\u043d\u044b\u0435, \u0442\u0435\u043f\u043b\u043e\u0438\u0437\u043e\u043b\u044f\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0438 \u0437\u0430\u0449\u0438\u0442\u043d\u044b\u0435\n          \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u044f.\n        <\/p>\n\n        <div\n          class=\"mg-expertise-card__arrow\"\n          aria-hidden=\"true\"\n        >\n          \u2192\n        <\/div>\n\n      <\/a>\n\n    <\/article>\n\n\n    <!-- ====================================================\n         MACHINERY\n         ==================================================== -->\n\n    <article class=\"mg-expertise-card\">\n\n      <a\n        class=\"mg-expertise-card__link\"\n        href=\"#\"\n      >\n\n        <div class=\"mg-expertise-card__category\">\n          \u041c\u0430\u0448\u0438\u043d\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435\n        <\/div>\n\n        <h3 class=\"mg-expertise-card__title\">\n          \u041d\u0435\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435\n        <\/h3>\n\n        <p class=\"mg-expertise-card__description\">\n          \u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b, \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u044b\u0435 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u0438 \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435,\n          \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0434 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0443\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443.\n        <\/p>\n\n        <div\n          class=\"mg-expertise-card__arrow\"\n          aria-hidden=\"true\"\n        >\n          \u2192\n        <\/div>\n\n      <\/a>\n\n    <\/article>\n\n\n    <!-- ====================================================\n         ENGINEERING CALCULATIONS\n         ==================================================== -->\n\n    <article class=\"mg-expertise-card\">\n\n      <a\n        class=\"mg-expertise-card__link\"\n        href=\"#\"\n      >\n\n        <div class=\"mg-expertise-card__category\">\n          \u0418\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\n        <\/div>\n\n        <h3 class=\"mg-expertise-card__title\">\n          \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0447\u0451\u0442\u044b\n        <\/h3>\n\n        <p class=\"mg-expertise-card__description\">\n          \u0420\u0430\u0441\u0447\u0451\u0442\u044b \u043f\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439,\n          \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439.\n        <\/p>\n\n        <div\n          class=\"mg-expertise-card__arrow\"\n          aria-hidden=\"true\"\n        >\n          \u2192\n        <\/div>\n\n      <\/a>\n\n    <\/article>\n\n\n  <\/div>\n\n<\/section>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<!-- ==========================================================\n     MECHANOGURUS \u2014 PARTNERSHIP \/ PRODUCTION COOPERATION\n     Responsive: Desktop \/ Laptop \/ Tablet \/ Mobile\n     ========================================================== -->\n\n<div class=\"wp-landing-block mg-partnership\">\n\n<style>\n\n\/* ==========================================================\n   BASE\n   ========================================================== *\/\n\n.wp-landing-block.mg-partnership,\n.wp-landing-block.mg-partnership *,\n.wp-landing-block.mg-partnership *::before,\n.wp-landing-block.mg-partnership *::after {\n  box-sizing: border-box;\n}\n\n.wp-landing-block.mg-partnership {\n  --bg: #0d0f11;\n  --card: rgba(255,255,255,.025);\n  --card-hover: rgba(255,255,255,.04);\n\n  --text: #f4f4f4;\n  --muted: rgba(255,255,255,.64);\n  --line: rgba(255,255,255,.11);\n\n  --acc: #E1830F;\n  --acc2: #F2B839;\n\n  width: calc(100% - 64px);\n  max-width: 1360px;\n\n  margin: 72px auto;\n\n  padding: 0;\n\n  background: var(--bg);\n\n  border: 1px solid var(--line);\n  border-radius: 22px;\n\n  overflow: hidden;\n\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif;\n\n  -webkit-font-smoothing: antialiased;\n}\n\n\n\/* ==========================================================\n   HERO\n   ========================================================== *\/\n\n.mg-partnership__hero {\n  position: relative;\n\n  min-height: 430px;\n\n  display: flex;\n  align-items: stretch;\n\n  overflow: hidden;\n\n  border-bottom: 1px solid var(--line);\n\n  background: #0d0f11;\n}\n\n\n\/* ==========================================================\n   FULL-WIDTH IMAGE\n   ========================================================== *\/\n\n.mg-partnership__visual {\n  position: absolute;\n\n  inset: 0;\n\n  width: 100%;\n  height: 100%;\n\n  z-index: 1;\n\n  overflow: hidden;\n}\n\n.mg-partnership__image {\n  width: 100%;\n  height: 100%;\n\n  min-height: 430px;\n\n  display: block;\n\n  object-fit: cover;\n\n  \/*\n     Shift the photo slightly right so the\n     strongest visual remains on the right side.\n  *\/\n  object-position: 62% 50%;\n\n  filter:\n    saturate(.72)\n    contrast(1.03)\n    brightness(.82);\n}\n\n\n\/* ==========================================================\n   DESKTOP HORIZONTAL MASK\n\n   Left side:\n   image visibility visually approaches 0%\n\n   Right side:\n   image visibility reaches 100%\n   ========================================================== *\/\n\n.mg-partnership__visual::after {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 2;\n\n  background:\n    linear-gradient(\n      90deg,\n\n      rgba(13,15,17,1) 0%,\n      rgba(13,15,17,1) 18%,\n\n      rgba(13,15,17,.97) 28%,\n      rgba(13,15,17,.88) 38%,\n      rgba(13,15,17,.72) 48%,\n      rgba(13,15,17,.52) 58%,\n      rgba(13,15,17,.30) 69%,\n      rgba(13,15,17,.13) 80%,\n      rgba(13,15,17,.04) 90%,\n\n      rgba(13,15,17,0) 100%\n    );\n\n  pointer-events: none;\n}\n\n\n\/* subtle vertical darkening *\/\n\n.mg-partnership__visual::before {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 3;\n\n  background:\n    linear-gradient(\n      180deg,\n      rgba(0,0,0,.10) 0%,\n      rgba(0,0,0,0) 50%,\n      rgba(0,0,0,.20) 100%\n    );\n\n  pointer-events: none;\n}\n\n\n\/* ==========================================================\n   HERO CONTENT\n   ========================================================== *\/\n\n.mg-partnership__content {\n  position: relative;\n\n  z-index: 5;\n\n  width: 58%;\n  max-width: 760px;\n\n  padding:\n    clamp(44px, 4.4vw, 64px)\n    clamp(34px, 4vw, 58px);\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  min-width: 0;\n}\n\n\n\/* ==========================================================\n   TITLE\n   ========================================================== *\/\n\n.mg-partnership__title {\n  margin: 0;\n\n  max-width: 690px;\n\n  color: var(--text);\n\n  \/*\n     Approx 20% smaller than earlier version\n  *\/\n  font-size: clamp(1.8rem, 2.65vw, 3.05rem);\n\n  font-weight: 800;\n\n  line-height: 1.08;\n\n  letter-spacing: -.03em;\n}\n\n\n\/* ==========================================================\n   INTRO\n   ========================================================== *\/\n\n.mg-partnership__intro {\n  margin: 24px 0 0;\n\n  max-width: 650px;\n\n  color: rgba(255,255,255,.66);\n\n  font-size: clamp(.95rem, 1.03vw, 1.04rem);\n\n  line-height: 1.72;\n}\n\n\n\/* ==========================================================\n   MICRO TEXT\n   ========================================================== *\/\n\n.mg-partnership__micro {\n  margin-top: 28px;\n\n  display: flex;\n  flex-direction: column;\n\n  align-items: flex-start;\n\n  gap: 13px;\n}\n\n.mg-partnership__micro-line {\n  width: 34px;\n  height: 2px;\n\n  background: var(--acc);\n}\n\n.mg-partnership__micro-text {\n  margin: 0;\n\n  color: rgba(255,255,255,.52);\n\n  font-size: .69rem;\n\n  font-weight: 600;\n\n  letter-spacing: .19em;\n\n  line-height: 1.6;\n\n  text-transform: uppercase;\n}\n\n\n\/* ==========================================================\n   CARDS WRAPPER\n   ========================================================== *\/\n\n.mg-partnership__cards {\n  padding:\n    28px\n    clamp(26px, 3vw, 44px)\n    0;\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(2, minmax(0, 1fr));\n\n  gap: 20px;\n}\n\n\n\/* ==========================================================\n   CARD\n   ========================================================== *\/\n\n.mg-partnership__card {\n  min-width: 0;\n\n  padding:\n    clamp(22px, 2vw, 28px);\n\n  background: var(--card);\n\n  border: 1px solid var(--line);\n\n  border-radius: 18px;\n\n  transition:\n    background .22s ease,\n    border-color .22s ease,\n    transform .22s ease;\n}\n\n.mg-partnership__card:hover {\n  background: var(--card-hover);\n\n  border-color: rgba(225,131,15,.28);\n\n  transform: translateY(-2px);\n}\n\n\n\/* ==========================================================\n   CARD HEADER\n   ========================================================== *\/\n\n.mg-partnership__card-head {\n  display: flex;\n  align-items: center;\n\n  gap: 14px;\n\n  margin-bottom: 22px;\n}\n\n.mg-partnership__icon {\n  width: 52px;\n  height: 52px;\n\n  flex: 0 0 52px;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  border: 1px solid rgba(255,255,255,.15);\n\n  border-radius: 14px;\n\n  background: rgba(255,255,255,.01);\n}\n\n.mg-partnership__icon svg {\n  width: 25px;\n  height: 25px;\n\n  stroke: var(--acc);\n}\n\n.mg-partnership__card-title {\n  margin: 0;\n\n  color: var(--text);\n\n  font-size: clamp(1.08rem, 1.45vw, 1.3rem);\n\n  font-weight: 750;\n\n  line-height: 1.2;\n}\n\n.mg-partnership__card-sub {\n  margin: 4px 0 0;\n\n  color: var(--muted);\n\n  font-size: clamp(.84rem, .95vw, .95rem);\n\n  line-height: 1.45;\n}\n\n\n\/* ==========================================================\n   LIST\n   ========================================================== *\/\n\n.mg-partnership__list {\n  list-style: none;\n\n  margin: 0;\n  padding: 0;\n\n  display: flex;\n  flex-direction: column;\n\n  gap: 10px;\n}\n\n.mg-partnership__item {\n  position: relative;\n\n  padding-left: 27px;\n\n  color: rgba(255,255,255,.72);\n\n  font-size: clamp(.90rem, .95vw, .98rem);\n\n  line-height: 1.5;\n}\n\n.mg-partnership__item::before {\n  content: \"\u2713\";\n\n  position: absolute;\n\n  left: 0;\n  top: 0;\n\n  color: var(--acc2);\n\n  font-size: 1rem;\n\n  font-weight: 800;\n}\n\n\n\/* ==========================================================\n   CTA\n   ========================================================== *\/\n\n.mg-partnership__footer {\n  padding:\n    28px\n    28px\n    36px;\n\n  display: flex;\n\n  justify-content: center;\n}\n\n.mg-partnership__cta {\n  min-height: 52px;\n\n  padding: 0 32px;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  gap: 12px;\n\n  border-radius: 999px;\n\n  background:\n    linear-gradient(\n      135deg,\n      var(--acc),\n      var(--acc2)\n    );\n\n  color: #101010;\n\n  font-size: .96rem;\n\n  font-weight: 750;\n\n  text-decoration: none;\n\n  box-shadow:\n    0 12px 30px rgba(225,131,15,.18);\n\n  transition:\n    transform .22s ease,\n    box-shadow .22s ease;\n}\n\n.mg-partnership__cta:hover {\n  color: #101010;\n\n  text-decoration: none;\n\n  transform: translateY(-2px);\n\n  box-shadow:\n    0 18px 38px rgba(225,131,15,.28);\n}\n\n.mg-partnership__cta-arrow {\n  font-size: 1.2rem;\n}\n\n\n\/* ==========================================================\n   LARGE DESKTOP\n   ========================================================== *\/\n\n@media (min-width: 1201px) {\n\n  .mg-partnership__hero {\n    min-height: 430px;\n  }\n\n  .mg-partnership__content {\n    width: 57%;\n  }\n\n}\n\n\n\/* ==========================================================\n   MEDIUM DESKTOP\n   ========================================================== *\/\n\n@media (max-width: 1400px) {\n\n  .wp-landing-block.mg-partnership {\n    width: calc(100% - 56px);\n    max-width: 1240px;\n  }\n\n}\n\n\n\/* ==========================================================\n   LAPTOP\n   ========================================================== *\/\n\n@media (min-width: 921px) and (max-width: 1200px) {\n\n  .wp-landing-block.mg-partnership {\n    width: calc(100% - 44px);\n  }\n\n  .mg-partnership__hero {\n    min-height: 410px;\n  }\n\n  .mg-partnership__content {\n    width: 62%;\n\n    padding:\n      42px\n      38px;\n  }\n\n  .mg-partnership__title {\n    font-size: clamp(1.8rem, 3.2vw, 2.8rem);\n  }\n\n  .mg-partnership__visual::after {\n    background:\n      linear-gradient(\n        90deg,\n\n        rgba(13,15,17,1) 0%,\n        rgba(13,15,17,.98) 24%,\n        rgba(13,15,17,.90) 40%,\n        rgba(13,15,17,.64) 56%,\n        rgba(13,15,17,.28) 75%,\n        rgba(13,15,17,0) 100%\n      );\n  }\n\n}\n\n\n\/* ==========================================================\n   TABLET\n   TEXT AND IMAGE SEPARATE\n   ========================================================== *\/\n\n@media (max-width: 920px) {\n\n  .wp-landing-block.mg-partnership {\n    width: calc(100% - 32px);\n\n    margin: 56px auto;\n  }\n\n  .mg-partnership__hero {\n    display: flex;\n\n    flex-direction: column;\n\n    min-height: 0;\n  }\n\n  .mg-partnership__content {\n    position: relative;\n\n    order: 1;\n\n    width: 100%;\n    max-width: none;\n\n    padding:\n      40px\n      30px\n      34px;\n\n    background: #0d0f11;\n  }\n\n  .mg-partnership__visual {\n    position: relative;\n\n    order: 2;\n\n    inset: auto;\n\n    width: 100%;\n    height: 360px;\n\n    z-index: 1;\n  }\n\n  .mg-partnership__image {\n    min-height: 0;\n\n    width: 100%;\n    height: 100%;\n\n    object-position: 50% 50%;\n  }\n\n  \/*\n     Remove desktop horizontal masking\n  *\/\n\n  .mg-partnership__visual::after {\n    background:\n      linear-gradient(\n        180deg,\n\n        rgba(13,15,17,.15) 0%,\n        rgba(13,15,17,0) 24%,\n        rgba(13,15,17,0) 74%,\n        rgba(13,15,17,.22) 100%\n      );\n  }\n\n  .mg-partnership__visual::before {\n    display: none;\n  }\n\n  .mg-partnership__cards {\n    grid-template-columns: 1fr;\n  }\n\n}\n\n\n\/* ==========================================================\n   MOBILE\n   ========================================================== *\/\n\n@media (max-width: 600px) {\n\n  .wp-landing-block.mg-partnership {\n    width: calc(100% - 24px);\n\n    margin: 44px auto;\n\n    border-radius: 18px;\n  }\n\n  .mg-partnership__content {\n    padding:\n      30px\n      20px\n      28px;\n  }\n\n  .mg-partnership__title {\n    font-size: clamp(1.75rem, 8.4vw, 2.2rem);\n\n    line-height: 1.1;\n  }\n\n  .mg-partnership__intro {\n    margin-top: 18px;\n\n    font-size: .96rem;\n\n    line-height: 1.63;\n  }\n\n  .mg-partnership__micro {\n    margin-top: 22px;\n  }\n\n  .mg-partnership__micro-text {\n    font-size: .63rem;\n\n    letter-spacing: .13em;\n  }\n\n  .mg-partnership__visual {\n    height: 300px;\n  }\n\n  .mg-partnership__cards {\n    padding:\n      16px\n      14px\n      0;\n\n    gap: 14px;\n  }\n\n  .mg-partnership__card {\n    padding:\n      20px\n      17px;\n  }\n\n  .mg-partnership__card-head {\n    gap: 12px;\n\n    margin-bottom: 20px;\n  }\n\n  .mg-partnership__icon {\n    width: 46px;\n    height: 46px;\n\n    flex-basis: 46px;\n  }\n\n  .mg-partnership__item {\n    padding-left: 24px;\n\n    font-size: .92rem;\n  }\n\n  .mg-partnership__footer {\n    padding:\n      22px\n      16px\n      26px;\n  }\n\n  .mg-partnership__cta {\n    width: 100%;\n\n    min-height: 52px;\n\n    padding: 0 18px;\n  }\n\n}\n\n\n\/* ==========================================================\n   SMALL MOBILE\n   ========================================================== *\/\n\n@media (max-width: 390px) {\n\n  .mg-partnership__content {\n    padding-left: 18px;\n    padding-right: 18px;\n  }\n\n  .mg-partnership__title {\n    font-size: 1.76rem;\n  }\n\n  .mg-partnership__visual {\n    height: 270px;\n  }\n\n}\n\n\n\/* ==========================================================\n   ACCESSIBILITY\n   ========================================================== *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .mg-partnership__card,\n  .mg-partnership__cta {\n    transition: none;\n  }\n\n}\n\n<\/style>\n\n\n<!-- ==========================================================\n     HERO\n     ========================================================== -->\n\n<div class=\"mg-partnership__hero\">\n\n\n  <!-- FULL-WIDTH IMAGE -->\n\n  <div class=\"mg-partnership__visual\">\n\n    <img\n      class=\"mg-partnership__image\"\n      src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2026\/09\/Business_handshake.avif\"\n      alt=\"\u0421\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u0430\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u043e\"\n      loading=\"lazy\"\n      decoding=\"async\"\n    >\n\n  <\/div>\n\n\n  <!-- TEXT OVER IMAGE ON DESKTOP -->\n\n  <div class=\"mg-partnership__content\">\n\n    <h2 class=\"mg-partnership__title\">\n      \u041e\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0439 \u0438\u0434\u0435\u0438<br>\n      \u0434\u043e \u0441\u0435\u0440\u0438\u0439\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430\n    <\/h2>\n\n    <p class=\"mg-partnership__intro\">\n      Mechanogurus \u043e\u0442\u043a\u0440\u044b\u0442 \u043a \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f\u043c\u0438.\n      \u041c\u044b \u0431\u0435\u0440\u0451\u043c \u043d\u0430 \u0441\u0435\u0431\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0438\u0437\u0434\u0435\u043b\u0438\u044f, \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0443\u044e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0443 \u0438 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u0435\n      \u043e\u0441\u0432\u043e\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430, \u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u0442\u043d\u0451\u0440 \u2014 \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u0435, \u0441\u0431\u043e\u0440\u043a\u0443\n      \u0438 \u0441\u0435\u0440\u0438\u0439\u043d\u044b\u0439 \u0432\u044b\u043f\u0443\u0441\u043a.\n    <\/p>\n\n\n    <div class=\"mg-partnership__micro\">\n\n      <span class=\"mg-partnership__micro-line\"><\/span>\n\n      <p class=\"mg-partnership__micro-text\">\n        \u0412\u043c\u0435\u0441\u0442\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n\n<!-- ==========================================================\n     CARDS\n     ========================================================== -->\n\n<div class=\"mg-partnership__cards\">\n\n\n  <!-- MECHANOGURUS -->\n\n  <article class=\"mg-partnership__card\">\n\n    <div class=\"mg-partnership__card-head\">\n\n      <div class=\"mg-partnership__icon\">\n\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke-width=\"1.8\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n\n          <circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle>\n\n          <path d=\"M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21a2 2 0 1 1-4 0v-.09A1.7 1.7 0 0 0 8.6 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3a2 2 0 1 1 0-4h.09A1.7 1.7 0 0 0 4.6 8.6a1.7 1.7 0 0 0-.34-1.88L4.2 6.66a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3a2 2 0 1 1 4 0v.09A1.7 1.7 0 0 0 15.4 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.14.36.35.69.6 1 .3.33.67.58 1.1.7h.09a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.7.3z\"><\/path>\n\n        <\/svg>\n\n      <\/div>\n\n      <div>\n\n        <h3 class=\"mg-partnership__card-title\">\n          Mechanogurus\n        <\/h3>\n\n        <p class=\"mg-partnership__card-sub\">\n          \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <ul class=\"mg-partnership__list\">\n\n      <li class=\"mg-partnership__item\">\n        \u041a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u044f\n      <\/li>\n\n      <li class=\"mg-partnership__item\">\n        \u0410\u043d\u0430\u043b\u0438\u0437 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438 \u0440\u044b\u043d\u043e\u0447\u043d\u044b\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439\n      <\/li>\n\n      <li class=\"mg-partnership__item\">\n        \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u0430\u044f \u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f\n      <\/li>\n\n      <li class=\"mg-partnership__item\">\n        \u041f\u043e\u0434\u0431\u043e\u0440 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0443\u044e\u0449\u0438\u0445\n      <\/li>\n\n      <li class=\"mg-partnership__item\">\n        \u0410\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u044f \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u043f\u043e\u0434 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u0438 \u0440\u044b\u043d\u043a\u0430\n      <\/li>\n\n      <li class=\"mg-partnership__item\">\n        \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0435 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u043e\u0441\u0432\u043e\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430\n      <\/li>\n\n    <\/ul>\n\n  <\/article>\n\n\n  <!-- PRODUCTION PARTNER -->\n\n  <article class=\"mg-partnership__card\">\n\n    <div class=\"mg-partnership__card-head\">\n\n      <div class=\"mg-partnership__icon\">\n\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke-width=\"1.8\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n\n          <path d=\"M3 21V10l6 3V9l6 3V5h4v16z\"><\/path>\n\n          <path d=\"M7 17h2\"><\/path>\n          <path d=\"M12 17h2\"><\/path>\n          <path d=\"M17 17h2\"><\/path>\n\n        <\/svg>\n\n      <\/div>\n\n      <div>\n\n        <h3 class=\"mg-partnership__card-title\">\n          \u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u0442\u043d\u0451\u0440\n        <\/h3>\n\n        <p class=\"mg-partnership__card-sub\">\n          \u0418\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0438 \u0441\u0435\u0440\u0438\u0439\u043d\u044b\u0439 \u0432\u044b\u043f\u0443\u0441\u043a\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <ul class=\"mg-partnership__list\">\n\n      <li class=\"mg-partnership__item\">\n        \u0418\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0435\u0442\u0430\u043b\u0435\u0439 \u0438 \u0443\u0437\u043b\u043e\u0432\n      <\/li>\n\n      <li class=\"mg-partnership__item\">\n        \u0417\u0430\u043a\u0443\u043f\u043a\u0430 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0443\u044e\u0449\u0438\u0445\n      <\/li>\n\n      <li class=\"mg-partnership__item\">\n        \u0421\u0431\u043e\u0440\u043a\u0430 \u0438 \u0438\u0441\u043f\u044b\u0442\u0430\u043d\u0438\u044f\n      <\/li>\n\n      <li class=\"mg-partnership__item\">\n        \u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u0441\u0442\u0438\u043a\u0430\n      <\/li>\n\n      <li class=\"mg-partnership__item\">\n        \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0435\u0431\u0435\u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c\u044e\n      <\/li>\n\n      <li class=\"mg-partnership__item\">\n        \u0421\u0435\u0440\u0438\u0439\u043d\u044b\u0439 \u0432\u044b\u043f\u0443\u0441\u043a\n      <\/li>\n\n    <\/ul>\n\n  <\/article>\n\n<\/div>\n\n\n<!-- ==========================================================\n     CTA\n     ========================================================== -->\n\n<div class=\"mg-partnership__footer\">\n\n  <a\n    href=\"mailto:info@mechanogurus.ru?subject=\u0421\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u044b\u0439%20\u043f\u0440\u043e\u0435\u043a\u0442%20\u0441%20Mechanogurus\"\n    class=\"mg-partnership__cta\"\n  >\n\n    <span>\n      \u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\n    <\/span>\n\n    <span class=\"mg-partnership__cta-arrow\">\n      \u2192\n    <\/span>\n\n  <\/a>\n\n<\/div>\n\n<\/div>\n\n\n\n<script type=\"module\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/model-viewer\/3.5.0\/model-viewer.min.js\"><\/script>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&#038;family=Rajdhani:wght@400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* \u2705 Scoped reset \u2014 does NOT leak into WordPress *\/\n.mg-ep, .mg-ep *, .mg-ep *::before, .mg-ep *::after {\n  box-sizing: border-box;\n}\n\n\/* \u2705 NO body\/html\/background \u2014 inherits WP theme *\/\n.mg-ep {\n  --gold:          #F2B839;\n  --orange:        #E1830F;\n  --dark-bg:       #0a0a0a;\n  --card-bg:       rgba(18,18,18,0.95);\n  --glass-border:  rgba(242,184,57,0.25);\n  --text-primary:  #ffffff;\n  --text-secondary:rgba(255,255,255,0.6);\n\n  font-family: 'Rajdhani', sans-serif;\n\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-ep .projects-section {\n  background: transparent;\n  padding:    60px 0;\n  position:   relative;\n  overflow:   hidden;\n  width:      calc(100% + 50px);\n  margin-left: -25px;\n}\n\n.mg-ep .projects-section::before {\n  content:  '';\n  position: absolute;\n  inset:    0;\n  background: transparent;\n  pointer-events: none;\n}\n\n\/* \u2500\u2500 Header \u2500\u2500 *\/\n.mg-ep .section-header {\n  text-align:    center;\n  margin-bottom: 40px;\n  position:      relative;\n  z-index:       2;\n  padding:       0 25px;\n}\n\n.mg-ep .section-tag {\n  font-size:      0.7rem;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  color:          var(--orange);\n  display:        block;\n  margin-bottom:  10px;\n}\n\n.mg-ep .section-title {\n  font-family:  'Bebas Neue', sans-serif;\n  font-size:    clamp(1.8rem, 4vw, 2.8rem);\n  letter-spacing: 4px;\n  background:   linear-gradient(135deg, var(--gold) 0%, var(--orange) 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  line-height:  1.2;\n}\n\n\/* \u2500\u2500 Carousel wrapper \u2500\u2500 *\/\n.mg-ep .carousel-wrapper {\n  position:  relative;\n  z-index:   2;\n  overflow:  hidden;\n  padding:   20px 0;\n  width:     100%;\n  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);\n  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);\n}\n\n.mg-ep .carousel-track {\n  display:   flex;\n  gap:       24px;\n  width:     fit-content;\n  padding:   0 25px;\n  animation: mg-ep-scroll 30s linear infinite;\n}\n\n.mg-ep .carousel-track:hover {\n  animation-play-state: paused;\n}\n\n@keyframes mg-ep-scroll {\n  0%   { transform: translateX(0); }\n  100% { transform: translateX(-50%); }\n}\n\n\/* \u2500\u2500 Project Card \u2500\u2500 *\/\n.mg-ep .project-card {\n  flex:          0 0 320px;\n  background:    var(--card-bg);\n  border:        1px solid var(--glass-border);\n  border-radius: 16px;\n  overflow:      hidden;\n  transition:    all 0.4s cubic-bezier(0.4,0,0.2,1);\n  position:      relative;\n}\n\n.mg-ep .project-card:hover {\n  transform:    translateY(-8px) scale(1.02);\n  border-color: rgba(242,184,57,0.5);\n  box-shadow:\n    0 20px 40px rgba(0,0,0,0.4),\n    0 0 30px rgba(242,184,57,0.15);\n}\n\n\/* \u2500\u2500 Viewer \u2500\u2500 *\/\n.mg-ep .viewer-container {\n  height:     200px;\n  position:   relative;\n  background: linear-gradient(135deg, #141414 0%, #0a0a0a 100%);\n  overflow:   hidden;\n}\n\n.mg-ep .viewer-container::after {\n  content:  '';\n  position: absolute;\n  bottom: 0; left: 0; right: 0;\n  height:   40px;\n  background: linear-gradient(to top, rgba(18,18,18,0.95), transparent);\n  pointer-events: none;\n  z-index:  1;\n}\n\n.mg-ep model-viewer {\n  width:  100%;\n  height: 100%;\n  --poster-color: transparent;\n  \/* Sharp edge rendering \u2014 bright directional light + model contrast *\/\n  filter: drop-shadow(0 0 6px rgba(242,184,57,0.18)) contrast(1.08);\n}\n\n.mg-ep model-viewer::part(default-progress-bar) {\n  background: var(--gold);\n  height:     2px;\n}\n\n\/* \u2500\u2500 Rotate hint \u2500\u2500 *\/\n.mg-ep .rotate-hint {\n  position:   absolute;\n  bottom: 12px; right: 12px;\n  width: 32px; height: 32px;\n  display:    flex;\n  align-items: center; justify-content: center;\n  background: rgba(0,0,0,0.6);\n  border-radius: 50%;\n  z-index:    2;\n  opacity:    0.6;\n  transition: opacity 0.3s;\n}\n\n.mg-ep .project-card:hover .rotate-hint { opacity: 0; }\n\n.mg-ep .rotate-hint svg {\n  width: 16px; height: 16px;\n  color: var(--text-secondary);\n  animation: mg-ep-spin 4s linear infinite;\n}\n\n@keyframes mg-ep-spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n\n\/* \u2500\u2500 Project info \u2500\u2500 *\/\n.mg-ep .project-info { padding: 18px 20px; }\n\n.mg-ep .project-category {\n  font-size:      0.65rem;\n  letter-spacing: 2px;\n  text-transform: uppercase;\n  color:          var(--orange);\n  margin-bottom:  6px;\n  display:        block;\n}\n\n.mg-ep .project-title {\n  font-family:    'Bebas Neue', sans-serif;\n  font-size:      1.4rem;\n  letter-spacing: 2px;\n  color:          var(--text-primary);\n  margin-bottom:  6px;\n  display:        block;\n  line-height:    1.3;\n}\n\n.mg-ep .project-desc {\n  font-size:   0.8rem;\n  line-height: 1.5;\n  color:       var(--text-secondary);\n  display:     -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow:    hidden;\n}\n\n\/* \u2500\u2500 CTA \u2500\u2500 *\/\n.mg-ep .cta-container {\n  text-align:  center;\n  margin-top:  40px;\n  position:    relative;\n  z-index:     2;\n  padding:     0 25px;\n}\n\n.mg-ep .view-all-btn {\n  display:         inline-flex;\n  align-items:     center;\n  gap:             12px;\n  font-family:     'Rajdhani', sans-serif;\n  font-size:       0.9rem;\n  font-weight:     600;\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 32px;\n  border-radius:   4px;\n  transition:      all 0.3s ease;\n  box-shadow:      0 6px 25px rgba(242,184,57,0.3);\n  white-space:     nowrap;\n}\n\n.mg-ep .view-all-btn:hover {\n  transform:  translateY(-3px);\n  box-shadow: 0 12px 35px rgba(242,184,57,0.45);\n  color:      var(--dark-bg);\n  text-decoration: none;\n}\n\n.mg-ep .view-all-btn svg {\n  width: 18px; height: 18px;\n  transition: transform 0.3s ease;\n  flex-shrink: 0;\n}\n\n.mg-ep .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\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\u2550 *\/\n\n@media (max-width: 1024px) {\n  .mg-ep .carousel-track  { gap: 20px; animation-duration: 26s; }\n  .mg-ep .project-card    { flex: 0 0 300px; }\n}\n\n@media (max-width: 768px) {\n  .mg-ep {\n    padding-left:  16px;\n    padding-right: 16px;\n  }\n  .mg-ep .projects-section {\n    width:       calc(100% + 32px);\n    margin-left: -16px;\n  }\n  .mg-ep .projects-section { padding: 40px 0; }\n  .mg-ep .section-header   { margin-bottom: 28px; padding: 0 16px; }\n  .mg-ep .carousel-wrapper {\n    mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent) !important;\n    -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent) !important;\n  }\n  .mg-ep .carousel-track   { gap: 16px; padding: 0 16px; animation-duration: 22s; }\n  .mg-ep .project-card     { flex: 0 0 260px; }\n  .mg-ep .viewer-container { height: 160px; }\n  .mg-ep .project-info     { padding: 14px 16px; }\n  .mg-ep .project-title    { font-size: 1.3rem; }\n  .mg-ep .project-desc     { font-size: 0.75rem; }\n  .mg-ep .cta-container    { margin-top: 28px; padding: 0 16px; }\n  .mg-ep .view-all-btn     { font-size: 0.85rem; padding: 12px 24px; letter-spacing: 2px; }\n}\n\n@media (max-width: 480px) {\n  .mg-ep {\n    padding-left:  12px;\n    padding-right: 12px;\n  }\n  .mg-ep .projects-section {\n    width:       calc(100% + 24px);\n    margin-left: -12px;\n  }\n  .mg-ep .projects-section { padding: 30px 0; }\n  .mg-ep .section-header   { padding: 0 12px; }\n  .mg-ep .section-tag      { font-size: 0.6rem; letter-spacing: 2px; }\n  .mg-ep .carousel-wrapper {\n    mask-image: none !important;\n    -webkit-mask-image: none !important;\n  }\n  .mg-ep .carousel-track   { gap: 12px; padding: 0 12px; animation-duration: 18s; }\n  .mg-ep .project-card     { flex: 0 0 240px; }\n  .mg-ep .viewer-container { height: 150px; }\n  .mg-ep .project-category { font-size: 0.6rem; }\n  .mg-ep .project-title    { font-size: 1.2rem; letter-spacing: 1.5px; }\n  .mg-ep .project-desc     { font-size: 0.7rem; }\n  .mg-ep .cta-container    { padding: 0 12px; margin-top: 24px; }\n  .mg-ep .view-all-btn     { font-size: 0.8rem; padding: 11px 20px; letter-spacing: 1.5px; }\n}\n\n@media (max-width: 380px) {\n  .mg-ep .carousel-track   { padding: 0 8px; gap: 10px; }\n  .mg-ep .project-card     { flex: 0 0 220px; }\n  .mg-ep .viewer-container { height: 140px; }\n  .mg-ep .cta-container    { padding: 0 8px; }\n}\n\n\/* \u2705 Disable hover lift on touch \u2014 prevents stuck states *\/\n@media (hover: none) {\n  .mg-ep .project-card:hover { transform: none; border-color: var(--glass-border); box-shadow: none; }\n  .mg-ep .carousel-track:hover { animation-play-state: running; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mg-ep .carousel-track { animation: none; }\n}\n<\/style>\n\n<div class=\"mg-ep\">\n  <section class=\"projects-section\">\n\n    <div class=\"section-header\">\n      <span class=\"section-tag\">\u041d\u0430\u0448\u0435 \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e<\/span>\n      <h2 class=\"section-title\">\u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b<\/h2>\n    <\/div>\n\n    <div class=\"carousel-wrapper\">\n      <div class=\"carousel-track\">\n\n        <!-- Project 1 \u2014 Economizer -->\n        <article class=\"project-card\">\n          <div class=\"viewer-container\">\n            <model-viewer src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/06\/Economizer2.glb\" alt=\"\u042d\u043a\u043e\u043d\u043e\u043c\u0430\u0439\u0437\u0435\u0440\"\n              camera-controls disable-zoom auto-rotate rotation-per-second=\"25deg\"\n              shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\"\n              environment-image=\"neutral\"\n              camera-orbit=\"45deg 70deg 105%\"\n              interaction-prompt=\"none\" loading=\"eager\"><\/model-viewer>\n            <div class=\"rotate-hint\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"\/><\/svg><\/div>\n          <\/div>\n          <div class=\"project-info\">\n            <span class=\"project-category\">\u042d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u043a\u0430<\/span>\n            <h3 class=\"project-title\">\u041f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u044b\u0439 \u044d\u043a\u043e\u043d\u043e\u043c\u0430\u0439\u0437\u0435\u0440<\/h3>\n            <p class=\"project-desc\">\u041e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u0443\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u043f\u043b\u0430 \u0434\u044b\u043c\u043e\u0432\u044b\u0445 \u0433\u0430\u0437\u043e\u0432 \u043a\u043e\u0442\u043b\u043e\u0432, \u043f\u0435\u0447\u0435\u0439, \u0441\u0443\u0448\u0438\u043b\u044c\u043d\u044b\u0445 \u043a\u0430\u043c\u0435\u0440. \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445 \u0442\u0435\u043f\u043b\u043e\u0441\u043d\u0430\u0431\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u0439 \u0442\u0435\u043f\u043b\u043e\u044d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u043a\u0435.<\/p>\n          <\/div>\n        <\/article>\n\n        <!-- Project 2 \u2014 Reactor -->\n        <article class=\"project-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\"\n              camera-controls disable-zoom auto-rotate rotation-per-second=\"25deg\"\n              shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\"\n              environment-image=\"neutral\"\n              camera-orbit=\"45deg 70deg 105%\"\n              interaction-prompt=\"none\" loading=\"lazy\"><\/model-viewer>\n            <div class=\"rotate-hint\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"\/><\/svg><\/div>\n          <\/div>\n          <div class=\"project-info\">\n            <span class=\"project-category\">\u042d\u043a\u043e\u043b\u043e\u0433\u0438\u044f<\/span>\n            <h3 class=\"project-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<\/h3>\n            <p class=\"project-desc\">\u0426\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0442\u0435\u0440\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0441\u0430\u0434\u043a\u043e\u0432 \u0441\u0442\u043e\u0447\u043d\u044b\u0445 \u0432\u043e\u0434. \u041e\u043a\u0438\u0441\u043b\u044f\u0435\u0442 \u0432\u043b\u0430\u0436\u043d\u044b\u0435 \u043e\u0441\u0430\u0434\u043a\u0438 \u043a\u0438\u0441\u043b\u043e\u0440\u043e\u0434\u043e\u043c \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        <!-- Project 3 \u2014 Reservoir -->\n        <article class=\"project-card\">\n          <div class=\"viewer-container\">\n            <model-viewer src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/06\/Reservoir6.glb\" alt=\"\u0420\u0435\u0437\u0435\u0440\u0432\u0443\u0430\u0440\"\n              camera-controls disable-zoom auto-rotate rotation-per-second=\"25deg\"\n              shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\"\n              environment-image=\"neutral\"\n              camera-orbit=\"45deg 70deg 105%\"\n              interaction-prompt=\"none\" loading=\"lazy\"><\/model-viewer>\n            <div class=\"rotate-hint\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"\/><\/svg><\/div>\n          <\/div>\n          <div class=\"project-info\">\n            <span class=\"project-category\">\u041d\u0435\u0444\u0442\u0435\u0433\u0430\u0437<\/span>\n            <h3 class=\"project-title\">\u0420\u0412\u0421-200\u043c\u00b3<\/h3>\n            <p class=\"project-desc\">\u0420\u0435\u0437\u0435\u0440\u0432\u0443\u0430\u0440 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u044a\u0451\u043c\u043e\u043c 200 \u043c\u00b3 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043d\u0435\u0444\u0442\u0435\u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 \u043d\u0430 \u043d\u0435\u0444\u0442\u0435\u0431\u0430\u0437\u0430\u0445, \u0410\u0417\u0421 \u0438 \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445.<\/p>\n          <\/div>\n        <\/article>\n\n        <!-- Project 4 \u2014 Oil Tank -->\n        <article class=\"project-card\">\n          <div class=\"viewer-container\">\n            <model-viewer src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/06\/OilTank11.glb\" alt=\"\u041c\u0430\u0441\u043b\u043e\u0431\u0430\u043a\"\n              camera-controls disable-zoom auto-rotate rotation-per-second=\"25deg\"\n              shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\"\n              environment-image=\"neutral\"\n              camera-orbit=\"45deg 70deg 105%\"\n              interaction-prompt=\"none\" loading=\"lazy\"><\/model-viewer>\n            <div class=\"rotate-hint\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"\/><\/svg><\/div>\n          <\/div>\n          <div class=\"project-info\">\n            <span class=\"project-category\">\u041e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435<\/span>\n            <h3 class=\"project-title\">\u041c\u0430\u0441\u043b\u043e\u0431\u0430\u043a 1000\u043b<\/h3>\n            <p class=\"project-desc\">\u0401\u043c\u043a\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0441\u0438\u0441\u0442\u0435\u043c \u0441\u043c\u0430\u0437\u043a\u0438 \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0435\u0439.<\/p>\n          <\/div>\n        <\/article>\n\n        <!-- Project 5 \u2014 Recuperator -->\n        <article class=\"project-card\">\n          <div class=\"viewer-container\">\n            <model-viewer src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/06\/Recuperator5.glb\" alt=\"\u0420\u0435\u043a\u0443\u043f\u0435\u0440\u0430\u0442\u043e\u0440\"\n              camera-controls disable-zoom auto-rotate rotation-per-second=\"25deg\"\n              shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\"\n              environment-image=\"neutral\"\n              camera-orbit=\"45deg 70deg 105%\"\n              interaction-prompt=\"none\" loading=\"lazy\"><\/model-viewer>\n            <div class=\"rotate-hint\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"\/><\/svg><\/div>\n          <\/div>\n          <div class=\"project-info\">\n            <span class=\"project-category\">\u042d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u043a\u0430<\/span>\n            <h3 class=\"project-title\">\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0440\u0435\u043a\u0443\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0442\u0435\u043f\u043b\u0430<\/h3>\n            <p class=\"project-desc\">\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u043f\u043b\u043e\u0432\u043e\u0439 \u044d\u043d\u0435\u0440\u0433\u0438\u0438 \u043e\u0442\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0434\u044b\u043c\u043e\u0432\u044b\u0445 \u0433\u0430\u0437\u043e\u0432, \u0432\u0435\u043d\u0442\u0438\u043b\u044f\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0431\u0440\u043e\u0441\u043e\u0432.<\/p>\n          <\/div>\n        <\/article>\n\n        <!-- \u2550\u2550\u2550 CLONES for seamless loop \u2550\u2550\u2550 -->\n\n        <article class=\"project-card\">\n          <div class=\"viewer-container\">\n            <model-viewer src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/06\/Economizer2.glb\" alt=\"\u042d\u043a\u043e\u043d\u043e\u043c\u0430\u0439\u0437\u0435\u0440\"\n              camera-controls disable-zoom auto-rotate rotation-per-second=\"25deg\"\n              shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\"\n              environment-image=\"neutral\"\n              camera-orbit=\"45deg 70deg 105%\"\n              interaction-prompt=\"none\" loading=\"lazy\"><\/model-viewer>\n            <div class=\"rotate-hint\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"\/><\/svg><\/div>\n          <\/div>\n          <div class=\"project-info\">\n            <span class=\"project-category\">\u042d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u043a\u0430<\/span>\n            <h3 class=\"project-title\">\u041f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u044b\u0439 \u044d\u043a\u043e\u043d\u043e\u043c\u0430\u0439\u0437\u0435\u0440<\/h3>\n            <p class=\"project-desc\">\u041e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u0443\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0435\u043f\u043b\u0430 \u0434\u044b\u043c\u043e\u0432\u044b\u0445 \u0433\u0430\u0437\u043e\u0432 \u043a\u043e\u0442\u043b\u043e\u0432, \u043f\u0435\u0447\u0435\u0439, \u0441\u0443\u0448\u0438\u043b\u044c\u043d\u044b\u0445 \u043a\u0430\u043c\u0435\u0440. \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445 \u0442\u0435\u043f\u043b\u043e\u0441\u043d\u0430\u0431\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u0439 \u0442\u0435\u043f\u043b\u043e\u044d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u043a\u0435.<\/p>\n          <\/div>\n        <\/article>\n\n        <article class=\"project-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\"\n              camera-controls disable-zoom auto-rotate rotation-per-second=\"25deg\"\n              shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\"\n              environment-image=\"neutral\"\n              camera-orbit=\"45deg 70deg 105%\"\n              interaction-prompt=\"none\" loading=\"lazy\"><\/model-viewer>\n            <div class=\"rotate-hint\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"\/><\/svg><\/div>\n          <\/div>\n          <div class=\"project-info\">\n            <span class=\"project-category\">\u042d\u043a\u043e\u043b\u043e\u0433\u0438\u044f<\/span>\n            <h3 class=\"project-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<\/h3>\n            <p class=\"project-desc\">\u0426\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0442\u0435\u0440\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0441\u0430\u0434\u043a\u043e\u0432 \u0441\u0442\u043e\u0447\u043d\u044b\u0445 \u0432\u043e\u0434. \u041e\u043a\u0438\u0441\u043b\u044f\u0435\u0442 \u0432\u043b\u0430\u0436\u043d\u044b\u0435 \u043e\u0441\u0430\u0434\u043a\u0438 \u043a\u0438\u0441\u043b\u043e\u0440\u043e\u0434\u043e\u043c \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        <article class=\"project-card\">\n          <div class=\"viewer-container\">\n            <model-viewer src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/06\/Reservoir6.glb\" alt=\"\u0420\u0435\u0437\u0435\u0440\u0432\u0443\u0430\u0440\"\n              camera-controls disable-zoom auto-rotate rotation-per-second=\"25deg\"\n              shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\"\n              environment-image=\"neutral\"\n              camera-orbit=\"45deg 70deg 105%\"\n              interaction-prompt=\"none\" loading=\"lazy\"><\/model-viewer>\n            <div class=\"rotate-hint\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"\/><\/svg><\/div>\n          <\/div>\n          <div class=\"project-info\">\n            <span class=\"project-category\">\u041d\u0435\u0444\u0442\u0435\u0433\u0430\u0437<\/span>\n            <h3 class=\"project-title\">\u0420\u0412\u0421-200\u043c\u00b3<\/h3>\n            <p class=\"project-desc\">\u0420\u0435\u0437\u0435\u0440\u0432\u0443\u0430\u0440 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u044a\u0451\u043c\u043e\u043c 200 \u043c\u00b3 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043d\u0435\u0444\u0442\u0435\u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 \u043d\u0430 \u043d\u0435\u0444\u0442\u0435\u0431\u0430\u0437\u0430\u0445, \u0410\u0417\u0421 \u0438 \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445.<\/p>\n          <\/div>\n        <\/article>\n\n        <article class=\"project-card\">\n          <div class=\"viewer-container\">\n            <model-viewer src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/06\/OilTank11.glb\" alt=\"\u041c\u0430\u0441\u043b\u043e\u0431\u0430\u043a\"\n              camera-controls disable-zoom auto-rotate rotation-per-second=\"25deg\"\n              shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\"\n              environment-image=\"neutral\"\n              camera-orbit=\"45deg 70deg 105%\"\n              interaction-prompt=\"none\" loading=\"lazy\"><\/model-viewer>\n            <div class=\"rotate-hint\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"\/><\/svg><\/div>\n          <\/div>\n          <div class=\"project-info\">\n            <span class=\"project-category\">\u041e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u0435<\/span>\n            <h3 class=\"project-title\">\u041c\u0430\u0441\u043b\u043e\u0431\u0430\u043a 1000\u043b<\/h3>\n            <p class=\"project-desc\">\u0401\u043c\u043a\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0441\u0438\u0441\u0442\u0435\u043c \u0441\u043c\u0430\u0437\u043a\u0438 \u043f\u0440\u043e\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0435\u0439.<\/p>\n          <\/div>\n        <\/article>\n\n        <article class=\"project-card\">\n          <div class=\"viewer-container\">\n            <model-viewer src=\"https:\/\/mechanogurus.ru\/wp-content\/uploads\/2025\/06\/Recuperator5.glb\" alt=\"\u0420\u0435\u043a\u0443\u043f\u0435\u0440\u0430\u0442\u043e\u0440\"\n              camera-controls disable-zoom auto-rotate rotation-per-second=\"25deg\"\n              shadow-intensity=\"1.2\" shadow-softness=\"0\" exposure=\"1.1\"\n              environment-image=\"neutral\"\n              camera-orbit=\"45deg 70deg 105%\"\n              interaction-prompt=\"none\" loading=\"lazy\"><\/model-viewer>\n            <div class=\"rotate-hint\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18c1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9\"\/><\/svg><\/div>\n          <\/div>\n          <div class=\"project-info\">\n            <span class=\"project-category\">\u042d\u043d\u0435\u0440\u0433\u0435\u0442\u0438\u043a\u0430<\/span>\n            <h3 class=\"project-title\">\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0440\u0435\u043a\u0443\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0442\u0435\u043f\u043b\u0430<\/h3>\n            <p class=\"project-desc\">\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u043f\u043b\u043e\u0432\u043e\u0439 \u044d\u043d\u0435\u0440\u0433\u0438\u0438 \u043e\u0442\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u0434\u044b\u043c\u043e\u0432\u044b\u0445 \u0433\u0430\u0437\u043e\u0432, \u0432\u0435\u043d\u0442\u0438\u043b\u044f\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0431\u0440\u043e\u0441\u043e\u0432.<\/p>\n          <\/div>\n        <\/article>\n\n      <\/div><!-- \/.carousel-track -->\n    <\/div><!-- \/.carousel-wrapper -->\n\n    <div class=\"cta-container\">\n      <a href=\"https:\/\/mechanogurus.ru\/?page_id=1714\" class=\"view-all-btn\" target=\"_blank\" rel=\"noopener noreferrer\">\n        \u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0441\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\n        <\/svg>\n      <\/a>\n    <\/div>\n\n  <\/section>\n<\/div><!-- \/.mg-ep -->\n\n<script>\n(function () {\n  document.querySelectorAll('.mg-ep 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 () {\n          viewer.autoRotate = true;\n        }, 3000);\n      }\n    });\n  });\n})();\n<\/script>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n\n<div id=\"mg-eng-calc\" class=\"mg-calc\" aria-label=\"\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0440\u0430\u0441\u0447\u0451\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438\">\n<style>\n\/* WordPress Custom HTML: keep this block one root so Gutenberg does not split markup *\/\n.wp-block-html:has(#mg-eng-calc),\n.entry-content > .wp-block-html:has(#mg-eng-calc),\n.wp-block-post-content > .wp-block-html:has(#mg-eng-calc),\n.elementor-widget-html:has(#mg-eng-calc),\n.elementor-widget-shortcode:has(#mg-eng-calc),\n.wpb_raw_html:has(#mg-eng-calc),\n.wpb_wrapper:has(#mg-eng-calc) {\n  display: block !important;\n  width: 100% !important;\n  max-width: none !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  padding: 0 !important;\n  float: none !important;\n  overflow: visible !important;\n}\n\n.wp-block-html.alignfull:has(#mg-eng-calc),\n.wp-block-html.alignwide:has(#mg-eng-calc) {\n  width: 100% !important;\n  max-width: none !important;\n}\n\n.entry-content:has(#mg-eng-calc),\n.wp-block-post-content:has(#mg-eng-calc),\n.elementor-widget-container:has(#mg-eng-calc) {\n  overflow-x: visible;\n}\n\n#mg-eng-calc.mg-calc,\n#mg-eng-calc.mg-calc *,\n#mg-eng-calc.mg-calc *::before,\n#mg-eng-calc.mg-calc *::after {\n  box-sizing: border-box;\n}\n\n#mg-eng-calc.mg-calc {\n  --gold: #F2B839;\n  --orange: #E1830F;\n  --gold-dim: rgba(242,184,57,0.12);\n  --text-primary: #f5f5f8;\n  --text-secondary: rgba(245,245,248,0.65);\n  --text-muted: rgba(245,245,248,0.4);\n  --border-subtle: rgba(242,184,57,0.15);\n  --border-glow: rgba(242,184,57,0.4);\n  --green: #4ade80;\n  --bg-dark: #08080c;\n  --bg-card: rgba(16,16,24,0.9);\n  --bg-glass: rgba(24,24,36,0.7);\n  --mg-max: 1400px;\n  --mg-gutter: 25px;\n\n  \/* Fallback width until JS matches the site header .container *\/\n  display: block;\n  width: 100%;\n  max-width: min(var(--mg-max), 100%);\n  min-width: 0;\n  margin: clamp(1.25rem, 3vw, 2.5rem) auto;\n  padding: clamp(1.25rem, 3.5vw, 2.75rem) max(var(--mg-gutter), env(safe-area-inset-left, 0px));\n  padding-right: max(var(--mg-gutter), env(safe-area-inset-right, 0px));\n  position: relative;\n  left: auto;\n  right: auto;\n  transform: none;\n  overflow-x: hidden;\n  overflow-wrap: anywhere;\n  container-type: inline-size;\n  container-name: mg-calc;\n  color: var(--text-primary);\n  background: var(--bg-dark);\n  border: 1px solid var(--border-subtle);\n  border-radius: 22px;\n  font-family: Inter, \"Segoe UI\", -apple-system, BlinkMacSystemFont, sans-serif;\n  -webkit-text-size-adjust: 100%;\n  text-size-adjust: 100%;\n}\n\n#mg-eng-calc.mg-calc h1,\n#mg-eng-calc.mg-calc h2,\n#mg-eng-calc.mg-calc h3,\n#mg-eng-calc.mg-calc p,\n#mg-eng-calc.mg-calc a,\n#mg-eng-calc.mg-calc button,\n#mg-eng-calc.mg-calc input,\n#mg-eng-calc.mg-calc label {\n  font-family: inherit;\n  max-width: none;\n}\n\n#mg-eng-calc button,\n#mg-eng-calc input,\n#mg-eng-calc select,\n#mg-eng-calc textarea {\n  font-family: inherit;\n  color: inherit;\n  max-width: 100%;\n  box-shadow: none;\n  background-image: none;\n  text-transform: none;\n}\n\n#mg-eng-calc details,\n#mg-eng-calc summary {\n  display: block;\n  color: inherit;\n}\n\n#mg-eng-calc .chip,\n#mg-eng-calc .seg-btn {\n  appearance: none;\n  -webkit-appearance: none;\n}\n\n#mg-eng-calc .calc-header {\n  text-align: center;\n  margin: 0 0 1.75rem;\n}\n\n#mg-eng-calc .calc-header h2 {\n  margin: 0 0 0.85rem !important;\n  padding: 0 !important;\n  font-size: clamp(1.45rem, 4cqi + 0.8rem, 2.75rem) !important;\n  font-weight: 700 !important;\n  line-height: 1.15 !important;\n  letter-spacing: -0.02em;\n  background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  color: var(--text-primary);\n}\n\n#mg-eng-calc .calc-header p {\n  margin: 0 auto !important;\n  font-size: clamp(0.95rem, 1.6cqi + 0.75rem, 1.1rem);\n  color: var(--text-secondary);\n  max-width: 36rem;\n  line-height: 1.6;\n}\n\n#mg-eng-calc .differentiator {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem 1.15rem;\n  margin: 0 0 1.5rem;\n  background: linear-gradient(135deg, rgba(242,184,57,0.08), rgba(225,131,15,0.04));\n  border-left: 3px solid var(--gold);\n  border-radius: 0 12px 12px 0;\n}\n\n#mg-eng-calc .differentiator p {\n  margin: 0 !important;\n  font-size: 1rem;\n  font-weight: 500;\n  color: var(--text-primary);\n  line-height: 1.6;\n}\n\n#mg-eng-calc .calc-layout {\n  display: grid;\n  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);\n  gap: 1.1rem;\n  align-items: start;\n  width: 100%;\n  min-width: 0;\n}\n\n#mg-eng-calc .panel {\n  min-width: 0;\n  background: var(--bg-card);\n  border: 1px solid var(--border-subtle);\n  border-radius: 20px;\n  padding: clamp(1rem, 2.4cqi, 1.45rem);\n}\n\n#mg-eng-calc .step { margin: 0 0 1.35rem; }\n#mg-eng-calc .step:last-child { margin: 0; }\n\n#mg-eng-calc .step-label {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 0.35rem 0.75rem;\n  margin-bottom: 0.7rem;\n}\n\n#mg-eng-calc .step-label h3 {\n  margin: 0 !important;\n  font-size: 0.95rem !important;\n  font-weight: 600 !important;\n  color: var(--text-primary) !important;\n  line-height: 1.3 !important;\n}\n\n#mg-eng-calc .step-hint {\n  font-size: 0.75rem;\n  color: var(--text-muted);\n}\n\n#mg-eng-calc .chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-bottom: 0.9rem;\n}\n\n#mg-eng-calc .chip {\n  appearance: none;\n  -webkit-appearance: none;\n  border: 1px solid rgba(255,255,255,0.08);\n  background: rgba(0,0,0,0.3);\n  color: var(--text-secondary);\n  border-radius: 999px;\n  padding: 0.55rem 0.85rem;\n  min-height: 44px;\n  font-size: 0.8rem;\n  font-weight: 500;\n  cursor: pointer;\n}\n\n#mg-eng-calc .chip.is-on {\n  background: var(--gold-dim);\n  border-color: var(--border-glow);\n  color: var(--gold);\n}\n\n#mg-eng-calc .hours-row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: 0.75rem;\n  align-items: center;\n}\n\n#mg-eng-calc .hours-value {\n  font-family: ui-monospace, \"JetBrains Mono\", Consolas, monospace;\n  font-size: 1rem;\n  font-weight: 600;\n  color: var(--gold);\n  white-space: nowrap;\n}\n\n#mg-eng-calc input[type=\"range\"] {\n  width: 100%;\n  min-width: 0;\n  accent-color: var(--gold);\n  cursor: pointer;\n}\n\n#mg-eng-calc .num-input {\n  width: 5.6rem;\n  max-width: 100%;\n  background: rgba(0,0,0,0.4);\n  border: 1px solid var(--border-subtle);\n  border-radius: 10px;\n  color: var(--text-primary);\n  font-family: ui-monospace, \"JetBrains Mono\", Consolas, monospace;\n  font-size: 16px;\n  padding: 0.5rem 0.5rem;\n  text-align: right;\n}\n\n#mg-eng-calc .seg {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 0.5rem;\n}\n\n#mg-eng-calc .seg-btn {\n  appearance: none;\n  -webkit-appearance: none;\n  border: 1px solid rgba(255,255,255,0.08);\n  background: rgba(0,0,0,0.3);\n  color: var(--text-secondary);\n  border-radius: 12px;\n  padding: 0.75rem 0.55rem;\n  min-height: 44px;\n  cursor: pointer;\n  text-align: left;\n}\n\n#mg-eng-calc .seg-btn strong {\n  display: block;\n  font-size: 0.85rem;\n  font-weight: 600;\n  color: inherit;\n  margin-bottom: 0.2rem;\n}\n\n#mg-eng-calc .seg-btn span {\n  display: block;\n  font-size: 0.72rem;\n  color: var(--text-muted);\n}\n\n#mg-eng-calc .seg-btn.is-on {\n  background: var(--gold-dim);\n  border-color: var(--border-glow);\n  color: var(--gold);\n}\n\n#mg-eng-calc .risks { display: grid; gap: 0.45rem; }\n\n#mg-eng-calc .risk {\n  display: flex;\n  align-items: center;\n  gap: 0.7rem;\n  padding: 0.75rem 0.85rem;\n  min-height: 44px;\n  background: rgba(0,0,0,0.3);\n  border: 1px solid rgba(255,255,255,0.04);\n  border-radius: 12px;\n  cursor: pointer;\n  color: var(--text-secondary);\n}\n\n#mg-eng-calc .risk:has(input:checked),\n#mg-eng-calc .risk.is-on {\n  border-color: var(--border-subtle);\n  background: rgba(242,184,57,0.06);\n  color: var(--text-primary);\n}\n\n#mg-eng-calc .risk input {\n  accent-color: var(--gold);\n  width: 1.1rem;\n  height: 1.1rem;\n  flex-shrink: 0;\n}\n\n#mg-eng-calc .risk small {\n  margin-left: auto;\n  font-family: ui-monospace, \"JetBrains Mono\", Consolas, monospace;\n  color: var(--gold);\n  font-size: 0.75rem;\n  white-space: nowrap;\n}\n\n#mg-eng-calc .rate-meta {\n  display: flex;\n  justify-content: space-between;\n  gap: 0.5rem;\n  font-size: 0.72rem;\n  color: var(--text-muted);\n  margin-top: 0.35rem;\n}\n\n#mg-eng-calc .result-card {\n  position: sticky;\n  top: 1rem;\n  background:\n    radial-gradient(600px 240px at 90% 0%, rgba(242,184,57,0.14), transparent 55%),\n    var(--bg-card);\n}\n\n#mg-eng-calc .result-kicker {\n  font-size: 0.7rem;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--gold);\n  margin-bottom: 0.55rem;\n}\n\n#mg-eng-calc .result-price {\n  font-family: ui-monospace, \"JetBrains Mono\", Consolas, monospace;\n  font-size: clamp(1.5rem, 5cqi, 2.3rem);\n  font-weight: 700;\n  background: linear-gradient(135deg, var(--gold), var(--orange));\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  color: var(--gold);\n  margin-bottom: 0.35rem;\n}\n\n#mg-eng-calc .result-sub {\n  color: var(--text-secondary);\n  font-size: 0.9rem;\n  margin: 0 0 1.1rem !important;\n}\n\n#mg-eng-calc .result-sub strong { color: var(--green); font-weight: 600; }\n\n#mg-eng-calc .breakdown {\n  display: grid;\n  gap: 0.45rem;\n  margin-bottom: 1.1rem;\n}\n\n#mg-eng-calc .bd-row {\n  display: flex;\n  justify-content: space-between;\n  gap: 1rem;\n  font-size: 0.82rem;\n  color: var(--text-secondary);\n}\n\n#mg-eng-calc .bd-row b {\n  font-family: ui-monospace, \"JetBrains Mono\", Consolas, monospace;\n  font-weight: 500;\n  color: var(--text-primary);\n  text-align: right;\n}\n\n#mg-eng-calc .live-eq {\n  font-family: ui-monospace, \"JetBrains Mono\", Consolas, monospace;\n  font-size: 0.72rem;\n  line-height: 1.55;\n  color: var(--text-muted);\n  background: rgba(0,0,0,0.4);\n  border: 1px solid var(--border-subtle);\n  border-radius: 12px;\n  padding: 0.85rem 1rem;\n  margin-bottom: 1.1rem;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n}\n\n#mg-eng-calc .live-eq .g { color: var(--gold); }\n#mg-eng-calc .live-eq .o { color: var(--orange); }\n#mg-eng-calc .live-eq .d { color: var(--green); }\n\n#mg-eng-calc a.cta {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 48px;\n  padding: 0.75rem 1rem;\n  border-radius: 999px;\n  background: linear-gradient(135deg, var(--gold), var(--orange));\n  color: var(--bg-dark) !important;\n  text-decoration: none !important;\n  font-weight: 700;\n  font-size: 0.95rem;\n  box-shadow: none;\n}\n\n#mg-eng-calc .formula-details {\n  margin-top: 1.25rem;\n  border: 1px solid rgba(255,255,255,0.06);\n  border-radius: 16px;\n  background: rgba(0,0,0,0.22);\n  overflow: hidden;\n}\n\n#mg-eng-calc .formula-details summary {\n  list-style: none;\n  cursor: pointer;\n  padding: 1rem 1.1rem;\n  font-weight: 600;\n  color: var(--text-primary);\n}\n\n#mg-eng-calc .formula-details summary::-webkit-details-marker { display: none; }\n\n#mg-eng-calc .formula-body { padding: 0 1.1rem 1.2rem; }\n#mg-eng-calc .formula-body[hidden] { display: none !important; }\n#mg-eng-calc .formula-details > strong {\n  display: block;\n  padding: 1rem 1.1rem;\n  color: var(--text-primary);\n  font-size: 0.95rem;\n}\n\n#mg-eng-calc .formula-equation {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  font-family: ui-monospace, \"JetBrains Mono\", Consolas, monospace;\n  font-size: clamp(0.75rem, 2.4cqi, 1.15rem);\n  background: rgba(0,0,0,0.4);\n  border: 1px solid var(--border-subtle);\n  border-radius: 16px;\n  padding: 1.1rem;\n  margin-bottom: 1.1rem;\n  overflow-x: auto;\n  max-width: 100%;\n}\n\n#mg-eng-calc .formula-var { color: var(--gold); font-weight: 600; }\n#mg-eng-calc .formula-var.result {\n  background: linear-gradient(135deg, var(--gold), var(--orange));\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n#mg-eng-calc .formula-op { color: var(--text-muted); }\n#mg-eng-calc .formula-bracket { color: var(--text-secondary); }\n#mg-eng-calc .formula-func { color: var(--orange); font-weight: 500; }\n#mg-eng-calc .formula-fraction {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n}\n#mg-eng-calc .formula-numerator {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 0.35rem;\n  padding: 0.3rem 0.5rem;\n}\n#mg-eng-calc .formula-divider {\n  width: 100%;\n  height: 2px;\n  background: linear-gradient(90deg, transparent, var(--gold), transparent);\n}\n#mg-eng-calc .formula-denominator { padding: 0.3rem 0.5rem; }\n#mg-eng-calc .formula-var.discount { color: var(--green); font-weight: 700; }\n\n#mg-eng-calc .legend-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));\n  gap: 0.7rem;\n}\n\n#mg-eng-calc .legend-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  padding: 0.85rem;\n  background: rgba(0,0,0,0.3);\n  border: 1px solid rgba(255,255,255,0.04);\n  border-radius: 12px;\n  min-width: 0;\n}\n\n#mg-eng-calc .legend-symbol {\n  font-family: ui-monospace, \"JetBrains Mono\", Consolas, monospace;\n  font-size: 0.8rem;\n  font-weight: 600;\n  color: var(--gold);\n  min-width: 48px;\n  padding: 0.4rem 0.2rem;\n  text-align: center;\n  background: rgba(242,184,57,0.1);\n  border-radius: 6px;\n  flex-shrink: 0;\n}\n\n#mg-eng-calc .legend-label {\n  font-size: 0.85rem;\n  font-weight: 500;\n  margin-bottom: 0.15rem;\n}\n\n#mg-eng-calc .legend-desc {\n  font-size: 0.75rem;\n  color: var(--text-secondary);\n  line-height: 1.45;\n}\n\n#mg-eng-calc .legend-item.legend-discount { border-color: rgba(74,222,128,0.15); }\n#mg-eng-calc .legend-symbol.discount { background: rgba(74,222,128,0.15); color: var(--green); }\n\n#mg-eng-calc .formula-note {\n  margin-top: 1rem;\n  padding-top: 1rem;\n  border-top: 1px solid rgba(255,255,255,0.06);\n  display: flex;\n  align-items: flex-start;\n  gap: 0.85rem;\n}\n\n#mg-eng-calc .note-icon {\n  width: 40px;\n  height: 40px;\n  background: rgba(242,184,57,0.1);\n  border: 1px solid var(--border-subtle);\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n#mg-eng-calc .note-text {\n  font-size: 0.85rem;\n  color: var(--text-secondary);\n  line-height: 1.55;\n}\n\n#mg-eng-calc .note-text strong { color: var(--gold); font-weight: 500; }\n\n\/* Layout follows the WordPress column, not the viewport *\/\n@container mg-calc (max-width: 920px) {\n  #mg-eng-calc .calc-layout { grid-template-columns: 1fr; }\n  #mg-eng-calc .result-card { position: static; }\n}\n\n@container mg-calc (max-width: 640px) {\n  #mg-eng-calc .seg { grid-template-columns: 1fr; }\n  #mg-eng-calc .hours-row { grid-template-columns: 1fr; }\n  #mg-eng-calc .hours-value { text-align: left; }\n  #mg-eng-calc .formula-note { flex-direction: column; }\n}\n\n@media (max-width: 920px) {\n  #mg-eng-calc.mg-calc {\n    border-radius: 16px;\n    padding-left: max(16px, env(safe-area-inset-left, 0px));\n    padding-right: max(16px, env(safe-area-inset-right, 0px));\n  }\n  #mg-eng-calc .calc-layout { grid-template-columns: 1fr; }\n  #mg-eng-calc .result-card { position: static; }\n}\n\n@media (max-width: 640px) {\n  #mg-eng-calc.mg-calc { padding-top: 1.1rem; padding-bottom: 1.1rem; }\n  #mg-eng-calc .seg { grid-template-columns: 1fr; }\n  #mg-eng-calc .hours-row { grid-template-columns: 1fr; }\n  #mg-eng-calc .rate-meta { font-size: 0.65rem; }\n}\n\n@media (max-width: 380px) {\n  #mg-eng-calc .calc-header h2 { font-size: 1.3rem !important; }\n  #mg-eng-calc .chip { width: 100%; justify-content: center; }\n}\n\n@media (hover: hover) {\n  #mg-eng-calc .chip:hover { border-color: var(--border-subtle); color: var(--text-primary); }\n  #mg-eng-calc a.cta:hover { filter: brightness(1.05); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  #mg-eng-calc .chip,\n  #mg-eng-calc .seg-btn,\n  #mg-eng-calc a.cta { transition: none; filter: none; }\n}\n\n@media print {\n  #mg-eng-calc.mg-calc {\n    width: 100%;\n    max-width: 100%;\n    color: #111;\n    background: #fff;\n    border-color: #ccc;\n    box-shadow: none;\n  }\n}\n\n@media (prefers-contrast: more) {\n  #mg-eng-calc.mg-calc { border-width: 2px; }\n}\n<\/style>\n\n  <div class=\"calc-header\">\n    <h2>\u0423\u0437\u043d\u0430\u0439\u0442\u0435 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u043e\u0447\u043d\u0443\u044e \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n    <p>\u0423\u043a\u0430\u0436\u0438\u0442\u0435 \u043e\u0431\u044a\u0451\u043c \u0440\u0430\u0431\u043e\u0442\u044b, \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438 \u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0435 \u0441\u0440\u043e\u043a\u0438 \u2014 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u044e\u0434\u0436\u0435\u0442.<\/p>\n    <noscript><p>\u0414\u043b\u044f \u0440\u0430\u0441\u0447\u0451\u0442\u0430 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435 JavaScript \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p><\/noscript>\n  <\/div>\n\n  <div class=\"differentiator\">\n    <p>\u041d\u0430\u0448\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435: \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0435 \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0441\u043a\u043e\u0433\u043e \u043d\u043e\u0440\u043c\u043e-\u0447\u0430\u0441\u0430 \u0437\u0430 \u0441\u0447\u0451\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432.<\/p>\n  <\/div>\n\n  <div class=\"calc-layout\">\n    <div class=\"panel\">\n      <div class=\"step\">\n        <div class=\"step-label\">\n          <h3>1. \u041e\u0431\u044a\u0451\u043c \u0440\u0430\u0431\u043e\u0442\u044b<\/h3>\n          <span class=\"step-hint\">\u043f\u0440\u0435\u0441\u0435\u0442\u044b \u0437\u0430\u0434\u0430\u044e\u0442 \u0447\u0430\u0441\u044b, \u043f\u043e\u043b\u0437\u0443\u043d\u043e\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/span>\n        <\/div>\n        <div class=\"chips\" id=\"mg-task-chips\">\n          <button type=\"button\" class=\"chip\" data-hours=\"8\">\u0414\u0435\u0442\u0430\u043b\u044c \u00b7 8 \u0447<\/button>\n          <button type=\"button\" class=\"chip\" data-hours=\"16\">\u0420\u0435\u0432\u0435\u0440\u0441 \u00b7 16 \u0447<\/button>\n          <button type=\"button\" class=\"chip\" data-hours=\"12\">\u041a\u0414 \u00b7 12 \u0447<\/button>\n          <button type=\"button\" class=\"chip\" data-hours=\"24\">\u0423\u0437\u0435\u043b \u00b7 24 \u0447<\/button>\n        <\/div>\n        <div class=\"hours-row\">\n          <input id=\"mg-hours\" type=\"range\" min=\"1\" max=\"240\" step=\"1\" value=\"16\" aria-label=\"\u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u0447\u0430\u0441\u044b\">\n          <label class=\"hours-value\"><input id=\"mg-hours-num\" class=\"num-input\" type=\"number\" min=\"1\" max=\"240\" inputmode=\"numeric\" value=\"16\"> \u0447<\/label>\n        <\/div>\n      <\/div>\n\n      <div class=\"step\">\n        <div class=\"step-label\">\n          <h3>2. \u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c<\/h3>\n          <span class=\"step-hint\">\u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u043d\u043e\u0436\u0438\u0442\u0435\u043b\u044c \u041c<sub>\u0442\u0435\u0445<\/sub><\/span>\n        <\/div>\n        <div class=\"seg\" id=\"mg-tech\">\n          <button type=\"button\" class=\"seg-btn is-on\" data-v=\"1\"><strong>\u0422\u0438\u043f\u043e\u0432\u043e\u0435<\/strong><span>\u00d7 1.00 \u00b7 \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/span><\/button>\n          <button type=\"button\" class=\"seg-btn\" data-v=\"1.25\"><strong>\u0421\u043b\u043e\u0436\u043d\u043e\u0435<\/strong><span>\u00d7 1.25 \u00b7 \u043c\u043d\u043e\u0433\u043e \u0441\u0432\u044f\u0437\u0435\u0439<\/span><\/button>\n          <button type=\"button\" class=\"seg-btn\" data-v=\"1.5\"><strong>\u041d\u043e\u0432\u043e\u0435<\/strong><span>\u00d7 1.50 \u00b7 \u043d\u0435\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u0430<\/span><\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"step\">\n        <div class=\"step-label\">\n          <h3>3. \u0420\u0438\u0441\u043a\u0438<\/h3>\n          <span class=\"step-hint\">\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043d\u0435 \u0432\u044b\u0448\u0435 \u043b\u0438\u043c\u0438\u0442\u0430 1.80<\/span>\n        <\/div>\n        <div class=\"risks\">\n          <label class=\"risk\"><input type=\"checkbox\" data-risk=\"1.15\"> \u041d\u0435\u044f\u0441\u043d\u043e\u0435 \u0422\u0417 <small>\u00d7 1.15<\/small><\/label>\n          <label class=\"risk\"><input type=\"checkbox\" data-risk=\"1.10\"> \u041c\u043d\u043e\u0433\u043e \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0439 <small>\u00d7 1.10<\/small><\/label>\n          <label class=\"risk\"><input type=\"checkbox\" data-risk=\"1.12\"> \u041f\u043e\u0441\u0442\u0430\u0432\u0449\u0438\u043a\u0438 \/ \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0430\u0446\u0438\u044f <small>\u00d7 1.12<\/small><\/label>\n          <label class=\"risk\"><input type=\"checkbox\" data-risk=\"1.20\"> \u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u043c\u0438 <small>\u00d7 1.20<\/small><\/label>\n        <\/div>\n      <\/div>\n\n      <div class=\"step\">\n        <div class=\"step-label\">\n          <h3>4. \u0421\u0440\u043e\u043a\u0438<\/h3>\n          <span class=\"step-hint\">\u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0441\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u0438 T<\/span>\n        <\/div>\n        <div class=\"seg\" id=\"mg-urgency\">\n          <button type=\"button\" class=\"seg-btn is-on\" data-v=\"1\"><strong>\u041e\u0431\u044b\u0447\u043d\u044b\u0439<\/strong><span>\u00d7 1.00<\/span><\/button>\n          <button type=\"button\" class=\"seg-btn\" data-v=\"1.2\"><strong>\u0421\u0436\u0430\u0442\u044b\u0439<\/strong><span>\u00d7 1.20<\/span><\/button>\n          <button type=\"button\" class=\"seg-btn\" data-v=\"1.4\"><strong>\u0421\u0440\u043e\u0447\u043d\u043e<\/strong><span>\u00d7 1.40<\/span><\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"step\">\n        <div class=\"step-label\">\n          <h3>5. \u0421\u0442\u0430\u0432\u043a\u0430 \u0438 \u043b\u043e\u044f\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/h3>\n          <span class=\"step-hint\">\u043e\u0442 990 \u20bd \u0437\u0430 60 \u043c\u0438\u043d\u0443\u0442<\/span>\n        <\/div>\n        <div class=\"hours-row\">\n          <input id=\"mg-rate\" type=\"range\" min=\"990\" max=\"2500\" step=\"10\" value=\"1200\" aria-label=\"\u0421\u0442\u0430\u0432\u043a\u0430 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0430\">\n          <span class=\"hours-value\" id=\"mg-rate-label\">1 200 \u20bd\/\u0447<\/span>\n        <\/div>\n        <div class=\"rate-meta\"><span>\u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0441\u0442\u0430\u0432\u043a\u0430<\/span><span>\u0438\u043d\u0436\u0435\u043d\u0435\u0440<\/span><span>\u0432\u0435\u0434\u0443\u0449\u0438\u0439 \u0438\u043d\u0436\u0435\u043d\u0435\u0440<\/span><\/div>\n        <div class=\"seg\" id=\"mg-discount\" style=\"margin-top:0.9rem\">\n          <button type=\"button\" class=\"seg-btn is-on\" data-v=\"1\"><strong>\u041d\u043e\u0432\u044b\u0439<\/strong><span>D = 1.00<\/span><\/button>\n          <button type=\"button\" class=\"seg-btn\" data-v=\"1.1\"><strong>\u041f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0439<\/strong><span>D = 1.10<\/span><\/button>\n          <button type=\"button\" class=\"seg-btn\" data-v=\"1.2\"><strong>\u041f\u0430\u0440\u0442\u043d\u0451\u0440<\/strong><span>D = 1.20<\/span><\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"panel result-card\">\n      <div class=\"result-kicker\">\u0424\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043e\u0446\u0435\u043d\u043a\u0430<\/div>\n      <div class=\"result-price\" id=\"mg-price\" aria-live=\"polite\">0 \u20bd<\/div>\n      <p class=\"result-sub\" id=\"mg-save\"><\/p>\n      <div class=\"breakdown\">\n        <div class=\"bd-row\">\u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u0447\u0430\u0441\u044b <b id=\"mg-bd-h\">16<\/b><\/div>\n        <div class=\"bd-row\">\u042d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0447\u0430\u0441\u044b <b id=\"mg-bd-he\">16<\/b><\/div>\n        <div class=\"bd-row\">\u041c<sub>\u0442\u0435\u0445<\/sub> \u00d7 \u0440\u0438\u0441\u043a\u0438 \u00d7 T <b id=\"mg-bd-m\">1.00<\/b><\/div>\n        <div class=\"bd-row\">\u0421\u0442\u0430\u0432\u043a\u0430 <b id=\"mg-bd-r\">1 200 \u20bd\/\u0447<\/b><\/div>\n      <\/div>\n      <a class=\"cta\" href=\"https:\/\/n8n.mechanogurus.ru\/form\/105adc81-c50a-40f0-ab54-f0b65857d49e\" target=\"_blank\" rel=\"noopener noreferrer\">\u0417\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c<\/a>\n    <\/div>\n  <\/div>\n\n  <div class=\"formula-details\">\n    <strong>\u041c\u0435\u0442\u043e\u0434\u0438\u043a\u0430: \u0442\u0430 \u0436\u0435 \u0444\u043e\u0440\u043c\u0443\u043b\u0430, \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0435\u0437 \u0440\u0443\u0447\u043d\u043e\u0433\u043e Excel<\/strong>\n    <div class=\"formula-body\" hidden aria-hidden=\"true\">\n      <div class=\"formula-equation\">\n        <span class=\"formula-var result\">\u0426\u0435\u043d\u0430<\/span>\n        <span class=\"formula-op\">=<\/span>\n        <span class=\"formula-fraction\">\n          <span class=\"formula-numerator\">\n            <span class=\"formula-bracket\">(<\/span>\n            <span class=\"formula-op\">\u03a3<\/span>\n            <span class=\"formula-var\">\u0427<sub>i<\/sub><\/span>\n            <span class=\"formula-bracket\">)<\/span>\n            <span class=\"formula-op\">\u00d7<\/span>\n            <span class=\"formula-var\">\u041c<sub>\u0442\u0435\u0445<\/sub><\/span>\n            <span class=\"formula-op\">\u00d7<\/span>\n            <span class=\"formula-func\">min<\/span>\n            <span class=\"formula-bracket\">(<\/span>\n            <span class=\"formula-op\">\u220f<\/span>\n            <span class=\"formula-var\">\u041c<sub>j<\/sub><\/span>\n            <span class=\"formula-op\">,<\/span>\n            <span class=\"formula-var\">\u041c<sub>\u043b\u0438\u043c<\/sub><\/span>\n            <span class=\"formula-bracket\">)<\/span>\n            <span class=\"formula-op\">\u00d7<\/span>\n            <span class=\"formula-var\">T<\/span>\n            <span class=\"formula-op\">\u00d7<\/span>\n            <span class=\"formula-var\">R<\/span>\n          <\/span>\n          <span class=\"formula-divider\"><\/span>\n          <span class=\"formula-denominator\">\n            <span class=\"formula-var discount\">D<\/span>\n          <\/span>\n        <\/span>\n      <\/div>\n      <div class=\"legend-grid\">\n        <div class=\"legend-item\">\n          <div class=\"legend-symbol\">\u03a3 \u0427<sub>i<\/sub><\/div>\n          <div class=\"legend-content\">\n            <div class=\"legend-label\">\u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u0447\u0430\u0441\u044b<\/div>\n            <div class=\"legend-desc\">\u0421\u0443\u043c\u043c\u0430 \u0442\u0440\u0443\u0434\u043e\u0437\u0430\u0442\u0440\u0430\u0442 \u043f\u043e \u0432\u0441\u0435\u043c \u0437\u0430\u0434\u0430\u0447\u0430\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"legend-item\">\n          <div class=\"legend-symbol\">\u041c<sub>\u0442\u0435\u0445<\/sub><\/div>\n          <div class=\"legend-content\">\n            <div class=\"legend-label\">\u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u043d\u043e\u0436\u0438\u0442\u0435\u043b\u044c<\/div>\n            <div class=\"legend-desc\">\u0423\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438 \u043d\u043e\u0432\u0438\u0437\u043d\u0443 \u0440\u0435\u0448\u0435\u043d\u0438\u0439<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"legend-item\">\n          <div class=\"legend-symbol\">\u220f \u041c<sub>j<\/sub><\/div>\n          <div class=\"legend-content\">\n            <div class=\"legend-label\">\u0424\u0430\u043a\u0442\u043e\u0440\u044b \u0440\u0438\u0441\u043a\u0430<\/div>\n            <div class=\"legend-desc\">\u041d\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0441\u0442\u044c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439, \u043f\u043e\u0441\u0442\u0430\u0432\u0449\u0438\u043a\u0438<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"legend-item\">\n          <div class=\"legend-symbol\">T<\/div>\n          <div class=\"legend-content\">\n            <div class=\"legend-label\">\u0421\u0440\u043e\u0447\u043d\u043e\u0441\u0442\u044c<\/div>\n            <div class=\"legend-desc\">\u041a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"legend-item\">\n          <div class=\"legend-symbol\">R<\/div>\n          <div class=\"legend-content\">\n            <div class=\"legend-label\">\u0421\u0442\u0430\u0432\u043a\u0430 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0430<\/div>\n            <div class=\"legend-desc\">500 \u2013 2 500 \u20bd\/\u0447 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0437\u0430\u0434\u0430\u0447<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"legend-item legend-discount\">\n          <div class=\"legend-symbol discount\">D<\/div>\n          <div class=\"legend-content\">\n            <div class=\"legend-label\">\u0421\u043a\u0438\u0434\u043a\u0430 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0430<\/div>\n            <div class=\"legend-desc\">\u041a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u043b\u043e\u044f\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043f\u0430\u0440\u0442\u043d\u0451\u0440\u043e\u0432<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      <div class=\"formula-note\">\n        <div class=\"note-icon\">\u26a1<\/div>\n        <div class=\"note-text\">\n          <strong>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/strong> \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u043d\u0443\u044e \u043f\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0439 \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u0438. \u041d\u0438\u043a\u0430\u043a\u0438\u0445 \u00ab\u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u00bb \u0438 \u00ab\u043d\u0430 \u0433\u043b\u0430\u0437\u00bb, \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0440\u0430\u0441\u0447\u0451\u0442\u043e\u0432 \u043f\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0443 \u0447\u0435\u0440\u0442\u0435\u0436\u0430. \u0422\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434.\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n<script>\n(function(){\n  function mgEngCalcBoot(){\n  var root = document.getElementById(\"mg-eng-calc\");\n  if (!root || root.getAttribute(\"data-mg-ready\") === \"1\") return;\n  root.setAttribute(\"data-mg-ready\", \"1\");\n\n  var HEADER_SELS = [\n    \".header .container\",\n    \"header .container\",\n    \".site-header .container\",\n    \"#masthead .container\",\n    \".lativ-header .container\",\n    \".mg-sim-header .container\",\n    \"header .wrapper\",\n    \".header-inner\"\n  ];\n\n  function fitToHeader() {\n    var vw = document.documentElement.clientWidth;\n    var gutter = 25;\n    var hardMax = Math.min(1400, Math.max(280, vw - gutter * 2));\n    var header = null;\n    for (var i = 0; i < HEADER_SELS.length; i++) {\n      header = document.querySelector(HEADER_SELS[i]);\n      if (header) break;\n    }\n    var targetW = hardMax;\n    var targetLeft = (vw - hardMax) \/ 2;\n    if (header) {\n      var hr = header.getBoundingClientRect();\n      if (hr.width > 40) {\n        targetW = Math.min(hr.width, hardMax);\n        targetLeft = hr.left;\n      }\n    }\n    if (targetLeft < 0) targetLeft = 0;\n    if (targetLeft + targetW > vw) targetW = Math.max(0, vw - targetLeft);\n    var parent = root.parentElement;\n    var contentLeft = 0;\n    if (parent) {\n      var pr = parent.getBoundingClientRect();\n      var cs = window.getComputedStyle(parent);\n      contentLeft = pr.left + (parseFloat(cs.borderLeftWidth) || 0) + (parseFloat(cs.paddingLeft) || 0);\n    }\n    root.style.setProperty(\"width\", targetW + \"px\", \"important\");\n    root.style.setProperty(\"max-width\", targetW + \"px\", \"important\");\n    root.style.setProperty(\"margin-left\", (targetLeft - contentLeft) + \"px\", \"important\");\n    root.style.setProperty(\"margin-right\", \"0px\", \"important\");\n  }\n\n  fitToHeader();\n  window.addEventListener(\"resize\", fitToHeader, { passive: true });\n  window.addEventListener(\"load\", fitToHeader, { passive: true });\n  requestAnimationFrame(function(){ requestAnimationFrame(fitToHeader); });\n  if (window.visualViewport) {\n    window.visualViewport.addEventListener(\"resize\", fitToHeader, { passive: true });\n  }\n\n  var M_LIM = 1.8;\n  var hoursEl = root.querySelector(\"#mg-hours\");\n  var hoursNum = root.querySelector(\"#mg-hours-num\");\n  var rateEl = root.querySelector(\"#mg-rate\");\n  var rateLabel = root.querySelector(\"#mg-rate-label\");\n  if (!hoursEl || !hoursNum || !rateEl || !rateLabel) return;\n  var state = { hours: 16, mTech: 1, urgency: 1, discount: 1, rate: 1200 };\n\n  function clamp(n, min, max){ return Math.min(max, Math.max(min, n)); }\n  function fmt(n){ return Math.round(n).toLocaleString(\"ru-RU\"); }\n  function fmtN(n, d){ return Number(n).toLocaleString(\"ru-RU\", { minimumFractionDigits: d, maximumFractionDigits: d }); }\n\n  function setSeg(id, value){\n    root.querySelectorAll(\"#\"+id+\" .seg-btn\").forEach(function(btn){\n      btn.classList.toggle(\"is-on\", btn.getAttribute(\"data-v\") === String(value));\n    });\n  }\n\n  function bindSeg(id, key){\n    root.querySelector(\"#\"+id).addEventListener(\"click\", function(e){\n      var btn = e.target.closest(\".seg-btn\");\n      if (!btn) return;\n      state[key] = Number(btn.getAttribute(\"data-v\"));\n      setSeg(id, state[key]);\n      render();\n    });\n  }\n\n  root.querySelector(\"#mg-task-chips\").addEventListener(\"click\", function(e){\n    var chip = e.target.closest(\".chip\");\n    if (!chip) return;\n    root.querySelectorAll(\"#mg-task-chips .chip\").forEach(function(c){ c.classList.remove(\"is-on\"); });\n    chip.classList.add(\"is-on\");\n    var h = Number(chip.getAttribute(\"data-hours\"));\n    hoursEl.value = h;\n    hoursNum.value = h;\n    state.hours = h;\n    render();\n  });\n\n  function onHours(v){\n    state.hours = clamp(Number(v) || 1, 1, 240);\n    hoursEl.value = state.hours;\n    hoursNum.value = state.hours;\n    root.querySelectorAll(\"#mg-task-chips .chip\").forEach(function(c){\n      c.classList.toggle(\"is-on\", Number(c.getAttribute(\"data-hours\")) === state.hours);\n    });\n    render();\n  }\n  hoursEl.addEventListener(\"input\", function(){ onHours(hoursEl.value); });\n  hoursNum.addEventListener(\"input\", function(){ onHours(hoursNum.value); });\n\n  rateEl.addEventListener(\"input\", function(){\n    state.rate = Number(rateEl.value);\n    render();\n  });\n\n  root.querySelectorAll(\"[data-risk]\").forEach(function(box){\n    box.addEventListener(\"change\", function(){\n      var label = box.closest(\".risk\");\n      if (label) label.classList.toggle(\"is-on\", box.checked);\n      render();\n    });\n  });\n\n  bindSeg(\"mg-tech\", \"mTech\");\n  bindSeg(\"mg-urgency\", \"urgency\");\n  bindSeg(\"mg-discount\", \"discount\");\n\n  function quote(){\n    var risks = [];\n    root.querySelectorAll(\"[data-risk]:checked\").forEach(function(box){\n      risks.push(Number(box.getAttribute(\"data-risk\")));\n    });\n    var riskProduct = risks.reduce(function(a,b){ return a * b; }, 1);\n    var mRisk = Math.min(riskProduct, M_LIM);\n    var hours = state.hours;\n    var numerator = hours * state.mTech * mRisk * state.urgency * state.rate;\n    var price = numerator \/ state.discount;\n    return {\n      hours: hours,\n      mTech: state.mTech,\n      mRisk: mRisk,\n      urgency: state.urgency,\n      rate: state.rate,\n      discount: state.discount,\n      hoursEffective: hours * state.mTech * mRisk * state.urgency,\n      price: price,\n      gross: numerator\n    };\n  }\n\n  function render(){\n    var q = quote();\n    root.querySelector(\"#mg-price\").textContent = fmt(q.price) + \" \u20bd\";\n    rateLabel.textContent = fmt(q.rate) + \" \u20bd\/\u0447\";\n    root.querySelector(\"#mg-bd-h\").textContent = fmt(q.hours) + \" \u0447\";\n    root.querySelector(\"#mg-bd-he\").textContent = fmtN(q.hoursEffective, 1) + \" \u0447\";\n    root.querySelector(\"#mg-bd-m\").textContent = \"\u00d7 \" + fmtN(q.mTech * q.mRisk * q.urgency, 2);\n    root.querySelector(\"#mg-bd-r\").textContent = fmt(q.rate) + \" \u20bd\/\u0447\";\n    var saveEl = root.querySelector(\"#mg-save\");\n    if (q.discount > 1) {\n      saveEl.innerHTML = \"\u0421\u043a\u0438\u0434\u043a\u0430 \u043b\u043e\u044f\u043b\u044c\u043d\u043e\u0441\u0442\u0438: \u0431\u044b\u043b\u043e <s>\" + fmt(q.gross) + \" \u20bd<\/s>, \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u044f <strong>\" + fmt(q.gross - q.price) + \" \u20bd<\/strong>\";\n    } else {\n      saveEl.textContent = \"\u041e\u0440\u0438\u0435\u043d\u0442\u0438\u0440 \u0434\u043b\u044f \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044f. \u0424\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0446\u0435\u043d\u0430 \u043f\u043e\u0441\u043b\u0435 \u0443\u0442\u043e\u0447\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u0430 \u0440\u0430\u0431\u043e\u0442.\";\n    }\n  }\n\n  render();\n  }\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\"DOMContentLoaded\", mgEngCalcBoot);\n  } else {\n    mgEngCalcBoot();\n  }\n})();\n<\/script>\n<\/div>\n\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<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-1\" style=\"font-style:normal;font-weight:400\"><strong><strong>\u041a\u0430\u043a \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c?<\/strong><\/strong><\/h2>\n\n\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700;800&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* \u2705 Scoped reset \u2014 does NOT leak into WordPress *\/\n.mg-workflow,\n.mg-workflow *,\n.mg-workflow *::before,\n.mg-workflow *::after {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n\/* \u2705 NO body\/html rules \u2014 inherits WP theme *\/\n.mg-workflow {\n  \/* CSS Variables scoped to .mg-workflow *\/\n  --line-bg: #1e2530;\n  --text: #e9edf5;\n  --muted: #a8b2c1;\n  --card-bg: rgba(255,255,255,0.03);\n  --card-border: 1px solid rgba(255,255,255,0.08);\n  --accent-orange: #ff6b35;\n  --accent-yellow: #f7931e;\n  --accent-green: #9fe870;\n  --glow-orange: rgba(255,107,53,0.6);\n  --glow-green: rgba(159,232,112,0.6);\n  --timeline-center: 50%;\n  --rail-width: 6px;\n  --dot-size: 20px;\n  --endpoint-size: 32px;\n  --card-gap: 60px;\n  --card-max-width: 920px;\n\n  position: relative;\n  z-index: 1;\n  color: var(--text);\n  font-family: \"Manrope\", \"Segoe UI\", sans-serif;\n  -webkit-font-smoothing: antialiased;\n  \n  \/* \u2705 Header method: max-width + margin:auto + padding for edge gap *\/\n  max-width: 1400px;\n  margin: 0 auto;\n  padding: clamp(2.5rem, 4vw, 3.5rem) 25px clamp(3.5rem, 5vw, 5rem);\n}\n\n.mg-workflow .timeline {\n  position: relative;\n  max-width: 1360px;\n  margin: 0 auto;\n  overflow: visible;\n}\n\n\/* \u2500\u2500 Rail \u2500\u2500 *\/\n.mg-workflow .rail-container {\n  position: absolute;\n  top: 0;\n  left: var(--timeline-center);\n  width: var(--rail-width);\n  height: 100%;\n  transform: translateX(-50%);\n  pointer-events: none;\n  z-index: 0;\n}\n\n.mg-workflow .rail {\n  position: absolute;\n  top: calc(var(--endpoint-size) \/ 2 + 35px);\n  bottom: calc(var(--endpoint-size) \/ 2 + 35px);\n  left: 0;\n  width: 100%;\n  background: var(--line-bg);\n  border-radius: var(--rail-width);\n}\n\n.mg-workflow .rail-progress {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 0%;\n  background: linear-gradient(180deg, #ff6b35 0%, #f7931e 50%, #9fe870 100%);\n  border-radius: var(--rail-width);\n  transition: height 0.05s linear;\n}\n\n.mg-workflow .rail-glow {\n  position: absolute;\n  left: 50%;\n  top: 0%;\n  transform: translate(-50%, -50%);\n  width: 50px;\n  height: 50px;\n  background: radial-gradient(circle, var(--glow-orange) 0%, transparent 70%);\n  border-radius: 50%;\n  opacity: 0.9;\n  pointer-events: none;\n  transition: top 0.05s linear;\n}\n\n\/* \u2500\u2500 Endpoints \u2500\u2500 *\/\n.mg-workflow .endpoint {\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 70px;\n  z-index: 5;\n}\n\n.mg-workflow .endpoint-circle {\n  position: absolute;\n  left: var(--timeline-center);\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--endpoint-size);\n  height: var(--endpoint-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.mg-workflow .endpoint-core {\n  width: var(--endpoint-size);\n  height: var(--endpoint-size);\n  border-radius: 50%;\n  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);\n  box-shadow: \n    0 0 20px var(--glow-orange), \n    0 0 40px var(--glow-orange),\n    0 0 60px rgba(255,107,53,0.3);\n  z-index: 2;\n}\n\n.mg-workflow .endpoint.finish .endpoint-core {\n  background: linear-gradient(135deg, #9fe870 0%, #7ed957 100%);\n  box-shadow: \n    0 0 20px var(--glow-green), \n    0 0 40px var(--glow-green),\n    0 0 60px rgba(159,232,112,0.3);\n}\n\n.mg-workflow .endpoint-pulse {\n  position: absolute;\n  width: var(--endpoint-size);\n  height: var(--endpoint-size);\n  border-radius: 50%;\n  border: 2px solid var(--accent-orange);\n  animation: mg-wf-pulse 2s ease-out infinite;\n}\n\n.mg-workflow .endpoint.finish .endpoint-pulse { border-color: var(--accent-green); }\n\n@keyframes mg-wf-pulse {\n  0%   { transform: scale(1); opacity: 1; }\n  100% { transform: scale(2.5); opacity: 0; }\n}\n\n.mg-workflow .endpoint-label {\n  position: absolute;\n  font-size: 14px;\n  font-weight: 800;\n  letter-spacing: 3px;\n  white-space: nowrap;\n}\n\n.mg-workflow .endpoint.start .endpoint-label {\n  left: calc(var(--timeline-center) + var(--endpoint-size) \/ 2 + 20px);\n  color: var(--accent-orange);\n  text-shadow: 0 0 20px var(--glow-orange);\n}\n\n.mg-workflow .endpoint.finish .endpoint-label {\n  right: calc(100% - var(--timeline-center) + var(--endpoint-size) \/ 2 + 20px);\n  color: var(--accent-green);\n  text-shadow: 0 0 20px var(--glow-green);\n}\n\n\/* \u2500\u2500 Timeline items \u2500\u2500 *\/\n.mg-workflow .item {\n  position: relative;\n  width: 100%;\n  padding: 24px 0;\n  display: flex;\n  opacity: 0;\n  transform: translateY(40px);\n  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),\n              transform 0.6s cubic-bezier(0.4,0,0.2,1);\n}\n\n.mg-workflow .item.visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.mg-workflow .item.left {\n  justify-content: flex-start;\n  padding-right: calc(var(--timeline-center) + var(--card-gap));\n}\n\n.mg-workflow .item.right {\n  justify-content: flex-end;\n  padding-left: calc(var(--timeline-center) + var(--card-gap));\n}\n\n\/* \u2500\u2500 Dots \u2500\u2500 *\/\n.mg-workflow .dot {\n  position: absolute;\n  left: var(--timeline-center);\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--dot-size);\n  height: var(--dot-size);\n  z-index: 5;\n}\n\n.mg-workflow .dot-core {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: var(--dot-size);\n  height: var(--dot-size);\n  border-radius: 50%;\n  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);\n  box-shadow: 0 0 15px var(--glow-orange);\n  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);\n}\n\n.mg-workflow .dot-ring {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: calc(var(--dot-size) + 16px);\n  height: calc(var(--dot-size) + 16px);\n  border-radius: 50%;\n  border: 2px solid rgba(255,107,53,0.3);\n  opacity: 0;\n  transition: all 0.4s ease;\n}\n\n.mg-workflow .item.active .dot-core {\n  width: calc(var(--dot-size) + 6px);\n  height: calc(var(--dot-size) + 6px);\n  background: linear-gradient(135deg, #f7931e 0%, #9fe870 100%);\n  box-shadow: \n    0 0 25px var(--glow-orange), \n    0 0 50px var(--glow-orange);\n}\n\n.mg-workflow .item.active .dot-ring {\n  opacity: 1;\n  border-color: rgba(247,147,30,0.6);\n  animation: mg-wf-dot-pulse 1.5s ease-out infinite;\n}\n\n@keyframes mg-wf-dot-pulse {\n  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }\n  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }\n}\n\n\/* \u2500\u2500 Cards \u2500\u2500 *\/\n.mg-workflow .card {\n  background: var(--card-bg);\n  backdrop-filter: blur(16px);\n  -webkit-backdrop-filter: blur(16px);\n  border-radius: 20px;\n  padding: 28px 32px;\n  box-shadow: 0 4px 30px rgba(0,0,0,0.3);\n  border: var(--card-border);\n  max-width: var(--card-max-width);\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  transition: box-shadow 0.3s ease, border-color 0.3s ease;\n}\n\n.mg-workflow .card::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, transparent, rgba(255,107,53,0.4), transparent);\n  opacity: 0;\n  transition: opacity 0.4s ease;\n}\n\n.mg-workflow .item.active .card::before { opacity: 1; }\n\n.mg-workflow .card:hover {\n  box-shadow: 0 8px 50px rgba(255,107,53,0.15);\n  border-color: rgba(255,107,53,0.2);\n}\n\n.mg-workflow .step-number {\n  position: absolute;\n  top: 12px;\n  right: 16px;\n  font-size: 12px;\n  font-weight: 800;\n  color: rgba(255,107,53,0.4);\n  letter-spacing: 1px;\n}\n\n.mg-workflow .title {\n  margin: 2px 0 8px;\n  font-weight: 700;\n  font-size: 17px;\n  color: #fff;\n  line-height: 1.3;\n}\n\n.mg-workflow .desc {\n  color: var(--muted);\n  line-height: 1.55;\n  font-size: 14px;\n}\n\n\/* \u2500\u2500 In-card button \u2500\u2500 *\/\n.mg-workflow .card-btn-wrap { margin-top: 18px; }\n\n.mg-workflow .card-btn {\n  --mg-gold: #F2B839;\n  --mg-navy-deep: #0F1E3C;\n  --btn-height: 46px;\n  --btn-radius: 26px;\n  --circle-size: 34px;\n  --circle-offset: 6px;\n  --speed: 0.45s;\n  --ease: cubic-bezier(0.4,0,0.15,1);\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  height: var(--btn-height);\n  padding: 0 calc(var(--circle-size) + var(--circle-offset) + 12px) 0 22px;\n  border: 2px solid rgba(242,184,57,0.25);\n  border-radius: var(--btn-radius);\n  background: rgba(242,184,57,0.08);\n  cursor: pointer;\n  text-decoration: none;\n  overflow: hidden;\n  font-family: 'Manrope', sans-serif;\n  transition:\n    border-color var(--speed) var(--ease),\n    box-shadow var(--speed) var(--ease);\n  -webkit-tap-highlight-color: transparent;\n}\n\n.mg-workflow .card-btn::before {\n  content: '';\n  position: absolute;\n  right: calc(var(--circle-offset) + var(--circle-size) \/ 2);\n  top: 50%;\n  width: var(--circle-size);\n  height: var(--circle-size);\n  background: var(--mg-gold);\n  border-radius: 50%;\n  transform: translate(50%, -50%) scale(1);\n  transition: transform var(--speed) var(--ease);\n  z-index: 1;\n  pointer-events: none;\n}\n\n.mg-workflow .card-btn:hover::before { transform: translate(50%, -50%) scale(8); }\n.mg-workflow .card-btn:hover {\n  border-color: var(--mg-gold);\n  box-shadow: 0 6px 24px rgba(242,184,57,0.3);\n}\n\n.mg-workflow .card-btn__text {\n  position: relative;\n  z-index: 2;\n  font-size: 14px;\n  font-weight: 600;\n  color: #f7931e;\n  white-space: nowrap;\n  letter-spacing: -0.01em;\n  line-height: 1;\n  transition: color var(--speed) var(--ease);\n  pointer-events: none;\n}\n\n.mg-workflow .card-btn:hover .card-btn__text { color: var(--mg-navy-deep); }\n\n.mg-workflow .card-btn__arrow {\n  position: absolute;\n  z-index: 3;\n  right: var(--circle-offset);\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--circle-size);\n  height: var(--circle-size);\n  border-radius: 50%;\n  background: var(--mg-gold);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background var(--speed) var(--ease);\n  pointer-events: none;\n}\n\n.mg-workflow .card-btn:hover .card-btn__arrow { background: transparent; }\n\n.mg-workflow .card-btn__arrow svg {\n  width: 15px;\n  height: 15px;\n  stroke: var(--mg-navy-deep);\n  stroke-width: 2.5;\n  fill: none;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  transition: transform var(--speed) var(--ease);\n}\n\n.mg-workflow .card-btn:hover .card-btn__arrow svg { transform: translateX(3px); }\n\n\/* \u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550 *\/\n@media (max-width: 1200px) {\n  .mg-workflow { --card-max-width: 680px; }\n}\n\n@media (max-width: 900px) {\n  .mg-workflow {\n    --timeline-center: 30px;\n    --dot-size: 18px;\n    --endpoint-size: 28px;\n    --card-gap: 40px;\n    --card-max-width: 100%;\n    padding-left: 16px;\n    padding-right: 16px;\n  }\n  .mg-workflow .item.left,\n  .mg-workflow .item.right {\n    justify-content: flex-start;\n    padding-left: calc(var(--timeline-center) + var(--card-gap));\n    padding-right: 0;\n  }\n  .mg-workflow .card { max-width: 100%; }\n  .mg-workflow .endpoint.start .endpoint-label,\n  .mg-workflow .endpoint.finish .endpoint-label {\n    left: calc(var(--timeline-center) + var(--endpoint-size) \/ 2 + 16px);\n    right: auto;\n  }\n}\n\n@media (max-width: 768px) {\n  .mg-workflow { padding-left: 12px; padding-right: 12px; }\n}\n\n@media (max-width: 600px) {\n  .mg-workflow {\n    --timeline-center: 24px;\n    --rail-width: 4px;\n    --dot-size: 16px;\n    --endpoint-size: 24px;\n    --card-gap: 30px;\n    padding-top: clamp(1.875rem, 3vw, 2.5rem);\n    padding-bottom: clamp(2.5rem, 4vw, 3.75rem);\n  }\n  .mg-workflow .item { padding: 18px 0; }\n  .mg-workflow .item.left,\n  .mg-workflow .item.right {\n    padding-left: calc(var(--timeline-center) + var(--card-gap));\n    padding-right: 8px;\n  }\n  .mg-workflow .card {\n    padding: 18px;\n    border-radius: 16px;\n  }\n  .mg-workflow .title { font-size: 15px; }\n  .mg-workflow .desc { font-size: 13px; }\n  .mg-workflow .step-number { font-size: 10px; }\n  .mg-workflow .endpoint-label {\n    font-size: 11px;\n    letter-spacing: 2px;\n  }\n  .mg-workflow .endpoint.start .endpoint-label,\n  .mg-workflow .endpoint.finish .endpoint-label {\n    left: calc(var(--timeline-center) + var(--endpoint-size) \/ 2 + 12px);\n    right: auto;\n  }\n  .mg-workflow .endpoint { height: 55px; }\n  .mg-workflow .rail {\n    top: calc(var(--endpoint-size) \/ 2 + 27px);\n    bottom: calc(var(--endpoint-size) \/ 2 + 27px);\n  }\n}\n\n@media (max-width: 480px) {\n  .mg-workflow { padding-left: 8px; padding-right: 8px; }\n}\n\n@media (max-width: 380px) {\n  .mg-workflow {\n    --timeline-center: 20px;\n    --dot-size: 14px;\n    --endpoint-size: 20px;\n    --card-gap: 24px;\n  }\n  .mg-workflow .item.left,\n  .mg-workflow .item.right {\n    padding-left: calc(var(--timeline-center) + var(--card-gap));\n  }\n  .mg-workflow .card { padding: 14px; }\n  .mg-workflow .title { font-size: 14px; }\n  .mg-workflow .desc { font-size: 12px; }\n  .mg-workflow .endpoint { height: 45px; }\n  .mg-workflow .rail {\n    top: calc(var(--endpoint-size) \/ 2 + 22px);\n    bottom: calc(var(--endpoint-size) \/ 2 + 22px);\n  }\n}\n\n@media (hover: none) {\n  .mg-workflow .card-btn:active::before { transform: translate(50%, -50%) scale(8); }\n  .mg-workflow .card-btn:active { border-color: var(--mg-gold); }\n  .mg-workflow .card-btn:active .card-btn__text { color: var(--mg-navy-deep); }\n  .mg-workflow .card-btn:active .card-btn__arrow { background: transparent; }\n  .mg-workflow .card-btn:active .card-btn__arrow svg { transform: translateX(3px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mg-workflow .item,\n  .mg-workflow .card,\n  .mg-workflow .dot-core,\n  .mg-workflow .rail-progress,\n  .mg-workflow .rail-glow {\n    transition: none;\n  }\n  .mg-workflow .endpoint-pulse,\n  .mg-workflow .item.active .dot-ring {\n    animation: none;\n  }\n  .mg-workflow .item {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n@media (max-height: 500px) and (orientation: landscape) {\n  .mg-workflow .item { padding: 14px 0; }\n  .mg-workflow .endpoint { height: 40px; }\n}\n<\/style>\n\n<div class=\"mg-workflow\">\n  <div class=\"timeline\" id=\"mgWfTimeline\">\n    \n    <div class=\"endpoint start\" id=\"mgWfTimelineStart\">\n      <div class=\"endpoint-circle\">\n        <div class=\"endpoint-pulse\"><\/div>\n        <div class=\"endpoint-core\"><\/div>\n      <\/div>\n      <span class=\"endpoint-label\">\u0421\u0422\u0410\u0420\u0422<\/span>\n    <\/div>\n\n    <div class=\"rail-container\">\n      <div class=\"rail\" aria-hidden=\"true\">\n        <div class=\"rail-progress\"><\/div>\n        <div class=\"rail-glow\"><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"item right\" data-animate>\n      <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n      <div class=\"card\">\n        <div class=\"step-number\">01<\/div>\n        <div>\n          <div class=\"title\">\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f<\/div>\n          <p class=\"desc\">\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0439\u0442\u0435\u0441\u044c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u043e \u0432\u0441\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b.<\/p>\n          <div class=\"card-btn-wrap\">\n            <a href=\"https:\/\/n8n.mechanogurus.ru\/form\/105adc81-c50a-40f0-ab54-f0b65857d49e\" class=\"card-btn\" target=\"_blank\" rel=\"noopener noreferrer\">\n              <span class=\"card-btn__text\">\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f<\/span>\n              <span class=\"card-btn__arrow\">\n                <svg viewBox=\"0 0 24 24\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"13 6 19 12 13 18\"\/><\/svg>\n              <\/span>\n            <\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"item left\" data-animate>\n      <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n      <div class=\"card\">\n        <div class=\"step-number\">02<\/div>\n        <div>\n          <div class=\"title\">\u041e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 LAKI<\/div>\n          <p class=\"desc\">\u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0435 \u0441 \u043d\u0430\u0448\u0438\u043c \u0418\u0418-\u0430\u0441\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043e\u043c LAKI \u2014 \u043e\u043d \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0437\u0430\u044f\u0432\u043a\u0443 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438 \u043e\u0442\u0432\u0435\u0442\u0438\u0442 \u043d\u0430 \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0422\u0417, \u044d\u0442\u043e \u043d\u0430\u043c \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0436\u0435\u0442!<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"item right\" data-animate>\n      <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n      <div class=\"card\">\n        <div class=\"step-number\">03<\/div>\n        <div>\n          <div class=\"title\">\u041f\u0430\u0440\u0441\u0438\u043d\u0433 \u0422\u0417<\/div>\n          <p class=\"desc\">\u0412\u0430\u0448\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f (\u043f\u0430\u0440\u0441\u0438\u043d\u0433) LAKI. \u041f\u0430\u0440\u0441\u0438\u043d\u0433 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043d\u0430\u0448\u0438\u043c \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u0430\u043c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0432 \u0441\u0443\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"item left\" data-animate>\n      <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n      <div class=\"card\">\n        <div class=\"step-number\">04<\/div>\n        <div>\n          <div class=\"title\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 WBS<\/div>\n          <p class=\"desc\">LAKI \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442 (WBS) \u0438\u0437 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u0443\u043b\u043e\u0436\u0438\u0442\u044c\u0441\u044f \u0432 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0440\u043e\u043a\u0438.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"item right\" data-animate>\n      <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n      <div class=\"card\">\n        <div class=\"step-number\">05<\/div>\n        <div>\n          <div class=\"title\">\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u0430\u044f\u0432\u043a\u0443<\/div>\n          <p class=\"desc\">\u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0432\u0430\u0448\u0443 \u0437\u0430\u044f\u0432\u043a\u0443, \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e \u0440\u0435\u0448\u0430\u0435\u0442 \u0432\u0430\u0448 \u0432\u043e\u043f\u0440\u043e\u0441.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"item left\" data-animate>\n      <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n      <div class=\"card\">\n        <div class=\"step-number\">06<\/div>\n        <div>\n          <div class=\"title\">\u042d\u0441\u043a\u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/div>\n          <p class=\"desc\">\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u0441\u043a\u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"item right\" data-animate>\n      <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n      <div class=\"card\">\n        <div class=\"step-number\">07<\/div>\n        <div>\n          <div class=\"title\">\u041e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438<\/div>\n          <p class=\"desc\">\u041e\u0431\u0441\u0443\u0436\u0434\u0430\u0435\u043c \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WBS \u2014 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0435 \u0446\u0435\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0435\u0437 \u0441\u043a\u0440\u044b\u0442\u044b\u0445 \u043f\u043b\u0430\u0442\u0435\u0436\u0435\u0439.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"item left\" data-animate>\n      <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n      <div class=\"card\">\n        <div class=\"step-number\">08<\/div>\n        <div>\n          <div class=\"title\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0430<\/div>\n          <p class=\"desc\">\u0415\u0441\u043b\u0438 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u0430\u0441 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044e \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0430 \u0438 \u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c \u0432\u0441\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u0430.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"item right\" data-animate>\n      <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n      <div class=\"card\">\n        <div class=\"step-number\">09<\/div>\n        <div>\n          <div class=\"title\">\u0421\u0442\u0430\u0440\u0442 \u0440\u0430\u0431\u043e\u0442\u044b &#038; \u0414\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u043e\u0440\u0442\u0430\u043b\u0443<\/div>\n          <p class=\"desc\">\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430! \u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0451\u043d\u043d\u043e\u043c\u0443 \u043f\u043b\u0430\u043d\u0443. \u0412\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u043f\u043e\u043b\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043f\u043e\u0440\u0442\u0430\u043b\u0443, \u0433\u0434\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"item left\" data-animate>\n      <div class=\"dot\"><div class=\"dot-ring\"><\/div><div class=\"dot-core\"><\/div><\/div>\n      <div class=\"card\">\n        <div class=\"step-number\">10<\/div>\n        <div>\n          <div class=\"title\">\u0421\u0434\u0430\u0447\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/div>\n          <p class=\"desc\">\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0443 \u0441 \u043f\u043e\u043b\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"endpoint finish\" id=\"mgWfTimelineFinish\">\n      <div class=\"endpoint-circle\">\n        <div class=\"endpoint-pulse\"><\/div>\n        <div class=\"endpoint-core\"><\/div>\n      <\/div>\n      <span class=\"endpoint-label\">\u0424\u0418\u041d\u0418\u0428<\/span>\n    <\/div>\n\n  <\/div>\n<\/div><!-- \/.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","protected":false},"excerpt":{"rendered":"<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u0439 \u0438 \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u041e\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0434\u043e 3D-\u043c\u043e\u0434\u0435\u043b\u0438, \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 \u0438 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f. \u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u2192 \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 \u041c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u0438 \u0443\u0437\u043b\u044b \u0441 \u043d\u0443\u043b\u044f, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u0437\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u043d\u0430 \u0440\u0430\u043d\u043d\u0438\u0445 \u044d\u0442\u0430\u043f\u0430\u0445. \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0443\u0437\u043b\u043e\u0432 \u0438 \u0441\u0431\u043e\u0440\u043e\u043a (DFM \/ DFA) \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0447\u0451\u0442\u044b \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 [&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-blank-with-header","meta":{"footnotes":""},"class_list":["post-1431","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u0418\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u043e\u0432\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438 &#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\/?page_id=1431\" \/>\n<meta property=\"og:locale\" content=\"ru_RU\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0418\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u043e\u0432\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438 &#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 \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u041e\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0434\u043e 3D-\u043c\u043e\u0434\u0435\u043b\u0438, \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 \u0438 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f. \u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u2192 \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 \u041c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u0438 \u0443\u0437\u043b\u044b \u0441 \u043d\u0443\u043b\u044f, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u0437\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u043d\u0430 \u0440\u0430\u043d\u043d\u0438\u0445 \u044d\u0442\u0430\u043f\u0430\u0445. \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0443\u0437\u043b\u043e\u0432 \u0438 \u0441\u0431\u043e\u0440\u043e\u043a (DFM \/ DFA) \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0447\u0451\u0442\u044b \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mechanogurus.ru\/?page_id=1431\" \/>\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-11T07:28:31+00:00\" \/>\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=\"7 \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\\\/?page_id=1431\",\"url\":\"https:\\\/\\\/mechanogurus.ru\\\/?page_id=1431\",\"name\":\"\u0418\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u043e\u0432\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438 &#8211; \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/#website\"},\"datePublished\":\"2025-07-17T11:11:41+00:00\",\"dateModified\":\"2026-09-11T07:28:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/?page_id=1431#breadcrumb\"},\"inLanguage\":\"ru-RU\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/mechanogurus.ru\\\/?page_id=1431\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/mechanogurus.ru\\\/?page_id=1431#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/mechanogurus.ru\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0418\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u043e\u0432\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438\"}]},{\"@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":"\u0418\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u043e\u0432\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438 &#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\/?page_id=1431","og_locale":"ru_RU","og_type":"article","og_title":"\u0418\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u043e\u0432\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438 &#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 \u043e\u0431\u043e\u0440\u0443\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u041e\u0442 \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0434\u043e 3D-\u043c\u043e\u0434\u0435\u043b\u0438, \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 \u0438 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0438\u0437\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f. \u041e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u2192 \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 \u041c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u0438 \u0443\u0437\u043b\u044b \u0441 \u043d\u0443\u043b\u044f, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044f \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u0437\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u043d\u0430 \u0440\u0430\u043d\u043d\u0438\u0445 \u044d\u0442\u0430\u043f\u0430\u0445. \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u0430\u044f \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0438\u0437\u0434\u0435\u043b\u0438\u044f \u041f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0443\u0437\u043b\u043e\u0432 \u0438 \u0441\u0431\u043e\u0440\u043e\u043a (DFM \/ DFA) \u0418\u043d\u0436\u0435\u043d\u0435\u0440\u043d\u044b\u0435 \u0440\u0430\u0441\u0447\u0451\u0442\u044b \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 [&hellip;]","og_url":"https:\/\/mechanogurus.ru\/?page_id=1431","og_site_name":"\u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441","article_modified_time":"2026-09-11T07:28:31+00:00","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":"7 \u043c\u0438\u043d\u0443\u0442"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mechanogurus.ru\/?page_id=1431","url":"https:\/\/mechanogurus.ru\/?page_id=1431","name":"\u0418\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u043e\u0432\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438 &#8211; \u041c\u0435\u0445\u0430\u043d\u043e\u0433\u0443\u0440\u0443\u0441","isPartOf":{"@id":"https:\/\/mechanogurus.ru\/#website"},"datePublished":"2025-07-17T11:11:41+00:00","dateModified":"2026-09-11T07:28:31+00:00","breadcrumb":{"@id":"https:\/\/mechanogurus.ru\/?page_id=1431#breadcrumb"},"inLanguage":"ru-RU","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mechanogurus.ru\/?page_id=1431"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mechanogurus.ru\/?page_id=1431#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mechanogurus.ru\/"},{"@type":"ListItem","position":2,"name":"\u0418\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u043e\u0432\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438"}]},{"@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\/1431","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=1431"}],"version-history":[{"count":162,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages\/1431\/revisions"}],"predecessor-version":[{"id":4871,"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=\/wp\/v2\/pages\/1431\/revisions\/4871"}],"wp:attachment":[{"href":"https:\/\/mechanogurus.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}