{"id":3450,"date":"2026-06-26T03:33:05","date_gmt":"2026-06-26T03:33:05","guid":{"rendered":"https:\/\/hugohabor.com\/?page_id=3450"},"modified":"2026-06-26T06:03:50","modified_gmt":"2026-06-26T06:03:50","slug":"3450-2","status":"publish","type":"page","link":"https:\/\/hugohabor.com\/?page_id=3450","title":{"rendered":"Landing-Company"},"content":{"rendered":"<!DOCTYPE html>\r\n<html lang=\"zh-Hant\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>\u5de5\u696d\u81ea\u52d5\u5316 \u00b7 SCADA \u7cfb\u7d71\u6574\u5408<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&family=JetBrains+Mono:wght@400;500&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@tabler\/icons-webfont@latest\/tabler-icons.min.css\">\r\n<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   CSS VARIABLES \u2014 \u4fee\u6539\u9019\u88e1\u5373\u53ef\u5168\u7ad9\u63db\u8272\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root {\r\n  --brand-primary: #0A2540;\r\n  --brand-accent: #00D4AA;\r\n  --brand-accent-dim: #00B894;\r\n  --brand-warm: #FF6B35;\r\n  --brand-surface: #F7F9FC;\r\n  --brand-card: #FFFFFF;\r\n  --brand-border: #E2E8F0;\r\n  --brand-text: #1A202C;\r\n  --brand-text-secondary: #64748B;\r\n  --brand-text-muted: #94A3B8;\r\n  --brand-gradient: linear-gradient(135deg, #0A2540 0%, #0D3B66 50%, #1A5276 100%);\r\n  --brand-glow: rgba(0, 212, 170, 0.15);\r\n  --font-heading: 'Noto Sans TC', 'DM Sans', sans-serif;\r\n  --font-body: 'DM Sans', 'Noto Sans TC', sans-serif;\r\n  --font-mono: 'JetBrains Mono', monospace;\r\n  --radius: 12px;\r\n  --radius-sm: 8px;\r\n  --radius-lg: 16px;\r\n  --shadow-sm: 0 1px 3px rgba(10,37,64,0.06);\r\n  --shadow-md: 0 4px 20px rgba(10,37,64,0.08);\r\n  --shadow-lg: 0 8px 40px rgba(10,37,64,0.12);\r\n  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   RESET & BASE\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\nhtml { scroll-behavior: smooth; }\r\nbody {\r\n  font-family: var(--font-body);\r\n  color: var(--brand-text);\r\n  background: var(--brand-surface);\r\n  line-height: 1.7;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\nimg { max-width: 100%; display: block; }\r\na { color: inherit; text-decoration: none; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   UTILITY\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }\r\n.section { padding: 100px 0; }\r\n.section-label {\r\n  font-family: var(--font-mono);\r\n  font-size: 12px;\r\n  letter-spacing: 3px;\r\n  text-transform: uppercase;\r\n  color: var(--brand-accent-dim);\r\n  margin-bottom: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n.section-label::before {\r\n  content: '';\r\n  width: 24px;\r\n  height: 2px;\r\n  background: var(--brand-accent);\r\n}\r\n.section-title {\r\n  font-family: var(--font-heading);\r\n  font-size: clamp(28px, 4vw, 42px);\r\n  font-weight: 700;\r\n  line-height: 1.3;\r\n  color: var(--brand-primary);\r\n  margin-bottom: 16px;\r\n}\r\n.section-subtitle {\r\n  font-size: 17px;\r\n  color: var(--brand-text-secondary);\r\n  max-width: 600px;\r\n  line-height: 1.8;\r\n}\r\n.chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n  padding: 4px 12px;\r\n  border-radius: 999px;\r\n  white-space: nowrap;\r\n}\r\n.chip-teal { background: #E0FFF6; color: #047857; }\r\n.chip-blue { background: #E0F2FE; color: #0369A1; }\r\n.chip-amber { background: #FFF7ED; color: #C2410C; }\r\n.chip-red { background: #FEF2F2; color: #B91C1C; }\r\n.chip-purple { background: #F3E8FF; color: #7C3AED; }\r\n.chip-gray { background: #F1F5F9; color: #475569; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   ANIMATIONS\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@keyframes fadeUp {\r\n  from { opacity: 0; transform: translateY(30px); }\r\n  to { opacity: 1; transform: translateY(0); }\r\n}\r\n@keyframes slideIn {\r\n  from { opacity: 0; transform: translateX(-20px); }\r\n  to { opacity: 1; transform: translateX(0); }\r\n}\r\n@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }\r\n@keyframes countUp { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }\r\n@keyframes gridReveal {\r\n  from { opacity: 0; transform: translateY(20px) scale(0.96); }\r\n  to { opacity: 1; transform: translateY(0) scale(1); }\r\n}\r\n\r\n.animate-on-scroll {\r\n  opacity: 0;\r\n  transform: translateY(30px);\r\n  transition: opacity 0.6s ease, transform 0.6s ease;\r\n}\r\n.animate-on-scroll.visible {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   NAVBAR\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.navbar {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  z-index: 1000;\r\n  background: rgba(255,255,255,0.92);\r\n  backdrop-filter: blur(20px);\r\n  border-bottom: 1px solid var(--brand-border);\r\n  transition: var(--transition);\r\n}\r\n.navbar.scrolled { box-shadow: var(--shadow-md); }\r\n.navbar-inner {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  height: 72px;\r\n}\r\n.nav-logo {\r\n  font-family: var(--font-heading);\r\n  font-weight: 900;\r\n  font-size: 20px;\r\n  color: var(--brand-primary);\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n}\r\n.nav-logo-icon {\r\n  width: 36px;\r\n  height: 36px;\r\n  background: var(--brand-gradient);\r\n  border-radius: var(--radius-sm);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--brand-accent);\r\n  font-size: 18px;\r\n}\r\n.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }\r\n.nav-links a {\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  color: var(--brand-text-secondary);\r\n  transition: var(--transition);\r\n  position: relative;\r\n}\r\n.nav-links a:hover { color: var(--brand-primary); }\r\n.nav-links a::after {\r\n  content: '';\r\n  position: absolute;\r\n  bottom: -4px;\r\n  left: 0;\r\n  width: 0;\r\n  height: 2px;\r\n  background: var(--brand-accent);\r\n  transition: var(--transition);\r\n}\r\n.nav-links a:hover::after { width: 100%; }\r\n.nav-cta {\r\n  background: var(--brand-primary);\r\n  color: #fff;\r\n  padding: 10px 24px;\r\n  border-radius: var(--radius);\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  border: none;\r\n  cursor: pointer;\r\n  transition: var(--transition);\r\n}\r\n.nav-cta:hover { background: #0D3B66; transform: translateY(-1px); box-shadow: var(--shadow-md); }\r\n.nav-menu-btn {\r\n  display: none;\r\n  background: none;\r\n  border: none;\r\n  font-size: 24px;\r\n  color: var(--brand-primary);\r\n  cursor: pointer;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   HERO\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.hero {\r\n  min-height: 100vh;\r\n  background: var(--brand-gradient);\r\n  position: relative;\r\n  overflow: hidden;\r\n  display: flex;\r\n  align-items: center;\r\n  padding-top: 72px;\r\n}\r\n.hero::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background:\r\n    radial-gradient(circle at 20% 80%, rgba(0,212,170,0.08) 0%, transparent 50%),\r\n    radial-gradient(circle at 80% 20%, rgba(0,212,170,0.05) 0%, transparent 40%);\r\n}\r\n.hero-grid-bg {\r\n  position: absolute;\r\n  inset: 0;\r\n  background-image:\r\n    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);\r\n  background-size: 60px 60px;\r\n}\r\n.hero-content {\r\n  position: relative;\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 60px;\r\n  align-items: center;\r\n}\r\n.hero-left { animation: fadeUp 0.8s ease both; }\r\n.hero-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  background: rgba(0,212,170,0.12);\r\n  border: 1px solid rgba(0,212,170,0.25);\r\n  padding: 6px 16px;\r\n  border-radius: 999px;\r\n  font-size: 13px;\r\n  color: var(--brand-accent);\r\n  font-weight: 500;\r\n  margin-bottom: 28px;\r\n}\r\n.hero-title {\r\n  font-family: var(--font-heading);\r\n  font-size: clamp(32px, 5vw, 54px);\r\n  font-weight: 900;\r\n  line-height: 1.2;\r\n  color: #fff;\r\n  margin-bottom: 20px;\r\n}\r\n.hero-title .accent { color: var(--brand-accent); }\r\n.hero-desc {\r\n  font-size: 17px;\r\n  color: rgba(255,255,255,0.7);\r\n  line-height: 1.8;\r\n  margin-bottom: 36px;\r\n  max-width: 480px;\r\n}\r\n.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }\r\n.btn-primary {\r\n  background: var(--brand-accent);\r\n  color: var(--brand-primary);\r\n  padding: 14px 32px;\r\n  border-radius: var(--radius);\r\n  font-size: 15px;\r\n  font-weight: 700;\r\n  border: none;\r\n  cursor: pointer;\r\n  transition: var(--transition);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n.btn-primary:hover { background: #00E6B8; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,212,170,0.3); }\r\n.btn-outline {\r\n  background: transparent;\r\n  color: #fff;\r\n  padding: 14px 32px;\r\n  border-radius: var(--radius);\r\n  font-size: 15px;\r\n  font-weight: 500;\r\n  border: 1px solid rgba(255,255,255,0.25);\r\n  cursor: pointer;\r\n  transition: var(--transition);\r\n}\r\n.btn-outline:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }\r\n\r\n.hero-right { animation: fadeUp 0.8s ease 0.2s both; }\r\n.hero-visual {\r\n  background: rgba(255,255,255,0.04);\r\n  border: 1px solid rgba(255,255,255,0.08);\r\n  border-radius: var(--radius-lg);\r\n  padding: 20px;\r\n  position: relative;\r\n}\r\n.hero-photo-placeholder {\r\n  width: 100%;\r\n  aspect-ratio: 16\/10;\r\n  background:\r\n    linear-gradient(135deg, rgba(0,212,170,0.05), rgba(0,212,170,0.02)),\r\n    rgba(255,255,255,0.03);\r\n  border-radius: var(--radius);\r\n  border: 1px dashed rgba(255,255,255,0.15);\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 8px;\r\n  color: rgba(255,255,255,0.3);\r\n  font-size: 14px;\r\n}\r\n.hero-photo-placeholder i { font-size: 32px; }\r\n.hero-photo-placeholder span { font-size: 12px; }\r\n\r\n\/* Hero KPI Strip *\/\r\n.hero-kpi {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 1px;\r\n  background: rgba(255,255,255,0.06);\r\n  border-radius: var(--radius);\r\n  overflow: hidden;\r\n  margin-top: 24px;\r\n}\r\n.hero-kpi-item {\r\n  background: rgba(10,37,64,0.6);\r\n  padding: 20px 16px;\r\n  text-align: center;\r\n}\r\n.hero-kpi-num {\r\n  font-family: var(--font-mono);\r\n  font-size: 28px;\r\n  font-weight: 700;\r\n  color: var(--brand-accent);\r\n  line-height: 1;\r\n}\r\n.hero-kpi-label {\r\n  font-size: 12px;\r\n  color: rgba(255,255,255,0.5);\r\n  margin-top: 6px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   PAIN POINTS\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.pain-section { background: #fff; }\r\n.pain-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 20px;\r\n  margin-top: 48px;\r\n}\r\n.pain-card {\r\n  background: var(--brand-surface);\r\n  border: 1px solid var(--brand-border);\r\n  border-radius: var(--radius);\r\n  padding: 28px 24px;\r\n  transition: var(--transition);\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n.pain-card::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  height: 3px;\r\n  background: var(--brand-warm);\r\n  transform: scaleX(0);\r\n  transition: var(--transition);\r\n}\r\n.pain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }\r\n.pain-card:hover::before { transform: scaleX(1); }\r\n.pain-icon {\r\n  width: 48px;\r\n  height: 48px;\r\n  border-radius: var(--radius-sm);\r\n  background: rgba(255,107,53,0.08);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 22px;\r\n  color: var(--brand-warm);\r\n  margin-bottom: 16px;\r\n}\r\n.pain-title {\r\n  font-family: var(--font-heading);\r\n  font-size: 17px;\r\n  font-weight: 700;\r\n  margin-bottom: 8px;\r\n}\r\n.pain-desc {\r\n  font-size: 14px;\r\n  color: var(--brand-text-secondary);\r\n  line-height: 1.7;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SOLUTIONS\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.solutions-section { background: var(--brand-surface); }\r\n.solution-tabs {\r\n  display: flex;\r\n  gap: 8px;\r\n  margin-top: 40px;\r\n  margin-bottom: 32px;\r\n  flex-wrap: wrap;\r\n}\r\n.solution-tab {\r\n  padding: 10px 20px;\r\n  border-radius: var(--radius);\r\n  border: 1px solid var(--brand-border);\r\n  background: #fff;\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  color: var(--brand-text-secondary);\r\n  cursor: pointer;\r\n  transition: var(--transition);\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n}\r\n.solution-tab:hover { border-color: var(--brand-accent-dim); color: var(--brand-primary); }\r\n.solution-tab.active {\r\n  background: var(--brand-primary);\r\n  color: #fff;\r\n  border-color: var(--brand-primary);\r\n}\r\n.solution-panel { display: none; }\r\n.solution-panel.active { display: block; animation: fadeUp 0.4s ease; }\r\n.solution-content {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 32px;\r\n  align-items: start;\r\n}\r\n.solution-info h3 {\r\n  font-family: var(--font-heading);\r\n  font-size: 24px;\r\n  font-weight: 700;\r\n  margin-bottom: 12px;\r\n}\r\n.solution-info p {\r\n  font-size: 15px;\r\n  color: var(--brand-text-secondary);\r\n  line-height: 1.8;\r\n  margin-bottom: 20px;\r\n}\r\n.solution-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }\r\n.solution-tag {\r\n  font-family: var(--font-mono);\r\n  font-size: 11px;\r\n  background: var(--brand-surface);\r\n  border: 1px solid var(--brand-border);\r\n  padding: 4px 10px;\r\n  border-radius: var(--radius-sm);\r\n  color: var(--brand-text-secondary);\r\n}\r\n.before-after-box {\r\n  background: #fff;\r\n  border: 1px solid var(--brand-border);\r\n  border-radius: var(--radius);\r\n  overflow: hidden;\r\n}\r\n.ba-header {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  border-bottom: 1px solid var(--brand-border);\r\n}\r\n.ba-label {\r\n  padding: 10px 16px;\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  text-align: center;\r\n  text-transform: uppercase;\r\n  letter-spacing: 1px;\r\n}\r\n.ba-label.before { background: #FEF2F2; color: #B91C1C; }\r\n.ba-label.after { background: #E0FFF6; color: #047857; }\r\n.ba-content {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  min-height: 200px;\r\n}\r\n.ba-side {\r\n  padding: 20px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 8px;\r\n  color: var(--brand-text-muted);\r\n  font-size: 13px;\r\n}\r\n.ba-side i { font-size: 28px; }\r\n.ba-side:first-child { border-right: 1px solid var(--brand-border); }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   CASE STUDIES\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cases-section { background: #fff; }\r\n.case-filters {\r\n  display: flex;\r\n  gap: 8px;\r\n  margin-top: 40px;\r\n  margin-bottom: 32px;\r\n  flex-wrap: wrap;\r\n}\r\n.case-filter {\r\n  padding: 8px 18px;\r\n  border-radius: 999px;\r\n  border: 1px solid var(--brand-border);\r\n  background: #fff;\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  color: var(--brand-text-secondary);\r\n  cursor: pointer;\r\n  transition: var(--transition);\r\n}\r\n.case-filter:hover { border-color: var(--brand-accent-dim); }\r\n.case-filter.active {\r\n  background: var(--brand-primary);\r\n  color: #fff;\r\n  border-color: var(--brand-primary);\r\n}\r\n\r\n\/* Case Card Grid *\/\r\n.case-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, 1fr);\r\n  gap: 24px;\r\n}\r\n.case-card {\r\n  background: var(--brand-surface);\r\n  border: 1px solid var(--brand-border);\r\n  border-radius: var(--radius-lg);\r\n  overflow: hidden;\r\n  transition: var(--transition);\r\n  cursor: pointer;\r\n}\r\n.case-card:hover {\r\n  transform: translateY(-6px);\r\n  box-shadow: var(--shadow-lg);\r\n  border-color: transparent;\r\n}\r\n.case-card-photo {\r\n  width: 100%;\r\n  aspect-ratio: 16\/9;\r\n  background: linear-gradient(135deg, #E2E8F0, #F1F5F9);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--brand-text-muted);\r\n  font-size: 14px;\r\n  gap: 6px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n.case-card-photo img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  position: absolute;\r\n  inset: 0;\r\n}\r\n.case-card-body { padding: 24px; }\r\n.case-card-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }\r\n.case-card-title {\r\n  font-family: var(--font-heading);\r\n  font-size: 18px;\r\n  font-weight: 700;\r\n  margin-bottom: 8px;\r\n  line-height: 1.4;\r\n}\r\n.case-card-desc {\r\n  font-size: 14px;\r\n  color: var(--brand-text-secondary);\r\n  line-height: 1.7;\r\n  margin-bottom: 16px;\r\n}\r\n.case-card-kpis {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, 1fr);\r\n  gap: 8px;\r\n}\r\n.case-kpi {\r\n  background: #fff;\r\n  border-radius: var(--radius-sm);\r\n  padding: 12px;\r\n  text-align: center;\r\n  border: 1px solid var(--brand-border);\r\n}\r\n.case-kpi-num {\r\n  font-family: var(--font-mono);\r\n  font-size: 22px;\r\n  font-weight: 700;\r\n  color: var(--brand-primary);\r\n  line-height: 1;\r\n}\r\n.case-kpi-label {\r\n  font-size: 11px;\r\n  color: var(--brand-text-muted);\r\n  margin-top: 4px;\r\n}\r\n\r\n\/* Case Detail (expanded) *\/\r\n.case-detail-overlay {\r\n  position: fixed;\r\n  inset: 0;\r\n  background: rgba(10,37,64,0.6);\r\n  backdrop-filter: blur(8px);\r\n  z-index: 2000;\r\n  display: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 24px;\r\n}\r\n.case-detail-overlay.open { display: flex; }\r\n.case-detail {\r\n  background: #fff;\r\n  border-radius: var(--radius-lg);\r\n  max-width: 900px;\r\n  width: 100%;\r\n  max-height: 90vh;\r\n  overflow-y: auto;\r\n  position: relative;\r\n  animation: fadeUp 0.3s ease;\r\n}\r\n.case-detail-close {\r\n  position: absolute;\r\n  top: 16px;\r\n  right: 16px;\r\n  width: 36px;\r\n  height: 36px;\r\n  border-radius: 50%;\r\n  background: var(--brand-surface);\r\n  border: 1px solid var(--brand-border);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: pointer;\r\n  font-size: 18px;\r\n  color: var(--brand-text-secondary);\r\n  z-index: 10;\r\n  transition: var(--transition);\r\n}\r\n.case-detail-close:hover { background: #fff; border-color: var(--brand-text-muted); }\r\n.case-detail-header {\r\n  padding: 40px 40px 24px;\r\n  border-bottom: 1px solid var(--brand-border);\r\n}\r\n.case-detail-body { padding: 32px 40px; }\r\n.case-detail-section { margin-bottom: 32px; }\r\n.case-detail-section-title {\r\n  font-family: var(--font-heading);\r\n  font-size: 14px;\r\n  font-weight: 700;\r\n  color: var(--brand-text-muted);\r\n  text-transform: uppercase;\r\n  letter-spacing: 1px;\r\n  margin-bottom: 12px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n}\r\n.case-detail-section-title i { color: var(--brand-accent-dim); }\r\n.case-detail-kpis {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 12px;\r\n}\r\n.case-detail-kpi {\r\n  background: var(--brand-surface);\r\n  border-radius: var(--radius);\r\n  padding: 20px 16px;\r\n  text-align: center;\r\n}\r\n.case-detail-kpi-num {\r\n  font-family: var(--font-mono);\r\n  font-size: 28px;\r\n  font-weight: 700;\r\n  color: var(--brand-primary);\r\n}\r\n.case-detail-kpi-label {\r\n  font-size: 12px;\r\n  color: var(--brand-text-secondary);\r\n  margin-top: 4px;\r\n}\r\n.case-detail-photos {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 8px;\r\n}\r\n.case-detail-photo-ph {\r\n  aspect-ratio: 4\/3;\r\n  background: var(--brand-surface);\r\n  border: 1px dashed var(--brand-border);\r\n  border-radius: var(--radius-sm);\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--brand-text-muted);\r\n  font-size: 12px;\r\n  gap: 4px;\r\n}\r\n.case-detail-quote {\r\n  background: var(--brand-surface);\r\n  border-left: 4px solid var(--brand-accent);\r\n  border-radius: 0 var(--radius) var(--radius) 0;\r\n  padding: 20px 24px;\r\n  font-size: 15px;\r\n  font-style: italic;\r\n  color: var(--brand-text-secondary);\r\n  line-height: 1.8;\r\n}\r\n.case-detail-quote-author {\r\n  margin-top: 10px;\r\n  font-size: 13px;\r\n  font-style: normal;\r\n  color: var(--brand-text-muted);\r\n}\r\n.case-timeline {\r\n  display: flex;\r\n  gap: 0;\r\n  position: relative;\r\n  padding: 12px 0;\r\n}\r\n.case-timeline::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 24px;\r\n  left: 0;\r\n  right: 0;\r\n  height: 2px;\r\n  background: var(--brand-border);\r\n}\r\n.tl-step {\r\n  flex: 1;\r\n  text-align: center;\r\n  position: relative;\r\n}\r\n.tl-dot {\r\n  width: 14px;\r\n  height: 14px;\r\n  border-radius: 50%;\r\n  background: var(--brand-accent);\r\n  border: 3px solid #fff;\r\n  box-shadow: 0 0 0 2px var(--brand-accent);\r\n  margin: 0 auto 8px;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n.tl-step-title { font-size: 12px; font-weight: 600; color: var(--brand-text); }\r\n.tl-step-date { font-size: 11px; color: var(--brand-text-muted); }\r\n.tech-tags { display: flex; flex-wrap: wrap; gap: 6px; }\r\n.tech-tag {\r\n  font-family: var(--font-mono);\r\n  font-size: 11px;\r\n  background: var(--brand-surface);\r\n  border: 1px solid var(--brand-border);\r\n  padding: 4px 10px;\r\n  border-radius: var(--radius-sm);\r\n  color: var(--brand-text-secondary);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   PROCESS FLOW\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.process-section { background: var(--brand-primary); }\r\n.process-section .section-label { color: var(--brand-accent); }\r\n.process-section .section-title { color: #fff; }\r\n.process-section .section-subtitle { color: rgba(255,255,255,0.6); }\r\n.process-flow {\r\n  display: grid;\r\n  grid-template-columns: repeat(5, 1fr);\r\n  gap: 16px;\r\n  margin-top: 48px;\r\n}\r\n.process-step {\r\n  background: rgba(255,255,255,0.05);\r\n  border: 1px solid rgba(255,255,255,0.1);\r\n  border-radius: var(--radius);\r\n  padding: 28px 20px;\r\n  text-align: center;\r\n  position: relative;\r\n  transition: var(--transition);\r\n}\r\n.process-step:hover { background: rgba(255,255,255,0.08); transform: translateY(-4px); }\r\n.process-step-num {\r\n  font-family: var(--font-mono);\r\n  font-size: 32px;\r\n  font-weight: 700;\r\n  color: var(--brand-accent);\r\n  line-height: 1;\r\n  margin-bottom: 14px;\r\n}\r\n.process-step-title {\r\n  font-family: var(--font-heading);\r\n  font-size: 15px;\r\n  font-weight: 700;\r\n  color: #fff;\r\n  margin-bottom: 6px;\r\n}\r\n.process-step-desc {\r\n  font-size: 13px;\r\n  color: rgba(255,255,255,0.5);\r\n  line-height: 1.6;\r\n}\r\n.process-arrow {\r\n  position: absolute;\r\n  right: -18px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  color: rgba(255,255,255,0.2);\r\n  font-size: 16px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   CTA\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.cta-section {\r\n  background: var(--brand-surface);\r\n  text-align: center;\r\n  padding: 80px 0;\r\n}\r\n.cta-box {\r\n  background: var(--brand-gradient);\r\n  border-radius: var(--radius-lg);\r\n  padding: 60px 40px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n.cta-box::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background: radial-gradient(circle at 50% 50%, rgba(0,212,170,0.1), transparent 70%);\r\n}\r\n.cta-box * { position: relative; }\r\n.cta-title {\r\n  font-family: var(--font-heading);\r\n  font-size: 32px;\r\n  font-weight: 900;\r\n  color: #fff;\r\n  margin-bottom: 12px;\r\n}\r\n.cta-desc {\r\n  font-size: 16px;\r\n  color: rgba(255,255,255,0.6);\r\n  margin-bottom: 32px;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   FOOTER\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.footer {\r\n  background: var(--brand-primary);\r\n  padding: 40px 0;\r\n  text-align: center;\r\n  font-size: 13px;\r\n  color: rgba(255,255,255,0.4);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   RESPONSIVE\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 900px) {\r\n  .hero-content { grid-template-columns: 1fr; }\r\n  .hero-right { display: none; }\r\n  .hero-kpi { grid-template-columns: repeat(2, 1fr); }\r\n  .pain-grid { grid-template-columns: 1fr 1fr; }\r\n  .solution-content { grid-template-columns: 1fr; }\r\n  .case-grid { grid-template-columns: 1fr; }\r\n  .case-detail-kpis { grid-template-columns: repeat(2, 1fr); }\r\n  .process-flow { grid-template-columns: 1fr 1fr; }\r\n  .process-arrow { display: none; }\r\n  .case-detail-header, .case-detail-body { padding: 24px; }\r\n}\r\n@media (max-width: 600px) {\r\n  .nav-links { display: none; }\r\n  .nav-menu-btn { display: block; }\r\n  .pain-grid { grid-template-columns: 1fr; }\r\n  .hero-kpi { grid-template-columns: 1fr 1fr; }\r\n  .process-flow { grid-template-columns: 1fr; }\r\n  .case-detail-kpis { grid-template-columns: 1fr 1fr; }\r\n  .case-detail-photos { grid-template-columns: 1fr 1fr; }\r\n}\r\n<\/style>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     NAVBAR\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<nav class=\"navbar\" id=\"navbar\">\r\n  <div class=\"container navbar-inner\">\r\n    <a href=\"#\" class=\"nav-logo\">\r\n      <span class=\"nav-logo-icon\"><i class=\"ti ti-cpu\"><\/i><\/span>\r\n      <!-- \u270f\ufe0f \u66ff\u63db\uff1a\u4f60\u7684\u516c\u53f8\u540d\u7a31 -->\r\n      YourBrand\r\n    <\/a>\r\n    <ul class=\"nav-links\">\r\n      <li><a href=\"#pain\">\u7522\u696d\u75db\u9ede<\/a><\/li>\r\n      <li><a href=\"#solutions\">\u89e3\u6c7a\u65b9\u6848<\/a><\/li>\r\n      <li><a href=\"#cases\">\u6210\u529f\u6848\u4f8b<\/a><\/li>\r\n      <li><a href=\"#process\">\u670d\u52d9\u6d41\u7a0b<\/a><\/li>\r\n    <\/ul>\r\n    <button class=\"nav-cta\" onclick=\"document.getElementById('cta').scrollIntoView({behavior:'smooth'})\">\u514d\u8cbb\u8aee\u8a62 \u2192<\/button>\r\n    <button class=\"nav-menu-btn\"><i class=\"ti ti-menu-2\"><\/i><\/button>\r\n  <\/div>\r\n<\/nav>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     HERO SECTION\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"hero\" id=\"hero\">\r\n  <div class=\"hero-grid-bg\"><\/div>\r\n  <div class=\"container hero-content\">\r\n    <div class=\"hero-left\">\r\n      <div class=\"hero-badge\">\r\n        <i class=\"ti ti-bolt\"><\/i>\r\n        \u5de5\u696d\u81ea\u52d5\u5316 \u00b7 SCADA \u6574\u5408\u5c08\u5bb6\r\n      <\/div>\r\n      <h1 class=\"hero-title\">\r\n        \u8b93\u6bcf\u4e00\u53f0\u8a2d\u5099<br>\r\n        \u90fd\u80fd\u88ab<span class=\"accent\">\u770b\u898b<\/span>\u3001<span class=\"accent\">\u7ba1\u7406<\/span>\u3001<span class=\"accent\">\u512a\u5316<\/span>\r\n      <\/h1>\r\n      <p class=\"hero-desc\">\r\n        \u5f9e\u63a7\u5236\u7cfb\u7d71\u6574\u5408\u5230\u9060\u7aef SCADA \u76e3\u63a7\uff0c\u6211\u5011\u63d0\u4f9b OT \u89e3\u6c7a\u65b9\u6848\u3002\r\n        \u4e0d\u53ea\u662f\u9023\u7dda\uff0c\u800c\u662f\u8b93\u4f60\u7684\u5de5\u5ee0\u64c1\u6709\u771f\u6b63\u7684\u6578\u64da\u795e\u7d93\u7cfb\u7d71\u3002\r\n      <\/p>\r\n      <div class=\"hero-btns\">\r\n        <button class=\"btn-primary\" onclick=\"document.getElementById('cases').scrollIntoView({behavior:'smooth'})\">\r\n          \u67e5\u770b\u6210\u529f\u6848\u4f8b\r\n          <i class=\"ti ti-arrow-right\"><\/i>\r\n        <\/button>\r\n        <button class=\"btn-outline\" onclick=\"document.getElementById('solutions').scrollIntoView({behavior:'smooth'})\">\r\n          \u4e86\u89e3\u670d\u52d9\u9805\u76ee\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"hero-right\">\r\n      <div class=\"hero-visual\">\r\n        <!-- \u270f\ufe0f \u66ff\u63db\uff1a\u653e\u5165\u4f60\u7684\u73fe\u5834\u7167\u7247\uff0c\u628a placeholder \u63db\u6210 <img> -->\r\n        <div class=\"hero-photo-placeholder\">\r\n          <i class=\"ti ti-device-analytics\"><\/i>\r\n          \u66ff\u63db\u70ba\u73fe\u5834\u7167\u7247 \/ SCADA \u756b\u9762\u622a\u5716\r\n          <span>\u5efa\u8b70\u5c3a\u5bf8 800\u00d7500px<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n  <!-- \u270f\ufe0f KPI \u6578\u5b57\uff1a\u4f9d\u4f60\u7684\u5be6\u969b\u6578\u64da\u4fee\u6539 -->\r\n  <div class=\"container\">\r\n    <div class=\"hero-kpi\">\r\n      <div class=\"hero-kpi-item\"><div class=\"hero-kpi-num\">50+<\/div><div class=\"hero-kpi-label\">\u5b8c\u6210\u6848\u5834<\/div><\/div>\r\n      <div class=\"hero-kpi-item\"><div class=\"hero-kpi-num\">18%<\/div><div class=\"hero-kpi-label\">\u5e73\u5747\u7bc0\u80fd\u6210\u6548<\/div><\/div>\r\n      <div class=\"hero-kpi-item\"><div class=\"hero-kpi-num\">&lt;2min<\/div><div class=\"hero-kpi-label\">\u7570\u5e38\u97ff\u61c9\u6642\u9593<\/div><\/div>\r\n      <div class=\"hero-kpi-item\"><div class=\"hero-kpi-num\">15yr<\/div><div class=\"hero-kpi-label\">\u73fe\u5834\u5de5\u7a0b\u7d93\u9a57<\/div><\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     PAIN POINTS\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"section pain-section\" id=\"pain\">\r\n  <div class=\"container\">\r\n    <div class=\"section-label\">Pain points<\/div>\r\n    <h2 class=\"section-title\">\u9019\u4e9b\u554f\u984c\uff0c\u662f\u4e0d\u662f\u4e5f\u56f0\u64fe\u8457\u4f60\uff1f<\/h2>\r\n    <p class=\"section-subtitle\">\u50b3\u7d71\u5de5\u5ee0\u9762\u81e8\u7684\u516d\u5927\u6311\u6230\u2014\u2014\u5982\u679c\u8d85\u904e\u5169\u9805\u7b26\u5408\u4f60\u7684\u73fe\u6cc1\uff0c\u6211\u5011\u61c9\u8a72\u804a\u804a\u3002<\/p>\r\n\r\n    <!-- \u270f\ufe0f \u75db\u9ede\u5361\u7247\uff1a\u53ef\u589e\u6e1b\u3001\u4fee\u6539\u6587\u5b57 -->\r\n    <div class=\"pain-grid\">\r\n      <div class=\"pain-card animate-on-scroll\">\r\n        <div class=\"pain-icon\"><i class=\"ti ti-topology-star-3\"><\/i><\/div>\r\n        <div class=\"pain-title\">\u8cc7\u8a0a\u5b64\u5cf6<\/div>\r\n        <p class=\"pain-desc\">\u5404\u7522\u7dda\u8a2d\u5099\u5404\u8aaa\u5404\u8a71\uff0c\u6578\u64da\u5206\u6563\u5728\u4e0d\u540c HMI \u548c\u7d19\u672c\u8a18\u9304\u4e2d\uff0c\u7ba1\u7406\u5c64\u7121\u6cd5\u638c\u63e1\u5168\u8c8c\u3002<\/p>\r\n      <\/div>\r\n      <div class=\"pain-card animate-on-scroll\">\r\n        <div class=\"pain-icon\"><i class=\"ti ti-plug-connected-x\"><\/i><\/div>\r\n        <div class=\"pain-title\">OT\/IT \u6574\u5408\u56f0\u96e3<\/div>\r\n        <p class=\"pain-desc\">PLC\u3001DCS\u3001MES \u8aaa\u4e0d\u540c\u8a9e\u8a00\uff0cModbus\u3001Profibus\u3001Ethernet\/IP \u5404\u81ea\u70ba\u653f\uff0c\u4e32\u63a5\u6210\u672c\u9ad8\u3002<\/p>\r\n      <\/div>\r\n      <div class=\"pain-card animate-on-scroll\">\r\n        <div class=\"pain-icon\"><i class=\"ti ti-bolt-off\"><\/i><\/div>\r\n        <div class=\"pain-title\">\u7bc0\u80fd\u58d3\u529b\u4e0a\u5347<\/div>\r\n        <p class=\"pain-desc\">\u96fb\u8cbb\u5e74\u5e74\u6f32\u3001\u78b3\u76e4\u67e5\u5728\u5373\uff0c\u4f46\u8017\u80fd\u9ed1\u7bb1\u770b\u4e0d\u898b\u3001\u91cf\u4e0d\u5230\uff0c\u7121\u5f9e\u512a\u5316\u3002<\/p>\r\n      <\/div>\r\n      <div class=\"pain-card animate-on-scroll\">\r\n        <div class=\"pain-icon\"><i class=\"ti ti-eye-off\"><\/i><\/div>\r\n        <div class=\"pain-title\">\u63a7\u5236\u4e0d\u900f\u660e<\/div>\r\n        <p class=\"pain-desc\">\u88fd\u7a0b\u9760\u8001\u5e2b\u5085\u3001\u5de1\u6aa2\u9760\u4eba\u8dd1\u3001\u7570\u5e38\u9760\u904b\u6c23\u3002\u7f3a\u4e4f\u5373\u6642\u76e3\u63a7\u8207\u81ea\u52d5\u8b66\u5831\u6a5f\u5236\u3002<\/p>\r\n      <\/div>\r\n      <div class=\"pain-card animate-on-scroll\">\r\n        <div class=\"pain-icon\"><i class=\"ti ti-map-pin-off\"><\/i><\/div>\r\n        <div class=\"pain-title\">\u9060\u7aef\u7dad\u8b77\u56f0\u96e3<\/div>\r\n        <p class=\"pain-desc\">\u5916\u7e23\u5e02\u5ee0\u623f\u51fa\u4e8b\u5c31\u8981\u6d3e\u4eba\u5230\u5834\uff0c\u5dee\u65c5\u6210\u672c\u9ad8\u3001\u97ff\u61c9\u901f\u5ea6\u6162\uff0c\u5c0f\u554f\u984c\u4e5f\u5f97\u7b49\u534a\u5929\u3002<\/p>\r\n      <\/div>\r\n      <div class=\"pain-card animate-on-scroll\">\r\n        <div class=\"pain-icon\"><i class=\"ti ti-history\"><\/i><\/div>\r\n        <div class=\"pain-title\">\u8001\u7cfb\u7d71\u5347\u7d1a\u98a8\u96aa<\/div>\r\n        <p class=\"pain-desc\">\u73fe\u6709\u7cfb\u7d71\u8dd1\u4e86\u5341\u5e7e\u5e74\u4e0d\u6562\u52d5\uff0c\u63db\u7cfb\u7d71\u6015\u505c\u7522\u3001\u6015\u4e0d\u76f8\u5bb9\u3001\u6015\u8cc7\u6599\u907a\u5931\u3002<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     SOLUTIONS (Tab \u5207\u63db)\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"section solutions-section\" id=\"solutions\">\r\n  <div class=\"container\">\r\n    <div class=\"section-label\">Solutions<\/div>\r\n    <h2 class=\"section-title\">\u4e94\u5927\u670d\u52d9\uff0c\u5b8c\u6574\u8986\u84cb<\/h2>\r\n    <p class=\"section-subtitle\">\u5f9e\u8a55\u4f30\u5230\u4ea4\u4ed8\u3001\u5f9e\u73fe\u5834\u5230\u96f2\u7aef\uff0c\u6211\u5011\u4e0d\u53ea\u662f\u4f9b\u61c9\u5546\u2014\u2014\u6211\u5011\u662f\u4f60\u7684 OT \u6574\u5408\u5925\u4f34\u3002<\/p>\r\n\r\n    <div class=\"solution-tabs\">\r\n      <button class=\"solution-tab active\" onclick=\"switchTab(0)\"><i class=\"ti ti-circuit-board\"><\/i>\u63a7\u5236\u7cfb\u7d71\u6574\u5408<\/button>\r\n      <button class=\"solution-tab\" onclick=\"switchTab(1)\"><i class=\"ti ti-device-analytics\"><\/i>SCADA \u7cfb\u7d71\u7814\u767c<\/button>\r\n      <button class=\"solution-tab\" onclick=\"switchTab(2)\"><i class=\"ti ti-cloud-computing\"><\/i>\u9060\u7aef\u5de5\u696d\u76e3\u63a7<\/button>\r\n      <button class=\"solution-tab\" onclick=\"switchTab(3)\"><i class=\"ti ti-tool\"><\/i>\u73fe\u5834 Commission<\/button>\r\n      <button class=\"solution-tab\" onclick=\"switchTab(4)\"><i class=\"ti ti-certificate\"><\/i>\u5c08\u696d\u8aee\u8a62<\/button>\r\n    <\/div>\r\n\r\n    <!-- \u270f\ufe0f \u6bcf\u500b Tab \u7684\u5167\u5bb9\u53ef\u4ee5\u4fee\u6539\uff0c\u683c\u5f0f\u4e00\u81f4 -->\r\n    <div class=\"solution-panel active\" data-tab=\"0\">\r\n      <div class=\"solution-content\">\r\n        <div class=\"solution-info\">\r\n          <h3>\u63a7\u5236\u7cfb\u7d71\u6574\u5408<\/h3>\r\n          <p>\u5c07\u5de5\u5ee0\u5167\u4e0d\u540c\u54c1\u724c\u3001\u4e0d\u540c\u5354\u5b9a\u7684 PLC\u3001DCS\u3001\u5100\u8868\u7d71\u4e00\u4e32\u63a5\uff0c\u6d88\u9664\u8cc7\u8a0a\u5b64\u5cf6\u3002\u7121\u8ad6\u662f\u65b0\u5efa\u7cfb\u7d71\u6216\u65e2\u6709\u8a2d\u5099\u6539\u9020\uff0c\u90fd\u80fd\u7121\u7e2b\u6574\u5408\u3002<\/p>\r\n          <div class=\"solution-tags\">\r\n            <span class=\"solution-tag\">OPC-UA<\/span>\r\n            <span class=\"solution-tag\">Modbus TCP\/RTU<\/span>\r\n            <span class=\"solution-tag\">Profibus<\/span>\r\n            <span class=\"solution-tag\">Ethernet\/IP<\/span>\r\n            <span class=\"solution-tag\">MQTT<\/span>\r\n            <span class=\"solution-tag\">BACnet<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"before-after-box\">\r\n          <div class=\"ba-header\">\r\n            <div class=\"ba-label before\">\u6574\u5408\u524d<\/div>\r\n            <div class=\"ba-label after\">\u6574\u5408\u5f8c<\/div>\r\n          <\/div>\r\n          <div class=\"ba-content\">\r\n            <div class=\"ba-side\">\r\n              <i class=\"ti ti-photo\"><\/i>\r\n              <!-- \u270f\ufe0f \u66ff\u63db\u70ba\u4f60\u7684\u67b6\u69cb\u793a\u610f\u5716 -->\r\n              \u653e\u5165\u300c\u6574\u5408\u524d\u300d\u67b6\u69cb\u5716\r\n            <\/div>\r\n            <div class=\"ba-side\">\r\n              <i class=\"ti ti-photo\"><\/i>\r\n              \u653e\u5165\u300c\u6574\u5408\u5f8c\u300d\u67b6\u69cb\u5716\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"solution-panel\" data-tab=\"1\">\r\n      <div class=\"solution-content\">\r\n        <div class=\"solution-info\">\r\n          <h3>SCADA \u7cfb\u7d71\u7814\u767c<\/h3>\r\n          <p>\u5ba2\u88fd\u5316 SCADA \u5e73\u53f0\u958b\u767c\uff0c\u5305\u542b\u5373\u6642\u76e3\u63a7\u4ecb\u9762\u3001\u6b77\u53f2\u8da8\u52e2\u3001\u8b66\u5831\u7ba1\u7406\u3001\u5831\u8868\u81ea\u52d5\u5316\u3002\u8b93\u6bcf\u4e00\u500b\u6578\u64da\u9ede\u90fd\u6709\u610f\u7fa9\u3002<\/p>\r\n          <div class=\"solution-tags\">\r\n            <span class=\"solution-tag\">Ignition<\/span>\r\n            <span class=\"solution-tag\">\u5ba2\u88fd HMI<\/span>\r\n            <span class=\"solution-tag\">\u5373\u6642\u8da8\u52e2<\/span>\r\n            <span class=\"solution-tag\">\u5831\u8868\u81ea\u52d5\u5316<\/span>\r\n            <span class=\"solution-tag\">\u8b66\u5831\u5206\u7d1a\u7ba1\u7406<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"before-after-box\">\r\n          <div class=\"ba-header\">\r\n            <div class=\"ba-label before\">\u6574\u5408\u524d<\/div>\r\n            <div class=\"ba-label after\">\u6574\u5408\u5f8c<\/div>\r\n          <\/div>\r\n          <div class=\"ba-content\">\r\n            <div class=\"ba-side\"><i class=\"ti ti-photo\"><\/i>\u820a HMI \u622a\u5716<\/div>\r\n            <div class=\"ba-side\"><i class=\"ti ti-photo\"><\/i>\u65b0 SCADA \u756b\u9762<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"solution-panel\" data-tab=\"2\">\r\n      <div class=\"solution-content\">\r\n        <div class=\"solution-info\">\r\n          <h3>\u9060\u7aef\u5de5\u696d\u76e3\u63a7<\/h3>\r\n          <p>\u900f\u904e 4G\/5G \u5de5\u696d\u8def\u7531\u5668\u8207\u96f2\u7aef\u5e73\u53f0\uff0c\u8b93\u4f60\u5728\u8fa6\u516c\u5ba4\u6216\u624b\u6a5f\u4e0a\u5373\u6642\u638c\u63e1\u6240\u6709\u5ee0\u5340\u8a2d\u5099\u72c0\u614b\uff0c\u7570\u5e38\u81ea\u52d5\u63a8\u64ad\u544a\u8b66\u3002<\/p>\r\n          <div class=\"solution-tags\">\r\n            <span class=\"solution-tag\">4G\/5G \u901a\u8a0a<\/span>\r\n            <span class=\"solution-tag\">VPN \u5b89\u5168\u9023\u7dda<\/span>\r\n            <span class=\"solution-tag\">\u96f2\u7aef\u5e73\u53f0<\/span>\r\n            <span class=\"solution-tag\">\u884c\u52d5\u76e3\u63a7 App<\/span>\r\n            <span class=\"solution-tag\">Line Bot \u544a\u8b66<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"before-after-box\">\r\n          <div class=\"ba-header\">\r\n            <div class=\"ba-label before\">\u6574\u5408\u524d<\/div>\r\n            <div class=\"ba-label after\">\u6574\u5408\u5f8c<\/div>\r\n          <\/div>\r\n          <div class=\"ba-content\">\r\n            <div class=\"ba-side\"><i class=\"ti ti-photo\"><\/i>\u4eba\u5de5\u5de1\u6aa2<\/div>\r\n            <div class=\"ba-side\"><i class=\"ti ti-photo\"><\/i>\u9060\u7aef\u76e3\u63a7\u756b\u9762<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"solution-panel\" data-tab=\"3\">\r\n      <div class=\"solution-content\">\r\n        <div class=\"solution-info\">\r\n          <h3>\u73fe\u5834 Commission \u670d\u52d9<\/h3>\r\n          <p>\u5de5\u7a0b\u5e2b\u5230\u5834\u9032\u884c\u8a2d\u5099\u8abf\u8a66\u3001\u8ff4\u8def\u6e2c\u8a66\u3001FAT\/SAT \u9a57\u8b49\u3002\u78ba\u4fdd\u7cfb\u7d71\u5f9e\u5716\u7d19\u5230\u73fe\u5834 100% \u843d\u5730\uff0c\u4e0d\u7559\u5c3e\u5df4\u3002<\/p>\r\n          <div class=\"solution-tags\">\r\n            <span class=\"solution-tag\">FAT \u51fa\u5ee0\u6e2c\u8a66<\/span>\r\n            <span class=\"solution-tag\">SAT \u73fe\u5834\u9a57\u6536<\/span>\r\n            <span class=\"solution-tag\">\u8ff4\u8def\u6821\u9a57<\/span>\r\n            <span class=\"solution-tag\">\u5de5\u7a0b\u5e2b\u99d0\u9ede<\/span>\r\n            <span class=\"solution-tag\">\u6559\u80b2\u8a13\u7df4<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"before-after-box\">\r\n          <div class=\"ba-header\">\r\n            <div class=\"ba-label before\">\u8abf\u8a66\u524d<\/div>\r\n            <div class=\"ba-label after\">\u8abf\u8a66\u5f8c<\/div>\r\n          <\/div>\r\n          <div class=\"ba-content\">\r\n            <div class=\"ba-side\"><i class=\"ti ti-photo\"><\/i>\u65bd\u5de5\u4e2d\u7167\u7247<\/div>\r\n            <div class=\"ba-side\"><i class=\"ti ti-photo\"><\/i>\u9a57\u6536\u5b8c\u6210\u7167\u7247<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"solution-panel\" data-tab=\"4\">\r\n      <div class=\"solution-content\">\r\n        <div class=\"solution-info\">\r\n          <h3>\u4ed8\u8cbb\u5c08\u696d\u8aee\u8a62<\/h3>\r\n          <p>\u81ea\u52d5\u5316\u53ef\u884c\u6027\u8a55\u4f30\u3001\u7cfb\u7d71\u67b6\u69cb\u898f\u5283\u3001OT \u8cc7\u5b89\u5408\u898f\u9867\u554f\u3002\u5728\u4f60\u6295\u5165\u9810\u7b97\u4e4b\u524d\uff0c\u5148\u7528\u5c08\u696d\u8aee\u8a62\u964d\u4f4e\u98a8\u96aa\u3002<\/p>\r\n          <div class=\"solution-tags\">\r\n            <span class=\"solution-tag\">\u53ef\u884c\u6027\u8a55\u4f30<\/span>\r\n            <span class=\"solution-tag\">\u67b6\u69cb\u898f\u5283<\/span>\r\n            <span class=\"solution-tag\">Purdue Model<\/span>\r\n            <span class=\"solution-tag\">IEC 62443<\/span>\r\n            <span class=\"solution-tag\">\u6578\u4f4d\u8f49\u578b\u8def\u7dda\u5716<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"before-after-box\">\r\n          <div class=\"ba-header\">\r\n            <div class=\"ba-label before\">\u8aee\u8a62\u524d<\/div>\r\n            <div class=\"ba-label after\">\u8aee\u8a62\u5f8c<\/div>\r\n          <\/div>\r\n          <div class=\"ba-content\">\r\n            <div class=\"ba-side\"><i class=\"ti ti-photo\"><\/i>\u9700\u6c42\u8a2a\u8ac7\u7d00\u9304<\/div>\r\n            <div class=\"ba-side\"><i class=\"ti ti-photo\"><\/i>\u898f\u5283\u5831\u544a\u66f8<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     CASE STUDIES\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"section cases-section\" id=\"cases\">\r\n  <div class=\"container\">\r\n    <div class=\"section-label\">Case studies<\/div>\r\n    <h2 class=\"section-title\">\u6210\u529f\u6848\u4f8b<\/h2>\r\n    <p class=\"section-subtitle\">\u6bcf\u4e00\u500b\u6848\u4f8b\u90fd\u662f\u5be6\u969b\u4ea4\u4ed8\u3001\u9a57\u6536\u901a\u904e\u7684\u771f\u5be6\u6210\u679c\u3002<\/p>\r\n\r\n    <div class=\"case-filters\">\r\n      <button class=\"case-filter active\" onclick=\"filterCases('all')\">\u5168\u90e8<\/button>\r\n      <button class=\"case-filter\" onclick=\"filterCases('water')\">\u6c34\u8655\u7406<\/button>\r\n      <button class=\"case-filter\" onclick=\"filterCases('petro')\">\u77f3\u5316\/\u80fd\u6e90<\/button>\r\n      <button class=\"case-filter\" onclick=\"filterCases('food')\">\u98df\u54c1\u88fd\u9020<\/button>\r\n      <button class=\"case-filter\" onclick=\"filterCases('power')\">\u96fb\u529b\u8a2d\u65bd<\/button>\r\n    <\/div>\r\n\r\n    <!--\r\n    \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n    \u2551  \ud83d\udccb \u6848\u4f8b\u6a21\u677f\u8aaa\u660e                                             \u2551\r\n    \u2551                                                              \u2551\r\n    \u2551  \u8981\u65b0\u589e\u6848\u4f8b\uff0c\u8907\u88fd\u4e0b\u65b9 case-card \u5340\u584a\uff0c\u4fee\u6539\u4ee5\u4e0b\u6b04\u4f4d\uff1a          \u2551\r\n    \u2551                                                              \u2551\r\n    \u2551  1. data-category=\"water\"  \u2190 \u6539\u70ba\u5c0d\u61c9\u7522\u696d\u4ee3\u78bc               \u2551\r\n    \u2551     (water \/ petro \/ food \/ power \/ pharma)                  \u2551\r\n    \u2551  2. onclick=\"openCase(0)\"  \u2190 \u6539\u70ba\u5c0d\u61c9\u7684\u9663\u5217 index            \u2551\r\n    \u2551  3. \u5361\u7247\u5167\u7684\u6587\u5b57\u3001\u6578\u5b57                                       \u2551\r\n    \u2551  4. \u5728 JS \u7684 casesData \u9663\u5217\u65b0\u589e\u5c0d\u61c9\u7684\u8a73\u7d30\u8cc7\u6599                \u2551\r\n    \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n    -->\r\n\r\n    <div class=\"case-grid\" id=\"caseGrid\">\r\n\r\n      <!-- \u270f\ufe0f \u6848\u4f8b 1 -->\r\n      <div class=\"case-card\" data-category=\"water\" onclick=\"openCase(0)\">\r\n        <div class=\"case-card-photo\">\r\n          <i class=\"ti ti-photo\"><\/i> \u66ff\u63db\u70ba\u73fe\u5834\u7167\u7247\r\n          <!-- \u653e\u5165\u5716\u7247\uff1a<img decoding=\"async\" src=\"your-photo.jpg\" alt=\"\u6c34\u8655\u7406\u5ee0\u6848\u4f8b\"> -->\r\n        <\/div>\r\n        <div class=\"case-card-body\">\r\n          <div class=\"case-card-chips\">\r\n            <span class=\"chip chip-teal\">\u6c34\u8655\u7406\u5ee0<\/span>\r\n            <span class=\"chip chip-blue\">\u9060\u7aef\u76e3\u63a7<\/span>\r\n          <\/div>\r\n          <h3 class=\"case-card-title\">\u8de8\u5ee0\u5340\u9060\u7aef\u96c6\u4e2d\u76e3\u63a7\u7cfb\u7d71\u5efa\u7f6e<\/h3>\r\n          <p class=\"case-card-desc\">\u70ba\u53f0\u7063\u5357\u90e8\u6c34\u8cc7\u6e90\u8655\u7406\u4e2d\u5fc3\u5efa\u7f6e\u8de8 3 \u5ee0\u5340\u7684 SCADA \u9060\u7aef\u76e3\u63a7\u7cfb\u7d71\uff0c\u5be6\u73fe\u96c6\u4e2d\u7ba1\u7406\u3002<\/p>\r\n          <div class=\"case-card-kpis\">\r\n            <div class=\"case-kpi\"><div class=\"case-kpi-num\">60%<\/div><div class=\"case-kpi-label\">\u6d3e\u5de5\u6e1b\u5c11<\/div><\/div>\r\n            <div class=\"case-kpi\"><div class=\"case-kpi-num\">&lt;2min<\/div><div class=\"case-kpi-label\">\u7570\u5e38\u97ff\u61c9<\/div><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u270f\ufe0f \u6848\u4f8b 2 -->\r\n      <div class=\"case-card\" data-category=\"petro\" onclick=\"openCase(1)\">\r\n        <div class=\"case-card-photo\">\r\n          <i class=\"ti ti-photo\"><\/i> \u66ff\u63db\u70ba\u73fe\u5834\u7167\u7247\r\n        <\/div>\r\n        <div class=\"case-card-body\">\r\n          <div class=\"case-card-chips\">\r\n            <span class=\"chip chip-amber\">\u77f3\u5316\u5ee0<\/span>\r\n            <span class=\"chip chip-blue\">\u80fd\u8017\u76e3\u63a7<\/span>\r\n          <\/div>\r\n          <h3 class=\"case-card-title\">\u80fd\u8017\u76e3\u63a7\u512a\u5316\u7cfb\u7d71<\/h3>\r\n          <p class=\"case-card-desc\">\u70ba\u77f3\u5316\u5ee0\u5efa\u7f6e\u5373\u6642\u80fd\u8017\u76e3\u63a7\u5e73\u53f0\uff0c\u642d\u914d AI \u5206\u6790\u627e\u51fa\u8017\u80fd\u71b1\u9ede\uff0c\u9054\u6210\u986f\u8457\u7bc0\u80fd\u3002<\/p>\r\n          <div class=\"case-card-kpis\">\r\n            <div class=\"case-kpi\"><div class=\"case-kpi-num\">18%<\/div><div class=\"case-kpi-label\">\u7bc0\u80fd\u6210\u6548<\/div><\/div>\r\n            <div class=\"case-kpi\"><div class=\"case-kpi-num\">14\u6708<\/div><div class=\"case-kpi-label\">ROI \u56de\u6536<\/div><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u270f\ufe0f \u6848\u4f8b 3 \u2014 \u8907\u88fd\u6b64\u5340\u584a\u53ef\u65b0\u589e\u66f4\u591a -->\r\n      <div class=\"case-card\" data-category=\"food\" onclick=\"openCase(2)\">\r\n        <div class=\"case-card-photo\">\r\n          <i class=\"ti ti-photo\"><\/i> \u66ff\u63db\u70ba\u73fe\u5834\u7167\u7247\r\n        <\/div>\r\n        <div class=\"case-card-body\">\r\n          <div class=\"case-card-chips\">\r\n            <span class=\"chip chip-purple\">\u98df\u54c1\u5ee0<\/span>\r\n            <span class=\"chip chip-blue\">\u7cfb\u7d71\u6574\u5408<\/span>\r\n          <\/div>\r\n          <h3 class=\"case-card-title\">\u7522\u7dda\u81ea\u52d5\u5316\u63a7\u5236\u5347\u7d1a<\/h3>\r\n          <p class=\"case-card-desc\">\u5c07\u5206\u6563\u7684 5 \u689d\u7522\u7dda PLC \u7d71\u4e00\u6574\u5408\u81f3 SCADA \u5e73\u53f0\uff0c\u5be6\u73fe\u96c6\u4e2d\u6392\u7a0b\u8207\u54c1\u8cea\u8ffd\u6eaf\u3002<\/p>\r\n          <div class=\"case-card-kpis\">\r\n            <div class=\"case-kpi\"><div class=\"case-kpi-num\">35%<\/div><div class=\"case-kpi-label\">\u4eba\u5de5\u6210\u672c\u964d\u4f4e<\/div><\/div>\r\n            <div class=\"case-kpi\"><div class=\"case-kpi-num\">99.2%<\/div><div class=\"case-kpi-label\">\u7cfb\u7d71\u53ef\u7528\u7387<\/div><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u270f\ufe0f \u6848\u4f8b 4 -->\r\n      <div class=\"case-card\" data-category=\"power\" onclick=\"openCase(3)\">\r\n        <div class=\"case-card-photo\">\r\n          <i class=\"ti ti-photo\"><\/i> \u66ff\u63db\u70ba\u73fe\u5834\u7167\u7247\r\n        <\/div>\r\n        <div class=\"case-card-body\">\r\n          <div class=\"case-card-chips\">\r\n            <span class=\"chip chip-red\">\u96fb\u529b\u8a2d\u65bd<\/span>\r\n            <span class=\"chip chip-blue\">SCADA<\/span>\r\n          <\/div>\r\n          <h3 class=\"case-card-title\">ATS\u3001\u767c\u96fb\u6a5f\u76e3\u63a7\u7cfb\u7d71<\/h3>\r\n          <p class=\"case-card-desc\">\u63a7\u5236\u7cfb\u7d71\u5168\u9762\u5347\u7d1a\uff0c\u5f9e\u985e\u6bd4\u5100\u8868\u9077\u79fb\u81f3\u6578\u4f4d SCADA\uff0c\u63d0\u5347\u76e3\u63a7\u6548\u7387\u3002<\/p>\r\n          <div class=\"case-card-kpis\">\r\n            <div class=\"case-kpi\"><div class=\"case-kpi-num\">70%<\/div><div class=\"case-kpi-label\">\u5de1\u6aa2\u6642\u9593\u7e2e\u77ed<\/div><\/div>\r\n            <div class=\"case-kpi\"><div class=\"case-kpi-num\">0<\/div><div class=\"case-kpi-label\">\u8a08\u756b\u5916\u505c\u6a5f<\/div><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- Case Detail Modal -->\r\n<div class=\"case-detail-overlay\" id=\"caseOverlay\" onclick=\"if(event.target===this)closeCase()\">\r\n  <div class=\"case-detail\" id=\"caseDetail\">\r\n    <button class=\"case-detail-close\" onclick=\"closeCase()\"><i class=\"ti ti-x\"><\/i><\/button>\r\n    <div class=\"case-detail-header\" id=\"caseDetailHeader\"><\/div>\r\n    <div class=\"case-detail-body\" id=\"caseDetailBody\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     PROCESS\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"section process-section\" id=\"process\">\r\n  <div class=\"container\">\r\n    <div class=\"section-label\">Process<\/div>\r\n    <h2 class=\"section-title\">\u5408\u4f5c\u6d41\u7a0b<\/h2>\r\n    <p class=\"section-subtitle\">\u5f9e\u9996\u6b21\u806f\u7e6b\u5230\u6301\u7e8c\u512a\u5316\uff0c\u6bcf\u4e00\u6b65\u90fd\u6709\u6e05\u6670\u7684\u4ea4\u4ed8\u6a19\u6e96\u3002<\/p>\r\n    <div class=\"process-flow\">\r\n      <div class=\"process-step\">\r\n        <div class=\"process-step-num\">01<\/div>\r\n        <div class=\"process-step-title\">\u9700\u6c42\u8a55\u4f30<\/div>\r\n        <div class=\"process-step-desc\">\u514d\u8cbb\u521d\u6b65\u8aee\u8a62<br>\u73fe\u5834\u6216\u9060\u7aef\u8a2a\u8ac7<\/div>\r\n        <span class=\"process-arrow\"><i class=\"ti ti-chevron-right\"><\/i><\/span>\r\n      <\/div>\r\n      <div class=\"process-step\">\r\n        <div class=\"process-step-num\">02<\/div>\r\n        <div class=\"process-step-title\">\u67b6\u69cb\u898f\u5283<\/div>\r\n        <div class=\"process-step-desc\">\u7cfb\u7d71\u67b6\u69cb\u8a2d\u8a08<br>\u63d0\u6848\u5831\u50f9<\/div>\r\n        <span class=\"process-arrow\"><i class=\"ti ti-chevron-right\"><\/i><\/span>\r\n      <\/div>\r\n      <div class=\"process-step\">\r\n        <div class=\"process-step-num\">03<\/div>\r\n        <div class=\"process-step-title\">\u958b\u767c\u5be6\u4f5c<\/div>\r\n        <div class=\"process-step-desc\">\u7cfb\u7d71\u958b\u767c<br>FAT \u51fa\u5ee0\u6e2c\u8a66<\/div>\r\n        <span class=\"process-arrow\"><i class=\"ti ti-chevron-right\"><\/i><\/span>\r\n      <\/div>\r\n      <div class=\"process-step\">\r\n        <div class=\"process-step-num\">04<\/div>\r\n        <div class=\"process-step-title\">\u73fe\u5834\u4ea4\u4ed8<\/div>\r\n        <div class=\"process-step-desc\">Commission<br>SAT \u9a57\u6536<\/div>\r\n        <span class=\"process-arrow\"><i class=\"ti ti-chevron-right\"><\/i><\/span>\r\n      <\/div>\r\n      <div class=\"process-step\">\r\n        <div class=\"process-step-num\">05<\/div>\r\n        <div class=\"process-step-title\">\u7dad\u8b77\u512a\u5316<\/div>\r\n        <div class=\"process-step-desc\">\u6301\u7e8c\u76e3\u63a7<br>\u6548\u80fd\u512a\u5316<\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     CTA\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"cta-section\" id=\"cta\">\r\n  <div class=\"container\">\r\n    <div class=\"cta-box\">\r\n      <h2 class=\"cta-title\">\u6e96\u5099\u597d\u5347\u7d1a\u4f60\u7684\u5de5\u5ee0\u4e86\u55ce\uff1f<\/h2>\r\n      <p class=\"cta-desc\">\u514d\u8cbb\u63d0\u4f9b\u521d\u6b65\u7cfb\u7d71\u67b6\u69cb\u8a55\u4f30\uff0c\u8b93\u6211\u5011\u7528\u6578\u64da\u8aaa\u8a71\u3002<\/p>\r\n      <div style=\"display:flex;gap:14px;justify-content:center;flex-wrap:wrap\">\r\n        <button class=\"btn-primary\" style=\"font-size:16px;padding:16px 36px\">\r\n          <i class=\"ti ti-mail\"><\/i> \u806f\u7d61\u6211\u5011\r\n        <\/button>\r\n        <button class=\"btn-outline\" style=\"font-size:16px;padding:16px 36px\">\r\n          <i class=\"ti ti-phone\"><\/i> \u96fb\u8a71\u8aee\u8a62\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<footer class=\"footer\">\r\n  <div class=\"container\">\r\n    <!-- \u270f\ufe0f \u66ff\u63db\u516c\u53f8\u540d\u7a31 -->\r\n    &copy; 2026 YourBrand. All rights reserved.\r\n  <\/div>\r\n<\/footer>\r\n\r\n<script>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   \u6848\u4f8b\u8a73\u7d30\u8cc7\u6599 \u2014 \u65b0\u589e\u6848\u4f8b\u6642\u5728\u9019\u88e1\u52a0\u5165\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   \r\n   \ud83d\udccb \u65b0\u589e\u6848\u4f8b\u6b65\u9a5f\uff1a\r\n   1. \u5728 casesData \u9663\u5217\u6700\u5f8c\u52a0\u4e00\u7b46\u7269\u4ef6\uff08\u8907\u88fd\u7bc4\u672c\u683c\u5f0f\uff09\r\n   2. \u5728 HTML \u7684 case-grid \u88e1\u52a0\u4e00\u5f35 case-card\r\n   3. onclick=\"openCase(N)\" \u7684 N \u5c0d\u61c9\u9663\u5217 index\r\n   4. data-category \u8a2d\u70ba\u7522\u696d\u4ee3\u78bc\r\n   5. \u5982\u679c\u6709\u65b0\u7684\u7522\u696d\u985e\u5225\uff0c\u5728 case-filters \u4e5f\u52a0\u4e00\u500b\u6309\u9215\r\n*\/\r\n\r\nconst casesData = [\r\n  {\r\n    industry: '\u6c34\u8655\u7406\u5ee0',\r\n    chipClass: 'chip-teal',\r\n    tags: ['SCADA\u6574\u5408', '\u9060\u7aef\u76e3\u63a7'],\r\n    title: '\u8de8\u5ee0\u5340\u9060\u7aef\u96c6\u4e2d\u76e3\u63a7\u7cfb\u7d71\u5efa\u7f6e',\r\n    client: '\u53f0\u7063\u5357\u90e8\u67d0\u6c34\u8cc7\u6e90\u8655\u7406\u4e2d\u5fc3',\r\n    year: '2023',\r\n    challenge: '\u8a72\u6c34\u8cc7\u6e90\u8655\u7406\u4e2d\u5fc3\u8f44\u4e0b 3 \u5ea7\u5ee0\u5340\u5206\u6563\u65bc\u4e0d\u540c\u5340\u57df\uff0c\u904e\u53bb\u4ef0\u8cf4\u4eba\u5de5\u5de1\u6aa2\u8207\u96fb\u8a71\u56de\u5831\uff0c\u7570\u5e38\u4e8b\u4ef6\u5e73\u5747\u97ff\u61c9\u6642\u9593\u8d85\u904e 30 \u5206\u9418\u3002\u5404\u5ee0\u5340\u8a2d\u5099\u54c1\u724c\u4e0d\u4e00\uff0c\u6578\u64da\u7121\u6cd5\u5f59\u6574\uff0c\u7ba1\u7406\u5c64\u7f3a\u4e4f\u5373\u6642\u5168\u5c40\u8996\u91ce\u3002',\r\n    solution: '\u5efa\u7f6e\u7d71\u4e00 SCADA \u5e73\u53f0\uff0c\u900f\u904e OPC-UA \u4e32\u63a5\u6240\u6709\u5ee0\u5340\u7684 Siemens S7-1200 PLC\uff0c\u642d\u914d 4G \u5de5\u696d\u8def\u7531\u5668\u5be6\u73fe\u5b89\u5168\u9060\u7aef\u9023\u7dda\u3002\u958b\u767c\u5ba2\u88fd\u5316\u76e3\u63a7\u4ecb\u9762\u8207 Line Bot \u5373\u6642\u544a\u8b66\u63a8\u64ad\u3002',\r\n    techTags: ['Ignition SCADA', 'OPC-UA', '4G \u5de5\u696d\u8def\u7531\u5668', 'Siemens S7-1200', 'MQTT', 'Line Bot', 'VPN'],\r\n    kpis: [\r\n      { num: '60%', label: '\u6d3e\u5de5\u6b21\u6578\u6e1b\u5c11' },\r\n      { num: '<2min', label: '\u7570\u5e38\u97ff\u61c9\u6642\u9593' },\r\n      { num: '99.6%', label: '\u7cfb\u7d71\u53ef\u7528\u7387' },\r\n      { num: '14\u500b\u6708', label: 'ROI \u56de\u6536\u671f' }\r\n    ],\r\n    timeline: [\r\n      { title: '\u9700\u6c42\u8a2a\u8ac7', date: 'W1\u2013W2' },\r\n      { title: '\u67b6\u69cb\u8a2d\u8a08', date: 'W3\u2013W5' },\r\n      { title: '\u7cfb\u7d71\u958b\u767c', date: 'W6\u2013W12' },\r\n      { title: 'FAT \u6e2c\u8a66', date: 'W13' },\r\n      { title: '\u73fe\u5834 SAT', date: 'W14\u2013W15' },\r\n      { title: '\u9a57\u6536\u5b8c\u6210', date: 'W16' }\r\n    ],\r\n    photos: ['\u63a7\u5236\u76e4\u9762\u677f', 'HMI \u76e3\u63a7\u756b\u9762', 'SCADA \u7e3d\u89bd\u622a\u5716'],\r\n    quote: '\u904e\u53bb\u534a\u591c\u63a5\u5230\u96fb\u8a71\u5c31\u5f97\u958b\u8eca\u53bb\u5ee0\u5340\uff0c\u73fe\u5728\u624b\u6a5f\u6253\u958b\u5c31\u80fd\u638c\u63e1\u6240\u6709\u72c0\u614b\uff0c\u771f\u7684\u7701\u4e86\u5f88\u591a\u4e8b\u3002',\r\n    quoteAuthor: '\u2014 \u67d0\u6c34\u8cc7\u6e90\u516c\u53f8 \u5ee0\u9577'\r\n  },\r\n  {\r\n    industry: '\u77f3\u5316\u5ee0',\r\n    chipClass: 'chip-amber',\r\n    tags: ['\u80fd\u8017\u76e3\u63a7', 'SCADA'],\r\n    title: '\u80fd\u8017\u76e3\u63a7\u512a\u5316\u7cfb\u7d71',\r\n    client: '\u4e2d\u90e8\u67d0\u77f3\u5316\u5ee0',\r\n    year: '2024',\r\n    challenge: '\u6bcf\u6708\u96fb\u8cbb\u8d85\u904e\u6578\u767e\u842c\u5143\uff0c\u4f46\u7f3a\u4e4f\u5373\u6642\u80fd\u8017\u6578\u64da\uff0c\u7121\u6cd5\u8b58\u5225\u8017\u80fd\u71b1\u9ede\u3002\u8a2d\u5099\u8001\u5316\u5c0e\u81f4\u6548\u7387\u4e0b\u964d\uff0c\u4f46\u7121\u6578\u64da\u4f50\u8b49\u6c7a\u7b56\u3002\u78b3\u76e4\u67e5\u8981\u6c42\u65e5\u76ca\u56b4\u683c\uff0c\u6025\u9700\u53ef\u91cf\u5316\u7684\u80fd\u6e90\u7ba1\u7406\u65b9\u6848\u3002',\r\n    solution: '\u5728\u95dc\u9375\u8a2d\u5099\u5b89\u88dd\u667a\u6167\u96fb\u8868\u8207\u611f\u6e2c\u5668\uff0c\u900f\u904e Modbus TCP \u532f\u5165 SCADA \u5e73\u53f0\u3002\u5efa\u7f6e\u80fd\u8017\u5100\u8868\u677f\u8207\u6b77\u53f2\u8da8\u52e2\u5206\u6790\uff0c\u81ea\u52d5\u751f\u6210\u6708\u5831\u8868\uff0c\u4e26\u63d0\u4f9b\u7bc0\u80fd\u5efa\u8b70\u3002',\r\n    techTags: ['Ignition SCADA', 'Modbus TCP', '\u667a\u6167\u96fb\u8868', 'SQL Database', '\u5831\u8868\u81ea\u52d5\u5316', 'Grafana'],\r\n    kpis: [\r\n      { num: '18%', label: '\u7bc0\u80fd\u6210\u6548' },\r\n      { num: '14\u500b\u6708', label: 'ROI \u56de\u6536' },\r\n      { num: '100%', label: '\u5373\u6642\u53ef\u8996\u5316' },\r\n      { num: '\u81ea\u52d5', label: '\u6708\u5831\u751f\u6210' }\r\n    ],\r\n    timeline: [\r\n      { title: '\u73fe\u5834\u52d8\u67e5', date: 'W1\u2013W3' },\r\n      { title: '\u67b6\u69cb\u8a2d\u8a08', date: 'W4\u2013W6' },\r\n      { title: '\u8a2d\u5099\u5b89\u88dd', date: 'W7\u2013W10' },\r\n      { title: '\u7cfb\u7d71\u6574\u5408', date: 'W11\u2013W16' },\r\n      { title: '\u6e2c\u8a66\u8abf\u6821', date: 'W17\u2013W18' },\r\n      { title: '\u9a57\u6536\u4e0a\u7dda', date: 'W20' }\r\n    ],\r\n    photos: ['\u96fb\u8868\u5b89\u88dd', '\u80fd\u8017\u5100\u8868\u677f', '\u73fe\u5834\u8a2d\u5099'],\r\n    quote: '\u7d42\u65bc\u770b\u5230\u96fb\u7528\u5728\u54ea\u88e1\u4e86\u3002\u7b2c\u4e00\u500b\u6708\u5c31\u627e\u5230\u4e09\u500b\u53ef\u4ee5\u512a\u5316\u7684\u5730\u65b9\uff0c\u6295\u8cc7\u5f88\u5feb\u5c31\u56de\u672c\u3002',\r\n    quoteAuthor: '\u2014 \u67d0\u77f3\u5316\u5ee0 \u751f\u7522\u7d93\u7406'\r\n  },\r\n  {\r\n    industry: '\u98df\u54c1\u5ee0',\r\n    chipClass: 'chip-purple',\r\n    tags: ['\u7cfb\u7d71\u6574\u5408', 'PLC'],\r\n    title: '\u7522\u7dda\u81ea\u52d5\u5316\u63a7\u5236\u5347\u7d1a',\r\n    client: '\u5317\u90e8\u67d0\u98df\u54c1\u88fd\u9020\u516c\u53f8',\r\n    year: '2024',\r\n    challenge: '5 \u689d\u7522\u7dda\u4f7f\u7528\u4e0d\u540c\u5e74\u4ee3\u3001\u4e0d\u540c\u54c1\u724c\u7684 PLC\uff0c\u53c3\u6578\u8a2d\u5b9a\u5404\u81ea\u7368\u7acb\u3002\u6392\u7a0b\u4ef0\u8cf4\u4eba\u5de5 Excel\uff0c\u54c1\u8cea\u8ffd\u6eaf\u9700\u7ffb\u627e\u7d19\u672c\u8a18\u9304\u3002\u65b0\u9032\u4eba\u54e1\u5b78\u7fd2\u66f2\u7dda\u9577\u3002',\r\n    solution: '\u7d71\u4e00\u4e32\u63a5\u6240\u6709 PLC \u81f3 SCADA \u5e73\u53f0\uff0c\u5efa\u7f6e\u96c6\u4e2d\u6392\u7a0b\u4ecb\u9762\u8207\u751f\u7522\u5c65\u6b77\u8ffd\u6eaf\u7cfb\u7d71\u3002\u642d\u914d\u89f8\u63a7\u5f0f HMI \u7c21\u5316\u64cd\u4f5c\u6d41\u7a0b\uff0c\u964d\u4f4e\u4eba\u54e1\u57f9\u8a13\u9580\u6abb\u3002',\r\n    techTags: ['Mitsubishi PLC', 'Delta PLC', 'Weintek HMI', 'OPC-UA', 'SQL', 'SCADA'],\r\n    kpis: [\r\n      { num: '35%', label: '\u4eba\u5de5\u6210\u672c\u964d\u4f4e' },\r\n      { num: '99.2%', label: '\u7cfb\u7d71\u53ef\u7528\u7387' },\r\n      { num: '50%', label: '\u57f9\u8a13\u6642\u9593\u7e2e\u77ed' },\r\n      { num: '\u5373\u6642', label: '\u54c1\u8cea\u8ffd\u6eaf' }\r\n    ],\r\n    timeline: [\r\n      { title: '\u9700\u6c42\u78ba\u8a8d', date: 'W1\u2013W2' },\r\n      { title: 'PLC \u76e4\u9ede', date: 'W3\u2013W4' },\r\n      { title: '\u7a0b\u5f0f\u958b\u767c', date: 'W5\u2013W14' },\r\n      { title: '\u5206\u6bb5\u6e2c\u8a66', date: 'W15\u2013W17' },\r\n      { title: '\u5168\u7dda\u4e0a\u7dda', date: 'W18\u2013W19' },\r\n      { title: '\u9a57\u6536', date: 'W20' }\r\n    ],\r\n    photos: ['\u63a7\u5236\u76e4', '\u7522\u7dda\u5168\u666f', 'HMI \u64cd\u4f5c\u756b\u9762'],\r\n    quote: '\u4ee5\u524d\u63db\u7dda\u8981\u534a\u5c0f\u6642\u8abf\u53c3\u6578\uff0c\u73fe\u5728\u4e00\u9375\u5207\u63db\uff0c\u7522\u80fd\u76f4\u63a5\u63d0\u5347\u3002',\r\n    quoteAuthor: '\u2014 \u67d0\u98df\u54c1\u516c\u53f8 \u5ee0\u52d9\u4e3b\u7ba1'\r\n  },\r\n  {\r\n    industry: '\u96fb\u529b\u8a2d\u65bd',\r\n    chipClass: 'chip-red',\r\n    tags: ['SCADA', '\u7cfb\u7d71\u5347\u7d1a'],\r\n    title: '\u8b8a\u96fb\u7ad9\u76e3\u63a7\u7cfb\u7d71\u6539\u9020',\r\n    client: '\u67d0\u5340\u57df\u96fb\u529b\u516c\u53f8',\r\n    year: '2023',\r\n    challenge: '\u8b8a\u96fb\u7ad9\u4f7f\u7528\u8d85\u904e 15 \u5e74\u7684\u985e\u6bd4\u5100\u8868\u8207\u820a\u5f0f\u63a7\u5236\u7cfb\u7d71\uff0c\u7dad\u4fee\u96f6\u4ef6\u505c\u7522\uff0c\u6545\u969c\u6392\u67e5\u8017\u6642\u3002\u73fe\u5834\u7f3a\u4e4f\u6578\u64da\u8a18\u9304\uff0c\u7121\u6cd5\u9032\u884c\u9810\u9632\u6027\u7dad\u8b77\u3002',\r\n    solution: '\u5728\u4e0d\u505c\u96fb\u689d\u4ef6\u4e0b\u9010\u6b65\u66ff\u63db\u70ba\u6578\u4f4d\u5316 SCADA \u7cfb\u7d71\uff0c\u4fdd\u7559\u65e2\u6709\u8ff4\u8def\u8a2d\u8a08\uff0c\u65b0\u589e\u6578\u4f4d\u7d00\u9304\u8207\u9060\u7aef\u544a\u8b66\u529f\u80fd\u3002\u6574\u5408 IEC 61850 \u901a\u8a0a\u5354\u5b9a\u3002',\r\n    techTags: ['IEC 61850', 'SCADA', 'Schneider PLC', 'Fiber Optic', '\u5197\u9918\u67b6\u69cb', 'UPS'],\r\n    kpis: [\r\n      { num: '70%', label: '\u5de1\u6aa2\u6642\u9593\u7e2e\u77ed' },\r\n      { num: '0', label: '\u8a08\u756b\u5916\u505c\u6a5f' },\r\n      { num: '24\/7', label: '\u5373\u6642\u76e3\u63a7' },\r\n      { num: '\u5b8c\u6574', label: '\u4e8b\u4ef6\u8a18\u9304' }\r\n    ],\r\n    timeline: [\r\n      { title: '\u98a8\u96aa\u8a55\u4f30', date: 'W1\u2013W4' },\r\n      { title: '\u8a2d\u8a08\u5be9\u67e5', date: 'W5\u2013W8' },\r\n      { title: '\u8a2d\u5099\u63a1\u8cfc', date: 'W9\u2013W14' },\r\n      { title: '\u5206\u5340\u65bd\u5de5', date: 'W15\u2013W28' },\r\n      { title: '\u7cfb\u7d71\u8abf\u8a66', date: 'W29\u2013W32' },\r\n      { title: '\u9a57\u6536', date: 'W34' }\r\n    ],\r\n    photos: ['\u820a\u63a7\u5236\u76e4', '\u65b0 SCADA \u7cfb\u7d71', '\u65bd\u5de5\u73fe\u5834'],\r\n    quote: '\u6700\u64d4\u5fc3\u7684\u5c31\u662f\u6539\u9020\u671f\u9593\u505c\u96fb\u3002\u4ed6\u5011\u505a\u5230\u4e86\u4e0d\u505c\u96fb\u5207\u63db\uff0c\u975e\u5e38\u5c08\u696d\u3002',\r\n    quoteAuthor: '\u2014 \u67d0\u96fb\u529b\u516c\u53f8 \u5de5\u7a0b\u8655\u9577'\r\n  }\r\n];\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   Tab Switching\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction switchTab(idx) {\r\n  document.querySelectorAll('.solution-tab').forEach((t,i) => t.classList.toggle('active', i===idx));\r\n  document.querySelectorAll('.solution-panel').forEach((p,i) => p.classList.toggle('active', i===idx));\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   Case Filter\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction filterCases(cat) {\r\n  document.querySelectorAll('.case-filter').forEach(f => f.classList.remove('active'));\r\n  event.target.classList.add('active');\r\n  document.querySelectorAll('.case-card').forEach(c => {\r\n    if (cat === 'all' || c.dataset.category === cat) {\r\n      c.style.display = '';\r\n    } else {\r\n      c.style.display = 'none';\r\n    }\r\n  });\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   Case Detail Modal\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction openCase(idx) {\r\n  const c = casesData[idx];\r\n  if (!c) return;\r\n\r\n  document.getElementById('caseDetailHeader').innerHTML = `\r\n    <div style=\"display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px\">\r\n      <span class=\"chip ${c.chipClass}\">${c.industry}<\/span>\r\n      ${c.tags.map(t => `<span class=\"chip chip-blue\">${t}<\/span>`).join('')}\r\n    <\/div>\r\n    <h2 style=\"font-family:var(--font-heading);font-size:24px;font-weight:700;margin-bottom:6px\">${c.title}<\/h2>\r\n    <p style=\"font-size:14px;color:var(--brand-text-secondary)\">${c.client} \u00b7 ${c.year} \u5e74\u5b8c\u5de5<\/p>\r\n  `;\r\n\r\n  document.getElementById('caseDetailBody').innerHTML = `\r\n    <div class=\"case-detail-section\">\r\n      <div class=\"case-detail-section-title\"><i class=\"ti ti-alert-triangle\"><\/i> \u5ba2\u6236\u6311\u6230<\/div>\r\n      <p style=\"font-size:15px;color:var(--brand-text-secondary);line-height:1.8\">${c.challenge}<\/p>\r\n    <\/div>\r\n    <div class=\"case-detail-section\">\r\n      <div class=\"case-detail-section-title\"><i class=\"ti ti-bulb\"><\/i> \u89e3\u6c7a\u65b9\u6848<\/div>\r\n      <p style=\"font-size:15px;color:var(--brand-text-secondary);line-height:1.8;margin-bottom:16px\">${c.solution}<\/p>\r\n      <div class=\"case-detail-section-title\" style=\"margin-top:16px\"><i class=\"ti ti-code\"><\/i> \u4f7f\u7528\u6280\u8853<\/div>\r\n      <div class=\"tech-tags\">${c.techTags.map(t => `<span class=\"tech-tag\">${t}<\/span>`).join('')}<\/div>\r\n    <\/div>\r\n    <div class=\"case-detail-section\">\r\n      <div class=\"case-detail-section-title\"><i class=\"ti ti-chart-bar\"><\/i> \u91cf\u5316\u6210\u679c<\/div>\r\n      <div class=\"case-detail-kpis\">\r\n        ${c.kpis.map(k => `\r\n          <div class=\"case-detail-kpi\">\r\n            <div class=\"case-detail-kpi-num\">${k.num}<\/div>\r\n            <div class=\"case-detail-kpi-label\">${k.label}<\/div>\r\n          <\/div>\r\n        `).join('')}\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"case-detail-section\">\r\n      <div class=\"case-detail-section-title\"><i class=\"ti ti-calendar\"><\/i> \u5c08\u6848\u6642\u7a0b<\/div>\r\n      <div class=\"case-timeline\">\r\n        ${c.timeline.map((s,i) => `\r\n          <div class=\"tl-step\">\r\n            <div class=\"tl-dot\" ${i===c.timeline.length-1?'style=\"background:#047857;box-shadow:0 0 0 2px #047857\"':''}><\/div>\r\n            <div class=\"tl-step-title\">${s.title}<\/div>\r\n            <div class=\"tl-step-date\">${s.date}<\/div>\r\n          <\/div>\r\n        `).join('')}\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"case-detail-section\">\r\n      <div class=\"case-detail-section-title\"><i class=\"ti ti-camera\"><\/i> \u73fe\u5834\u7167\u7247<\/div>\r\n      <div class=\"case-detail-photos\">\r\n        ${c.photos.map(p => `<div class=\"case-detail-photo-ph\"><i class=\"ti ti-photo\"><\/i>${p}<\/div>`).join('')}\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"case-detail-section\" style=\"margin-bottom:0\">\r\n      <div class=\"case-detail-section-title\"><i class=\"ti ti-quote\"><\/i> \u5ba2\u6236\u56de\u994b<\/div>\r\n      <div class=\"case-detail-quote\">\r\n        ${c.quote}\r\n        <div class=\"case-detail-quote-author\">${c.quoteAuthor}<\/div>\r\n      <\/div>\r\n    <\/div>\r\n  `;\r\n\r\n  document.getElementById('caseOverlay').classList.add('open');\r\n  document.body.style.overflow = 'hidden';\r\n}\r\n\r\nfunction closeCase() {\r\n  document.getElementById('caseOverlay').classList.remove('open');\r\n  document.body.style.overflow = '';\r\n}\r\n\r\ndocument.addEventListener('keydown', e => { if(e.key==='Escape') closeCase(); });\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   Scroll Animations\r\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nconst observer = new IntersectionObserver((entries) => {\r\n  entries.forEach((entry, i) => {\r\n    if (entry.isIntersecting) {\r\n      setTimeout(() => entry.target.classList.add('visible'), i * 80);\r\n      observer.unobserve(entry.target);\r\n    }\r\n  });\r\n}, { threshold: 0.1 });\r\n\r\ndocument.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));\r\n\r\n\/* Navbar scroll effect *\/\r\nwindow.addEventListener('scroll', () => {\r\n  document.getElementById('navbar').classList.toggle('scrolled', window.scrollY > 50);\r\n});\r\n<\/script>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","WB4WB4WP_MODE":"","WB4WP_PAGE_SCRIPTS":"","WB4WP_PAGE_STYLES":"","WB4WP_PAGE_FONTS":"","WB4WP_PAGE_HEADER":"","WB4WP_PAGE_FOOTER":"","_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"nfd_onboarding_generated":"","footnotes":""},"class_list":["post-3450","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.5 - aioseo.com -->\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/hugohabor.com\/?page_id=3450\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.5\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Hugo Habor -\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Landing-Company - Hugo Habor\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/hugohabor.com\/?page_id=3450\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/hugohabor.com\/wp-content\/uploads\/2023\/04\/274991094_1520511498332602_3929754424052866637_n.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/hugohabor.com\/wp-content\/uploads\/2023\/04\/274991094_1520511498332602_3929754424052866637_n.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-06-26T03:33:05+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-06-26T06:03:50+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Landing-Company - Hugo Habor\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/hugohabor.com\/wp-content\/uploads\/2023\/04\/274991094_1520511498332602_3929754424052866637_n.jpg\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hugohabor.com\\\/?page_id=3450#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hugohabor.com\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/hugohabor.com\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hugohabor.com\\\/?page_id=3450#listItem\",\"name\":\"Landing-Company\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hugohabor.com\\\/?page_id=3450#listItem\",\"position\":2,\"name\":\"Landing-Company\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/hugohabor.com\\\/#listItem\",\"name\":\"Home\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/hugohabor.com\\\/#organization\",\"name\":\"Hugo Habor\",\"url\":\"https:\\\/\\\/hugohabor.com\\\/\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/hugohabor.com\\\/?page_id=3450#webpage\",\"url\":\"https:\\\/\\\/hugohabor.com\\\/?page_id=3450\",\"name\":\"Landing-Company - Hugo Habor\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hugohabor.com\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hugohabor.com\\\/?page_id=3450#breadcrumblist\"},\"datePublished\":\"2026-06-26T03:33:05+00:00\",\"dateModified\":\"2026-06-26T06:03:50+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/hugohabor.com\\\/#website\",\"url\":\"https:\\\/\\\/hugohabor.com\\\/\",\"name\":\"Hugo Habor\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/hugohabor.com\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Landing-Company - Hugo Habor","description":"","canonical_url":"https:\/\/hugohabor.com\/?page_id=3450","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/hugohabor.com\/?page_id=3450#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/hugohabor.com\/#listItem","position":1,"name":"Home","item":"https:\/\/hugohabor.com\/","nextItem":{"@type":"ListItem","@id":"https:\/\/hugohabor.com\/?page_id=3450#listItem","name":"Landing-Company"}},{"@type":"ListItem","@id":"https:\/\/hugohabor.com\/?page_id=3450#listItem","position":2,"name":"Landing-Company","previousItem":{"@type":"ListItem","@id":"https:\/\/hugohabor.com\/#listItem","name":"Home"}}]},{"@type":"Organization","@id":"https:\/\/hugohabor.com\/#organization","name":"Hugo Habor","url":"https:\/\/hugohabor.com\/"},{"@type":"WebPage","@id":"https:\/\/hugohabor.com\/?page_id=3450#webpage","url":"https:\/\/hugohabor.com\/?page_id=3450","name":"Landing-Company - Hugo Habor","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/hugohabor.com\/#website"},"breadcrumb":{"@id":"https:\/\/hugohabor.com\/?page_id=3450#breadcrumblist"},"datePublished":"2026-06-26T03:33:05+00:00","dateModified":"2026-06-26T06:03:50+00:00"},{"@type":"WebSite","@id":"https:\/\/hugohabor.com\/#website","url":"https:\/\/hugohabor.com\/","name":"Hugo Habor","inLanguage":"en-US","publisher":{"@id":"https:\/\/hugohabor.com\/#organization"}}]},"og:locale":"en_US","og:site_name":"Hugo Habor -","og:type":"article","og:title":"Landing-Company - Hugo Habor","og:url":"https:\/\/hugohabor.com\/?page_id=3450","og:image":"https:\/\/hugohabor.com\/wp-content\/uploads\/2023\/04\/274991094_1520511498332602_3929754424052866637_n.jpg","og:image:secure_url":"https:\/\/hugohabor.com\/wp-content\/uploads\/2023\/04\/274991094_1520511498332602_3929754424052866637_n.jpg","og:image:width":960,"og:image:height":960,"article:published_time":"2026-06-26T03:33:05+00:00","article:modified_time":"2026-06-26T06:03:50+00:00","twitter:card":"summary_large_image","twitter:title":"Landing-Company - Hugo Habor","twitter:image":"https:\/\/hugohabor.com\/wp-content\/uploads\/2023\/04\/274991094_1520511498332602_3929754424052866637_n.jpg"},"aioseo_meta_data":{"post_id":"3450","title":"#post_title #separator_sa #site_title","description":"#post_content","keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"WebPage","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-06-26 03:32:53","updated":"2026-06-26 07:03:03","seo_analyzer_scan_date":null,"focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/hugohabor.com\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tLanding-Company\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/hugohabor.com\/"},{"label":"Landing-Company","link":"https:\/\/hugohabor.com\/?page_id=3450"}],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Landing-Company - Hugo Habor<\/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:\/\/hugohabor.com\/?page_id=3450\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Landing-Company - Hugo Habor\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hugohabor.com\/?page_id=3450\" \/>\n<meta property=\"og:site_name\" content=\"Hugo Habor\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-26T06:03:50+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/hugohabor.com\\\/?page_id=3450\",\"url\":\"https:\\\/\\\/hugohabor.com\\\/?page_id=3450\",\"name\":\"Landing-Company - Hugo Habor\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/box2025.temp.domains\\\/~hugohabo\\\/#website\"},\"datePublished\":\"2026-06-26T03:33:05+00:00\",\"dateModified\":\"2026-06-26T06:03:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hugohabor.com\\\/?page_id=3450#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/hugohabor.com\\\/?page_id=3450\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hugohabor.com\\\/?page_id=3450#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/hugohabor.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Landing-Company\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/box2025.temp.domains\\\/~hugohabo\\\/#website\",\"url\":\"http:\\\/\\\/box2025.temp.domains\\\/~hugohabo\\\/\",\"name\":\"Hugo Habor\",\"description\":\"\",\"publisher\":{\"@id\":\"http:\\\/\\\/box2025.temp.domains\\\/~hugohabo\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/box2025.temp.domains\\\/~hugohabo\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\\\/\\\/box2025.temp.domains\\\/~hugohabo\\\/#organization\",\"name\":\"Hugo Habor\",\"url\":\"http:\\\/\\\/box2025.temp.domains\\\/~hugohabo\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\\\/\\\/box2025.temp.domains\\\/~hugohabo\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/hugohabor.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/274991094_1520511498332602_3929754424052866637_n.jpg?fit=960%2C960&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/hugohabor.com\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/274991094_1520511498332602_3929754424052866637_n.jpg?fit=960%2C960&ssl=1\",\"width\":960,\"height\":960,\"caption\":\"Hugo Habor\"},\"image\":{\"@id\":\"http:\\\/\\\/box2025.temp.domains\\\/~hugohabo\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Landing-Company - Hugo Habor","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:\/\/hugohabor.com\/?page_id=3450","og_locale":"en_US","og_type":"article","og_title":"Landing-Company - Hugo Habor","og_url":"https:\/\/hugohabor.com\/?page_id=3450","og_site_name":"Hugo Habor","article_modified_time":"2026-06-26T06:03:50+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hugohabor.com\/?page_id=3450","url":"https:\/\/hugohabor.com\/?page_id=3450","name":"Landing-Company - Hugo Habor","isPartOf":{"@id":"http:\/\/box2025.temp.domains\/~hugohabo\/#website"},"datePublished":"2026-06-26T03:33:05+00:00","dateModified":"2026-06-26T06:03:50+00:00","breadcrumb":{"@id":"https:\/\/hugohabor.com\/?page_id=3450#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hugohabor.com\/?page_id=3450"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/hugohabor.com\/?page_id=3450#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hugohabor.com\/"},{"@type":"ListItem","position":2,"name":"Landing-Company"}]},{"@type":"WebSite","@id":"http:\/\/box2025.temp.domains\/~hugohabo\/#website","url":"http:\/\/box2025.temp.domains\/~hugohabo\/","name":"Hugo Habor","description":"","publisher":{"@id":"http:\/\/box2025.temp.domains\/~hugohabo\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/box2025.temp.domains\/~hugohabo\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/box2025.temp.domains\/~hugohabo\/#organization","name":"Hugo Habor","url":"http:\/\/box2025.temp.domains\/~hugohabo\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/box2025.temp.domains\/~hugohabo\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/hugohabor.com\/wp-content\/uploads\/2023\/04\/274991094_1520511498332602_3929754424052866637_n.jpg?fit=960%2C960&ssl=1","contentUrl":"https:\/\/i0.wp.com\/hugohabor.com\/wp-content\/uploads\/2023\/04\/274991094_1520511498332602_3929754424052866637_n.jpg?fit=960%2C960&ssl=1","width":960,"height":960,"caption":"Hugo Habor"},"image":{"@id":"http:\/\/box2025.temp.domains\/~hugohabo\/#\/schema\/logo\/image\/"}}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hugohabor.com\/index.php?rest_route=\/wp\/v2\/pages\/3450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hugohabor.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hugohabor.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hugohabor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hugohabor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3450"}],"version-history":[{"count":4,"href":"https:\/\/hugohabor.com\/index.php?rest_route=\/wp\/v2\/pages\/3450\/revisions"}],"predecessor-version":[{"id":3460,"href":"https:\/\/hugohabor.com\/index.php?rest_route=\/wp\/v2\/pages\/3450\/revisions\/3460"}],"wp:attachment":[{"href":"https:\/\/hugohabor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}