.mf{background:#f6f7f8;color:#272b32;font-size:17px;line-height:1.8}.mf *{box-sizing:border-box}.mf-wrap{width:min(1200px,calc(100% - 48px));margin:auto}.mf-section{padding:72px 0}.mf-split{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:center}.mf h1{font-size:clamp(34px,4vw,52px);line-height:1.3;letter-spacing:0;margin:16px 0 24px}.mf h2{font-size:34px;line-height:1.45;letter-spacing:0;margin:0 0 24px}.mf h3{font-size:21px;line-height:1.5;margin:0 0 12px}.mf p{margin:0 0 20px;color:#626b76}.mf .mf-label{color:#b13e70;font-size:12px;letter-spacing:2px;margin-bottom:24px}.mf-hero,.mf-dark{background:#191d23;color:#f6f7f8}.mf-dark p,.mf-hero p{color:#b9c2cc}.mf-hero{padding:64px 0}.mf em{font-style:normal;color:#d78eaf}.mf .mf-lead{font-size:20px;color:#eef1f4}.mf-actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:28px}.mf .mf-btn{display:inline-flex;background:#b13e70;color:white;border:1px solid #b13e70;border-radius:5px;padding:13px 23px;font-size:16px;transition:background .2s}.mf .mf-btn:hover{background:#8b2853}.mf-gray{background:#e9edf1}.mf-machine{position:relative;height:380px;overflow:hidden;border:1px solid #7893ad44;border-radius:8px;background:radial-gradient(ellipse at center,#43576c55,transparent 70%);perspective:900px}.mf-gridlines{position:absolute;inset:0;background:linear-gradient(#7893ad15 1px,transparent 1px),linear-gradient(90deg,#7893ad15 1px,transparent 1px);background-size:32px 32px}.mf-assembly{position:absolute;inset:24% 22%;transform:rotateX(55deg) rotateZ(-30deg);animation:mf-drift 9s ease-in-out infinite}.mf-assembly i{position:absolute;inset:0;border:18px solid #8195a7;border-radius:14px;background:linear-gradient(135deg,#bac8d233,#27323d);box-shadow:4px 6px 0 #36434f,12px 17px 24px #0008;transform:translateZ(0)}.mf-assembly i:nth-child(2){transform:translateZ(24px);inset:10%;border-width:12px}.mf-assembly i:nth-child(3){transform:translateZ(48px);inset:20%;border-color:#c1cbd3}.mf-assembly i:nth-child(4){transform:translateZ(72px);inset:30%;border-color:#b13e70}.mf-assembly i:nth-child(5){transform:translateZ(96px);inset:38%;border-color:#a5b7c6}.mf-assembly i:nth-child(6){transform:translateZ(115px);inset:43%;border:5px solid #e4eef5}.mf-assembly{transform-style:preserve-3d}.mf-tag{position:absolute;top:25px;left:25px;font-size:12px;letter-spacing:2px;color:#bdcbd8}.mf-tag-bottom{top:auto;bottom:50px}.mf-machine>small{position:absolute;bottom:20px;left:25px;color:#8796a5;font-size:12px}.mf-issues article{display:flex;gap:22px;padding:22px 0;border-bottom:1px solid #d2d7dd}.mf-issues article>span{color:#b13e70;font-size:14px}.mf-issues p{margin:0}.mf-tabs{display:flex;border-bottom:1px solid #aeb8c5;gap:0;margin-top:32px}.mf-tabs button{flex:1;font:inherit;font-size:16px;line-height:1.6;padding:16px 12px;border:0;border-bottom:3px solid transparent;background:transparent;color:inherit;cursor:pointer}.mf-tabs button[aria-selected=true]{border-color:#b13e70;color:#b13e70;background:#b13e700a}.mf [role=tabpanel]{display:grid;grid-template-columns:180px 1fr;gap:40px;padding:36px 0;align-items:center;animation:mf-in .3s ease}.mf [hidden]{display:none!important}.mf-big{font-size:100px;line-height:1;color:#7893ad66;font-weight:600}.mf [role=tabpanel] small{font-size:14px;color:#8a4767}.mf-feature [role=tabpanel]{grid-template-columns:1.1fr 1fr}.mf-screen{padding:30px;background:#e9edf1;color:#272b32;border-radius:8px;border-top:10px solid #7893ad}.mf-screen h3{margin-top:18px}.mf-screen p{color:#626b76;border-top:1px solid #c4ccd5;padding-top:12px;font-size:16px}.mf-screen b{color:#b13e70;margin-right:16px}.mf-screen span{font-size:12px;color:#626b76}.mf-marketing{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:30px}.mf-marketing>a{padding:28px 0;border-top:1px solid #ccd2d9;transition:color .2s}.mf-marketing>a:hover{color:#b13e70}.mf-marketing small{color:#b13e70}.mf-marketing h3{margin-top:8px}.mf-timeline{margin:0;padding:0 0 0 24px;border-left:1px solid #b8c2cc;list-style:none}.mf-timeline li{position:relative;padding:12px 0 20px}.mf-timeline li:before{content:'';position:absolute;left:-29px;top:20px;width:9px;height:9px;background:#b13e70;border-radius:50%}.mf-related{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}.mf-related a{background:white;padding-bottom:24px;overflow:hidden;border-radius:6px}.mf-related img{display:block;width:100%;height:180px;object-fit:cover}.mf-related small,.mf-related h3,.mf-related span{display:block;margin:18px 22px 0}.mf-related small{color:#b13e70;font-size:14px}.mf-related span{font-size:15px}.mf-related a:hover h3{color:#b13e70}.mf-faq details{border-bottom:1px solid #ccd2d9;padding:18px 0}.mf-faq summary{cursor:pointer;font-size:18px}.mf-faq p{margin:18px 0 0}.mf a:focus-visible,.mf button:focus-visible,.mf summary:focus-visible{outline:2px solid #b13e70;outline-offset:4px}@keyframes mf-drift{50%{transform:rotateX(50deg) rotateZ(-24deg) translateY(-8px)}}@keyframes mf-in{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:none}}.mf-machine.is-paused .mf-assembly{animation-play-state:paused}@media(max-width:760px){.mf-wrap{width:calc(100% - 36px)}.mf-section{padding:44px 0}.mf-split{grid-template-columns:1fr;gap:28px}.mf h2{font-size:28px}.mf-hero{padding:40px 0}.mf-machine{height:260px}.mf [role=tabpanel],.mf-feature [role=tabpanel]{grid-template-columns:1fr;gap:18px;padding:24px 0}.mf-big{font-size:52px}.mf-tabs{flex-wrap:wrap}.mf-tabs button{flex:1 1 45%;padding:12px 6px}.mf-marketing,.mf-related{grid-template-columns:1fr}.mf-assembly{animation:none}.mf{font-size:17px}}@media(prefers-reduced-motion:reduce){.mf *{animation:none!important;transition:none!important}}
/* Photographic hero: preserve the machine and blend its edges into the section. */
.mf .mf-photo{height:auto;aspect-ratio:1.55;border:0;border-radius:0;background:none;perspective:none;isolation:isolate;mask-image:linear-gradient(to right,transparent,#000 8%,#000 94%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 94%,transparent)}
.mf-photo:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,#191d23,transparent 13%,transparent 82%,#191d23);z-index:2}
.mf-photo-motion{position:absolute;inset:0;animation:mf-photo-breathe 12s ease-in-out infinite;transform-origin:51% 49%}
.mf-photo-motion img{display:block;width:100%;height:100%;object-fit:cover;object-position:53% center;filter:brightness(.88) saturate(.82)}
.mf-process-glow{position:absolute;left:43%;top:36%;width:16%;height:29%;background:radial-gradient(ellipse,#c4edff44,transparent 70%);mix-blend-mode:screen;animation:mf-process-light 6s ease-in-out infinite;pointer-events:none}
@keyframes mf-photo-breathe{0%,100%{transform:scale(1.02) translateX(.4%)}50%{transform:scale(1.13) translateX(-1.4%) translateY(-.6%)}}
@keyframes mf-process-light{0%,100%{opacity:.2}50%{opacity:.85}}
.mf-photo.is-paused .mf-photo-motion,.mf-photo.is-paused .mf-process-glow{animation-play-state:paused}
@media(max-width:760px){.mf .mf-photo{aspect-ratio:1.65}.mf-photo-motion{animation:none}}
@media(prefers-reduced-motion:reduce){.mf-photo-motion,.mf-process-glow{animation:none}}
/* Elevated challenge section */
.mf-section:has(.mf-issues){position:relative;overflow:hidden;background:linear-gradient(120deg,#f4f6f8 0%,#eef1f4 48%,#e7ebef 100%)}
.mf-section:has(.mf-issues):before{content:'01';position:absolute;right:5%;top:18%;font-size:220px;line-height:1;font-weight:700;color:#7893ad0d;pointer-events:none}
.mf-section:has(.mf-issues) .mf-split{position:relative;z-index:1;align-items:start}.mf-section:has(.mf-issues) .mf-label{display:inline-flex;align-items:center;gap:14px}.mf-section:has(.mf-issues) .mf-label:before{content:'';width:34px;height:1px;background:#b13e70}.mf-section:has(.mf-issues) h2{font-size:clamp(31px,3.2vw,44px);max-width:470px}.mf-section:has(.mf-issues) .mf-split>div:first-child>p:last-child{max-width:390px;font-size:16px}
.mf-issues{position:relative;border-top:1px solid #bfc8d1}.mf-issues:before{content:'';position:absolute;left:28px;top:0;bottom:0;width:1px;background:linear-gradient(#b13e70,#bfc8d1 24%,transparent)}.mf-issues article{position:relative;gap:30px;padding:25px 0 25px 58px;border-bottom:1px solid #c7cfd7;transition:background .28s,padding-left .28s}.mf-issues article:before{content:'';position:absolute;left:23px;top:32px;width:11px;height:11px;border:2px solid #b13e70;border-radius:50%;background:#eef1f4;z-index:1}.mf-issues article:hover{background:linear-gradient(90deg,#ffffffaa,transparent);padding-left:66px}.mf-issues article>span{font-family:ui-monospace,monospace;font-size:13px;letter-spacing:1px;color:#b13e70;padding-top:4px}.mf-issues article h3{font-size:19px;margin:0 0 6px;color:#272b32}.mf-issues article p{font-size:15px;line-height:1.8;color:#68737e;max-width:650px}
@media(max-width:760px){.mf-section:has(.mf-issues):before{font-size:130px;top:8%}.mf-issues article{padding-left:48px}.mf-issues:before{left:20px}.mf-issues article:before{left:15px}}
/* Keep challenge indices on one line and align them with the timeline marker. */
.mf-issues article>span{display:block;flex:0 0 34px;width:34px;white-space:nowrap;text-align:left;font-variant-numeric:tabular-nums}
.mf-issues article{align-items:flex-start}
@media(max-width:760px){.mf-issues article>span{flex-basis:30px;width:30px}}
/* Slightly stronger cool-gray surface for the buyer journey section. */
.mf-section.mf-gray{background:linear-gradient(135deg,#e3e8ed 0%,#dde3e9 100%)}
.mf-section.mf-gray .mf-tabs button[aria-selected=true]{background:#b13e7014}
/* 3D mechanical arm accent for the dark website-tool section. */
.mf-tool-section{position:relative;overflow:hidden}.mf-arm-art{position:absolute;right:2%;top:-18px;width:330px;height:245px;pointer-events:none;opacity:.92;transform:rotate(-5deg);filter:drop-shadow(0 18px 22px #0006)}.mf-arm-art:before{content:"";position:absolute;inset:20px 0 0;background:radial-gradient(circle at 58% 48%,#b13e7030,transparent 48%),linear-gradient(135deg,transparent 48%,#7893ad12 49%,transparent 50%);border:1px solid #7893ad30;border-radius:50%;transform:rotate(-18deg) scaleY(.5)}.mf-arm-orbit{position:absolute;right:14px;top:24px;width:230px;height:110px;border:1px solid #7893ad66;border-radius:50%;transform:rotate(-18deg);animation:mf-arm-orbit 12s linear infinite}.mf-arm-base,.mf-arm-link,.mf-arm-joint,.mf-arm-gripper{position:absolute;display:block}.mf-arm-base{right:45px;bottom:25px;width:82px;height:24px;border:2px solid #9eacb8;background:linear-gradient(145deg,#617281,#232b34);border-radius:7px;transform:skewX(-18deg);box-shadow:0 8px 0 #10151a}.mf-arm-link{height:24px;border:2px solid #b9c5cd;background:linear-gradient(180deg,#aebec9,#465664);border-radius:10px;transform-origin:right center;box-shadow:0 5px 0 #18212a,0 0 18px #7893ad28}.mf-arm-link-a{right:92px;bottom:54px;width:138px;transform:rotate(-58deg);animation:mf-arm-a 7s ease-in-out infinite}.mf-arm-link-b{right:179px;bottom:135px;width:105px;transform:rotate(36deg);animation:mf-arm-b 7s ease-in-out infinite}.mf-arm-joint{width:42px;height:42px;border:5px solid #c8d2d9;border-radius:50%;background:radial-gradient(circle at 35% 30%,#dce7ed,#657786 50%,#202a33 52%);box-shadow:0 5px 0 #111820,0 0 18px #b13e7040}.mf-arm-joint-a{right:174px;bottom:104px}.mf-arm-joint-b{right:264px;bottom:164px;width:34px;height:34px}.mf-arm-gripper{right:300px;top:34px;width:32px;height:52px;border-left:7px solid #d6e0e5;border-right:7px solid #d6e0e5;border-bottom:7px solid #b13e70;transform:rotate(32deg);filter:drop-shadow(0 4px 0 #18212a);animation:mf-arm-grip 7s ease-in-out infinite}.mf-arm-art small{position:absolute;right:8px;bottom:0;font:10px/1.2 ui-monospace,monospace;letter-spacing:2px;color:#9fb1bf}.mf-dark .mf-arm-art~.mf-label{position:relative;z-index:1}.mf-dark .mf-arm-art~h2{position:relative;z-index:1;max-width:580px}.mf-dark .mf-arm-art~.mf-switch{position:relative;z-index:1;margin-top:34px}
@keyframes mf-arm-a{0%,100%{transform:rotate(-58deg)}50%{transform:rotate(-48deg)}}@keyframes mf-arm-b{0%,100%{transform:rotate(36deg)}50%{transform:rotate(23deg)}}@keyframes mf-arm-grip{0%,100%{transform:rotate(32deg)}50%{transform:rotate(24deg)}}@keyframes mf-arm-orbit{to{transform:rotate(342deg)}}
@media(max-width:900px){.mf-arm-art{right:-25px;top:-8px;transform:scale(.78) rotate(-5deg);transform-origin:top right;opacity:.55}.mf-dark .mf-arm-art~h2{max-width:500px}}
@media(max-width:760px){.mf-arm-art{position:relative;right:auto;top:auto;width:280px;height:175px;margin:0 0 8px auto;transform:scale(.72) rotate(-5deg);transform-origin:top right}.mf-dark .mf-arm-art~.mf-switch{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.mf-arm-art *{animation:none!important}}
/* Replace the abstract arm with a real industrial photograph. */
.mf-arm-art{position:absolute;right:0;top:-34px;width:430px;height:300px;overflow:hidden;pointer-events:none;opacity:.9;isolation:isolate;filter:drop-shadow(0 20px 28px #0008);transform:rotate(-2deg)}
.mf-arm-art:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#191d23 0%,transparent 28%,transparent 76%,#191d23 100%),linear-gradient(0deg,#191d23 0%,transparent 24%,transparent 78%,#191d23 100%);pointer-events:none}
.mf-arm-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:88% 52%;filter:brightness(.66) saturate(.9) contrast(1.05);animation:mf-arm-photo 15s ease-in-out infinite}
.mf-arm-scan{position:absolute;z-index:2;left:18%;right:10%;top:48%;height:1px;background:linear-gradient(90deg,transparent,#b13e70aa,transparent);box-shadow:0 0 14px #b13e7077;animation:mf-arm-scan 6s ease-in-out infinite}
.mf-arm-art small{position:absolute;z-index:3;right:18px;bottom:16px;font:10px/1.2 ui-monospace,monospace;letter-spacing:2px;color:#c6d2dc}
@keyframes mf-arm-photo{0%,100%{transform:scale(1.02) translateX(1%)}50%{transform:scale(1.1) translateX(-2%) translateY(-1%)}}
@keyframes mf-arm-scan{0%,100%{opacity:.15;transform:translateY(-45px)}50%{opacity:.8;transform:translateY(45px)}}
.mf-arm-art.is-paused img,.mf-arm-art.is-paused .mf-arm-scan{animation-play-state:paused}
@media(max-width:900px){.mf-arm-art{width:340px;height:235px;right:-20px;top:-15px;opacity:.58}}
@media(max-width:760px){.mf-arm-art{position:relative;right:auto;top:auto;width:100%;max-width:340px;height:190px;margin:-8px 0 10px auto;transform:none}.mf-arm-art img{animation:none}.mf-dark .mf-arm-art~.mf-label{display:block}}
@media(prefers-reduced-motion:reduce){.mf-arm-art img,.mf-arm-scan{animation:none}}
/* Constructed 3D arm: layered joints and links instead of a photographic overlay. */
.mf-arm-art{position:absolute;right:1%;top:-18px;width:430px;height:300px;pointer-events:none;isolation:isolate;perspective:900px;filter:drop-shadow(0 22px 26px #0008)}
.mf-arm-stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(55deg) rotateZ(-18deg);animation:mf-arm-stage 11s ease-in-out infinite}
.mf-arm-stage span{position:absolute;display:block;transform-style:preserve-3d}
.mf-arm-base{right:54px;bottom:36px;width:94px;height:30px;border-radius:8px;background:linear-gradient(145deg,#d6e0e5 0%,#718493 34%,#27333d 70%,#111920 100%);border:2px solid #b5c5cf;box-shadow:8px 11px 0 #10171d,0 0 22px #7893ad55;transform:translateZ(0) skewX(-12deg)}
.mf-arm-turn{right:82px;bottom:56px;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#eff7fb 0 10%,#a8bac5 11% 28%,#526674 30% 56%,#1c2730 58%);border:5px solid #c8d5dc;box-shadow:5px 7px 0 #111920;transform:translateZ(22px)}
.mf-arm-segment{height:30px;border-radius:14px;border:2px solid #cfdae0;background:linear-gradient(180deg,#e6eef2 0%,#9badb9 26%,#586a78 64%,#26333e 100%);box-shadow:6px 8px 0 #121b22,0 0 20px #7893ad40;transform-origin:right center}
.mf-arm-segment-a{right:103px;bottom:72px;width:148px;transform:translateZ(28px) rotate(-62deg);animation:mf-arm-link-a 7s ease-in-out infinite}
.mf-arm-elbow{right:214px;bottom:137px;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#f0f7fa,#9cafbb 30%,#4c5e6b 55%,#1c2730 57%);border:5px solid #ccd8de;box-shadow:5px 7px 0 #111920;transform:translateZ(39px);animation:mf-arm-elbow 7s ease-in-out infinite}
.mf-arm-segment-b{right:228px;bottom:155px;width:112px;transform:translateZ(42px) rotate(38deg);animation:mf-arm-link-b 7s ease-in-out infinite}
.mf-arm-wrist{right:312px;bottom:202px;width:35px;height:35px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#f0f7fa,#8195a2 42%,#27343e 44%);border:4px solid #c9d6de;box-shadow:4px 5px 0 #111920;transform:translateZ(53px)}
.mf-arm-tool{right:332px;top:48px;width:28px;height:62px;border-left:7px solid #dae5ea;border-right:7px solid #dae5ea;border-bottom:7px solid #b13e70;transform:translateZ(58px) rotate(26deg);filter:drop-shadow(4px 5px 0 #111920);animation:mf-arm-tool 7s ease-in-out infinite}
.mf-arm-art:before{content:"";position:absolute;inset:8px 10px 18px;background:radial-gradient(circle at 55% 48%,#b13e7030,transparent 45%);border:1px solid #7893ad33;border-radius:50%;transform:rotate(-17deg) scaleY(.5)}
.mf-arm-orbit{position:absolute;right:12px;top:25px;width:250px;height:122px;border:1px solid #7893ad66;border-radius:50%;transform:rotate(-18deg);animation:mf-arm-orbit 14s linear infinite}
.mf-arm-scan{position:absolute;z-index:4;left:18%;right:8%;top:52%;height:1px;background:linear-gradient(90deg,transparent,#b13e70aa,transparent);box-shadow:0 0 14px #b13e7077;animation:mf-arm-scan 6s ease-in-out infinite}
.mf-arm-art small{position:absolute;z-index:5;right:16px;bottom:12px;font:10px/1.2 ui-monospace,monospace;letter-spacing:2px;color:#c6d2dc}
@keyframes mf-arm-stage{0%,100%{transform:rotateX(55deg) rotateZ(-18deg) translateY(0)}50%{transform:rotateX(58deg) rotateZ(-14deg) translateY(-6px)}}
@keyframes mf-arm-link-a{0%,100%{transform:translateZ(28px) rotate(-62deg)}50%{transform:translateZ(28px) rotate(-54deg)}}
@keyframes mf-arm-elbow{0%,100%{transform:translateZ(39px) translateY(0)}50%{transform:translateZ(39px) translateY(-5px)}}
@keyframes mf-arm-link-b{0%,100%{transform:translateZ(42px) rotate(38deg)}50%{transform:translateZ(42px) rotate(28deg)}}
@keyframes mf-arm-tool{0%,100%{transform:translateZ(58px) rotate(26deg)}50%{transform:translateZ(58px) rotate(18deg)}}
@keyframes mf-arm-orbit{to{transform:rotate(342deg)}}
@keyframes mf-arm-scan{0%,100%{opacity:.15;transform:translateY(-42px)}50%{opacity:.8;transform:translateY(42px)}}
@media(max-width:900px){.mf-arm-art{width:350px;height:245px;right:-18px;top:-10px;transform:scale(.82);transform-origin:top right;opacity:.7}}
@media(max-width:760px){.mf-arm-art{position:relative;right:auto;top:auto;width:320px;height:205px;margin:-6px 0 8px auto;transform:scale(.82);transform-origin:top right}.mf-arm-stage{animation:none}.mf-arm-orbit,.mf-arm-scan{display:none}}
@media(prefers-reduced-motion:reduce){.mf-arm-stage,.mf-arm-link-a,.mf-arm-elbow,.mf-arm-link-b,.mf-arm-tool,.mf-arm-orbit,.mf-arm-scan{animation:none!important}}
/* Recognizable industrial robot silhouette: fixed pedestal, shoulder, arm and tool. */
.mf-arm-art{width:410px;height:310px;right:0;top:-12px;transform:none;opacity:.96}
.mf-arm-stage{inset:0;transform-style:preserve-3d;transform:rotateX(10deg) rotateY(-16deg) rotateZ(0deg);animation:mf-robot-breathe 10s ease-in-out infinite}
.mf-arm-base{right:34px;bottom:24px;width:112px;height:34px;transform:skewX(-8deg);border-radius:8px}
.mf-arm-turn{right:66px;bottom:49px;width:64px;height:64px;transform:translateZ(20px)}
.mf-arm-segment-a{right:91px;bottom:83px;width:146px;height:34px;transform-origin:right center;transform:translateZ(28px) rotate(-78deg);animation:mf-robot-upper 8s ease-in-out infinite}
.mf-arm-elbow{right:184px;bottom:191px;width:54px;height:54px;transform:translateZ(42px);animation:mf-robot-elbow 8s ease-in-out infinite}
.mf-arm-segment-b{right:202px;bottom:204px;width:132px;height:32px;transform-origin:right center;transform:translateZ(46px) rotate(23deg);animation:mf-robot-fore 8s ease-in-out infinite}
.mf-arm-wrist{right:317px;bottom:247px;width:40px;height:40px;transform:translateZ(58px)}
.mf-arm-tool{right:342px;top:35px;width:38px;height:70px;transform:translateZ(62px) rotate(15deg);animation:mf-robot-tool 8s ease-in-out infinite}
.mf-arm-art:before{inset:20px 12px 20px;background:radial-gradient(circle at 58% 49%,#b13e7030,transparent 46%);border:1px solid #7893ad33;transform:rotate(-8deg) scaleY(.58)}
@keyframes mf-robot-breathe{0%,100%{transform:rotateX(10deg) rotateY(-16deg) translateY(0)}50%{transform:rotateX(12deg) rotateY(-13deg) translateY(-5px)}}
@keyframes mf-robot-upper{0%,100%{transform:translateZ(28px) rotate(-78deg)}50%{transform:translateZ(28px) rotate(-70deg)}}
@keyframes mf-robot-elbow{0%,100%{transform:translateZ(42px) translateY(0)}50%{transform:translateZ(42px) translateY(-5px)}}
@keyframes mf-robot-fore{0%,100%{transform:translateZ(46px) rotate(23deg)}50%{transform:translateZ(46px) rotate(14deg)}}
@keyframes mf-robot-tool{0%,100%{transform:translateZ(62px) rotate(15deg)}50%{transform:translateZ(62px) rotate(7deg)}}
@media(max-width:900px){.mf-arm-art{width:350px;height:250px;right:-18px;top:-8px;transform:scale(.82);transform-origin:top right;opacity:.72}}
@media(max-width:760px){.mf-arm-art{position:relative;right:auto;top:auto;width:320px;height:210px;margin:-6px 0 8px auto;transform:scale(.8);transform-origin:top right}.mf-arm-stage{animation:none}}
/* Final visible industrial-arm override. */
.mf-industrial-arm{width:430px!important;height:330px!important;right:0!important;top:-8px!important;opacity:1!important;transform:none!important;overflow:visible!important}
.mf-industrial-arm .mf-arm-stage{inset:0!important;transform:rotateX(12deg) rotateY(-12deg)!important;animation:mf-industrial-float 9s ease-in-out infinite!important}
.mf-industrial-arm .mf-arm-stage>span{position:absolute;display:block;transform-style:preserve-3d}
.mf-industrial-arm .mf-arm-pedestal{right:28px;bottom:20px;width:128px;height:42px;border-radius:8px;background:linear-gradient(150deg,#f2a64b,#c65b25 52%,#54251e);border:2px solid #ffd29a;box-shadow:10px 12px 0 #0c1118,0 0 28px #df763955}
.mf-industrial-arm .mf-arm-shoulder{right:70px;bottom:49px;width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 32% 27%,#ffe0ae,#ef8a36 27%,#8e3c27 58%,#251820 60%);border:5px solid #ffd49a;box-shadow:7px 8px 0 #0c1118}
.mf-industrial-arm .mf-arm-upper,.mf-industrial-arm .mf-arm-fore{height:38px;border-radius:16px;border:2px solid #ffd49a;background:linear-gradient(180deg,#ffbe67,#d86a2e 50%,#6d2e27);box-shadow:8px 10px 0 #0c1118,0 0 20px #e9823c44;transform-origin:right center}
.mf-industrial-arm .mf-arm-upper{right:104px;bottom:88px;width:158px;transform:rotate(-72deg);animation:mf-upper 8s ease-in-out infinite}
.mf-industrial-arm .mf-arm-elbow{right:206px;bottom:193px;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffe3b5,#e77b33 33%,#713027 61%,#211921 63%);border:5px solid #ffd49a;box-shadow:7px 8px 0 #0c1118;animation:mf-elbow 8s ease-in-out infinite}
.mf-industrial-arm .mf-arm-fore{right:224px;bottom:210px;width:132px;transform:rotate(25deg);animation:mf-fore 8s ease-in-out infinite}
.mf-industrial-arm .mf-arm-wrist{right:337px;bottom:255px;width:43px;height:43px;border-radius:50%;background:radial-gradient(circle at 32% 25%,#fff0cf,#dd7431 42%,#3b2223 44%);border:4px solid #ffd49a;box-shadow:5px 6px 0 #0c1118}
.mf-industrial-arm .mf-arm-gripper{right:356px;top:23px;width:38px;height:76px;border-left:9px solid #ffe0ad;border-right:9px solid #ffe0ad;border-bottom:9px solid #d94d78;transform:rotate(14deg);filter:drop-shadow(5px 6px 0 #0c1118);animation:mf-gripper 8s ease-in-out infinite}
.mf-industrial-arm .mf-arm-orbit{right:5px;top:18px;width:280px;height:140px;border-color:#7893ad55}
.mf-industrial-arm .mf-arm-scan{left:24%;right:3%;top:54%}
.mf-industrial-arm small{right:8px;bottom:8px;color:#dbe7ef}
@keyframes mf-industrial-float{50%{transform:rotateX(15deg) rotateY(-8deg) translateY(-6px)}}@keyframes mf-upper{50%{transform:rotate(-63deg)}}@keyframes mf-elbow{50%{transform:translateY(-5px)}}@keyframes mf-fore{50%{transform:rotate(15deg)}}@keyframes mf-gripper{50%{transform:rotate(5deg)}}
@media(max-width:900px){.mf-industrial-arm{width:350px!important;height:260px!important;right:-15px!important;transform:scale(.82)!important;transform-origin:top right!important;opacity:.72!important}}
@media(max-width:760px){.mf-industrial-arm{position:relative!important;right:auto!important;top:auto!important;width:320px!important;height:220px!important;margin:-8px 0 8px auto!important;transform:scale(.78)!important;transform-origin:top right!important}.mf-industrial-arm .mf-arm-stage{animation:none!important}}
@media(prefers-reduced-motion:reduce){.mf-industrial-arm *{animation:none!important}}
/* Prioritize the recognizable robot silhouette over decorative orbital graphics. */
.mf-industrial-arm .mf-arm-orbit,.mf-industrial-arm .mf-arm-scan,.mf-industrial-arm:before{display:none}
.mf-industrial-arm .mf-arm-stage{transform:rotateX(4deg) rotateY(-8deg) rotateZ(2deg)!important;transform-origin:72% 82%}
.mf-industrial-arm .mf-arm-pedestal{right:42px;bottom:15px;width:112px;height:54px;border-radius:10px 10px 6px 6px;transform:skewX(-7deg)}
.mf-industrial-arm .mf-arm-shoulder{right:77px;bottom:52px;width:78px;height:78px}
.mf-industrial-arm .mf-arm-upper{right:112px;bottom:91px;width:154px;height:42px;border-radius:18px;transform-origin:96% 50%;transform:rotate(-72deg)}
.mf-industrial-arm .mf-arm-elbow{right:207px;bottom:192px;width:66px;height:66px}
.mf-industrial-arm .mf-arm-fore{right:230px;bottom:211px;width:126px;height:38px;border-radius:17px;transform-origin:96% 50%;transform:rotate(24deg)}
.mf-industrial-arm .mf-arm-wrist{right:340px;bottom:255px;width:44px;height:44px}
.mf-industrial-arm .mf-arm-gripper{right:356px;top:22px;width:44px;height:82px}
.mf-industrial-arm small{font-size:9px;letter-spacing:1.6px;opacity:.72}
@keyframes mf-industrial-float{50%{transform:rotateX(7deg) rotateY(-5deg) rotateZ(2deg) translateY(-4px)}}
@media(max-width:760px){.mf-industrial-arm .mf-arm-stage{transform:rotateX(4deg) rotateY(-8deg) rotateZ(2deg)!important}}
/* CNC machining texture: restrained toolpaths and concentric milling marks. */
.mf-tool-section{position:relative;overflow:hidden;background:#191d23;background-image:radial-gradient(circle at 76% 28%,#b13e7012 0 2px,transparent 3px),repeating-radial-gradient(ellipse at 82% 56%,transparent 0 30px,#7893ad12 31px,#7893ad12 32px,transparent 33px 66px),linear-gradient(118deg,transparent 0 57%,#7893ad0c 57.2%,transparent 57.6%),linear-gradient(28deg,transparent 0 68%,#b13e700a 68.2%,transparent 68.6%),linear-gradient(#7893ad0b 1px,transparent 1px),linear-gradient(90deg,#7893ad0b 1px,transparent 1px);background-size:auto,auto,auto,auto,38px 38px,38px 38px}
.mf-tool-section:before{content:"";position:absolute;right:-8%;top:8%;width:54%;height:72%;border:1px solid #7893ad18;border-radius:50%;transform:rotate(-19deg) scaleY(.55);box-shadow:0 0 0 18px #7893ad08,0 0 0 38px #7893ad05;pointer-events:none}
.mf-tool-section:after{content:"CNC / TOOLPATH / X  Y  Z";position:absolute;right:5%;bottom:7%;font:10px/1.2 ui-monospace,monospace;letter-spacing:2px;color:#7893ad4d;pointer-events:none}
.mf-tool-section>.mf-label,.mf-tool-section>h2,.mf-tool-section>.mf-switch{position:relative;z-index:1}
@media(max-width:760px){.mf-tool-section:before{right:-28%;width:90%;height:48%;top:38%}.mf-tool-section:after{right:5%;bottom:3%;font-size:8px}}

/* 05 / BUILT FOR YOUR BUSINESS — deep slate band; the gear pair sits in the top-right corner. */
.mf-section.mf-sector{position:relative;overflow:hidden;background:linear-gradient(148deg,#141a24 0%,#1c1622 54%,#151b27 100%)}
/* The two ellipses run past this box, so its left edge cut them into a hard vertical line —
   the mask fades the layer out before it reaches that edge. */
.mf-sector:before{content:"";position:absolute;right:-6%;top:-16%;width:58%;height:104%;background:radial-gradient(ellipse at 62% 32%,#b13e7026,transparent 62%),radial-gradient(ellipse at 38% 76%,#7893ad1c,transparent 66%);pointer-events:none;-webkit-mask:linear-gradient(90deg,transparent,#000 38%);mask:linear-gradient(90deg,transparent,#000 38%)}
.mf-sector>.mf-wrap{position:relative;z-index:1}
.mf-sector .mf-label{color:#d78eaf}
.mf-sector .mf-tabs{border-bottom-color:#38424f}
.mf-sector .mf-tabs button[aria-selected=true]{color:#e293b6;background:#b13e701f}
.mf-sector [role=tabpanel] small{color:#bb7c9c}
.mf-sector .mf-big{color:#8fa8c026}

/* Gear pair: inline SVG so the gears can turn. The whole drawing sways in 3D via the float
   animation, while the extruded body is a fixed-direction drop-shadow on the SVG wrapper —
   that way the depth stays put and only the gears spin. */
.mf3d{position:absolute;right:1%;top:-2px;width:265px;pointer-events:none;z-index:0;perspective:1200px}
.mf3d-glow{position:absolute;left:-16%;top:-12%;width:132%;height:120%;border-radius:50%;background:radial-gradient(circle at 54% 44%,#b13e7030,transparent 58%),radial-gradient(circle at 36% 64%,#7893ad24,transparent 56%)}
.mf3d-plane{position:absolute;left:-14%;top:4%;width:128%;height:100%;background-image:linear-gradient(#7893ad1c 1px,transparent 1px),linear-gradient(90deg,#7893ad1c 1px,transparent 1px);background-size:33px 33px;-webkit-mask:radial-gradient(ellipse 62% 50% at 50% 46%,#000 0 40%,transparent 74%);mask:radial-gradient(ellipse 62% 50% at 50% 46%,#000 0 40%,transparent 74%)}
.mf3d-art{position:relative;display:block;width:100%;height:auto;overflow:visible;animation:mf3d-float 17s ease-in-out infinite}
.mf3d-spin{transform-box:fill-box;transform-origin:center}
.mf3d-spin-a{animation:mf3d-spin 27s linear infinite}
.mf3d-spin-b{animation:mf3d-spin 17s linear infinite reverse}
.mf3d.is-paused .mf3d-art,.mf3d.is-paused .mf3d-spin{animation-play-state:paused}
@keyframes mf3d-spin{to{transform:rotate(360deg)}}
/* Float travels downward from the resting position, never up: on an upward cycle the small
   gear rose past the section edge and its crown was sliced flat against the band above. */
@keyframes mf3d-float{0%,100%{transform:rotateX(5deg) rotateY(-7deg) translateY(0)}50%{transform:rotateX(-3deg) rotateY(6deg) translateY(5px)}}
@media(max-width:1300px){.mf3d{width:245px}}
@media(max-width:1100px){.mf3d{width:220px;opacity:.85}}
@media(max-width:900px){.mf3d{width:185px;right:-1%;opacity:.55}}
@media(max-width:700px){.mf3d{display:none}}

/* 06 / CLEAR DELIVERABLES — an elevated light band. The rail draws itself down to the last step
   that has been reached and each step lights up as it arrives, so the delivery sequence reads
   as a progression instead of a static list. */
.mf-section:has(.mf-timeline){position:relative;overflow:hidden;padding:84px 0;background:linear-gradient(160deg,#f8f9fa 0%,#eff2f5 52%,#e8ecf0 100%)}
/* Faint index numeral, the same treatment section 01 gets. */
.mf-section:has(.mf-timeline):before{content:'06';position:absolute;right:3%;top:14%;font-size:230px;line-height:1;font-weight:700;color:#7893ad0d;pointer-events:none;z-index:0}
/* Light drifting across the band. Both ellipses fade out well inside this box, so the section
   edge never cuts the layer into a hard line. */
.mf-section:has(.mf-timeline):after{content:'';position:absolute;inset:-20% -32%;pointer-events:none;z-index:0;background:radial-gradient(ellipse 34% 54% at 30% 44%,#ffffffd9,transparent 70%),radial-gradient(ellipse 26% 42% at 72% 66%,#b13e700f,transparent 72%);animation:mf-sheen 26s ease-in-out infinite}
.mf-section:has(.mf-timeline)>.mf-wrap{position:relative;z-index:1}
.mf-section:has(.mf-timeline).is-paused:after{animation-play-state:paused}
@keyframes mf-sheen{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(26%,-6%,0)}}

/* Headline: the two lines rise in sequence and the closing line draws an accent rule. The
   hidden states exist only under .mf-anim, which the script adds — so with no JavaScript, or
   under reduced-motion, the copy stays plainly visible. */
.mf-section:has(.mf-timeline) h2>span{display:inline-block}
.mf-section.mf-anim .mf-split>div:first-child>p.mf-label,
.mf-section.mf-anim .mf-split>div:first-child>h2>span,
.mf-section.mf-anim .mf-split>div:first-child>p:last-child{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
.mf-section.mf-anim.mf-seen .mf-split>div:first-child>p.mf-label,
.mf-section.mf-anim.mf-seen .mf-split>div:first-child>h2>span,
.mf-section.mf-anim.mf-seen .mf-split>div:first-child>p:last-child{opacity:1;transform:none}
.mf-section.mf-anim.mf-seen .mf-split>div:first-child>h2>span:first-of-type{transition-delay:.08s}
.mf-section.mf-anim.mf-seen .mf-split>div:first-child>h2>span:last-of-type{transition-delay:.17s}
.mf-section.mf-anim.mf-seen .mf-split>div:first-child>p:last-child{transition-delay:.26s}
.mf-section:has(.mf-timeline) h2 .mf-ul{position:relative}
.mf-section:has(.mf-timeline) h2 .mf-ul:after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:3px;border-radius:2px;background:linear-gradient(90deg,#b13e70,#d78eaf);transform-origin:left center;transition:transform 1.1s cubic-bezier(.22,.61,.36,1) .4s}
.mf-section.mf-anim h2 .mf-ul:after{transform:scaleX(0)}
.mf-section.mf-anim.mf-seen h2 .mf-ul:after{transform:scaleX(1)}

/* The rail. --mf-rail-top/-bottom trim it to run from the first knob down to the last item;
   the script reads those two values back rather than repeating the geometry. */
.mf-timeline{--mf-rail-top:26px;--mf-rail-bottom:12px;position:relative;margin:0;padding:6px 0 12px 40px;list-style:none}
.mf-timeline:before{content:'';position:absolute;left:0;top:var(--mf-rail-top);bottom:var(--mf-rail-bottom);width:2px;border-radius:2px;background-color:#c9d1d9;background-image:linear-gradient(180deg,transparent,#b13e70a6 50%,transparent);background-repeat:repeat-y;background-size:100% 58px;animation:mf-rail-run 6.5s linear infinite}
.mf-timeline:after{content:'';position:absolute;left:0;top:var(--mf-rail-top);width:2px;height:calc((100% - var(--mf-rail-top) - var(--mf-rail-bottom))*var(--mf-rail,0));border-radius:2px;background:linear-gradient(180deg,#d78eaf,#b13e70);box-shadow:0 0 10px #b13e7059;transition:height .85s cubic-bezier(.25,.8,.3,1)}
.is-paused .mf-timeline:before,.mf-timeline.is-paused:before{animation-play-state:paused}
@keyframes mf-rail-run{from{background-position:0 0}to{background-position:0 58px}}
.mf-timeline li{position:relative;z-index:1;padding:16px 0 26px;transition:opacity .6s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.mf-timeline li+li{border-top:1px solid #dfe4e9}
.mf-timeline li:before{content:'';position:absolute;left:-44px;top:20px;width:11px;height:11px;border-radius:50%;background:#f7f8f9;box-shadow:inset 0 0 0 2px #b13e70;transition:background .45s ease,box-shadow .45s ease,transform .45s cubic-bezier(.34,1.4,.5,1)}
.mf-timeline li:after{content:'';position:absolute;left:-48px;top:16px;width:19px;height:19px;border-radius:50%;border:1px solid #b13e7059;opacity:0;pointer-events:none}
.mf-timeline li.is-on:before{background:#b13e70;box-shadow:inset 0 0 0 2px #b13e70,0 0 0 4px #b13e7014,0 0 14px #b13e7066;transform:scale(1.14)}
.mf-timeline li.is-on:after{animation:mf-ripple 1.2s ease-out 1}
@keyframes mf-ripple{0%{opacity:.85;transform:scale(.45)}100%{opacity:0;transform:scale(1.7)}}
.mf-timeline .mf-step{display:block;margin:0 0 7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:1.5px;font-variant-numeric:tabular-nums;color:#b13e70;opacity:.5;transition:opacity .5s ease}
.mf-timeline h3{margin:0 0 8px;color:#2b3138;transition:color .45s ease}
.mf-timeline p{font-size:16px;line-height:1.75;color:#6a747f;margin:0;max-width:560px}
.mf-timeline li.is-on .mf-step{opacity:1}
.mf-timeline li.is-on h3{color:#191d23}
.mf-timeline li:hover .mf-step{opacity:1}
.mf-timeline li:hover h3{color:#b13e70}
.mf-section.mf-anim .mf-timeline li{opacity:0;transform:translateX(18px)}
.mf-section.mf-anim .mf-timeline li.is-on{opacity:1;transform:none}

@media(max-width:980px){.mf-section:has(.mf-timeline):before{font-size:170px}}
@media(max-width:760px){
.mf-section:has(.mf-timeline){padding:52px 0}
.mf-section:has(.mf-timeline):before{font-size:120px;top:7%}
.mf-timeline{--mf-rail-top:36px;--mf-rail-bottom:8px;padding:4px 0 8px 30px}
.mf-timeline li{padding:14px 0 20px}
.mf-timeline li:before{left:-34px;top:18px;width:10px;height:10px}
.mf-timeline li:after{left:-38px;top:14px;width:18px;height:18px}
.mf-timeline p{font-size:15.5px}
}
@media(prefers-reduced-motion:reduce){
.mf-section.mf-anim .mf-split>div:first-child>p.mf-label,
.mf-section.mf-anim .mf-split>div:first-child>h2>span,
.mf-section.mf-anim .mf-split>div:first-child>p:last-child,
.mf-section.mf-anim .mf-timeline li{opacity:1;transform:none}
.mf-section.mf-anim h2 .mf-ul:after{transform:scaleX(1)}
}
/* ---------- 09 / 收尾咨询区（#mf-contact）：机械零件底纹 + 装配 3D 动态 ---------- */
/* 底纹与动效都在 z-index:0 层，.mf-wrap 保持 z-index:1，文案始终在最上层 */
#mf-contact{position:relative;overflow:hidden}
/* 工程网格：左浓右淡，避免与右侧图形抢视线 */
#mf-contact:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(#7893ad14 1px,transparent 1px),linear-gradient(90deg,#7893ad14 1px,transparent 1px);background-size:34px 34px;-webkit-mask:linear-gradient(96deg,#000,transparent 68%);mask:linear-gradient(96deg,#000,transparent 68%)}
/* 机械零件底纹：<pattern> 平铺齿轮/轴承/螺母/法兰线稿，右上角径向遮罩淡出 */
.mf-cta-parts{position:absolute;inset:0;z-index:0;width:100%;height:100%;opacity:.28;pointer-events:none}
/* 缓慢扫过的一道柔光，给暗色区块一点呼吸感 */
#mf-contact:after{content:"";position:absolute;inset:-30% -40%;z-index:0;pointer-events:none;background:linear-gradient(102deg,transparent 38%,#ffffff0d 50%,transparent 62%);animation:mf-cta-sheen 24s ease-in-out infinite}
@keyframes mf-cta-sheen{0%,100%{transform:translate3d(-8%,0,0)}50%{transform:translate3d(8%,0,0)}}
/* 装配动效落位：右侧空白区，图形墨迹约在盒子宽度 21%-79% 处，因此允许略微出血由 overflow 裁掉 */
#mf-contact .mf3d{right:-3%;top:50%;width:min(350px,25vw);transform:translateY(-50%)}
#mf-contact .mf3d-glow{left:-6%;top:-4%;width:112%;height:108%}
@media(max-width:1100px){#mf-contact .mf3d{width:min(240px,22vw);right:-5%;opacity:.62}}
/* 1024 以下两栏文字已接近栏边，装配图无立身之处，改由底纹与扫光承担机械感 */
@media(max-width:1024px){#mf-contact .mf3d{display:none}}
@media(prefers-reduced-motion:reduce){
#mf-contact:after{animation:none!important;opacity:.7}
}