{"id":21,"date":"2026-06-04T02:15:40","date_gmt":"2026-06-04T02:15:40","guid":{"rendered":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/products\/"},"modified":"2026-06-04T09:01:27","modified_gmt":"2026-06-04T09:01:27","slug":"products","status":"publish","type":"page","link":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/products\/","title":{"rendered":"\uc81c\ud488\uc18c\uac1c"},"content":{"rendered":"<div class=\"nv-page\">\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<!-- Cursor Follower -->\n<div class=\"nv-cursor-follower\" id=\"nvCursorFollower\"><\/div>\n\n<style>\n.inside-article,\n.site-content,\n#content,\n#primary,\nmain {\n  background: transparent !important;\n  border: none !important;\n  box-shadow: none !important;\n  padding: 0 !important;\n}\n\n:root {\n  --nv-bg: #0a0a1a;\n  --nv-surface: #111127;\n  --nv-card: #1a1a3e;\n  --nv-primary: #00d4ff;\n  --nv-secondary: #7c3aed;\n  --nv-gradient: linear-gradient(135deg, #00d4ff, #7c3aed);\n  --nv-text: #ffffff;\n  --nv-text-secondary: #94a3b8;\n  --nv-text-muted: #64748b;\n  --nv-border: rgba(255,255,255,0.08);\n  --nv-glow-cyan: rgba(0, 212, 255, 0.3);\n  --nv-glow-purple: rgba(124, 58, 237, 0.3);\n  --nv-cat-factory: #00d4ff;\n  --nv-cat-iot: #7c3aed;\n  --nv-cat-ai: #f59e0b;\n  --nv-cat-cloud: #10b981;\n  --font-heading: 'Outfit', 'Inter', sans-serif;\n  --font-body: 'Inter', 'Noto Sans KR', sans-serif;\n}\n\n\n*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }\n\nbody { background:var(--nv-bg) !important; color:var(--nv-text); font-family:var(--font-body); overflow-x:hidden; -webkit-font-smoothing:antialiased; }\na { text-decoration: none; color: inherit; }\n\n\n\n\/* Cursor Follower Style *\/\n.nv-cursor-follower {\n  width: 24px;\n  height: 24px;\n  background: radial-gradient(circle, var(--nv-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, .wp-site-blocks > header, .wp-site-blocks > footer { display: none !important; }\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 { margin: 0 !important; padding: 0 !important; background: #0a0a1a !important; background-color: #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\n\n\/* \u2500\u2500 Scroll Progress \u2500\u2500 *\/\n.nv-scroll-progress { position:fixed; top:0; left:0; height:3px; background:var(--nv-gradient); z-index:10001; width:0; transition:width 0.1s linear; }\n\n\n\/* \u2500\u2500 Page Transition \u2500\u2500 *\/\n.nv-page-transition { position:fixed; inset:0; background:var(--nv-bg); z-index:99999; pointer-events:none; opacity:0; transition:opacity 0.6s cubic-bezier(.77,0,.175,1); }\n\n.nv-page-transition.active { opacity:1; pointer-events:all; }\n\n\n\/* \u2500\u2500 Navigation \u2500\u2500 *\/\n\n\n\n\n\n@keyframes nvLogoPulse { 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(180deg);} }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\/* \u2500\u2500 Hero Section \u2500\u2500 *\/\n.nv-products-hero {\n  position:relative;\n  min-height:70vh;\n  display:flex;\n  flex-direction:column;\n  align-items:center;\n  justify-content:center;\n  text-align:center;\n  overflow:hidden;\n  padding:140px 40px 100px;\n}\n@media(max-width:768px) {\n  .nv-products-hero { min-height:60vh; padding:120px 24px 80px; }\n}\n\n.nv-hero-mesh {\n  position:absolute; inset:0; z-index:0;\n  background:\n    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(0,212,255,0.12) 0%, transparent 70%),\n    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(124,58,237,0.12) 0%, transparent 70%),\n    radial-gradient(ellipse 40% 40% at 50% 80%, rgba(245,158,11,0.06) 0%, transparent 70%);\n  animation:nvMeshShift 12s ease-in-out infinite alternate;\n}\n\n@keyframes nvMeshShift {\n  0% { filter:hue-rotate(0deg); transform:scale(1); }\n  50% { filter:hue-rotate(15deg); transform:scale(1.05); }\n  100% { filter:hue-rotate(-10deg); transform:scale(1); }\n}\n\n.nv-hero-grid-bg {\n  position:absolute; inset:0; z-index:0;\n  background-image:\n    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);\n  background-size:60px 60px;\n  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%);\n  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%);\n}\n\n.nv-hero-particles {\n  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;\n}\n\n.nv-hero-particle {\n  position:absolute; width:3px; height:3px; border-radius:50%;\n  background:var(--nv-primary); opacity:0;\n  animation:nvParticleFloat 8s ease-in-out infinite;\n}\n\n@keyframes nvParticleFloat {\n  0% { opacity:0; transform:translateY(100px) scale(0); }\n  20% { opacity:0.8; }\n  80% { opacity:0.6; }\n  100% { opacity:0; transform:translateY(-200px) scale(1.5); }\n}\n\n.nv-breadcrumb {\n  position:relative; z-index:2;\n  display:flex; align-items:center; gap:8px;\n  font-size:14px; color:var(--nv-text-muted);\n  margin-bottom:32px;\n}\n\n.nv-breadcrumb a { color:var(--nv-text-muted); text-decoration:none; transition:color 0.3s; }\n\n.nv-breadcrumb a:hover { color:var(--nv-primary); }\n\n.nv-breadcrumb-sep { color:var(--nv-text-muted); font-size:12px; }\n\n.nv-breadcrumb-current { color:var(--nv-primary); font-weight:500; }\n\n.nv-hero-title {\n  position:relative; z-index:2;\n  font-size:clamp(40px,6vw,72px);\n  font-weight:900;\n  letter-spacing:-1px;\n  line-height:1.15;\n  margin-bottom:20px;\n}\n\n.nv-hero-title-gradient {\n  background:var(--nv-gradient);\n  -webkit-background-clip:text;\n  -webkit-text-fill-color:transparent;\n  background-size:200% 200%;\n  animation:nvGradientFlow 4s ease-in-out infinite;\n}\n\n.js-active .nv-hero-title-gradient {\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 nvGradientFlow {\n  0% { background-position:0% 50%; }\n  50% { background-position:100% 50%; }\n  100% { background-position:0% 50%; }\n}\n\n.nv-hero-sub {\n  position:relative; z-index:2;\n  font-size:clamp(16px,2vw,20px);\n  color:var(--nv-text-secondary);\n  font-weight:300;\n  max-width:600px;\n  line-height:1.6;\n}\n\n.nv-hero-deco-ring {\n  position:absolute; z-index:0; border-radius:50%;\n  border:1px solid rgba(0,212,255,0.08);\n  animation:nvRingSpin 30s linear infinite;\n}\n\n@keyframes nvRingSpin { to { transform:rotate(360deg); } }\n\n\n\/* \u2500\u2500 Filter Bar \u2500\u2500 *\/\n.nv-filter-section {\n  position:sticky; top:60px; z-index:100;\n  background:rgba(10,10,26,0.9);\n  backdrop-filter:blur(20px) saturate(1.5);\n  border-bottom: none !important;\n  padding:0;\n  transition:top 0.3s;\n}\n\n.nv-filter-inner {\n  max-width:1320px; margin:0 auto; padding:16px 40px;\n  display:flex; align-items:center; gap:12px;\n  overflow-x:auto;\n  scrollbar-width:none;\n  -ms-overflow-style:none;\n}\n\n.nv-filter-inner::-webkit-scrollbar { display:none; }\n\n.nv-filter-btn {\n  flex-shrink:0;\n  padding:10px 28px;\n  border-radius:50px;\n  border:1px solid var(--nv-border);\n  background:transparent;\n  color:var(--nv-text-secondary);\n  font-family:'Noto Sans KR',sans-serif;\n  font-size:14px;\n  font-weight:500;\n  cursor:pointer;\n  transition:all 0.35s cubic-bezier(.4,0,.2,1);\n  position:relative;\n  overflow:hidden;\n  white-space:nowrap;\n}\n\n.nv-filter-btn::before {\n  content:'';\n  position:absolute; inset:0;\n  background:var(--nv-gradient);\n  opacity:0;\n  transition:opacity 0.35s;\n  border-radius:50px;\n}\n\n.nv-filter-btn:hover {\n  border-color:rgba(0,212,255,0.3);\n  color:var(--nv-text);\n  transform:translateY(-1px);\n}\n\n.nv-filter-btn.active {\n  border-color:transparent;\n  color:#fff;\n  font-weight:600;\n  box-shadow:0 4px 20px var(--nv-glow-cyan), 0 2px 10px var(--nv-glow-purple);\n}\n\n.nv-filter-btn.active::before { opacity:1; }\n\n.nv-filter-btn span { position:relative; z-index:1; }\n\n.nv-filter-count {\n  display:inline-flex; align-items:center; justify-content:center;\n  min-width:22px; height:22px;\n  background:rgba(255,255,255,0.1); border-radius:11px;\n  font-family:'Inter',sans-serif; font-size:11px; font-weight:600;\n  margin-left:8px; padding:0 6px;\n  transition:all 0.3s;\n}\n\n.nv-filter-btn.active .nv-filter-count { background:rgba(255,255,255,0.25); }\n\n\n\/* \u2500\u2500 Products Grid \u2500\u2500 *\/\n.nv-products-section {\n  max-width:1320px; margin:0 auto;\n  padding:60px 40px 80px;\n  min-height:60vh;\n}\n\n.nv-products-grid {\n  display:grid;\n  grid-template-columns:repeat(3, 1fr);\n  gap:28px;\n}\n\n\n\/* \u2500\u2500 Product Card \u2500\u2500 *\/\n.nv-product-card {\n  position:relative;\n  background:rgba(26,26,62,0.5);\n  border:1px solid var(--nv-border);\n  border-radius:20px;\n  padding:32px 28px 28px;\n  display:flex;\n  flex-direction:column;\n  gap:16px;\n  cursor:pointer;\n  opacity:0;\n  transform:translateY(40px) scale(0.95);\n  transition:all 0.5s cubic-bezier(.4,0,.2,1);\n  overflow:hidden;\n  backdrop-filter:blur(10px);\n}\n\n.nv-product-card::before {\n  content:'';\n  position:absolute; inset:0;\n  border-radius:20px;\n  padding:1px;\n  background:linear-gradient(135deg, rgba(0,212,255,0), rgba(124,58,237,0));\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  transition:background 0.5s;\n  pointer-events:none;\n}\n\n.nv-product-card::after {\n  content:'';\n  position:absolute; top:0; left:-100%; width:200%; height:100%;\n  background:linear-gradient(90deg, transparent, rgba(0,212,255,0.03), transparent);\n  transition:left 0.7s;\n  pointer-events:none;\n}\n\n.nv-product-card.visible {\n  opacity:1;\n  transform:translateY(0) scale(1);\n}\n\n.nv-product-card:hover {\n  transform:translateY(-8px) scale(1.02);\n  border-color:rgba(0,212,255,0.2);\n  box-shadow:\n    0 20px 60px rgba(0,0,0,0.4),\n    0 0 40px var(--nv-glow-cyan),\n    0 0 80px rgba(124,58,237,0.1);\n  background:rgba(26,26,62,0.7);\n}\n\n.nv-product-card:hover::before {\n  background:linear-gradient(135deg, rgba(0,212,255,0.5), rgba(124,58,237,0.5));\n}\n\n.nv-product-card:hover::after { left:100%; }\n\n\n\/* Card inner elements *\/\n.nv-product-card-deco {\n  position:absolute; top:-30px; right:-30px;\n  width:100px; height:100px;\n  border-radius:50%;\n  opacity:0.06;\n  transition:opacity 0.5s;\n}\n\n.nv-product-card:hover .nv-product-card-deco { opacity:0.12; }\n\n.nv-product-cat {\n  display:inline-flex; align-items:center; gap:6px;\n  padding:5px 14px;\n  border-radius:20px;\n  font-size:12px; font-weight:600;\n  letter-spacing:0.5px;\n  width:fit-content;\n  position:relative;\n  z-index:1;\n}\n\n.cat-factory { background:rgba(0,212,255,0.12); color:var(--nv-cat-factory); border:1px solid rgba(0,212,255,0.2); }\n\n.cat-iot { background:rgba(124,58,237,0.12); color:var(--nv-cat-iot); border:1px solid rgba(124,58,237,0.2); }\n\n.cat-ai { background:rgba(245,158,11,0.12); color:var(--nv-cat-ai); border:1px solid rgba(245,158,11,0.2); }\n\n.cat-cloud { background:rgba(16,185,129,0.12); color:var(--nv-cat-cloud); border:1px solid rgba(16,185,129,0.2); }\n\n.cat-factory .nv-cat-dot { background:var(--nv-cat-factory); }\n\n.cat-iot .nv-cat-dot { background:var(--nv-cat-iot); }\n\n.cat-ai .nv-cat-dot { background:var(--nv-cat-ai); }\n\n.cat-cloud .nv-cat-dot { background:var(--nv-cat-cloud); }\n\n.nv-cat-dot { width:6px; height:6px; border-radius:50%; animation:nvDotPulse 2s ease-in-out infinite; }\n\n@keyframes nvDotPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(1.3);} }\n\n\n.nv-product-title {\n  font-size:20px; font-weight:700; line-height:1.4;\n  color:var(--nv-text);\n  position:relative; z-index:1;\n  transition:color 0.3s;\n}\n\n.nv-product-card:hover .nv-product-title { color:var(--nv-primary); }\n\n.nv-product-excerpt {\n  font-size:14px; line-height:1.7;\n  color:var(--nv-text-secondary);\n  flex:1;\n  position:relative; z-index:1;\n  display:-webkit-box;\n  -webkit-line-clamp:3;\n  -webkit-box-orient:vertical;\n  overflow:hidden;\n}\n\n.nv-product-excerpt p { margin:0; }\n\n.nv-product-link {\n  display:inline-flex; align-items:center; gap:8px;\n  color:var(--nv-primary);\n  text-decoration:none;\n  font-size:14px; font-weight:600;\n  position:relative; z-index:1;\n  transition:all 0.3s;\n  margin-top:auto;\n}\n\n.nv-product-link::after {\n  content:''; display:block;\n  width:0; height:1.5px;\n  background:var(--nv-primary);\n  transition:width 0.3s;\n  position:absolute; bottom:-2px; left:0;\n}\n\n.nv-product-card:hover .nv-product-link::after { width:calc(100% - 20px); }\n\n.nv-product-link:hover { gap:14px; }\n\n\n\/* \u2500\u2500 Loading Skeleton \u2500\u2500 *\/\n.nv-loading-grid {\n  display:grid;\n  grid-template-columns:repeat(3, 1fr);\n  gap:28px;\n}\n\n.nv-skeleton-card {\n  border-radius:20px;\n  background:rgba(26,26,62,0.4);\n  border:1px solid var(--nv-border);\n  padding:32px 28px 28px;\n  display:flex; flex-direction:column; gap:16px;\n}\n\n.nv-skeleton-line {\n  height:14px; border-radius:8px;\n  background:linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);\n  background-size:200% 100%;\n  animation:nvSkeletonPulse 1.5s ease-in-out infinite;\n}\n\n.nv-skeleton-badge { width:100px; height:28px; border-radius:20px; }\n\n.nv-skeleton-title { width:80%; height:22px; }\n\n.nv-skeleton-text1 { width:100%; }\n\n.nv-skeleton-text2 { width:90%; }\n\n.nv-skeleton-text3 { width:60%; }\n\n.nv-skeleton-btn { width:110px; height:16px; margin-top:12px; }\n\n@keyframes nvSkeletonPulse {\n  0% { background-position:200% 0; }\n  100% { background-position:-200% 0; }\n}\n\n\n\/* \u2500\u2500 Empty State \u2500\u2500 *\/\n.nv-empty-state {\n  grid-column:1\/-1;\n  text-align:center;\n  padding:80px 20px;\n}\n\n.nv-empty-icon { font-size:64px; margin-bottom:20px; opacity:0.3; }\n\n.nv-empty-title { font-size:22px; font-weight:700; color:var(--nv-text-secondary); margin-bottom:10px; }\n\n.nv-empty-desc { font-size:15px; color:var(--nv-text-muted); }\n\n\n\/* \u2500\u2500 Error State \u2500\u2500 *\/\n.nv-error-state {\n  grid-column:1\/-1;\n  text-align:center;\n  padding:80px 20px;\n}\n\n.nv-error-icon { font-size:48px; margin-bottom:16px; }\n\n.nv-error-msg { font-size:16px; color:var(--nv-text-secondary); margin-bottom:20px; }\n\n.nv-retry-btn {\n  padding:12px 32px;\n  background:var(--nv-gradient);\n  border:none; border-radius:50px;\n  color:#fff; font-family:'Noto Sans KR',sans-serif;\n  font-size:14px; font-weight:600;\n  cursor:pointer; transition:all 0.3s;\n}\n\n.nv-retry-btn:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--nv-glow-cyan); }\n\n\n\/* \u2500\u2500 Stats Section \u2500\u2500 *\/\n.nv-stats-section {\n  background:var(--nv-surface);\n  border-top:1px solid var(--nv-border);\n  border-bottom:1px solid var(--nv-border);\n  padding:80px 40px;\n}\n\n.nv-stats-inner {\n  max-width:1320px; margin:0 auto;\n  display:grid;\n  grid-template-columns:repeat(4, 1fr);\n  gap:24px;\n}\n\n.nv-stat-block {\n  text-align:center;\n  padding:40px 20px;\n  border-radius:20px;\n  background:rgba(26,26,62,0.3);\n  border:1px solid var(--nv-border);\n  position:relative;\n  overflow:hidden;\n  transition:all 0.4s;\n}\n\n.nv-stat-block::before {\n  content:'';\n  position:absolute; inset:0;\n  background:radial-gradient(circle at 50% 0%, rgba(0,212,255,0.05), transparent 70%);\n  opacity:0; transition:opacity 0.5s;\n}\n\n.nv-stat-block:hover::before { opacity:1; }\n\n.nv-stat-block:hover {\n  transform:translateY(-4px);\n  border-color:rgba(0,212,255,0.15);\n  box-shadow:0 10px 40px rgba(0,0,0,0.3);\n}\n\n.nv-stat-number {\n  font-family:'Inter',sans-serif;\n  font-size:clamp(36px,4vw,52px);\n  font-weight:800;\n  background:var(--nv-gradient);\n  -webkit-background-clip:text;\n  -webkit-text-fill-color:transparent;\n  margin-bottom:8px;\n  line-height:1.1;\n}\n\n.nv-stat-label {\n  font-size:15px;\n  color:var(--nv-text-secondary);\n  font-weight:400;\n}\n\n.nv-stat-icon {\n  font-size:32px;\n  margin-bottom:16px;\n  display:block;\n}\n\n\n\/* \u2500\u2500 CTA Section \u2500\u2500 *\/\n.nv-cta-section {\n  position:relative;\n  padding:100px 40px;\n  text-align:center;\n  overflow:hidden;\n}\n\n.nv-cta-bg {\n  position:absolute; inset:0;\n  background:\n    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,212,255,0.08), transparent),\n    radial-gradient(ellipse 60% 80% at 30% 70%, rgba(124,58,237,0.06), transparent);\n}\n\n.nv-cta-inner { position:relative; z-index:1; }\n\n.nv-cta-title {\n  font-size:clamp(28px,4vw,42px);\n  font-weight:800;\n  margin-bottom:16px;\n  line-height:1.3;\n}\n\n.nv-cta-desc {\n  font-size:17px;\n  color:var(--nv-text-secondary);\n  margin-bottom:40px;\n  max-width:500px;\n  margin-left:auto; margin-right:auto;\n  line-height:1.6;\n}\n\n.nv-cta-btn {\n  display:inline-flex; align-items:center; gap:10px;\n  padding:16px 44px;\n  background:var(--nv-gradient);\n  color:#fff;\n  text-decoration:none;\n  border-radius:60px;\n  font-size:16px; font-weight:700;\n  transition:all 0.4s cubic-bezier(.4,0,.2,1);\n  position:relative;\n  overflow:hidden;\n}\n\n.nv-cta-btn::before {\n  content:'';\n  position:absolute; inset:0;\n  background:linear-gradient(135deg, rgba(255,255,255,0.2), transparent);\n  opacity:0; transition:opacity 0.4s;\n}\n\n.nv-cta-btn:hover {\n  transform:translateY(-3px) scale(1.04);\n  box-shadow:0 12px 40px var(--nv-glow-cyan), 0 4px 20px var(--nv-glow-purple);\n}\n\n.nv-cta-btn:hover::before { opacity:1; }\n\n.nv-cta-btn-arrow { transition:transform 0.3s; }\n\n.nv-cta-btn:hover .nv-cta-btn-arrow { transform:translateX(4px); }\n\n\n\/* \u2500\u2500 Footer \u2500\u2500 *\/\n\n\n\n\n\n\n\n\n\n\n\n\n\/* \u2500\u2500 Top Button \u2500\u2500 *\/\n.nv-top-btn {\n  position:fixed; bottom:32px; right:32px; z-index:9000;\n  width:48px; height:48px; border-radius:50%;\n  background:var(--nv-gradient);\n  border:none; color:#fff; cursor:pointer;\n  display:flex; align-items:center; justify-content:center;\n  opacity:0; visibility:hidden;\n  transform:translateY(20px);\n  transition:all 0.4s cubic-bezier(.4,0,.2,1);\n  box-shadow:0 4px 20px var(--nv-glow-cyan);\n}\n\n.nv-top-btn.visible { opacity:1; visibility:visible; transform:translateY(0); }\n\n.nv-top-btn:hover { transform:translateY(-4px) scale(1.1); }\n\n\n\/* \u2500\u2500 Responsive \u2500\u2500 *\/\n@media(max-width:1024px) {\n  .nv-products-grid, .nv-loading-grid { grid-template-columns:repeat(2, 1fr); }\n  \n    .nv-stats-inner { grid-template-columns:repeat(2, 1fr); }\n}\n\n@media(max-width:768px) {\n  .nv-products-section { padding:40px 20px 60px; }\n  \n    .nv-products-grid, .nv-loading-grid { grid-template-columns:1fr; gap:20px; }\n  \n    .nv-filter-inner { padding:12px 20px; gap:8px; }\n  \n    .nv-filter-btn { padding:8px 20px; font-size:13px; }\n  \n    .nv-stats-inner { grid-template-columns:repeat(2, 1fr); gap:16px; }\n  \n    .nv-stat-block { padding:28px 16px; }\n  \n    .nv-cta-section { padding:60px 20px; }\n}\n\n@media(max-width:480px) {\n  .nv-stats-inner { grid-template-columns:1fr 1fr; }\n}\n\n\n\/* Character Reveals & Entrances *\/\n.nv-hero-title .char-reveal {\n  display: inline-block;\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  \n  \/* Direct gradient to fix parent clipping + transform bug *\/\n  background: var(--nv-gradient);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-size: 200% 200%;\n}\n\n@keyframes nvCharFadeIn {\n  from { opacity:0; transform:translateY(30px) rotateX(-20deg); }\n  to { opacity:1; transform:translateY(0) rotateX(0); }\n}\n\n.nv-hero-sub {\n  opacity: 0;\n  animation: heroEntranceUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n  animation-delay: 0.8s;\n}\n\n@keyframes heroEntranceUp {\n  from { opacity: 0; transform: translateY(30px); }\n  to { opacity: 1; transform: translateY(0); }\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\n@keyframes nvIdleFloat {\n  0% { translate: 0 0px; }\n  50% { translate: 0 -5px; }\n  100% { translate: 0 0px; }\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-links {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 40px;\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-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  \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\n\/* ===================== PREMIUM DARK GLASS OVERRIDES ===================== *\/\n.nv-filter-section {\n  position: sticky !important;\n  top: 75px !important;\n  z-index: 100 !important;\n  background: transparent !important;\n  backdrop-filter: none !important;\n  -webkit-backdrop-filter: none !important;\n  border-bottom: none !important;\n  padding: 12px 0 !important;\n}\n.nv-filter-inner {\n  max-width: fit-content !important;\n  margin: 0 auto !important;\n  padding: 6px 10px !important;\n  background: rgba(255, 255, 255, 0.03) !important;\n  backdrop-filter: blur(20px) !important;\n  -webkit-backdrop-filter: blur(20px) !important;\n  border: 1px solid rgba(255, 255, 255, 0.08) !important;\n  border-radius: 100px !important;\n  display: flex !important;\n  justify-content: center !important;\n  align-items: center !important;\n  gap: 4px !important;\n  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3) !important;\n}\n.nv-filter-btn {\n  background: transparent !important;\n  border: 1px solid transparent !important;\n  padding: 8px 22px !important;\n  border-radius: 100px !important;\n  font-weight: 500 !important;\n  box-shadow: none !important;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\n}\n.nv-filter-btn span {\n  color: rgba(255, 255, 255, 0.6) !important;\n}\n.nv-filter-btn:hover {\n  background: rgba(255, 255, 255, 0.05) !important;\n}\n.nv-filter-btn:hover span {\n  color: #ffffff !important;\n}\n.nv-filter-btn.active {\n  background: var(--nv-gradient, linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%)) !important;\n  border-color: transparent !important;\n  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3) !important;\n}\n.nv-filter-btn.active span {\n  color: #ffffff !important;\n  font-weight: 600 !important;\n}\n\n\/* Product Card Visuals overrides *\/\n.nv-product-visual {\n  width: 100%;\n  height: 140px;\n  background: rgba(255, 255, 255, 0.02) !important;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 8px;\n  position: relative;\n  overflow: hidden;\n  border: 1px solid rgba(255, 255, 255, 0.04);\n  transition: background 0.3s, border-color 0.3s;\n}\n.nv-product-card:hover .nv-product-visual {\n  background: rgba(255, 255, 255, 0.04) !important;\n  border-color: rgba(0, 212, 255, 0.3);\n}\n.nv-product-svg {\n  width: 70px;\n  height: 70px;\n  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.nv-product-card:hover .nv-product-svg {\n  transform: scale(1.15) rotate(5deg);\n}\n<\/style>\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<!-- Navigation -->\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 active\">\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 active\">\uc81c\ud488\uc18c\uac1c<\/a>\n  <a href=\"\/support\/\" class=\"nv-mobile-link\">\uace0\uac1d\uc9c0\uc6d0<\/a>\n<\/div>\n\n<!-- ============ HERO ============ -->\n<section class=\"nv-products-hero\">\n  <!-- Dynamic glows & digital grids -->\n  <div class=\"nv-glow-orb o1\" style=\"opacity: 0.12;\"><\/div>\n  <div class=\"nv-glow-orb o2\" style=\"opacity: 0.12;\"><\/div>\n  <div class=\"nv-grid-overlay\"><\/div>\n  <div class=\"nv-hero-mesh\"><\/div>\n  <div class=\"nv-hero-grid-bg\"><\/div>\n  <div class=\"nv-hero-particles\" id=\"nvHeroParticles\"><\/div>\n\n  <!-- Decorative rings -->\n  <div class=\"nv-hero-deco-ring\" style=\"width:500px;height:500px;top:-100px;right:-120px;\"><\/div>\n  <div class=\"nv-hero-deco-ring\" style=\"width:300px;height:300px;bottom:-60px;left:-80px;animation-direction:reverse;animation-duration:24s;border-color:rgba(124,58,237,0.08);\"><\/div>\n\n  <div class=\"nv-breadcrumb\">\n    <a href=\"\/\">\ud648<\/a>\n    <span class=\"nv-breadcrumb-sep\">\u203a<\/span>\n    <span class=\"nv-breadcrumb-current\">\uc81c\ud488\uc18c\uac1c<\/span>\n  <\/div>\n\n  <h1 class=\"nv-hero-title\">\n    <span class=\"nv-hero-title-gradient\">\uc81c\ud488\uc18c\uac1c<\/span>\n  <\/h1>\n  <p class=\"nv-hero-sub\">\uc0b0\uc5c5 \ud601\uc2e0\uc744 \uc704\ud55c \ucd5c\uace0\uc758 \uae30\uc220 \uc194\ub8e8\uc158<\/p>\n<\/section>\n\n<!-- ============ FILTER BAR ============ -->\n<section class=\"nv-filter-section\" id=\"nvFilterBar\">\n  <div class=\"nv-filter-inner\">\n    <button class=\"nv-filter-btn active\" data-category=\"all\"><span>\uc804\uccb4<\/span><\/button>\n    <button class=\"nv-filter-btn\" data-category=\"smart-factory\"><span>\uc2a4\ub9c8\ud2b8\ud329\ud1a0\ub9ac<\/span><\/button>\n    <button class=\"nv-filter-btn\" data-category=\"iot-solution\"><span>IoT\uc194\ub8e8\uc158<\/span><\/button>\n    <button class=\"nv-filter-btn\" data-category=\"ai-platform\"><span>AI\ud50c\ub7ab\ud3fc<\/span><\/button>\n    <button class=\"nv-filter-btn\" data-category=\"cloud-service\"><span>\ud074\ub77c\uc6b0\ub4dc\uc11c\ube44\uc2a4<\/span><\/button>\n  <\/div>\n<\/section>\n\n<!-- ============ PRODUCTS GRID ============ -->\n<section class=\"nv-products-section\">\n  <div class=\"nv-products-grid\" id=\"productsGrid\">\n    <!-- Products will be dynamically loaded here -->\n  <\/div>\n<\/section>\n\n<!-- ============ STATS ============ -->\n<section class=\"nv-stats-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-stats-inner nv-reveal-group\">\n    <div class=\"nv-stat-block nv-reveal-item\">\n      <span class=\"nv-stat-icon\">\ud83d\udce6<\/span>\n      <div class=\"nv-stat-number\" data-target=\"12\" data-suffix=\"+\">0<\/div>\n      <div class=\"nv-stat-label\">\uc81c\ud488 \ub77c\uc778\uc5c5<\/div>\n    <\/div>\n    <div class=\"nv-stat-block nv-reveal-item\">\n      <span class=\"nv-stat-icon\">\ud83c\udfe2<\/span>\n      <div class=\"nv-stat-number\" data-target=\"500\" data-suffix=\"+\">0<\/div>\n      <div class=\"nv-stat-label\">\ub3c4\uc785 \uae30\uc5c5<\/div>\n    <\/div>\n    <div class=\"nv-stat-block nv-reveal-item\">\n      <span class=\"nv-stat-icon\">\u2b50<\/span>\n      <div class=\"nv-stat-number\" data-target=\"99.9\" data-suffix=\"%\" data-decimal=\"1\">0<\/div>\n      <div class=\"nv-stat-label\">\uace0\uac1d \ub9cc\uc871\ub3c4<\/div>\n    <\/div>\n    <div class=\"nv-stat-block nv-reveal-item\">\n      <span class=\"nv-stat-icon\">\ud83d\udee1\ufe0f<\/span>\n      <div class=\"nv-stat-number\" data-target=\"24\" data-suffix=\"\/7\">0<\/div>\n      <div class=\"nv-stat-label\">\uae30\uc220 \uc9c0\uc6d0<\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ============ CTA ============ -->\n<section class=\"nv-cta-section nv-reveal-up\">\n  <!-- Dynamic glows & digital grids -->\n  <div class=\"nv-glow-orb o3\"><\/div>\n  <div class=\"nv-grid-overlay\"><\/div>\n  <div class=\"nv-cta-bg\"><\/div>\n  <div class=\"nv-cta-inner\">\n    <h2 class=\"nv-cta-title\">\uc81c\ud488\uc5d0 \ub300\ud574<br>\ub354 \uc54c\uace0 \uc2f6\uc73c\uc2dc\ub2e4\uba74<\/h2>\n    <p class=\"nv-cta-desc\">\uc804\ubb38 \ucee8\uc124\ud134\ud2b8\uac00 \uadc0\uc0ac\uc5d0 \ucd5c\uc801\ud654\ub41c \uc194\ub8e8\uc158\uc744 \uc81c\uc548\ud574 \ub4dc\ub9bd\ub2c8\ub2e4. \uc9c0\uae08 \ubc14\ub85c \ubb38\uc758\ud574 \uc8fc\uc138\uc694.<\/p>\n    <a href=\"\/support\/\" class=\"nv-cta-btn\">\n      <span>\ubb38\uc758\ud558\uae30<\/span>\n      <span class=\"nv-cta-btn-arrow\">\u2192<\/span>\n    <\/a>\n  <\/div>\n<\/section>\n\n<!-- ============ FOOTER ============ -->\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<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<!-- ============ SCRIPTS ============ -->\n<script>\n(function(){\n  'use strict';\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  \/\/ \u2500\u2500 Nav scroll effect \u2500\u2500\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) { const h = document.documentElement.scrollHeight - window.innerHeight; prog.style.width = (window.scrollY \/ h * 100) + '%'; }\n  });\n\n  \/\/ \u2500\u2500 Hamburger \u2500\u2500\n  document.getElementById('nvHamburger').addEventListener('click', () => {\n    document.getElementById('nvMobileMenu').classList.toggle('open');\n    document.getElementById('nvHamburger').classList.toggle('open');\n  });\n\n  \/\/ \u2500\u2500 Top button \u2500\u2500\n  document.getElementById('nvTopBtn').addEventListener('click', () => window.scrollTo({top:0,behavior:'smooth'}));\n\n  \/\/ \u2500\u2500 Page transition \u2500\u2500\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('.nv-hero-title-gradient');\n  if (heroTitle) {\n    scrambleText(heroTitle, \"\uc81c\ud488\uc18c\uac1c\", 1200);\n  }\n\n  \/\/ ============================================\n  \/\/ NATIVE PARALLAX ENGINE\n  \/\/ ============================================\n  window.addEventListener('scroll', () => {\n    const scrolled = window.scrollY;\n    \n    \/\/ Hero elements parallax\n    const heroTitleBlock = document.querySelector('.nv-hero-title');\n    if (heroTitleBlock) {\n      heroTitleBlock.style.transform = `translateY(${scrolled * 0.4}px)`;\n    }\n    const heroSub = document.querySelector('.nv-hero-sub');\n    if (heroSub) {\n      heroSub.style.transform = `translateY(${scrolled * 0.3}px)`;\n    }\n    \n    \/\/ Glow orbs parallax\n    const orbs = document.querySelectorAll('.nv-glow-orb');\n    orbs.forEach((orb, i) => {\n      const speed = 0.05 * (i % 3 + 1);\n      orb.style.transform = `translateY(${scrolled * speed * (i % 2 === 0 ? 1 : -1)}px)`;\n    });\n  });\n\n  \/\/ \u2500\u2500 Hero Particles \u2500\u2500\n  const particlesContainer = document.getElementById('nvHeroParticles');\n  if (particlesContainer) {\n    for(let i = 0; i < 30; i++){\n      const p = document.createElement('div');\n      p.className = 'nv-hero-particle';\n      p.style.left = Math.random()*100 + '%';\n      p.style.top = Math.random()*100 + '%';\n      p.style.animationDelay = Math.random()*8 + 's';\n      p.style.animationDuration = (6 + Math.random()*6) + 's';\n      if(Math.random()>0.5) p.style.background = 'var(--nv-secondary)';\n      particlesContainer.appendChild(p);\n    }\n  }\n\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\n  \/\/   PRODUCTS API LOGIC\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\n  const API_URL = '\/wp-json\/wp\/v2\/posts';\n  const CATEGORY_MAP = { 'all': null, 'smart-factory': 2, 'iot-solution': 3, 'ai-platform': 4, 'cloud-service': 5 };\n  const CAT_NAMES = { 2:'\uc2a4\ub9c8\ud2b8\ud329\ud1a0\ub9ac', 3:'IoT\uc194\ub8e8\uc158', 4:'AI\ud50c\ub7ab\ud3fc', 5:'\ud074\ub77c\uc6b0\ub4dc\uc11c\ube44\uc2a4' };\n  const CAT_CLASSES = { 2:'cat-factory', 3:'cat-iot', 4:'cat-ai', 5:'cat-cloud' };\n\n  let currentCategory = 'all';\n\n  function showSkeleton(){\n    const grid = document.getElementById('productsGrid');\n    let html = '';\n    for(let i=0; i<6; i++){\n      html += `\n        <div class=\"nv-skeleton-card\">\n          <div class=\"nv-skeleton-line nv-skeleton-badge\"><\/div>\n          <div class=\"nv-skeleton-line nv-skeleton-title\"><\/div>\n          <div class=\"nv-skeleton-line nv-skeleton-text1\"><\/div>\n          <div class=\"nv-skeleton-line nv-skeleton-text2\"><\/div>\n          <div class=\"nv-skeleton-line nv-skeleton-text3\"><\/div>\n          <div class=\"nv-skeleton-line nv-skeleton-btn\"><\/div>\n        <\/div>`;\n    }\n    grid.className = 'nv-loading-grid';\n    grid.innerHTML = html;\n  }\n\n  function showError(){\n    const grid = document.getElementById('productsGrid');\n    grid.className = 'nv-products-grid';\n    grid.innerHTML = `\n      <div class=\"nv-error-state\">\n        <div class=\"nv-error-icon\">\u26a0\ufe0f<\/div>\n        <p class=\"nv-error-msg\">\uc81c\ud488\uc744 \ubd88\ub7ec\uc624\ub294\ub370 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.<br>\uc7a0\uc2dc \ud6c4 \ub2e4\uc2dc \uc2dc\ub3c4\ud574 \uc8fc\uc138\uc694.<\/p>\n        <button class=\"nv-retry-btn\" onclick=\"loadProducts(currentCategory)\">\ub2e4\uc2dc \uc2dc\ub3c4<\/button>\n      <\/div>`;\n  }\n\n  function showEmpty(){\n    const grid = document.getElementById('productsGrid');\n    grid.className = 'nv-products-grid';\n    grid.innerHTML = `\n      <div class=\"nv-empty-state\">\n        <div class=\"nv-empty-icon\">\ud83d\udced<\/div>\n        <div class=\"nv-empty-title\">\ub4f1\ub85d\ub41c \uc81c\ud488\uc774 \uc5c6\uc2b5\ub2c8\ub2e4<\/div>\n        <div class=\"nv-empty-desc\">\ud574\ub2f9 \uce74\ud14c\uace0\ub9ac\uc5d0 \ub4f1\ub85d\ub41c \uc81c\ud488\uc774 \uc544\uc9c1 \uc5c6\uc2b5\ub2c8\ub2e4.<\/div>\n      <\/div>`;\n  }\n\n  function renderProducts(posts){\n    const grid = document.getElementById('productsGrid');\n    grid.className = 'nv-products-grid';\n    grid.innerHTML = '';\n\n    if(!posts || posts.length === 0){\n      showEmpty();\n      return;\n    }\n\n    posts.forEach((post, i) => {\n      const catId = post.categories ? post.categories.find(c => [2,3,4,5].includes(c)) : null;\n      const catName = CAT_NAMES[catId] || '\uae30\ud0c0';\n      const catClass = CAT_CLASSES[catId] || 'cat-factory';\n\n      \/\/ Determine deco color\n      const decoColors = { 2:'var(--nv-cat-factory)', 3:'var(--nv-cat-iot)', 4:'var(--nv-cat-ai)', 5:'var(--nv-cat-cloud)' };\n      const decoColor = decoColors[catId] || 'var(--nv-primary)';\n\n      const card = document.createElement('div');\n      card.className = 'nv-product-card';\n      card.style.transitionDelay = (i * 0.08) + 's';\n      \n      const catSlugs = { 2:'smart-factory', 3:'iot', 4:'ai', 5:'cloud' };\n      const catSlug = catSlugs[catId] || 'smart-factory';\n      card.setAttribute('data-cat', catSlug);\n\n      \/\/ Generate a beautiful Category SVG\n      let svgIcon = '';\n      if (catSlug === 'smart-factory') {\n        svgIcon = `\n          <svg class=\"nv-product-svg\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <defs>\n              <linearGradient id=\"grad-factory-${i}\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n                <stop offset=\"0%\" stop-color=\"#00d4ff\" \/>\n                <stop offset=\"100%\" stop-color=\"#7c3aed\" \/>\n              <\/linearGradient>\n            <\/defs>\n            <circle cx=\"50\" cy=\"50\" r=\"30\" stroke=\"url(#grad-factory-${i})\" stroke-width=\"1.5\" stroke-dasharray=\"4 4\" \/>\n            <path d=\"M35 50 H65 M50 35 V65\" stroke=\"url(#grad-factory-${i})\" stroke-width=\"1.5\" \/>\n            <rect x=\"42\" y=\"42\" width=\"16\" height=\"16\" rx=\"4\" fill=\"url(#grad-factory-${i})\" fill-opacity=\"0.1\" stroke=\"url(#grad-factory-${i})\" stroke-width=\"1.5\" \/>\n            <circle cx=\"50\" cy=\"50\" r=\"4\" fill=\"#00d4ff\" \/>\n            <circle cx=\"35\" cy=\"50\" r=\"3\" fill=\"#7c3aed\" \/>\n            <circle cx=\"65\" cy=\"50\" r=\"3\" fill=\"#7c3aed\" \/>\n            <circle cx=\"50\" cy=\"35\" r=\"3\" fill=\"#00d4ff\" \/>\n            <circle cx=\"50\" cy=\"65\" r=\"3\" fill=\"#00d4ff\" \/>\n          <\/svg>\n        `;\n      } else if (catSlug === 'iot') {\n        svgIcon = `\n          <svg class=\"nv-product-svg\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <defs>\n              <linearGradient id=\"grad-iot-${i}\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n                <stop offset=\"0%\" stop-color=\"#7c3aed\" \/>\n                <stop offset=\"100%\" stop-color=\"#f43f5e\" \/>\n              <\/linearGradient>\n            <\/defs>\n            <circle cx=\"50\" cy=\"50\" r=\"8\" fill=\"url(#grad-iot-${i})\" \/>\n            <path d=\"M50 25 A25 25 0 0 1 75 50\" stroke=\"url(#grad-iot-${i})\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n            <path d=\"M25 50 A25 25 0 0 1 50 25\" stroke=\"url(#grad-iot-${i})\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n            <path d=\"M50 15 A35 35 0 0 1 85 50\" stroke=\"url(#grad-iot-${i})\" stroke-width=\"1.5\" stroke-dasharray=\"3 3\" \/>\n            <path d=\"M15 50 A35 35 0 0 1 50 15\" stroke=\"url(#grad-iot-${i})\" stroke-width=\"1.5\" stroke-dasharray=\"3 3\" \/>\n            <circle cx=\"75\" cy=\"50\" r=\"3\" fill=\"#f43f5e\" \/>\n            <circle cx=\"25\" cy=\"50\" r=\"3\" fill=\"#7c3aed\" \/>\n          <\/svg>\n        `;\n      } else if (catSlug === 'ai') {\n        svgIcon = `\n          <svg class=\"nv-product-svg\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <defs>\n              <linearGradient id=\"grad-ai-${i}\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n                <stop offset=\"0%\" stop-color=\"#f59e0b\" \/>\n                <stop offset=\"100%\" stop-color=\"#ef4444\" \/>\n              <\/linearGradient>\n            <\/defs>\n            <circle cx=\"50\" cy=\"30\" r=\"5\" fill=\"url(#grad-ai-${i})\" \/>\n            <circle cx=\"30\" cy=\"55\" r=\"5\" fill=\"url(#grad-ai-${i})\" \/>\n            <circle cx=\"70\" cy=\"55\" r=\"5\" fill=\"url(#grad-ai-${i})\" \/>\n            <circle cx=\"50\" cy=\"75\" r=\"5\" fill=\"url(#grad-ai-${i})\" \/>\n            <path d=\"M50 35 L30 50 M50 35 L70 50 M30 60 L50 70 M70 60 L50 70 M30 55 H70\" stroke=\"url(#grad-ai-${i})\" stroke-width=\"1.5\" \/>\n            <line x1=\"50\" y1=\"35\" x2=\"50\" y2=\"70\" stroke=\"url(#grad-ai-${i})\" stroke-width=\"1\" stroke-dasharray=\"2 2\" \/>\n          <\/svg>\n        `;\n      } else {\n        svgIcon = `\n          <svg class=\"nv-product-svg\" viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <defs>\n              <linearGradient id=\"grad-cloud-${i}\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n                <stop offset=\"0%\" stop-color=\"#10b981\" \/>\n                <stop offset=\"100%\" stop-color=\"#00d4ff\" \/>\n              <\/linearGradient>\n            <\/defs>\n            <path d=\"M30 40 H70 M30 52 H70 M30 64 H70\" stroke=\"url(#grad-cloud-${i})\" stroke-width=\"2\" stroke-linecap=\"round\" \/>\n            <rect x=\"25\" y=\"30\" width=\"50\" height=\"42\" rx=\"6\" stroke=\"url(#grad-cloud-${i})\" stroke-width=\"2\" \/>\n            <circle cx=\"35\" cy=\"40\" r=\"2\" fill=\"#10b981\" \/>\n            <circle cx=\"35\" cy=\"52\" r=\"2\" fill=\"#10b981\" \/>\n            <circle cx=\"35\" cy=\"64\" r=\"2\" fill=\"#10b981\" \/>\n          <\/svg>\n        `;\n      }\n\n      card.innerHTML = `\n        <div class=\"nv-product-card-deco\" style=\"background:${decoColor};\"><\/div>\n        <div class=\"nv-product-visual\">\n          ${svgIcon}\n        <\/div>\n        <div class=\"nv-product-cat ${catClass}\">\n          <span class=\"nv-cat-dot\"><\/span>\n          ${catName}\n        <\/div>\n        <h3 class=\"nv-product-title\">${post.title.rendered}<\/h3>\n        <div class=\"nv-product-excerpt\">${post.excerpt.rendered}<\/div>\n        <a href=\"${post.link}\" class=\"nv-product-link\">\uc790\uc138\ud788 \ubcf4\uae30 \u2192<\/a>\n      `;\n      grid.appendChild(card);\n    });\n\n    \/\/ Staggered entrance\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        grid.querySelectorAll('.nv-product-card').forEach((card, idx) => {\n          setTimeout(() => card.classList.add('visible'), idx * 80);\n        });\n      });\n    });\n  }\n\n  async function loadProducts(categorySlug){\n    categorySlug = categorySlug || 'all';\n    currentCategory = categorySlug;\n\n    showSkeleton();\n\n    let url = API_URL + '?per_page=20&_embed';\n    if(categorySlug !== 'all' && CATEGORY_MAP[categorySlug]){\n      url += '&categories=' + CATEGORY_MAP[categorySlug];\n    }\n\n    try {\n      const response = await fetch(url);\n      if(!response.ok) throw new Error('Network error');\n      const posts = await response.json();\n      \/\/ Small delay so skeleton is visible briefly for smooth UX\n      setTimeout(() => renderProducts(posts), 400);\n    } catch(err){\n      setTimeout(() => showError(), 400);\n    }\n  }\n  \/\/ Expose globally for retry button\n  window.loadProducts = loadProducts;\n  window.currentCategory = currentCategory;\n\n  \/\/ \u2500\u2500 Filter buttons \u2500\u2500\n  document.querySelectorAll('.nv-filter-btn').forEach(btn => {\n    btn.addEventListener('click', () => {\n      const activeBtn = document.querySelector('.nv-filter-btn.active');\n      if(activeBtn) activeBtn.classList.remove('active');\n      btn.classList.add('active');\n      const slug = btn.dataset.category;\n      loadProducts(slug);\n    });\n  });\n\n  \/\/ \u2500\u2500 Initial load \u2500\u2500\n  loadProducts();\n\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\n  \/\/   COUNTER ANIMATION\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\n  const counters = document.querySelectorAll('.nv-stat-number');\n  const counterObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if(entry.isIntersecting){\n        const el = entry.target;\n        if(el.dataset.counted) return;\n        el.dataset.counted = 'true';\n\n        const target = parseFloat(el.dataset.target);\n        const suffix = el.dataset.suffix || '';\n        const decimal = parseInt(el.dataset.decimal) || 0;\n        const duration = 2000;\n        const start = performance.now();\n\n        function update(now){\n          const elapsed = now - start;\n          const progress = Math.min(elapsed \/ duration, 1);\n          \/\/ easeOutExpo\n          const ease = 1 - Math.pow(2, -10 * progress);\n          const current = target * ease;\n\n          if(decimal > 0){\n            el.textContent = current.toFixed(decimal) + suffix;\n          } else {\n            el.textContent = Math.floor(current) + suffix;\n          }\n\n          if(progress < 1) requestAnimationFrame(update);\n          else {\n            if(decimal > 0) el.textContent = target.toFixed(decimal) + suffix;\n            else el.textContent = target + suffix;\n          }\n        }\n        requestAnimationFrame(update);\n      }\n    });\n  }, { threshold:0.4 });\n\n  counters.forEach(c => counterObserver.observe(c));\n\n  \/\/ ============================================\n  \/\/ GSAP SCROLLTRIGGER REGISTRATION FOR PRODUCTS PAGE\n  \/\/ ============================================\n  if (typeof gsap !== 'undefined') {\n    try {\n      \/\/ Hero element parallax on scroll\n      const heroTitleBlock = document.querySelector('.nv-hero-title');\n      if (heroTitleBlock) {\n        gsap.to(heroTitleBlock, {\n          y: 120,\n          scrollTrigger: { trigger: '.nv-hero', start: 'top top', end: 'bottom top', scrub: 0.5 }\n        });\n      }\n      const heroSub = document.querySelector('.nv-hero-sub');\n      if (heroSub) {\n        gsap.to(heroSub, {\n          y: 90,\n          scrollTrigger: { trigger: '.nv-hero', start: 'top top', end: 'bottom top', scrub: 0.5 }\n        });\n      }\n\n      \/\/ Glow orbs parallax on scroll\n      document.querySelectorAll('.nv-glow-orb').forEach((orb, i) => {\n        gsap.to(orb, {\n          y: (i % 2 === 0 ? 80 : -80),\n          ease: 'none',\n          scrollTrigger: { trigger: orb.parentElement, start: 'top bottom', end: 'bottom top', scrub: 1 }\n        });\n      });\n\n      \/\/ Stats section blocks entrance staggered reveal\n      document.querySelectorAll('.nv-stats-section').forEach((section) => {\n        const blocks = section.querySelectorAll('.nv-stat-block');\n        if (blocks.length > 0) {\n          gsap.from(blocks, {\n            y: 40,\n            opacity: 0,\n            duration: 0.8,\n            stagger: 0.1,\n            ease: 'power2.out',\n            scrollTrigger: {\n              trigger: section,\n              start: 'top 85%',\n              toggleActions: 'play none none none'\n            }\n          });\n        }\n      });\n\n      \/\/ Standard reveals (up, left, right)\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    } catch (e) {\n      console.warn(\"GSAP ScrollTrigger 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-product-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-products-grid').forEach((container) => {\n          const cards = container.querySelectorAll('.nv-product-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  if (typeof gsap !== 'undefined') {\n    initAliveEffects();\n  }\n\n})();\n<\/script>\n\n<\/div>\n\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-21","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\/21","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=21"}],"version-history":[{"count":5,"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":77,"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/pages\/21\/revisions\/77"}],"wp:attachment":[{"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}