{"id":3482,"date":"2026-07-24T07:25:46","date_gmt":"2026-07-24T07:25:46","guid":{"rendered":"https:\/\/uisb.com\/?page_id=3482"},"modified":"2026-09-24T00:34:56","modified_gmt":"2026-09-24T00:34:56","slug":"company-history","status":"publish","type":"page","link":"https:\/\/uisb.com\/zh\/company-history\/","title":{"rendered":"Company History aff"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3482\" class=\"elementor elementor-3482\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-089ce86 e-con-full e-flex jltma-glass-effect-no e-con e-parent\" data-id=\"089ce86\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a4698ca jltma-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"a4698ca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Google Fonts -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" crossorigin>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow:wght@300;400;500;600;700;800;900&family=Barlow+Condensed:wght@600;700;800;900&family=DM+Mono:wght@400&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\r\n@media (max-width: 900px) {\r\n  html { overflow-x: hidden; }\r\n}\r\n\r\n#uisb-history {\r\n  --uw: #ffffff;\r\n  --up: #f7fbff;\r\n  --up2: #eef7ff;\r\n  --uice: #dff2ff;\r\n  --uice2: #c6e9ff;\r\n  --ubs: #58b7f5;\r\n  --ub: #1487d4;\r\n  --ubd: #075f9d;\r\n  --un: #061a33;\r\n  --un2: #0b2b52;\r\n  --un3: #103d73;\r\n  --uink: #10233d;\r\n  --utxt: #344b66;\r\n  --umut: #6c8198;\r\n  --uline: rgba(10,70,125,0.13);\r\n  --uline2: rgba(20,135,212,0.28);\r\n  --uglass: rgba(255,255,255,0.74);\r\n  --ushsm: 0 10px 28px rgba(7,37,74,0.08);\r\n  --ush: 0 22px 70px rgba(7,37,74,0.13);\r\n  --ushhi: 0 34px 100px rgba(7,37,74,0.2);\r\n  --urad: 24px;\r\n  font-family: 'Barlow', sans-serif;\r\n  color: var(--utxt);\r\n  overflow-x: hidden;\r\n  box-sizing: border-box;\r\n}\r\n\r\n#uisb-history *,\r\n#uisb-history *::before,\r\n#uisb-history *::after {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n#uisb-history a { color: inherit; }\r\n#uisb-history img { max-width: 100%; display: block; }\r\n\r\n\/* ---------- SCROLL PROGRESS ---------- *\/\r\n#uisb-history .uisb-scroll-progress {\r\n  position: fixed;\r\n  top: 0; left: 0; right: 0;\r\n  height: 3px;\r\n  width: 0;\r\n  background: linear-gradient(90deg, var(--ub), var(--ubs), #58b7f5);\r\n  z-index: 9999;\r\n  box-shadow: 0 0 22px rgba(20,135,212,0.45);\r\n  transition: width 0.05s linear;\r\n  pointer-events: none;\r\n}\r\n\r\n\/* ---------- BUTTONS ---------- *\/\r\n#uisb-history .uisb-btn-primary,\r\n#uisb-history .uisb-btn-ghost {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 999px;\r\n  padding: 13px 26px;\r\n  text-decoration: none;\r\n  font-family: 'Barlow Condensed', sans-serif;\r\n  font-size: 15px;\r\n  font-weight: 800;\r\n  letter-spacing: 1.8px;\r\n  text-transform: uppercase;\r\n  transition: 0.28s ease;\r\n}\r\n#uisb-history .uisb-btn-primary {\r\n  color: #fff !important;\r\n  background: linear-gradient(135deg, var(--ub), var(--un3));\r\n  border: 1px solid rgba(255,255,255,0.2);\r\n  box-shadow: 0 16px 34px rgba(20,135,212,0.22);\r\n}\r\n#uisb-history .uisb-btn-primary:hover {\r\n  transform: translateY(-3px);\r\n  box-shadow: 0 24px 54px rgba(20,135,212,0.32);\r\n  filter: brightness(1.04);\r\n}\r\n#uisb-history .uisb-btn-ghost {\r\n  color: rgba(255,255,255,0.9) !important;\r\n  background: rgba(255,255,255,0.10);\r\n  border: 1px solid rgba(88,183,245,0.4);\r\n}\r\n#uisb-history .uisb-btn-ghost:hover {\r\n  transform: translateY(-3px);\r\n  background: rgba(255,255,255,0.16);\r\n  border-color: var(--ubs);\r\n}\r\n\r\n\/* ---------- SECTION LABEL ---------- *\/\r\n#uisb-history .uisb-section-label {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 7px 18px;\r\n  border-radius: 999px;\r\n  background: rgba(20,135,212,0.13);\r\n  border: 1px solid rgba(88,183,245,0.36);\r\n  color: #58b7f5;\r\n  font-family: 'DM Mono', 'Courier New', monospace;\r\n  font-size: 11px;\r\n  font-weight: 500;\r\n  letter-spacing: 1.5px;\r\n  text-transform: uppercase;\r\n  margin-bottom: 22px;\r\n  box-shadow: 0 2px 12px rgba(20,135,212,0.07);\r\n}\r\n#uisb-history .uisb-section-label::before {\r\n  content: \"\";\r\n  width: 6px; height: 6px;\r\n  border-radius: 50%;\r\n  background: #58b7f5;\r\n  flex-shrink: 0;\r\n  animation: uisbEcoDot 2s ease-in-out infinite;\r\n}\r\n@keyframes uisbEcoDot {\r\n  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(20,135,212,0.5); }\r\n  50%       { opacity: 0.5; transform: scale(0.65); box-shadow: 0 0 0 5px rgba(20,135,212,0); }\r\n}\r\n\r\n\/* ============================================================\r\n   HERO \u2014 HERITAGE & LEGACY\r\n   ============================================================ *\/\r\n#uisb-history .uhist-hero {\r\n  min-height: 100vh;\r\n  display: grid;\r\n  grid-template-rows: 1fr auto;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n\/* Three.js canvas \u2014 full-bleed background *\/\r\n#uisb-history .uhist-threejs-canvas {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%; height: 100%;\r\n  display: block;\r\n  z-index: 0;\r\n}\r\n\r\n\/* Vignette \u2014 darkens edges so text reads cleanly *\/\r\n#uisb-history .uhist-vignette {\r\n  position: absolute; inset: 0; z-index: 2; pointer-events: none;\r\n  background:\r\n    radial-gradient(90% 80% at 50% 42%, transparent 50%, rgba(4,6,9,.82) 100%),\r\n    linear-gradient(180deg, rgba(4,6,9,.38) 0%, transparent 18%, transparent 75%, rgba(4,6,9,.55) 100%);\r\n}\r\n\r\n\/* Content-side gradient \u2014 left panel readability *\/\r\n#uisb-history .uhist-content-veil {\r\n  position: absolute; inset: 0; z-index: 2; pointer-events: none;\r\n  background: linear-gradient(95deg,\r\n    rgba(11,14,19,0.90) 0%,\r\n    rgba(11,14,19,0.70) 30%,\r\n    rgba(11,14,19,0.20) 58%,\r\n    transparent 76%);\r\n}\r\n\r\n\/* Film grain \u2014 animated *\/\r\n#uisb-history .uhist-grain {\r\n  position: absolute; inset: -60px; z-index: 2; pointer-events: none;\r\n  opacity: .048;\r\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'\/%3E%3C\/filter%3E%3Crect width='300' height='300' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n  animation: uhGrainShift 1.4s steps(3) infinite;\r\n}\r\n@keyframes uhGrainShift {\r\n  0%   { transform: translate(0,0); }\r\n  33%  { transform: translate(-22px,14px); }\r\n  66%  { transform: translate(16px,-20px); }\r\n  100% { transform: translate(0,0); }\r\n}\r\n\r\n\/* Loader \u2014 thin gold line while Three.js boots *\/\r\n#uisb-history .uhist-3d-loader {\r\n  position: absolute; inset: 0; z-index: 6;\r\n  display: flex; align-items: center; justify-content: center;\r\n  background: #0b0e13;\r\n  transition: opacity .9s ease .15s, visibility .9s ease .15s;\r\n}\r\n#uisb-history .uhist-3d-loader.done { opacity: 0; visibility: hidden; }\r\n#uisb-history .uhist-loader-bar {\r\n  width: 120px; height: 1px; overflow: hidden;\r\n  background: rgba(216,180,122,.15);\r\n}\r\n#uisb-history .uhist-loader-bar::after {\r\n  content: \"\"; display: block; width: 40%; height: 100%;\r\n  background: #d8b47a;\r\n  animation: uhLoadBar 1.1s ease-in-out infinite;\r\n}\r\n@keyframes uhLoadBar {\r\n  0%   { transform: translateX(-100%); }\r\n  100% { transform: translateX(320%); }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  #uisb-history .uhist-grain { animation: none; }\r\n  #uisb-history .uhist-loader-bar::after { animation: none; width: 100%; }\r\n}\r\n@media (max-width: 768px) {\r\n  #uisb-history .uhist-grain { animation: none; opacity: 0; }\r\n  #uisb-history .uhist-hero { background: radial-gradient(ellipse 120% 80% at 70% 30%, #103d73 0%, #0b2b52 40%, #0b0e13 100%); }\r\n  #uisb-history .uhist-threejs-canvas { display: none; }\r\n  #uisb-history .uhist-3d-loader { display: none; }\r\n  #uisb-history .utl-beam-1,\r\n  #uisb-history .utl-beam-2,\r\n  #uisb-history .utl-beam-3 { animation: none; opacity: 0; }\r\n  #uisb-history .utl-orb { animation: none; }\r\n  #uisb-history .utl-ghost-year { display: none; }\r\n}\r\n\r\n\/* Inner grid: accent | content *\/\r\n#uisb-history .uhist-hero-inner {\r\n  position: relative;\r\n  z-index: 3;\r\n  display: grid;\r\n  grid-template-columns: 56px 1fr;\r\n  gap: 0 clamp(24px,3vw,48px);\r\n  align-items: center;\r\n  min-height: calc(100vh - 108px);\r\n  padding: 120px clamp(24px,5vw,72px) 64px;\r\n}\r\n\r\n\/* Vertical accent *\/\r\n#uisb-history .uhist-hero-accent {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 14px;\r\n  height: 280px;\r\n  align-self: center;\r\n}\r\n#uisb-history .uhist-hero-accent-line {\r\n  width: 1px;\r\n  flex: 1;\r\n  background: linear-gradient(to bottom,\r\n    transparent 0%,\r\n    rgba(88,183,245,0.55) 30%,\r\n    rgba(88,183,245,0.55) 70%,\r\n    transparent 100%);\r\n}\r\n#uisb-history .uhist-hero-accent-label {\r\n  writing-mode: vertical-rl;\r\n  text-orientation: mixed;\r\n  transform: rotate(180deg);\r\n  font-family: 'DM Mono', 'Courier New', monospace;\r\n  font-size: 10px;\r\n  letter-spacing: 3.5px;\r\n  color: rgba(88,183,245,0.5);\r\n  text-transform: uppercase;\r\n  white-space: nowrap;\r\n}\r\n\r\n\/* Hero text *\/\r\n#uisb-history .uhist-hero-content {\r\n  position: relative;\r\n  z-index: 3;\r\n}\r\n\r\n\/* Eyebrow pill \u2014 blue variant *\/\r\n#uisb-history .uhist-eyebrow {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 7px 18px;\r\n  border-radius: 999px;\r\n  background: rgba(20,135,212,0.13);\r\n  border: 1px solid rgba(88,183,245,0.36);\r\n  color: #58b7f5;\r\n  font-family: 'DM Mono', 'Courier New', monospace;\r\n  font-size: 11px;\r\n  font-weight: 500;\r\n  letter-spacing: 1.5px;\r\n  text-transform: uppercase;\r\n  margin-bottom: 28px;\r\n  box-shadow: 0 2px 12px rgba(20,135,212,0.07);\r\n}\r\n#uisb-history .uhist-eyebrow::before {\r\n  content: \"\";\r\n  width: 6px; height: 6px;\r\n  border-radius: 50%;\r\n  background: #58b7f5;\r\n  flex-shrink: 0;\r\n  animation: uhBlueDot 2s ease-in-out infinite;\r\n}\r\n@keyframes uhBlueDot {\r\n  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(20,135,212,0.5); }\r\n  50%       { opacity: 0.5; transform: scale(0.65); box-shadow: 0 0 0 5px rgba(20,135,212,0); }\r\n}\r\n\r\n#uisb-history .uhist-title {\r\n  font-family: 'Barlow Condensed', sans-serif;\r\n  font-size: clamp(62px,9vw,140px);\r\n  font-weight: 900;\r\n  line-height: 0.86;\r\n  letter-spacing: -2px;\r\n  text-transform: uppercase;\r\n  color: #fff;\r\n  margin-bottom: 32px;\r\n}\r\n#uisb-history .uhist-title em {\r\n  display: block;\r\n  font-style: normal;\r\n  color: transparent;\r\n  -webkit-text-stroke: 2px rgba(88,183,245,0.6);\r\n}\r\n\r\n\r\n#uisb-history .uhist-sub {\r\n  font-size: 16px;\r\n  line-height: 1.82;\r\n  color: rgba(255,255,255,0.44);\r\n  max-width: 560px;\r\n  margin-bottom: 38px;\r\n}\r\n\r\n#uisb-history .uhist-hero-buttons {\r\n  display: flex;\r\n  gap: 14px;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n\/* Blue primary CTA *\/\r\n#uisb-history .uhist-btn-amber {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 999px;\r\n  padding: 13px 28px;\r\n  text-decoration: none;\r\n  font-family: 'Barlow Condensed', sans-serif;\r\n  font-size: 15px;\r\n  font-weight: 800;\r\n  letter-spacing: 1.8px;\r\n  text-transform: uppercase;\r\n  color: #fff !important;\r\n  background: linear-gradient(135deg, var(--ub), var(--un3));\r\n  border: 1px solid rgba(255,255,255,0.2);\r\n  box-shadow: 0 16px 38px rgba(20,135,212,0.28);\r\n  transition: 0.28s ease;\r\n}\r\n#uisb-history .uhist-btn-amber:hover {\r\n  transform: translateY(-3px);\r\n  box-shadow: 0 26px 56px rgba(20,135,212,0.4);\r\n  filter: brightness(1.06);\r\n}\r\n\r\n\/* Ghost btn *\/\r\n#uisb-history .uhist-btn-ghost {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 999px;\r\n  padding: 13px 26px;\r\n  text-decoration: none;\r\n  font-family: 'Barlow Condensed', sans-serif;\r\n  font-size: 15px;\r\n  font-weight: 800;\r\n  letter-spacing: 1.8px;\r\n  text-transform: uppercase;\r\n  color: rgba(255,255,255,0.82) !important;\r\n  background: rgba(255,255,255,0.06);\r\n  border: 1px solid rgba(88,183,245,0.36);\r\n  transition: 0.28s ease;\r\n}\r\n#uisb-history .uhist-btn-ghost:hover {\r\n  transform: translateY(-3px);\r\n  background: rgba(255,255,255,0.11);\r\n  border-color: rgba(88,183,245,0.65);\r\n}\r\n\r\n\/* Stat strip \u2014 white *\/\r\n#uisb-history .uhist-stat-strip {\r\n  position: relative;\r\n  z-index: 3;\r\n  display: grid;\r\n  grid-template-columns: repeat(3,1fr);\r\n  background: #ffffff;\r\n  border-top: 1px solid rgba(147,197,253,0.28);\r\n  box-shadow: 0 -1px 0 rgba(0,0,0,0.06);\r\n}\r\n#uisb-history .uhist-stat-strip > div {\r\n  padding: 30px 18px;\r\n  text-align: center;\r\n  border-right: 1px solid rgba(147,197,253,0.22);\r\n  position: relative;\r\n}\r\n#uisb-history .uhist-stat-strip > div::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0 0 auto 0;\r\n  height: 2px;\r\n  background: linear-gradient(90deg, #1e40af, #3b82f6);\r\n  transform: scaleX(0);\r\n  transform-origin: left;\r\n  transition: transform 0.5s ease;\r\n}\r\n#uisb-history .uhist-stat-strip > div:hover::after { transform: scaleX(1); }\r\n#uisb-history .uhist-stat-strip > div:last-child { border-right: 0; }\r\n#uisb-history .uhist-stat-num {\r\n  font-family: 'Barlow Condensed', sans-serif;\r\n  font-size: 46px;\r\n  line-height: 1;\r\n  font-weight: 900;\r\n  color: #071a3d;\r\n}\r\n#uisb-history .uhist-stat-num span { color: #3b82f6; }\r\n#uisb-history .uhist-stat-label {\r\n  margin-top: 8px;\r\n  font-size: 11px;\r\n  font-weight: 800;\r\n  letter-spacing: 2px;\r\n  text-transform: uppercase;\r\n  color: #64748b;\r\n}\r\n\r\n\/* Hero reveal *\/\r\n#uisb-history .uhist-hero-reveal {\r\n  animation: uhHeroEnter 0.9s cubic-bezier(0.22,1,0.36,1) 0.2s both;\r\n}\r\n@keyframes uhHeroEnter {\r\n  from { opacity: 0; transform: translateY(36px) scale(0.97); }\r\n  to   { opacity: 1; transform: translateY(0) scale(1); }\r\n}\r\n\r\n\/* ============================================================\r\n   TIMELINE \u2014 CINEMATIC FULL-SCREEN (copied from About Us)\r\n   ============================================================ *\/\r\n#uisb-history .uisb-timeline-section {\r\n  background:\r\n    radial-gradient(ellipse 100% 40% at 50% -2%,  rgba(20,135,212,0.38), transparent 60%),\r\n    radial-gradient(ellipse 60%  70% at -5% 45%,  rgba(7,95,157,0.42),   transparent 58%),\r\n    radial-gradient(ellipse 55%  55% at 108% 70%, rgba(16,61,115,0.38),  transparent 55%),\r\n    radial-gradient(ellipse 75%  65% at 52%  52%, rgba(6,26,51,0.55),    transparent 68%),\r\n    radial-gradient(ellipse 90%  30% at 50% 102%, rgba(88,183,245,0.18), transparent 55%),\r\n    linear-gradient(178deg, #01060e 0%, #030c19 18%, #051528 42%, #061a33 62%, #030a16 85%, #010509 100%);\r\n  padding: 120px 0 140px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n#uisb-history .uisb-timeline-section::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  background-image: radial-gradient(rgba(88,183,245,0.16) 1px, transparent 1px);\r\n  background-size: 36px 36px;\r\n  mask-image: radial-gradient(ellipse 88% 78% at 50% 50%, black 15%, transparent 80%);\r\n  -webkit-mask-image: radial-gradient(ellipse 88% 78% at 50% 50%, black 15%, transparent 80%);\r\n  pointer-events: none;\r\n  z-index: 0;\r\n}\r\n#uisb-history .uisb-timeline-section::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  background: radial-gradient(ellipse 95% 90% at 50% 50%, transparent 45%, rgba(1,5,12,0.72) 100%);\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n\r\n\/* Canvas *\/\r\n#uisb-history .utl-canvas {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%; height: 100%;\r\n  pointer-events: none;\r\n  z-index: 0;\r\n  opacity: 0.55;\r\n}\r\n\r\n\/* Beams *\/\r\n#uisb-history .utl-beam {\r\n  position: absolute;\r\n  width: 280px;\r\n  top: -30%; bottom: -30%;\r\n  pointer-events: none;\r\n  filter: blur(48px);\r\n  z-index: 0;\r\n  border-radius: 50%;\r\n}\r\n#uisb-history .utl-beam-1 {\r\n  left: 14%;\r\n  background: linear-gradient(to bottom, transparent 0%, rgba(20,135,212,0.14) 25%, rgba(88,183,245,0.10) 50%, rgba(20,135,212,0.14) 75%, transparent 100%);\r\n  animation: utlBeamPulse1 7s ease-in-out infinite;\r\n}\r\n#uisb-history .utl-beam-2 {\r\n  left: 48%; width: 360px;\r\n  background: linear-gradient(to bottom, transparent 0%, rgba(7,95,157,0.18) 20%, rgba(20,135,212,0.12) 50%, rgba(7,95,157,0.18) 80%, transparent 100%);\r\n  animation: utlBeamPulse2 10s ease-in-out infinite 3s;\r\n}\r\n#uisb-history .utl-beam-3 {\r\n  right: 10%;\r\n  background: linear-gradient(to bottom, transparent 0%, rgba(88,183,245,0.11) 30%, rgba(20,135,212,0.09) 55%, rgba(88,183,245,0.11) 78%, transparent 100%);\r\n  animation: utlBeamPulse3 9s ease-in-out infinite 6s;\r\n}\r\n@keyframes utlBeamPulse1 {\r\n  0%, 100% { opacity: 0.4; transform: rotate(10deg)  scaleX(0.85); }\r\n  50%       { opacity: 1;   transform: rotate(10deg)  scaleX(1.15); }\r\n}\r\n@keyframes utlBeamPulse2 {\r\n  0%, 100% { opacity: 0.4; transform: rotate(-6deg)  scaleX(0.85); }\r\n  50%       { opacity: 1;   transform: rotate(-6deg)  scaleX(1.15); }\r\n}\r\n@keyframes utlBeamPulse3 {\r\n  0%, 100% { opacity: 0.4; transform: rotate(14deg)  scaleX(0.85); }\r\n  50%       { opacity: 1;   transform: rotate(14deg)  scaleX(1.15); }\r\n}\r\n\r\n\/* Orbs *\/\r\n#uisb-history .utl-orb {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  pointer-events: none;\r\n  z-index: 0;\r\n}\r\n#uisb-history .utl-orb-1 {\r\n  width: 900px; height: 900px;\r\n  left: -300px; top: 0%;\r\n  background: radial-gradient(circle, rgba(20,135,212,0.36) 0%, rgba(20,135,212,0.1) 50%, transparent 70%);\r\n  filter: blur(72px);\r\n  animation: utlOrbDrift 16s ease-in-out infinite;\r\n}\r\n#uisb-history .utl-orb-2 {\r\n  width: 700px; height: 700px;\r\n  right: -200px; bottom: 8%;\r\n  background: radial-gradient(circle, rgba(88,183,245,0.28) 0%, rgba(20,135,212,0.12) 50%, transparent 70%);\r\n  filter: blur(80px);\r\n  animation: utlOrbDrift 11s ease-in-out infinite reverse;\r\n  animation-delay: 2s;\r\n}\r\n#uisb-history .utl-orb-3 {\r\n  width: 500px; height: 500px;\r\n  left: 38%; top: 38%;\r\n  background: radial-gradient(circle, rgba(16,61,115,0.5) 0%, rgba(16,61,115,0.18) 55%, transparent 70%);\r\n  filter: blur(60px);\r\n  animation: utlOrbDrift 20s ease-in-out infinite;\r\n  animation-delay: 6s;\r\n}\r\n#uisb-history .utl-orb-4 {\r\n  width: 420px; height: 420px;\r\n  left: 60%; top: 10%;\r\n  background: radial-gradient(circle, rgba(7,95,157,0.32) 0%, rgba(7,95,157,0.1) 55%, transparent 70%);\r\n  filter: blur(65px);\r\n  animation: utlOrbDrift 13s ease-in-out infinite reverse;\r\n  animation-delay: 4s;\r\n}\r\n#uisb-history .utl-orb-5 {\r\n  width: 350px; height: 350px;\r\n  left: 22%; bottom: 8%;\r\n  background: radial-gradient(circle, rgba(88,183,245,0.22) 0%, rgba(88,183,245,0.06) 55%, transparent 70%);\r\n  filter: blur(55px);\r\n  animation: utlOrbDrift 15s ease-in-out infinite;\r\n  animation-delay: 8s;\r\n}\r\n@keyframes utlOrbDrift {\r\n  0%,  100% { transform: translate(0,0) scale(1); }\r\n  30%        { transform: translate(20px,-28px) scale(1.06); }\r\n  65%        { transform: translate(-15px,18px) scale(0.96); }\r\n}\r\n\r\n\/* Timeline header *\/\r\n#uisb-history .utl-header {\r\n  text-align: center;\r\n  padding: 0 clamp(20px,5vw,72px);\r\n  margin-bottom: 90px;\r\n  position: relative;\r\n  z-index: 2;\r\n  opacity: 0;\r\n  transform: translateY(30px);\r\n  transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1), transform 0.85s cubic-bezier(0.22,1,0.36,1);\r\n}\r\n#uisb-history .utl-header.utl-in {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n#uisb-history .utl-title {\r\n  font-family: 'Barlow Condensed', sans-serif;\r\n  font-size: clamp(46px,7.5vw,102px);\r\n  font-weight: 900;\r\n  line-height: 0.9;\r\n  letter-spacing: -2px;\r\n  text-transform: uppercase;\r\n  color: #fff;\r\n  margin-bottom: 22px;\r\n}\r\n#uisb-history .utl-title em {\r\n  font-style: normal;\r\n  color: transparent;\r\n  -webkit-text-stroke: 2px rgba(88,183,245,0.75);\r\n  display: block;\r\n}\r\n#uisb-history .utl-sub {\r\n  font-size: 16px;\r\n  color: rgba(255,255,255,0.42);\r\n  line-height: 1.8;\r\n  max-width: 460px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* Track *\/\r\n#uisb-history .utl-track {\r\n  position: relative;\r\n  max-width: 1160px;\r\n  margin: 0 auto;\r\n  padding: 0 clamp(20px,5vw,72px);\r\n  z-index: 2;\r\n}\r\n\r\n\/* Spine *\/\r\n#uisb-history .utl-spine {\r\n  position: absolute;\r\n  left: 50%;\r\n  top: 0; bottom: 0;\r\n  width: 2px;\r\n  transform: translateX(-50%);\r\n  background: rgba(20,135,212,0.12);\r\n  z-index: 1;\r\n}\r\n#uisb-history .utl-spine::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 0; bottom: 0;\r\n  left: -4px; right: -4px;\r\n  background: rgba(20,135,212,0.06);\r\n  filter: blur(6px);\r\n}\r\n#uisb-history .utl-spine-fill {\r\n  position: absolute;\r\n  top: 0; left: 0; right: 0;\r\n  height: 0;\r\n  background: linear-gradient(to bottom, #1487d4, #58b7f5, rgba(20,135,212,0.45));\r\n  box-shadow: 0 0 24px rgba(20,135,212,0.65);\r\n  transition: height 0.55s cubic-bezier(0.22,1,0.36,1);\r\n  z-index: 2;\r\n}\r\n\r\n\/* Item *\/\r\n#uisb-history .utl-item {\r\n  display: grid;\r\n  grid-template-columns: 1fr 100px 1fr;\r\n  align-items: center;\r\n  gap: 0;\r\n  margin-bottom: 68px;\r\n  position: relative;\r\n  z-index: 2;\r\n}\r\n#uisb-history .utl-item:last-child { margin-bottom: 0; }\r\n\r\n\/* Node *\/\r\n#uisb-history .utl-node {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100px;\r\n  height: 100px;\r\n  flex-shrink: 0;\r\n  z-index: 4;\r\n}\r\n#uisb-history .utl-node-dot {\r\n  width: 16px; height: 16px;\r\n  border-radius: 50%;\r\n  background: linear-gradient(135deg, #58b7f5, #1487d4);\r\n  border: 2.5px solid rgba(255,255,255,0.22);\r\n  transform: scale(0);\r\n  transition: transform 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.18s;\r\n  position: relative;\r\n  z-index: 5;\r\n}\r\n#uisb-history .utl-item.utl-in .utl-node-dot {\r\n  transform: scale(1);\r\n  animation: utlNodeGlow 2.8s ease-out infinite 0.75s;\r\n}\r\n@keyframes utlNodeGlow {\r\n  0%   { box-shadow: 0 0 0 0 rgba(20,135,212,0.55); }\r\n  60%  { box-shadow: 0 0 0 20px rgba(20,135,212,0); }\r\n  100% { box-shadow: 0 0 0 0 rgba(20,135,212,0); }\r\n}\r\n#uisb-history .utl-node-ring-1,\r\n#uisb-history .utl-node-ring-2 {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  border: 1px solid rgba(20,135,212,0.28);\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n#uisb-history .utl-node-ring-1 { inset: 16px; }\r\n#uisb-history .utl-node-ring-2 { inset: 4px; }\r\n#uisb-history .utl-item.utl-in .utl-node-ring-1 { animation: utlRingPulse 3.2s ease-out infinite 0.9s; }\r\n#uisb-history .utl-item.utl-in .utl-node-ring-2 { animation: utlRingPulse 3.2s ease-out infinite 1.5s; }\r\n@keyframes utlRingPulse {\r\n  0%   { transform: scale(0.55); opacity: 0.75; }\r\n  100% { transform: scale(1.7); opacity: 0; }\r\n}\r\n\r\n\/* Ghost year *\/\r\n#uisb-history .utl-ghost-year {\r\n  font-family: 'Barlow Condensed', sans-serif;\r\n  font-size: clamp(78px,10vw,150px);\r\n  font-weight: 900;\r\n  line-height: 1;\r\n  color: transparent;\r\n  -webkit-text-stroke: 1px rgba(20,135,212,0.15);\r\n  pointer-events: none;\r\n  display: flex;\r\n  align-items: center;\r\n  user-select: none;\r\n  letter-spacing: -4px;\r\n  opacity: 0;\r\n  transform: scale(0.84) translateY(8px);\r\n  transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1) 0.22s,\r\n              transform 0.85s cubic-bezier(0.22,1,0.36,1) 0.22s;\r\n}\r\n#uisb-history .utl-item.utl-in .utl-ghost-year { opacity: 1; transform: scale(1) translateY(0); }\r\n\r\n\/* Card *\/\r\n#uisb-history .utl-card {\r\n  background: rgba(255,255,255,0.038);\r\n  border: 1px solid rgba(20,135,212,0.18);\r\n  border-radius: 22px;\r\n  padding: 30px 28px 28px;\r\n  position: relative;\r\n  overflow: hidden;\r\n  backdrop-filter: blur(20px);\r\n  -webkit-backdrop-filter: blur(20px);\r\n  cursor: default;\r\n  transition:\r\n    border-color 0.38s ease,\r\n    box-shadow 0.38s ease,\r\n    background 0.38s ease,\r\n    transform 0.38s cubic-bezier(0.22,1,0.36,1);\r\n}\r\n#uisb-history .utl-card::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0 0 auto 0;\r\n  height: 1px;\r\n  background: linear-gradient(90deg, transparent, rgba(88,183,245,0.55), transparent);\r\n  opacity: 0;\r\n  transition: opacity 0.4s ease;\r\n}\r\n#uisb-history .utl-card::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  background: linear-gradient(110deg, transparent 28%, rgba(88,183,245,0.07) 50%, transparent 72%);\r\n  transform: translateX(-200%);\r\n  transition: transform 0.95s cubic-bezier(0.16,1,0.3,1);\r\n  pointer-events: none;\r\n}\r\n#uisb-history .utl-card:hover {\r\n  border-color: rgba(20,135,212,0.44);\r\n  box-shadow: 0 0 52px rgba(20,135,212,0.14), inset 0 0 36px rgba(20,135,212,0.05);\r\n  background: rgba(255,255,255,0.06);\r\n  transform: translateY(-5px);\r\n}\r\n#uisb-history .utl-card:hover::before { opacity: 1; }\r\n#uisb-history .utl-card:hover::after  { transform: translateX(200%); }\r\n\r\n\/* Left \/ Right ordering *\/\r\n#uisb-history .utl-item[data-side=\"left\"] .utl-card      { order: 1; text-align: right; }\r\n#uisb-history .utl-item[data-side=\"left\"] .utl-node       { order: 2; }\r\n#uisb-history .utl-item[data-side=\"left\"] .utl-ghost-year { order: 3; justify-content: flex-start; }\r\n#uisb-history .utl-item[data-side=\"left\"] .utl-era-tag    { margin-left: auto; }\r\n\r\n#uisb-history .utl-item[data-side=\"right\"] .utl-ghost-year { order: 1; justify-content: flex-end; }\r\n#uisb-history .utl-item[data-side=\"right\"] .utl-node        { order: 2; }\r\n#uisb-history .utl-item[data-side=\"right\"] .utl-card        { order: 3; }\r\n\r\n\/* Slide animations *\/\r\n#uisb-history .utl-item[data-side=\"left\"] .utl-card {\r\n  opacity: 0;\r\n  transform: translateX(-52px);\r\n  transition:\r\n    opacity 0.72s cubic-bezier(0.22,1,0.36,1),\r\n    transform 0.72s cubic-bezier(0.22,1,0.36,1),\r\n    border-color 0.38s ease,\r\n    box-shadow 0.38s ease,\r\n    background 0.38s ease;\r\n}\r\n#uisb-history .utl-item.utl-in[data-side=\"left\"] .utl-card { opacity: 1; transform: translateX(0); }\r\n#uisb-history .utl-item.utl-in[data-side=\"left\"] .utl-card:hover { transform: translateY(-5px); }\r\n\r\n#uisb-history .utl-item[data-side=\"right\"] .utl-card {\r\n  opacity: 0;\r\n  transform: translateX(52px);\r\n  transition:\r\n    opacity 0.72s cubic-bezier(0.22,1,0.36,1),\r\n    transform 0.72s cubic-bezier(0.22,1,0.36,1),\r\n    border-color 0.38s ease,\r\n    box-shadow 0.38s ease,\r\n    background 0.38s ease;\r\n}\r\n#uisb-history .utl-item.utl-in[data-side=\"right\"] .utl-card { opacity: 1; transform: translateX(0); }\r\n#uisb-history .utl-item.utl-in[data-side=\"right\"] .utl-card:hover { transform: translateY(-5px); }\r\n\r\n\/* Card internals *\/\r\n#uisb-history .utl-era-tag {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  background: rgba(20,135,212,0.14);\r\n  border: 1px solid rgba(20,135,212,0.3);\r\n  border-radius: 999px;\r\n  padding: 4px 12px;\r\n  font-family: 'DM Mono', 'Courier New', monospace;\r\n  font-size: 10px;\r\n  color: #58b7f5;\r\n  letter-spacing: 1.5px;\r\n  text-transform: uppercase;\r\n  margin-bottom: 12px;\r\n  opacity: 0;\r\n  transform: translateY(10px);\r\n  transition: opacity 0.5s ease 0.32s, transform 0.5s ease 0.32s;\r\n}\r\n#uisb-history .utl-era-tag::before {\r\n  content: \"\";\r\n  width: 5px; height: 5px;\r\n  border-radius: 50%;\r\n  background: #58b7f5;\r\n  flex-shrink: 0;\r\n  animation: uisbEcoDot 2s ease-in-out infinite;\r\n}\r\n#uisb-history .utl-item.utl-in .utl-era-tag { opacity: 1; transform: translateY(0); }\r\n\r\n#uisb-history .utl-year-num {\r\n  font-family: 'Barlow Condensed', sans-serif;\r\n  font-size: 52px;\r\n  font-weight: 900;\r\n  color: #fff;\r\n  line-height: 1;\r\n  letter-spacing: -2px;\r\n  margin-bottom: 6px;\r\n  opacity: 0;\r\n  transform: translateY(12px);\r\n  transition: opacity 0.55s ease 0.42s, transform 0.55s ease 0.42s;\r\n}\r\n#uisb-history .utl-item.utl-in .utl-year-num { opacity: 1; transform: translateY(0); }\r\n\r\n#uisb-history .utl-milestone-title {\r\n  font-family: 'Barlow Condensed', sans-serif;\r\n  font-size: 18px;\r\n  font-weight: 800;\r\n  text-transform: uppercase;\r\n  color: rgba(88,183,245,0.85);\r\n  letter-spacing: 1.2px;\r\n  margin-bottom: 10px;\r\n  opacity: 0;\r\n  transform: translateY(10px);\r\n  transition: opacity 0.55s ease 0.5s, transform 0.55s ease 0.5s;\r\n}\r\n#uisb-history .utl-item.utl-in .utl-milestone-title { opacity: 1; transform: translateY(0); }\r\n\r\n#uisb-history .utl-card-desc {\r\n  font-size: 14px;\r\n  color: rgba(255,255,255,0.46);\r\n  line-height: 1.78;\r\n  opacity: 0;\r\n  transform: translateY(8px);\r\n  transition: opacity 0.55s ease 0.58s, transform 0.55s ease 0.58s;\r\n}\r\n#uisb-history .utl-item.utl-in .utl-card-desc { opacity: 1; transform: translateY(0); }\r\n\r\n\/* End cap *\/\r\n#uisb-history .utl-end-cap {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 12px;\r\n  padding-top: 52px;\r\n  position: relative;\r\n  z-index: 3;\r\n  opacity: 0;\r\n  transform: translateY(20px);\r\n  transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;\r\n}\r\n#uisb-history .utl-end-cap.utl-in { opacity: 1; transform: translateY(0); }\r\n#uisb-history .utl-end-dot {\r\n  width: 26px; height: 26px;\r\n  border-radius: 50%;\r\n  background: linear-gradient(135deg, #58b7f5, #1487d4);\r\n  box-shadow: 0 0 36px rgba(20,135,212,0.75);\r\n  animation: utlNodeGlow 2s ease-out infinite;\r\n}\r\n#uisb-history .utl-end-label {\r\n  font-family: 'DM Mono', 'Courier New', monospace;\r\n  font-size: 10px;\r\n  color: rgba(255,255,255,0.3);\r\n  letter-spacing: 2.5px;\r\n  text-transform: uppercase;\r\n}\r\n\r\n\/* ============================================================\r\n   CTA STRIP\r\n   ============================================================ *\/\r\n#uisb-history .uhist-cta {\r\n  padding: 80px clamp(20px,5vw,72px) 112px;\r\n  background: #ffffff;\r\n  background-position: center center;\r\n}\r\n#uisb-history .uhist-cta-inner {\r\n  background: linear-gradient(135deg, #061a33, #103d73 55%, #1487d4);\r\n  border: 1px solid rgba(255,255,255,0.2);\r\n  border-radius: 32px;\r\n  padding: clamp(42px,6vw,82px);\r\n  display: grid;\r\n  grid-template-columns: minmax(0,1fr) auto;\r\n  gap: 36px;\r\n  align-items: center;\r\n  position: relative;\r\n  overflow: hidden;\r\n  box-shadow: 0 34px 100px rgba(7,37,74,0.4);\r\n}\r\n#uisb-history .uhist-cta-inner::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  right: -160px; top: -180px;\r\n  width: 480px; height: 480px;\r\n  border-radius: 50%;\r\n  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 62%);\r\n  pointer-events: none;\r\n}\r\n#uisb-history .uhist-cta-bg {\r\n  position: absolute;\r\n  right: 8%; top: -20px;\r\n  font-family: 'Barlow Condensed', sans-serif;\r\n  font-size: 22vw;\r\n  font-weight: 900;\r\n  color: rgba(255,255,255,0.06);\r\n  line-height: 1;\r\n  pointer-events: none;\r\n}\r\n#uisb-history .uhist-cta-title {\r\n  font-family: 'Barlow Condensed', sans-serif;\r\n  font-size: clamp(34px,4vw,56px);\r\n  line-height: 0.96;\r\n  font-weight: 900;\r\n  color: #fff;\r\n  text-transform: uppercase;\r\n  margin-bottom: 14px;\r\n}\r\n#uisb-history .uhist-cta-sub {\r\n  color: rgba(255,255,255,0.72);\r\n  line-height: 1.7;\r\n}\r\n#uisb-history .uhist-cta-btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 999px;\r\n  background: #fff;\r\n  color: #061a33 !important;\r\n  text-decoration: none;\r\n  font-family: 'Barlow Condensed', sans-serif;\r\n  font-weight: 900;\r\n  letter-spacing: 1.8px;\r\n  text-transform: uppercase;\r\n  padding: 15px 30px;\r\n  box-shadow: 0 18px 44px rgba(0,0,0,0.18);\r\n  transition: 0.3s;\r\n  white-space: nowrap;\r\n}\r\n#uisb-history .uhist-cta-btn:hover {\r\n  transform: translateY(-4px);\r\n  box-shadow: 0 28px 64px rgba(0,0,0,0.25);\r\n}\r\n\r\n\/* ============================================================\r\n   REVEAL UTILITY\r\n   ============================================================ *\/\r\n#uisb-history .uisb-reveal {\r\n  opacity: 0;\r\n  transform: translateY(32px) scale(0.97);\r\n  transition:\r\n    opacity 0.7s cubic-bezier(0.22,1,0.36,1),\r\n    transform 0.7s cubic-bezier(0.22,1,0.36,1);\r\n  will-change: opacity, transform;\r\n}\r\n#uisb-history .uisb-reveal.uisb-visible {\r\n  opacity: 1;\r\n  transform: translateY(0) scale(1);\r\n}\r\n\r\n\/* ============================================================\r\n   RESPONSIVE\r\n   ============================================================ *\/\r\n@media (max-width: 820px) {\r\n  #uisb-history .uisb-timeline-section { padding: 80px 0 100px; }\r\n  #uisb-history .utl-header { margin-bottom: 56px; }\r\n  #uisb-history .utl-title { letter-spacing: -1px; }\r\n  #uisb-history .utl-spine { left: 28px; transform: none; }\r\n  #uisb-history .utl-item {\r\n    grid-template-columns: 56px 1fr;\r\n    gap: 0 14px;\r\n    margin-bottom: 40px;\r\n    align-items: start;\r\n  }\r\n  #uisb-history .utl-node { width: 56px; height: 56px; }\r\n  #uisb-history .utl-ghost-year { display: none !important; }\r\n  #uisb-history .utl-item[data-side=\"left\"] .utl-card,\r\n  #uisb-history .utl-item[data-side=\"right\"] .utl-card { order: 2; text-align: left; transform: translateY(22px); }\r\n  #uisb-history .utl-item[data-side=\"left\"] .utl-node,\r\n  #uisb-history .utl-item[data-side=\"right\"] .utl-node  { order: 1; }\r\n  #uisb-history .utl-item[data-side=\"left\"] .utl-era-tag { margin-left: 0; }\r\n  #uisb-history .utl-item.utl-in[data-side=\"left\"] .utl-card,\r\n  #uisb-history .utl-item.utl-in[data-side=\"right\"] .utl-card { opacity: 1; transform: translateY(0); }\r\n  #uisb-history .utl-item.utl-in[data-side=\"left\"] .utl-card:hover,\r\n  #uisb-history .utl-item.utl-in[data-side=\"right\"] .utl-card:hover { transform: translateY(-4px); }\r\n  #uisb-history .utl-track { padding: 0 20px; }\r\n  #uisb-history .utl-end-cap { padding-left: 28px; align-items: flex-start; padding-top: 36px; }\r\n\r\n  #uisb-history .uhist-hero-inner {\r\n    grid-template-columns: 1fr;\r\n    padding: 100px 20px 52px;\r\n    min-height: calc(100vh - 88px);\r\n  }\r\n  #uisb-history .uhist-hero-accent { display: none; }\r\n  #uisb-history .uhist-hero-ghost { font-size: clamp(100px,32vw,220px); right: -4%; bottom: 12%; }\r\n  #uisb-history .uhist-title { font-size: clamp(48px,12vw,96px); }\r\n  #uisb-history .uhist-3d-timeline { max-width: 100%; padding: 24px 0 16px; }\r\n  #uisb-history .uhist-3d-num { font-size: clamp(13px,4.5vw,22px); }\r\n  #uisb-history .uhist-stat-strip { grid-template-columns: 1fr; }\r\n  #uisb-history .uhist-stat-strip > div { padding: 18px; }\r\n  #uisb-history .uhist-cta { padding: 0 20px 76px; }\r\n  #uisb-history .uhist-cta-inner { grid-template-columns: 1fr; }\r\n}\r\n<\/style>\r\n\r\n<div id=\"uisb-history\">\r\n\r\n  <div class=\"uisb-scroll-progress\" id=\"uhScrollProgress\"><\/div>\r\n\r\n  <!-- ============================================================\r\n   HERO\r\n   ============================================================ -->\r\n  <section class=\"uhist-hero\" id=\"uh-top\">\r\n\r\n    <!-- Three.js 3D background -->\r\n    <canvas class=\"uhist-threejs-canvas\" id=\"uhist3dCanvas\" aria-hidden=\"true\"><\/canvas>\r\n\r\n    <!-- Cinematic grade layers -->\r\n    <div class=\"uhist-vignette\"      aria-hidden=\"true\"><\/div>\r\n    <div class=\"uhist-content-veil\"  aria-hidden=\"true\"><\/div>\r\n    <div class=\"uhist-grain\"         aria-hidden=\"true\"><\/div>\r\n\r\n    <!-- Gold loader bar while Three.js boots -->\r\n    <div class=\"uhist-3d-loader\" id=\"uhist3dLoader\"><div class=\"uhist-loader-bar\"><\/div><\/div>\r\n\r\n    <!-- Inner grid: accent | content -->\r\n    <div class=\"uhist-hero-inner\">\r\n\r\n      <!-- Vertical accent bar -->\r\n      <div class=\"uhist-hero-accent\" aria-hidden=\"true\">\r\n        <div class=\"uhist-hero-accent-line\"><\/div>\r\n        <div class=\"uhist-hero-accent-label\">Heritage<\/div>\r\n        <div class=\"uhist-hero-accent-line\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Hero copy -->\r\n      <div class=\"uhist-hero-content uhist-hero-reveal\">\r\n\r\n        <div class=\"uhist-eyebrow\">Our History<\/div>\r\n\r\n        <h1 class=\"uhist-title\">\r\n          FIVE DECADES OF<br><em>ENGINEERING.<\/em>\r\n        <\/h1>\r\n\r\n        <p class=\"uhist-sub\">\r\n          From a family workshop established in 1968 to Malaysia's trusted automotive OEM partner \u2014\r\n          a legacy built on precision, partnership, and relentless innovation.\r\n        <\/p>\r\n\r\n        <div class=\"uhist-hero-buttons\">\r\n          <a href=\"#uh-timeline\" class=\"uhist-btn-amber\">Explore Milestones<\/a>\r\n          <a href=\"\/uig\/elementor-page-2833\/\" class=\"uhist-btn-ghost\">Our Management<\/a>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Warm amber stat strip -->\r\n    <div class=\"uhist-stat-strip\">\r\n      <div>\r\n        <div class=\"uhist-stat-num\">50<span>+<\/span><\/div>\r\n        <div class=\"uhist-stat-label\">Years of History<\/div>\r\n      <\/div>\r\n      <div>\r\n        <div class=\"uhist-stat-num\">10<\/div>\r\n        <div class=\"uhist-stat-label\">Key Milestones<\/div>\r\n      <\/div>\r\n      <div>\r\n        <div class=\"uhist-stat-num\">8<\/div>\r\n        <div class=\"uhist-stat-label\">Global Tech Partners<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n  <!-- ============================================================\r\n   COMPANY HISTORY TIMELINE \u2014 CINEMATIC\r\n   ============================================================ -->\r\n  <section class=\"uisb-timeline-section\" id=\"uh-timeline\">\r\n\r\n    <canvas class=\"utl-canvas\" id=\"utlCanvas\" aria-hidden=\"true\"><\/canvas>\r\n\r\n    <div class=\"utl-beam utl-beam-1\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"utl-beam utl-beam-2\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"utl-beam utl-beam-3\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"utl-orb utl-orb-1\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"utl-orb utl-orb-2\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"utl-orb utl-orb-3\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"utl-orb utl-orb-4\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"utl-orb utl-orb-5\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"utl-header\" id=\"utlHeader\">\r\n      <div class=\"uisb-section-label\">Company History<\/div>\r\n      <h2 class=\"utl-title\">\r\n        From Foundation<br>to <em>Industry Leader.<\/em>\r\n      <\/h2>\r\n      <p class=\"utl-sub\">Five decades of engineering milestones that shaped Malaysian automotive manufacturing.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"utl-track\">\r\n\r\n      <div class=\"utl-spine\">\r\n        <div class=\"utl-spine-fill\" id=\"utlSpineFill\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- 1973 -->\r\n      <div class=\"utl-item\" data-side=\"left\">\r\n        <div class=\"utl-card\">\r\n          <div class=\"utl-era-tag\">Origins<\/div>\r\n          <div class=\"utl-year-num\">1973<\/div>\r\n          <div class=\"utl-milestone-title\">Foundation<\/div>\r\n          <p class=\"utl-card-desc\">UISB incorporated, taking over Syarikat United Industries \u2014 a family business first established in 1968 that laid the groundwork for precision manufacturing in Malaysia.<\/p>\r\n        <\/div>\r\n        <div class=\"utl-node\">\r\n          <div class=\"utl-node-ring-1\"><\/div>\r\n          <div class=\"utl-node-ring-2\"><\/div>\r\n          <div class=\"utl-node-dot\"><\/div>\r\n        <\/div>\r\n        <div class=\"utl-ghost-year\">1973<\/div>\r\n      <\/div>\r\n\r\n      <!-- 1976 -->\r\n      <div class=\"utl-item\" data-side=\"right\">\r\n        <div class=\"utl-ghost-year\">1976<\/div>\r\n        <div class=\"utl-node\">\r\n          <div class=\"utl-node-ring-1\"><\/div>\r\n          <div class=\"utl-node-ring-2\"><\/div>\r\n          <div class=\"utl-node-dot\"><\/div>\r\n        <\/div>\r\n        <div class=\"utl-card\">\r\n          <div class=\"utl-era-tag\">Growth<\/div>\r\n          <div class=\"utl-year-num\">1976<\/div>\r\n          <div class=\"utl-milestone-title\">New Home<\/div>\r\n          <p class=\"utl-card-desc\">Relocated to our current facility and made a decisive move into the OEM automotive market \u2014 a strategic pivot that defined the company's future direction.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 1980 -->\r\n      <div class=\"utl-item\" data-side=\"left\">\r\n        <div class=\"utl-card\">\r\n          <div class=\"utl-era-tag\">Growth<\/div>\r\n          <div class=\"utl-year-num\">1980<\/div>\r\n          <div class=\"utl-milestone-title\">Diversification<\/div>\r\n          <p class=\"utl-card-desc\">Expanded beyond automotive into consumer goods manufacturing, launching wheel barrow production under the DANCO brand \u2014 broadening our engineering capability.<\/p>\r\n        <\/div>\r\n        <div class=\"utl-node\">\r\n          <div class=\"utl-node-ring-1\"><\/div>\r\n          <div class=\"utl-node-ring-2\"><\/div>\r\n          <div class=\"utl-node-dot\"><\/div>\r\n        <\/div>\r\n        <div class=\"utl-ghost-year\">1980<\/div>\r\n      <\/div>\r\n\r\n      <!-- 1984 -->\r\n      <div class=\"utl-item\" data-side=\"right\">\r\n        <div class=\"utl-ghost-year\">1984<\/div>\r\n        <div class=\"utl-node\">\r\n          <div class=\"utl-node-ring-1\"><\/div>\r\n          <div class=\"utl-node-ring-2\"><\/div>\r\n          <div class=\"utl-node-dot\"><\/div>\r\n        <\/div>\r\n        <div class=\"utl-card\">\r\n          <div class=\"utl-era-tag\">Partnerships<\/div>\r\n          <div class=\"utl-year-num\">1984<\/div>\r\n          <div class=\"utl-milestone-title\">First Global JV<\/div>\r\n          <p class=\"utl-card-desc\">Joint venture with Sanoh Industrial Co. for precision tubing systems, alongside a technical agreement with J. Eberspacher Germany \u2014 our first global technology partnerships.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 1986 -->\r\n      <div class=\"utl-item\" data-side=\"left\">\r\n        <div class=\"utl-card\">\r\n          <div class=\"utl-era-tag\">Partnerships<\/div>\r\n          <div class=\"utl-year-num\">1986<\/div>\r\n          <div class=\"utl-milestone-title\">Fuel Systems<\/div>\r\n          <p class=\"utl-card-desc\">Technical agreement with Crefact Corporation Japan for metal fuel tank manufacturing \u2014 establishing UISB as a trusted fuel system supplier to the automotive industry.<\/p>\r\n        <\/div>\r\n        <div class=\"utl-node\">\r\n          <div class=\"utl-node-ring-1\"><\/div>\r\n          <div class=\"utl-node-ring-2\"><\/div>\r\n          <div class=\"utl-node-dot\"><\/div>\r\n        <\/div>\r\n        <div class=\"utl-ghost-year\">1986<\/div>\r\n      <\/div>\r\n\r\n      <!-- 1997 -->\r\n      <div class=\"utl-item\" data-side=\"right\">\r\n        <div class=\"utl-ghost-year\">1997<\/div>\r\n        <div class=\"utl-node\">\r\n          <div class=\"utl-node-ring-1\"><\/div>\r\n          <div class=\"utl-node-ring-2\"><\/div>\r\n          <div class=\"utl-node-dot\"><\/div>\r\n        <\/div>\r\n        <div class=\"utl-card\">\r\n          <div class=\"utl-era-tag\">Premium Tier<\/div>\r\n          <div class=\"utl-year-num\">1997<\/div>\r\n          <div class=\"utl-milestone-title\">BMW Ready<\/div>\r\n          <p class=\"utl-card-desc\">Technical agreement with J. Eberspacher for BMW exhaust system supply \u2014 marking our entry into premium European automotive OEM manufacturing requirements.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 2001 -->\r\n      <div class=\"utl-item\" data-side=\"left\">\r\n        <div class=\"utl-card\">\r\n          <div class=\"utl-era-tag\">Innovation<\/div>\r\n          <div class=\"utl-year-num\">2001<\/div>\r\n          <div class=\"utl-milestone-title\">Plastic Future<\/div>\r\n          <p class=\"utl-card-desc\">Technical agreement with KAUTEX Textron Germany for plastic fuel tank production \u2014 embracing next-generation lightweight materials in automotive fuel system engineering.<\/p>\r\n        <\/div>\r\n        <div class=\"utl-node\">\r\n          <div class=\"utl-node-ring-1\"><\/div>\r\n          <div class=\"utl-node-ring-2\"><\/div>\r\n          <div class=\"utl-node-dot\"><\/div>\r\n        <\/div>\r\n        <div class=\"utl-ghost-year\">2001<\/div>\r\n      <\/div>\r\n\r\n      <!-- 2003 -->\r\n      <div class=\"utl-item\" data-side=\"right\">\r\n        <div class=\"utl-ghost-year\">2003<\/div>\r\n        <div class=\"utl-node\">\r\n          <div class=\"utl-node-ring-1\"><\/div>\r\n          <div class=\"utl-node-ring-2\"><\/div>\r\n          <div class=\"utl-node-dot\"><\/div>\r\n        <\/div>\r\n        <div class=\"utl-card\">\r\n          <div class=\"utl-era-tag\">Quality<\/div>\r\n          <div class=\"utl-year-num\">2003<\/div>\r\n          <div class=\"utl-milestone-title\">ISO Certified<\/div>\r\n          <p class=\"utl-card-desc\">Achieved ISO 9001 certification \u2014 a landmark quality milestone affirming our commitment to consistent process standards and customer satisfaction across all operations.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 2010 -->\r\n      <div class=\"utl-item\" data-side=\"left\">\r\n        <div class=\"utl-card\">\r\n          <div class=\"utl-era-tag\">Quality<\/div>\r\n          <div class=\"utl-year-num\">2010<\/div>\r\n          <div class=\"utl-milestone-title\">Triple Certified<\/div>\r\n          <p class=\"utl-card-desc\">Simultaneously achieved ISO\/TS 16949:2009, EMS 14001:2004 and OHSAS 18001:2007 \u2014 covering automotive quality, environmental management, and occupational health in one milestone year.<\/p>\r\n        <\/div>\r\n        <div class=\"utl-node\">\r\n          <div class=\"utl-node-ring-1\"><\/div>\r\n          <div class=\"utl-node-ring-2\"><\/div>\r\n          <div class=\"utl-node-dot\"><\/div>\r\n        <\/div>\r\n        <div class=\"utl-ghost-year\">2010<\/div>\r\n      <\/div>\r\n\r\n      <!-- 2018 -->\r\n      <div class=\"utl-item\" data-side=\"right\">\r\n        <div class=\"utl-ghost-year\">2018<\/div>\r\n        <div class=\"utl-node\">\r\n          <div class=\"utl-node-ring-1\"><\/div>\r\n          <div class=\"utl-node-ring-2\"><\/div>\r\n          <div class=\"utl-node-dot\"><\/div>\r\n        <\/div>\r\n        <div class=\"utl-card\">\r\n          <div class=\"utl-era-tag\">Quality<\/div>\r\n          <div class=\"utl-year-num\">2018<\/div>\r\n          <div class=\"utl-milestone-title\">Next Generation<\/div>\r\n          <p class=\"utl-card-desc\">Upgraded to ISO 9001:2015, IATF 16949:2016, EMS 14001:2015 and OHSAS 18001 \u2014 aligning with the latest international automotive manufacturing standards.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 2020 -->\r\n      <div class=\"utl-item\" data-side=\"left\">\r\n        <div class=\"utl-card\">\r\n          <div class=\"utl-era-tag\">Innovation<\/div>\r\n          <div class=\"utl-year-num\">2020<\/div>\r\n          <div class=\"utl-milestone-title\">Continued Innovation<\/div>\r\n          <p class=\"utl-card-desc\">Technical agreement concluded with BESTEX Kyoei Co. Japan for Pipe Fuel Filler systems \u2014 continuing our tradition of sourcing global technology partnerships to advance product capability.<\/p>\r\n        <\/div>\r\n        <div class=\"utl-node\">\r\n          <div class=\"utl-node-ring-1\"><\/div>\r\n          <div class=\"utl-node-ring-2\"><\/div>\r\n          <div class=\"utl-node-dot\"><\/div>\r\n        <\/div>\r\n        <div class=\"utl-ghost-year\">2020<\/div>\r\n      <\/div>\r\n\r\n      <!-- End cap -->\r\n      <div class=\"utl-end-cap\" id=\"utlEndCap\">\r\n        <div class=\"utl-end-dot\"><\/div>\r\n        <div class=\"utl-end-label\">Present Day<\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ============================================================\r\n   CTA\r\n   ============================================================ -->\r\n  <div class=\"uhist-cta\">\r\n    <div class=\"uhist-cta-inner uisb-reveal\">\r\n      <div class=\"uhist-cta-bg\">UI<\/div>\r\n      <div>\r\n        <h2 class=\"uhist-cta-title\">Part of our story for the next 50 years?<\/h2>\r\n        <p class=\"uhist-cta-sub\">\r\n          Connect with UIG for OEM components, automation-focused manufacturing,\r\n          and long-term technical collaboration.\r\n        <\/p>\r\n      <\/div>\r\n      <button class=\"uhist-cta-btn\" onclick=\"window.location.href='\/uig\/elementor-page-2971\/'\">Contact UISB<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div><!-- \/#uisb-history -->\r\n\r\n<!-- Three.js + post-processing for the 3D history background -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/FontLoader.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/geometries\/TextGeometry.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/shaders\/CopyShader.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/shaders\/LuminosityHighPassShader.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/postprocessing\/EffectComposer.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/postprocessing\/RenderPass.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/postprocessing\/ShaderPass.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/postprocessing\/UnrealBloomPass.js\"><\/script>\r\n\r\n<script>\r\n(function() {\r\n  var root = document.getElementById('uisb-history');\r\n  if (!root) return;\r\n\r\n  \/* \u2500\u2500 Scroll progress \u2500\u2500 *\/\r\n  var bar = root.querySelector('#uhScrollProgress');\r\n  function updateProgress() {\r\n    if (!bar) return;\r\n    var y = window.scrollY;\r\n    var h = document.documentElement.scrollHeight - window.innerHeight;\r\n    bar.style.width = (h ? (y \/ h) * 100 : 0) + '%';\r\n  }\r\n  window.addEventListener('scroll', updateProgress, { passive: true });\r\n  updateProgress();\r\n\r\n  \/* \u2500\u2500 Reveal on scroll \u2500\u2500 *\/\r\n  function attachRevealObserver() {\r\n    var obs = new IntersectionObserver(function(entries) {\r\n      entries.forEach(function(entry) {\r\n        if (!entry.isIntersecting) return;\r\n        setTimeout(function() { entry.target.classList.add('uisb-visible'); }, 0);\r\n        obs.unobserve(entry.target);\r\n      });\r\n    }, { threshold: 0.12, rootMargin: '-60px 0px -60px 0px' });\r\n    root.querySelectorAll('.uisb-reveal').forEach(function(el) { obs.observe(el); });\r\n  }\r\n  if (document.readyState === 'complete') {\r\n    requestAnimationFrame(function() { requestAnimationFrame(attachRevealObserver); });\r\n  } else {\r\n    window.addEventListener('load', function() {\r\n      requestAnimationFrame(function() { requestAnimationFrame(attachRevealObserver); });\r\n    });\r\n  }\r\n\r\n  \/* \u2500\u2500 Three.js 3D history background \u2500\u2500 *\/\r\n  try { (function () {\r\n    \"use strict\";\r\n    if (window.innerWidth < 768) { var l=document.getElementById('uhist3dLoader'); if(l) l.classList.add('done'); return; }\r\n    if (typeof THREE === \"undefined\") return;\r\n\r\n    var YEARS        = [\"1973\", \"1985\", \"1998\", \"2010\", String(new Date().getFullYear())];\r\n    var N            = YEARS.length;\r\n    \/* Fixed real-time pace: one year marker passes every 2.8 seconds. *\/\r\n    var SECONDS_PER_YEAR = 2.8;\r\n    var SPACING      = 72;\r\n    var SPEED        = SPACING \/ SECONDS_PER_YEAR;\r\n    var CAM_BACK     = 15, CAM_LOOKAHEAD = 34, TOUCH_RADIUS = 6;\r\n    var APPEAR_FAR   = 66, APPEAR_NEAR   = 40;\r\n    var VANISH_START = -10, VANISH_END   = -26, RECYCLE_AT  = -30;\r\n    var DIR = new THREE.Vector3(Math.cos(Math.PI \/ 4), Math.sin(Math.PI \/ 4), -2.4).normalize();\r\n    var reducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n    var isMobile = window.innerWidth < 768;\r\n\r\n    var hero   = root.querySelector('#uh-top');\r\n    var canvas = root.querySelector('#uhist3dCanvas');\r\n    var loader = root.querySelector('#uhist3dLoader');\r\n    if (!hero || !canvas) return;\r\n\r\n    var renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: !isMobile, powerPreference: isMobile ? \"default\" : \"high-performance\" });\r\n    renderer.setPixelRatio(isMobile ? 1 : Math.min(window.devicePixelRatio, 2));\r\n    renderer.setClearColor(0x0b0e13, 1);\r\n    renderer.toneMapping = THREE.ACESFilmicToneMapping;\r\n    renderer.toneMappingExposure = 1.05;\r\n    renderer.outputEncoding = THREE.sRGBEncoding;\r\n\r\n    var scene = new THREE.Scene();\r\n    scene.fog = new THREE.FogExp2(0x0b0e13, 0.0088);\r\n    var camera = new THREE.PerspectiveCamera(60, 1, 0.1, 520);\r\n\r\n    scene.add(new THREE.AmbientLight(0x1a212c, 0.85));\r\n    var rim = new THREE.DirectionalLight(0x8fa3bd, 0.35); rim.position.set(-40, 50, 30); scene.add(rim);\r\n    var under = new THREE.DirectionalLight(0xd8b47a, 0.12); under.position.set(20, -40, 10); scene.add(under);\r\n\r\n    var envScene = new THREE.Scene();\r\n    function studioPanel(color, intensity, x, y, z, w, h, rx, ry) {\r\n      var p = new THREE.Mesh(new THREE.PlaneGeometry(w, h), new THREE.MeshBasicMaterial({ color: new THREE.Color(color).multiplyScalar(intensity), side: THREE.DoubleSide }));\r\n      p.position.set(x, y, z); p.rotation.set(rx || 0, ry || 0, 0); envScene.add(p);\r\n    }\r\n    envScene.background = new THREE.Color(0x05070a);\r\n    studioPanel(0xfff2dd, 5.5,  0, 60,  0, 120, 60, Math.PI\/2, 0);\r\n    studioPanel(0xd8b47a, 2.2,-70, 10,-20,  60, 90, 0, Math.PI\/2);\r\n    studioPanel(0x33465e, 1.6, 70,  0, 20,  60, 90, 0,-Math.PI\/2);\r\n    studioPanel(0xffffff, 1.2,  0, 10,-80, 100, 50, 0, 0);\r\n    var pmrem = new THREE.PMREMGenerator(renderer);\r\n    scene.environment = pmrem.fromScene(envScene, 0.06).texture; pmrem.dispose();\r\n\r\n    var composer = null;\r\n    function setupComposer(w, h) {\r\n      if (!THREE.EffectComposer || !THREE.UnrealBloomPass) return;\r\n      try {\r\n        composer = new THREE.EffectComposer(renderer);\r\n        composer.addPass(new THREE.RenderPass(scene, camera));\r\n        if (!isMobile) composer.addPass(new THREE.UnrealBloomPass(new THREE.Vector2(w, h), 0.75, 0.75, 0.22));\r\n      } catch (e) { composer = null; }\r\n    }\r\n    function resize() {\r\n      var w = hero.clientWidth, h = hero.clientHeight;\r\n      renderer.setSize(w, h, false); camera.aspect = w \/ h; camera.updateProjectionMatrix();\r\n      if (composer) composer.setSize(w, h); else setupComposer(w, h);\r\n    }\r\n    window.addEventListener(\"resize\", resize);\r\n\r\n    function radialTex(inner, mid) {\r\n      var c = document.createElement(\"canvas\"); c.width = c.height = 128;\r\n      var g = c.getContext(\"2d\"), grad = g.createRadialGradient(64,64,0,64,64,64);\r\n      grad.addColorStop(0, inner); grad.addColorStop(0.12, mid);\r\n      grad.addColorStop(0.5, \"rgba(0,0,0,0.02)\"); grad.addColorStop(1, \"rgba(0,0,0,0)\");\r\n      g.fillStyle = grad; g.fillRect(0,0,128,128); return new THREE.CanvasTexture(c);\r\n    }\r\n    var glowWhite = radialTex(\"rgba(255,248,236,1)\", \"rgba(255,226,180,0.5)\");\r\n    var glowGold  = radialTex(\"rgba(255,238,210,1)\", \"rgba(216,180,122,0.45)\");\r\n\r\n    var lightGroup = new THREE.Group();\r\n    var orbMesh = new THREE.Mesh(new THREE.SphereGeometry(0.22, isMobile?8:20, isMobile?8:20), new THREE.MeshBasicMaterial({ color: 0xfffdf6 }));\r\n    lightGroup.add(orbMesh);\r\n    var core = new THREE.Sprite(new THREE.SpriteMaterial({ map: glowWhite, blending: THREE.AdditiveBlending, depthWrite: false, transparent: true, opacity: 0.9 }));\r\n    core.scale.set(2.6,2.6,1); lightGroup.add(core);\r\n    var halo = new THREE.Sprite(new THREE.SpriteMaterial({ map: glowGold, blending: THREE.AdditiveBlending, depthWrite: false, transparent: true, opacity: 0.14 }));\r\n    halo.scale.set(7,7,1); lightGroup.add(halo);\r\n    lightGroup.add(new THREE.PointLight(0xffe6c0, 3.4, 170, 2));\r\n    scene.add(lightGroup);\r\n\r\n    var TRAIL_LIFE = 0.65, TRAIL_STEP = isMobile ? 3.2 : 1.4, trailArr = [], trailPool = [];\r\n    function spawnTrail(pos) {\r\n      var s = trailPool.pop();\r\n      if (!s) { s = new THREE.Sprite(new THREE.SpriteMaterial({ map: glowGold, blending: THREE.AdditiveBlending, depthWrite: false, transparent: true })); scene.add(s); }\r\n      s.visible = true; s.position.copy(pos); s.userData.age = 0; trailArr.push(s);\r\n    }\r\n    function updateTrail(dt) {\r\n      for (var i = trailArr.length-1; i >= 0; i--) {\r\n        var s = trailArr[i]; s.userData.age += dt; var k = 1 - s.userData.age \/ TRAIL_LIFE;\r\n        if (k <= 0) { s.visible = false; trailPool.push(s); trailArr.splice(i,1); }\r\n        else { var sz = 0.35+1.6*k; s.scale.set(sz,sz,1); s.material.opacity = 0.4*k*k; }\r\n      }\r\n    }\r\n\r\n    var DUST = isMobile ? 80 : 420, dg = new THREE.BufferGeometry(), dp = new Float32Array(DUST*3);\r\n    for (var d = 0; d < DUST; d++) { dp[d*3]=(Math.random()-.5)*280; dp[d*3+1]=(Math.random()-.5)*280; dp[d*3+2]=(Math.random()-.5)*280; }\r\n    dg.setAttribute(\"position\", new THREE.BufferAttribute(dp,3));\r\n    scene.add(new THREE.Points(dg, new THREE.PointsMaterial({ color: 0x8a7a5e, size: 0.55, sizeAttenuation: true, transparent: true, opacity: 0.5, depthWrite: false })));\r\n\r\n    function pathPoint(dist, out) { return (out || new THREE.Vector3()).copy(DIR).multiplyScalar(dist); }\r\n    function smoothstep(a, b, x) { var t = Math.min(1,Math.max(0,(x-a)\/(b-a))); return t*t*(3-2*t); }\r\n\r\n    var FONT_URLS = [\r\n      \"https:\/\/threejs.org\/examples\/fonts\/helvetiker_bold.typeface.json\",\r\n      \"https:\/\/unpkg.com\/three@0.128.0\/examples\/fonts\/helvetiker_bold.typeface.json\",\r\n      \"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/fonts\/helvetiker_bold.typeface.json\"\r\n    ];\r\n    function loadFont(i) {\r\n      if (i >= FONT_URLS.length) return Promise.reject();\r\n      return fetch(FONT_URLS[i]).then(function(r){ if(!r.ok) throw 0; return r.json(); })\r\n        .then(function(j){ return new THREE.FontLoader().parse(j); })\r\n        .catch(function(){ return loadFont(i+1); });\r\n    }\r\n\r\n    var yearGates = [], LIT_EMISSIVE = new THREE.Color(1.0, 0.72, 0.36);\r\n    function buildGates(font) {\r\n      var faceQuat = new THREE.Quaternion().setFromRotationMatrix(\r\n        new THREE.Matrix4().lookAt(new THREE.Vector3(0,0,0), DIR.clone(), new THREE.Vector3(0,1,0))\r\n      );\r\n      for (var i = 0; i < N; i++) {\r\n        var geo = new THREE.TextGeometry(YEARS[i], { font: font, size: 10, height: isMobile?1.5:3.4, curveSegments: isMobile?4:10, bevelEnabled: !isMobile, bevelThickness: 0.5, bevelSize: 0.34, bevelSegments: 4 });\r\n        geo.center();\r\n        var fm = new THREE.MeshStandardMaterial({ color: 0x2b2620, emissive: 0x000000, metalness: 1.0, roughness: 0.24, envMapIntensity: 1.25, transparent: true, opacity: 0 });\r\n        var sm = new THREE.MeshStandardMaterial({ color: 0x1c1915, emissive: 0x000000, metalness: 1.0, roughness: 0.38, envMapIntensity: 0.9, transparent: true, opacity: 0 });\r\n        var mesh = new THREE.Mesh(geo, [fm, sm]);\r\n        var group = new THREE.Group(); group.add(mesh);\r\n        var burst = new THREE.Sprite(new THREE.SpriteMaterial({ map: glowGold, blending: THREE.AdditiveBlending, depthWrite: false, transparent: true, opacity: 0 }));\r\n        burst.scale.set(46,46,1); group.add(burst);\r\n        group.quaternion.copy(faceQuat); scene.add(group);\r\n        yearGates.push({ group: group, faceMat: fm, sideMat: sm, burstMat: burst.material, burst: burst, dist: (i+1)*SPACING, lit: 0, isLit: false });\r\n      }\r\n    }\r\n\r\n    var lightDist = 0, clock = new THREE.Clock(false), tmp = new THREE.Vector3();\r\n    var camTarget = new THREE.Vector3(), lookAt = new THREE.Vector3(), trailAccum = 0;\r\n    var animationStartTime = null;\r\n\r\n    function tick(frameTime) {\r\n      requestAnimationFrame(tick);\r\n      if (typeof frameTime !== 'number') frameTime = performance.now();\r\n      var dt = Math.min(clock.getDelta(), 0.1);\r\n      if (animationStartTime === null) animationStartTime = frameTime;\r\n      \/* Absolute elapsed time keeps year speed independent of frame rate. *\/\r\n      lightDist = SPEED * ((frameTime - animationStartTime) \/ 1000);\r\n      pathPoint(lightDist, lightGroup.position);\r\n      var pulse = 1 + Math.sin(clock.elapsedTime * 8) * 0.04;\r\n      core.scale.set(2.6*pulse, 2.6*pulse, 1);\r\n      trailAccum += SPEED * dt;\r\n      while (trailAccum > TRAIL_STEP) { trailAccum -= TRAIL_STEP; spawnTrail(lightGroup.position); }\r\n      updateTrail(dt);\r\n      pathPoint(lightDist - CAM_BACK, camTarget);\r\n      camTarget.x += -3.2 + Math.sin(clock.elapsedTime*0.6)*0.45;\r\n      camTarget.y += -2.0 + Math.cos(clock.elapsedTime*0.48)*0.35;\r\n      camera.position.lerp(camTarget, 1 - Math.pow(0.0005, dt));\r\n      pathPoint(lightDist + CAM_LOOKAHEAD, lookAt); camera.lookAt(lookAt);\r\n      camera.rotateZ(-0.018 + Math.sin(clock.elapsedTime*0.4)*0.012);\r\n      for (var i = 0; i < yearGates.length; i++) {\r\n        var g = yearGates[i], rel = g.dist - lightDist;\r\n        while (rel < RECYCLE_AT) { g.dist += N*SPACING; g.lit = 0; g.isLit = false; rel = g.dist - lightDist; }\r\n        pathPoint(g.dist, g.group.position);\r\n        var vis = Math.min(1-smoothstep(APPEAR_NEAR,APPEAR_FAR,rel), smoothstep(VANISH_END,VANISH_START,rel));\r\n        if (!g.isLit && Math.abs(rel) < TOUCH_RADIUS) g.isLit = true;\r\n        g.lit += ((g.isLit?1:0) - g.lit) * Math.min(1, dt*9);\r\n        var lit = g.lit;\r\n        g.faceMat.opacity = vis; g.sideMat.opacity = vis;\r\n        g.faceMat.emissive.copy(LIT_EMISSIVE).multiplyScalar(lit);\r\n        g.sideMat.emissive.copy(LIT_EMISSIVE).multiplyScalar(lit*0.5);\r\n        g.faceMat.emissiveIntensity = 1.35; g.sideMat.emissiveIntensity = 1.0;\r\n        g.burstMat.opacity = vis*lit*0.65;\r\n        var bs = 46+lit*14; g.burst.scale.set(bs,bs,1);\r\n      }\r\n      var pos = dg.attributes.position, upd = false;\r\n      for (var p = 0; p < DUST; p++) {\r\n        var z = p*3; tmp.set(pos.array[z],pos.array[z+1],pos.array[z+2]).sub(camera.position);\r\n        if(tmp.x> 140){pos.array[z]  -=280;upd=true;} if(tmp.x<-140){pos.array[z]  +=280;upd=true;}\r\n        if(tmp.y> 140){pos.array[z+1]-=280;upd=true;} if(tmp.y<-140){pos.array[z+1]+=280;upd=true;}\r\n        if(tmp.z> 140){pos.array[z+2]-=280;upd=true;} if(tmp.z<-140){pos.array[z+2]+=280;upd=true;}\r\n      }\r\n      if (upd) pos.needsUpdate = true;\r\n      if (composer) composer.render(); else renderer.render(scene, camera);\r\n    }\r\n\r\n    loadFont(0).then(function(font) {\r\n      buildGates(font); resize();\r\n      pathPoint(-CAM_BACK, camera.position); camera.position.x += -3.2; camera.position.y += -2.0;\r\n      pathPoint(CAM_LOOKAHEAD, lookAt); camera.lookAt(lookAt);\r\n      clock.start(); requestAnimationFrame(tick);\r\n      if (loader) loader.classList.add(\"done\");\r\n    }).catch(function() {\r\n      if (loader) loader.innerHTML = '<div style=\"font:10px\/1 sans-serif;letter-spacing:.3em;color:#98a2b0;text-transform:uppercase\">Loading\u2026<\/div>';\r\n    });\r\n  })(); } catch (error) {\r\n    var failedLoader = document.getElementById('uhist3dLoader');\r\n    if (failedLoader) failedLoader.classList.add('done');\r\n    if (window.console && console.error) console.error('History hero animation failed:', error);\r\n  }\r\n\r\n  \/* \u2500\u2500 Timeline canvas particle network \u2500\u2500 *\/\r\n  (function() {\r\n    var canvas = document.getElementById('utlCanvas');\r\n    if (!canvas) return;\r\n    if (window.innerWidth < 768) { canvas.style.display='none'; return; }\r\n    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;\r\n    var ctx = canvas.getContext('2d');\r\n    var w, h, nodes = [], raf;\r\n    var COUNT = 65, DIST = 210;\r\n    var COLS = ['rgba(20,135,212,A)', 'rgba(88,183,245,A)', 'rgba(7,95,157,A)'];\r\n    function resize() { var sec = canvas.parentElement; w = canvas.width = sec.offsetWidth; h = canvas.height = sec.offsetHeight; }\r\n    function init() {\r\n      resize(); nodes = [];\r\n      for (var i = 0; i < COUNT; i++) {\r\n        nodes.push({ x: Math.random()*w, y: Math.random()*h, vx: (Math.random()-0.5)*0.28, vy: (Math.random()-0.5)*0.28, r: Math.random()*1.6+0.7, c: COLS[Math.floor(Math.random()*COLS.length)] });\r\n      }\r\n    }\r\n    function col(t, a) { return t.replace('A', a.toFixed(3)); }\r\n    function draw() {\r\n      ctx.clearRect(0,0,w,h);\r\n      for (var i = 0; i < nodes.length; i++) {\r\n        for (var j = i+1; j < nodes.length; j++) {\r\n          var dx=nodes[i].x-nodes[j].x, dy=nodes[i].y-nodes[j].y, d=Math.sqrt(dx*dx+dy*dy);\r\n          if (d<DIST) { ctx.beginPath(); ctx.moveTo(nodes[i].x,nodes[i].y); ctx.lineTo(nodes[j].x,nodes[j].y); ctx.strokeStyle=col(nodes[i].c,(1-d\/DIST)*0.22); ctx.lineWidth=0.7; ctx.stroke(); }\r\n        }\r\n      }\r\n      for (var k = 0; k < nodes.length; k++) { ctx.beginPath(); ctx.arc(nodes[k].x,nodes[k].y,nodes[k].r,0,Math.PI*2); ctx.fillStyle=col(nodes[k].c,0.55); ctx.fill(); }\r\n    }\r\n    function update() {\r\n      for (var k = 0; k < nodes.length; k++) {\r\n        nodes[k].x+=nodes[k].vx; nodes[k].y+=nodes[k].vy;\r\n        if (nodes[k].x<0||nodes[k].x>w) nodes[k].vx*=-1;\r\n        if (nodes[k].y<0||nodes[k].y>h) nodes[k].vy*=-1;\r\n      }\r\n    }\r\n    function loop() { update(); draw(); raf = requestAnimationFrame(loop); }\r\n    function start() { init(); if (h>0) loop(); else setTimeout(function(){ cancelAnimationFrame(raf); init(); if(h>0) loop(); },400); }\r\n    if (document.readyState==='complete') requestAnimationFrame(start);\r\n    else window.addEventListener('load', function(){ requestAnimationFrame(start); });\r\n    var rt2; window.addEventListener('resize', function(){ clearTimeout(rt2); rt2=setTimeout(function(){ cancelAnimationFrame(raf); init(); loop(); },220); });\r\n  })();\r\n\r\n  \/* \u2500\u2500 Timeline scroll-driven \u2500\u2500 *\/\r\n  (function() {\r\n    var tlItems  = root.querySelectorAll('.utl-item');\r\n    var tlHeader = document.getElementById('utlHeader');\r\n    var spineFill= document.getElementById('utlSpineFill');\r\n    var endCap   = document.getElementById('utlEndCap');\r\n    var spine    = root.querySelector('.utl-spine');\r\n    if (!tlItems.length) return;\r\n\r\n    function updateSpine() {\r\n      if (!spine || !spineFill) return;\r\n      var spineRect = spine.getBoundingClientRect();\r\n      var spineTop  = spineRect.top + window.scrollY;\r\n      var lastIn = null;\r\n      tlItems.forEach(function(item) { if (item.classList.contains('utl-in')) lastIn = item; });\r\n      if (!lastIn) { spineFill.style.height = '0px'; return; }\r\n      var nodeDot = lastIn.querySelector('.utl-node-dot');\r\n      if (!nodeDot) return;\r\n      var nr = nodeDot.getBoundingClientRect();\r\n      var nodeCenter = nr.top + nr.height\/2 + window.scrollY;\r\n      spineFill.style.height = Math.max(0, nodeCenter - spineTop) + 'px';\r\n    }\r\n\r\n    if (tlHeader) {\r\n      var hObs = new IntersectionObserver(function(entries) {\r\n        if (entries[0].isIntersecting) { tlHeader.classList.add('utl-in'); hObs.disconnect(); }\r\n      }, { threshold: 0.2 });\r\n      hObs.observe(tlHeader);\r\n    }\r\n\r\n    var itemObs = new IntersectionObserver(function(entries) {\r\n      entries.forEach(function(entry) {\r\n        if (entry.isIntersecting) { entry.target.classList.add('utl-in'); setTimeout(updateSpine, 80); }\r\n      });\r\n    }, { threshold: 0.28, rootMargin: '0px 0px -60px 0px' });\r\n    tlItems.forEach(function(item) { itemObs.observe(item); });\r\n\r\n    if (endCap) {\r\n      var ecObs = new IntersectionObserver(function(entries) {\r\n        if (entries[0].isIntersecting) { endCap.classList.add('utl-in'); ecObs.disconnect(); }\r\n      }, { threshold: 0.5 });\r\n      ecObs.observe(endCap);\r\n    }\r\n\r\n    window.addEventListener('scroll', updateSpine, { passive: true });\r\n    window.addEventListener('resize', updateSpine, { passive: true });\r\n  })();\r\n\r\n  \/* \u2500\u2500 Smooth anchor scroll \u2500\u2500 *\/\r\n  root.querySelectorAll('a[href^=\"#\"]').forEach(function(a) {\r\n    a.addEventListener('click', function(e) {\r\n      var t = document.querySelector(a.getAttribute('href'));\r\n      if (!t) return;\r\n      e.preventDefault();\r\n      t.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n    });\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Heritage Our History FIVE DECADES OFENGINEERING. From a family workshop established in 1968 to Malaysia&#8217;s trusted automotive OEM partner \u2014 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3482","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/pages\/3482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/comments?post=3482"}],"version-history":[{"count":95,"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/pages\/3482\/revisions"}],"predecessor-version":[{"id":4384,"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/pages\/3482\/revisions\/4384"}],"wp:attachment":[{"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/media?parent=3482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}