.system-flow{position:relative;margin:42px 0 52px;padding:30px;border:1px solid rgba(0,102,204,.14);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(238,247,255,.92));box-shadow:0 18px 50px rgba(20,70,110,.08);overflow:hidden}
.system-flow::before{content:"";position:absolute;width:220px;height:220px;inset:-110px -70px auto auto;border-radius:50%;background:radial-gradient(circle,rgba(51,153,255,.14),transparent 68%);pointer-events:none}
.system-flow figcaption{position:relative;margin-bottom:26px;text-align:center}
.system-flow figcaption h2{margin:6px 0 0;font-size:clamp(1.35rem,3vw,1.9rem)}
.flow-kicker{display:inline-block;color:#0066cc;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.flow-track{position:relative;display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:12px;align-items:stretch}
.flow-node{position:relative;min-width:0;padding:22px 12px 18px;border:1px solid rgba(0,102,204,.11);border-radius:20px;background:rgba(255,255,255,.88);text-align:center;box-shadow:0 7px 22px rgba(10,65,110,.05)}
.flow-node strong{display:block;margin-top:13px;font-size:15px;line-height:1.35;color:#1d1d1f}
.flow-number{position:absolute;inset:9px auto auto 10px;color:#8aa9c0;font-size:11px;font-weight:800;letter-spacing:.08em}
.flow-icon{display:grid;width:54px;height:54px;margin:4px auto 0;place-items:center;border-radius:17px;background:linear-gradient(135deg,#0066cc,#3aa7ff);box-shadow:0 8px 18px rgba(0,102,204,.2)}
.flow-icon svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.flow-arrow{align-self:center;color:#1681da;font-size:25px;font-weight:700}
.flow-caption{max-width:720px;margin:24px auto 0;text-align:center;color:#526574;font-size:15px!important;line-height:1.65!important}
.flow-development{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(245,242,255,.94))}
.flow-development .flow-icon{background:linear-gradient(135deg,#3155c6,#7775e7)}
.flow-automation{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(237,250,247,.94))}
.flow-automation .flow-icon{background:linear-gradient(135deg,#007a74,#24aaa1)}
.flow-traffic{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(237,250,247,.94))}
.flow-traffic .flow-icon{background:linear-gradient(135deg,#007a74,#24aaa1)}
.flow-option{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;margin:-28px 0 48px;padding:22px 26px;border:1px solid rgba(0,122,116,.18);border-radius:22px;background:#f2fbf9}
.flow-option>span{display:inline-flex;align-items:center;justify-content:center;min-width:92px;min-height:42px;padding:0 14px;border-radius:999px;background:#007a74;color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em}
.flow-option h2{margin:0 0 6px;font-size:1.2rem}.flow-option p{margin:0;color:#526574;line-height:1.65}
.monitor-chart{margin:42px 0 52px;padding:30px;border:1px solid rgba(0,102,204,.14);border-radius:28px;background:#fff;box-shadow:0 18px 50px rgba(20,70,110,.08)}
.monitor-chart figcaption{text-align:center}.monitor-chart figcaption h2{margin:6px 0}.monitor-chart figcaption p{margin:0;color:#526574}
.chart-panel{margin-top:24px;padding:20px 20px 14px;border-radius:20px;background:linear-gradient(180deg,#f8fbfe,#eef7fc);overflow:hidden}.chart-panel svg{display:block;width:100%;height:auto;min-height:220px}
.monitor-chart.visual-only .chart-panel{margin-top:0}
.chart-grid path{fill:none;stroke:#d9e7ef;stroke-width:1}.chart-axis{fill:none;stroke:#8ca7b8;stroke-width:1.5}.chart-fill{fill:rgba(0,102,204,.13)}.chart-line{fill:none;stroke:#0066cc;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.chart-point{fill:#fff;stroke:#ef8b2c;stroke-width:5}.chart-callout{fill:none;stroke:#ef8b2c;stroke-width:2}.chart-note{fill:#9a5518;font-size:14px;font-weight:700}.chart-labels text{fill:#708593;font-size:13px}.chart-bar{fill:#2c9fbd}.chart-bar.alert{fill:#ef8b2c}.chart-legend{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;color:#526574;font-size:13px}.chart-legend span{display:inline-flex;align-items:center;gap:8px}.chart-legend i{width:12px;height:12px;border-radius:3px}.legend-main{background:#1681da}.legend-alert{background:#ef8b2c}
.chart-water .chart-panel{background:linear-gradient(180deg,#f7fcfd,#ebf8f8)}
.chart-energy .chart-line{stroke-dasharray:1100;stroke-dashoffset:1100;animation:chart-draw 1.8s cubic-bezier(.2,.75,.25,1) .15s forwards}.chart-energy .chart-fill{opacity:0;animation:chart-fade .9s ease 1s forwards}.chart-energy .chart-point{opacity:0;animation:chart-point .7s ease 1.45s forwards}.chart-bar{transform-box:fill-box;transform-origin:center bottom;transform:scaleY(0);animation:chart-rise .7s cubic-bezier(.2,.75,.25,1) forwards}.chart-bar:nth-of-type(2){animation-delay:.08s}.chart-bar:nth-of-type(3){animation-delay:.16s}.chart-bar:nth-of-type(4){animation-delay:.24s}.chart-bar:nth-of-type(5){animation-delay:.32s}.chart-bar:nth-of-type(6){animation-delay:.4s}.chart-bar:nth-of-type(7){animation-delay:.48s}.chart-bar:nth-of-type(8){animation-delay:.56s}
@keyframes chart-draw{to{stroke-dashoffset:0}}@keyframes chart-fade{to{opacity:1}}@keyframes chart-point{0%{opacity:0;transform:scale(.55);transform-origin:432px 78px}100%{opacity:1;transform:scale(1);transform-origin:432px 78px}}@keyframes chart-rise{to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.chart-energy .chart-line,.chart-energy .chart-fill,.chart-energy .chart-point,.chart-bar{animation:none;opacity:1;transform:none;stroke-dashoffset:0}}
.solution-body .detail-section p,.solution-body .engineering-additions p,.knowledge-article .guide-section p,.knowledge-article details p{font-size:clamp(1rem,.35vw + .94rem,1.08rem);line-height:1.82;color:#435968}
.reading-highlight{color:#0869a4;font-weight:800;letter-spacing:-.01em}
.detail-section h2,.engineering-additions h2,.guide-section h2,.local-project h2{color:#16384d;letter-spacing:-.025em}
.engineering-additions h3{position:relative;padding-inline-start:18px;color:#23485f}.engineering-additions h3::before{content:"";position:absolute;inset-inline-start:0;top:.36em;width:5px;height:1.05em;border-radius:99px;background:#8ab3c7}
.knowledge-article .guide-section{position:relative;padding-inline-start:24px;border-inline-start:2px solid rgba(35,72,95,.15)}
.knowledge-article .guide-section::before{content:"";position:absolute;inset-inline-start:-5px;top:.35rem;width:8px;height:8px;border-radius:50%;background:#82a9bc;box-shadow:0 0 0 4px #edf3f6}
.solution-body :is(.detail-section,.engineering-additions,.local-project,.product-guide-link) a,.knowledge-article .guide-reading a{color:#066db5;text-decoration-color:rgba(6,109,181,.32);text-decoration-thickness:2px;text-underline-offset:3px}
.solution-body :is(.detail-section,.engineering-additions,.local-project,.product-guide-link) a:hover,.knowledge-article .guide-reading a:hover{color:#004f8d;text-decoration-color:currentColor}
html[dir="rtl"] .reading-highlight{letter-spacing:0}
html[dir="rtl"] .flow-arrow{transform:scaleX(-1)}
@media(max-width:760px){.system-flow{margin:30px 0 38px;padding:22px 18px}.flow-track{grid-template-columns:1fr;gap:10px}.flow-arrow{line-height:18px;transform:rotate(90deg)}html[dir="rtl"] .flow-arrow{transform:rotate(90deg) scaleX(-1)}.flow-node{display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:center;padding:14px 18px;text-align:start}.flow-node .flow-icon{grid-row:1;margin:0}.flow-node strong{grid-column:2;margin:0}.flow-number{inset:7px 8px auto auto}.flow-caption{margin-top:18px}.system-flow figcaption{margin-bottom:20px}.flow-option{grid-template-columns:1fr;margin:-18px 0 38px;padding:20px}.flow-option>span{justify-self:start}.monitor-chart{margin:30px 0 38px;padding:22px 16px}.chart-panel{padding:8px 6px 12px;overflow-x:auto}.chart-panel svg{width:680px;max-width:none}.chart-legend{justify-content:flex-start;padding:0 10px}}