.vfd-section{margin-top:32px;padding:40px 0;background:#f9fafb;overflow:hidden;position:relative}.vfd-section:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#e5e7eb 20%,#e5e7eb 80%,transparent)}.vfd-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:420px 1fr;gap:64px;align-items:center}.vfd-left{display:flex;flex-direction:column}.vfd-label{font-size:11px;font-weight:700;letter-spacing:1px;color:#5d78ff;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px}.vfd-label:before{content:"";width:20px;height:2px;background:#5d78ff;border-radius:2px}.vfd-title{font-size:32px;font-weight:800;color:#222831;line-height:1.2;margin-bottom:14px}.vfd-subtitle{font-size:15px;line-height:1.65;color:#5c7699;margin-bottom:32px}.vfd-toggle-wrap{display:flex;align-items:center;background:#fff;border:1.5px solid #e5e7eb;border-radius:10px;padding:4px;width:-moz-fit-content;width:fit-content;margin-bottom:28px;box-shadow:0 2px 8px rgba(0,0,0,.06)}.vfd-toggle-btn{padding:8px 20px;border-radius:7px;border:none;background:transparent;font-size:13px;font-weight:600;color:#5c7699;cursor:pointer;transition:all .25s ease}.vfd-toggle-btn.active{background:#5d78ff;color:#fff;box-shadow:0 2px 8px rgba(93,120,255,.35)}.vfd-toggle-btn.no-vfd-active{background:#8fa3c0;box-shadow:none}.vfd-kpi-row{display:flex;gap:12px;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}.vfd-kpi-row.visible{opacity:1;transform:translateY(0)}.vfd-kpi-card{flex:1;background:#fff;border:1.5px solid #e5e7eb;border-radius:10px;padding:14px 16px;transition:all .3s}.vfd-kpi-card.green{border-color:#169e97;background:#f0faf9}.vfd-kpi-num{font-size:20px;font-weight:800;color:#169e97;margin-bottom:3px}.vfd-kpi-label{font-size:11px;font-weight:500;color:#5c7699;line-height:1.4}.vfd-canvas,.vfd-right{position:relative}.vfd-canvas{background:#fff;border:1.5px solid #e5e7eb;border-radius:20px;padding:80px 28px;box-shadow:0 8px 40px rgba(36,48,71,.08);overflow:hidden}.vfd-canvas:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(93,120,255,.04) 1px,transparent 0),linear-gradient(90deg,rgba(93,120,255,.04) 1px,transparent 0);background-size:24px 24px;pointer-events:none}.vfd-system-row{justify-content:center;gap:0;margin-bottom:28px}.vfd-comp,.vfd-system-row{display:flex;align-items:center;position:relative}.vfd-comp{width:80px;flex-direction:column;gap:8px;z-index:2}.vfd-comp-box{width:72px;height:72px;border-radius:14px;display:flex;align-items:center;justify-content:center;border:2px solid #e5e7eb;background:#f3f5f7;transition:all .4s ease;position:relative;cursor:default}.vfd-comp-box svg{width:32px;height:32px}.vfd-icon{fill:#8fa3c0;transition:fill .4s}.vfd-comp-label{height:25px;font-weight:600;text-align:center;line-height:1.3;transition:color .4s}.vfd-comp-label,.vfd-screen{font-size:11px;color:#8fa3c0;white-space:nowrap}.vfd-screen{position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);font-weight:700;letter-spacing:.5px;font-family:Courier New,monospace;background:rgba(0,0,0,.06);padding:1px 3px;border-radius:3px;transition:all .4s;opacity:0}.vfd-arrow{width:36px;height:2px;background:#e5e7eb;margin-top:-20px;position:relative;flex-shrink:0;transition:background .4s;z-index:1}.vfd-arrow:after{content:"";right:-1px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:6px solid #e5e7eb;transition:border-left-color .4s}.vfd-arrow:after,.vfd-flow-dot{position:absolute;top:50%;transform:translateY(-50%)}.vfd-flow-dot{width:7px;height:7px;border-radius:50%;background:#5d78ff;opacity:0;box-shadow:0 0 8px #5d78ff;animation:none}.vfd-field-row{display:flex;justify-content:center;padding:16px 0 8px}.vfd-field{width:100%;max-width:560px;height:80px;border-radius:14px;background:#f3f5f7;border:2px solid #e5e7eb;justify-content:center;transition:all .6s ease;position:relative;overflow:hidden}.vfd-field,.vfd-field-inner{display:flex;align-items:center;gap:8px}.vfd-field-inner{transition:opacity .3s}.vfd-field-label{font-size:12px;font-weight:600;color:#8fa3c0;transition:color .4s}.vfd-drops{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .5s}.vfd-drop{position:absolute;width:4px;height:7px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:rgba(93,120,255,.5);animation:dropFall 1.5s ease-in infinite}.vfd-crops{position:absolute;bottom:4px;left:0;right:0;display:flex;justify-content:space-around;padding:0 20px;opacity:0;transition:opacity .8s ease}.vfd-crop-row{display:flex;flex-direction:column;align-items:center;gap:2px}.vfd-pump-ring{border-radius:18px;border:2px dashed #5d78ff}.vfd-motor-ring,.vfd-pump-ring{position:absolute;inset:-4px;opacity:0;animation:none}.vfd-motor-ring{border-radius:18px;border:2px solid transparent;border-top-color:#5d78ff}.vfd-tooltip-wrap{position:relative}.vfd-tooltip{bottom:calc(100% + 12px);background:#222831;color:#fff;font-size:11px;line-height:1.4;padding:8px 12px;border-radius:8px;width:260px;white-space:normal;text-align:center;pointer-events:none;opacity:0;transition:opacity .2s;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,.2)}.vfd-tooltip,.vfd-tooltip:after{position:absolute;left:50%;transform:translateX(-50%)}.vfd-tooltip:after{content:"";top:100%;border-top:5px solid #222831;border-left:5px solid transparent;border-right:5px solid transparent}.vfd-tooltip-wrap:hover .vfd-tooltip{opacity:1}.vfd-status-bar{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding:12px 16px;background:#f3f5f7;border-radius:10px;border:1.5px solid #e5e7eb;transition:all .3s}.vfd-status-dot{width:8px;height:8px;border-radius:50%;background:#ccc;transition:background .3s;flex-shrink:0}.vfd-status-text{font-size:12px;font-weight:600;color:#8fa3c0;transition:color .3s;flex:1;margin:0 10px}.vfd-status-freq{font-family:Courier New,monospace;font-size:13px;font-weight:700;color:#ccc;transition:color .3s}.vfd-warn{display:none;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#c2410c;background:#fff7ed;border:1.5px solid #fed7aa;padding:6px 12px;border-radius:7px;margin-top:10px}.vfd-canvas.running .vfd-comp-box{border-color:rgba(93,120,255,.3);background:#eef0ff}.vfd-canvas.running .vfd-icon{fill:#5d78ff}.vfd-canvas.running .vfd-comp-label{color:#36485f}.vfd-canvas.running .vfd-arrow{background:#5d78ff}.vfd-canvas.running .vfd-arrow:after{border-left-color:#5d78ff}.vfd-canvas.running .vfd-comp-box.vfd-box-energy{background:linear-gradient(135deg,#fff9e6,#fff3cc);border-color:#f5a623}.vfd-canvas.running .vfd-comp-box.vfd-box-energy .vfd-icon{fill:#f5a623}.vfd-canvas.running .vfd-comp-box.vfd-box-vfd{background:linear-gradient(135deg,#eef0ff,#e0e5ff);border-color:#5d78ff;box-shadow:0 0 20px rgba(93,120,255,.25)}.vfd-canvas.running .vfd-comp-box.vfd-box-vfd .vfd-icon{fill:#5d78ff}.vfd-canvas.running .vfd-screen{opacity:1;color:#5d78ff;background:#eef0ff}.vfd-canvas.running .vfd-comp-box.vfd-box-motor{background:linear-gradient(135deg,#eef0ff,#e8f0ff);border-color:#7c9bff}.vfd-canvas.running .vfd-comp-box.vfd-box-motor .vfd-icon{fill:#5d78ff}.vfd-canvas.running .vfd-motor-ring{opacity:0;animation:none}.vfd-canvas.running .vfd-comp-box.vfd-box-motor .vfd-icon{animation:spinRing 1.2s linear infinite}.vfd-canvas.running .vfd-comp-box.vfd-box-pump{background:linear-gradient(135deg,#e8f7ff,#d0edff);border-color:#38bdf8}.vfd-canvas.running .vfd-comp-box.vfd-box-pump .vfd-icon{fill:#38bdf8}.vfd-canvas.running .vfd-pump-ring{opacity:0;animation:none}.vfd-canvas.running .vfd-comp-box.vfd-box-pump .vfd-icon{animation:pumpPulse 1.4s ease-in-out infinite}.vfd-canvas.running .vfd-comp-box.vfd-box-flow{border-color:#38bdf8;background:#f0f9ff}.vfd-canvas.running .vfd-comp-box.vfd-box-flow .vfd-icon{fill:#38bdf8}.vfd-canvas.running .vfd-flow-dot{opacity:1;animation:flowPulse 1.2s ease-in-out infinite}.vfd-canvas.running .vfd-crops,.vfd-canvas.running .vfd-drops{opacity:1}.vfd-canvas.running .vfd-field{background:linear-gradient(180deg,#f0faf4,#d4f0df);border-color:#169e97}.vfd-canvas.running .vfd-field-label{color:#169e97}.vfd-canvas.running .vfd-status-dot{animation:blink 1.5s infinite}.vfd-canvas.no-vfd .vfd-comp-box{filter:saturate(0) brightness(.95)}.vfd-canvas.no-vfd.running .vfd-comp-box.vfd-box-vfd{background:#f3f5f7;border-color:#ccc;box-shadow:none}.vfd-canvas.no-vfd.running .vfd-screen{opacity:0}.vfd-canvas.no-vfd.running .vfd-motor-ring{opacity:0;animation:none}.vfd-canvas.no-vfd.running .vfd-comp-box.vfd-box-motor .vfd-icon{animation:spinRingFast .4s linear infinite}.vfd-canvas.no-vfd.running .vfd-comp-box.vfd-box-motor{border-color:#f97316;background:#fff7ed;filter:none}.vfd-canvas.no-vfd.running .vfd-comp-box.vfd-box-motor .vfd-icon{fill:#f97316}.vfd-canvas.no-vfd.running .vfd-arrow{background:#f97316}.vfd-canvas.no-vfd.running .vfd-arrow:after{border-left-color:#f97316}.vfd-canvas.no-vfd.running .vfd-pump-ring{opacity:0;animation:none}.vfd-canvas.no-vfd.running .vfd-comp-box.vfd-box-pump .vfd-icon{animation:pumpPulseHard .7s ease-in-out infinite}.vfd-canvas.no-vfd.running .vfd-field{background:linear-gradient(180deg,#fafaf0,#f0f0d4);border-color:#c5aa5e}.vfd-canvas.no-vfd.running .vfd-field-label{color:#b8942a}.vfd-canvas.no-vfd.running .vfd-warn{display:flex}@keyframes spinRing{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinRingFast{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes rotatePump{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes pumpPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.75}}@keyframes pumpPulseHard{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.6}}@keyframes flowPulse{0%{left:-5px;opacity:0}10%{opacity:1}90%{opacity:1}to{left:calc(100% + 5px);opacity:0}}@keyframes dropFall{0%{top:-10px;opacity:0}10%{opacity:.7}90%{opacity:.7}to{top:100%;opacity:0}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}