{"id":23,"date":"2026-06-04T02:16:17","date_gmt":"2026-06-04T02:16:17","guid":{"rendered":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/home\/"},"modified":"2026-06-04T09:01:27","modified_gmt":"2026-06-04T09:01:27","slug":"old-home","status":"publish","type":"page","link":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/old-home\/","title":{"rendered":"\uba54\uc778 (\uad6c)"},"content":{"rendered":"<div class=\"nv-page\" id=\"nvPage\">\n<script>\n  (function(){\n    try {\n      document.getElementById('nvPage').classList.add('js-active');\n      setTimeout(function() {\n        if (!window.nvScriptsLoaded) {\n          document.getElementById('nvPage').classList.remove('js-active');\n          console.warn(\"NextVision scripts loading timed out or failed. Reverting to fallback static layout.\");\n        }\n      }, 1500);\n    } catch(e) {}\n  })();\n<\/script>\n\n\n<!-- CDN -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n\n<!-- Scroll Progress -->\n<div class=\"nv-scroll-progress\" id=\"nvScrollProgress\"><\/div>\n\n<!-- Page Transition -->\n<div class=\"nv-page-transition\" id=\"nvPageTransition\"><\/div>\n\n<!-- Cursor Follower -->\n<div class=\"nv-cursor-follower\" id=\"nvCursorFollower\"><\/div>\n\n<style>\/* ============================================\n   CSS CUSTOM PROPERTIES\n   ============================================ *\/\n:root {\n  --bg: #0a0a1a;\n  --surface: #111127;\n  --card: #1a1a3e;\n  --primary: #00d4ff;\n  --secondary: #7c3aed;\n  --gradient: linear-gradient(135deg, #00d4ff, #7c3aed);\n  --text-primary: #ffffff;\n  --text-secondary: #94a3b8;\n  --text-muted: #64748b;\n  --border: rgba(255,255,255,0.08);\n  --glow-cyan: rgba(0, 212, 255, 0.3);\n  --glow-purple: rgba(124, 58, 237, 0.3);\n  --font-heading: 'Outfit', 'Inter', sans-serif;\n  --font-body: 'Inter', 'Noto Sans KR', sans-serif;\n}\n\n\n\/* ============================================\n   RESET & BASE\n   ============================================ *\/\n*, *::before, *::after {\n  margin: 0; padding: 0; box-sizing: border-box;\n}\n\nbody {\n  background: var(--bg) !important;\n  color: var(--text-primary);\n  font-family: var(--font-body);\n  overflow-x: hidden;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\nbody, html, #page, #content, .site-content, article, .inside-article, .entry-content, .wp-block-post-content, .wp-site-blocks, .site-main, .inside-page-header, .page-header, .site, .site-header, .site-footer {\n  background: #0a0a1a !important;\n  background-color: #0a0a1a !important;\n}\n\n\n\n\/* Cursor Follower Style *\/\n.nv-cursor-follower {\n  width: 24px;\n  height: 24px;\n  background: radial-gradient(circle, var(--primary) 0%, rgba(124, 58, 237, 0.4) 60%, transparent 100%);\n  border-radius: 50%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: 999999;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  mix-blend-mode: screen;\n  filter: blur(2px);\n  box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);\n  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n\n.site-header, .site-footer, .site-info, .main-navigation, .skip-link, .sidebar, \n.wp-site-blocks > header, .wp-site-blocks > footer, header.site-header, footer.site-footer, \n.entry-title, .page-header {\n  display: none !important;\n}\n\nbody, html { margin: 0 !important; padding: 0 !important; background: #0a0a1a !important; }\n\n.inside-article, .entry-content, .wp-block-post-content, #page, #content, .site-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }\n\na { text-decoration: none; color: inherit; }\n\nimg { max-width: 100%; }\n\nul, ol { list-style: none; }\n\n\n\/* ============================================\n   SCROLL PROGRESS BAR\n   ============================================ *\/\n.nv-scroll-progress {\n  position: fixed; top: 0; left: 0; height: 3px; width: 0%;\n  background: var(--gradient);\n  z-index: 10001;\n  transition: width 0.1s linear;\n  box-shadow: 0 0 10px var(--glow-cyan);\n}\n\n\n\/* ============================================\n   PAGE TRANSITION\n   ============================================ *\/\n.nv-page-transition {\n  position: fixed; inset: 0;\n  background: var(--bg);\n  z-index: 99999;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n.nv-page-transition.active {\n  opacity: 1;\n  pointer-events: all;\n}\n\n\n\/* ============================================\n   NAVIGATION\n   ============================================ *\/\n\n\n\n\n\n\n@keyframes nvLogoPulse {\n  0%, 100% { filter: drop-shadow(0 0 8px var(--glow-cyan)); }\n  50% { filter: drop-shadow(0 0 16px var(--glow-purple)); }\n}\n\n\n\n\n\n\n\n\n\/* Hamburger *\/\n\n\n\n\n\n\n\/* Mobile menu *\/\n\n\n\n\n\n\n\n\/* ============================================\n   HERO SECTION\n   ============================================ *\/\n.nv-hero {\n  position: relative;\n  width: 100%;\n  height: 100vh;\n  min-height: 700px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  background: var(--bg);\n}\n\n.nv-hero-canvas {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%;\n  z-index: 1;\n}\n\n.nv-hero-glow {\n  position: absolute;\n  width: 600px; height: 600px;\n  border-radius: 50%;\n  background: radial-gradient(circle, var(--glow-cyan), transparent 70%);\n  opacity: 0.15;\n  pointer-events: none;\n  z-index: 2;\n  transition: transform 0.1s ease-out;\n  mix-blend-mode: screen;\n}\n\n.nv-hero-content {\n  position: relative;\n  z-index: 3;\n  text-align: center;\n  max-width: 900px;\n  padding: 0 20px;\n}\n\n.nv-hero-label {\n  display: inline-block;\n  font-family: 'Inter', sans-serif;\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  color: var(--primary);\n  margin-bottom: 24px;\n  padding: 8px 24px;\n  border: 1px solid rgba(0,212,255,0.3);\n  border-radius: 30px;\n  background: rgba(0,212,255,0.05);\n}\n\n.js-active .nv-hero-label {\n  opacity: 0;\n  animation: nvFadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\n  animation-delay: 0.3s;\n}\n\n.nv-hero-title {\n  font-size: clamp(40px, 7vw, 80px);\n  font-weight: 900;\n  line-height: 1.15;\n  margin-bottom: 28px;\n  letter-spacing: -2px;\n}\n\n.nv-hero-title .char-reveal {\n  display: inline-block;\n}\n\n.js-active .nv-hero-title .char-reveal {\n  opacity: 0;\n  transform: translateY(30px) rotateX(-20deg);\n  animation: nvCharFadeIn 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;\n  \/* Direct gradient to fix parent clipping + transform bug *\/\n  background: var(--gradient);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-size: 200% 200%;\n}\n\n.nv-hero-title .gradient-text {\n  background: var(--gradient);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-size: 200% 200%;\n  animation: nvGradientShift 4s ease-in-out infinite;\n}\n\n.js-active .nv-hero-title .gradient-text {\n  background: none !important;\n  -webkit-background-clip: initial !important;\n  -webkit-text-fill-color: initial !important;\n  animation: none !important;\n}\n\n@keyframes nvGradientShift {\n  0%, 100% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n}\n\n.nv-hero-subtitle {\n  font-size: clamp(16px, 2vw, 20px);\n  color: var(--text-secondary);\n  line-height: 1.7;\n  margin-bottom: 48px;\n  font-weight: 300;\n  max-width: 680px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.js-active .nv-hero-subtitle {\n  opacity: 0;\n  animation: nvFadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\n  animation-delay: 1.1s;\n}\n\n.nv-hero-cta {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  padding: 18px 42px;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--bg);\n  background: var(--gradient);\n  border: none;\n  border-radius: 60px;\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n  transition: transform 0.4s, box-shadow 0.4s;\n  font-family: 'Noto Sans KR', sans-serif;\n  text-decoration: none;\n  box-shadow: 0 0 30px var(--glow-cyan), 0 0 60px rgba(0,212,255,0.15);\n}\n\n.js-active .nv-hero-cta {\n  opacity: 0;\n  animation: nvFadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\n  animation-delay: 1.3s;\n}\n\n.nv-hero-cta:hover {\n  transform: translateY(-3px) scale(1.04);\n  box-shadow: 0 0 40px var(--glow-cyan), 0 0 80px rgba(0,212,255,0.25);\n}\n\n.nv-hero-cta::before {\n  content: '';\n  position: absolute; inset: 0;\n  background: linear-gradient(135deg, rgba(255,255,255,0.3), transparent 50%);\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n\n.nv-hero-cta:hover::before { opacity: 1; }\n\n.nv-hero-cta svg {\n  transition: transform 0.3s;\n}\n\n.nv-hero-cta:hover svg { transform: translateX(4px); }\n\n\n\/* Scroll indicator *\/\n.nv-scroll-indicator {\n  position: absolute;\n  bottom: 40px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 5;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  opacity: 0;\n  animation: nvFadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\n  animation-delay: 1.5s;\n}\n\n.nv-scroll-indicator span {\n  font-size: 11px;\n  font-family: 'Inter', sans-serif;\n  color: var(--text-muted);\n  letter-spacing: 3px;\n  text-transform: uppercase;\n}\n\n.nv-scroll-mouse {\n  width: 24px; height: 38px;\n  border: 2px solid var(--text-muted);\n  border-radius: 12px;\n  position: relative;\n}\n\n.nv-scroll-mouse::before {\n  content: '';\n  position: absolute;\n  top: 6px; left: 50%;\n  transform: translateX(-50%);\n  width: 3px; height: 8px;\n  background: var(--primary);\n  border-radius: 3px;\n  animation: nvScrollDot 2s ease-in-out infinite;\n}\n\n@keyframes nvScrollDot {\n  0%, 100% { top: 6px; opacity: 1; }\n  50% { top: 20px; opacity: 0.3; }\n}\n\n\n\/* ============================================\n   SECTION COMMON\n   ============================================ *\/\n.nv-section {\n  padding: 120px 40px;\n  position: relative;\n  overflow: hidden;\n}\n\n.nv-section-inner {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.nv-section-label {\n  display: inline-block;\n  font-family: 'Inter', sans-serif;\n  font-size: 12px;\n  font-weight: 600;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  color: var(--primary);\n  margin-bottom: 16px;\n}\n\n.nv-section-title {\n  font-size: clamp(32px, 5vw, 56px);\n  font-weight: 900;\n  margin-bottom: 20px;\n  line-height: 1.2;\n  letter-spacing: -1px;\n}\n\n.nv-section-title .gradient-text {\n  background: var(--gradient);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.nv-section-desc {\n  font-size: 18px;\n  color: var(--text-secondary);\n  line-height: 1.8;\n  max-width: 600px;\n  font-weight: 300;\n}\n\n.nv-section-header {\n  text-align: center;\n  margin-bottom: 80px;\n}\n\n.nv-section-header .nv-section-desc {\n  margin: 0 auto;\n}\n\n\n\/* ============================================\n   ABOUT PREVIEW\n   ============================================ *\/\n.nv-about-section {\n  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n  color: #0f172a;\n}\n\n.nv-about-section .nv-section-title {\n  color: #0f172a;\n}\n\n.nv-about-section .nv-section-desc {\n  color: #475569;\n}\n\n.nv-about-section::before {\n  content: '';\n  position: absolute; top: -200px; right: -200px;\n  width: 600px; height: 600px;\n  background: radial-gradient(circle, rgba(0, 212, 255, 0.2), transparent 70%);\n  opacity: 0.2;\n  pointer-events: none;\n}\n\n.nv-about-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 80px;\n  align-items: center;\n}\n\n.nv-about-text p {\n  font-size: 17px;\n  color: #334155;\n  line-height: 2;\n  margin-bottom: 32px;\n  font-weight: 300;\n}\n\n.nv-about-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--secondary);\n  padding: 12px 0;\n  border-bottom: 2px solid transparent;\n  transition: all 0.3s;\n}\n\n.nv-about-link:hover {\n  border-bottom-color: var(--secondary);\n  gap: 16px;\n}\n\n.nv-stats-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px;\n}\n\n.nv-stat-card {\n  background: rgba(255, 255, 255, 0.65);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  border: 1px solid rgba(15, 23, 42, 0.06);\n  border-radius: 20px;\n  padding: 36px 28px;\n  text-align: center;\n  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  position: relative;\n  overflow: hidden;\n  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);\n}\n\n.nv-stat-card::before {\n  content: '';\n  position: absolute; inset: 0;\n  background: var(--gradient);\n  opacity: 0;\n  transition: opacity 0.4s;\n}\n\n.nv-stat-card:hover {\n  transform: translateY(-6px);\n  border-color: rgba(124, 58, 237, 0.15);\n  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08), 0 0 20px rgba(0, 212, 255, 0.1);\n}\n\n.nv-stat-card:hover::before { opacity: 0.02; }\n\n.nv-stat-card > * { position: relative; z-index: 1; }\n\n.nv-stat-number {\n  font-family: 'Inter', sans-serif;\n  font-size: 42px;\n  font-weight: 800;\n  background: var(--gradient);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  margin-bottom: 8px;\n  line-height: 1;\n}\n\n.nv-stat-label {\n  font-size: 14px;\n  color: #475569;\n  font-weight: 400;\n}\n\n\n\/* ============================================\n   BUSINESS AREAS\n   ============================================ *\/\n.nv-business-section {\n  background: var(--bg);\n}\n\n.nv-business-section .nv-section-inner {\n  max-width: 1440px; \/* Increased from 1200px to allow wider layout *\/\n}\n\n.nv-business-section::after {\n  content: '';\n  position: absolute; bottom: -100px; left: -100px;\n  width: 500px; height: 500px;\n  background: radial-gradient(circle, var(--glow-cyan), transparent 70%);\n  opacity: 0.06;\n  pointer-events: none;\n}\n\n.nv-business-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 28px;\n}\n\n.nv-biz-card {\n  background: rgba(26, 26, 62, 0.6);\n  border: 1px solid var(--border);\n  border-radius: 24px;\n  padding: 32px 24px; \/* Reduced padding from 44px 32px for wider content *\/\n  text-align: center;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  transform-style: preserve-3d;\n  perspective: 800px;\n}\n\n.nv-biz-card::before {\n  content: '';\n  position: absolute; inset: -1px;\n  border-radius: 24px;\n  padding: 1px;\n  background: var(--gradient);\n  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  opacity: 0;\n  transition: opacity 0.4s;\n}\n\n.nv-biz-card:hover::before { opacity: 1; }\n\n.nv-biz-card:hover {\n  transform: translateY(-12px);\n  box-shadow: 0 30px 80px rgba(0,0,0,0.4), 0 0 40px var(--glow-cyan);\n}\n\n.nv-biz-card-glow {\n  position: absolute;\n  top: 50%; left: 50%;\n  transform: translate(-50%, -50%);\n  width: 200px; height: 200px;\n  border-radius: 50%;\n  background: radial-gradient(circle, var(--glow-cyan), transparent 70%);\n  opacity: 0;\n  transition: opacity 0.5s;\n  pointer-events: none;\n}\n\n.nv-biz-card:hover .nv-biz-card-glow { opacity: 0.15; }\n\n.nv-biz-icon {\n  width: 72px; height: 72px;\n  margin: 0 auto 24px;\n  background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(124,58,237,0.1));\n  border-radius: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 32px;\n  transition: all 0.4s;\n  border: 1px solid rgba(0,212,255,0.15);\n}\n\n.nv-biz-card:hover .nv-biz-icon {\n  transform: scale(1.1) rotateY(10deg);\n  box-shadow: 0 0 30px var(--glow-cyan);\n  border-color: rgba(0,212,255,0.4);\n}\n\n.nv-biz-icon svg {\n  width: 36px; height: 36px;\n  stroke: var(--primary);\n  fill: none;\n  stroke-width: 1.5;\n}\n\n.nv-biz-card h3 {\n  font-size: 20px;\n  font-weight: 700;\n  margin-bottom: 14px;\n  transition: color 0.3s;\n}\n\n.nv-biz-card:hover h3 { color: var(--primary); }\n\n.nv-biz-card p {\n  font-size: 14px;\n  color: var(--text-muted);\n  line-height: 1.7;\n  font-weight: 300;\n}\n\n\n\/* Floating animation *\/\n.nv-biz-card:nth-child(1) { animation: nvIdleFloat 6s ease-in-out infinite; }\n.nv-biz-card:nth-child(2) { animation: nvIdleFloat 6s ease-in-out -1.5s infinite; }\n.nv-biz-card:nth-child(3) { animation: nvIdleFloat 6s ease-in-out -3s infinite; }\n.nv-biz-card:nth-child(4) { animation: nvIdleFloat 6s ease-in-out -4.5s infinite; }\n\n\n\/* ============================================\n   PRODUCTS SHOWCASE\n   ============================================ *\/\n.nv-products-section {\n  background: var(--surface);\n  overflow: hidden;\n}\n\n.nv-products-track-wrap {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  margin-top: 0;\n}\n\n.nv-products-track-wrap::before,\n.nv-products-track-wrap::after {\n  content: '';\n  position: absolute; top: 0; bottom: 0;\n  width: 100px;\n  z-index: 2;\n  pointer-events: none;\n}\n\n.nv-products-track-wrap::before {\n  left: 0;\n  background: linear-gradient(90deg, var(--surface), transparent);\n}\n\n.nv-products-track-wrap::after {\n  right: 0;\n  background: linear-gradient(-90deg, var(--surface), transparent);\n}\n\n.nv-products-track {\n  display: flex;\n  gap: 28px;\n  animation: nvProductScroll 30s linear infinite;\n  width: max-content;\n  padding: 20px 0;\n}\n\n.nv-products-track:hover {\n  animation-play-state: paused;\n}\n\n@keyframes nvProductScroll {\n  0% { transform: translateX(0); }\n  100% { transform: translateX(-50%); }\n}\n\n.nv-product-card {\n  flex-shrink: 0;\n  width: 340px;\n  background: var(--card);\n  border: 1px solid var(--border);\n  border-radius: 24px;\n  padding: 40px 32px;\n  position: relative;\n  overflow: hidden;\n  transition: all 0.4s;\n}\n\n.nv-product-card:hover {\n  border-color: rgba(0,212,255,0.3);\n  box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n  transform: translateY(-4px);\n}\n\n.nv-product-card::before {\n  content: '';\n  position: absolute; top: 0; left: 0; right: 0;\n  height: 3px;\n  background: var(--gradient);\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 0.4s;\n}\n\n.nv-product-card:hover::before { transform: scaleX(1); }\n\n.nv-product-badge {\n  display: inline-block;\n  font-family: 'Inter', sans-serif;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 2px;\n  text-transform: uppercase;\n  color: var(--primary);\n  background: rgba(0,212,255,0.1);\n  padding: 6px 14px;\n  border-radius: 6px;\n  margin-bottom: 20px;\n  border: 1px solid rgba(0,212,255,0.15);\n}\n\n.nv-product-card h3 {\n  font-size: 22px;\n  font-weight: 700;\n  margin-bottom: 14px;\n}\n\n.nv-product-card p {\n  font-size: 14px;\n  color: var(--text-secondary);\n  line-height: 1.8;\n  margin-bottom: 28px;\n  font-weight: 300;\n}\n\n.nv-product-link {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--primary);\n  transition: gap 0.3s, color 0.3s;\n}\n\n.nv-product-link:hover {\n  gap: 14px;\n}\n\n\n\/* ============================================\n   WHY CHOOSE US\n   ============================================ *\/\n.nv-why-section {\n  background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);\n  color: #0f172a;\n}\n\n.nv-why-section .nv-section-title {\n  color: #0f172a;\n}\n\n.nv-why-section .nv-section-desc {\n  color: #475569;\n}\n\n.nv-marquee-wrap {\n  width: 100%;\n  overflow: hidden;\n  margin-bottom: 80px;\n  padding: 20px 0;\n  position: relative;\n}\n\n.nv-marquee-wrap::before,\n.nv-marquee-wrap::after {\n  content: '';\n  position: absolute; top: 0; bottom: 0; width: 120px;\n  z-index: 2; pointer-events: none;\n}\n\n.nv-marquee-wrap::before { left: 0; background: linear-gradient(90deg, #f8fafc, transparent); }\n\n.nv-marquee-wrap::after { right: 0; background: linear-gradient(-90deg, #edf2f7, transparent); }\n\n.nv-marquee-track {\n  display: flex;\n  width: max-content;\n  animation: nvMarquee 20s linear infinite;\n}\n\n@keyframes nvMarquee {\n  0% { transform: translateX(0); }\n  100% { transform: translateX(-50%); }\n}\n\n@keyframes nvIdleFloat {\n  0% { translate: 0 0px; }\n  50% { translate: 0 -5px; }\n  100% { translate: 0 0px; }\n}\n\n.nv-marquee-text {\n  font-family: 'Inter', sans-serif;\n  font-size: clamp(48px, 6vw, 80px);\n  font-weight: 900;\n  white-space: nowrap;\n  padding: 0 20px;\n  color: rgba(15, 23, 42, 0.04);\n  -webkit-text-stroke: 1.5px rgba(15, 23, 42, 0.25);\n  letter-spacing: 4px;\n}\n\n.nv-marquee-text .highlight {\n  color: rgba(124, 58, 237, 0.04);\n  -webkit-text-stroke: 1.5px var(--secondary);\n  filter: drop-shadow(0 0 20px rgba(124, 58, 237, 0.25));\n}\n\n.nv-features-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 32px;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.nv-feature-block {\n  text-align: center;\n  padding: 52px 36px;\n  background: rgba(255, 255, 255, 0.65);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  border: 1px solid rgba(15, 23, 42, 0.06);\n  border-radius: 24px;\n  transition: all 0.4s;\n  position: relative;\n  overflow: hidden;\n  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);\n  color: #0f172a;\n}\n\n.nv-feature-block::after {\n  content: '';\n  position: absolute; bottom: 0; left: 0; right: 0;\n  height: 3px;\n  background: var(--gradient);\n  transform: scaleX(0);\n  transition: transform 0.4s;\n}\n\n.nv-feature-block:hover {\n  transform: translateY(-8px);\n  border-color: rgba(124, 58, 237, 0.15);\n  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);\n}\n\n.nv-feature-block:hover::after { transform: scaleX(1); }\n\n.nv-feature-icon {\n  width: 80px; height: 80px;\n  margin: 0 auto 28px;\n  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(0, 212, 255, 0.08));\n  border-radius: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid rgba(124, 58, 237, 0.1);\n  transition: all 0.4s;\n}\n\n.nv-feature-block:hover .nv-feature-icon {\n  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(0, 212, 255, 0.15));\n  box-shadow: 0 0 20px rgba(124, 58, 237, 0.15);\n}\n\n.nv-feature-icon svg {\n  width: 36px; height: 36px;\n  stroke: var(--secondary);\n  fill: none;\n  stroke-width: 1.5;\n}\n\n.nv-feature-block h3 {\n  font-size: 22px;\n  font-weight: 700;\n  margin-bottom: 16px;\n  color: #0f172a;\n}\n\n.nv-feature-block p {\n  font-size: 15px;\n  color: #475569;\n  line-height: 1.8;\n  font-weight: 300;\n}\n\n\n\/* ============================================\n   CTA SECTION\n   ============================================ *\/\n.nv-cta-section {\n  position: relative;\n  padding: 160px 40px;\n  text-align: center;\n  overflow: hidden;\n  background: linear-gradient(180deg, var(--bg), var(--surface));\n}\n\n.nv-cta-mesh {\n  position: absolute; inset: 0;\n  pointer-events: none;\n  z-index: 0;\n}\n\n.nv-cta-shape {\n  position: absolute;\n  border: 1px solid var(--border);\n  border-radius: 12px;\n  opacity: 0.4;\n  animation: nvCtaFloat 12s ease-in-out infinite;\n}\n\n.nv-cta-shape:nth-child(1) {\n  width: 80px; height: 80px;\n  top: 15%; left: 10%;\n  animation-delay: 0s;\n  transform: rotate(45deg);\n}\n\n.nv-cta-shape:nth-child(2) {\n  width: 50px; height: 50px;\n  top: 25%; right: 15%;\n  animation-delay: -3s;\n  border-radius: 50%;\n  border-color: rgba(0,212,255,0.2);\n}\n\n.nv-cta-shape:nth-child(3) {\n  width: 100px; height: 100px;\n  bottom: 20%; left: 20%;\n  animation-delay: -6s;\n  transform: rotate(20deg);\n  border-color: rgba(124,58,237,0.2);\n}\n\n.nv-cta-shape:nth-child(4) {\n  width: 40px; height: 40px;\n  bottom: 30%; right: 25%;\n  animation-delay: -2s;\n  border-radius: 50%;\n}\n\n.nv-cta-shape:nth-child(5) {\n  width: 60px; height: 60px;\n  top: 60%; left: 50%;\n  animation-delay: -8s;\n  transform: rotate(60deg);\n  border-color: rgba(0,212,255,0.15);\n}\n\n@keyframes nvCtaFloat {\n  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }\n  25% { transform: translateY(-30px) rotate(10deg); opacity: 0.6; }\n  50% { transform: translateY(-15px) rotate(-5deg); opacity: 0.4; }\n  75% { transform: translateY(-40px) rotate(15deg); opacity: 0.5; }\n}\n\n.nv-cta-content {\n  position: relative;\n  z-index: 2;\n}\n\n.nv-cta-title {\n  font-size: clamp(32px, 5vw, 52px);\n  font-weight: 900;\n  margin-bottom: 20px;\n  line-height: 1.3;\n}\n\n.nv-cta-subtitle {\n  font-size: 18px;\n  color: var(--text-secondary);\n  margin-bottom: 48px;\n  font-weight: 300;\n}\n\n.nv-cta-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  padding: 20px 52px;\n  font-size: 17px;\n  font-weight: 700;\n  color: var(--bg);\n  background: var(--gradient);\n  border: none;\n  border-radius: 60px;\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n  transition: all 0.4s;\n  font-family: 'Noto Sans KR', sans-serif;\n  box-shadow: 0 0 40px var(--glow-cyan), 0 0 80px rgba(0,212,255,0.15);\n}\n\n.nv-cta-btn:hover {\n  transform: translateY(-4px) scale(1.05);\n  box-shadow: 0 0 60px var(--glow-cyan), 0 0 120px rgba(0,212,255,0.2);\n}\n\n.nv-cta-btn .ripple {\n  position: absolute;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.4);\n  transform: scale(0);\n  animation: nvRipple 0.8s ease-out;\n  pointer-events: none;\n}\n\n@keyframes nvRipple {\n  to { transform: scale(4); opacity: 0; }\n}\n\n.nv-cta-glow {\n  position: absolute;\n  top: 50%; left: 50%;\n  transform: translate(-50%, -50%);\n  width: 400px; height: 400px;\n  border-radius: 50%;\n  background: radial-gradient(circle, var(--glow-purple), transparent 70%);\n  opacity: 0.12;\n  animation: nvCtaPulse 5s ease-in-out infinite;\n  pointer-events: none;\n}\n\n@keyframes nvCtaPulse {\n  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.12; }\n  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.2; }\n}\n\n\n\/* ============================================\n   FOOTER\n   ============================================ *\/\n\n\n\n\n\n\n\n\n\n\n\n\/* ============================================\n   TOP BUTTON\n   ============================================ *\/\n.nv-top-btn {\n  position: fixed;\n  bottom: 32px; right: 32px;\n  width: 48px; height: 48px;\n  border-radius: 50%;\n  border: 1px solid var(--border);\n  background: rgba(17, 17, 39, 0.9);\n  backdrop-filter: blur(12px);\n  color: var(--text-primary);\n  cursor: pointer;\n  z-index: 9998;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transform: translateY(20px);\n  transition: all 0.4s;\n  pointer-events: none;\n}\n\n.nv-top-btn.visible {\n  opacity: 1;\n  transform: translateY(0);\n  pointer-events: all;\n}\n\n.nv-top-btn:hover {\n  background: var(--primary);\n  color: var(--bg);\n  border-color: var(--primary);\n  box-shadow: 0 0 20px var(--glow-cyan);\n}\n\n\n\/* ============================================\n   RESPONSIVE\n   ============================================ *\/\n@media (max-width: 1024px) {\n  .nv-business-grid { grid-template-columns: repeat(2, 1fr); }\n  \n    .nv-about-grid { grid-template-columns: 1fr; gap: 48px; }\n  \n    .nv-features-grid { grid-template-columns: 1fr; max-width: 500px; }\n}\n\n@media (max-width: 768px) {\n  .nv-section { padding: 80px 20px; }\n  \n    .nv-business-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }\n  \n    .nv-stats-grid { grid-template-columns: 1fr 1fr; gap: 16px; }\n  \n    .nv-stat-card { padding: 28px 20px; }\n  \n    .nv-stat-number { font-size: 32px; }\n  \n    \n    .nv-cta-section { padding: 100px 20px; }\n  \n    .nv-product-card { width: 290px; padding: 32px 24px; }\n  \n    .nv-marquee-text { font-size: 36px; }\n}\n\n@media (max-width: 480px) {\n  .nv-stats-grid { grid-template-columns: 1fr; }\n}\n\n\n\/* ============================================\n   REVEAL SYSTEM CSS & FAIL-SAFES\n   ============================================ *\/\n.nv-reveal-up {\n  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),\n              transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.js-active .nv-reveal-up {\n  opacity: 0;\n  transform: translateY(40px);\n}\n\n.nv-reveal-up.active {\n  opacity: 1 !important;\n  transform: translateY(0) !important;\n}\n\n\n.nv-reveal-left {\n  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),\n              transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.js-active .nv-reveal-left {\n  opacity: 0;\n  transform: translateX(40px);\n}\n\n.nv-reveal-left.active {\n  opacity: 1 !important;\n  transform: translateX(0) !important;\n}\n\n\n.nv-reveal-right {\n  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1),\n              transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.js-active .nv-reveal-right {\n  opacity: 0;\n  transform: translateX(-40px);\n}\n\n.nv-reveal-right.active {\n  opacity: 1 !important;\n  transform: translateX(0) !important;\n}\n\n\n.nv-reveal-item {\n  transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1),\n              transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n\n.js-active .nv-reveal-item {\n  opacity: 0;\n  transform: translateY(30px);\n}\n\n.nv-reveal-item.active {\n  opacity: 1 !important;\n  transform: translateY(0) !important;\n}\n\n\n\/* ============================================\n   PREMIUM TECH CARDS IMAGES\n   ============================================ *\/\n.nv-biz-img {\n  width: 100%;\n  height: 220px; \/* Increased from 160px to show larger images *\/\n  background-size: cover;\n  background-position: center;\n  border-radius: 16px;\n  margin-bottom: 24px;\n  border: 1px solid rgba(255,255,255,0.05);\n  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n.nv-biz-card:hover .nv-biz-img {\n  transform: scale(1.05);\n}\n\n\n\/* ============================================\n   BACKGROUND EFFECTS\n   ============================================ *\/\n.nv-glow-orb {\n  position: absolute;\n  border-radius: 50%;\n  filter: blur(140px);\n  opacity: 0.08;\n  pointer-events: none;\n  z-index: 0;\n  animation: nvOrbFloat 20s ease-in-out infinite alternate;\n}\n\n.nv-glow-orb.o1 {\n  width: 400px; height: 400px;\n  background: radial-gradient(circle, var(--primary), transparent 70%);\n  top: 15%; left: -100px;\n}\n\n.nv-glow-orb.o2 {\n  width: 500px; height: 500px;\n  background: radial-gradient(circle, var(--secondary), transparent 70%);\n  bottom: 10%; right: -150px;\n  animation-delay: -5s;\n}\n\n.nv-glow-orb.o3 {\n  width: 300px; height: 300px;\n  background: radial-gradient(circle, #00ffcc, transparent 70%);\n  top: 60%; left: 50%; transform: translateX(-50%);\n  opacity: 0.05;\n  animation-delay: -10s;\n}\n\n@keyframes nvOrbFloat {\n  0% { transform: translate(0, 0) scale(1); }\n  50% { transform: translate(40px, -20px) scale(1.05); }\n  100% { transform: translate(-20px, 30px) scale(0.95); }\n}\n\n\n.nv-grid-overlay {\n  position: absolute; inset: 0; z-index: 0;\n  background-image: \n    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);\n  background-size: 80px 80px;\n  mask-image: radial-gradient(circle at center, black 40%, transparent 90%);\n  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 90%);\n  pointer-events: none;\n}\n\n\n.nv-marquee-section {\n  position: relative;\n  width: 100%;\n  padding: 30px 0;\n  overflow: hidden;\n  background: rgba(10, 10, 26, 0.3);\n  border-top: 1px solid var(--border);\n  border-bottom: 1px solid var(--border);\n  margin: 60px 0;\n}\n\n.nv-marquee-track {\n  display: flex;\n  width: max-content;\n  animation: nvMarquee 30s linear infinite;\n  user-select: none; pointer-events: none;\n}\n\n.nv-marquee-content {\n  display: flex;\n  gap: 80px;\n  padding-right: 80px;\n  font-family: 'Outfit', sans-serif;\n  font-size: clamp(2rem, 5vw, 4rem);\n  font-weight: 900;\n  text-transform: uppercase;\n  color: transparent;\n  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);\n  letter-spacing: 4px;\n}\n\n@keyframes nvMarquee {\n  0% { transform: translateX(0); }\n  100% { transform: translateX(-50%); }\n}\n\n\n\/* Keyframes for CSS entrance animations *\/\n@keyframes nvFadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(30px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes nvFadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes nvCharFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(40px) rotateX(-20deg);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) rotateX(0);\n  }\n}\n\/* ============================================\n   UPGRADED FLOATING CAPSULE NAVIGATION (PC\/MOBILE)\n   ============================================ *\/\n.nv-nav {\n  position: fixed;\n  top: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: calc(100% - 48px);\n  max-width: 1200px;\n  z-index: 10000;\n  padding: 12px 28px;\n  background: rgba(10, 10, 26, 0.45) !important;\n  backdrop-filter: blur(24px) saturate(180%) !important;\n  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;\n  border: 1px solid rgba(255, 255, 255, 0.06) !important;\n  border-radius: 40px;\n  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);\n}\n.nv-nav.scrolled {\n  top: 12px;\n  max-width: 1100px;\n  padding: 10px 24px;\n  background: rgba(10, 10, 26, 0.75) !important;\n  border-color: rgba(0, 212, 255, 0.15) !important;\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 212, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);\n}\n.nv-nav-inner {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.nv-logo {\n  display: flex; align-items: center; gap: 10px;\n  font-weight: 700; font-size: 20px;\n  letter-spacing: 2px;\n  transition: transform 0.3s;\n}\n.nv-logo:hover { transform: scale(1.05); }\n.nv-logo-icon {\n  background: var(--gradient, var(--nv-gradient));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  font-size: 24px;\n  animation: nvLogoPulse 3s ease-in-out infinite;\n}\n@keyframes nvLogoPulse {\n  0%, 100% { filter: drop-shadow(0 0 8px var(--glow-cyan, var(--nv-glow-cyan))); }\n  50% { filter: drop-shadow(0 0 16px var(--glow-purple, var(--nv-glow-purple))); }\n}\n.nv-logo-text {\n  background: var(--gradient, var(--nv-gradient));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n.nv-nav-links {\n  display: flex; gap: 12px; align-items: center;\n}\n.nv-nav-link {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--text-secondary, var(--nv-text-secondary));\n  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n  position: relative;\n  padding: 8px 18px;\n  border-radius: 30px;\n  z-index: 1;\n}\n.nv-nav-link::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: 30px;\n  background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(124, 58, 237, 0.06));\n  border: 1px solid rgba(0, 212, 255, 0.12);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n  z-index: -1;\n}\n.nv-nav-link:hover {\n  color: #ffffff;\n  text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);\n}\n.nv-nav-link:hover::before {\n  opacity: 1;\n  transform: scale(1);\n}\n.nv-nav-link.active {\n  color: var(--nv-primary) !important;\n  text-shadow: 0 0 12px rgba(0, 212, 255, 0.5) !important;\n}\n.nv-nav-link.active::before {\n  opacity: 0 !important;\n  transform: scale(0.9) !important;\n}\n\n\/* Hamburger *\/\n.nv-hamburger {\n  display: none;\n  flex-direction: column;\n  gap: 5px;\n  background: none; border: none; cursor: pointer;\n  padding: 8px;\n}\n.nv-hamburger span {\n  width: 24px; height: 2px;\n  background: var(--text-primary, var(--nv-text, #ffffff));\n  transition: all 0.3s;\n  border-radius: 2px;\n}\n.nv-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\n.nv-hamburger.open span:nth-child(2) { opacity: 0; }\n.nv-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\n\n\/* Mobile menu *\/\n.nv-mobile-menu {\n  position: fixed; top: 0; right: -100%;\n  width: 280px; height: 100vh;\n  background: rgba(17, 17, 39, 0.98);\n  backdrop-filter: blur(20px);\n  z-index: 9999;\n  display: flex; flex-direction: column;\n  padding: 100px 40px 40px;\n  gap: 8px;\n  transition: right 0.4s cubic-bezier(0.65, 0, 0.35, 1);\n  border-left: 1px solid var(--border, var(--nv-border));\n}\n.nv-mobile-menu.open { right: 0; }\n.nv-mobile-link {\n  font-size: 18px; font-weight: 500;\n  color: var(--text-secondary, var(--nv-text-secondary));\n  padding: 16px 0;\n  border-bottom: 1px solid var(--border, var(--nv-border));\n  transition: all 0.3s;\n}\n.nv-mobile-link:hover {\n  color: var(--primary, var(--nv-primary));\n  padding-left: 12px;\n}\n.nv-mobile-link.active {\n  color: var(--primary, var(--nv-primary)) !important;\n  padding-left: 12px !important;\n}\n\n\/* ============================================\n   UPGRADED FOOTER DESIGN\n   ============================================ *\/\n.nv-footer {\n  background: var(--surface, var(--nv-surface));\n  border-top: 1px solid var(--border, var(--nv-border));\n  padding: 80px 40px 40px;\n}\n.nv-footer-inner {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n.nv-footer-top {\n  display: grid;\n  grid-template-columns: 1.2fr 2fr;\n  gap: 60px;\n  margin-bottom: 60px;\n}\n.nv-footer-desc {\n  font-size: 14px;\n  color: var(--text-muted, var(--nv-text-muted));\n  line-height: 1.8;\n  margin-top: 16px;\n}\n.nv-footer-col {\n    grid-column: auto !important;\n    grid-row: auto !important;\n  }\n  .nv-footer-links {\n    display: grid !important;\n    grid-template-columns: 1fr 1.2fr 1.8fr !important;\n    gap: 16px !important;\n  }\n.nv-footer-col h4 {\n  font-size: 15px;\n  font-weight: 700;\n  margin-bottom: 20px;\n  color: var(--text-primary, var(--nv-text, #ffffff));\n}\n.nv-footer-col a,\n.nv-footer-col p {\n  display: block;\n  font-size: 13px;\n  color: var(--text-muted, var(--nv-text-muted));\n  padding: 4px 0;\n  transition: color 0.3s;\n}\n.nv-footer-col a:hover {\n  color: var(--primary, var(--nv-primary));\n}\n.nv-footer-bottom {\n  border-top: 1px solid var(--border, var(--nv-border));\n  padding: 24px 0;\n  text-align: center;\n  color: var(--text-muted, var(--nv-text-muted));\n  font-size: 13px;\n}\n\n\/* ============================================\n   RESPONSIVE DESIGN OVERRIDES\n   ============================================ *\/\n@media (max-width: 768px) {\n  \/* Navigation mobile capsule overrides *\/\n  .nv-nav {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n    width: calc(100% - 24px);\n    transform: none;\n    border-radius: 24px;\n    padding: 10px 16px;\n    background: rgba(10, 10, 26, 0.75) !important;\n  }\n  .nv-nav.scrolled {\n    top: 12px;\n    width: calc(100% - 24px);\n    padding: 10px 16px;\n  }\n  .nv-nav-links { display: none; }\n  .nv-hamburger { display: flex; }\n  .nv-nav-inner { padding: 0; }\n\n  \/* Mobile Custom Cursor Follower - Glow Cyan and High Visibility *\/\n  .nv-cursor-follower {\n    background: #00d4ff !important;\n    mix-blend-mode: normal !important;\n    opacity: 0.85 !important;\n    box-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 30px #00d4ff !important;\n    width: 14px !important;\n    height: 14px !important;\n    border-radius: 50% !important;\n    filter: none !important;\n    z-index: 999999 !important;\n  }\n  \n  \/* Footer mobile layout optimization *\/\n  .nv-footer {\n    padding: 40px 20px 20px !important;\n  }\n  .nv-footer-top {\n    grid-template-columns: 1fr !important;\n    gap: 32px !important;\n    margin-bottom: 32px !important;\n  }\n  .nv-footer-links {\n    display: grid !important;\n    grid-template-columns: 1fr 1.2fr 1.8fr !important;\n    gap: 16px !important;\n  }\n  \n  \n  \/* Make \"\uc5f0\ub77d\ucc98\" take the entire right column starting from top *\/\n  .nv-footer-col:nth-child(3) {\n    border-top: none !important;\n    padding-top: 0 !important;\n  }\n}\n<\/style>\n\n<!-- ============================================\n     NAVIGATION\n     ============================================ -->\n<nav class=\"nv-nav\" id=\"nvNav\">\n  <div class=\"nv-nav-inner\">\n    <a href=\"\/\" class=\"nv-logo\">\n      <span class=\"nv-logo-icon\">\u25c6<\/span>\n      <span class=\"nv-logo-text\">NEXTVISION<\/span>\n    <\/a>\n    <div class=\"nv-nav-links\" id=\"nvNavLinks\">\n      <a href=\"\/about\/\" class=\"nv-nav-link\">\ud68c\uc0ac\uc18c\uac1c<\/a>\n      <a href=\"\/business\/\" class=\"nv-nav-link\">\uc0ac\uc5c5\ubd84\uc57c<\/a>\n      <a href=\"\/products\/\" class=\"nv-nav-link\">\uc81c\ud488\uc18c\uac1c<\/a>\n      <a href=\"\/support\/\" class=\"nv-nav-link\">\uace0\uac1d\uc9c0\uc6d0<\/a>\n    <\/div>\n    <button class=\"nv-hamburger\" id=\"nvHamburger\" aria-label=\"\uba54\ub274\">\n      <span><\/span><span><\/span><span><\/span>\n    <\/button>\n  <\/div>\n<\/nav>\n<div class=\"nv-mobile-menu\" id=\"nvMobileMenu\">\n  <a href=\"\/about\/\" class=\"nv-mobile-link\">\ud68c\uc0ac\uc18c\uac1c<\/a>\n  <a href=\"\/business\/\" class=\"nv-mobile-link\">\uc0ac\uc5c5\ubd84\uc57c<\/a>\n  <a href=\"\/products\/\" class=\"nv-mobile-link\">\uc81c\ud488\uc18c\uac1c<\/a>\n  <a href=\"\/support\/\" class=\"nv-mobile-link\">\uace0\uac1d\uc9c0\uc6d0<\/a>\n<\/div>\n\n<!-- ============================================\n     HERO SECTION\n     ============================================ -->\n<section class=\"nv-hero\" id=\"nvHero\">\n  <canvas class=\"nv-hero-canvas\" id=\"nvHeroCanvas\"><\/canvas>\n  <div class=\"nv-hero-glow\" id=\"nvHeroGlow\"><\/div>\n  <div class=\"nv-hero-content\">\n    <div class=\"nv-hero-label\" id=\"nvHeroLabel\">Next Generation Technology<\/div>\n    <h1 class=\"nv-hero-title\" id=\"nvHeroTitle\">\n      <span class=\"gradient-text\">\uae30\uc220\ub85c \uc5f0\uacb0\ud558\ub294 \ubbf8\ub798<\/span>\n    <\/h1>\n    <p class=\"nv-hero-subtitle\" id=\"nvHeroSubtitle\">\ub125\uc2a4\ud2b8\ube44\uc804 \ud14c\ud06c\ub180\ub85c\uc9c0\ub294 AI, IoT, \ud074\ub77c\uc6b0\ub4dc \uae30\uc220\ub85c<br>\uc0b0\uc5c5\uc758 \ubbf8\ub798\ub97c \ud601\uc2e0\ud569\ub2c8\ub2e4<\/p>\n    <a href=\"\/products\/\" class=\"nv-hero-cta\" id=\"nvHeroCta\">\n      \uc194\ub8e8\uc158 \uc0b4\ud3b4\ubcf4\uae30\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n    <\/a>\n  <\/div>\n  <div class=\"nv-scroll-indicator\" id=\"nvScrollIndicator\">\n    <div class=\"nv-scroll-mouse\"><\/div>\n    <span>Scroll<\/span>\n  <\/div>\n<\/section>\n\n<!-- ============================================\n     ABOUT PREVIEW SECTION\n     ============================================ -->\n<section class=\"nv-section nv-about-section\">\n  <!-- Dynamic glows & digital grids -->\n  <div class=\"nv-glow-orb o1\"><\/div>\n  <div class=\"nv-glow-orb o2\"><\/div>\n  <div class=\"nv-grid-overlay\"><\/div>\n  <div class=\"nv-section-inner\">\n    <div class=\"nv-about-grid\">\n      <div class=\"nv-about-text nv-reveal-left\">\n        <span class=\"nv-section-label\">About Us<\/span>\n        <h2 class=\"nv-section-title\"><span class=\"gradient-text\">\ud601\uc2e0\uc758 \uc2dc\uc791<\/span><\/h2>\n        <p>\ub125\uc2a4\ud2b8\ube44\uc804 \ud14c\ud06c\ub180\ub85c\uc9c0\ub294 4\ucc28 \uc0b0\uc5c5\ud601\uba85 \uc2dc\ub300\ub97c \uc120\ub3c4\ud558\ub294 \uae30\uc220 \uae30\uc5c5\uc785\ub2c8\ub2e4. \uc2a4\ub9c8\ud2b8\ud329\ud1a0\ub9ac, IoT, AI, \ud074\ub77c\uc6b0\ub4dc \ubd84\uc57c\uc5d0\uc11c \ucd95\uc801\ub41c \uc804\ubb38\uc131\uc744 \ubc14\ud0d5\uc73c\ub85c \uace0\uac1d\uc758 \ub514\uc9c0\ud138 \uc804\ud658\uc744 \uc9c0\uc6d0\ud558\uba70, \ub04a\uc784\uc5c6\ub294 \ud601\uc2e0\uc744 \ud1b5\ud574 \uc0b0\uc5c5\uc758 \ubbf8\ub798\ub97c \ud568\uaed8 \ub9cc\ub4e4\uc5b4\uac11\ub2c8\ub2e4.<\/p>\n        <a href=\"\/about\/\" class=\"nv-about-link\">\n          \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uae30\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n        <\/a>\n      <\/div>\n      <div class=\"nv-stats-grid nv-reveal-group\">\n        <div class=\"nv-stat-card nv-reveal-item\">\n          <div class=\"nv-stat-number\"><span class=\"counter\" data-target=\"10\">0<\/span>+\ub144<\/div>\n          <div class=\"nv-stat-label\">\uc5c5\uacc4 \uacbd\ud5d8<\/div>\n        <\/div>\n        <div class=\"nv-stat-card nv-reveal-item\">\n          <div class=\"nv-stat-number\"><span class=\"counter\" data-target=\"500\">0<\/span>+<\/div>\n          <div class=\"nv-stat-label\">\uace0\uac1d\uc0ac<\/div>\n        <\/div>\n        <div class=\"nv-stat-card nv-reveal-item\">\n          <div class=\"nv-stat-number\"><span class=\"counter\" data-target=\"99.9\" data-decimal=\"true\">0<\/span>%<\/div>\n          <div class=\"nv-stat-label\">\uac00\ub3d9\ub960<\/div>\n        <\/div>\n        <div class=\"nv-stat-card nv-reveal-item\">\n          <div class=\"nv-stat-number\"><span class=\"counter\" data-target=\"50\">0<\/span>+<\/div>\n          <div class=\"nv-stat-label\">\uae00\ub85c\ubc8c \ud30c\ud2b8\ub108<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================\n     BUSINESS AREAS SECTION\n     ============================================ -->\n<section class=\"nv-section nv-business-section\">\n  <!-- Dynamic glows & digital grids -->\n  <div class=\"nv-glow-orb o2\"><\/div>\n  <div class=\"nv-glow-orb o3\"><\/div>\n  <div class=\"nv-grid-overlay\"><\/div>\n  <div class=\"nv-section-inner\">\n    <div class=\"nv-section-header nv-reveal-up\">\n      <span class=\"nv-section-label\">Business Areas<\/span>\n      <h2 class=\"nv-section-title\"><span class=\"gradient-text\">\uc0ac\uc5c5 \ubd84\uc57c<\/span><\/h2>\n      <p class=\"nv-section-desc\">\uc0b0\uc5c5 \ud604\uc7a5\uc758 \ub514\uc9c0\ud138 \ud601\uc2e0\uc744 \uc704\ud55c \ud1b5\ud569 \uc194\ub8e8\uc158\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4<\/p>\n    <\/div>\n    <div class=\"nv-business-grid nv-reveal-group\">\n      <!-- Smart Factory -->\n      <div class=\"nv-biz-card nv-reveal-item\" data-tilt>\n        <div class=\"nv-biz-card-glow\"><\/div>\n        <div class=\"nv-biz-img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1616401784845-180882ba9ba8?auto=format&fit=crop&w=600&q=80')\"><\/div>\n        <div class=\"nv-biz-icon\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M2 20h20M6 20V10l6-6 6 6v10\"\/><path d=\"M10 20v-4h4v4\"\/><circle cx=\"12\" cy=\"12\" r=\"1.5\"\/><path d=\"M9 8l3-3 3 3\"\/><\/svg>\n        <\/div>\n        <h3>\uc2a4\ub9c8\ud2b8\ud329\ud1a0\ub9ac<\/h3>\n        <p>\uacf5\uc7a5 \uc790\ub3d9\ud654\ubd80\ud130 \ub370\uc774\ud130 \ubd84\uc11d\uae4c\uc9c0, \uc81c\uc870 \ud604\uc7a5\uc758 \uc644\ubcbd\ud55c \ub514\uc9c0\ud138 \uc804\ud658\uc744 \uc2e4\ud604\ud569\ub2c8\ub2e4<\/p>\n      <\/div>\n      <!-- IoT -->\n      <div class=\"nv-biz-card nv-reveal-item\" data-tilt>\n        <div class=\"nv-biz-card-glow\"><\/div>\n        <div class=\"nv-biz-img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1518770660439-4636190af475?auto=format&fit=crop&w=600&q=80')\"><\/div>\n        <div class=\"nv-biz-icon\">\n          <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M12 2a10 10 0 0 1 0 20\"\/><path d=\"M12 2a10 10 0 0 0 0 20\"\/><path d=\"M2 12h20\"\/><path d=\"M12 2v20\"\/><\/svg>\n        <\/div>\n        <h3>IoT \uc194\ub8e8\uc158<\/h3>\n        <p>\uc13c\uc11c, \uac8c\uc774\ud2b8\uc6e8\uc774, \ud50c\ub7ab\ud3fc\uc744 \uc544\uc6b0\ub974\ub294 \uc5d4\ub4dc-\ud22c-\uc5d4\ub4dc IoT \uc778\ud504\ub77c\ub97c \uad6c\ucd95\ud569\ub2c8\ub2e4<\/p>\n      <\/div>\n      <!-- AI -->\n      <div class=\"nv-biz-card nv-reveal-item\" data-tilt>\n        <div class=\"nv-biz-card-glow\"><\/div>\n        <div class=\"nv-biz-img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=600&q=80')\"><\/div>\n        <div class=\"nv-biz-icon\">\n          <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"5\" r=\"2\"\/><circle cx=\"5\" cy=\"19\" r=\"2\"\/><circle cx=\"19\" cy=\"19\" r=\"2\"\/><path d=\"M12 7v4M7.5 17.5L10.5 13M16.5 17.5L13.5 13\"\/><circle cx=\"12\" cy=\"12\" r=\"2.5\"\/><\/svg>\n        <\/div>\n        <h3>AI \ud50c\ub7ab\ud3fc<\/h3>\n        <p>\uba38\uc2e0\ub7ec\ub2dd\uacfc \ub525\ub7ec\ub2dd \uae30\ubc18\uc758 \uc9c0\ub2a5\ud615 \ubd84\uc11d \ud50c\ub7ab\ud3fc\uc73c\ub85c \ub370\uc774\ud130\uc758 \uac00\uce58\ub97c \uadf9\ub300\ud654\ud569\ub2c8\ub2e4<\/p>\n      <\/div>\n      <!-- Cloud -->\n      <div class=\"nv-biz-card nv-reveal-item\" data-tilt>\n        <div class=\"nv-biz-card-glow\"><\/div>\n        <div class=\"nv-biz-img\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=600&q=80')\"><\/div>\n        <div class=\"nv-biz-icon\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z\"\/><\/svg>\n        <\/div>\n        <h3>\ud074\ub77c\uc6b0\ub4dc \uc11c\ube44\uc2a4<\/h3>\n        <p>\uc548\uc804\ud558\uace0 \ud655\uc7a5 \uac00\ub2a5\ud55c \ud074\ub77c\uc6b0\ub4dc \uc778\ud504\ub77c\ub85c \ube44\uc988\ub2c8\uc2a4 \ubbfc\ucca9\uc131\uc744 \ud655\ubcf4\ud569\ub2c8\ub2e4<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================\n     PRODUCTS SHOWCASE SECTION\n     ============================================ -->\n<section class=\"nv-section nv-products-section\">\n  <!-- Dynamic glows & digital grids -->\n  <div class=\"nv-glow-orb o1\"><\/div>\n  <div class=\"nv-grid-overlay\"><\/div>\n  <div class=\"nv-section-inner\">\n    <div class=\"nv-section-header nv-reveal-up\">\n      <span class=\"nv-section-label\">Products<\/span>\n      <h2 class=\"nv-section-title\"><span class=\"gradient-text\">\uc8fc\uc694 \uc81c\ud488<\/span><\/h2>\n      <p class=\"nv-section-desc\">\uc0b0\uc5c5 \ud604\uc7a5\uc5d0\uc11c \uac80\uc99d\ub41c \ub125\uc2a4\ud2b8\ube44\uc804\uc758 \ud575\uc2ec \uc81c\ud488\uad70\uc744 \uc18c\uac1c\ud569\ub2c8\ub2e4<\/p>\n    <\/div>\n  <\/div>\n  <div class=\"nv-products-track-wrap\">\n    <div class=\"nv-products-track\" id=\"nvProductTrack\">\n      <!-- Set 1 -->\n      <div class=\"nv-product-card\">\n        <span class=\"nv-product-badge\">Smart Factory<\/span>\n        <h3>SmartFactory Pro X1<\/h3>\n        <p>MES, ERP, SCADA\ub97c \ud1b5\ud569\ud558\ub294 \uc62c\uc778\uc6d0 \uc2a4\ub9c8\ud2b8\ud329\ud1a0\ub9ac \ud50c\ub7ab\ud3fc. \uc2e4\uc2dc\uac04 \ubaa8\ub2c8\ud130\ub9c1\uacfc AI \uae30\ubc18 \uc608\uce21 \ubd84\uc11d\uc73c\ub85c \uc0dd\uc0b0\uc131\uc744 \uadf9\ub300\ud654\ud569\ub2c8\ub2e4.<\/p>\n        <a href=\"\/products\/\" class=\"nv-product-link\">\uc790\uc138\ud788 \ubcf4\uae30 <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n      <\/div>\n      <div class=\"nv-product-card\">\n        <span class=\"nv-product-badge\">IoT<\/span>\n        <h3>IoT Gateway Hub<\/h3>\n        <p>\ub2e4\uc591\ud55c \uc0b0\uc5c5\uc6a9 \ud504\ub85c\ud1a0\ucf5c\uc744 \uc9c0\uc6d0\ud558\ub294 \uc5e3\uc9c0 \uac8c\uc774\ud2b8\uc6e8\uc774. \ud604\uc7a5 \ub370\uc774\ud130\ub97c \uc2e4\uc2dc\uac04\uc73c\ub85c \uc218\uc9d1, \ucc98\ub9ac, \uc804\uc1a1\ud558\uc5ec \uc2a4\ub9c8\ud2b8 \uc778\ud504\ub77c\uc758 \ud575\uc2ec \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4.<\/p>\n        <a href=\"\/products\/\" class=\"nv-product-link\">\uc790\uc138\ud788 \ubcf4\uae30 <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n      <\/div>\n      <div class=\"nv-product-card\">\n        <span class=\"nv-product-badge\">AI<\/span>\n        <h3>NexAI Studio<\/h3>\n        <p>\ub178\ucf54\ub4dc\/\ub85c\uc6b0\ucf54\ub4dc \ubc29\uc2dd\uc758 AI \ubaa8\ub378 \uac1c\ubc1c \ud50c\ub7ab\ud3fc. \ube44\uc804\ubb38\uac00\ub3c4 \uc27d\uac8c AI \ubaa8\ub378\uc744 \uad6c\ucd95\ud558\uace0 \uc0b0\uc5c5 \ud604\uc7a5\uc5d0 \ubc30\ud3ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n        <a href=\"\/products\/\" class=\"nv-product-link\">\uc790\uc138\ud788 \ubcf4\uae30 <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n      <\/div>\n      <div class=\"nv-product-card\">\n        <span class=\"nv-product-badge\">Cloud<\/span>\n        <h3>NexCloud One<\/h3>\n        <p>\ud558\uc774\ube0c\ub9ac\ub4dc \ud074\ub77c\uc6b0\ub4dc \uad00\ub9ac \ud50c\ub7ab\ud3fc. \ud37c\ube14\ub9ad, \ud504\ub77c\uc774\ube57, \uc5e3\uc9c0 \ud658\uacbd\uc744 \ub2e8\uc77c \ucf58\uc194\uc5d0\uc11c \ud1b5\ud569 \uad00\ub9ac\ud558\uba70 \ube44\uc6a9 \ucd5c\uc801\ud654\ub97c \uc2e4\ud604\ud569\ub2c8\ub2e4.<\/p>\n        <a href=\"\/products\/\" class=\"nv-product-link\">\uc790\uc138\ud788 \ubcf4\uae30 <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n      <\/div>\n      <!-- Set 2 (duplicate for seamless loop) -->\n      <div class=\"nv-product-card\">\n        <span class=\"nv-product-badge\">Smart Factory<\/span>\n        <h3>SmartFactory Pro X1<\/h3>\n        <p>MES, ERP, SCADA\ub97c \ud1b5\ud569\ud558\ub294 \uc62c\uc778\uc6d0 \uc2a4\ub9c8\ud2b8\ud329\ud1a0\ub9ac \ud50c\ub7ab\ud3fc. \uc2e4\uc2dc\uac04 \ubaa8\ub2c8\ud130\ub9c1\uacfc AI \uae30\ubc18 \uc608\uce21 \ubd84\uc11d\uc73c\ub85c \uc0dd\uc0b0\uc131\uc744 \uadf9\ub300\ud654\ud569\ub2c8\ub2e4.<\/p>\n        <a href=\"\/products\/\" class=\"nv-product-link\">\uc790\uc138\ud788 \ubcf4\uae30 <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n      <\/div>\n      <div class=\"nv-product-card\">\n        <span class=\"nv-product-badge\">IoT<\/span>\n        <h3>IoT Gateway Hub<\/h3>\n        <p>\ub2e4\uc591\ud55c \uc0b0\uc5c5\uc6a9 \ud504\ub85c\ud1a0\ucf5c\uc744 \uc9c0\uc6d0\ud558\ub294 \uc5e3\uc9c0 \uac8c\uc774\ud2b8\uc6e8\uc774. \ud604\uc7a5 \ub370\uc774\ud130\ub97c \uc2e4\uc2dc\uac04\uc73c\ub85c \uc218\uc9d1, \ucc98\ub9ac, \uc804\uc1a1\ud558\uc5ec \uc2a4\ub9c8\ud2b8 \uc778\ud504\ub77c\uc758 \ud575\uc2ec \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4.<\/p>\n        <a href=\"\/products\/\" class=\"nv-product-link\">\uc790\uc138\ud788 \ubcf4\uae30 <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n      <\/div>\n      <div class=\"nv-product-card\">\n        <span class=\"nv-product-badge\">AI<\/span>\n        <h3>NexAI Studio<\/h3>\n        <p>\ub178\ucf54\ub4dc\/\ub85c\uc6b0\ucf54\ub4dc \ubc29\uc2dd\uc758 AI \ubaa8\ub378 \uac1c\ubc1c \ud50c\ub7ab\ud3fc. \ube44\uc804\ubb38\uac00\ub3c4 \uc27d\uac8c AI \ubaa8\ub378\uc744 \uad6c\ucd95\ud558\uace0 \uc0b0\uc5c5 \ud604\uc7a5\uc5d0 \ubc30\ud3ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n        <a href=\"\/products\/\" class=\"nv-product-link\">\uc790\uc138\ud788 \ubcf4\uae30 <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n      <\/div>\n      <div class=\"nv-product-card\">\n        <span class=\"nv-product-badge\">Cloud<\/span>\n        <h3>NexCloud One<\/h3>\n        <p>\ud558\uc774\ube0c\ub9ac\ub4dc \ud074\ub77c\uc6b0\ub4dc \uad00\ub9ac \ud50c\ub7ab\ud3fc. \ud37c\ube14\ub9ad, \ud504\ub77c\uc774\ube57, \uc5e3\uc9c0 \ud658\uacbd\uc744 \ub2e8\uc77c \ucf58\uc194\uc5d0\uc11c \ud1b5\ud569 \uad00\ub9ac\ud558\uba70 \ube44\uc6a9 \ucd5c\uc801\ud654\ub97c \uc2e4\ud604\ud569\ub2c8\ub2e4.<\/p>\n        <a href=\"\/products\/\" class=\"nv-product-link\">\uc790\uc138\ud788 \ubcf4\uae30 <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg><\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================\n     WHY CHOOSE US SECTION\n     ============================================ -->\n<section class=\"nv-section nv-why-section\">\n  <div class=\"nv-marquee-wrap\">\n    <div class=\"nv-marquee-track\">\n      <span class=\"nv-marquee-text\"><span class=\"highlight\">INNOVATION<\/span> \u00b7 TECHNOLOGY \u00b7 <span class=\"highlight\">FUTURE<\/span> \u00b7 DIGITAL TRANSFORMATION \u00b7 <\/span>\n      <span class=\"nv-marquee-text\"><span class=\"highlight\">INNOVATION<\/span> \u00b7 TECHNOLOGY \u00b7 <span class=\"highlight\">FUTURE<\/span> \u00b7 DIGITAL TRANSFORMATION \u00b7 <\/span>\n    <\/div>\n  <\/div>\n  <div class=\"nv-section-inner\">\n    <div class=\"nv-section-header nv-animate\">\n      <span class=\"nv-section-label\">Why Choose Us<\/span>\n      <h2 class=\"nv-section-title\">\uc65c <span class=\"gradient-text\">\ub125\uc2a4\ud2b8\ube44\uc804<\/span>\uc778\uac00?<\/h2>\n    <\/div>\n    <div class=\"nv-features-grid\">\n      <div class=\"nv-feature-block\">\n        <div class=\"nv-feature-icon\">\n          <svg viewBox=\"0 0 24 24\"><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>\n        <\/div>\n        <h3>\uac80\uc99d\ub41c \uae30\uc220\ub825<\/h3>\n        <p>10\ub144 \uc774\uc0c1\uc758 \uc0b0\uc5c5 \ud604\uc7a5 \uacbd\ud5d8\uc744 \ubc14\ud0d5\uc73c\ub85c \uc2e0\ub8b0\ud560 \uc218 \uc788\ub294 \uae30\uc220 \uc194\ub8e8\uc158\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub2e4\uc591\ud55c \uc0b0\uc5c5\uad70\uc5d0\uc11c\uc758 \uc131\uacf5 \uc0ac\ub840\uac00 \uc774\ub97c \uc99d\uba85\ud569\ub2c8\ub2e4.<\/p>\n      <\/div>\n      <div class=\"nv-feature-block\">\n        <div class=\"nv-feature-icon\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><path d=\"M9 12l2 2 4-4\"\/><\/svg>\n        <\/div>\n        <h3>\ub9de\ucda4\ud615 \uc194\ub8e8\uc158<\/h3>\n        <p>\uace0\uac1d\uc758 \ube44\uc988\ub2c8\uc2a4 \ud658\uacbd\uacfc \ub2c8\uc988\ub97c \uc815\ubc00\ud558\uac8c \ubd84\uc11d\ud558\uc5ec \ucd5c\uc801\ud654\ub41c \ub9de\ucda4\ud615 \uc194\ub8e8\uc158\uc744 \uc124\uacc4\ud558\uace0 \uad6c\ud604\ud569\ub2c8\ub2e4.<\/p>\n      <\/div>\n      <div class=\"nv-feature-block\">\n        <div class=\"nv-feature-icon\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/><\/svg>\n        <\/div>\n        <h3>\uc9c0\uc18d\uc801 \ud601\uc2e0<\/h3>\n        <p>\ub04a\uc784\uc5c6\ub294 R&D \ud22c\uc790\uc640 \uae30\uc220 \uac1c\ubc1c\uc744 \ud1b5\ud574 \ud56d\uc0c1 \uc5c5\uacc4 \ucd5c\uc804\uc120\uc5d0\uc11c \ud601\uc2e0\uc744 \uc774\ub04c\uc5b4 \uac11\ub2c8\ub2e4.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============================================\n     CTA SECTION\n     ============================================ -->\n<section class=\"nv-cta-section\">\n  <div class=\"nv-cta-mesh\">\n    <div class=\"nv-cta-shape\"><\/div>\n    <div class=\"nv-cta-shape\"><\/div>\n    <div class=\"nv-cta-shape\"><\/div>\n    <div class=\"nv-cta-shape\"><\/div>\n    <div class=\"nv-cta-shape\"><\/div>\n  <\/div>\n  <div class=\"nv-cta-glow\"><\/div>\n  <div class=\"nv-cta-content nv-reveal-up\">\n    <h2 class=\"nv-cta-title\">\uc9c0\uae08 \ubc14\ub85c<br><span class=\"gradient-text\" style=\"background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;\">\ubbf8\ub798\ub97c \uc2dc\uc791\ud558\uc138\uc694<\/span><\/h2>\n    <p class=\"nv-cta-subtitle\">\ub125\uc2a4\ud2b8\ube44\uc804\uacfc \ud568\uaed8 \ub514\uc9c0\ud138 \uc804\ud658\uc758 \uccab\uac78\uc74c\uc744 \ub0b4\ub51b\uc5b4 \ubcf4\uc138\uc694<\/p>\n    <a href=\"\/support\/\" class=\"nv-cta-btn\" id=\"nvCtaBtn\">\n      \uc0c1\ub2f4 \ubb38\uc758\ud558\uae30\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n    <\/a>\n  <\/div>\n<\/section>\n\n<!-- ============================================\n     FOOTER\n     ============================================ -->\n<footer class=\"nv-footer\">\n  <div class=\"nv-footer-inner\">\n    <div class=\"nv-footer-top\">\n      <div class=\"nv-footer-brand\">\n        <div class=\"nv-logo\"><span class=\"nv-logo-icon\">\u25c6<\/span><span class=\"nv-logo-text\">NEXTVISION<\/span><\/div>\n        <p class=\"nv-footer-desc\">\uae30\uc220\ub85c \uc5f0\uacb0\ud558\ub294 \ubbf8\ub798, \ud601\uc2e0\uc73c\ub85c \ub9cc\ub4dc\ub294 \uc138\uc0c1<br>\ub125\uc2a4\ud2b8\ube44\uc804 \ud14c\ud06c\ub180\ub85c\uc9c0\ub294 \uc2a4\ub9c8\ud2b8\ud329\ud1a0\ub9ac, IoT, AI, \ud074\ub77c\uc6b0\ub4dc \uae30\ubc18\uc758<br>\uc0b0\uc5c5 \ud601\uc2e0 \uc194\ub8e8\uc158\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n      <\/div>\n      <div class=\"nv-footer-links\">\n        <div class=\"nv-footer-col\">\n          <h4>\ubc14\ub85c\uac00\uae30<\/h4>\n          <a href=\"\/\">\ud648<\/a><a href=\"\/about\/\">\ud68c\uc0ac\uc18c\uac1c<\/a><a href=\"\/business\/\">\uc0ac\uc5c5\ubd84\uc57c<\/a><a href=\"\/products\/\">\uc81c\ud488\uc18c\uac1c<\/a><a href=\"\/support\/\">\uace0\uac1d\uc9c0\uc6d0<\/a>\n        <\/div>\n        <div class=\"nv-footer-col\">\n          <h4>\uc81c\ud488<\/h4>\n          <a href=\"\/products\/\">\uc2a4\ub9c8\ud2b8\ud329\ud1a0\ub9ac<\/a><a href=\"\/products\/\">IoT\uc194\ub8e8\uc158<\/a><a href=\"\/products\/\">AI\ud50c\ub7ab\ud3fc<\/a><a href=\"\/products\/\">\ud074\ub77c\uc6b0\ub4dc\uc11c\ube44\uc2a4<\/a>\n        <\/div>\n        <div class=\"nv-footer-col\">\n          <h4>\uc5f0\ub77d\ucc98<\/h4>\n          <p>\uc11c\uc6b8\ud2b9\ubcc4\uc2dc \uac15\ub0a8\uad6c \ud14c\ud5e4\ub780\ub85c 123<\/p>\n          <p>\ub125\uc2a4\ud2b8\ube44\uc804 \ube4c\ub529 8\uce35<\/p>\n          <p>TEL: 02-1234-5678<\/p>\n          <p>FAX: 02-1234-5679<\/p>\n          <p>Email: info@nextvision.co.kr<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"nv-footer-bottom\">\n      <p>&copy; 2025 NextVision Technology. All rights reserved.<\/p>\n    <\/div>\n  <\/div>\n<\/footer>\n\n<!-- Top button -->\n<button class=\"nv-top-btn\" id=\"nvTopBtn\" aria-label=\"\ub9e8 \uc704\ub85c\">\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M18 15l-6-6-6 6\"\/><\/svg>\n<\/button>\n\n<!-- ============================================\n     SCRIPTS\n     ============================================ -->\n<script>\n(function() {\n  'use strict';\n\n  \/\/ ============================================\n  \/\/ ============================================\n  \/\/ ============================================\n  \/\/ CURSOR FOLLOWER ANIMATION WITH PREMIUM HOVER EXPANSION\n  \/\/ ============================================\n  const follower = document.getElementById('nvCursorFollower');\n  if (follower) {\n    let followerX = 0, followerY = 0;\n    let targetX = 0, targetY = 0;\n    let isMoving = false;\n    \n    document.addEventListener('mousemove', e => {\n      targetX = e.clientX;\n      targetY = e.clientY;\n      if (!isMoving) {\n        follower.style.opacity = '1';\n        isMoving = true;\n      }\n    });\n    \n    document.addEventListener('mouseleave', () => {\n      follower.style.opacity = '0';\n      isMoving = false;\n    });\n    \n    function animateCursor() {\n      followerX += (targetX - followerX) * 0.15;\n      followerY += (targetY - followerY) * 0.15;\n      follower.style.left = `${followerX}px`;\n      follower.style.top = `${followerY}px`;\n      requestAnimationFrame(animateCursor);\n    }\n    requestAnimationFrame(animateCursor);\n\n    \/\/ Expand follower on hovering interactive elements\n    const hoverTargets = '.nv-nav-link, .nv-logo, .nv-cta-btn, .nv-biz-card, .nv-product-card, .nv-stat-card, .nv-tab-btn, .nv-form-submit, .nv-notice-row, .nv-contact-card';\n    document.addEventListener('mouseover', e => {\n      const target = e.target.closest(hoverTargets);\n      if (target) {\n        follower.style.width = '48px';\n        follower.style.height = '48px';\n        follower.style.background = 'transparent';\n        follower.style.border = '2px solid var(--nv-primary)';\n        follower.style.boxShadow = '0 0 20px rgba(0, 212, 255, 0.6)';\n      }\n    });\n    document.addEventListener('mouseout', e => {\n      const target = e.target.closest(hoverTargets);\n      if (target && (!e.relatedTarget || !target.contains(e.relatedTarget))) {\n        follower.style.width = '24px';\n        follower.style.height = '24px';\n        follower.style.background = 'radial-gradient(circle, var(--nv-primary) 0%, rgba(124, 58, 237, 0.4) 60%, transparent 100%)';\n        follower.style.border = 'none';\n        follower.style.boxShadow = '0 0 15px rgba(0, 212, 255, 0.4)';\n      }\n    });\n  }\n\n  \/\/ ============================================\n  \/\/ COMMON NAV \/ SCROLL \/ HAMBURGER\n  \/\/ ============================================\n  \/\/ ============================================\n  const nav = document.getElementById('nvNav');\n  window.addEventListener('scroll', () => {\n    nav.classList.toggle('scrolled', window.scrollY > 50);\n    document.getElementById('nvTopBtn').classList.toggle('visible', window.scrollY > 300);\n    const prog = document.getElementById('nvScrollProgress');\n    if (prog) {\n      const h = document.documentElement.scrollHeight - window.innerHeight;\n      prog.style.width = (window.scrollY \/ h * 100) + '%';\n    }\n  });\n  document.getElementById('nvHamburger').addEventListener('click', () => {\n    document.getElementById('nvMobileMenu').classList.toggle('open');\n    document.getElementById('nvHamburger').classList.toggle('open');\n  });\n  document.getElementById('nvTopBtn').addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));\n\n  \/\/ Page transition\n  document.querySelectorAll('a[href^=\"\/\"]').forEach(a => {\n    a.addEventListener('click', e => {\n      if (a.getAttribute('href') === window.location.pathname) return;\n      e.preventDefault();\n      const overlay = document.getElementById('nvPageTransition');\n      overlay.classList.add('active');\n      setTimeout(() => window.location.href = a.getAttribute('href'), 600);\n    });\n  });\n\n  \/\/ ============================================\n  \/\/ INTERSECTION OBSERVER REVEAL SYSTEM\n  \/\/ ============================================\n  if (typeof gsap === 'undefined') {\n    const revealObserver = new IntersectionObserver((entries) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          entry.target.classList.add('active');\n          if (entry.target.classList.contains('nv-reveal-group')) {\n            const items = entry.target.querySelectorAll('.nv-reveal-item');\n            items.forEach((item, index) => {\n              item.style.transitionDelay = `${index * 0.15}s`;\n              item.classList.add('active');\n            });\n          }\n          revealObserver.unobserve(entry.target);\n        }\n      });\n    }, {\n      root: null,\n      threshold: 0.1,\n      rootMargin: '0px 0px -40px 0px'\n    });\n\n    document.querySelectorAll('.nv-reveal-up, .nv-reveal-left, .nv-reveal-right, .nv-reveal-group').forEach(el => {\n      revealObserver.observe(el);\n    });\n  } else {\n    document.querySelectorAll('.nv-reveal-up, .nv-reveal-left, .nv-reveal-right, .nv-reveal-group, .nv-reveal-item').forEach(el => {\n      el.classList.add('active');\n    });\n  }\n\n  \/\/ ============================================\n  \/\/ HERO INTRO ANIMATION (SCRAMBLE DECRYPT)\n  \/\/ ============================================\n  function scrambleText(element, finalString, duration = 800) {\n    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+{}[]';\n    const start = performance.now();\n    const originalText = finalString || element.innerText;\n    const length = originalText.length;\n    \n    if (element._scrambleAnim) cancelAnimationFrame(element._scrambleAnim);\n    \n    function update(time) {\n      const elapsed = time - start;\n      const progress = Math.min(elapsed \/ duration, 1);\n      \n      const solvedCount = Math.floor(progress * length);\n      let display = '';\n      for (let i = 0; i < length; i++) {\n        if (i < solvedCount) {\n          display += originalText[i];\n        } else {\n          display += chars[Math.floor(Math.random() * chars.length)];\n        }\n      }\n      element.innerText = display;\n      \n      if (progress < 1) {\n        element._scrambleAnim = requestAnimationFrame(update);\n      } else {\n        element.innerText = originalText;\n      }\n    }\n    element._scrambleAnim = requestAnimationFrame(update);\n  }\n\n  const heroTitle = document.querySelector('#nvHeroTitle .gradient-text');\n  if (heroTitle) {\n    scrambleText(heroTitle, \"\uae30\uc220\ub85c \uc5f0\uacb0\ud558\ub294 \ubbf8\ub798\", 1200);\n  }\n\n  \/\/ ============================================\n  \/\/ NATIVE PARALLAX ENGINE\n  \/\/ ============================================\n  window.addEventListener('scroll', () => {\n    const scrolled = window.scrollY;\n    \n    \/\/ Hero content parallax\n    const heroContent = document.querySelector('.nv-hero-content');\n    if (heroContent) {\n      heroContent.style.transform = `translateY(${scrolled * 0.4}px)`;\n      heroContent.style.opacity = 1 - Math.min(scrolled \/ 800, 1);\n    }\n    \n    \/\/ CTA background shape parallax\n    const ctaShapes = document.querySelectorAll('.nv-cta-shape');\n    ctaShapes.forEach((shape, i) => {\n      shape.style.transform = `translateY(${scrolled * -0.05 * (i + 1)}px) rotate(${scrolled * 0.1 * (i % 2 === 0 ? 1 : -1)}deg)`;\n    });\n  });\n\n  \/\/ ============================================\n  \/\/ CANVAS PARTICLE CONSTELLATION\n  \/\/ ============================================\n  const canvas = document.getElementById('nvHeroCanvas');\n  if (canvas) {\n    const ctx = canvas.getContext('2d');\n    let particles = [];\n    let mouse = { x: -9999, y: -9999 };\n    let w, h;\n\n    function resizeCanvas() {\n      w = canvas.width = canvas.offsetWidth;\n      h = canvas.height = canvas.offsetHeight;\n    }\n    resizeCanvas();\n    window.addEventListener('resize', resizeCanvas);\n\n    const particleCount = Math.min(120, Math.floor(window.innerWidth \/ 12));\n\n    class Particle {\n      constructor() {\n        this.x = Math.random() * w;\n        this.y = Math.random() * h;\n        this.vx = (Math.random() - 0.5) * 0.5;\n        this.vy = (Math.random() - 0.5) * 0.5;\n        this.r = Math.random() * 2 + 0.5;\n        this.alpha = Math.random() * 0.5 + 0.2;\n      }\n      update() {\n        if (mouse.x !== -9999 && mouse.y !== -9999) {\n          const dx = mouse.x - this.x;\n          const dy = mouse.y - this.y;\n          const dist = Math.sqrt(dx * dx + dy * dy);\n          if (dist < 200) {\n            const force = (200 - dist) \/ 200;\n            this.x += dx * force * 0.025;\n            this.y += dy * force * 0.025;\n          }\n        }\n        \n        this.x += this.vx;\n        this.y += this.vy;\n        if (this.x < 0 || this.x > w) this.vx *= -1;\n        if (this.y < 0 || this.y > h) this.vy *= -1;\n      }\n      draw() {\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);\n        ctx.fillStyle = `rgba(0, 212, 255, ${this.alpha})`;\n        ctx.fill();\n      }\n    }\n\n    for (let i = 0; i < particleCount; i++) particles.push(new Particle());\n\n    function drawLines() {\n      for (let i = 0; i < particles.length; i++) {\n        for (let j = i + 1; j < particles.length; j++) {\n          const dx = particles[i].x - particles[j].x;\n          const dy = particles[i].y - particles[j].y;\n          const dist = Math.sqrt(dx * dx + dy * dy);\n          if (dist < 150) {\n            ctx.beginPath();\n            ctx.moveTo(particles[i].x, particles[i].y);\n            ctx.lineTo(particles[j].x, particles[j].y);\n            ctx.strokeStyle = `rgba(0, 212, 255, ${0.08 * (1 - dist \/ 150)})`;\n            ctx.lineWidth = 0.5;\n            ctx.stroke();\n          }\n        }\n        const dx = particles[i].x - mouse.x;\n        const dy = particles[i].y - mouse.y;\n        const dist = Math.sqrt(dx * dx + dy * dy);\n        if (dist < 200) {\n          ctx.beginPath();\n          ctx.moveTo(particles[i].x, particles[i].y);\n          ctx.lineTo(mouse.x, mouse.y);\n          ctx.strokeStyle = `rgba(124, 58, 237, ${0.15 * (1 - dist \/ 200)})`;\n          ctx.lineWidth = 0.8;\n          ctx.stroke();\n        }\n      }\n    }\n\n    function animateParticles() {\n      ctx.clearRect(0, 0, w, h);\n      particles.forEach(p => { p.update(); p.draw(); });\n      drawLines();\n      requestAnimationFrame(animateParticles);\n    }\n    animateParticles();\n\n    \/\/ MOUSE FOLLOW GLOW IN HERO\n    const glow = document.getElementById('nvHeroGlow');\n    const hero = document.getElementById('nvHero');\n    if (hero && glow) {\n      hero.addEventListener('mousemove', e => {\n        const rect = hero.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n        mouse.x = x;\n        mouse.y = y;\n        glow.style.left = (x - 300) + 'px';\n        glow.style.top = (y - 300) + 'px';\n      });\n      hero.addEventListener('mouseleave', () => {\n        mouse.x = -9999;\n        mouse.y = -9999;\n      });\n    }\n  }\n\n  \/\/ ============================================\n  \/\/ NUMBER COUNTER ANIMATION\n  \/\/ ============================================\n  const counters = document.querySelectorAll('.counter');\n  const counterObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        const el = entry.target;\n        const target = parseFloat(el.dataset.target);\n        const isDecimal = el.dataset.decimal === 'true';\n        const duration = 2000;\n        const startTime = performance.now();\n\n        function updateCounter(currentTime) {\n          const elapsed = currentTime - startTime;\n          const progress = Math.min(elapsed \/ duration, 1);\n          const eased = 1 - Math.pow(1 - progress, 3);\n          const current = eased * target;\n\n          if (isDecimal) {\n            el.textContent = current.toFixed(1);\n          } else {\n            el.textContent = Math.floor(current);\n          }\n\n          if (progress < 1) {\n            requestAnimationFrame(updateCounter);\n          } else {\n            el.textContent = isDecimal ? target.toFixed(1) : target;\n          }\n        }\n        requestAnimationFrame(updateCounter);\n        counterObserver.unobserve(el);\n      }\n    });\n  }, { threshold: 0.5 });\n\n  counters.forEach(c => counterObserver.observe(c));\n\n  \/\/ ============================================\n  \/\/ 3D TILT EFFECT FOR BUSINESS CARDS\n  \/\/ ============================================\n  document.querySelectorAll('[data-tilt]').forEach(card => {\n    card.addEventListener('mousemove', e => {\n      const rect = card.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const y = e.clientY - rect.top;\n      const centerX = rect.width \/ 2;\n      const centerY = rect.height \/ 2;\n      const rotateX = (y - centerY) \/ centerY * -8;\n      const rotateY = (x - centerX) \/ centerX * 8;\n      card.style.transform = `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-12px)`;\n    });\n    card.addEventListener('mouseleave', () => {\n      card.style.transform = '';\n    });\n  });\n\n  \/\/ ============================================\n  \/\/ CTA RIPPLE EFFECT\n  \/\/ ============================================\n  const ctaBtn = document.getElementById('nvCtaBtn');\n  if (ctaBtn) {\n    ctaBtn.addEventListener('click', function(e) {\n      const rect = this.getBoundingClientRect();\n      const ripple = document.createElement('span');\n      ripple.className = 'ripple';\n      ripple.style.left = (e.clientX - rect.left) + 'px';\n      ripple.style.top = (e.clientY - rect.top) + 'px';\n      ripple.style.width = ripple.style.height = Math.max(rect.width, rect.height) + 'px';\n      this.appendChild(ripple);\n      setTimeout(() => ripple.remove(), 800);\n    });\n  }\n\n  \/\/ ============================================\n  \/\/ PARALLAX ON SECTIONS (GSAP WRAPPED)\n  \/\/ ============================================\n  if (typeof gsap !== 'undefined') {\n    try {\n      gsap.utils.toArray('.nv-cta-shape').forEach((shape, i) => {\n        gsap.to(shape, {\n          y: -50 * (i + 1) * 0.5,\n          rotation: 360 * (i % 2 === 0 ? 1 : -1),\n          scrollTrigger: {\n            trigger: '.nv-cta-section',\n            start: 'top bottom',\n            end: 'bottom top',\n            scrub: 1\n          }\n        });\n      });\n\n      \/\/ Hero parallax\n      gsap.to('.nv-hero-content', {\n        y: 120, opacity: 0.3,\n        scrollTrigger: {\n          trigger: '.nv-hero',\n          start: 'top top',\n          end: 'bottom top',\n          scrub: 0.5\n        }\n      });\n\n      \/\/ Staggered reveals for cards\n      gsap.utils.toArray('.nv-reveal-group').forEach((group) => {\n        const items = group.querySelectorAll('.nv-reveal-item');\n        if (items.length > 0) {\n          gsap.from(items, {\n            y: 60,\n            rotationX: -12,\n            scale: 0.94,\n            opacity: 0,\n            duration: 0.9,\n            stagger: 0.08,\n            ease: 'power3.out',\n            scrollTrigger: {\n              trigger: group,\n              start: 'top 85%',\n              toggleActions: 'play none none none'\n            }\n          });\n        }\n      });\n\n      \/\/ Standard reveals\n      gsap.utils.toArray('.nv-reveal-up').forEach((el) => {\n        gsap.from(el, {\n          y: 40,\n          opacity: 0,\n          duration: 0.8,\n          ease: 'power2.out',\n          scrollTrigger: {\n            trigger: el,\n            start: 'top 85%',\n            toggleActions: 'play none none none'\n          }\n        });\n      });\n\n      gsap.utils.toArray('.nv-reveal-left').forEach((el) => {\n        gsap.from(el, {\n          x: -50,\n          opacity: 0,\n          duration: 0.8,\n          ease: 'power2.out',\n          scrollTrigger: {\n            trigger: el,\n            start: 'top 85%',\n            toggleActions: 'play none none none'\n          }\n        });\n      });\n\n      gsap.utils.toArray('.nv-reveal-right').forEach((el) => {\n        gsap.from(el, {\n          x: 50,\n          opacity: 0,\n          duration: 0.8,\n          ease: 'power2.out',\n          scrollTrigger: {\n            trigger: el,\n            start: 'top 85%',\n            toggleActions: 'play none none none'\n          }\n        });\n      });\n\n      \/\/ Dynamic Background Glow Parallax\n      gsap.utils.toArray('.nv-glow-orb').forEach((orb, i) => {\n        gsap.to(orb, {\n          y: (i % 2 === 0 ? 80 : -80),\n          ease: 'none',\n          scrollTrigger: {\n            trigger: orb.parentElement,\n            start: 'top bottom',\n            end: 'bottom top',\n            scrub: true\n          }\n        });\n      });\n    } catch (e) {\n      console.warn(\"GSAP parallax execution failed:\", e.message);\n    }\n  }\n\n  \/\/ ========== Premium Magnetic Interactive Elements ==========\n  function initMagneticElements() {\n    const magneticEls = document.querySelectorAll('.nv-nav-link, .nv-logo, .nv-tab-btn, .nv-form-submit, .nv-success-close, .nv-cta-btn');\n    magneticEls.forEach(el => {\n      el.addEventListener('mousemove', e => {\n        const rect = el.getBoundingClientRect();\n        const factor = el.classList.contains('nv-nav-link') || el.classList.contains('nv-logo') ? 0.25 : 0.35;\n        const x = (e.clientX - rect.left - (rect.width \/ 2)) * factor;\n        const y = (e.clientY - rect.top - (rect.height \/ 2)) * factor;\n        \n        gsap.to(el, {\n          x: x,\n          y: y,\n          duration: 0.3,\n          ease: 'power2.out',\n          overwrite: 'auto'\n        });\n      });\n      el.addEventListener('mouseleave', () => {\n        gsap.to(el, {\n          x: 0,\n          y: 0,\n          duration: 0.6,\n          ease: 'elastic.out(1.1, 0.6)',\n          overwrite: 'auto'\n        });\n      });\n    });\n  }\n  if (typeof gsap !== 'undefined') {\n    initMagneticElements();\n  }\n\n  \/\/ ========== Staggered Idle Floating & Scroll Depth Parallax ==========\n  function initAliveEffects() {\n    \/\/ 1. Idle Floating Animation (with random staggered delays and durations)\n    const floatTargets = document.querySelectorAll('.nv-feature-block, .nv-stat-card');\n    floatTargets.forEach((card, i) => {\n      card.style.animation = `nvIdleFloat ${6 + (i % 3) * 1.5}s ease-in-out infinite`;\n      card.style.animationDelay = `${-(i * 1.3)}s`;\n    });\n\n    \/\/ 2. Scroll Depth Parallax Shift\n    if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {\n      try {\n        \/\/ Offset alternating cards to drift slightly faster or slower on scroll\n        gsap.utils.toArray('.nv-features-grid, .nv-biz-grid, .nv-features-wrap').forEach((container) => {\n          const cards = container.querySelectorAll('.nv-feature-block, .nv-biz-card, .nv-stat-card');\n          cards.forEach((card, i) => {\n            const shiftY = (i % 2 === 0 ? 30 : -30);\n            gsap.to(card, {\n              y: shiftY,\n              ease: 'none',\n              scrollTrigger: {\n                trigger: container,\n                start: 'top bottom',\n                end: 'bottom top',\n                scrub: 1.5\n              }\n            });\n          });\n        });\n      } catch (err) {\n        console.warn(\"Scroll Parallax Init failed:\", err.message);\n      }\n    }\n  }\n\n  initAliveEffects();\n\n  \/\/ Set load flag to indicate scripts ran successfully\n  window.nvScriptsLoaded = true;\n\n})();\n<\/script>\n\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-23","page","type-page","status-publish"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/pages\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/comments?post=23"}],"version-history":[{"count":5,"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/pages\/23\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/pages\/23\/revisions\/73"}],"wp:attachment":[{"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/media?parent=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}