{"id":2895,"date":"2026-05-26T04:43:26","date_gmt":"2026-05-26T04:43:26","guid":{"rendered":"https:\/\/uisb.com\/?page_id=2895"},"modified":"2026-09-11T02:28:07","modified_gmt":"2026-09-11T02:28:07","slug":"elementor-page-2895","status":"publish","type":"page","link":"https:\/\/uisb.com\/zh\/elementor-page-2895\/","title":{"rendered":"Product and Solution aff"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2895\" class=\"elementor elementor-2895\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2b5b02e e-con-full e-flex jltma-glass-effect-no e-con e-parent\" data-id=\"2b5b02e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5e6a7ac jltma-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"5e6a7ac\" 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\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900&family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400&family=Syne+Mono&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   CSS VARIABLES & RESET\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root {\r\n  --white: #ffffff;\r\n  --ice: #f8fbff;\r\n  --soft-blue: #eff6ff;\r\n  --light-blue: #dbeafe;\r\n  --sky: #93c5fd;\r\n  --blue: #3b82f6;\r\n  --deep-blue: #1e40af;\r\n  --navy: #071a3d;\r\n  --navy-2: #0f172a;\r\n  --text: #172033;\r\n  --muted: #64748b;\r\n  --glass: rgba(255,255,255,.72);\r\n  --glass-strong: rgba(255,255,255,.88);\r\n  --border: rgba(147,197,253,.42);\r\n  --shadow: 0 22px 70px rgba(30,64,175,.14);\r\n  --shadow-strong: 0 34px 110px rgba(30,64,175,.25);\r\n}\r\n\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n@media (max-width: 900px) {\r\n  html { overflow-x: hidden; }\r\n}\r\n\r\nbody {\r\n  font-family: 'Nunito', 'DM Sans', sans-serif;\r\n  background: var(--white);\r\n  color: var(--text);\r\n  overflow-x: hidden;\r\n  max-width: 100%;\r\n  -webkit-font-smoothing: antialiased;\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   ECO-LABEL \u2014 section title pill (from landing-page)\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.eco-label {\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n  padding: 7px 18px; border-radius: 999px;\r\n  background: var(--soft-blue); border: 1px solid var(--border);\r\n  color: var(--deep-blue); font-family: 'DM Mono', monospace;\r\n  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;\r\n  margin-bottom: 22px;\r\n  transition: all .6s cubic-bezier(.4,0,.2,1);\r\n}\r\n.eco-label::before {\r\n  content: \"\"; width: 6px; height: 6px; border-radius: 50%;\r\n  background: var(--blue); flex-shrink: 0;\r\n  animation: eco-pulse-dot 2s ease infinite;\r\n}\r\n@keyframes eco-pulse-dot {\r\n  0%,100% { opacity: 1; transform: scale(1); }\r\n  50%      { opacity: .4; transform: scale(.6); }\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   PAGE NAV RAIL (from landing-page)\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.page-nav-rail {\r\n  position: fixed;\r\n  right: 22px; top: 50%;\r\n  transform: translateY(-50%);\r\n  display: flex; flex-direction: column;\r\n  align-items: center; gap: 7px;\r\n  z-index: 900;\r\n  pointer-events: auto;\r\n}\r\n.page-nav-pip {\r\n  width: 4px; height: 22px; border-radius: 3px;\r\n  background: rgba(147,197,253,.38);\r\n  cursor: pointer; border: none; padding: 0;\r\n  transition: height .32s cubic-bezier(.22,1,.36,1),\r\n              background .32s ease,\r\n              box-shadow .32s ease;\r\n  position: relative;\r\n}\r\n.page-nav-pip:hover {\r\n  background: var(--blue);\r\n  height: 30px;\r\n}\r\n.page-nav-pip.active {\r\n  background: var(--deep-blue);\r\n  height: 40px;\r\n  box-shadow: 0 0 14px rgba(30,64,175,.5);\r\n}\r\n.page-nav-pip::after {\r\n  content: attr(data-label);\r\n  position: absolute;\r\n  right: calc(100% + 12px); top: 50%;\r\n  transform: translateY(-50%);\r\n  background: rgba(7,26,61,.92); color: #fff;\r\n  font-family: 'Nunito', sans-serif;\r\n  font-size: 11px; font-weight: 700; letter-spacing: .3px;\r\n  padding: 5px 12px; border-radius: 10px;\r\n  white-space: nowrap;\r\n  opacity: 0; pointer-events: none;\r\n  transition: opacity .18s ease;\r\n  box-shadow: 0 4px 16px rgba(7,26,61,.25);\r\n}\r\n.page-nav-pip:hover::after { opacity: 1; }\r\n@media (max-width: 1100px) { .page-nav-rail { display: 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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   HERO \/ PAGE HEADER\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.uig-hero {\r\n  position: relative;\r\n  min-height: 92vh;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  overflow: hidden;\r\n  background: var(--navy);\r\n}\r\n\r\n.uig-hero-grid {\r\n  position: absolute; inset: 0;\r\n  background-image:\r\n    linear-gradient(rgba(147,197,253,.07) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(147,197,253,.07) 1px, transparent 1px);\r\n  background-size: 60px 60px;\r\n  animation: gridDrift 20s linear infinite;\r\n}\r\n@keyframes gridDrift {\r\n  0%   { transform: translate(0,0); }\r\n  100% { transform: translate(60px, 60px); }\r\n}\r\n\r\n#uig-particles { position: absolute; inset: 0; pointer-events: none; }\r\n\r\n.uig-orb {\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  filter: blur(80px);\r\n  opacity: .35;\r\n  animation: orbFloat 8s ease-in-out infinite alternate;\r\n}\r\n.uig-orb-1 { width: 520px; height: 520px; background: var(--deep-blue); top: -120px; left: -100px; animation-delay: 0s; }\r\n.uig-orb-2 { width: 380px; height: 380px; background: var(--blue); top: 30%; right: -80px; animation-delay: -3s; }\r\n.uig-orb-3 { width: 280px; height: 280px; background: var(--sky); bottom: -60px; left: 40%; animation-delay: -5s; }\r\n@keyframes orbFloat {\r\n  0%   { transform: translate(0, 0) scale(1); }\r\n  100% { transform: translate(30px, -40px) scale(1.08); }\r\n}\r\n\r\n.uig-hero-line {\r\n  position: absolute;\r\n  width: 2px; height: 60%;\r\n  background: linear-gradient(180deg, transparent, var(--sky), transparent);\r\n  left: 22%; top: 20%;\r\n  opacity: .25;\r\n  transform: rotate(15deg);\r\n}\r\n\r\n.uig-hero-content {\r\n  position: relative; z-index: 10;\r\n  text-align: center;\r\n  padding: 0 24px;\r\n  max-width: 960px;\r\n}\r\n\r\n\/* Hero eco-label override for dark background *\/\r\n.uig-hero-content .eco-label {\r\n  background: rgba(255,255,255,.10);\r\n  border-color: rgba(147,197,253,.35);\r\n  color: var(--sky);\r\n  margin-bottom: 28px;\r\n  opacity: 0;\r\n  animation: fadeUp .8s .2s ease forwards;\r\n}\r\n.uig-hero-content .eco-label::before {\r\n  background: var(--sky);\r\n}\r\n\r\n.uig-hero-title {\r\n  font-family: 'Syne', sans-serif;\r\n  font-size: clamp(32px, 4.8vw, 64px);\r\n  font-weight: 800;\r\n  line-height: 1.06;\r\n  letter-spacing: -0.02em;\r\n  color: var(--white);\r\n  opacity: 0;\r\n  animation: fadeUp .9s .4s ease forwards;\r\n}\r\n.uig-hero-title em {\r\n  font-style: normal;\r\n  background: linear-gradient(135deg, var(--sky) 0%, var(--blue) 50%, var(--light-blue) 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n}\r\n\r\n.uig-hero-sub {\r\n  margin-top: 28px;\r\n  font-size: 17px;\r\n  color: rgba(147,197,253,.75);\r\n  font-weight: 300;\r\n  line-height: 1.65;\r\n  max-width: 560px;\r\n  margin-left: auto; margin-right: auto;\r\n  opacity: 0;\r\n  animation: fadeUp .9s .6s ease forwards;\r\n}\r\n\r\n.uig-scroll-hint {\r\n  position: absolute;\r\n  bottom: 44px; left: 50%;\r\n  transform: translateX(-50%);\r\n  display: flex; flex-direction: column; align-items: center; gap: 10px;\r\n  opacity: 0;\r\n  animation: fadeUp .9s 1.2s ease forwards;\r\n  z-index: 10;\r\n}\r\n.uig-scroll-hint span {\r\n  font-family: 'DM Mono', monospace;\r\n  font-size: 10px;\r\n  letter-spacing: .2em;\r\n  text-transform: uppercase;\r\n  color: rgba(147,197,253,.5);\r\n}\r\n.uig-scroll-mouse {\r\n  width: 24px; height: 38px;\r\n  border: 1.5px solid rgba(147,197,253,.4);\r\n  border-radius: 12px;\r\n  position: relative;\r\n}\r\n.uig-scroll-mouse::after {\r\n  content: '';\r\n  position: absolute;\r\n  width: 4px; height: 8px;\r\n  background: var(--sky);\r\n  border-radius: 2px;\r\n  top: 6px; left: 50%; transform: translateX(-50%);\r\n  animation: scrollBob 1.8s ease-in-out infinite;\r\n}\r\n@keyframes scrollBob {\r\n  0%,100% { top: 6px; opacity: 1; }\r\n  50%      { top: 16px; opacity: .3; }\r\n}\r\n@keyframes fadeUp {\r\n  from { opacity: 0; transform: translateY(28px); }\r\n  to   { opacity: 1; transform: translateY(0); }\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   PRODUCT CATEGORIES\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.uig-categories-wrap { position:relative; padding:95px 8%; overflow:hidden; background:transparent; }\r\n.section-title { text-align:center; margin-bottom:58px; }\r\n.section-title h2 { font-family:'Syne',sans-serif; font-size:clamp(34px,4vw,48px); color:var(--navy); margin-bottom:15px; letter-spacing:-1px; }\r\n.section-title p { color:var(--muted); font-size:18px; }\r\n.products { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }\r\n.product-card { border-radius:20px; overflow:hidden; background:rgba(255,255,255,.78); border:1px solid rgba(147,197,253,.42); backdrop-filter:blur(18px); box-shadow:var(--shadow); transition:.35s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; text-decoration:none; color:inherit; }\r\n.product-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-strong); }\r\n.product-img { height:330px; overflow:hidden; position:relative; flex-shrink:0; background:radial-gradient(circle at 60% 35%, rgba(147,197,253,.55), transparent 55%), linear-gradient(145deg, #e0efff, #dbeafe, #f0f7ff); display:flex; align-items:center; justify-content:center; }\r\n.product-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%; display:block; transition:.5s ease; }\r\n.product-card:hover .product-img img { transform:scale(1.06); }\r\n.product-info { padding:18px 22px 20px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(147,197,253,.3); gap:12px; }\r\n.product-card h3 { font-family:'Syne',sans-serif; font-size:17px; color:var(--navy); font-weight:700; margin:0; letter-spacing:-.2px; line-height:1.3; }\r\n.product-arrow { width:34px; height:34px; border-radius:50%; flex-shrink:0; background:var(--soft-blue); border:1px solid rgba(147,197,253,.55); display:flex; align-items:center; justify-content:center; color:var(--blue); transition:.3s ease; }\r\n.product-card:hover .product-arrow { background:var(--blue); color:#fff; transform:rotate(45deg); }\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SOLUTIONS 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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.uig-solutions {\r\n  position: relative;\r\n  background: var(--navy);\r\n  overflow: hidden;\r\n  padding: 0 0 140px;\r\n}\r\n\r\n.uig-sol-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }\r\n.uig-sol-bg-grid {\r\n  position: absolute; inset: 0;\r\n  background-image:\r\n    linear-gradient(rgba(59,130,246,.06) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(59,130,246,.06) 1px, transparent 1px);\r\n  background-size: 80px 80px;\r\n}\r\n.uig-sol-orb-a {\r\n  position: absolute; width: 700px; height: 700px; border-radius: 50%;\r\n  background: radial-gradient(circle, rgba(30,64,175,.5), transparent 70%);\r\n  top: -200px; right: -200px;\r\n  animation: solOrbA 12s ease-in-out infinite alternate;\r\n}\r\n.uig-sol-orb-b {\r\n  position: absolute; width: 500px; height: 500px; border-radius: 50%;\r\n  background: radial-gradient(circle, rgba(59,130,246,.25), transparent 70%);\r\n  bottom: -100px; left: -100px;\r\n  animation: solOrbA 15s ease-in-out infinite alternate-reverse;\r\n}\r\n@keyframes solOrbA {\r\n  0%   { transform: translate(0,0) scale(1); }\r\n  100% { transform: translate(-60px, 80px) scale(1.12); }\r\n}\r\n.uig-sol-ray {\r\n  position: absolute; top: 0; left: 30%;\r\n  width: 2px; height: 100%;\r\n  background: linear-gradient(180deg, transparent, rgba(147,197,253,.12) 40%, transparent);\r\n  transform: rotate(8deg); transform-origin: top center;\r\n  animation: raySweep 6s ease-in-out infinite alternate;\r\n}\r\n@keyframes raySweep {\r\n  0%   { left: 20%; opacity: .5; }\r\n  100% { left: 75%; opacity: .15; }\r\n}\r\n\r\n.uig-sol-header {\r\n  position: relative; z-index: 2;\r\n  text-align: center;\r\n  padding: 120px 24px 80px;\r\n}\r\n\/* Solutions eco-label override for dark background *\/\r\n.uig-sol-header .eco-label {\r\n  background: rgba(255,255,255,.08);\r\n  border-color: rgba(255,255,255,.18);\r\n  color: rgba(255,255,255,.85);\r\n}\r\n.uig-sol-header .eco-label::before { background: var(--sky); }\r\n\r\n.uig-sol-title {\r\n  font-family: 'Syne', sans-serif;\r\n  font-size: clamp(44px, 7vw, 88px);\r\n  font-weight: 800; line-height: .94;\r\n  color: var(--white);\r\n}\r\n.uig-sol-title span {\r\n  display: block;\r\n  background: linear-gradient(135deg, var(--sky), var(--blue));\r\n  -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n}\r\n.uig-sol-desc {\r\n  margin-top: 24px; font-size: 16px;\r\n  color: rgba(147,197,253,.65); font-weight: 300; line-height: 1.7;\r\n  max-width: 540px; margin-left: auto; margin-right: auto;\r\n}\r\n\r\n.uig-sol-timeline { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; padding: 0 40px; }\r\n\r\n\/* Auto-fill wrapping grid \u2014 bounded max-width + justify-content:center\r\n   keeps cards centred at any card count *\/\r\n.uig-sol-steps {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fit, minmax(258px, 300px));\r\n  justify-content: center;\r\n  gap: 20px;\r\n  position: relative;\r\n}\r\n\r\n.uig-sol-step {\r\n  position: relative; opacity: 0;\r\n  transform: translateY(44px) scale(.97);\r\n  transition: opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1);\r\n  \/* transition-delay set dynamically by JS *\/\r\n}\r\n.uig-sol-step.visible { opacity: 1; transform: translateY(0) scale(1); }\r\n\r\n.uig-step-inner {\r\n  background: rgba(255,255,255,.04);\r\n  border: 1px solid rgba(147,197,253,.18);\r\n  border-radius: 24px; overflow: hidden; height: 100%;\r\n  transition: background .4s, border-color .4s, transform .4s, box-shadow .4s;\r\n  cursor: default; position: relative;\r\n}\r\n.uig-step-inner::before {\r\n  content: ''; position: absolute; inset: 0;\r\n  background: linear-gradient(135deg, rgba(59,130,246,.08), transparent 60%);\r\n  opacity: 0; transition: opacity .4s; border-radius: 24px;\r\n}\r\n.uig-sol-step:hover .uig-step-inner {\r\n  background: rgba(255,255,255,.08);\r\n  border-color: rgba(147,197,253,.4);\r\n  transform: translateY(-12px);\r\n  box-shadow: 0 40px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(147,197,253,.2);\r\n}\r\n.uig-sol-step:hover .uig-step-inner::before { opacity: 1; }\r\n\r\n.uig-step-img-wrap { width: 100%; height: 168px; position: relative; overflow: hidden; }\r\n.uig-step-img-wrap img {\r\n  width: 100%; height: 100%; object-fit: cover;\r\n  transition: transform .6s cubic-bezier(.4,0,.2,1), filter .6s;\r\n  filter: brightness(.75) saturate(.8);\r\n}\r\n.uig-sol-step:hover .uig-step-img-wrap img { transform: scale(1.08); filter: brightness(.9) saturate(1); }\r\n.uig-step-img-wrap::after {\r\n  content: ''; position: absolute; inset: 0;\r\n  background: linear-gradient(180deg, transparent 40%, var(--navy-2) 100%);\r\n}\r\n.uig-step-num {\r\n  position: absolute; top: 16px; right: 18px; z-index: 3;\r\n  font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 800;\r\n  letter-spacing: .14em; color: var(--white);\r\n  background: rgba(59,130,246,.7); backdrop-filter: blur(8px);\r\n  border-radius: 100px; padding: 5px 12px;\r\n  border: 1px solid rgba(147,197,253,.4);\r\n}\r\n.uig-step-body { padding: 22px 24px 26px; }\r\n.uig-step-icon {\r\n  width: 42px; height: 42px; border-radius: 12px;\r\n  background: linear-gradient(135deg, var(--deep-blue), var(--blue));\r\n  display: flex; align-items: center; justify-content: center;\r\n  font-size: 20px; margin-bottom: 14px;\r\n  box-shadow: 0 6px 18px rgba(59,130,246,.38);\r\n  transition: transform .3s;\r\n}\r\n.uig-sol-step:hover .uig-step-icon { transform: rotate(-6deg) scale(1.1); }\r\n.uig-step-title { font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 800; color: var(--white); margin-bottom: 9px; line-height: 1.2; }\r\n.uig-step-desc { font-size: 13px; color: rgba(147,197,253,.62); line-height: 1.68; font-weight: 300; }\r\n.uig-step-glow {\r\n  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);\r\n  width: 60%; height: 2px;\r\n  background: linear-gradient(90deg, transparent, var(--blue), transparent);\r\n  opacity: 0; transition: opacity .4s; border-radius: 0 0 24px 24px;\r\n}\r\n.uig-sol-step:hover .uig-step-glow { opacity: 1; }\r\n\/* Arrows removed \u2014 not compatible with wrapping multi-row grid *\/\r\n.uig-step-arrow { display: none; }\r\n\r\n.uig-sol-stats {\r\n  position: relative; z-index: 2;\r\n  display: grid; grid-template-columns: repeat(3, 1fr);\r\n  gap: 1px;\r\n  margin: 80px auto 0;\r\n  max-width: 1340px;\r\n  padding: 0 40px;\r\n  border: 1px solid rgba(147,197,253,.15);\r\n  border-radius: 24px; overflow: hidden;\r\n  background: rgba(147,197,253,.08);\r\n}\r\n.uig-stat {\r\n  padding: 48px 40px;\r\n  background: rgba(255,255,255,.03);\r\n  text-align: center;\r\n  border-right: 1px solid rgba(147,197,253,.1);\r\n  position: relative; overflow: hidden; transition: background .3s;\r\n}\r\n.uig-stat:last-child { border-right: none; }\r\n.uig-stat:hover { background: rgba(255,255,255,.07); }\r\n.uig-stat-num {\r\n  font-family: 'Syne', sans-serif; font-size: 58px; font-weight: 800;\r\n  background: linear-gradient(135deg, var(--white), var(--sky));\r\n  -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n  background-clip: text; line-height: 1; display: block; margin-bottom: 10px;\r\n}\r\n.uig-stat-label {\r\n  font-size: 13px; font-family: 'DM Mono', monospace;\r\n  letter-spacing: .12em; text-transform: uppercase;\r\n  color: rgba(147,197,253,.55);\r\n}\r\n.uig-stat::before {\r\n  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;\r\n  background: linear-gradient(90deg, transparent, var(--blue), transparent);\r\n  opacity: 0; transition: opacity .3s;\r\n}\r\n.uig-stat:hover::before { opacity: 1; }\r\n\r\n.uig-sol-cta { position: relative; z-index: 2; text-align: center; padding: 80px 24px 0; }\r\n.uig-sol-cta p {\r\n  font-size: 16px; color: rgba(147,197,253,.55); margin-bottom: 28px;\r\n  font-family: 'DM Mono', monospace; letter-spacing: .08em;\r\n}\r\n.uig-sol-btn {\r\n  display: inline-flex; align-items: center; gap: 10px;\r\n  font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 700;\r\n  color: var(--navy); background: var(--white);\r\n  padding: 16px 36px; border-radius: 100px; text-decoration: none;\r\n  box-shadow: 0 0 40px rgba(147,197,253,.25);\r\n  transition: transform .3s, box-shadow .3s, background .3s;\r\n  letter-spacing: .04em;\r\n}\r\n.uig-sol-btn:hover {\r\n  transform: translateY(-3px);\r\n  box-shadow: 0 0 60px rgba(147,197,253,.4);\r\n  background: var(--light-blue);\r\n}\r\n.uig-sol-btn svg { transition: transform .3s; }\r\n.uig-sol-btn:hover svg { transform: translateX(5px); }\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   PROGRESS SLIDER (Engineering Excellence)\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.ps-wrap {\r\n  position: relative; z-index: 2;\r\n  max-width: 1340px; margin: 0 auto 80px;\r\n  padding: 0 40px;\r\n  display: grid;\r\n  grid-template-columns: 340px 1fr;\r\n  gap: 56px;\r\n  align-items: stretch;\r\n}\r\n.ps-btns { display: flex; flex-direction: column; gap: 0; }\r\n.ps-btn {\r\n  position: relative;\r\n  text-align: left;\r\n  padding: 20px 0 20px 24px;\r\n  background: none; border: none;\r\n  border-left: 2px solid rgba(147,197,253,.14);\r\n  cursor: pointer;\r\n  overflow: hidden;\r\n  transition: border-color .3s ease, opacity .3s ease, background .3s ease;\r\n  opacity: .36;\r\n  width: 100%;\r\n  margin-bottom: 6px;\r\n}\r\n.ps-btn:last-child { margin-bottom: 0; }\r\n.ps-btn.ps-active { opacity: 1; border-left-color: var(--blue); }\r\n.ps-btn:hover:not(.ps-active) { opacity: .62; border-left-color: rgba(147,197,253,.4); }\r\n.ps-btn-num {\r\n  display: block;\r\n  font-family: 'DM Mono', monospace;\r\n  font-size: 10px; font-weight: 600;\r\n  letter-spacing: .2em; text-transform: uppercase;\r\n  color: var(--sky); margin-bottom: 6px;\r\n}\r\n.ps-btn-title {\r\n  display: block;\r\n  font-family: 'Nunito', sans-serif;\r\n  font-size: 17px; font-weight: 700;\r\n  color: var(--white); line-height: 1.3;\r\n}\r\n.ps-btn-desc {\r\n  display: block;\r\n  font-family: 'Nunito', sans-serif;\r\n  font-size: 13px; font-weight: 400;\r\n  color: rgba(147,197,253,.6);\r\n  margin-top: 5px; line-height: 1.5;\r\n}\r\n.ps-progress-bar {\r\n  position: absolute;\r\n  bottom: 0; left: 24px; right: 0; height: 1px;\r\n  background: rgba(147,197,253,.1);\r\n  overflow: hidden;\r\n}\r\n.ps-progress-fill {\r\n  position: absolute;\r\n  left: 0; top: 0; height: 100%;\r\n  width: 0%;\r\n  background: var(--sky);\r\n}\r\n\r\n\/* Slide content \u2014 image with overlaid text, no separate body box *\/\r\n.ps-content { position: relative; border-radius: 20px; overflow: hidden; height: 100%; }\r\n.ps-slide {\r\n  position: absolute; inset: 0;\r\n  display: flex; flex-direction: column;\r\n  opacity: 0; pointer-events: none;\r\n  transition: opacity .45s ease;\r\n}\r\n.ps-slide.ps-active {\r\n  opacity: 1; pointer-events: auto;\r\n  animation: psFadeIn .45s ease forwards;\r\n}\r\n@keyframes psFadeIn {\r\n  from { opacity: 0; }\r\n  to   { opacity: 1; }\r\n}\r\n.ps-slide-img {\r\n  position: relative; overflow: hidden;\r\n  flex: 1; min-height: 0;\r\n}\r\n.ps-slide-img img {\r\n  width: 100%; height: 100%;\r\n  object-fit: cover; display: block;\r\n  filter: brightness(.72) saturate(.85);\r\n  transition: transform 8s ease;\r\n}\r\n.ps-slide.ps-active .ps-slide-img img { transform: scale(1.05); }\r\n.ps-slide-img::after {\r\n  content: '';\r\n  position: absolute; inset: 0;\r\n  background: linear-gradient(\r\n    to top,\r\n    rgba(7,26,61,.96) 0%,\r\n    rgba(7,26,61,.55) 45%,\r\n    rgba(7,26,61,.12) 72%,\r\n    transparent 100%\r\n  );\r\n}\r\n.ps-slide-step-badge {\r\n  position: absolute; top: 22px; left: 24px; z-index: 3;\r\n  font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 600;\r\n  letter-spacing: .18em; color: var(--white);\r\n  background: rgba(59,130,246,.6); backdrop-filter: blur(8px);\r\n  border-radius: 100px; padding: 6px 16px;\r\n  border: 1px solid rgba(147,197,253,.3);\r\n}\r\n.ps-slide-body {\r\n  position: absolute;\r\n  bottom: 0; left: 0; right: 0; z-index: 3;\r\n  padding: 40px 44px 42px;\r\n  display: flex; align-items: flex-start; gap: 20px;\r\n}\r\n.ps-slide-icon {\r\n  width: 50px; height: 50px; flex-shrink: 0;\r\n  border-radius: 14px;\r\n  background: rgba(59,130,246,.3);\r\n  backdrop-filter: blur(10px);\r\n  border: 1px solid rgba(147,197,253,.28);\r\n  display: flex; align-items: center; justify-content: center;\r\n  font-size: 22px; margin-top: 5px;\r\n}\r\n.ps-slide-text h3 {\r\n  font-family: 'Nunito', sans-serif;\r\n  font-size: 28px; font-weight: 800;\r\n  color: var(--white);\r\n  margin-bottom: 10px; line-height: 1.2; letter-spacing: -.2px;\r\n}\r\n.ps-slide-text p {\r\n  font-family: 'Nunito', sans-serif;\r\n  font-size: 15px; font-weight: 400;\r\n  color: rgba(255,255,255,.78);\r\n  line-height: 1.8; margin: 0; max-width: 520px;\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\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 1100px) {\r\n  .products { grid-template-columns: 1fr 1fr; }\r\n  .uig-sol-steps { grid-template-columns: repeat(auto-fit, minmax(230px, 270px)); }\r\n}\r\n\r\n@media (max-width: 900px) {\r\n  .uig-sol-stats { grid-template-columns: 1fr; margin: 60px 24px 0; max-width: calc(100% - 48px); }\r\n  .uig-stat { border-right: none; border-bottom: 1px solid rgba(147,197,253,.1); padding: 36px 24px; }\r\n  .uig-stat:last-child { border-bottom: none; }\r\n  .uig-stat-num { font-size: 44px; }\r\n  .uig-categories-wrap { padding: 60px 5%; }\r\n  .products { grid-template-columns: 1fr 1fr; gap: 14px; }\r\n  .uig-sol-header { padding: 88px 20px 52px; }\r\n  .uig-sol-desc { font-size: 14px; }\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     ENGINEERING EXCELLENCE \u2014 MOBILE REBUILD\r\n     Desktop: side rail of tall buttons + slide panel.\r\n     Mobile: 5 compact numbered step chips in ONE row\r\n     (no horizontal scrolling, no overflow), with the\r\n     autoplay progress bar inside the active chip, and\r\n     the slide below at a fixed comfortable height.\r\n     Step title\/description live in the slide overlay,\r\n     so the chips only need their numbers.\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  .ps-wrap {\r\n    grid-template-columns: 1fr;\r\n    gap: 14px;\r\n    padding: 0 18px;\r\n    margin-bottom: 56px;\r\n  }\r\n  .ps-btns {\r\n    display: grid;\r\n    grid-template-columns: repeat(5, minmax(0, 1fr));\r\n    gap: 8px;\r\n    flex-direction: unset;\r\n    overflow: visible;\r\n    padding-bottom: 0;\r\n  }\r\n  .ps-btn {\r\n    min-width: 0;\r\n    margin-bottom: 0;\r\n    padding: 12px 2px 16px;\r\n    text-align: center;\r\n    border: 1px solid rgba(147,197,253,.16);\r\n    border-radius: 12px;\r\n    background: rgba(255,255,255,.03);\r\n    opacity: .45;\r\n  }\r\n  .ps-btn.ps-active {\r\n    opacity: 1;\r\n    border-color: rgba(59,130,246,.75);\r\n    background: rgba(59,130,246,.14);\r\n  }\r\n  .ps-btn:hover:not(.ps-active) {\r\n    opacity: .7;\r\n    border-color: rgba(147,197,253,.4);\r\n  }\r\n  .ps-btn-num { font-size: 9px; letter-spacing: .1em; margin-bottom: 0; }\r\n  .ps-btn-title, .ps-btn-desc { display: none; }\r\n  .ps-progress-bar {\r\n    left: 10px; right: 10px; bottom: 7px; top: auto;\r\n    height: 2px; border-radius: 2px;\r\n  }\r\n  .ps-content { height: clamp(340px, 56vh, 460px); }\r\n  .ps-slide-step-badge { top: 14px; left: 14px; padding: 5px 12px; }\r\n  .ps-slide-body { padding: 20px 18px 22px; gap: 12px; }\r\n  .ps-slide-icon { width: 42px; height: 42px; font-size: 18px; border-radius: 12px; margin-top: 2px; }\r\n  .ps-slide-text h3 { font-size: 20px; margin-bottom: 6px; }\r\n  .ps-slide-text p { font-size: 13px; line-height: 1.65; max-width: 100%; }\r\n}\r\n\r\n@media (max-width: 540px) {\r\n  .products { grid-template-columns: 1fr; }\r\n  .uig-sol-steps { grid-template-columns: 1fr 1fr; gap: 12px; }\r\n  .uig-step-img-wrap { height: 130px; }\r\n  .sticky-car-area h1 { font-size: 28px; }\r\n  .sticky-car-area h2 { font-size: 25px; }\r\n  .uig-sol-title { font-size: clamp(34px, 10vw, 44px); }\r\n  .ps-wrap { padding: 0 14px; }\r\n  .ps-btns { gap: 6px; }\r\n  .ps-btn { padding: 10px 2px 15px; border-radius: 10px; }\r\n  .ps-content { height: clamp(320px, 60vh, 420px); border-radius: 16px; }\r\n  .ps-slide-text h3 { font-size: 18px; }\r\n}\r\n\r\n@media (max-width: 380px) {\r\n  .uig-sol-steps { grid-template-columns: 1fr; }\r\n  .ps-btn-num { font-size: 8px; letter-spacing: .06em; }\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   SCROLL REVEAL 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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.uig-reveal {\r\n  opacity: 0; transform: translateY(32px);\r\n  transition: opacity .7s ease, transform .7s ease;\r\n}\r\n.uig-reveal.visible { opacity: 1; transform: translateY(0); }\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   RTAPE SECTION \u2014 STACKING CARD REDESIGN\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#rtape { position: relative; overflow: visible; background: transparent; }\r\n#rtape .rt-stack { position: relative; height: calc(3 * 100vh); }\r\n#rtape .rt-slot {\r\n  position: sticky; top: 0; height: 100vh;\r\n  display: flex; align-items: center; justify-content: center;\r\n}\r\n#rtape .rt-slot:nth-child(1) { z-index: 1; }\r\n#rtape .rt-slot:nth-child(2) { z-index: 2; }\r\n#rtape .rt-slot:nth-child(3) { z-index: 3; }\r\n#rtape .rt-panel {\r\n  position: relative; width: 92%; height: 86vh; border-radius: 28px;\r\n  overflow: hidden; transform-origin: top center; will-change: transform;\r\n  box-shadow: 0 40px 100px rgba(7,26,61,.38), 0 0 0 1px rgba(147,197,253,.12);\r\n}\r\n#rtape .rt-slot:nth-child(1) .rt-panel { margin-top: -5vh; }\r\n#rtape .rt-slot:nth-child(2) .rt-panel { margin-top: calc(-5vh + 26px); }\r\n#rtape .rt-slot:nth-child(3) .rt-panel { margin-top: calc(-5vh + 52px); }\r\n\r\n#rtape .rt-panel-0 {\r\n  background: #060d1e;\r\n  display: grid;\r\n  grid-template-columns: 46% 1fr;\r\n  grid-template-rows: 1fr;\r\n  align-items: stretch;\r\n}\r\n#rtape .aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }\r\n#rtape .aurora i {\r\n  position: absolute; border-radius: 50%; filter: blur(110px);\r\n  opacity: .26; animation: rtapeOrb 16s ease-in-out infinite alternate;\r\n}\r\n#rtape .aurora i:nth-child(1) {\r\n  width: 660px; height: 660px; top: -16%; left: -8%;\r\n  background: radial-gradient(circle, rgba(147,197,253,.65), rgba(59,130,246,.35), transparent 70%);\r\n}\r\n#rtape .aurora i:nth-child(2) {\r\n  width: 460px; height: 460px; top: 52%; right: -6%; animation-delay: -6s;\r\n  background: radial-gradient(circle, rgba(219,234,254,.75), rgba(147,197,253,.28), transparent 70%);\r\n}\r\n#rtape .aurora i:nth-child(3) {\r\n  width: 360px; height: 360px; bottom: -8%; left: 42%; animation-delay: -10s;\r\n  background: radial-gradient(circle, rgba(239,246,255,.65), rgba(59,130,246,.25), transparent 70%);\r\n}\r\n@keyframes rtapeOrb {\r\n  0%   { transform: translate(0,0) scale(1); }\r\n  50%  { transform: translate(32px,-22px) scale(1.05); }\r\n  100% { transform: translate(-16px,28px) scale(.96); }\r\n}\r\n#bg-net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }\r\n#rtape .rt-hero-left {\r\n  position: relative; z-index: 2;\r\n  display: flex; flex-direction: column;\r\n  padding: clamp(36px, 5vh, 56px) clamp(28px, 4vw, 60px) clamp(20px, 3vh, 40px);\r\n  height: 100%;\r\n}\r\n#rtape .eyebrow {\r\n  display: inline-flex; align-items: center; gap: 10px; width: fit-content;\r\n  padding: 7px 16px 7px 12px; margin-bottom: 20px;\r\n  background: rgba(255,255,255,.08); border: 1px solid rgba(147,197,253,.22); border-radius: 100px;\r\n  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;\r\n  letter-spacing: .15em; text-transform: uppercase; color: rgba(180,220,255,.9);\r\n  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);\r\n}\r\n#rtape .eyebrow-dot {\r\n  width: 7px; height: 7px; border-radius: 50%; background: var(--blue);\r\n  box-shadow: 0 0 12px rgba(59,130,246,.65);\r\n  animation: rtapePulse 2.4s ease-in-out infinite;\r\n}\r\n@keyframes rtapePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(1.55)} }\r\n#rtape .headline-intro {\r\n  font-family: 'Space Grotesk', sans-serif;\r\n  font-size: clamp(2.8rem, 5vw, 4.4rem); font-weight: 700;\r\n  line-height: 1.0; letter-spacing: -.04em; color: #f0f7ff; margin-bottom: 18px;\r\n}\r\n#rtape .headline-intro em {\r\n  font-style: normal;\r\n  background: linear-gradient(110deg, #60c8ff 0%, #93d8ff 60%, #beeaff 100%);\r\n  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\r\n}\r\n#rtape .lede-intro {\r\n  font-family: 'DM Sans', system-ui, sans-serif;\r\n  font-size: 1.0rem; line-height: 1.76; color: rgba(200,225,250,.82);\r\n  max-width: 440px; margin-bottom: 0;\r\n}\r\n#rtape .headline {\r\n  font-family: 'Space Grotesk', sans-serif;\r\n  font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 700;\r\n  line-height: 1.1; letter-spacing: -.024em; color: #f0f7ff; margin-bottom: 16px;\r\n}\r\n#rtape .headline em {\r\n  font-style: normal;\r\n  background: linear-gradient(120deg, #60c8ff 10%, #93d8ff 90%);\r\n  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\r\n}\r\n#rtape .lede {\r\n  font-family: 'DM Sans', system-ui, sans-serif;\r\n  font-size: .9rem; line-height: 1.72; color: rgba(180,210,240,.65);\r\n  max-width: 380px; margin-bottom: 28px;\r\n}\r\n#rtape .metrics {\r\n  display: flex; gap: 0; border-top: 1px solid rgba(147,197,253,.15);\r\n  margin-top: auto;\r\n}\r\n#rtape .metric { flex: 1; padding: 18px 20px 28px 0; display: flex; flex-direction: column; gap: 5px; }\r\n#rtape .metric + .metric { padding-left: 20px; border-left: 1px solid rgba(147,197,253,.15); }\r\n#rtape .metric-val {\r\n  font-family: 'Space Grotesk', sans-serif;\r\n  font-size: 2rem; font-weight: 700; line-height: 1; color: #60c8ff;\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n#rtape .metric-label {\r\n  font-size: .64rem; font-weight: 600; letter-spacing: .12em;\r\n  text-transform: uppercase; color: rgba(140,185,225,.58);\r\n}\r\n@keyframes rtapeRise { to { opacity: 1; transform: translateY(0); } }\r\n#rtape .stage { position: relative; background: #060d1e; overflow: hidden; }\r\n#rtape .stage::before {\r\n  content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;\r\n  box-shadow: inset 80px 0 100px -50px #060d1e, inset 0 0 70px rgba(56,168,255,.05);\r\n}\r\n#arm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }\r\n#rtape .stage-hud {\r\n  position: absolute; inset: 0; z-index: 8; pointer-events: none;\r\n  font-family: 'JetBrains Mono', monospace; color: rgba(148,205,255,.85);\r\n}\r\n#rtape .rt-marquee {\r\n  position: absolute; bottom: 0; left: 0; right: 0; z-index: 9;\r\n  overflow: hidden; border-top: 1px solid rgba(147,197,253,.1);\r\n  background: rgba(6,13,30,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);\r\n  padding: 10px 0;\r\n  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);\r\n  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);\r\n}\r\n#rtape .rt-marquee-track {\r\n  display: flex; gap: 52px; width: max-content;\r\n  animation: rtapeMarquee 38s linear infinite;\r\n}\r\n#rtape .rt-marquee-item {\r\n  display: flex; align-items: center; gap: 52px; flex-shrink: 0;\r\n  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;\r\n  letter-spacing: .2em; text-transform: uppercase; color: rgba(100,160,200,.55); white-space: nowrap;\r\n}\r\n#rtape .rt-marquee-item b { color: #60c8ff; font-weight: 500; }\r\n@keyframes rtapeMarquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }\r\n\r\n#rtape .rt-panel-1 {\r\n  background:\r\n    radial-gradient(ellipse 90% 60% at 15% 20%, rgba(147,197,253,.28) 0%, transparent 55%),\r\n    radial-gradient(ellipse 70% 70% at 85% 80%, rgba(59,130,246,.14) 0%, transparent 55%),\r\n    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(219,234,254,.35) 0%, transparent 60%),\r\n    linear-gradient(160deg, #ffffff 0%, #eef5ff 40%, #f5f9ff 70%, #eaf2ff 100%);\r\n  display: flex; flex-direction: column;\r\n  padding: 44px clamp(28px, 4vw, 60px);\r\n}\r\n#rtape .rt-panel-1::before {\r\n  content: ''; position: absolute; inset: 0; pointer-events: none;\r\n  background:\r\n    radial-gradient(circle 340px at 80% 15%, rgba(147,197,253,.22), transparent),\r\n    radial-gradient(circle 260px at 10% 85%, rgba(96,165,250,.14), transparent);\r\n}\r\n#rtape .rt-p-head {\r\n  position: relative; z-index: 2;\r\n  display: flex; align-items: flex-end; justify-content: space-between;\r\n  gap: 24px; flex-wrap: wrap; margin-bottom: 24px; flex-shrink: 0;\r\n}\r\n#rtape .rt-p-head-left { max-width: 520px; }\r\n#rtape .rt-sec-tag {\r\n  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;\r\n  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;\r\n  letter-spacing: .18em; text-transform: uppercase; color: var(--blue);\r\n}\r\n#rtape .rt-sec-tag::before { content: ''; width: 20px; height: 1px; background: currentColor; }\r\n#rtape .rt-sec-title {\r\n  font-family: 'Space Grotesk', sans-serif;\r\n  font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 700;\r\n  letter-spacing: -.02em; color: var(--navy); line-height: 1.1;\r\n}\r\n#rtape .rt-sec-sub { font-size: .88rem; color: var(--muted); line-height: 1.65; max-width: 360px; }\r\n#rtape .rt-bento {\r\n  position: relative; z-index: 2;\r\n  display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px;\r\n  flex: 1;\r\n}\r\n#rtape .rt-card {\r\n  position: relative; overflow: hidden;\r\n  background: rgba(255,255,255,.9);\r\n  border: 1px solid rgba(147,197,253,.22);\r\n  border-radius: 20px; padding: 24px 22px;\r\n  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);\r\n  box-shadow: 0 10px 36px rgba(30,64,175,.1);\r\n  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease;\r\n}\r\n#rtape .rt-card::before {\r\n  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;\r\n  background: linear-gradient(90deg, var(--blue), var(--sky) 50%, var(--blue));\r\n  background-size: 200% 100%; opacity: 0; transition: opacity .4s;\r\n  animation: rtapeShimmer 3s linear infinite;\r\n}\r\n@keyframes rtapeShimmer { from{background-position:200% 0} to{background-position:-200% 0} }\r\n#rtape .rt-card:hover { transform: translateY(-5px); box-shadow: 0 22px 56px rgba(30,64,175,.2); border-color: rgba(147,197,253,.5); }\r\n#rtape .rt-card:hover::before { opacity: 1; }\r\n#rtape .rt-c7 { grid-column: span 7; }\r\n#rtape .rt-c5 { grid-column: span 5; }\r\n#rtape .rt-c4 { grid-column: span 4; }\r\n#rtape .rt-card-icon {\r\n  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 14px;\r\n  background: linear-gradient(135deg, var(--soft-blue), var(--light-blue));\r\n  border: 1px solid rgba(147,197,253,.42);\r\n  display: flex; align-items: center; justify-content: center;\r\n  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;\r\n}\r\n#rtape .rt-card:hover .rt-card-icon { transform: scale(1.07) rotate(-3deg); box-shadow: 0 0 18px rgba(59,130,246,.22); }\r\n#rtape .rt-card-icon svg { width: 20px; height: 20px; color: var(--deep-blue); }\r\n#rtape .rt-card-title {\r\n  font-family: 'Space Grotesk', sans-serif;\r\n  font-size: .96rem; font-weight: 600; color: var(--navy); margin-bottom: 7px; line-height: 1.3;\r\n}\r\n#rtape .rt-card-desc { font-size: .8rem; line-height: 1.7; color: var(--muted); }\r\n#rtape .rt-card.dark {\r\n  background: linear-gradient(148deg, var(--navy) 0%, var(--navy-2) 100%);\r\n  border-color: rgba(56,168,255,.24);\r\n}\r\n#rtape .rt-card.dark .rt-card-icon {\r\n  background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(30,64,175,.34));\r\n  border-color: rgba(93,165,255,.32);\r\n}\r\n#rtape .rt-card.dark .rt-card-icon svg { color: var(--sky); }\r\n#rtape .rt-card.dark .rt-card-title { color: var(--ice); }\r\n#rtape .rt-card.dark .rt-card-desc { color: rgba(178,208,238,.68); }\r\n#rtape .rt-card.dark:hover { border-color: rgba(56,168,255,.5); }\r\n#rtape .rt-card.dark::after {\r\n  content: ''; position: absolute; right: -24px; bottom: -24px; width: 160px; height: 160px;\r\n  border: 1px solid rgba(86,170,255,.14); border-radius: 50%;\r\n  box-shadow: 0 0 0 24px rgba(86,170,255,.05), 0 0 0 52px rgba(86,170,255,.03);\r\n  pointer-events: none;\r\n}\r\n#rtape .stg .rt-card:nth-child(2) { transition-delay: .06s; }\r\n#rtape .stg .rt-card:nth-child(3) { transition-delay: .12s; }\r\n#rtape .stg .rt-card:nth-child(4) { transition-delay: .18s; }\r\n#rtape .stg .rt-card:nth-child(5) { transition-delay: .24s; }\r\n\r\n#rtape .rt-panel-2 {\r\n  background:\r\n    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(30,80,180,.55) 0%, transparent 55%),\r\n    radial-gradient(ellipse 60% 55% at 0% 100%, rgba(15,50,130,.45) 0%, transparent 55%),\r\n    radial-gradient(ellipse 50% 40% at 50% 45%, rgba(10,30,80,.3) 0%, transparent 60%),\r\n    linear-gradient(155deg, #071a3d 0%, #050e25 45%, #020810 100%);\r\n  display: flex; flex-direction: column;\r\n  padding: 44px clamp(28px, 4vw, 60px);\r\n}\r\n#rtape .rt-panel-2::before {\r\n  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;\r\n  background:\r\n    radial-gradient(circle 500px at 88% -8%, rgba(59,130,246,.22), transparent),\r\n    radial-gradient(circle 380px at -5% 95%, rgba(30,64,175,.18), transparent),\r\n    radial-gradient(circle 300px at 50% 50%, rgba(15,40,100,.12), transparent);\r\n}\r\n#rtape .rt-panel-2::after {\r\n  content: ''; position: absolute; top: -80px; right: -80px; width: 460px; height: 460px;\r\n  border-radius: 50%;\r\n  background: radial-gradient(circle, rgba(59,130,246,.18) 0%, rgba(30,80,200,.08) 45%, transparent 70%);\r\n  filter: blur(40px);\r\n  pointer-events: none; z-index: 0;\r\n}\r\n#rtape .rt-panel-2 .rt-p-head { position: relative; z-index: 2; }\r\n#rtape .rt-panel-2 .rt-sec-tag { color: rgba(100,195,255,.8); }\r\n#rtape .rt-panel-2 .rt-sec-title { color: #f0f7ff; }\r\n#rtape .rt-panel-2 .rt-sec-sub { color: rgba(160,195,230,.6); }\r\n#rtape .rt-proj-grid {\r\n  position: relative; z-index: 2;\r\n  display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px;\r\n  flex: 1; align-content: center;\r\n}\r\n#rtape .rt-proj-card {\r\n  position: relative; overflow: hidden;\r\n  display: flex; align-items: center; gap: 13px;\r\n  padding: 16px 18px 16px 18px;\r\n  background: rgba(255,255,255,.05);\r\n  border: 1px solid rgba(147,197,253,.1);\r\n  border-radius: 16px;\r\n  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\r\n  transition: transform .35s cubic-bezier(.22,1,.36,1), background .35s, border-color .35s;\r\n  cursor: default;\r\n}\r\n#rtape .rt-proj-card:hover {\r\n  transform: translateY(-4px);\r\n  background: rgba(255,255,255,.1);\r\n  border-color: rgba(147,197,253,.3);\r\n}\r\n#rtape .rt-proj-card::before {\r\n  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;\r\n  border-radius: 0 3px 3px 0;\r\n  background: linear-gradient(180deg, var(--blue), var(--sky));\r\n  opacity: 0; transition: opacity .35s;\r\n}\r\n#rtape .rt-proj-card:hover::before { opacity: 1; }\r\n#rtape .rt-proj-num {\r\n  position: absolute; top: 7px; right: 10px;\r\n  font-family: 'JetBrains Mono', monospace; font-size: 9px;\r\n  color: rgba(100,195,255,.45); letter-spacing: .06em;\r\n}\r\n#rtape .rt-proj-icon {\r\n  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;\r\n  background: linear-gradient(135deg, var(--blue), var(--deep-blue));\r\n  display: flex; align-items: center; justify-content: center;\r\n  box-shadow: 0 4px 14px rgba(59,130,246,.32);\r\n}\r\n#rtape .rt-proj-icon svg { width: 16px; height: 16px; color: #fff; }\r\n#rtape .rt-proj-name {\r\n  font-family: 'Space Grotesk', sans-serif; font-size: .87rem; font-weight: 600;\r\n  color: rgba(235,248,255,.9); line-height: 1.25;\r\n}\r\n#rtape .rt-proj-tag { font-size: .68rem; color: rgba(100,195,255,.6); font-weight: 500; margin-top: 2px; }\r\n#rtape .rt-proj-cta {\r\n  position: relative; z-index: 2; margin-top: 16px; flex-shrink: 0;\r\n  display: flex; align-items: center; justify-content: space-between; gap: 16px;\r\n  padding: 14px 22px;\r\n  background: rgba(255,255,255,.05); border: 1px solid rgba(147,197,253,.14);\r\n  border-radius: 14px;\r\n}\r\n#rtape .rt-proj-cta p {\r\n  font-family: 'DM Sans', sans-serif; font-size: .87rem;\r\n  color: rgba(170,205,240,.62); margin: 0;\r\n}\r\n#rtape .rt-proj-cta p strong { color: rgba(230,248,255,.85); font-weight: 600; }\r\n#rtape .rt-cta-badge {\r\n  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;\r\n  padding: 10px 22px; border-radius: 100px; color: #fff;\r\n  background: linear-gradient(135deg, var(--blue), var(--deep-blue));\r\n  font-family: 'Space Grotesk', sans-serif; font-size: .82rem; font-weight: 600;\r\n  letter-spacing: .03em; text-decoration: none;\r\n  box-shadow: 0 8px 26px rgba(59,130,246,.38);\r\n  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s;\r\n}\r\n#rtape .rt-cta-badge:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(59,130,246,.48); }\r\n#rtape .rv {\r\n  opacity: 0; transform: translateY(28px);\r\n  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);\r\n}\r\n#rtape .rv.vis { opacity: 1; transform: translateY(0); }\r\n\r\n@media (max-width: 1100px) {\r\n  #rtape .rt-panel { width: 95%; height: 88vh; border-radius: 22px; }\r\n  #rtape .rt-panel-0 { grid-template-columns: 48% 1fr; }\r\n  #rtape .headline-intro { font-size: clamp(2rem, 4.5vw, 3.2rem); }\r\n  #rtape .rt-c7, #rtape .rt-c5 { grid-column: span 6; }\r\n  #rtape .rt-c4 { grid-column: span 6; }\r\n  #rtape .rt-proj-grid { grid-template-columns: repeat(2, 1fr); }\r\n}\r\n@media (max-width: 900px) {\r\n  #rtape .rt-stack {\r\n    height: auto !important;\r\n    display: flex !important;\r\n    flex-direction: column !important;\r\n    gap: 12px;\r\n    padding: 20px 14px 32px;\r\n  }\r\n  #rtape .rt-slot { position: static !important; height: auto !important; z-index: auto !important; }\r\n  #rtape .rt-panel { width: 100% !important; height: auto !important; border-radius: 20px; }\r\n  #rtape .rt-slot:nth-child(1) .rt-panel,\r\n  #rtape .rt-slot:nth-child(2) .rt-panel,\r\n  #rtape .rt-slot:nth-child(3) .rt-panel { margin-top: 0 !important; }\r\n  #rtape .stage { display: none !important; }\r\n  #rtape .rt-panel-0 { grid-template-columns: 1fr !important; grid-template-rows: auto !important; align-items: start !important; }\r\n  #rtape .rt-hero-left { height: auto !important; padding: 32px 24px 54px; }\r\n  #rtape .headline-intro { font-size: clamp(2rem, 7vw, 2.8rem); }\r\n  #rtape .lede-intro { max-width: 100%; font-size: .95rem; }\r\n  #rtape .metrics { margin-top: 28px !important; flex-wrap: wrap; }\r\n  #rtape .metric { min-width: 90px; }\r\n  #rtape .rt-panel-1 { padding: 32px 20px; }\r\n  #rtape .rt-bento { display: flex !important; flex-direction: column !important; flex: none !important; gap: 10px; }\r\n  #rtape .rt-panel-2 { padding: 32px 20px; }\r\n  #rtape .rt-proj-grid { grid-template-columns: 1fr !important; flex: none !important; gap: 8px; align-content: start !important; }\r\n  #rtape .rt-proj-cta { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 12px; }\r\n  #rtape .rv { opacity: 1 !important; transform: none !important; }\r\n}\r\n@media (max-width: 600px) {\r\n  \/* \u2500\u2500 Robotics (rtape) mobile rebuild \u2500\u2500 *\/\r\n  #rtape .rt-stack { padding: 12px 10px 24px; gap: 10px; }\r\n  #rtape .rt-panel { border-radius: 16px; }\r\n\r\n  \/* Panel 0: hero \u2014 compact, hide aurora blobs *\/\r\n  #rtape .aurora { display: none; }\r\n  #rtape .rt-hero-left { padding: 28px 18px 44px; }\r\n  #rtape .headline-intro { font-size: clamp(1.6rem, 8vw, 2.1rem); margin-bottom: 10px; }\r\n  #rtape .lede-intro { font-size: .88rem; line-height: 1.6; }\r\n  #rtape .metrics { gap: 0; margin-top: 22px !important; }\r\n  #rtape .metric { min-width: 80px; padding: 10px 12px 14px 0; }\r\n  #rtape .metric-val { font-size: 1.5rem; }\r\n  #rtape .metric-label { font-size: .68rem; }\r\n\r\n  \/* Panel 1: bento \u2014 big card full width, 4 small cards in 2\u00d72 grid *\/\r\n  #rtape .rt-panel-1 { padding: 26px 16px; }\r\n  #rtape .rt-p-head { flex-direction: column; gap: 8px; margin-bottom: 18px; }\r\n  #rtape .rt-sec-title { font-size: clamp(1.2rem, 5vw, 1.5rem); }\r\n  #rtape .rt-bento {\r\n    display: grid !important;\r\n    flex-direction: unset !important;\r\n    grid-template-columns: 1fr 1fr !important;\r\n    gap: 8px !important;\r\n  }\r\n  #rtape .rt-c7 { grid-column: 1 \/ -1; }\r\n  #rtape .rt-c5 { grid-column: 1 \/ -1; }\r\n  #rtape .rt-c4 { grid-column: span 1; }\r\n  #rtape .rt-card { padding: 16px 14px; }\r\n  #rtape .rt-card-icon { width: 34px; height: 34px; margin-bottom: 10px; }\r\n  #rtape .rt-card-title { font-size: .82rem; }\r\n  #rtape .rt-card-desc { font-size: .75rem; line-height: 1.6; }\r\n\r\n  \/* Panel 2: projects \u2014 2-col grid *\/\r\n  #rtape .rt-panel-2 { padding: 26px 16px; }\r\n  #rtape .rt-proj-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }\r\n  #rtape .rt-proj-card { padding: 14px 12px; gap: 10px; }\r\n  #rtape .rt-proj-icon { width: 32px; height: 32px; }\r\n  #rtape .rt-proj-name { font-size: .82rem; }\r\n  #rtape .rt-proj-tag { font-size: .64rem; }\r\n  #rtape .rt-proj-cta { padding: 14px 0 0; }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  #rtape .rt-stack { padding: 10px 8px 20px; }\r\n  #rtape .rt-proj-grid { grid-template-columns: 1fr !important; }\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   CAPABILITIES v3 \u2014 INTERACTIVE CARD GRID\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@keyframes cap3BgMove { from{background-position:0 0,0 0,center,center} to{background-position:180px 180px,-180px 120px,center,center} }\r\n.cap3-section { position:relative;z-index:1;background:var(--navy);padding:80px clamp(20px,5vw,64px) 100px;overflow:hidden; }\r\n.cap3-section::before { content:\"\";position:absolute;top:0;left:0;right:0;height:1px;z-index:3;background:linear-gradient(90deg,transparent,rgba(59,130,246,.45),transparent); }\r\n.cap3-section::after { content:\"\";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(115deg,rgba(59,130,246,.07) 1px,transparent 1px),linear-gradient(25deg,rgba(96,165,250,.05) 1px,transparent 1px),radial-gradient(ellipse 60% 70% at 10% 50%,rgba(30,64,175,.3),transparent 60%),radial-gradient(ellipse 50% 60% at 90% 40%,rgba(59,130,246,.14),transparent 60%);background-size:90px 90px,130px 130px,100% 100%,100% 100%;animation:cap3BgMove 18s linear infinite; }\r\n.cap3-header { display:flex;flex-direction:column;align-items:flex-start;margin-bottom:48px;position:relative;z-index:2; }\r\n.cap3-header .eco-label { margin-bottom:0; }\r\n.cap3-heading { font-family:'Syne',sans-serif;font-size:clamp(34px,4.2vw,58px);font-weight:800;line-height:.95;color:#fff;text-transform:uppercase;letter-spacing:-0.02em;margin:10px 0 14px; }\r\n.cap3-heading .hl { color:var(--sky); }\r\n.cap3-sub { font-size:15px;color:rgba(255,255,255,.46);line-height:1.7;max-width:520px;margin:0; }\r\n.cap3-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative;z-index:2; }\r\n.cap3-card { position:relative;border-radius:18px;cursor:pointer;opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1); }\r\n.cap3-card.is-in { opacity:1;transform:translateY(0); }\r\n.cap3-shadow { position:absolute;bottom:-14px;left:10px;right:10px;z-index:0;overflow:hidden;border-radius:18px;filter:blur(22px);opacity:0;transition:opacity .4s ease,transform .4s ease;transform:translateY(4px) scale(.96);pointer-events:none; }\r\n.cap3-shadow-img { width:100%;display:block;object-fit:cover;aspect-ratio:3\/4;opacity:.6; }\r\n.cap3-card:hover .cap3-shadow,\r\n.cap3-card.is-hovered .cap3-shadow { opacity:.55;transform:translateY(0) scale(1); }\r\n.cap3-inner { position:relative;z-index:1;border-radius:18px;overflow:hidden;background:var(--navy-2);border:1px solid rgba(255,255,255,.08);transition:box-shadow .35s ease,transform .44s cubic-bezier(.16,1,.3,1),border-color .3s ease; }\r\n.cap3-card:hover .cap3-inner,\r\n.cap3-card.is-hovered .cap3-inner { box-shadow:0 24px 60px rgba(0,0,0,.65);transform:translateY(-6px);border-color:rgba(59,130,246,.35); }\r\n.cap3-img { display:block;width:100%;aspect-ratio:3\/4;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1); }\r\n.cap3-card:hover .cap3-img,\r\n.cap3-card.is-hovered .cap3-img { transform:scale(1.08); }\r\n.cap3-inner::before { content:\"\";position:absolute;bottom:0;left:0;right:0;height:55%;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(7,26,61,.92) 0%,rgba(7,26,61,.46) 55%,transparent 100%);transition:opacity .35s ease; }\r\n.cap3-card:hover .cap3-inner::before,\r\n.cap3-card.is-hovered .cap3-inner::before { opacity:0; }\r\n.cap3-badge { position:absolute;top:12px;left:14px;z-index:5;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;color:rgba(147,197,253,.82);background:rgba(7,26,61,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:4px 9px;border-radius:6px;border:1px solid rgba(147,197,253,.2);transition:opacity .28s ease,transform .28s ease; }\r\n.cap3-card:hover .cap3-badge,\r\n.cap3-card.is-hovered .cap3-badge { opacity:0;transform:translateY(-6px); }\r\n.cap3-title-rest { position:absolute;bottom:14px;left:14px;right:14px;z-index:3;font-family:'Syne',sans-serif;font-size:clamp(11px,.9vw,13px);font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;transition:opacity .28s ease,transform .32s ease; }\r\n.cap3-card:hover .cap3-title-rest,\r\n.cap3-card.is-hovered .cap3-title-rest { opacity:0;transform:translateY(8px); }\r\n.cap3-overlay { position:absolute;bottom:0;left:0;right:0;z-index:6;padding:20px 16px 18px;background:linear-gradient(to top,rgba(7,26,61,.98) 0%,rgba(15,23,42,.96) 62%,rgba(15,23,42,.8) 100%);clip-path:inset(100% 0 0 0);will-change:clip-path;transition:clip-path .48s cubic-bezier(.16,1,.3,1); }\r\n.cap3-card:hover .cap3-overlay,\r\n.cap3-card.is-hovered .cap3-overlay { clip-path:inset(0% 0 0 0); }\r\n.cap3-ov-num { display:block;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2.5px;color:rgba(147,197,253,.65);margin-bottom:6px; }\r\n.cap3-ov-title { font-family:'Syne',sans-serif;font-size:clamp(12px,.95vw,14px);font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.03em;line-height:1.2;margin:0 0 9px; }\r\n.cap3-ov-desc { font-size:11px;color:rgba(255,255,255,.5);line-height:1.62;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; }\r\n.cap3-inner::after { content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;z-index:7;background:linear-gradient(90deg,var(--blue),var(--sky));transform:scaleX(0);transition:transform .42s cubic-bezier(.22,1,.36,1); }\r\n.cap3-card:hover .cap3-inner::after,\r\n.cap3-card.is-hovered .cap3-inner::after { transform:scaleX(1); }\r\n.cap3-glow { position:absolute;inset:0;border-radius:inherit;opacity:0;background:radial-gradient(circle 150px at var(--x,50%) var(--y,50%),rgba(59,130,246,.25),transparent 70%);transition:opacity .3s ease;pointer-events:none;z-index:8; }\r\n.cap3-card:hover .cap3-glow,\r\n.cap3-card.is-hovered .cap3-glow { opacity:1; }\r\n@media(max-width:1200px) { .cap3-grid { grid-template-columns:repeat(4,1fr); } }\r\n@media(max-width:960px) { .cap3-grid { grid-template-columns:repeat(3,1fr);gap:12px; } .cap3-section { padding:64px clamp(20px,4vw,48px) 80px; } }\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   CAPABILITIES \u2014 COMPACT MOBILE\r\n   Smaller everything: tighter padding, shorter\r\n   1:1 cards, smaller type, and the blurred\r\n   drop-shadow layer removed (GPU cost + can\r\n   bleed past the card edge on small screens).\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media(max-width:600px) {\r\n  .cap3-section { padding: 44px 16px 56px; }\r\n  .cap3-header { margin-bottom: 26px; }\r\n  .cap3-heading { font-size: clamp(20px, 6.5vw, 26px); margin: 8px 0 8px; }\r\n  .cap3-sub { font-size: 13px; line-height: 1.6; }\r\n  .cap3-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }\r\n  .cap3-card { border-radius: 14px; }\r\n  .cap3-inner { border-radius: 14px; }\r\n  .cap3-img, .cap3-shadow-img { aspect-ratio: 1\/1; }\r\n  .cap3-shadow { display: none; }\r\n  .cap3-badge { top: 8px; left: 10px; font-size: 8px; padding: 3px 7px; letter-spacing: 1.5px; }\r\n  .cap3-title-rest { bottom: 10px; left: 10px; right: 10px; font-size: 10px; }\r\n  .cap3-overlay { padding: 12px 11px 11px; }\r\n  .cap3-ov-num { font-size: 8px; margin-bottom: 4px; }\r\n  .cap3-ov-title { font-size: 11px; margin-bottom: 6px; }\r\n  .cap3-ov-desc { font-size: 10px; line-height: 1.55; -webkit-line-clamp: 3; }\r\n}\r\n@media(max-width:380px) {\r\n  \/* stays 2-up (a single huge column defeats \"smaller\") *\/\r\n  .cap3-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }\r\n  .cap3-section { padding: 40px 12px 48px; }\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   PAGE CTA \u2014 final 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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n.uig-page-cta {\r\n  position: relative;\r\n  padding: 160px 24px 140px;\r\n  text-align: center;\r\n  overflow: hidden;\r\n  background:\r\n    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(37,99,235,.55), transparent 60%),\r\n    radial-gradient(ellipse 60% 70% at 85% 30%, rgba(99,102,241,.38), transparent 55%),\r\n    radial-gradient(ellipse 50% 80% at 50% 100%, rgba(14,165,233,.28), transparent 60%),\r\n    linear-gradient(145deg, #f8fbff 0%, #eff6ff 35%, #dbeafe 65%, #e0e7ff 100%);\r\n}\r\n.uig-page-cta::before {\r\n  content: '';\r\n  position: absolute; inset: 0; pointer-events: none;\r\n  background-image:\r\n    linear-gradient(115deg, rgba(30,64,175,.05) 1px, transparent 1px),\r\n    linear-gradient(25deg, rgba(96,165,250,.04) 1px, transparent 1px);\r\n  background-size: 80px 80px, 120px 120px;\r\n}\r\n.uig-page-cta-orb {\r\n  position: absolute; border-radius: 50%; pointer-events: none;\r\n}\r\n.uig-page-cta-orb-a {\r\n  width: 600px; height: 600px;\r\n  top: -200px; left: -100px;\r\n  background: radial-gradient(circle, rgba(59,130,246,.18), transparent 70%);\r\n  filter: blur(60px);\r\n}\r\n.uig-page-cta-orb-b {\r\n  width: 500px; height: 500px;\r\n  bottom: -180px; right: -80px;\r\n  background: radial-gradient(circle, rgba(99,102,241,.15), transparent 70%);\r\n  filter: blur(60px);\r\n}\r\n.uig-page-cta-inner {\r\n  position: relative; z-index: 2;\r\n  max-width: 720px; margin: 0 auto;\r\n}\r\n.uig-page-cta-label {\r\n  display: inline-flex; align-items: center; gap: 8px;\r\n  padding: 7px 18px; border-radius: 999px;\r\n  background: rgba(30,64,175,.08); border: 1px solid rgba(30,64,175,.22);\r\n  color: var(--deep-blue); font-family: 'DM Mono', monospace;\r\n  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;\r\n  margin-bottom: 28px;\r\n}\r\n.uig-page-cta-label::before {\r\n  content: ''; width: 6px; height: 6px; border-radius: 50%;\r\n  background: var(--blue); flex-shrink: 0;\r\n  animation: eco-pulse-dot 2s ease infinite;\r\n}\r\n.uig-page-cta h2 {\r\n  font-family: 'Syne', sans-serif;\r\n  font-size: clamp(36px, 5.5vw, 72px);\r\n  font-weight: 800; line-height: 1.04;\r\n  letter-spacing: -0.03em;\r\n  color: var(--navy);\r\n  margin-bottom: 20px;\r\n}\r\n.uig-page-cta h2 em {\r\n  font-style: normal;\r\n  background: linear-gradient(135deg, var(--deep-blue) 0%, var(--blue) 60%, #6366f1 100%);\r\n  -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n}\r\n.uig-page-cta p {\r\n  font-size: 17px; color: var(--muted);\r\n  font-weight: 400; line-height: 1.7;\r\n  max-width: 460px; margin: 0 auto 40px;\r\n}\r\n.uig-page-cta-btn {\r\n  display: inline-flex; align-items: center; gap: 10px;\r\n  font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 700;\r\n  color: #fff;\r\n  background: linear-gradient(135deg, var(--deep-blue), var(--blue));\r\n  padding: 18px 44px; border-radius: 100px; text-decoration: none;\r\n  box-shadow: 0 20px 60px rgba(30,64,175,.32), 0 0 0 1px rgba(30,64,175,.18);\r\n  transition: transform .3s, box-shadow .3s;\r\n  letter-spacing: .04em;\r\n}\r\n.uig-page-cta-btn:hover {\r\n  transform: translateY(-3px);\r\n  box-shadow: 0 32px 80px rgba(30,64,175,.44), 0 0 0 1px rgba(30,64,175,.24);\r\n}\r\n.uig-page-cta-btn svg { transition: transform .3s; }\r\n.uig-page-cta-btn:hover svg { transform: translateX(5px); }\r\n\r\n@media (max-width: 600px) {\r\n  .uig-page-cta { padding: 96px 20px 84px; }\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   2026 VISUAL POLISH \u2014 HERO + ENGINEERING EXCELLENCE\r\n   Hero: cinematic precision \/ blueprint stage\r\n   Engineering Excellence: light technical workspace\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n\/* \u2500\u2500 HERO: make this the primary brand moment \u2500\u2500 *\/\r\n.uig-hero {\r\n  min-height: 88vh;\r\n  isolation: isolate;\r\n  background:\r\n    radial-gradient(circle at 50% 42%, rgba(59,130,246,.18) 0%, rgba(59,130,246,.07) 18%, transparent 38%),\r\n    radial-gradient(circle at 84% 18%, rgba(30,64,175,.18) 0%, transparent 28%),\r\n    radial-gradient(circle at 12% 72%, rgba(14,165,233,.10) 0%, transparent 26%),\r\n    linear-gradient(180deg, #020712 0%, #06142b 54%, #0a2148 100%);\r\n}\r\n\r\n\/* subtle blueprint dots + central vertical datum *\/\r\n.uig-hero::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 0;\r\n  pointer-events: none;\r\n  background-image:\r\n    radial-gradient(circle, rgba(147,197,253,.18) 1px, transparent 1.4px),\r\n    linear-gradient(90deg, transparent calc(50% - .5px), rgba(147,197,253,.10) 50%, transparent calc(50% + .5px));\r\n  background-size: 28px 28px, 100% 100%;\r\n  -webkit-mask-image: radial-gradient(ellipse 74% 64% at 50% 46%, #000 0%, rgba(0,0,0,.78) 46%, transparent 84%);\r\n  mask-image: radial-gradient(ellipse 74% 64% at 50% 46%, #000 0%, rgba(0,0,0,.78) 46%, transparent 84%);\r\n  opacity: .52;\r\n}\r\n\r\n\/* controlled fade into the light Engineering section *\/\r\n.uig-hero::after {\r\n  content: '';\r\n  position: absolute;\r\n  left: 0; right: 0; bottom: -1px;\r\n  height: 150px;\r\n  z-index: 5;\r\n  pointer-events: none;\r\n  background: linear-gradient(180deg, transparent 0%, rgba(247,251,255,.08) 52%, #f7fbff 100%);\r\n}\r\n\r\n\/* perspective floor grid instead of a full-screen moving checkerboard *\/\r\n.uig-hero-grid {\r\n  inset: auto -18% -22%;\r\n  height: 66%;\r\n  opacity: .34;\r\n  background-image:\r\n    linear-gradient(rgba(147,197,253,.20) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(147,197,253,.20) 1px, transparent 1px);\r\n  background-size: 56px 56px;\r\n  transform-origin: 50% 100%;\r\n  transform: perspective(520px) rotateX(63deg) scale(1.45);\r\n  -webkit-mask-image: linear-gradient(to top, #000 12%, rgba(0,0,0,.86) 45%, transparent 92%);\r\n  mask-image: linear-gradient(to top, #000 12%, rgba(0,0,0,.86) 45%, transparent 92%);\r\n  animation: uigHeroFloor 18s linear infinite;\r\n}\r\n\r\n@keyframes uigHeroFloor {\r\n  from { background-position: 0 0, 0 0; }\r\n  to   { background-position: 0 56px, 56px 0; }\r\n}\r\n\r\n\/* keep particles, but make them atmospheric rather than the main effect *\/\r\n#uig-particles {\r\n  z-index: 1;\r\n  opacity: .20;\r\n  mix-blend-mode: screen;\r\n  -webkit-mask-image: radial-gradient(ellipse 58% 56% at 50% 44%, #000 0%, transparent 86%);\r\n  mask-image: radial-gradient(ellipse 58% 56% at 50% 44%, #000 0%, transparent 86%);\r\n}\r\n\r\n\/* transform old blur-orbs into large technical rings *\/\r\n.uig-orb {\r\n  z-index: 1;\r\n  filter: none;\r\n  background: transparent !important;\r\n  border: 1px solid rgba(147,197,253,.12);\r\n  opacity: .62;\r\n  animation: uigRingFloat 10s ease-in-out infinite alternate;\r\n}\r\n.uig-orb::before,\r\n.uig-orb::after {\r\n  content: '';\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  border: 1px solid rgba(147,197,253,.08);\r\n}\r\n.uig-orb::before { inset: 11%; }\r\n.uig-orb::after  { inset: 24%; }\r\n.uig-orb-1 {\r\n  width: 720px; height: 720px;\r\n  top: -390px; left: -300px;\r\n  box-shadow: 0 0 120px rgba(59,130,246,.08), inset 0 0 90px rgba(59,130,246,.05);\r\n}\r\n.uig-orb-2 {\r\n  width: 620px; height: 620px;\r\n  top: 8%; right: -380px;\r\n  animation-delay: -3s;\r\n  box-shadow: 0 0 110px rgba(59,130,246,.07), inset 0 0 80px rgba(59,130,246,.04);\r\n}\r\n.uig-orb-3 {\r\n  width: 260px; height: 260px;\r\n  bottom: 6%; left: calc(50% - 130px);\r\n  animation-delay: -6s;\r\n  opacity: .34;\r\n}\r\n@keyframes uigRingFloat {\r\n  from { transform: translate3d(0,0,0) rotate(0deg); }\r\n  to   { transform: translate3d(18px,-16px,0) rotate(4deg); }\r\n}\r\n\r\n\/* precision light datum behind the headline *\/\r\n.uig-hero-line {\r\n  z-index: 2;\r\n  width: min(760px, 74vw);\r\n  height: 1px;\r\n  left: 50%; top: 51%;\r\n  transform: translateX(-50%);\r\n  opacity: .52;\r\n  background: linear-gradient(90deg, transparent, rgba(147,197,253,.18) 18%, rgba(147,197,253,.92) 50%, rgba(147,197,253,.18) 82%, transparent);\r\n  box-shadow: 0 0 34px rgba(59,130,246,.35);\r\n}\r\n\r\n.uig-hero-content {\r\n  z-index: 10;\r\n  max-width: 1040px;\r\n  padding: 20px 24px 90px;\r\n}\r\n\r\n.uig-hero-content .eco-label {\r\n  margin-bottom: 24px;\r\n  background: rgba(7,26,61,.42);\r\n  border-color: rgba(147,197,253,.30);\r\n  color: rgba(219,234,254,.90);\r\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 12px 40px rgba(0,0,0,.16);\r\n  backdrop-filter: blur(14px);\r\n  -webkit-backdrop-filter: blur(14px);\r\n}\r\n\r\n.uig-hero-title {\r\n  font-size: clamp(48px, 6.6vw, 92px);\r\n  line-height: .97;\r\n  letter-spacing: -.045em;\r\n  text-shadow: 0 10px 54px rgba(0,0,0,.22);\r\n}\r\n\r\n.uig-hero-title em {\r\n  background: linear-gradient(110deg, #ffffff 0%, #bfdbfe 24%, #60a5fa 54%, #dbeafe 82%, #ffffff 100%);\r\n  background-size: 180% 100%;\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  animation: uigHeroTitleSheen 8s ease-in-out infinite alternate;\r\n}\r\n\r\n@keyframes uigHeroTitleSheen {\r\n  from { background-position: 0% 50%; }\r\n  to   { background-position: 100% 50%; }\r\n}\r\n\r\n.uig-hero-sub {\r\n  max-width: 650px;\r\n  margin-top: 30px;\r\n  font-size: clamp(15px, 1.25vw, 18px);\r\n  color: rgba(219,234,254,.70);\r\n  font-weight: 400;\r\n  line-height: 1.75;\r\n}\r\n\r\n\/* \u2500\u2500 ENGINEERING EXCELLENCE: a distinct technical workspace \u2500\u2500 *\/\r\n.uig-solutions {\r\n  background:\r\n    radial-gradient(circle 760px at 92% 8%, rgba(147,197,253,.22), transparent 62%),\r\n    radial-gradient(circle 620px at 2% 50%, rgba(219,234,254,.72), transparent 66%),\r\n    linear-gradient(180deg, #f7fbff 0%, #eef5ff 54%, #f8fbff 100%);\r\n  padding-bottom: 128px;\r\n}\r\n\r\n.uig-sol-bg-grid {\r\n  opacity: .65;\r\n  background-image:\r\n    linear-gradient(rgba(30,64,175,.045) 1px, transparent 1px),\r\n    linear-gradient(90deg, rgba(30,64,175,.045) 1px, transparent 1px);\r\n  background-size: 72px 72px;\r\n  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.65) 56%, transparent 100%);\r\n  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.65) 56%, transparent 100%);\r\n}\r\n\r\n.uig-sol-orb-a,\r\n.uig-sol-orb-b {\r\n  filter: blur(12px);\r\n  opacity: .42;\r\n}\r\n.uig-sol-orb-a {\r\n  background: radial-gradient(circle, rgba(147,197,253,.42), transparent 68%);\r\n}\r\n.uig-sol-orb-b {\r\n  background: radial-gradient(circle, rgba(219,234,254,.78), transparent 68%);\r\n}\r\n\r\n.uig-sol-ray {\r\n  width: 1px;\r\n  background: linear-gradient(180deg, transparent, rgba(30,64,175,.10) 40%, transparent);\r\n}\r\n\r\n\/* no second centered hero \u2014 align process heading to the content grid *\/\r\n.uig-sol-header {\r\n  max-width: 1340px;\r\n  margin: 0 auto;\r\n  text-align: left;\r\n  padding: 116px 40px 54px;\r\n}\r\n\r\n.uig-sol-header .eco-label {\r\n  background: rgba(255,255,255,.72);\r\n  border-color: rgba(59,130,246,.20);\r\n  color: var(--deep-blue);\r\n  box-shadow: 0 12px 34px rgba(30,64,175,.08);\r\n  backdrop-filter: blur(12px);\r\n  -webkit-backdrop-filter: blur(12px);\r\n}\r\n.uig-sol-header .eco-label::before { background: var(--blue); }\r\n\r\n.uig-sol-title {\r\n  max-width: 780px;\r\n  font-size: clamp(40px, 5vw, 66px);\r\n  line-height: 1.00;\r\n  letter-spacing: -.04em;\r\n  color: var(--navy);\r\n}\r\n.uig-sol-title span {\r\n  background: linear-gradient(120deg, #1e40af 0%, #3b82f6 58%, #60a5fa 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n}\r\n\r\n.uig-sol-desc {\r\n  max-width: 700px;\r\n  margin: 22px 0 0;\r\n  color: #64748b;\r\n  font-size: 16px;\r\n  font-weight: 400;\r\n  line-height: 1.75;\r\n}\r\n\r\n\/* process navigator becomes crisp and editorial on light background *\/\r\n.ps-wrap {\r\n  gap: 64px;\r\n}\r\n.ps-btn {\r\n  padding: 19px 18px 19px 24px;\r\n  border-left-color: rgba(30,64,175,.13);\r\n  border-radius: 0 14px 14px 0;\r\n  opacity: .60;\r\n}\r\n.ps-btn.ps-active {\r\n  opacity: 1;\r\n  border-left-color: var(--blue);\r\n  background: linear-gradient(90deg, rgba(59,130,246,.09), rgba(255,255,255,.58));\r\n}\r\n.ps-btn:hover:not(.ps-active) {\r\n  opacity: .82;\r\n  border-left-color: rgba(59,130,246,.38);\r\n  background: rgba(255,255,255,.38);\r\n}\r\n.ps-btn-num { color: var(--deep-blue); }\r\n.ps-btn-title { color: var(--navy); }\r\n.ps-btn-desc { color: #64748b; }\r\n.ps-progress-bar { background: rgba(30,64,175,.10); }\r\n.ps-progress-fill { background: linear-gradient(90deg, var(--deep-blue), var(--blue)); }\r\n\r\n\/* keep the actual process imagery cinematic so it contrasts with the workspace *\/\r\n.ps-content {\r\n  min-height: 470px;\r\n  border: 1px solid rgba(30,64,175,.12);\r\n  border-radius: 24px;\r\n  background: #071a3d;\r\n  box-shadow: 0 28px 80px rgba(30,64,175,.16), 0 3px 14px rgba(15,23,42,.08);\r\n}\r\n.ps-slide-img img { filter: brightness(.67) saturate(.82) contrast(1.03); }\r\n.ps-slide-img::after {\r\n  background: linear-gradient(\r\n    to top,\r\n    rgba(5,18,43,.98) 0%,\r\n    rgba(7,26,61,.72) 42%,\r\n    rgba(7,26,61,.20) 72%,\r\n    rgba(7,26,61,.03) 100%\r\n  );\r\n}\r\n.ps-slide-step-badge {\r\n  background: rgba(7,26,61,.52);\r\n  border-color: rgba(191,219,254,.34);\r\n  box-shadow: 0 8px 28px rgba(0,0,0,.18);\r\n}\r\n.ps-slide-icon {\r\n  background: rgba(59,130,246,.22);\r\n  border-color: rgba(191,219,254,.28);\r\n  box-shadow: 0 10px 28px rgba(0,0,0,.16);\r\n}\r\n\r\n\/* stats now belong to the light process section rather than another dark panel *\/\r\n.uig-sol-stats {\r\n  gap: 0;\r\n  margin-top: 72px;\r\n  border-color: rgba(30,64,175,.12);\r\n  background: rgba(255,255,255,.58);\r\n  box-shadow: 0 20px 60px rgba(30,64,175,.08);\r\n  backdrop-filter: blur(14px);\r\n  -webkit-backdrop-filter: blur(14px);\r\n}\r\n.uig-stat {\r\n  background: rgba(255,255,255,.42);\r\n  border-right-color: rgba(30,64,175,.10);\r\n}\r\n.uig-stat:hover { background: rgba(255,255,255,.78); }\r\n.uig-stat-num {\r\n  background: linear-gradient(135deg, var(--navy), var(--deep-blue) 62%, var(--blue));\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n}\r\n.uig-stat-label { color: #64748b; }\r\n.uig-stat::before {\r\n  background: linear-gradient(90deg, transparent, var(--blue), transparent);\r\n}\r\n\r\n\/* mobile\/tablet polish *\/\r\n@media (max-width: 900px) {\r\n  .uig-hero { min-height: 82vh; }\r\n  .uig-hero::after { height: 110px; }\r\n  .uig-hero-grid {\r\n    height: 54%;\r\n    inset: auto -38% -18%;\r\n    opacity: .24;\r\n  }\r\n  .uig-orb-1 { width: 480px; height: 480px; top: -250px; left: -270px; }\r\n  .uig-orb-2 { width: 420px; height: 420px; right: -290px; top: 12%; }\r\n  .uig-orb-3 { display: none; }\r\n  .uig-hero-content { padding: 30px 20px 80px; }\r\n  .uig-hero-title { font-size: clamp(44px, 12vw, 68px); }\r\n  .uig-hero-sub { max-width: 560px; margin-top: 22px; }\r\n\r\n  .uig-sol-header {\r\n    text-align: left;\r\n    padding: 82px 18px 38px;\r\n  }\r\n  .uig-sol-title { font-size: clamp(36px, 9vw, 54px); }\r\n  .uig-sol-desc { margin-top: 18px; font-size: 14px; }\r\n\r\n  .ps-wrap { gap: 14px; }\r\n  .ps-btn {\r\n    padding: 12px 2px 16px;\r\n    border: 1px solid rgba(30,64,175,.12);\r\n    background: rgba(255,255,255,.56);\r\n    opacity: .62;\r\n  }\r\n  .ps-btn.ps-active {\r\n    border-color: rgba(59,130,246,.60);\r\n    background: rgba(219,234,254,.84);\r\n  }\r\n  .ps-btn:hover:not(.ps-active) { background: rgba(255,255,255,.76); }\r\n  .ps-content { min-height: 0; border-radius: 18px; }\r\n  .uig-sol-stats {\r\n    margin-top: 56px;\r\n    border-color: rgba(30,64,175,.12);\r\n  }\r\n  .uig-stat { border-bottom-color: rgba(30,64,175,.10); }\r\n}\r\n\r\n@media (max-width: 540px) {\r\n  .uig-hero { min-height: 78vh; }\r\n  .uig-hero::before { background-size: 24px 24px, 100% 100%; opacity: .42; }\r\n  .uig-hero-line { width: 84vw; opacity: .40; }\r\n  .uig-hero-content { padding-bottom: 68px; }\r\n  .uig-hero-content .eco-label { margin-bottom: 20px; }\r\n  .uig-hero-title { font-size: clamp(40px, 13.2vw, 58px); }\r\n  .uig-hero-sub { font-size: 14px; line-height: 1.68; }\r\n\r\n  .uig-sol-header { padding: 72px 14px 34px; }\r\n  .uig-sol-title { font-size: clamp(34px, 10.5vw, 46px); }\r\n  .ps-content { border-radius: 16px; }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .uig-hero-grid,\r\n  .uig-orb,\r\n  .uig-hero-title em {\r\n    animation: none !important;\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   2026 SCROLL + UX PERFORMANCE POLISH\r\n   Native scrolling stays in control; heavy visual work is\r\n   composited efficiently and paused while off-screen.\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nhtml {\r\n  scroll-behavior: smooth;\r\n  scroll-padding-top: 20px;\r\n  scrollbar-gutter: stable;\r\n}\r\n\r\n\/* Do not override body touch\/overscroll globally.\r\n   WordPress\/Elementor and mobile browsers may use their own scroll root. *\/\r\n\r\n\/* Isolate the main visual sections so repaints do not spill across the page. *\/\r\n.uig-hero,\r\n.uig-solutions,\r\n#rtape,\r\n.cap3-section,\r\n.uig-page-cta {\r\n  isolation: isolate;\r\n}\r\n\r\n\/* Keep frequently animated \/ scroll-transformed layers on the compositor. *\/\r\n.uig-hero-grid,\r\n.uig-orb,\r\n.uig-hero-line,\r\n.uig-sol-orb-a,\r\n.uig-sol-orb-b,\r\n.uig-sol-ray,\r\n#rtape .rt-panel,\r\n.ps-slide,\r\n.ps-slide-img img,\r\n.cap3-inner,\r\n.cap3-img {\r\n  backface-visibility: hidden;\r\n  -webkit-backface-visibility: hidden;\r\n}\r\n\r\n\/* Progress bar uses transform instead of width to avoid layout work every frame. *\/\r\n.ps-progress-fill {\r\n  width: 100% !important;\r\n  transform: scaleX(0);\r\n  transform-origin: left center;\r\n  will-change: transform;\r\n}\r\n\r\n\/* More tactile, less abrupt Engineering slide change. *\/\r\n.ps-slide {\r\n  transform: translate3d(14px, 0, 0) scale(.994);\r\n  transition:\r\n    opacity .52s cubic-bezier(.22,1,.36,1),\r\n    transform .58s cubic-bezier(.22,1,.36,1);\r\n}\r\n.ps-slide.ps-active {\r\n  transform: translate3d(0,0,0) scale(1);\r\n  animation: none;\r\n}\r\n.ps-slide-img img {\r\n  will-change: transform;\r\n}\r\n\r\n\/* Avoid expensive live backdrop sampling inside the sticky RTAPE sequence.\r\n   The backgrounds are already opaque enough that the visual difference is tiny. *\/\r\n@media (min-width: 901px) {\r\n  #rtape .rt-card,\r\n  #rtape .rt-proj-card {\r\n    -webkit-backdrop-filter: none;\r\n    backdrop-filter: none;\r\n  }\r\n}\r\n\r\n\/* Let Chromium skip work for sections that are far outside the viewport. *\/\r\n.cap3-section,\r\n.uig-page-cta {\r\n  content-visibility: auto;\r\n  contain-intrinsic-size: 900px;\r\n}\r\n\r\n\/* CSS animations are paused by JS when their owning section is off-screen. *\/\r\n.uig-motion-paused .uig-hero-grid,\r\n.uig-motion-paused .uig-orb,\r\n.uig-motion-paused .uig-hero-title em,\r\n.uig-motion-paused .uig-sol-orb-a,\r\n.uig-motion-paused .uig-sol-orb-b,\r\n.uig-motion-paused .uig-sol-ray,\r\n.uig-motion-paused .aurora i,\r\n.uig-motion-paused .rt-marquee-track,\r\n.uig-motion-paused.cap3-section::after,\r\n.uig-motion-paused .uig-page-cta-label::before {\r\n  animation-play-state: paused !important;\r\n}\r\n\r\n\/* Focus feedback for keyboard users without changing mouse styling. *\/\r\n.page-nav-pip:focus-visible,\r\n.ps-btn:focus-visible,\r\n.uig-sol-btn:focus-visible,\r\n.uig-page-cta-btn:focus-visible,\r\n.rt-cta-badge:focus-visible {\r\n  outline: 3px solid rgba(59,130,246,.38);\r\n  outline-offset: 4px;\r\n}\r\n\r\n\/* Touch devices should not wait for hover-only effects. *\/\r\n@media (hover: none) {\r\n  .product-card:hover,\r\n  .uig-sol-step:hover .uig-step-inner,\r\n  .cap3-card:hover .cap3-inner,\r\n  .rt-card:hover,\r\n  .rt-proj-card:hover {\r\n    transform: none;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  html { scroll-behavior: auto; }\r\n  .ps-slide { transition: opacity .18s linear; transform: none; }\r\n}\r\n\r\n\r\n\/* \u2500\u2500 MOBILE NATIVE-SCROLL SAFETY \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   Keep the browser\/theme in full control of vertical touch scrolling.\r\n   This deliberately overrides any accidental scroll locks inherited\r\n   from Elementor containers, the theme, or desktop-only effects. *\/\r\n@media (max-width: 900px) {\r\n  html {\r\n    height: auto !important;\r\n    min-height: 100%;\r\n    overflow-y: auto !important;\r\n    overscroll-behavior-y: auto !important;\r\n    scrollbar-gutter: auto;\r\n    -webkit-overflow-scrolling: touch;\r\n  }\r\n\r\n  body {\r\n    height: auto !important;\r\n    min-height: 100%;\r\n    overflow-y: visible !important;\r\n    touch-action: auto !important;\r\n    overscroll-behavior-y: auto !important;\r\n    -webkit-overflow-scrolling: touch;\r\n  }\r\n\r\n  \/* Sticky card sequence is desktop-only. On touch layouts every\r\n     RTAPE panel participates in normal document flow. *\/\r\n  #rtape {\r\n    overflow: visible !important;\r\n    touch-action: auto !important;\r\n  }\r\n\r\n  #rtape .rt-stack {\r\n    height: auto !important;\r\n    min-height: 0 !important;\r\n    overflow: visible !important;\r\n  }\r\n\r\n  #rtape .rt-slot {\r\n    position: static !important;\r\n    top: auto !important;\r\n    height: auto !important;\r\n    min-height: 0 !important;\r\n    overflow: visible !important;\r\n  }\r\n\r\n  #rtape .rt-panel {\r\n    transform: none !important;\r\n    will-change: auto !important;\r\n  }\r\n\r\n  \/* content-visibility is useful on desktop but has had browser-specific\r\n     edge cases in long mobile pages. Keep mobile layout fully measurable. *\/\r\n  .cap3-section,\r\n  .uig-page-cta {\r\n    content-visibility: visible !important;\r\n    contain-intrinsic-size: auto !important;\r\n  }\r\n\r\n  \/* Touch devices already provide kinetic scrolling; avoid forcing\r\n     programmatic smooth behaviour onto the document itself. *\/\r\n  html { scroll-behavior: auto; }\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   2026 MOBILE VISUAL POLISH\r\n   Cleaner hero scale, better readable spacing, softer section hand-off,\r\n   and tighter touch-first Engineering controls.\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media (max-width: 540px) {\r\n  \/* HERO \u2014 deliberately designed for narrow screens rather than shrinking desktop *\/\r\n  .uig-hero {\r\n    min-height: 74svh;\r\n    min-height: 74vh;\r\n    align-items: center;\r\n    background:\r\n      radial-gradient(circle at 50% 34%, rgba(59,130,246,.15) 0%, rgba(59,130,246,.055) 22%, transparent 43%),\r\n      radial-gradient(circle at 92% 18%, rgba(30,64,175,.13) 0%, transparent 30%),\r\n      linear-gradient(180deg, #020712 0%, #06152e 58%, #0a2148 100%);\r\n  }\r\n\r\n  .uig-hero::before {\r\n    background-size: 30px 30px, 100% 100%;\r\n    opacity: .30;\r\n    -webkit-mask-image: radial-gradient(ellipse 92% 67% at 50% 42%, #000 0%, rgba(0,0,0,.72) 48%, transparent 88%);\r\n    mask-image: radial-gradient(ellipse 92% 67% at 50% 42%, #000 0%, rgba(0,0,0,.72) 48%, transparent 88%);\r\n  }\r\n\r\n  .uig-hero::after {\r\n    height: 76px;\r\n    background: linear-gradient(180deg, transparent 0%, rgba(247,251,255,.04) 48%, #f7fbff 100%);\r\n  }\r\n\r\n  .uig-hero-grid {\r\n    height: 44%;\r\n    inset: auto -58% -12%;\r\n    opacity: .16;\r\n    background-size: 48px 48px;\r\n    animation-duration: 28s;\r\n  }\r\n\r\n  #uig-particles { opacity: .10; }\r\n\r\n  .uig-orb-1 {\r\n    width: 340px;\r\n    height: 340px;\r\n    top: -205px;\r\n    left: -205px;\r\n    opacity: .34;\r\n  }\r\n\r\n  .uig-orb-2 {\r\n    width: 300px;\r\n    height: 300px;\r\n    top: 20%;\r\n    right: -215px;\r\n    opacity: .28;\r\n  }\r\n\r\n  .uig-hero-line {\r\n    width: 68vw;\r\n    top: 49%;\r\n    opacity: .24;\r\n    box-shadow: 0 0 24px rgba(59,130,246,.22);\r\n  }\r\n\r\n  .uig-hero-content {\r\n    width: 100%;\r\n    max-width: 390px;\r\n    padding: 26px 18px 72px;\r\n  }\r\n\r\n  .uig-hero-content .eco-label {\r\n    margin-bottom: 18px;\r\n    padding: 6px 13px;\r\n    gap: 7px;\r\n    font-size: 9px;\r\n    letter-spacing: 1.25px;\r\n    background: rgba(7,26,61,.50);\r\n    border-color: rgba(147,197,253,.24);\r\n    box-shadow: 0 8px 28px rgba(0,0,0,.13);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    backdrop-filter: blur(8px);\r\n  }\r\n\r\n  .uig-hero-content .eco-label::before {\r\n    width: 5px;\r\n    height: 5px;\r\n  }\r\n\r\n  \/* Keep the intended two-line title and stop \"Capabilities\" clipping. *\/\r\n  .uig-hero-title {\r\n    width: 100%;\r\n    max-width: 100%;\r\n    font-size: clamp(30px, 9.55vw, 40px);\r\n    line-height: 1.03;\r\n    letter-spacing: -.035em;\r\n    white-space: nowrap;\r\n    text-wrap: nowrap;\r\n    text-shadow: 0 8px 38px rgba(0,0,0,.20);\r\n  }\r\n\r\n  .uig-hero-title em {\r\n    display: inline-block;\r\n    background-size: 150% 100%;\r\n  }\r\n\r\n  .uig-hero-sub {\r\n    max-width: 310px;\r\n    margin: 20px auto 0;\r\n    padding: 0 2px;\r\n    font-size: 12.5px;\r\n    line-height: 1.62;\r\n    color: rgba(219,234,254,.66);\r\n    text-wrap: pretty;\r\n  }\r\n\r\n  \/* ENGINEERING \u2014 compact, touch-first and visually calmer after the hero *\/\r\n  .uig-solutions { padding-bottom: 76px; }\r\n\r\n  .uig-sol-header {\r\n    text-align: center;\r\n    padding: 62px 18px 30px;\r\n  }\r\n\r\n  .uig-sol-header .eco-label {\r\n    margin-bottom: 16px;\r\n    padding: 6px 13px;\r\n    font-size: 9px;\r\n    letter-spacing: 1.25px;\r\n    box-shadow: 0 8px 24px rgba(30,64,175,.06);\r\n  }\r\n\r\n  .uig-sol-title {\r\n    max-width: 330px;\r\n    margin: 0 auto;\r\n    font-size: clamp(30px, 9.1vw, 38px);\r\n    line-height: 1.02;\r\n    letter-spacing: -.035em;\r\n  }\r\n\r\n  .uig-sol-desc {\r\n    max-width: 320px;\r\n    margin: 15px auto 0;\r\n    font-size: 12.8px;\r\n    line-height: 1.62;\r\n    text-wrap: pretty;\r\n  }\r\n\r\n  .ps-wrap {\r\n    padding: 0 12px;\r\n    gap: 12px;\r\n    margin-bottom: 44px;\r\n  }\r\n\r\n  .ps-btns { gap: 5px; }\r\n\r\n  .ps-btn {\r\n    min-height: 46px;\r\n    padding: 9px 2px 14px;\r\n    border-radius: 10px;\r\n    box-shadow: none;\r\n  }\r\n\r\n  .ps-btn-num {\r\n    font-size: 8px;\r\n    letter-spacing: .06em;\r\n  }\r\n\r\n  .ps-progress-bar {\r\n    left: 8px;\r\n    right: 8px;\r\n    bottom: 6px;\r\n  }\r\n\r\n  .ps-content {\r\n    height: clamp(300px, 52svh, 380px);\r\n    min-height: 300px;\r\n    border-radius: 16px;\r\n    box-shadow: 0 18px 46px rgba(30,64,175,.14), 0 2px 10px rgba(15,23,42,.06);\r\n  }\r\n\r\n  .ps-slide-step-badge {\r\n    top: 12px;\r\n    left: 12px;\r\n    padding: 5px 10px;\r\n    font-size: 8px;\r\n  }\r\n\r\n  .ps-slide-body {\r\n    padding: 18px 16px 19px;\r\n    gap: 10px;\r\n  }\r\n\r\n  .ps-slide-icon {\r\n    width: 36px;\r\n    height: 36px;\r\n    border-radius: 10px;\r\n    font-size: 16px;\r\n    margin-top: 1px;\r\n  }\r\n\r\n  .ps-slide-text h3 {\r\n    font-size: 17px;\r\n    margin-bottom: 5px;\r\n  }\r\n\r\n  .ps-slide-text p {\r\n    font-size: 12px;\r\n    line-height: 1.58;\r\n  }\r\n\r\n  .uig-sol-stats {\r\n    margin: 44px 12px 0;\r\n    max-width: calc(100% - 24px);\r\n    border-radius: 18px;\r\n    box-shadow: 0 14px 40px rgba(30,64,175,.07);\r\n  }\r\n\r\n  .uig-stat { padding: 26px 18px; }\r\n  .uig-stat-num { font-size: 38px; }\r\n  .uig-stat-label { font-size: 10px; letter-spacing: .10em; }\r\n\r\n  \/* ROBOTICS \u2014 slightly less \"card inside card\" feeling on phones *\/\r\n  #rtape .rt-stack {\r\n    padding: 10px 8px 26px;\r\n    gap: 10px;\r\n  }\r\n\r\n  #rtape .rt-panel {\r\n    border-radius: 18px;\r\n    box-shadow: 0 18px 48px rgba(7,26,61,.18), 0 0 0 1px rgba(147,197,253,.08);\r\n  }\r\n\r\n  #rtape .rt-hero-left { padding: 28px 18px 38px; }\r\n  #rtape .eyebrow { font-size: 8px; padding: 6px 12px 6px 10px; margin-bottom: 14px; }\r\n  #rtape .headline-intro { font-size: clamp(1.65rem, 8.2vw, 2.15rem); line-height: 1.02; }\r\n  #rtape .lede-intro { font-size: .82rem; line-height: 1.58; }\r\n\r\n  \/* CAPABILITIES \u2014 cleaner section heading and denser cards *\/\r\n  .cap3-section { padding: 46px 14px 58px; }\r\n  .cap3-header { align-items: center; text-align: center; margin-bottom: 24px; }\r\n  .cap3-heading { font-size: clamp(22px, 7vw, 28px); line-height: .98; }\r\n  .cap3-sub { max-width: 310px; font-size: 12px; line-height: 1.58; }\r\n  .cap3-grid { gap: 9px; }\r\n  .cap3-inner { border-radius: 13px; }\r\n  .cap3-badge { top: 7px; left: 8px; }\r\n  .cap3-title-rest { bottom: 9px; left: 9px; right: 9px; font-size: 9px; }\r\n\r\n  \/* CTA \u2014 avoid oversized final headline on narrow screens *\/\r\n  .uig-page-cta { padding: 78px 18px 72px; }\r\n  .uig-page-cta h2 { font-size: clamp(30px, 9.6vw, 40px); line-height: 1.04; }\r\n  .uig-page-cta p { max-width: 310px; margin-bottom: 28px; font-size: 13px; line-height: 1.62; }\r\n  .uig-page-cta-btn { padding: 15px 30px; font-size: 13px; }\r\n}\r\n\r\n@media (max-width: 360px) {\r\n  .uig-hero-content { padding-left: 14px; padding-right: 14px; }\r\n  .uig-hero-title { font-size: clamp(25px, 8vw, 29px); }\r\n  .uig-hero-sub { max-width: 288px; font-size: 12px; }\r\n  .uig-sol-header { padding-left: 14px; padding-right: 14px; }\r\n  .ps-wrap { padding-left: 10px; padding-right: 10px; }\r\n}\r\n\r\n\/* Final narrow-screen title fit: keep both hero lines comfortably inside the frame. *\/\r\n@media (max-width: 540px) {\r\n  .uig-hero-content {\r\n    max-width: 100%;\r\n    padding-left: 20px;\r\n    padding-right: 20px;\r\n  }\r\n  .uig-hero-title {\r\n    font-size: clamp(26px, 8.35vw, 34px);\r\n    line-height: 1.02;\r\n    letter-spacing: -.045em;\r\n  }\r\n  .uig-hero-title em {\r\n    font-size: .93em;\r\n    white-space: nowrap;\r\n  }\r\n}\r\n\r\n@media (max-width: 360px) {\r\n  .uig-hero-content { padding-left: 16px; padding-right: 16px; }\r\n  .uig-hero-title { font-size: clamp(24px, 7.8vw, 28px); }\r\n  .uig-hero-title em { font-size: .92em; }\r\n}\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\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 -->\r\n<section class=\"uig-hero\" id=\"uig-hero\">\r\n  <div class=\"uig-hero-grid\"><\/div>\r\n  <canvas id=\"uig-particles\"><\/canvas>\r\n  <div class=\"uig-orb uig-orb-1\"><\/div>\r\n  <div class=\"uig-orb uig-orb-2\"><\/div>\r\n  <div class=\"uig-orb uig-orb-3\"><\/div>\r\n  <div class=\"uig-hero-line\"><\/div>\r\n\r\n  <div class=\"uig-hero-content\">\r\n    <div class=\"eco-label\">Solutions & Capabilities<\/div>\r\n    <h1 class=\"uig-hero-title\">\r\n      Our Solutions<br><em>& Capabilities<\/em>\r\n    <\/h1>\r\n    <p class=\"uig-hero-sub\">\r\n      From advanced engineering and tooling to robotics, automation and precision manufacturing \u2014 delivering integrated solutions that power Malaysia's leading OEM manufacturers.\r\n    <\/p>\r\n  <\/div>\r\n<\/section>\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\r\n     SOLUTIONS 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 -->\r\n<section class=\"uig-solutions\" id=\"uig-solutions\">\r\n\r\n  <div class=\"uig-sol-bg\">\r\n    <div class=\"uig-sol-bg-grid\"><\/div>\r\n    <div class=\"uig-sol-orb-a\"><\/div>\r\n    <div class=\"uig-sol-orb-b\"><\/div>\r\n    <div class=\"uig-sol-ray\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"uig-sol-header\">\r\n    <div class=\"eco-label\">Engineering Excellence<\/div>\r\n    <h2 class=\"uig-sol-title\">\r\n      How We<br>\r\n      <span>Build Solutions<\/span>\r\n    <\/h2>\r\n    <p class=\"uig-sol-desc\">\r\n      A rigorous four-stage engineering process \u2014 from design to mass production \u2014 ensuring every component meets OEM standards with zero compromise.\r\n    <\/p>\r\n  <\/div>\r\n\r\n  <!-- Progress Slider -->\r\n  <div class=\"ps-wrap\" id=\"progressSlider\">\r\n\r\n    <!-- Left: step buttons -->\r\n    <div class=\"ps-btns\">\r\n\r\n      <button class=\"ps-btn ps-active\" data-value=\"step1\">\r\n        <span class=\"ps-btn-num\">STEP 01<\/span>\r\n        <span class=\"ps-btn-title\">Machining<\/span>\r\n        <span class=\"ps-btn-desc\">CNC machined to precision tolerances<\/span>\r\n        <div class=\"ps-progress-bar\" role=\"progressbar\" aria-valuenow=\"0\"><span class=\"ps-progress-fill\"><\/span><\/div>\r\n      <\/button>\r\n\r\n      <button class=\"ps-btn\" data-value=\"step2\">\r\n        <span class=\"ps-btn-num\">STEP 02<\/span>\r\n        <span class=\"ps-btn-title\">Designing<\/span>\r\n        <span class=\"ps-btn-desc\">CAD\/CAM design and toolpath generation<\/span>\r\n        <div class=\"ps-progress-bar\" role=\"progressbar\" aria-valuenow=\"0\"><span class=\"ps-progress-fill\"><\/span><\/div>\r\n      <\/button>\r\n\r\n      <button class=\"ps-btn\" data-value=\"step3\">\r\n        <span class=\"ps-btn-num\">STEP 03<\/span>\r\n        <span class=\"ps-btn-title\">Tooling &amp; Die Assembly<\/span>\r\n        <span class=\"ps-btn-desc\">Die components assembled and verified<\/span>\r\n        <div class=\"ps-progress-bar\" role=\"progressbar\" aria-valuenow=\"0\"><span class=\"ps-progress-fill\"><\/span><\/div>\r\n      <\/button>\r\n\r\n      <button class=\"ps-btn\" data-value=\"step4\">\r\n        <span class=\"ps-btn-num\">STEP 04<\/span>\r\n        <span class=\"ps-btn-title\">Quality Testing<\/span>\r\n        <span class=\"ps-btn-desc\">Prototype evaluation against drawings<\/span>\r\n        <div class=\"ps-progress-bar\" role=\"progressbar\" aria-valuenow=\"0\"><span class=\"ps-progress-fill\"><\/span><\/div>\r\n      <\/button>\r\n\r\n      <button class=\"ps-btn\" data-value=\"step5\">\r\n        <span class=\"ps-btn-num\">STEP 05<\/span>\r\n        <span class=\"ps-btn-title\">Mass Production<\/span>\r\n        <span class=\"ps-btn-desc\">Full production run with QC monitoring<\/span>\r\n        <div class=\"ps-progress-bar\" role=\"progressbar\" aria-valuenow=\"0\"><span class=\"ps-progress-fill\"><\/span><\/div>\r\n      <\/button>\r\n\r\n    <\/div>\r\n\r\n    <!-- Right: content slides -->\r\n    <div class=\"ps-content\">\r\n\r\n      <div class=\"ps-slide ps-active\" data-value=\"step1\">\r\n        <div class=\"ps-slide-img\">\r\n          <div class=\"ps-slide-step-badge\">STEP 01<\/div>\r\n          <img decoding=\"async\" src=\"https:\/\/uisb.com\/wp-content\/uploads\/2025\/02\/xxUntitled-5-e1740546109784.jpg\" alt=\"Machining\" loading=\"lazy\">\r\n        <\/div>\r\n        <div class=\"ps-slide-body\">\r\n          <div class=\"ps-slide-icon\">\ud83d\udd27<\/div>\r\n          <div class=\"ps-slide-text\">\r\n            <h3>Machining<\/h3>\r\n            <p>Die components machined to precise tolerances using CAMWorks or Mastercam toolpaths, then fully assembled and functionally verified.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ps-slide\" data-value=\"step2\">\r\n        <div class=\"ps-slide-img\">\r\n          <div class=\"ps-slide-step-badge\">STEP 02<\/div>\r\n          <img decoding=\"async\" src=\"https:\/\/uisb.com\/wp-content\/uploads\/2025\/02\/photo_6152354568223179093_y.jpg\" alt=\"Designing\" loading=\"lazy\">\r\n        <\/div>\r\n        <div class=\"ps-slide-body\">\r\n          <div class=\"ps-slide-icon\">\u270f\ufe0f<\/div>\r\n          <div class=\"ps-slide-text\">\r\n            <h3>Designing<\/h3>\r\n            <p>Parts designed using SolidWorks or ZWCAD. CAMWorks generates CNC toolpaths and Quick Press creates the die before prototype testing.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ps-slide\" data-value=\"step3\">\r\n        <div class=\"ps-slide-img\">\r\n          <div class=\"ps-slide-step-badge\">STEP 03<\/div>\r\n          <img decoding=\"async\" src=\"https:\/\/uisb.com\/wp-content\/uploads\/2025\/02\/xxUntitled-5-e1740546109784.jpg\" alt=\"Tooling\" loading=\"lazy\">\r\n        <\/div>\r\n        <div class=\"ps-slide-body\">\r\n          <div class=\"ps-slide-icon\">\ud83d\udd29<\/div>\r\n          <div class=\"ps-slide-text\">\r\n            <h3>Tooling &amp; Die Assembly<\/h3>\r\n            <p>Die components machined to precise tolerances using CAMWorks or Mastercam toolpaths, then fully assembled and functionally verified.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ps-slide\" data-value=\"step4\">\r\n        <div class=\"ps-slide-img\">\r\n          <div class=\"ps-slide-step-badge\">STEP 04<\/div>\r\n          <img decoding=\"async\" src=\"https:\/\/uisb.com\/wp-content\/uploads\/2025\/02\/photo_6152354568223179091_y.jpg\" alt=\"Quality Testing\" loading=\"lazy\">\r\n        <\/div>\r\n        <div class=\"ps-slide-body\">\r\n          <div class=\"ps-slide-icon\">\ud83e\udde9<\/div>\r\n          <div class=\"ps-slide-text\">\r\n            <h3>Quality Testing<\/h3>\r\n            <p>Prototype parts are produced from the new die and evaluated against customer drawings. Design adjustments are made until the part meets specification.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ps-slide\" data-value=\"step5\">\r\n        <div class=\"ps-slide-img\">\r\n          <div class=\"ps-slide-step-badge\">STEP 05<\/div>\r\n          <img decoding=\"async\" src=\"https:\/\/uisb.com\/wp-content\/uploads\/2025\/02\/photo_6152354568223179093_y.jpg\" alt=\"Mass Production\" loading=\"lazy\">\r\n        <\/div>\r\n        <div class=\"ps-slide-body\">\r\n          <div class=\"ps-slide-icon\">\u2699\ufe0f<\/div>\r\n          <div class=\"ps-slide-text\">\r\n            <h3>Mass Production<\/h3>\r\n            <p>Validated die enters full production. Real-time process monitoring, in-line quality checks and continuous improvement loops ensure consistent output.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"uig-sol-stats\">\r\n    <div class=\"uig-stat\">\r\n      <span class=\"uig-stat-num\" data-target=\"10\">0<\/span>\r\n      <span class=\"uig-stat-label\">Numbers of Software<\/span>\r\n    <\/div>\r\n    <div class=\"uig-stat\">\r\n      <span class=\"uig-stat-num\" data-target=\"3\">0<\/span>\r\n      <span class=\"uig-stat-label\">Numbers of Designers<\/span>\r\n    <\/div>\r\n    <div class=\"uig-stat\">\r\n      <span class=\"uig-stat-num\" data-target=\"20\" data-suffix=\"+\">0<\/span>\r\n      <span class=\"uig-stat-label\">Years of Experiences<\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n\r\n<\/section>\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\r\n     ROBOTICS & AUTOMATION \u2014 RTAPE\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 -->\r\n<section id=\"rtape\">\r\n  <div class=\"rt-stack\">\r\n\r\n    <!-- SLOT 0 \u00b7 HERO PANEL (dark space + robot arm) -->\r\n    <div class=\"rt-slot\">\r\n      <div class=\"rt-panel rt-panel-0\" id=\"rt-panel-0\">\r\n        <div class=\"aurora\"><i><\/i><i><\/i><i><\/i><\/div>\r\n        <canvas id=\"bg-net\"><\/canvas>\r\n        <div class=\"rt-hero-left\">\r\n          <div class=\"eyebrow\"><span class=\"eyebrow-dot\"><\/span>Engineering Division \u00b7 RTAPE<\/div>\r\n          <h2 class=\"headline-intro\">Robotics &amp; <em>Automation<\/em><\/h2>\r\n          <p class=\"lede-intro\">\r\n            Engineering team dedicated to developing innovative automation solutions\r\n            that enhance manufacturing efficiency, quality and productivity \u2014\r\n            designing, implementing and optimising robotic systems that reduce\r\n            manual operations and improve operational reliability across\r\n            the entire production floor.\r\n          <\/p>\r\n          <div class=\"metrics\">\r\n            <div class=\"metric\">\r\n              <div class=\"metric-val\" data-count=\"8\" data-suffix=\"+\">0<\/div>\r\n              <div class=\"metric-label\">Live Projects<\/div>\r\n            <\/div>\r\n            <div class=\"metric\">\r\n              <div class=\"metric-val\" data-count=\"100\" data-suffix=\"%\">0<\/div>\r\n              <div class=\"metric-label\">In-house Built<\/div>\r\n            <\/div>\r\n            <div class=\"metric\">\r\n              <div class=\"metric-val\" data-text=\"IoT\">\u2014<\/div>\r\n              <div class=\"metric-label\">Connected<\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"stage\" id=\"stage\">\r\n          <canvas id=\"arm-canvas\"><\/canvas>\r\n          <div class=\"stage-hud\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- SLOT 1 \u00b7 WHAT RTAPE DOES (light panel) -->\r\n    <div class=\"rt-slot\">\r\n      <div class=\"rt-panel rt-panel-1\">\r\n        <div class=\"rt-p-head rv\">\r\n          <div class=\"rt-p-head-left\">\r\n            <h2 class=\"rt-sec-title\">What RTAPE Does<\/h2>\r\n          <\/div>\r\n          <p class=\"rt-sec-sub\">End-to-end automation engineering \u2014 from requirement analysis to deployment and cross-department collaboration.<\/p>\r\n        <\/div>\r\n        <div class=\"rt-bento stg\">\r\n          <div class=\"rt-card dark rt-c7 rv\">\r\n            <div class=\"rt-card-icon\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"rt-card-title\">Custom Machine Modification<\/div>\r\n            <div class=\"rt-card-desc\">Modify and upgrade existing machines with purpose-built automation solutions tailored to production needs \u2014 from concept design through shop-floor commissioning.<\/div>\r\n          <\/div>\r\n          <div class=\"rt-card rt-c5 rv\">\r\n            <div class=\"rt-card-icon\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"M21 21l-4.35-4.35\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"rt-card-title\">Automation Evaluation<\/div>\r\n            <div class=\"rt-card-desc\">Assess manufacturing requirements and recommend the most suitable automation solution for each process.<\/div>\r\n          <\/div>\r\n          <div class=\"rt-card rt-c4 rv\">\r\n            <div class=\"rt-card-icon\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"rt-card-title\">Process Improvement<\/div>\r\n            <div class=\"rt-card-desc\">Automation and continuous-improvement projects that drive measurable productivity gains.<\/div>\r\n          <\/div>\r\n          <div class=\"rt-card rt-c4 rv\">\r\n            <div class=\"rt-card-icon\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M8 21h8M12 17v4\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"rt-card-title\">Machine Enhancement<\/div>\r\n            <div class=\"rt-card-desc\">Upgrade existing machinery to improve throughput, performance and long-term reliability.<\/div>\r\n          <\/div>\r\n          <div class=\"rt-card rt-c4 rv\">\r\n            <div class=\"rt-card-icon\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/>\r\n                <path d=\"M23 21v-2a4 4 0 00-3-3.87\"\/><path d=\"M16 3.13a4 4 0 010 7.75\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n            <div class=\"rt-card-title\">Cross-Department Collaboration<\/div>\r\n            <div class=\"rt-card-desc\">Partnering with Production, Maintenance and Engineering to deliver integrated solutions.<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- SLOT 2 \u00b7 IMPLEMENTED PROJECTS (dark navy) -->\r\n    <div class=\"rt-slot\">\r\n      <div class=\"rt-panel rt-panel-2\">\r\n        <div class=\"rt-p-head\">\r\n          <div class=\"rt-p-head-left\">\r\n            <h2 class=\"rt-sec-title\">Deployed on the Floor<\/h2>\r\n          <\/div>\r\n          <p class=\"rt-sec-sub\">Eight automation systems designed, built and commissioned in-house \u2014 running in production today.<\/p>\r\n        <\/div>\r\n        <div class=\"rt-proj-grid\">\r\n          <div class=\"rt-proj-card rv\">\r\n            <div class=\"rt-proj-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z\"\/><\/svg><\/div>\r\n            <div><div class=\"rt-proj-name\">MF Bender<\/div><div class=\"rt-proj-tag\">Metal Forming<\/div><\/div>\r\n          <\/div>\r\n          <div class=\"rt-proj-card rv\">\r\n            <div class=\"rt-proj-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5\"\/><path d=\"M2 12l10 5 10-5\"\/><\/svg><\/div>\r\n            <div><div class=\"rt-proj-name\">Hipla Peeling<\/div><div class=\"rt-proj-tag\">Surface Process<\/div><\/div>\r\n          <\/div>\r\n          <div class=\"rt-proj-card rv\">\r\n            <div class=\"rt-proj-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/><\/svg><\/div>\r\n            <div><div class=\"rt-proj-name\">Automarking<\/div><div class=\"rt-proj-tag\">Marking System<\/div><\/div>\r\n          <\/div>\r\n          <div class=\"rt-proj-card rv\">\r\n            <div class=\"rt-proj-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14\"\/><\/svg><\/div>\r\n            <div><div class=\"rt-proj-name\">Cobot Pick &amp; Place<\/div><div class=\"rt-proj-tag\">Collaborative Robot<\/div><\/div>\r\n          <\/div>\r\n          <div class=\"rt-proj-card rv\">\r\n            <div class=\"rt-proj-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.24 12.24a6 6 0 00-8.49-8.49L5 10.5V19h8.5z\"\/><line x1=\"16\" y1=\"8\" x2=\"2\" y2=\"22\"\/><line x1=\"17.5\" y1=\"15\" x2=\"9\" y2=\"15\"\/><\/svg><\/div>\r\n            <div><div class=\"rt-proj-name\">Robot Welding (UVI)<\/div><div class=\"rt-proj-tag\">Welding Automation<\/div><\/div>\r\n          <\/div>\r\n          <div class=\"rt-proj-card rv\">\r\n            <div class=\"rt-proj-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M3 9h18M9 21V9\"\/><\/svg><\/div>\r\n            <div><div class=\"rt-proj-name\">QR Barcode<\/div><div class=\"rt-proj-tag\">Traceability<\/div><\/div>\r\n          <\/div>\r\n          <div class=\"rt-proj-card rv\">\r\n            <div class=\"rt-proj-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12.55a11 11 0 0114.08 0\"\/><path d=\"M1.42 9a16 16 0 0121.16 0\"\/><path d=\"M8.53 16.11a6 6 0 016.95 0\"\/><circle cx=\"12\" cy=\"20\" r=\"1\"\/><\/svg><\/div>\r\n            <div><div class=\"rt-proj-name\">IoT<\/div><div class=\"rt-proj-tag\">Connected Systems<\/div><\/div>\r\n          <\/div>\r\n          <div class=\"rt-proj-card rv\">\r\n            <div class=\"rt-proj-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"13 2 3 14 12 14 11 22 21 10 12 10 13 2\"\/><\/svg><\/div>\r\n            <div><div class=\"rt-proj-name\">Manga<\/div><div class=\"rt-proj-tag\">Comic Book<\/div><\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"rt-proj-cta\">\r\n          <p><strong>8 automation systems<\/strong> designed, built &amp; commissioned in-house \u2014 running in production today.<\/p>\r\n          <a href=\"#technology\" class=\"rt-cta-badge\">See our products &rarr;<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\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\r\n     OUR CAPABILITIES\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 -->\r\n<section class=\"cap3-section\" id=\"technology\">\r\n  <div class=\"cap3-header\">\r\n    <div class=\"eco-label\" style=\"background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.85);\">OUR CAPABILITIES<\/div>\r\n    <h2 class=\"cap3-heading\"><span class=\"hl\">ADVANCED<\/span><br>MANUFACTURING<\/h2>\r\n    <p class=\"cap3-sub\">Explore our full range of advanced manufacturing capabilities \u2014 hover any card to discover more.<\/p>\r\n  <\/div>\r\n  <div class=\"cap3-grid\" id=\"cap3Grid\"><\/div>\r\n<\/section>\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\r\n     PAGE 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 -->\r\n<section class=\"uig-page-cta\" id=\"uig-cta\">\r\n  <div class=\"uig-page-cta-orb uig-page-cta-orb-a\"><\/div>\r\n  <div class=\"uig-page-cta-orb uig-page-cta-orb-b\"><\/div>\r\n  <div class=\"uig-page-cta-inner\">\r\n    <h2>Ready to partner<br>with <em>UI Group?<\/em><\/h2>\r\n    <p>Let's build something exceptional together \u2014 from design through mass production.<\/p>\r\n    <a href=\"\/contact\/\" class=\"uig-page-cta-btn\">\r\n      Get In Touch\r\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n        <path d=\"M3 8h10M9 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n      <\/svg>\r\n    <\/a>\r\n  <\/div>\r\n<\/section>\r\n\r\n\r\n<!-- Fixed page-wide nav rail -->\r\n<nav class=\"page-nav-rail\" id=\"pageNavRail\" aria-label=\"Page sections\"><\/nav>\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\r\n     JAVASCRIPT\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 -->\r\n<script>\r\n\/* \u2500\u2500 Particle canvas (hero) \u2014 viewport-aware + cheaper pair linking \u2500\u2500 *\/\r\n(function(){\r\n  var canvas = document.getElementById('uig-particles');\r\n  var hero = document.getElementById('uig-hero');\r\n  if (!canvas || !hero) return;\r\n\r\n  var ctx = canvas.getContext('2d');\r\n  var W = 0, H = 0, particles = [];\r\n  var rafId = 0, running = false, inView = true;\r\n  var resizeRaf = 0;\r\n\r\n  function particleCount(){\r\n    if (window.innerWidth < 540) return 24;\r\n    if (window.innerWidth < 900) return 38;\r\n    return 56;\r\n  }\r\n\r\n  function resize(){\r\n    W = canvas.width = Math.max(1, canvas.offsetWidth);\r\n    H = canvas.height = Math.max(1, canvas.offsetHeight);\r\n    particles = [];\r\n    var count = particleCount();\r\n    for (var i = 0; i < count; i++) {\r\n      particles.push({\r\n        x: Math.random() * W, y: Math.random() * H,\r\n        vx: (Math.random() - .5) * .34, vy: (Math.random() - .5) * .34,\r\n        r: Math.random() * 1.35 + .45, a: Math.random() * .5 + .08\r\n      });\r\n    }\r\n  }\r\n\r\n  function queueResize(){\r\n    if (resizeRaf) return;\r\n    resizeRaf = requestAnimationFrame(function(){\r\n      resizeRaf = 0;\r\n      resize();\r\n    });\r\n  }\r\n\r\n  function draw(){\r\n    if (!running) return;\r\n    ctx.clearRect(0, 0, W, H);\r\n\r\n    for (var i = 0; i < particles.length; i++) {\r\n      var p = particles[i];\r\n      p.x += p.vx; p.y += p.vy;\r\n      if (p.x < 0) p.x = W; else if (p.x > W) p.x = 0;\r\n      if (p.y < 0) p.y = H; else if (p.y > H) p.y = 0;\r\n\r\n      ctx.beginPath();\r\n      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\r\n      ctx.fillStyle = 'rgba(147,197,253,' + p.a + ')';\r\n      ctx.fill();\r\n\r\n      \/* Only compare each pair once. The previous nested forEach drew A\u2194B twice. *\/\r\n      for (var j = i + 1; j < particles.length; j++) {\r\n        var q = particles[j];\r\n        var dx = p.x - q.x, dy = p.y - q.y;\r\n        var d2 = dx * dx + dy * dy;\r\n        if (d2 < 14400) { \/* 120px squared *\/\r\n          var dist = Math.sqrt(d2);\r\n          ctx.beginPath();\r\n          ctx.moveTo(p.x, p.y);\r\n          ctx.lineTo(q.x, q.y);\r\n          ctx.strokeStyle = 'rgba(147,197,253,' + (.11 * (1 - dist \/ 120)) + ')';\r\n          ctx.lineWidth = .6;\r\n          ctx.stroke();\r\n        }\r\n      }\r\n    }\r\n    rafId = requestAnimationFrame(draw);\r\n  }\r\n\r\n  function syncRunState(){\r\n    var shouldRun = inView && !document.hidden;\r\n    if (shouldRun && !running) {\r\n      running = true;\r\n      rafId = requestAnimationFrame(draw);\r\n    } else if (!shouldRun && running) {\r\n      running = false;\r\n      if (rafId) cancelAnimationFrame(rafId);\r\n      rafId = 0;\r\n    }\r\n  }\r\n\r\n  window.addEventListener('resize', queueResize, { passive: true });\r\n  document.addEventListener('visibilitychange', syncRunState);\r\n\r\n  if ('IntersectionObserver' in window) {\r\n    new IntersectionObserver(function(entries){\r\n      inView = entries[0].isIntersecting;\r\n      syncRunState();\r\n    }, { rootMargin: '140px 0px', threshold: 0 }).observe(hero);\r\n  }\r\n\r\n  resize();\r\n  syncRunState();\r\n})();\r\n\r\n\r\n\/* \u2500\u2500 Progress Slider \u2014 instant interaction + transform-based progress \u2500\u2500 *\/\r\n(function(){\r\n  var DURATION = 5000;\r\n  var root = document.getElementById('progressSlider');\r\n  if (!root) return;\r\n\r\n  var buttons = Array.prototype.slice.call(root.querySelectorAll('.ps-btn'));\r\n  var slides = Array.prototype.slice.call(root.querySelectorAll('.ps-slide'));\r\n  var steps = buttons.map(function(btn){ return btn.dataset.value; });\r\n  var active = steps[0] || 'step1';\r\n  var startTime = performance.now();\r\n  var rafId = 0;\r\n  var inView = true;\r\n  var running = false;\r\n\r\n  function getNextValue(){\r\n    var idx = steps.indexOf(active);\r\n    return steps[(idx + 1) % steps.length];\r\n  }\r\n\r\n  function resetFills(){\r\n    buttons.forEach(function(btn){\r\n      var fill = btn.querySelector('.ps-progress-fill');\r\n      if (fill) fill.style.transform = 'scaleX(0)';\r\n      var bar = btn.querySelector('.ps-progress-bar');\r\n      if (bar) bar.setAttribute('aria-valuenow', '0');\r\n    });\r\n  }\r\n\r\n  function setActive(value){\r\n    active = value;\r\n    resetFills();\r\n\r\n    buttons.forEach(function(btn){\r\n      var on = btn.dataset.value === value;\r\n      btn.classList.toggle('ps-active', on);\r\n      btn.setAttribute('aria-pressed', on ? 'true' : 'false');\r\n    });\r\n\r\n    slides.forEach(function(slide){\r\n      slide.classList.toggle('ps-active', slide.dataset.value === value);\r\n      slide.setAttribute('aria-hidden', slide.dataset.value === value ? 'false' : 'true');\r\n    });\r\n\r\n    startTime = performance.now();\r\n  }\r\n\r\n  function updateProgress(percent){\r\n    var btn = root.querySelector('.ps-btn.ps-active');\r\n    if (!btn) return;\r\n    var fill = btn.querySelector('.ps-progress-fill');\r\n    if (fill) fill.style.transform = 'scaleX(' + Math.max(0, Math.min(1, percent \/ 100)).toFixed(4) + ')';\r\n    var bar = btn.querySelector('.ps-progress-bar');\r\n    if (bar) bar.setAttribute('aria-valuenow', String(Math.round(percent)));\r\n  }\r\n\r\n  function frame(now){\r\n    if (!running) return;\r\n    var fraction = Math.min((now - startTime) \/ DURATION, 1);\r\n    updateProgress(fraction * 100);\r\n\r\n    if (fraction >= 1) {\r\n      setActive(getNextValue());\r\n    }\r\n    rafId = requestAnimationFrame(frame);\r\n  }\r\n\r\n  function syncRunState(){\r\n    var shouldRun = inView && !document.hidden;\r\n    if (shouldRun && !running) {\r\n      running = true;\r\n      startTime = performance.now();\r\n      rafId = requestAnimationFrame(frame);\r\n    } else if (!shouldRun && running) {\r\n      running = false;\r\n      if (rafId) cancelAnimationFrame(rafId);\r\n      rafId = 0;\r\n    }\r\n  }\r\n\r\n  buttons.forEach(function(btn){\r\n    btn.addEventListener('click', function(){\r\n      var value = btn.dataset.value;\r\n      if (value === active) {\r\n        startTime = performance.now();\r\n        updateProgress(0);\r\n        return;\r\n      }\r\n      \/* Immediate response: no 400ms fast-forward delay. *\/\r\n      setActive(value);\r\n    });\r\n  });\r\n\r\n  if ('IntersectionObserver' in window) {\r\n    new IntersectionObserver(function(entries){\r\n      inView = entries[0].isIntersecting;\r\n      syncRunState();\r\n    }, { rootMargin: '160px 0px', threshold: 0 }).observe(root);\r\n  }\r\n\r\n  document.addEventListener('visibilitychange', syncRunState);\r\n  setActive(active);\r\n  syncRunState();\r\n})();\r\n\r\n\/* \u2500\u2500 Scroll reveal \u2500\u2500 *\/\r\nvar revealEls = document.querySelectorAll('.uig-reveal');\r\nvar observer = new IntersectionObserver(function(entries){\r\n  entries.forEach(function(e){ if (e.isIntersecting){ e.target.classList.add('visible'); } });\r\n}, { threshold: .10 });\r\nrevealEls.forEach(function(el){ observer.observe(el); });\r\n\r\n\/* \u2500\u2500 Counter animation \u2500\u2500 *\/\r\nvar counters = document.querySelectorAll('.uig-stat-num');\r\nvar counted = false;\r\nvar statsSection = document.querySelector('.uig-sol-stats');\r\n\r\nfunction runCounters(){\r\n  if (counted) return;\r\n  counted = true;\r\n  counters.forEach(function(el){\r\n    var target = parseInt(el.getAttribute('data-target'), 10);\r\n    var suffix = el.getAttribute('data-suffix') || '+';\r\n    var duration = 1800, startTime = null;\r\n    function step(ts){\r\n      if (!startTime) startTime = ts;\r\n      var progress = Math.min((ts - startTime) \/ duration, 1);\r\n      var eased = 1 - Math.pow(1 - progress, 3);\r\n      el.textContent = Math.floor(eased * target) + suffix;\r\n      if (progress < 1) requestAnimationFrame(step);\r\n      else el.textContent = target + suffix;\r\n    }\r\n    requestAnimationFrame(step);\r\n  });\r\n}\r\nif (statsSection){\r\n  var statsObs = new IntersectionObserver(function(entries){\r\n    if (entries[0].isIntersecting) runCounters();\r\n  }, { threshold: .3 });\r\n  statsObs.observe(statsSection);\r\n}\r\n\r\n\/* \u2500\u2500 Page nav rail \u2500\u2500 *\/\r\n(function(){\r\n  var SECTIONS = [\r\n    { id: 'uig-hero',  label: 'Overview'    },\r\n    { id: 'uig-solutions',  label: 'Solutions'    },\r\n    { id: 'rtape',          label: 'Robotics'     },\r\n    { id: 'technology',     label: 'Capabilities' }\r\n  ];\r\n  var rail = document.getElementById('pageNavRail');\r\n  if (!rail) return;\r\n  var pips = [];\r\n  SECTIONS.forEach(function(sec){\r\n    var el = document.getElementById(sec.id);\r\n    if (!el) return;\r\n    var btn = document.createElement('button');\r\n    btn.className = 'page-nav-pip';\r\n    btn.setAttribute('data-label', sec.label);\r\n    btn.setAttribute('aria-label', 'Go to ' + sec.label);\r\n    btn.addEventListener('click', function(){ el.scrollIntoView({ behavior: 'smooth', block: 'start' }); });\r\n    rail.appendChild(btn);\r\n    pips.push({ btn: btn, el: el });\r\n  });\r\n  var ticking = false;\r\n  function update(){\r\n    ticking = false;\r\n    var mid = window.scrollY + window.innerHeight * 0.45;\r\n    var best = -1, bestDist = Infinity;\r\n    pips.forEach(function(p, i){\r\n      var rect = p.el.getBoundingClientRect();\r\n      var top = rect.top + window.scrollY;\r\n      var dist = Math.abs(top + rect.height * 0.35 - mid);\r\n      if (dist < bestDist){ bestDist = dist; best = i; }\r\n    });\r\n    pips.forEach(function(p, i){ p.btn.classList.toggle('active', i === best); });\r\n  }\r\n  window.addEventListener('scroll', function(){ if (!ticking){ requestAnimationFrame(update); ticking = true; } }, { passive: true });\r\n  update();\r\n})();\r\n\r\n\/* \u2500\u2500 Pause decorative CSS animation outside the viewport \u2500\u2500 *\/\r\n(function(){\r\n  if (!('IntersectionObserver' in window)) return;\r\n  var sections = document.querySelectorAll('.uig-hero, .uig-solutions, #rtape, .cap3-section, .uig-page-cta');\r\n  var io = new IntersectionObserver(function(entries){\r\n    entries.forEach(function(entry){\r\n      entry.target.classList.toggle('uig-motion-paused', !entry.isIntersecting);\r\n    });\r\n  }, { rootMargin: '180px 0px', threshold: 0 });\r\n  sections.forEach(function(section){ io.observe(section); });\r\n})();\r\n\r\n<\/script>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n<script>\r\n\/* \u2500\u2500 RTAPE: PARTICLE NETWORK \u2014 paused off-screen \u2500\u2500 *\/\r\n(function () {\r\n  var canvas = document.getElementById('bg-net');\r\n  var section = document.getElementById('rtape');\r\n  if (!canvas || !section) return;\r\n\r\n  var ctx = canvas.getContext('2d');\r\n  var W = 0, H = 0, pts = [];\r\n  var CFG = { n: 44, spd: 0.28, link: 125, rgb: '147,197,253', lo: 0.14 };\r\n  var rafId = 0, running = false, inView = false, resizeRaf = 0;\r\n\r\n  function resize() {\r\n    var s = document.getElementById('rt-panel-0') || section;\r\n    W = canvas.width = Math.max(1, s.offsetWidth);\r\n    H = canvas.height = Math.max(1, s.offsetHeight);\r\n  }\r\n\r\n  function mk() {\r\n    return {\r\n      x: Math.random() * W, y: Math.random() * H,\r\n      vx: (Math.random() - 0.5) * CFG.spd, vy: (Math.random() - 0.5) * CFG.spd,\r\n      r: Math.random() * 1.3 + 0.6, o: Math.random() * 0.38 + 0.12\r\n    };\r\n  }\r\n\r\n  function init() {\r\n    resize();\r\n    pts = [];\r\n    for (var i = 0; i < CFG.n; i++) pts.push(mk());\r\n  }\r\n\r\n  function queueResize(){\r\n    if (resizeRaf) return;\r\n    resizeRaf = requestAnimationFrame(function(){\r\n      resizeRaf = 0;\r\n      init();\r\n    });\r\n  }\r\n\r\n  function draw() {\r\n    if (!running) return;\r\n    ctx.clearRect(0, 0, W, H);\r\n\r\n    for (var i = 0; i < pts.length; i++) {\r\n      var p = pts[i];\r\n      p.x += p.vx; p.y += p.vy;\r\n      if (p.x < 0 || p.x > W) p.vx *= -1;\r\n      if (p.y < 0 || p.y > H) p.vy *= -1;\r\n\r\n      ctx.beginPath();\r\n      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\r\n      ctx.fillStyle = 'rgba(' + CFG.rgb + ',' + p.o + ')';\r\n      ctx.fill();\r\n\r\n      for (var j = i + 1; j < pts.length; j++) {\r\n        var q = pts[j];\r\n        var dx = p.x - q.x, dy = p.y - q.y;\r\n        var d2 = dx * dx + dy * dy;\r\n        if (d2 < CFG.link * CFG.link) {\r\n          var d = Math.sqrt(d2);\r\n          ctx.beginPath();\r\n          ctx.moveTo(p.x, p.y);\r\n          ctx.lineTo(q.x, q.y);\r\n          ctx.strokeStyle = 'rgba(' + CFG.rgb + ',' + (CFG.lo * (1 - d \/ CFG.link)) + ')';\r\n          ctx.lineWidth = 0.7;\r\n          ctx.stroke();\r\n        }\r\n      }\r\n    }\r\n    rafId = requestAnimationFrame(draw);\r\n  }\r\n\r\n  function syncRunState(){\r\n    var shouldRun = inView && !document.hidden && window.innerWidth >= 900;\r\n    if (shouldRun && !running) {\r\n      running = true;\r\n      rafId = requestAnimationFrame(draw);\r\n    } else if (!shouldRun && running) {\r\n      running = false;\r\n      if (rafId) cancelAnimationFrame(rafId);\r\n      rafId = 0;\r\n    }\r\n  }\r\n\r\n  window.addEventListener('resize', function(){\r\n    queueResize();\r\n    syncRunState();\r\n  }, { passive: true });\r\n  document.addEventListener('visibilitychange', syncRunState);\r\n\r\n  if ('IntersectionObserver' in window) {\r\n    new IntersectionObserver(function(entries){\r\n      inView = entries[0].isIntersecting;\r\n      syncRunState();\r\n    }, { rootMargin: '220px 0px', threshold: 0 }).observe(section);\r\n  }\r\n\r\n  init();\r\n  syncRunState();\r\n})();\r\n\r\n\/* \u2500\u2500 RTAPE: REVEALS + COUNTERS \u2500\u2500 *\/\r\n(function () {\r\n  var obs = new IntersectionObserver(function (ents) {\r\n    ents.forEach(function (e) {\r\n      if (e.isIntersecting) { e.target.classList.add('vis'); obs.unobserve(e.target); }\r\n    });\r\n  }, { threshold: 0.12 });\r\n  document.querySelectorAll('#rtape .rv').forEach(function (el) { obs.observe(el); });\r\n\r\n  function count(el, target, suffix) {\r\n    var dur = 1500, t0 = performance.now();\r\n    function step(now) {\r\n      var p = Math.min((now - t0) \/ dur, 1);\r\n      var e = 1 - Math.pow(1 - p, 3);\r\n      el.textContent = Math.round(e * target) + suffix;\r\n      if (p < 1) requestAnimationFrame(step);\r\n    }\r\n    requestAnimationFrame(step);\r\n  }\r\n  var mObs = new IntersectionObserver(function (ents) {\r\n    ents.forEach(function (e) {\r\n      if (!e.isIntersecting) return;\r\n      e.target.querySelectorAll('.metric-val').forEach(function (n) {\r\n        if (n.dataset.text) { n.textContent = n.dataset.text; }\r\n        else if (n.dataset.count) { count(n, parseInt(n.dataset.count, 10), n.dataset.suffix || ''); }\r\n      });\r\n      mObs.unobserve(e.target);\r\n    });\r\n  }, { threshold: 0.5 });\r\n  var metrics = document.querySelector('#rtape .metrics');\r\n  if (metrics) mObs.observe(metrics);\r\n})();\r\n\r\n\/* \u2500\u2500 RTAPE: THREE.JS 6-DOF ARM \u2500\u2500 *\/\r\n(function () {\r\n  if (typeof THREE === 'undefined') return;\r\n  if (window.innerWidth < 900) return;\r\n\r\n  var REDUCED = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n  var stage  = document.getElementById('stage');\r\n  var canvas = document.getElementById('arm-canvas');\r\n  if (!stage || !canvas) return;\r\n\r\n  var renderer;\r\n  try {\r\n    renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });\r\n  } catch (err) {\r\n    stage.style.background = 'radial-gradient(600px 300px at 50% 40%, #0d2242, #060d1e)';\r\n    return;\r\n  }\r\n  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));\r\n  renderer.shadowMap.enabled = true;\r\n  renderer.shadowMap.type = THREE.PCFSoftShadowMap;\r\n  renderer.outputEncoding = THREE.sRGBEncoding;\r\n  renderer.toneMapping = THREE.ACESFilmicToneMapping;\r\n  renderer.toneMappingExposure = 1.12;\r\n  renderer.setClearColor(0x060d1e, 1);\r\n\r\n  var scene = new THREE.Scene();\r\n  scene.fog = new THREE.FogExp2(0x050d1d, 0.038);\r\n\r\n  var camera = new THREE.PerspectiveCamera(40, 1, 0.1, 100);\r\n  var TARGET = new THREE.Vector3(0, 1.25, 0);\r\n\r\n  function resize() {\r\n    var w = stage.clientWidth, h = stage.clientHeight;\r\n    if (w === 0 || h === 0) return;\r\n    renderer.setSize(w, h, false);\r\n    camera.aspect = w \/ h;\r\n    camera.updateProjectionMatrix();\r\n  }\r\n  if (window.ResizeObserver) {\r\n    new ResizeObserver(resize).observe(stage);\r\n  } else {\r\n    window.addEventListener('resize', resize);\r\n  }\r\n  resize();\r\n\r\n  function glowTex(inner, outer) {\r\n    var s = 128, c = document.createElement('canvas');\r\n    c.width = c.height = s;\r\n    var g = c.getContext('2d');\r\n    var grd = g.createRadialGradient(s\/2, s\/2, 0, s\/2, s\/2, s\/2);\r\n    grd.addColorStop(0, inner);\r\n    grd.addColorStop(0.35, outer);\r\n    grd.addColorStop(1, 'rgba(0,0,0,0)');\r\n    g.fillStyle = grd; g.fillRect(0, 0, s, s);\r\n    var t = new THREE.CanvasTexture(c); t.needsUpdate = true; return t;\r\n  }\r\n  var TG_BLUE = glowTex('rgba(210,240,255,1)', 'rgba(56,168,255,.55)');\r\n  var TG_CORE = glowTex('rgba(255,255,255,1)', 'rgba(140,205,255,.5)');\r\n\r\n  function glow(size, opacity, tex) {\r\n    var sp = new THREE.Sprite(new THREE.SpriteMaterial({\r\n      map: tex || TG_BLUE, color: 0xffffff,\r\n      blending: THREE.AdditiveBlending, transparent: true,\r\n      opacity: opacity, depthWrite: false\r\n    }));\r\n    sp.scale.set(size, size, 1);\r\n    return sp;\r\n  }\r\n\r\n  var M_BODY  = new THREE.MeshStandardMaterial({ color: 0xf2f6fb, metalness: 0.35, roughness: 0.30, emissive: 0x0a1a30, emissiveIntensity: 0.12 });\r\n  var M_JOINT = new THREE.MeshStandardMaterial({ color: 0xcdd9e6, metalness: 0.75, roughness: 0.24, emissive: 0x123050, emissiveIntensity: 0.18 });\r\n  var M_DARK  = new THREE.MeshStandardMaterial({ color: 0x25313f, metalness: 0.6,  roughness: 0.4 });\r\n  var M_NEON  = new THREE.MeshStandardMaterial({ color: 0x38a8ff, emissive: 0x38a8ff, emissiveIntensity: 2.4, metalness: 0.1, roughness: 0.4 });\r\n  var M_NEON_S= new THREE.MeshStandardMaterial({ color: 0x9fd8ff, emissive: 0x64b8ff, emissiveIntensity: 1.4, metalness: 0.1, roughness: 0.5 });\r\n\r\n  function link(w, h, d) {\r\n    var g = new THREE.Group();\r\n    var core = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), M_BODY);\r\n    core.castShadow = core.receiveShadow = true;\r\n    g.add(core);\r\n    var sg = new THREE.BoxGeometry(0.014, h * 0.8, 0.014);\r\n    var offs = [[-w\/2, d\/2],[w\/2, d\/2],[-w\/2,-d\/2],[w\/2,-d\/2]];\r\n    for (var i = 0; i < 4; i++) {\r\n      var s = new THREE.Mesh(sg, M_NEON_S);\r\n      s.position.set(offs[i][0], 0, offs[i][1]);\r\n      g.add(s);\r\n    }\r\n    return g;\r\n  }\r\n  function drum(r, len) {\r\n    var g = new THREE.Group();\r\n    var m = new THREE.Mesh(new THREE.CylinderGeometry(r, r, len, 30), M_JOINT);\r\n    m.rotation.x = Math.PI \/ 2; m.castShadow = m.receiveShadow = true;\r\n    g.add(m);\r\n    var ring = new THREE.Mesh(new THREE.TorusGeometry(r * 1.02, 0.012, 8, 44), M_NEON);\r\n    g.add(ring);\r\n    return g;\r\n  }\r\n\r\n  var floor = new THREE.Mesh(\r\n    new THREE.CircleGeometry(14, 64),\r\n    new THREE.MeshStandardMaterial({ color: 0x081226, metalness: 0.4, roughness: 0.85 })\r\n  );\r\n  floor.rotation.x = -Math.PI \/ 2; floor.receiveShadow = true;\r\n  scene.add(floor);\r\n\r\n  var grid = new THREE.GridHelper(24, 48, 0x2a6fb0, 0x123252);\r\n  grid.material.transparent = true; grid.material.opacity = 0.3;\r\n  grid.position.y = 0.002;\r\n  scene.add(grid);\r\n\r\n  var rr = [1.5, 2.4, 3.4];\r\n  for (var ri = 0; ri < rr.length; ri++) {\r\n    var rpts = [];\r\n    for (var a = 0; a <= 96; a++) {\r\n      var at = a \/ 96 * Math.PI * 2;\r\n      rpts.push(new THREE.Vector3(Math.cos(at) * rr[ri], 0.004, Math.sin(at) * rr[ri]));\r\n    }\r\n    scene.add(new THREE.Line(\r\n      new THREE.BufferGeometry().setFromPoints(rpts),\r\n      new THREE.LineBasicMaterial({ color: 0x2f7fc4, transparent: true, opacity: 0.28 - ri * 0.06 })\r\n    ));\r\n  }\r\n  for (var sa = 0; sa < 12; sa++) {\r\n    var st = sa \/ 12 * Math.PI * 2;\r\n    scene.add(new THREE.Line(\r\n      new THREE.BufferGeometry().setFromPoints([\r\n        new THREE.Vector3(Math.cos(st) * 1.5, 0.004, Math.sin(st) * 1.5),\r\n        new THREE.Vector3(Math.cos(st) * 3.4, 0.004, Math.sin(st) * 3.4)\r\n      ]),\r\n      new THREE.LineBasicMaterial({ color: 0x1e5686, transparent: true, opacity: 0.18 })\r\n    ));\r\n  }\r\n\r\n  scene.add(new THREE.AmbientLight(0x1a2c4a, 0.95));\r\n  var key = new THREE.SpotLight(0xf4faff, 2.4, 30, Math.PI \/ 5.2, 0.45, 1.6);\r\n  key.position.set(1.5, 9, 2.5); key.target.position.set(0, 0.8, 0);\r\n  key.castShadow = true; key.shadow.mapSize.set(2048, 2048); key.shadow.bias = -0.0004;\r\n  scene.add(key); scene.add(key.target);\r\n  var rimA = new THREE.PointLight(0x2f8fe0, 1.5, 16, 2); rimA.position.set(-4.5, 2.2, -3.0); scene.add(rimA);\r\n  var rimB = new THREE.PointLight(0x3fa8ff, 1.1, 14, 2); rimB.position.set(4.6, 1.4, -3.6); scene.add(rimB);\r\n  var fillLow = new THREE.PointLight(0x38a8ff, 0.8, 8, 2); fillLow.position.set(0, 0.35, 0); scene.add(fillLow);\r\n\r\n  var robot = new THREE.Group();\r\n  scene.add(robot);\r\n\r\n  var ped = new THREE.Mesh(new THREE.CylinderGeometry(0.62, 0.78, 0.42, 40), M_DARK);\r\n  ped.position.y = 0.21; ped.castShadow = ped.receiveShadow = true;\r\n  robot.add(ped);\r\n  var pedRing = new THREE.Mesh(new THREE.TorusGeometry(0.68, 0.022, 10, 60), M_NEON);\r\n  pedRing.rotation.x = Math.PI \/ 2; pedRing.position.y = 0.44;\r\n  robot.add(pedRing);\r\n  var pedGlow = glow(2.6, 0.5); pedGlow.position.y = 0.45; robot.add(pedGlow);\r\n  var pedCap = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.6, 0.14, 40), M_BODY);\r\n  pedCap.position.y = 0.49; pedCap.castShadow = true; robot.add(pedCap);\r\n\r\n  var j1 = new THREE.Group(); j1.position.y = 0.56; robot.add(j1);\r\n  var turret = new THREE.Mesh(new THREE.CylinderGeometry(0.34, 0.42, 0.30, 32), M_BODY);\r\n  turret.position.y = 0.15; turret.castShadow = true; j1.add(turret);\r\n  var tRing = new THREE.Mesh(new THREE.TorusGeometry(0.36, 0.014, 8, 48), M_NEON_S);\r\n  tRing.rotation.x = Math.PI \/ 2; tRing.position.y = 0.04; j1.add(tRing);\r\n\r\n  var j2 = new THREE.Group(); j2.position.set(0, 0.42, 0); j1.add(j2);\r\n  j2.add(drum(0.20, 0.46));\r\n  var UL = 1.05;\r\n  var upper = link(0.24, UL, 0.24); upper.position.y = UL \/ 2 + 0.06; j2.add(upper);\r\n\r\n  var j3 = new THREE.Group(); j3.position.y = UL + 0.12; j2.add(j3);\r\n  j3.add(drum(0.16, 0.40));\r\n  var FL = 0.92;\r\n  var fore = link(0.19, FL, 0.19); fore.position.y = FL \/ 2 + 0.05; j3.add(fore);\r\n\r\n  var j4 = new THREE.Group(); j4.position.y = FL + 0.10; j3.add(j4);\r\n  j4.add(drum(0.12, 0.30));\r\n  var WL = 0.26;\r\n  var wrist = new THREE.Mesh(new THREE.CylinderGeometry(0.09, 0.10, WL, 24), M_BODY);\r\n  wrist.position.y = WL \/ 2 + 0.03; wrist.castShadow = true; j4.add(wrist);\r\n\r\n  var j5 = new THREE.Group(); j5.position.y = WL + 0.08; j4.add(j5);\r\n  var hub = new THREE.Mesh(new THREE.CylinderGeometry(0.085, 0.085, 0.09, 24), M_JOINT);\r\n  hub.castShadow = true; j5.add(hub);\r\n  var hubRing = new THREE.Mesh(new THREE.TorusGeometry(0.09, 0.010, 8, 36), M_NEON);\r\n  hubRing.rotation.x = Math.PI \/ 2; j5.add(hubRing);\r\n\r\n  var gBase = new THREE.Mesh(new THREE.BoxGeometry(0.20, 0.08, 0.14), M_BODY);\r\n  gBase.position.y = 0.095; gBase.castShadow = true; j5.add(gBase);\r\n\r\n  var fGeo = new THREE.BoxGeometry(0.035, 0.17, 0.09);\r\n  var fL = new THREE.Mesh(fGeo, M_JOINT);\r\n  var fR = new THREE.Mesh(fGeo, M_JOINT);\r\n  fL.castShadow = fR.castShadow = true;\r\n  fL.position.set(-0.081, 0.215, 0);\r\n  fR.position.set( 0.081, 0.215, 0);\r\n  j5.add(fL); j5.add(fR);\r\n\r\n  var tipGeo = new THREE.BoxGeometry(0.037, 0.022, 0.092);\r\n  var tipL = new THREE.Mesh(tipGeo, M_NEON); tipL.position.y = 0.074; fL.add(tipL);\r\n  var tipR = new THREE.Mesh(tipGeo, M_NEON); tipR.position.y = 0.074; fR.add(tipR);\r\n\r\n  var tcp = new THREE.Group(); tcp.position.y = 0.27; j5.add(tcp);\r\n  var tipFlare  = glow(0.5, 0.85, TG_CORE); tcp.add(tipFlare);\r\n  var tipFlareO = glow(1.15, 0.28);         tcp.add(tipFlareO);\r\n\r\n  var jg2 = glow(0.75, 0.28); j2.add(jg2);\r\n  var jg3 = glow(0.68, 0.28); j3.add(jg3);\r\n  var jg4 = glow(0.55, 0.28); j4.add(jg4);\r\n  var jg5 = glow(0.45, 0.28); j5.add(jg5);\r\n\r\n  function makePad() {\r\n    var g = new THREE.Group();\r\n    var b = new THREE.Mesh(new THREE.CylinderGeometry(0.30, 0.34, 0.07, 32), M_DARK);\r\n    b.position.y = 0.035; b.castShadow = b.receiveShadow = true; g.add(b);\r\n    var r = new THREE.Mesh(new THREE.TorusGeometry(0.30, 0.014, 8, 40), M_NEON);\r\n    r.rotation.x = Math.PI \/ 2; r.position.y = 0.072; g.add(r);\r\n    var gl = glow(1.3, 0.4); gl.position.y = 0.1; g.add(gl);\r\n    return g;\r\n  }\r\n  var padPick = makePad(), padPlace = makePad();\r\n  scene.add(padPick); scene.add(padPlace);\r\n\r\n  var CUBE = 0.13;\r\n  var payload = new THREE.Mesh(\r\n    new THREE.BoxGeometry(CUBE, CUBE, CUBE),\r\n    new THREE.MeshStandardMaterial({\r\n      color: 0xbfe6ff, metalness: 0.2, roughness: 0.25,\r\n      emissive: 0x2f9fff, emissiveIntensity: 0.9,\r\n      transparent: true, opacity: 0.96\r\n    })\r\n  );\r\n  payload.castShadow = true; scene.add(payload);\r\n  var payGlow = glow(0.6, 0.5); payload.add(payGlow);\r\n\r\n  function holoPane(w, h, x, y, z, ry) {\r\n    var m = new THREE.Mesh(\r\n      new THREE.PlaneGeometry(w, h),\r\n      new THREE.MeshBasicMaterial({ color: 0x2f8fe0, transparent: true, opacity: 0.05, side: THREE.DoubleSide, blending: THREE.AdditiveBlending, depthWrite: false })\r\n    );\r\n    m.position.set(x, y, z); m.rotation.y = ry;\r\n    var edge = new THREE.LineSegments(\r\n      new THREE.EdgesGeometry(new THREE.PlaneGeometry(w, h)),\r\n      new THREE.LineBasicMaterial({ color: 0x4fb0ff, transparent: true, opacity: 0.35 })\r\n    );\r\n    m.add(edge); scene.add(m);\r\n  }\r\n  holoPane(1.6, 0.9, -2.9, 1.7, -1.9, 0.5);\r\n  holoPane(1.2, 0.7,  3.0, 2.0, -2.2,-0.45);\r\n\r\n  var TN = 140;\r\n  function mkTrail(cNear, cFar) {\r\n    var geo = new THREE.BufferGeometry();\r\n    var pos = new Float32Array(TN * 3), col = new Float32Array(TN * 3);\r\n    geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));\r\n    geo.setAttribute('color',    new THREE.BufferAttribute(col, 3));\r\n    var mat = new THREE.PointsMaterial({ size: 0.05, vertexColors: true, blending: THREE.AdditiveBlending, transparent: true, depthWrite: false, map: TG_BLUE, sizeAttenuation: true });\r\n    var p = new THREE.Points(geo, mat); p.frustumCulled = false; scene.add(p);\r\n    return { geo: geo, pos: pos, col: col, life: new Float32Array(TN), head: 0, cN: new THREE.Color(cNear), cF: new THREE.Color(cFar), last: new THREE.Vector3(1e9,0,0) };\r\n  }\r\n  var trails = [];\r\n  if (!REDUCED) {\r\n    trails.push({ node: j3,  t: mkTrail(0xbfe4ff, 0x1c5fa8) });\r\n    trails.push({ node: j4,  t: mkTrail(0x9fd4ff, 0x184f90) });\r\n    trails.push({ node: tcp, t: mkTrail(0xffffff, 0x2f8fe0) });\r\n  }\r\n  var _wp = new THREE.Vector3(), _tc = new THREE.Color();\r\n  function updTrail(rec, dt) {\r\n    var t = rec.t;\r\n    rec.node.getWorldPosition(_wp);\r\n    if (_wp.distanceTo(t.last) > 0.006) {\r\n      t.head = (t.head + 1) % TN;\r\n      t.pos[t.head*3] = _wp.x; t.pos[t.head*3+1] = _wp.y; t.pos[t.head*3+2] = _wp.z;\r\n      t.life[t.head] = 1; t.last.copy(_wp);\r\n    }\r\n    for (var i = 0; i < TN; i++) {\r\n      if (t.life[i] <= 0) continue;\r\n      t.life[i] -= dt * 0.9;\r\n      var L = Math.max(t.life[i], 0);\r\n      _tc.copy(t.cF).lerp(t.cN, L).multiplyScalar(L * L);\r\n      t.col[i*3] = _tc.r; t.col[i*3+1] = _tc.g; t.col[i*3+2] = _tc.b;\r\n    }\r\n    t.geo.attributes.position.needsUpdate = true;\r\n    t.geo.attributes.color.needsUpdate = true;\r\n  }\r\n\r\n  var dust = null;\r\n  if (!REDUCED) {\r\n    var DN = 140, dg = new THREE.BufferGeometry(), dp = new Float32Array(DN * 3);\r\n    for (var di = 0; di < DN; di++) {\r\n      dp[di*3] = (Math.random()-0.5)*12;\r\n      dp[di*3+1] = Math.random()*4.5;\r\n      dp[di*3+2] = (Math.random()-0.5)*12;\r\n    }\r\n    dg.setAttribute('position', new THREE.BufferAttribute(dp, 3));\r\n    dust = new THREE.Points(dg, new THREE.PointsMaterial({ size: 0.018, color: 0x7fc0ff, transparent: true, opacity: 0.3, blending: THREE.AdditiveBlending, depthWrite: false }));\r\n    scene.add(dust);\r\n  }\r\n\r\n  var PI = Math.PI;\r\n  var P = {\r\n    HOME:     [ 0.00, 0.45, 1.00, -0.55,  0.00, 1],\r\n    PREPICK:  [ 0.92, 0.85, 1.30,  PI - 2.15,  0.55, 1],\r\n    PICK:     [ 0.92, 1.05, 1.35,  PI - 2.40,  0.55, 1],\r\n    GRASP:    [ 0.92, 1.05, 1.35,  PI - 2.40,  0.55, 0],\r\n    LIFT:     [ 0.92, 0.85, 1.30,  PI - 2.15,  0.55, 0],\r\n    PREPLACE: [-0.92, 0.85, 1.30,  PI - 2.15, -0.55, 0],\r\n    PLACE:    [-0.92, 1.05, 1.35,  PI - 2.40, -0.55, 0],\r\n    RELEASE:  [-0.92, 1.05, 1.35,  PI - 2.40, -0.55, 1],\r\n    RETRACT:  [-0.92, 0.85, 1.30,  PI - 2.15, -0.55, 1]\r\n  };\r\n  var PGM = [\r\n    { name: 'HOME \u00b7 SYNC',  to: P.HOME,     dur: 1.0 },\r\n    { name: 'MOVE \u203a PICK',  to: P.PREPICK,  dur: 1.6 },\r\n    { name: 'DESCEND',      to: P.PICK,     dur: 1.0 },\r\n    { name: 'GRASP',        to: P.GRASP,    dur: 0.55, onEnd: 'grab' },\r\n    { name: 'LIFT',         to: P.LIFT,     dur: 0.9 },\r\n    { name: 'TRANSIT',      to: P.PREPLACE, dur: 2.0 },\r\n    { name: 'DESCEND',      to: P.PLACE,    dur: 1.0 },\r\n    { name: 'RELEASE',      to: P.RELEASE,  dur: 0.55, onEnd: 'drop' },\r\n    { name: 'RETRACT',      to: P.RETRACT,  dur: 0.9 },\r\n    { name: 'RETURN HOME',  to: P.HOME,     dur: 1.6, onEnd: 'cycle' }\r\n  ];\r\n\r\n  function ease(t) { return t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2,3)\/2; }\r\n  function lerp(a, b, t) { return a + (b-a)*t; }\r\n\r\n  var sIdx = 0, sT = 0;\r\n  var from = P.HOME.slice();\r\n  var cur  = P.HOME.slice();\r\n  var holding = false;\r\n\r\n  function applyPose(p) {\r\n    j1.rotation.y = p[0];\r\n    j2.rotation.z = p[1];\r\n    j3.rotation.z = p[2];\r\n    j4.rotation.z = p[3];\r\n    j5.rotation.y = p[4];\r\n    var o = p[5];\r\n    fL.position.x = -0.038 - 0.046 * o;\r\n    fR.position.x =  0.038 + 0.046 * o;\r\n  }\r\n\r\n  function tipAt(p) {\r\n    applyPose(p);\r\n    robot.updateMatrixWorld(true);\r\n    var v = new THREE.Vector3();\r\n    tcp.getWorldPosition(v);\r\n    return v;\r\n  }\r\n  var pickPos  = tipAt(P.PICK);\r\n  var placePos = tipAt(P.PLACE);\r\n  padPick.position.set(pickPos.x,  0, pickPos.z);\r\n  padPlace.position.set(placePos.x, 0, placePos.z);\r\n\r\n  var PAD_TOP = 0.07;\r\n  function seatPayload() {\r\n    payload.position.set(pickPos.x, PAD_TOP + CUBE \/ 2, pickPos.z);\r\n    payload.rotation.set(0, 0, 0);\r\n  }\r\n  seatPayload();\r\n  applyPose(P.HOME);\r\n\r\n  function grab() {\r\n    if (holding) return;\r\n    holding = true;\r\n    tcp.attach(payload);\r\n    payload.position.set(0, 0.02, 0);\r\n    payload.rotation.set(0, 0, 0);\r\n  }\r\n  function drop() {\r\n    if (!holding) return;\r\n    holding = false;\r\n    scene.attach(payload);\r\n    payload.position.set(placePos.x, PAD_TOP + CUBE\/2, placePos.z);\r\n    payload.rotation.set(0, 0, 0);\r\n  }\r\n\r\n  var clock = new THREE.Clock(), el = 0;\r\n  var rtapeSection = document.getElementById('rtape');\r\n  var threeRunning = false;\r\n  var threeInView = false;\r\n  var threeRaf = 0;\r\n\r\n  function animate() {\r\n    if (!threeRunning) return;\r\n    threeRaf = requestAnimationFrame(animate);\r\n\r\n    var dt = Math.min(clock.getDelta(), 0.05);\r\n    el += dt;\r\n\r\n    var step = PGM[sIdx];\r\n    sT += dt \/ step.dur;\r\n    var k = ease(Math.min(sT, 1));\r\n    for (var i = 0; i < 6; i++) cur[i] = lerp(from[i], step.to[i], k);\r\n    applyPose(cur);\r\n\r\n    if (sT >= 1) {\r\n      if (step.onEnd === 'grab')  grab();\r\n      if (step.onEnd === 'drop')  drop();\r\n      if (step.onEnd === 'cycle') seatPayload();\r\n      from = step.to.slice();\r\n      sIdx = (sIdx + 1) % PGM.length;\r\n      sT = 0;\r\n    }\r\n\r\n    for (var ti = 0; ti < trails.length; ti++) updTrail(trails[ti], dt);\r\n\r\n    var fl = 0.75 + Math.sin(el*9)*0.08 + Math.sin(el*23)*0.04;\r\n    tipFlare.material.opacity  = 0.6 * fl;\r\n    tipFlareO.material.opacity = 0.2 * fl;\r\n    pedGlow.material.opacity   = 0.38 + Math.sin(el*1.6)*0.10;\r\n    M_NEON.emissiveIntensity   = 2.2 + Math.sin(el*2.2)*0.5;\r\n\r\n    if (dust) dust.rotation.y = el * 0.008;\r\n\r\n    if (!REDUCED) {\r\n      var ca = Math.sin(el*0.10)*0.15;\r\n      var rad = 6.6 + Math.sin(el*0.065)*0.22;\r\n      camera.position.x = Math.sin(0.72 + ca) * rad;\r\n      camera.position.z = Math.cos(0.72 + ca) * rad;\r\n      camera.position.y = 2.7 + Math.sin(el*0.15)*0.16;\r\n    } else {\r\n      camera.position.set(4.4, 2.7, 4.9);\r\n    }\r\n    camera.lookAt(TARGET);\r\n    renderer.render(scene, camera);\r\n  }\r\n\r\n  function syncThree(){\r\n    var shouldRun = threeInView && !document.hidden;\r\n    if (shouldRun && !threeRunning) {\r\n      threeRunning = true;\r\n      clock.getDelta(); \/* discard time spent paused *\/\r\n      threeRaf = requestAnimationFrame(animate);\r\n    } else if (!shouldRun && threeRunning) {\r\n      threeRunning = false;\r\n      if (threeRaf) cancelAnimationFrame(threeRaf);\r\n      threeRaf = 0;\r\n    }\r\n  }\r\n\r\n  if ('IntersectionObserver' in window && rtapeSection) {\r\n    new IntersectionObserver(function(entries){\r\n      threeInView = entries[0].isIntersecting;\r\n      syncThree();\r\n    }, { rootMargin: '260px 0px', threshold: 0 }).observe(rtapeSection);\r\n  } else {\r\n    threeInView = true;\r\n  }\r\n\r\n  document.addEventListener('visibilitychange', syncThree);\r\n  syncThree();\r\n})();\r\n\r\n\/* \u2500\u2500 RTAPE: STACKING CARD SCROLL ANIMATION \u2014 rAF throttled \u2500\u2500 *\/\r\n(function () {\r\n  var stack = document.querySelector('#rtape .rt-stack');\r\n  var section = document.getElementById('rtape');\r\n  var panels = Array.prototype.slice.call(document.querySelectorAll('#rtape .rt-panel'));\r\n  var N = panels.length;\r\n  if (!stack || !section || N === 0) return;\r\n\r\n  var scheduled = false;\r\n  var inView = false;\r\n\r\n  function eio(t) { return t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2, 3)\/2; }\r\n\r\n  function update() {\r\n    scheduled = false;\r\n\r\n    if (window.innerWidth < 900) {\r\n      for (var i = 0; i < N; i++) panels[i].style.transform = '';\r\n      return;\r\n    }\r\n    if (!inView) return;\r\n\r\n    var rect = stack.getBoundingClientRect();\r\n    var scrolled = -rect.top;\r\n    var total = stack.offsetHeight - window.innerHeight;\r\n    var progress = total > 0 ? Math.max(0, Math.min(1, scrolled \/ total)) : 0;\r\n\r\n    for (var i = 0; i < N; i++) {\r\n      var targetScale = 1 - (N - i) * 0.05;\r\n      var rangeStart = i \/ N;\r\n      var localP = progress <= rangeStart ? 0 : Math.min(1, (progress - rangeStart) \/ (1 - rangeStart));\r\n      var scale = 1 - (1 - targetScale) * eio(localP);\r\n      panels[i].style.transform = 'translateZ(0) scale(' + scale.toFixed(4) + ')';\r\n    }\r\n  }\r\n\r\n  function scheduleUpdate(){\r\n    if (scheduled) return;\r\n    scheduled = true;\r\n    requestAnimationFrame(update);\r\n  }\r\n\r\n  window.addEventListener('scroll', function(){\r\n    if (inView) scheduleUpdate();\r\n  }, { passive: true });\r\n\r\n  window.addEventListener('resize', scheduleUpdate, { passive: true });\r\n\r\n  if ('IntersectionObserver' in window) {\r\n    new IntersectionObserver(function(entries){\r\n      inView = entries[0].isIntersecting;\r\n      if (inView) scheduleUpdate();\r\n    }, { rootMargin: '120px 0px', threshold: 0 }).observe(section);\r\n  } else {\r\n    inView = true;\r\n    scheduleUpdate();\r\n  }\r\n\r\n  var mtrack = document.getElementById('rt-marquee-track');\r\n  if (mtrack && mtrack.children[0] && !mtrack.dataset.cloned) {\r\n    mtrack.dataset.cloned = '1';\r\n    mtrack.appendChild(mtrack.children[0].cloneNode(true));\r\n  }\r\n\r\n  var rvObs = new IntersectionObserver(function (ents) {\r\n    ents.forEach(function (e) {\r\n      if (e.isIntersecting) {\r\n        e.target.classList.add('vis');\r\n        rvObs.unobserve(e.target);\r\n      }\r\n    });\r\n  }, { threshold: 0.1 });\r\n  document.querySelectorAll('#rtape .rv').forEach(function (el) { rvObs.observe(el); });\r\n})();\r\n<\/script>\r\n\r\n<script>\r\n\/* \u2500\u2500 CAPABILITIES v3 \u2500\u2500 *\/\r\n(function(){\r\n  var CAPS=[\r\n    {num:'01',title:'Automatic Tube Bender',img:'http:\/\/uisb.com\/wp-content\/uploads\/2026\/07\/Robot_in_indoor_workshop_2K_202607171528.jpeg',desc:'Precision tube forming for complex geometries with consistent dimensional accuracy'},\r\n    {num:'02',title:'Semi-Auto Robot Welding',img:'http:\/\/uisb.com\/wp-content\/uploads\/2026\/07\/Robot_welding_with_sparks_2K_202607171221-scaled.jpeg',desc:'Automated welding delivering repeatable quality, structural integrity and production efficiency.'},\r\n    {num:'03',title:'Robotic Brazing',img:'http:\/\/uisb.com\/wp-content\/uploads\/2026\/09\/Robot_brazing_fuel_filler_pipe_2K_202609091050.jpeg',desc:'Controlled robotic brazing for clean, durable joints and consistent thermal performance.'},\r\n    {num:'04',title:'Seaming',img:'http:\/\/uisb.com\/wp-content\/uploads\/2026\/07\/Indoor_workshop_clean_tidy_envir\u2026_202607171249.jpeg',desc:'Precision seaming technology ensuring secure assembly and long-term product reliability'},\r\n    {num:'05',title:'Milling',img:'http:\/\/uisb.com\/wp-content\/uploads\/2026\/07\/Indoor_workshop_clean_tidy_envir\u2026_202607171246.jpeg',desc:'Advanced CNC machining for high-precision components with tight tolerance control.'},\r\n    {num:'06',title:'Laser Cutting',img:'http:\/\/uisb.com\/wp-content\/uploads\/2026\/07\/Robot_in_indoor_workshop_2K_202607171532.jpeg',desc:'High-speed laser cutting providing exceptional accuracy and clean edge quality.'},\r\n    {num:'07',title:'3D Printing',img:'http:\/\/uisb.com\/wp-content\/uploads\/2026\/07\/Indoor_workshop_clean_tidy_envir\u2026_202607171439.jpeg',desc:'Rapid prototyping and fixture development to accelerate product and process validation.'},\r\n    {num:'08',title:'Auto Feeder',img:'http:\/\/uisb.com\/wp-content\/uploads\/2026\/07\/recreate_image_4k_res_2K_202607171211-scaled.jpeg',desc:'Automated material handling designed to optimise throughput and production stability.'},\r\n    {num:'09',title:'COBOT Pick and Place',img:'http:\/\/uisb.com\/wp-content\/uploads\/2026\/09\/Edit_robot_environment_image_2K_202609091032.jpeg',desc:'Collaborative automation improving manufacturing flexibility, consistency and operator efficiency.'},\r\n    {num:'10',title:'Wirecutting',img:'http:\/\/uisb.com\/wp-content\/uploads\/2026\/07\/Indoor_lab_lighting_cinematic_view_202607171241.jpeg',desc:'Wire EDM machining for precision tooling and complex profiles with superior accuracy.'}\r\n  ];\r\n\r\n  var grid=document.getElementById('cap3Grid');\r\n  if(!grid) return;\r\n\r\n  CAPS.forEach(function(cap,i){\r\n    var card=document.createElement('div');\r\n    card.className='cap3-card';\r\n    card.style.transitionDelay=(i*55)+'ms';\r\n    card.innerHTML=\r\n      '<div class=\"cap3-shadow\"><img decoding=\"async\" class=\"cap3-shadow-img\" src=\"'+cap.img+'\" alt=\"\" loading=\"lazy\"><\/div>'+\r\n      '<div class=\"cap3-inner\">'+\r\n        '<img decoding=\"async\" class=\"cap3-img\" src=\"'+cap.img+'\" alt=\"'+cap.title+'\" loading=\"lazy\">'+\r\n        '<span class=\"cap3-badge\">'+cap.num+'<\/span>'+\r\n        '<h3 class=\"cap3-title-rest\">'+cap.title+'<\/h3>'+\r\n        '<div class=\"cap3-overlay\">'+\r\n          '<span class=\"cap3-ov-num\">'+cap.num+'<\/span>'+\r\n          '<h3 class=\"cap3-ov-title\">'+cap.title+'<\/h3>'+\r\n          '<p class=\"cap3-ov-desc\">'+cap.desc+'<\/p>'+\r\n        '<\/div>'+\r\n        '<div class=\"cap3-glow\"><\/div>'+\r\n      '<\/div>';\r\n\r\n    card.addEventListener('pointermove',function(e){\r\n      var r=card.getBoundingClientRect();\r\n      card.style.setProperty('--x',((e.clientX-r.left)\/r.width*100).toFixed(1)+'%');\r\n      card.style.setProperty('--y',((e.clientY-r.top)\/r.height*100).toFixed(1)+'%');\r\n    });\r\n    card.addEventListener('mouseenter',function(){ card.classList.add('is-hovered'); });\r\n    card.addEventListener('mouseleave',function(){ card.classList.remove('is-hovered'); });\r\n\r\n    grid.appendChild(card);\r\n  });\r\n\r\n  var section=document.querySelector('.cap3-section');\r\n  function revealCards(){\r\n    grid.querySelectorAll('.cap3-card').forEach(function(c){ c.classList.add('is-in'); });\r\n  }\r\n  if('IntersectionObserver' in window){\r\n    var io=new IntersectionObserver(function(entries){\r\n      if(!entries[0].isIntersecting) return;\r\n      revealCards();\r\n      io.disconnect();\r\n    },{threshold:0.06,rootMargin:'0px 0px -30px 0px'});\r\n    io.observe(section||grid);\r\n  }\r\n  setTimeout(function(){\r\n    if(section){ var r=section.getBoundingClientRect(); if(r.top<window.innerHeight) revealCards(); }\r\n  },500);\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>Solutions &#038; Capabilities Our Solutions&#038; Capabilities From advanced engineering and tooling to robotics, automation and precision manufacturing \u2014 delivering integrated [&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-2895","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/pages\/2895","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=2895"}],"version-history":[{"count":62,"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/pages\/2895\/revisions"}],"predecessor-version":[{"id":4013,"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/pages\/2895\/revisions\/4013"}],"wp:attachment":[{"href":"https:\/\/uisb.com\/zh\/wp-json\/wp\/v2\/media?parent=2895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}