Clearpage Digital | Premium Web Design & Development Studio<\/title>\n <meta name=\"title\" content=\"Clearpage Digital | Premium Web Design & Development Studio\">\n <meta name=\"description\" content=\"Clearpage is a premium web development and creative design studio which based in Kuching. We engineer immersive digital experiences, 3D websites, SaaS interfaces, and custom web applications.\">\n <meta name=\"keywords\" content=\"web design, web development company, creative studio, front-end development, Three.js, 3D websites, SaaS UI\/UX, Malaysia web design, custom web applications , Website devolper , Kuching Website devolper , Sarawak Website devolper , Kuching Website design , Kuching Website , Sarawak Website , Malaysia Website\">\n <meta name=\"author\" content=\"Clearpage Digital\">\n <link rel=\"canonical\" href=\"https:\/\/clearpage.digital\/\">\n\n \n <meta property=\"og:type\" content=\"website\">\n <meta property=\"og:url\" content=\"https:\/\/clearpage.digital\/\">\n <meta property=\"og:title\" content=\"Clearpage Digital | Premium Web Design & Development Studio\">\n <meta property=\"og:description\" content=\"We engineer immersive digital experiences, 3D websites, SaaS interfaces, and custom web applications.\">\n <meta property=\"og:image\" content=\"https:\/\/clearpage.digital\/og-image.jpg\">\n\n \n <meta property=\"twitter:card\" content=\"summary_large_image\">\n <meta property=\"twitter:url\" content=\"https:\/\/clearpage.digital\/\">\n <meta property=\"twitter:title\" content=\"Clearpage Digital | Premium Web Design & Development Studio\">\n <meta property=\"twitter:description\" content=\"We engineer immersive digital experiences, 3D websites, SaaS interfaces, and custom web applications.\">\n <meta property=\"twitter:image\" content=\"https:\/\/clearpage.digital\/og-image.jpg\">\n\n \n <script type=\"application\/ld+json\">\n {\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"WebDesignCompany\",\n \"name\": \"Clearpage Digital\",\n \"url\": \"https:\/\/clearpage.digital\",\n \"logo\": \"https:\/\/clearpage.digital\/logo.png\",\n \"image\": \"https:\/\/clearpage.digital\/og-image.jpg\",\n \"description\": \"Established in 2026, Clearpage Digital is a premium engineering studio working on digital products and web applications. Specializing in WebGL, immersive design, and custom web development.\",\n \"address\": {\n \"@type\": \"PostalAddress\",\n \"addressCountry\": \"MY\" \n },\n \"contactPoint\": {\n \"@type\": \"ContactPoint\",\n \"email\": \"hello.clearpage@gmail.com\",\n \"contactType\": \"customer service\"\n },\n \"sameAs\": [\n \"https:\/\/www.facebook.com\/clearpage\",\n \"https:\/\/www.instagram.com\/clearpage\"\n ],\n \"offers\": {\n \"@type\": \"Service\",\n \"serviceType\": [\"Web Design\", \"Web Development\", \"UI\/UX Design\", \"3D Web Development\"]\n }\n }\n <\/script>\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@300;400;500&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\n <script type=\"module\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/model-viewer\/3.4.0\/model-viewer.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\n\n <style>\n \/* SEO helper class *\/\n .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }\n\n * { \n box-sizing: border-box; \n margin: 0; \n padding: 0; \n }\n\n body, html { \n width: 100%; \n background-color: #050505; \n color: #f4f4f4;\n font-family: 'Inter', sans-serif;\n scroll-behavior: smooth;\n overflow-x: hidden;\n -webkit-text-size-adjust: 100%;\n }\n\n :root {\n --text-main: #f4f4f4; \n --text-muted: #555555;\n --accent: #ffffff;\n --font-sans: 'Inter', sans-serif;\n --font-display: 'Plus Jakarta Sans', sans-serif;\n --font-tech: 'JetBrains Mono', monospace;\n --ease: cubic-bezier(0.16, 1, 0.3, 1);\n --ease-out: cubic-bezier(0.25, 1, 0.5, 1);\n }\n\n a, button, .pl-item, .hud-badge, .tech-modal-close, .slide { cursor: pointer; }\n\n #bg-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; }\n\n .global-toast {\n position: fixed; top: 40px; left: 50%; transform: translate(-50%, -20px);\n background: #ffffff; color: #000000; font-family: var(--font-tech);\n font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em;\n padding: 14px 28px; border-radius: 100px; opacity: 0; pointer-events: none;\n transition: all 0.5s var(--ease); box-shadow: 0 15px 40px rgba(0,0,0,0.6);\n z-index: 1000000; text-align: center; white-space: nowrap;\n }\n .global-toast.show { opacity: 1; transform: translate(-50%, 0); }\n\n #preloader {\n position: fixed; inset: 0; background-color: #f4f4f4; z-index: 99999;\n display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;\n }\n .pl-content { display: flex; flex-direction: column; align-items: center; justify-content: center; }\n .pl-title-wrapper { position: relative; font-family: var(--font-display); font-size: clamp(40px, 8vw, 120px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }\n .pl-title-bg { color: rgba(0, 0, 0, 0.15); margin: 0; font-weight: 700; }\n \n \/* PRELOADER FIX 1: clip-path coordinates uniformly set to percentages and webkit prefixed *\/\n .pl-title-fill { \n position: absolute; \n top: 0; left: 0; \n color: #050505; \n margin: 0; \n font-weight: 700; \n -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);\n clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); \n }\n\n .pl-subtext { font-family: var(--font-tech); font-size: 9px; text-transform: uppercase; letter-spacing: 0.15em; text-align: center; line-height: 1.8; color: #555; opacity: 0; margin-top: 30px; transform: translateY(10px); }\n .pl-counter-num { margin-top: 50px; font-family: var(--font-tech); font-size: 12px; color: #050505; font-weight: 500; }\n\n body.loading nav, body.loading .hero-section-header, body.loading .project-list,\n body.loading .col-right, body.loading .active-info, body.loading .global-marquee, body.loading .audio-toggle { opacity: 0 !important; }\n\n nav { \n position: fixed; top: 0; left: 0; width: 100%; z-index: 90; \n display: flex; justify-content: space-between; align-items: center; \n padding: 30px 70px; text-transform: uppercase; letter-spacing: 0.15em; \n font-size: 10px; font-weight: 500; background: rgba(5, 5, 5, 0.6); \n backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);\n border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s ease;\n }\n nav * { pointer-events: auto; }\n\n nav.menu-open { z-index: 100 !important; }\n\n .nav-logo { font-family: var(--font-display); color: var(--text-main); text-decoration: none; transition: opacity 0.4s var(--ease); letter-spacing: -0.02em; font-size: 15px; font-weight: 600; text-transform: none; }\n .nav-logo:hover { opacity: 0.6; }\n .nav-links { display: flex; gap: 40px; align-items: center; font-family: var(--font-display); font-size: 10px; }\n .nav-link { color: var(--text-main); text-decoration: none; display: flex; align-items: center; transition: color 0.4s var(--ease), opacity 0.4s var(--ease); opacity: 0.6; }\n .nav-link:hover { color: var(--text-main); opacity: 1; }\n .nav-cta { border: 1px solid rgba(255, 255, 255, 0.2); padding: 10px 24px; border-radius: 100px; opacity: 1; transition: all 0.3s ease; }\n .nav-cta:hover { background: #fff; color: #000; box-shadow: 0 0 20px rgba(255,255,255,0.2); }\n\n .hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; z-index: 110; padding: 0; -webkit-tap-highlight-color: transparent; }\n .hamburger span { display: block; width: 22px; height: 1.5px; background: #fff; border-radius: 1px; transition: transform 0.4s var(--ease), opacity 0.3s ease; transform-origin: center; }\n .hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }\n .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }\n .hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }\n\n .mobile-nav { position: fixed; inset: 0; z-index: 95; background: rgba(5, 5, 5, 0.97); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease); }\n .mobile-nav.open { opacity: 1; pointer-events: auto; }\n .mobile-nav-link { font-family: var(--font-display); font-size: 32px; font-weight: 600; color: #fff; text-decoration: none; padding: 18px 0; letter-spacing: -0.02em; opacity: 0; transform: translateY(25px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); -webkit-tap-highlight-color: transparent; }\n .mobile-nav.open .mobile-nav-link { opacity: 0.7; transform: translateY(0); }\n .mobile-nav.open .mobile-nav-link:nth-child(1) { transition-delay: 0.06s; }\n .mobile-nav.open .mobile-nav-link:nth-child(2) { transition-delay: 0.12s; }\n .mobile-nav.open .mobile-nav-link:nth-child(3) { transition-delay: 0.18s; }\n .mobile-nav.open .mobile-nav-link:nth-child(4) { transition-delay: 0.24s; }\n .mobile-nav-link:active { opacity: 1; }\n .mobile-nav-footer { position: absolute; bottom: 70px; display: flex; gap: 35px; }\n .mobile-nav-footer a { font-family: var(--font-tech); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.35); text-decoration: none; }\n\n .page-scroll-wrapper { position: relative; width: 100%; z-index: 10; overflow-x: hidden; }\n\n .global-marquee { position: fixed; bottom: 0; left: 0; width: 100%; height: 26px; background: #050505; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; overflow: hidden; z-index: 90; }\n .marquee-content { display: flex; white-space: nowrap; animation: scrollMarquee 45s linear infinite; font-family: var(--font-tech); letter-spacing: 0.25em; color: rgba(255,255,255,0.2); text-transform: uppercase; font-size: 8px; }\n .marquee-content span { padding: 0 50px; display: inline-block; }\n @keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }\n\n .audio-toggle { position: fixed; bottom: 45px; right: 70px; z-index: 95; background: rgba(5, 5, 5, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); font-family: var(--font-tech); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; padding: 12px 24px; border-radius: 100px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all 0.4s var(--ease); cursor: pointer; -webkit-tap-highlight-color: transparent; }\n .audio-toggle:hover { background: #fff; color: #000; border-color: #fff; }\n\n #hero-section { position: sticky; top: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 10; cursor: crosshair; }\n .hero-content { display: flex; width: 100%; max-width: 1900px; padding: 0 70px; align-items: center; gap: 6%; transform-origin: center center; will-change: transform, opacity; }\n .col-left { width: 40%; display: flex; flex-direction: column; position: relative; z-index: 60; }\n .hero-section-header { margin-bottom: 20px; }\n .hero-subtitle { font-family: var(--font-tech); color: #777; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 5px; }\n .hero-title { font-family: var(--font-display); font-size: 2vw; font-weight: 500; letter-spacing: -0.02em; color: var(--text-main); }\n .project-list { list-style: none; display: flex; flex-direction: column; margin-bottom: 5vh; gap: 8px; }\n .pl-item { display: flex; align-items: center; gap: 20px; padding: 6px 0; color: var(--text-muted); transition: color 0.6s var(--ease), transform 0.6s var(--ease); -webkit-tap-highlight-color: transparent; }\n .pl-item:hover { transform: translateX(8px); color: #888; }\n .pl-item.active { color: var(--text-main); transform: translateX(12px); }\n .pl-year { width: 40px; opacity: 0.3; font-family: var(--font-tech); transition: opacity 0.6s; font-size: 10px; font-weight: 300; }\n .pl-item.active .pl-year { opacity: 0.6; color: var(--text-main); }\n .pl-title { font-family: var(--font-display); line-height: 1; transition: color 0.6s var(--ease), font-size 0.6s var(--ease), font-weight 0.6s var(--ease); letter-spacing: -0.02em; font-size: 1.8vw; font-weight: 400; }\n .pl-item.active .pl-title { font-size: 2.5vw; font-weight: 600; letter-spacing: -0.03em; }\n .pl-role { opacity: 0; transform: translateX(-15px); letter-spacing: 0.15em; text-transform: uppercase; transition: all 0.6s var(--ease); font-family: var(--font-tech); color: #777; font-size: 9px; }\n .pl-item.active .pl-role { opacity: 1; transform: translateX(0); }\n\n .active-info { display: flex; flex-direction: column; gap: 25px; max-width: 95%; opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }\n .active-info.visible { opacity: 1; transform: translateY(0); }\n .info-table { display: flex; flex-direction: column; width: 100%; }\n .info-row { display: flex; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }\n .info-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }\n .info-label { width: 30%; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-main); letter-spacing: -0.01em; }\n .info-content { width: 70%; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); font-size: 14px; color: #ffffff; line-height: 1.5; font-weight: 300; }\n .info-content span { display: block; }\n .action-row { display: flex; align-items: center; gap: 35px; margin-top: 5px; }\n .visit-btn { text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-main); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 4px; transition: all 0.4s var(--ease); font-family: var(--font-display); font-size: 10px; font-weight: 600; opacity: 0.7; }\n .visit-btn:hover { border-color: rgba(255,255,255,0.8); opacity: 1; }\n\n .liquid-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; text-transform: uppercase; letter-spacing: 0.15em; color: #fff; text-decoration: none; overflow: hidden; font-family: var(--font-display); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.4); border-radius: 100px; transition: all 0.6s var(--ease); font-size: 9px; font-weight: 600; }\n .liquid-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); transform: skewX(-20deg); animation: shine 5s infinite var(--ease); }\n @keyframes shine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }\n .liquid-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); box-shadow: 0 15px 30px rgba(0,0,0,0.5); }\n\n .col-right { width: 60%; position: relative; z-index: 15; display: flex; justify-content: flex-end; align-items: center; }\n .media-wrapper { position: relative; width: 76%; aspect-ratio: 1.45 \/ 1; overflow: hidden; border-radius: 4px; z-index: 30; box-shadow: 0 25px 80px rgba(0,0,0,0.9); border: 1px solid rgba(255,255,255,0.05); transform: translateZ(0); }\n .media-inner { width: 100%; height: 100%; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: transform 1.2s var(--ease), opacity 1s ease; }\n .media-inner.active { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; z-index: 2; }\n .media-inner.leave-up { transform: translateY(-100%) scale(0.95); opacity: 0; }\n .media-inner.leave-down { transform: translateY(100%) scale(0.95); opacity: 0; }\n .media-inner.enter-up { transform: translateY(100%); opacity: 0; }\n .media-inner.enter-down { transform: translateY(-100%); opacity: 0; }\n .media-inner video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(15%) contrast(1.1) brightness(0.95); }\n\n .video-hud-overlay { position: absolute; inset: 0; z-index: 40; pointer-events: none; background: rgba(5, 5, 5, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.6s var(--ease); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 8%; }\n .video-hud-overlay.locked { opacity: 1; pointer-events: auto; }\n .hud-cluster { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 90%; transform: translateY(25px); transition: transform 0.8s var(--ease); }\n .video-hud-overlay.locked .hud-cluster { transform: translateY(0); }\n .hud-badge { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid rgba(255,255,255,0.08); background: rgba(15,15,15,0.6); padding: 12px 20px; border-radius: 4px; opacity: 0; transform: scale(0.95); transition: all 0.5s var(--ease); box-shadow: 0 10px 30px rgba(0,0,0,0.5); margin-top: 10px; -webkit-tap-highlight-color: transparent; }\n .video-hud-overlay.locked .hud-badge { opacity: 1; transform: scale(1); }\n .hud-badge:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); transform: translateY(-4px) !important; box-shadow: 0 15px 40px rgba(0,0,0,0.8); }\n .hud-label { font-family: var(--font-tech); letter-spacing: 0.15em; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 6px; pointer-events: none; font-size: 8px; }\n .hud-value { font-family: var(--font-display); color: #fff; text-transform: uppercase; letter-spacing: 0.05em; pointer-events: none; font-size: 13px; font-weight: 500; }\n .hud-close-btn { margin-top: 35px; padding: 12px 28px; border: 1px solid rgba(255,255,255,0.15); background: transparent; border-radius: 100px; color: rgba(255,255,255,0.7); font-family: var(--font-tech); letter-spacing: 0.15em; text-transform: uppercase; transition: all 0.4s var(--ease); opacity: 0; transform: translateY(15px); font-size: 9px; }\n .video-hud-overlay.locked .hud-close-btn { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }\n .hud-close-btn:hover { background: #fff; color: #000; }\n\n .hero-footer { position: absolute; bottom: 45px; left: 70px; right: 70px; z-index: 50; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; transition: opacity 0.5s; }\n .foot-left, .foot-right { pointer-events: auto; }\n .scroll-hint { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.2em; font-family: var(--font-tech); transition: opacity 0.4s; font-size: 8px; }\n .scroll-hint span { display: inline-block; width: 1px; height: 20px; background: rgba(255,255,255,0.5); animation: scrollAnim 2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }\n @keyframes scrollAnim { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }\n .foot-right { display: flex; gap: 30px; text-transform: uppercase; font-size: 10px; }\n .foot-right a { color: rgba(255,255,255,0.5); text-decoration: none; letter-spacing: 0.15em; transition: color 0.4s var(--ease); font-family: var(--font-display); font-weight: 500; }\n .foot-right a:hover { color: var(--text-main); }\n\n .connection-bridge { position: relative; width: 100%; height: 12vh; z-index: 15; }\n .data-pipeline { position: absolute; left: 50%; top: -2vh; bottom: -5vh; width: 1px; background: rgba(255, 255, 255, 0.1); transform: translateX(-50%); z-index: 20; }\n .data-packet { position: absolute; left: 50%; top: 0%; width: 3px; height: 35px; background: #ffffff; box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0.8); transform: translateX(-50%); border-radius: 10px; will-change: top; }\n .bridge-flare { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80vw; height: 40vh; background: radial-gradient(circle, rgba(255, 255, 255, 0.02) 0%, transparent 60%); pointer-events: none; z-index: 10; }\n\n #livechat-showcase { position: relative; z-index: 20; width: 100%; min-height: 100vh; padding: 0 70px 100px; display: flex; align-items: center; justify-content: space-between; background: transparent; }\n .cover-gradient { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, transparent 0%, rgba(5,5,5,0.9) 15%, rgba(5,5,5,1) 100%); z-index: -1; pointer-events: none; }\n .lc-specs { width: 30%; z-index: 30; display: flex; flex-direction: column; gap: 30px; opacity: 0; transform: translateX(-40px); transition: all 1s var(--ease-out); }\n .lc-specs.revealed { opacity: 1; transform: translateX(0); }\n .lc-header { display: flex; flex-direction: column; gap: 10px; }\n .lc-subtitle { font-family: var(--font-tech); color: #777; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 5px; }\n .lc-title { font-family: var(--font-display); font-size: 2.5vw; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }\n .lc-data-box { background: rgba(15, 15, 15, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; padding: 30px; backdrop-filter: blur(10px); position: relative; overflow: hidden; }\n .lc-data-box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 15px 15px; z-index: -1; opacity: 0.5; pointer-events: none; }\n .lc-desc { font-size: 14px; color: #aaa; line-height: 1.6; font-weight: 300; margin-bottom: 25px; }\n .system-status { display: flex; gap: 8px; align-items: flex-end; margin-top: 20px; height: 15px; }\n .sys-bar { width: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; animation: sysPulse 1s infinite alternate ease-in-out; }\n @keyframes sysPulse { 0% { height: 30%; } 100% { height: 100%; } }\n\n .hologram-container { width: 60%; height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; perspective: 1200px; z-index: 20; opacity: 0; transform: scale(0.9); transition: all 1.5s var(--ease-out); transform: translateZ(0); }\n .hologram-container.revealed { opacity: 1; transform: scale(1); }\n .ui-glass-panel { position: absolute; top: 15%; width: 70%; aspect-ratio: 16\/10; background: rgba(10, 10, 15, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 40px rgba(0, 255, 255, 0.05); backdrop-filter: blur(15px); overflow: hidden; z-index: 22; transform-style: preserve-3d; transition: transform 0.1s ease-out; }\n .ui-glass-panel::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); transform: translateY(-100%); animation: scan 4s linear infinite; pointer-events: none; z-index: 30; }\n @keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }\n\n .slider-wrapper { width: 100%; height: 100%; position: relative; z-index: 10; }\n .slider-track { display: flex; width: 300%; height: 100%; transition: transform 0.6s var(--ease-out); }\n .slide { width: 33.3333%; height: 100%; position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }\n .slide img, .slide video { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: brightness(0.8); transition: filter 0.3s; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }\n .slide:hover img, .slide:hover video { filter: brightness(1.1); }\n .slide-overlay { display: none !important; }\n .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20; transition: all 0.3s; backdrop-filter: blur(5px); font-family: var(--font-tech); -webkit-tap-highlight-color: transparent; }\n .slider-btn:hover { background: #fff; color: #000; }\n .slider-prev { left: 15px; } .slider-next { right: 15px; }\n .slider-dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 20; }\n .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: all 0.3s; cursor: pointer; }\n .dot.active { background: #fff; transform: scale(1.3); }\n\n .light-beam { position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%); width: 55%; height: 50%; background: linear-gradient(to top, rgba(200,255,255,0.15), transparent); clip-path: polygon(25% 100%, 75% 100%, 100% 0, 0 0); pointer-events: none; z-index: 20; }\n .light-beam::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; background: linear-gradient(to top, rgba(200,255,255,0.05) 1px, transparent 1px); background-size: 100% 10px; opacity: 0.5; animation: beamScan 2s linear infinite; }\n @keyframes beamScan { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } }\n .holo-floor { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%) rotateX(75deg); width: 400px; height: 400px; background: radial-gradient(circle, rgba(0,255,255,0.08) 0%, transparent 60%); border: 1px dashed rgba(255,255,255,0.1); border-radius: 50%; z-index: 18; pointer-events: none; }\n .holo-floor::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; border: 1px solid rgba(0,255,255,0.2); border-radius: 50%; box-shadow: 0 0 20px rgba(0,255,255,0.1); }\n #canvas-3d-projector { position: absolute; bottom: 0%; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; z-index: 21; pointer-events: none; }\n #loading-text { position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%); font-family: var(--font-tech); font-size: 12px; color: #00ff88; letter-spacing: 0.2em; z-index: 19; animation: pulse 1s infinite alternate; }\n @keyframes pulse { 0% { opacity: 0.5; } 100% { opacity: 1; } }\n\n #scroll-reveal-section { position: relative; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: flex-start; padding: 0 10%; z-index: 20; background: transparent; }\n .reveal-text-container { width: 50vw; font-family: var(--font-display); font-size: clamp(20px, 2.5vw, 40px); font-weight: 500; line-height: 1.4; text-align: left; letter-spacing: -0.01em; color: #ffffff; }\n .scroll-word { display: inline-block; margin-right: 0.22em; opacity: 0; }\n\n #agency-container { position: relative; width: 100%; height: 100vh; background-color: transparent; color: #ffffff; overflow: hidden; z-index: 20; }\n .fixed-bg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }\n .bg-kanji { position: absolute; font-family: var(--font-display); font-size: 25vw; font-weight: 900; color: rgba(255, 255, 255, 0.03); white-space: nowrap; }\n .kanji-1 { top: 5%; left: 30%; } .kanji-2 { top: 40%; right: -10%; } .kanji-3 { top: 75%; left: 10%; }\n .main-title { position: absolute; top: 5%; left: 4%; font-family: var(--font-display); font-size: 9vw; font-weight: 700; line-height: 0.85; letter-spacing: -0.05em; margin: 0; }\n .center-text { position: absolute; top: 30%; left: 20%; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; display: flex; gap: 50px; }\n .bottom-left-text { position: absolute; bottom: 8%; left: 4%; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: #888; }\n .bottom-right-title { position: absolute; bottom: 5%; right: 4%; font-family: var(--font-display); font-size: 11vw; font-weight: 700; line-height: 0.8; letter-spacing: -0.05em; text-align: right; margin: 0; }\n .white-bold { color: #fff; font-weight: 600; }\n .gray-text { color: #888; }\n .cards-conveyor { position: absolute; top: 100vh; left: 0; width: 100%; height: 100%; z-index: 10; will-change: transform; transform: translateZ(0); }\n .team-card { position: absolute; width: 300px; border: 1px solid rgba(255, 255, 255, 0.2); background-color: transparent; display: flex; flex-direction: column; will-change: transform; transform: translateZ(0); }\n .group-card { width: 550px; }\n .voxel-3d-model { width: 100%; height: 380px; background-color: transparent; outline: none; transform: translateZ(0); }\n .card-pos-1 { top: 10vh; right: 12%; } .card-pos-2 { top: 40vh; left: 18%; } .card-pos-3 { top: 70vh; right: 12%; } .card-pos-4 { top: 130vh; left: 50%; transform: translateX(-50%); }\n .member-info { background-color: #ffffff; color: #000000; display: flex; justify-content: space-between; align-items: stretch; width: 100%; padding: 15px; box-sizing: border-box; font-family: var(--font-sans); }\n .member-left { display: flex; flex-direction: column; justify-content: space-between; height: 45px; }\n .member-name { color: #000000; font-size: 1.1rem; font-weight: 700; margin: 0; font-family: var(--font-display); }\n .member-country { color: #555; font-size: 10px; font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.1em; }\n .member-right { color: #555; font-family: var(--font-sans); font-size: 12px; text-align: right; line-height: 1.4; }\n\n .tech-modal-wrapper { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.6s var(--ease); }\n .tech-modal-wrapper.show { opacity: 1; pointer-events: auto; }\n .tech-modal-bg { position: absolute; inset: 0; background: rgba(3, 3, 3, 0.92); backdrop-filter: blur(15px); }\n .tech-modal-content { position: relative; z-index: 10; width: 45vw; max-width: 800px; background: #000; border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; box-shadow: 0 40px 100px rgba(0,0,0,1); transform: scale(0.98) translateY(20px); transition: transform 0.8s var(--ease); overflow: hidden; display: flex; flex-direction: column; }\n .tech-modal-wrapper.show .tech-modal-content { transform: scale(1) translateY(0); }\n .tm-media-box { width: 100%; aspect-ratio: 16\/9; background: #000; position: relative; overflow: hidden; }\n .tm-media-box video, .tm-media-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }\n .tm-text-box { width: 100%; padding: 20px 25px; background: rgba(10,10,10,0.9); border-top: 1px solid rgba(255,255,255,0.05); min-height: 100px; }\n .tm-typewriter { font-family: var(--font-tech); font-size: 11px; color: #00ff88; line-height: 1.6; letter-spacing: 0.05em; }\n .tm-typewriter::after { content: '|'; animation: blink 1s infinite; }\n @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }\n .tech-modal-close { position: absolute; top: 15px; right: 15px; z-index: 20; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; color: #fff; font-family: var(--font-tech); padding: 8px 16px; letter-spacing: 0.15em; text-transform: uppercase; backdrop-filter: blur(8px); transition: all 0.4s var(--ease); font-size: 9px; -webkit-tap-highlight-color: transparent; }\n .tech-modal-close:hover { background: #fff; color: #000; }\n\n #contact-section { position: relative; width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 20; background: #050505; padding: 80px 20px; }\n #contact-section::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255,255,255,0.02) 4px, rgba(255,255,255,0.02) 5px); pointer-events: none; z-index: 1; }\n .form-wrapper { position: relative; width: 100%; max-width: 500px; z-index: 10; }\n .contact-form-box { background: #ffffff; color: #000000; padding: 60px 50px; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,0.8); position: relative; transition: all 0.6s var(--ease); }\n .contact-form-box.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); }\n .form-step { display: none; flex-direction: column; opacity: 0; transform: translateY(10px); animation: stepFade 0.6s var(--ease) forwards; }\n .form-step.active { display: flex; }\n @keyframes stepFade { to { opacity: 1; transform: translateY(0); } }\n .step-header { display: flex; align-items: center; gap: 15px; margin-bottom: 30px; }\n .form-badge { background: #000; color: #fff; font-family: var(--font-tech); font-size: 10px; padding: 6px 12px; border-radius: 100px; letter-spacing: 0.1em; }\n .btn-back { background: none; border: none; font-family: var(--font-sans); font-size: 12px; color: #555; cursor: pointer; transition: color 0.3s; padding: 0; }\n .btn-back:hover { color: #000; }\n .form-title { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 40px; }\n .input-group { margin-bottom: 25px; position: relative; }\n .input-group input, .input-group textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid #ddd; padding: 12px 0; font-family: var(--font-sans); font-size: 16px; color: #000; outline: none; transition: border-color 0.4s var(--ease); resize: none; }\n .input-group input::placeholder, .input-group textarea::placeholder { color: #aaa; font-weight: 300; }\n .input-group input:focus, .input-group textarea:focus { border-bottom-color: #000; }\n .budget-group { margin-bottom: 35px; }\n .budget-label { font-family: var(--font-sans); font-size: 14px; font-weight: 500; margin-bottom: 15px; display: block; color: #000; }\n .budget-options { display: flex; gap: 10px; flex-wrap: wrap; }\n .budget-pill { border: 1px solid #ddd; background: transparent; padding: 10px 18px; border-radius: 100px; font-family: var(--font-sans); font-size: 13px; color: #555; cursor: pointer; transition: all 0.3s var(--ease); }\n .budget-pill.active { background: #000; color: #fff; border-color: #000; }\n .form-footer { margin-top: 20px; display: flex; justify-content: flex-start; }\n .form-action-btn { background: none; border: none; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: #000; cursor: pointer; padding: 0; position: relative; }\n .form-action-btn::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: #000; transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }\n .form-action-btn:hover::after { transform: scaleX(1); }\n .form-success-toast { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); background: #fff; color: #000; font-family: var(--font-sans); font-size: 14px; font-weight: 500; padding: 20px 30px; border-radius: 4px; opacity: 0; pointer-events: none; transition: all 0.6s var(--ease); box-shadow: 0 20px 50px rgba(0,0,0,0.5); text-align: center; white-space: nowrap; }\n .form-success-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }\n\n #site-footer { position: relative; width: 100%; background: #0c0c0c; padding: 100px 70px 60px; display: flex; flex-direction: column; z-index: 20; border-top: 1px solid rgba(255, 255, 255, 0.05); }\n .footer-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }\n .footer-col { display: flex; flex-direction: column; }\n .footer-label { font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: #777; margin-bottom: 20px; }\n .footer-primary-link { color: #ffffff; text-decoration: none; font-family: var(--font-sans); font-size: 15px; font-weight: 500; display: inline-block; width: fit-content; }\n .footer-nav-split { display: flex; gap: 40px; }\n .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }\n .footer-links.mt-auto { margin-top: 40px; }\n .footer-links a { color: #ffffff; text-decoration: none; font-family: var(--font-sans); font-size: 14px; font-weight: 400; display: inline-block; width: fit-content; }\n .footer-links a.muted-link { color: #777; }\n .footer-desc { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: #f4f4f4; font-weight: 400; max-width: 320px; }\n .hover-wave { position: relative; display: inline-block; text-decoration: none; }\n .hover-wave::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 6px; background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='6' viewBox='0 0 20 6'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.5' d='M0,3 Q5,6 10,3 T20,3'\/%3E%3C\/svg%3E\") repeat-x; background-size: 20px 6px; opacity: 0; transform: translateY(2px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); animation: wave-move 0.8s linear infinite; animation-play-state: paused; }\n .hover-wave.muted-link::after { background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='6' viewBox='0 0 20 6'%3E%3Cpath fill='none' stroke='%23777777' stroke-width='1.5' d='M0,3 Q5,6 10,3 T20,3'\/%3E%3C\/svg%3E\") repeat-x; background-size: 20px 6px; }\n .hover-wave:hover::after { opacity: 1; transform: translateY(0); animation-play-state: running; }\n @keyframes wave-move { to { background-position: -20px 0; } }\n .footer-bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 80px; }\n .footer-huge-group { display: flex; align-items: flex-end; gap: 20px; }\n .huge-text { font-family: var(--font-display); font-size: 13vw; font-weight: 600; line-height: 0.8; letter-spacing: -0.04em; color: #f4f4f4; margin-left: -0.5vw; pointer-events: none; }\n .footer-image-block { width: 14vw; height: 10vw; background: radial-gradient(circle at center, #1a1a1a 0%, #050505 100%); overflow: hidden; margin-bottom: 0.5vw; border: 1px solid rgba(255,255,255,0.05); border-radius: 4px; position: relative; cursor: crosshair; }\n .footer-image-block canvas { width: 100% !important; height: 100% !important; outline: none; }\n .footer-legal { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding-bottom: 1vw; }\n .legal-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }\n .legal-links a { color: #ffffff; text-decoration: none; font-family: var(--font-sans); font-size: 13px; font-weight: 400; display: inline-block; width: fit-content; }\n .copyright { font-family: var(--font-tech); font-size: 10px; color: #fff; letter-spacing: 0.05em; }\n\n @media (max-width: 1024px) {\n body, html { cursor: default; -webkit-overflow-scrolling: touch; width: 100vw !important; max-width: 100vw !important; overflow-x: hidden !important; }\n #bg-canvas { display: none !important; }\n nav { padding: 16px 20px; align-items: center; }\n .nav-links { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; }\n .hamburger { display: flex !important; z-index: 110; }\n #hero-section { position: relative !important; display: block !important; height: auto !important; min-height: 100dvh !important; cursor: default; }\n .hero-content { display: flex !important; flex-direction: column !important; padding: 100px 20px 40px !important; gap: 0 !important; align-items: stretch !important; transform: none !important; opacity: 1 !important; height: auto !important; overflow: hidden !important; }\n .col-left { display: contents !important; }\n .hero-section-header { order: 1 !important; margin-bottom: 20px !important; width: 100% !important; }\n .hero-title { font-size: 28px !important; line-height: 1.2 !important; }\n .hero-subtitle { font-size: 10px; margin-bottom: 8px !important; }\n .col-right { order: 2 !important; width: 100% !important; margin-bottom: 25px !important; justify-content: center !important; display: flex !important; flex: none !important; }\n .media-wrapper { width: 100% !important; aspect-ratio: 16\/10 !important; border-radius: 8px; transform: translateZ(0); }\n .project-list { order: 3 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; width: calc(100% + 40px) !important; margin-left: -20px !important; padding: 0 20px 15px 20px !important; gap: 12px !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; touch-action: pan-x pan-y !important; }\n .project-list::-webkit-scrollbar { display: none !important; }\n .pl-item { flex: 0 0 auto !important; padding: 14px 22px !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 100px !important; white-space: nowrap !important; }\n .pl-year { font-size: 10px !important; width: auto !important; margin-right: 6px; }\n .pl-title { font-size: 14px !important; font-weight: 500 !important; }\n .pl-role { display: none !important; }\n .active-info { order: 4 !important; gap: 16px !important; max-width: 100% !important; width: 100% !important; height: auto !important; }\n .info-row { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding: 16px 0 !important; width: 100% !important; }\n .info-label { width: 100% !important; font-size: 12px !important; color: #888 !important; margin-bottom: 4px !important; }\n .info-content { width: 100% !important; font-size: 14px !important; line-height: 1.5 !important; word-wrap: break-word !important; white-space: normal !important; }\n .info-content span { display: block; margin-bottom: 4px; }\n .action-row { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 15px !important; flex-wrap: nowrap !important; margin-top: 15px !important; width: 100% !important; }\n .liquid-btn { padding: 14px 24px !important; font-size: 10px !important; flex-shrink: 0 !important; }\n .visit-btn { font-size: 10px !important; white-space: nowrap !important; flex-shrink: 0 !important; }\n .video-hud-overlay { padding: 15px !important; justify-content: center !important; }\n .hud-cluster { gap: 6px !important; max-width: 100% !important; }\n .hud-badge { padding: 8px 12px !important; margin-top: 4px !important; }\n .hud-label { font-size: 7px !important; margin-bottom: 2px !important; }\n .hud-value { font-size: 10px !important; }\n .hud-close-btn { margin-top: 15px !important; padding: 8px 24px !important; font-size: 8px !important; }\n .tech-modal-content { width: 92vw !important; max-height: 85vh !important; display: flex !important; flex-direction: column !important; border-radius: 8px !important; }\n .tm-media-box { display: block !important; width: 100% !important; aspect-ratio: 16\/9 !important; min-height: 250px !important; height: auto !important; flex-shrink: 0 !important; position: relative !important; overflow: hidden !important; background: #050505 !important; }\n .tm-media-box video, .tm-media-box img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; }\n .tm-text-box { padding: 16px !important; flex-grow: 1 !important; overflow-y: auto !important; min-height: auto !important; }\n .tech-modal-close { top: 10px !important; right: 10px !important; background: rgba(0,0,0,0.8) !important; padding: 8px 16px !important; }\n .hero-footer { position: relative !important; padding: 20px !important; flex-direction: column !important; gap: 16px !important; align-items: flex-start !important; opacity: 1 !important; }\n #livechat-showcase { flex-direction: column !important; padding: 80px 20px 40px !important; gap: 40px !important; height: auto !important; }\n .lc-specs { width: 100% !important; opacity: 1 !important; transform: none !important; }\n .lc-title { font-size: 28px !important; }\n .lc-data-box { padding: 24px; }\n .lc-data-box .info-row { flex-direction: column !important; gap: 8px !important; }\n .lc-data-box .info-label { width: 100% !important; }\n .hologram-container { width: 100% !important; height: auto !important; perspective: none !important; transform: none !important; opacity: 1 !important; display: flex !important; flex-direction: column !important; gap: 30px !important; padding-bottom: 50px !important; transform: translateZ(0); }\n .ui-glass-panel { position: relative !important; top: auto !important; width: 100% !important; aspect-ratio: 16\/10; border-radius: 8px; }\n .light-beam, .holo-floor { display: none !important; }\n #canvas-3d-projector { display: none !important; }\n #loading-text { display: none !important; }\n #scroll-reveal-section { padding: 0 20px !important; }\n .reveal-text-container { width: 100% !important; font-size: 26px !important; }\n .main-title { font-size: 13vw !important; top: 10% !important; left: 20px !important; opacity: 0.5 !important; }\n .bottom-right-title { font-size: 11vw !important; right: 20px !important; bottom: 8% !important; opacity: 0.5 !important; }\n .center-text { top: 25% !important; left: 20px !important; right: 20px !important; flex-direction: column !important; gap: 16px !important; font-size: 14px !important; opacity: 0.4 !important; }\n .bottom-left-text { bottom: 20% !important; left: 20px !important; opacity: 0.4 !important; font-size: 13px !important; }\n .team-card { width: 80vw !important; max-width: 320px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; }\n .group-card { width: 88vw !important; max-width: 340px !important; }\n .voxel-3d-model { height: 320px !important; width: 100% !important; }\n .card-pos-1 { top: 15vh !important; } .card-pos-2 { top: 95vh !important; } .card-pos-3 { top: 175vh !important; } .card-pos-4 { top: 255vh !important; }\n .cards-conveyor { height: auto !important; }\n #site-footer { padding: 60px 20px; }\n .footer-top { grid-template-columns: 1fr; gap: 60px; }\n .footer-bottom { flex-direction: column; align-items: flex-start; gap: 40px; margin-top: 60px; }\n .footer-huge-group { flex-direction: column; align-items: flex-start; width: 100%; }\n .huge-text { font-size: 18vw; margin-left: 0; }\n .footer-image-block { display: none !important; }\n .footer-legal { padding-bottom: 0; gap: 30px; }\n .global-marquee { height: 26px; }\n .audio-toggle { bottom: 40px !important; right: 20px !important; padding: 10px 18px !important; font-size: 8px !important; }\n }\n @media (max-width: 400px) {\n .hero-title, .lc-title { font-size: 24px !important; }\n .hero-content { padding: 90px 16px 24px !important; }\n .voxel-3d-model { height: 280px !important; }\n .action-row { gap: 10px !important; }\n .liquid-btn { padding: 12px 18px !important; font-size: 9px !important; }\n .visit-btn { font-size: 9px !important; }\n }\n <\/style>\n<\/head>\n\n<body class=\"loading\">\n\n \n <audio id=\"bg-audio\" loop preload=\"none\">\n <source src=\"https:\/\/clearpage.my\/wp-content\/uploads\/2026\/04\/Black-Rain-Tobias-Voigt-Futuristic-Music.mp3\" type=\"audio\/mpeg\">\n <\/audio>\n <button class=\"audio-toggle\" id=\"audio-toggle\">[ SOUND: OFF ]<\/button>\n\n <div class=\"global-toast\" id=\"global-toast\">Message goes here<\/div>\n <div id=\"preloader\">\n <div class=\"pl-content\">\n <div class=\"pl-title-wrapper\">\n <div class=\"pl-title-bg\">clearpage.digital<\/div>\n <div class=\"pl-title-fill\" id=\"pl-title-fill\">clearpage.digital<\/div>\n <\/div>\n <div class=\"pl-subtext\" id=\"pl-subtext\">Websites for brands and creatives who<br>value architecture and perception.<\/div>\n <div class=\"pl-counter-num\" id=\"pl-counter-num\">00<\/div>\n <\/div>\n <\/div>\n <canvas id=\"bg-canvas\"><\/canvas>\n <nav>\n <a href=\"#hero-section\" class=\"nav-logo\">Clearpage.Digital<\/a>\n <div class=\"nav-links\">\n <a href=\"#hero-section\" class=\"nav-link\">Work<\/a>\n <a href=\"#livechat-showcase\" class=\"nav-link\">Products<\/a>\n <a href=\"#agency-container\" class=\"nav-link\">Team<\/a>\n <a href=\"#contact-section\" class=\"nav-link nav-cta\">Let's Talk<\/a>\n <\/div>\n <button class=\"hamburger\" id=\"hamburger\" aria-label=\"Menu\"><span><\/span><span><\/span><span><\/span><\/button>\n <\/nav>\n <div class=\"mobile-nav\" id=\"mobile-nav\">\n <a href=\"#hero-section\" class=\"mobile-nav-link\">Work<\/a>\n <a href=\"#livechat-showcase\" class=\"mobile-nav-link\">Products<\/a>\n <a href=\"#agency-container\" class=\"mobile-nav-link\">Team<\/a>\n <a href=\"#contact-section\" class=\"mobile-nav-link\">Let's Talk<\/a>\n <div class=\"mobile-nav-footer\"><a href=\"#\">Facebook<\/a><a href=\"#\">Instagram<\/a><\/div>\n <\/div>\n <div class=\"page-scroll-wrapper\">\n <section id=\"hero-section\">\n <div class=\"hero-content\" id=\"hero-content\">\n <div class=\"col-left\">\n <div class=\"hero-section-header\">\n <div class=\"hero-subtitle\">Selected Works \/\/<\/div>\n <h1 class=\"hero-title\">\n Engineering Digital Experiences\n <span class=\"sr-only\"> - Premium Web Design & Custom Web Development Studio<\/span>\n <\/h1>\n <\/div>\n <ul class=\"project-list\" id=\"project-list\"><\/ul>\n \n \n <noscript>\n <h2>Our Web Development Portfolio<\/h2>\n <ul>\n <li>\n <h3>Borneo Mazu<\/h3>\n <p>UI\/UX & Web Dev. A dynamic cultural festival website built to showcase the Borneo Mazu celebration through modern design and immersive community storytelling.<\/p>\n <p>Technologies: Custom CMS, Web Design, Interactive AI.<\/p>\n <\/li>\n <li>\n <h3>Smartmys<\/h3>\n <p>Creative E-Commerce website selling gadgets with WordPress Development.<\/p>\n <\/li>\n <li>\n <h3>Perfect Match Furniture<\/h3>\n <p>Branding & Web Development. A furniture brand website showcasing modern home pieces through clean layouts, refined visuals, and a functional, user-friendly experience.<\/p>\n <\/li>\n <\/ul>\n <\/noscript>\n\n <div class=\"active-info\" id=\"active-info\">\n <div class=\"info-table\" id=\"info-table\"><\/div>\n <div class=\"action-row\">\n <button class=\"liquid-btn\" id=\"explore-btn\">Explore Tech<\/button>\n <a href=\"#\" class=\"visit-btn\" id=\"visit-btn\">Visit Live Site<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"col-right\">\n <div class=\"media-wrapper\">\n <div id=\"media-container\"><\/div>\n <div class=\"video-hud-overlay\" id=\"hud-overlay\">\n <div class=\"hud-cluster\" id=\"hud-cluster\"><\/div>\n <button class=\"hud-close-btn\" id=\"hud-close\">Close Data [X]<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"hero-footer\" id=\"hero-footer\">\n <div class=\"foot-left\"><div class=\"scroll-hint\"><span><\/span> Scroll to View Architecture<\/div><\/div>\n <div class=\"foot-right\"><a href=\"#\">LinkedIn<\/a><a href=\"#\">Instagram<\/a><\/div>\n <\/div>\n <\/section>\n <div class=\"connection-bridge\"><div class=\"bridge-flare\"><\/div><div class=\"data-pipeline\" id=\"data-pipeline\"><div class=\"data-packet\" id=\"data-packet\"><\/div><\/div><\/div>\n <section id=\"livechat-showcase\">\n <div class=\"cover-gradient\"><\/div>\n <div class=\"lc-specs observe-me\">\n <div class=\"lc-header\">\n <div class=\"lc-subtitle\">App Deployment \/\/ Livechat<\/div>\n <h2 class=\"lc-title\">Clearchat<\/h2>\n <\/div>\n <div class=\"lc-data-box\">\n <p class=\"lc-desc\">A real-time customer engagement platform engineered for instant latency. Features automated AI handoffs, end-to-end encryption, and a seamless floating UI integration.<\/p>\n <div class=\"info-table\">\n <div class=\"info-row\"><div class=\"info-label\">Stack<\/div><div class=\"info-content\">React, Node.js, Socket.io<\/div><\/div>\n <div class=\"info-row\"><div class=\"info-label\">Industry<\/div><div class=\"info-content\">SaaS \/ Customer Support<\/div><\/div>\n <div class=\"info-row\"><div class=\"info-label\">Status<\/div><div class=\"info-content\" style=\"color:#00ff88;\">Online & Deployed<\/div><\/div>\n <\/div>\n <div class=\"system-status\">\n <div class=\"sys-bar\" style=\"animation-delay:0.1s\"><\/div><div class=\"sys-bar\" style=\"animation-delay:0.4s\"><\/div><div class=\"sys-bar\" style=\"animation-delay:0.2s\"><\/div><div class=\"sys-bar\" style=\"animation-delay:0.7s\"><\/div><div class=\"sys-bar\" style=\"animation-delay:0.3s\"><\/div><div class=\"sys-bar\" style=\"animation-delay:0.6s\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"hologram-container observe-me\" id=\"hologram-container\">\n <div class=\"ui-glass-panel\" id=\"ui-panel\">\n <div class=\"slider-wrapper\">\n <div class=\"slider-btn slider-prev\" id=\"slide-prev\"><<\/div>\n <div class=\"slider-btn slider-next\" id=\"slide-next\">><\/div>\n <div class=\"slider-dots\" id=\"slider-dots\"><div class=\"dot active\" data-idx=\"0\"><\/div><div class=\"dot\" data-idx=\"1\"><\/div><div class=\"dot\" data-idx=\"2\"><\/div><\/div>\n <div class=\"slider-track\" id=\"slider-track\">\n <div class=\"slide\" data-type=\"video\" data-src=\"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-15-021843.mp4\" data-text=\"[SYS_LOG] Integrating AI Neural Engine... Real-time response matrix activated.\"><video src=\"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-15-021843.mp4\" loop muted playsinline autoplay><\/video><div class=\"slide-overlay\"><span>Tap to Inspect<\/span><\/div><\/div>\n <div class=\"slide\" data-type=\"video\" data-src=\"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-15-021932.mp4\" data-text=\"[SYS_LOG] WebSocket handshake successful. End-to-end latency < 15ms.\"><video src=\"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-15-021932.mp4\" loop muted playsinline autoplay><\/video><div class=\"slide-overlay\"><span>Tap to Inspect<\/span><\/div><\/div>\n <div class=\"slide\" data-type=\"video\" data-src=\"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-15-021932.mp4\" data-text=\"[SYS_LOG] WebSocket handshake successful. End-to-end latency < 15ms.\"><video src=\"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-15-021932.mp4\" loop muted playsinline autoplay><\/video><div class=\"slide-overlay\"><span>Tap to Inspect<\/span><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"light-beam\"><\/div>\n <div class=\"holo-floor\"><\/div>\n <div id=\"loading-text\">INITIALIZING 3D HARDWARE...<\/div>\n <div id=\"canvas-3d-projector\"><\/div>\n <\/div>\n <\/section>\n <section id=\"scroll-reveal-section\"><div id=\"reveal-text-container\" class=\"reveal-text-container\"><\/div><\/section>\n <div id=\"agency-container\" class=\"voxel-agency-container\">\n <div class=\"fixed-bg-layer\">\n <div class=\"bg-kanji kanji-1\">\u5b9e\u4f53\u5316<\/div><div class=\"bg-kanji kanji-2\">\u6c89\u6d78<\/div><div class=\"bg-kanji kanji-3\">\u8bbe\u8ba1\u5373\u601d\u8003<\/div>\n <h2 class=\"main-title\">Team made<br>visible<\/h2>\n <div class=\"center-text\"><div class=\"white-bold\">Small team. Clear Intent.<\/div><div class=\"gray-text\">An open view into<br>a small design team.<br><br>Structure, rhythm, and<br>emotion - expressed<br>through clarity and control.<\/div><\/div>\n <div class=\"bottom-left-text\"><span class=\"white-bold\">Observe<\/span> how<br>ideas take form.<br><br><span class=\"white-bold\">Touch<\/span> the structure<br>behind the visuals.<br><br>See how thinking<br><span class=\"white-bold\">becomes<\/span> interface.<\/div>\n <h2 class=\"bottom-right-title\">Thinking shaped<br>into design<\/h2>\n <\/div>\n <div class=\"cards-conveyor\">\n <div class=\"team-card card-pos-1\"><model-viewer src=\"https:\/\/\/clearpage.my\/wp-content\/uploads\/3d-models\/nich.glb\" alt=\"Nicholas\" loading=\"lazy\" auto-rotate rotation-per-second=\"30deg\" camera-controls disable-zoom class=\"voxel-3d-model\"><\/model-viewer><div class=\"member-info\"><div class=\"member-left\"><div class=\"member-name\">Nicholas<\/div><div class=\"member-country\">Malaysia<\/div><\/div><div class=\"member-right\">Founder,<br>Creative Designer<\/div><\/div><\/div>\n <div class=\"team-card card-pos-2\"><model-viewer src=\"https:\/\/\/clearpage.my\/wp-content\/uploads\/3d-models\/darren.glb\" alt=\"Darren\" loading=\"lazy\" auto-rotate rotation-per-second=\"30deg\" camera-controls disable-zoom class=\"voxel-3d-model\"><\/model-viewer><div class=\"member-info\"><div class=\"member-left\"><div class=\"member-name\">Dragonfruitnino<\/div><div class=\"member-country\">Malaysia<\/div><\/div><div class=\"member-right\">Webflow Expert,<br>Creative Designer<\/div><\/div><\/div>\n <div class=\"team-card card-pos-3\"><model-viewer src=\"https:\/\/\/clearpage.my\/wp-content\/uploads\/3d-models\/eric.glb\" alt=\"Eric\" loading=\"lazy\" auto-rotate rotation-per-second=\"30deg\" camera-controls disable-zoom class=\"voxel-3d-model\"><\/model-viewer><div class=\"member-info\"><div class=\"member-left\"><div class=\"member-name\">Doggos<\/div><div class=\"member-country\">Malaysia<\/div><\/div><div class=\"member-right\">Webflow Expert,<br>Frontend Developer<\/div><\/div><\/div>\n <div class=\"team-card group-card card-pos-4\"><model-viewer src=\"https:\/\/\/clearpage.my\/wp-content\/uploads\/3d-models\/groups.glb?v=2\" alt=\"The Team\" loading=\"lazy\" auto-rotate rotation-per-second=\"30deg\" camera-controls disable-zoom class=\"voxel-3d-model\"><\/model-viewer><div class=\"member-info\"><div class=\"member-left\"><div class=\"member-name\">The Core Team<\/div><div class=\"member-country\">Malaysia<\/div><\/div><div class=\"member-right\">Clearpage Digital<br>Engineering Digital Experiences<\/div><\/div><\/div>\n <\/div>\n <\/div>\n <section id=\"contact-section\">\n <div class=\"form-wrapper\">\n <div class=\"contact-form-box\" id=\"fs-form-box\">\n <div class=\"form-step active\" id=\"fs-step-1\">\n <div class=\"step-header\"><span class=\"form-badge\">1\/2 Steps<\/span><\/div>\n <h2 class=\"form-title\">Let's start a<br>conversation<\/h2>\n <div class=\"input-group\"><input type=\"text\" id=\"fs-name\" placeholder=\"Your Name\" required><\/div>\n <div class=\"input-group\"><input type=\"email\" id=\"fs-email\" placeholder=\"Email\" required><\/div>\n <div class=\"input-group\"><input type=\"text\" id=\"fs-company\" placeholder=\"Company Name (Optional)\"><\/div>\n <div class=\"form-footer\"><button class=\"form-action-btn\" id=\"fs-to-step-2\">Next step<\/button><\/div>\n <\/div>\n <div class=\"form-step\" id=\"fs-step-2\">\n <div class=\"step-header\"><button class=\"btn-back\" id=\"fs-to-step-1\">Back<\/button><span class=\"form-badge\">2\/2 Steps<\/span><\/div>\n <h2 class=\"form-title\">A few details to<br>get started<\/h2>\n <div class=\"budget-group\">\n <label class=\"budget-label\">Estimated budget<\/label>\n <div class=\"budget-options\">\n <button class=\"budget-pill active\" data-val=\"$5-$10k\">$5k - $10k<\/button>\n <button class=\"budget-pill\" data-val=\"$10-$30k\">$10k - $30k<\/button>\n <button class=\"budget-pill\" data-val=\"$30k+\">$30k+<\/button>\n <\/div>\n <\/div>\n <div class=\"input-group\"><textarea id=\"fs-details\" placeholder=\"Tell us about your project...\" rows=\"4\" required><\/textarea><\/div>\n <div class=\"form-footer\"><button class=\"form-action-btn\" id=\"fs-submit\">Send request<\/button><\/div>\n <\/div>\n <\/div>\n <div class=\"form-success-toast\" id=\"fs-success-toast\">Thank you! Your submission has been received.<\/div>\n <\/div>\n <\/section>\n <footer id=\"site-footer\">\n <div class=\"footer-top\">\n <div class=\"footer-col\">\n <div class=\"footer-label\">Contact<\/div>\n <a href=\"mailto:hello.clearpage@gmail.com\" class=\"footer-primary-link hover-wave\">hello.clearpage@gmail.com<\/a>\n <ul class=\"footer-links mt-auto\"><li><a href=\"#\" aria-label=\"Follow us on Instagram\" class=\"hover-wave\">Instagram<\/a><\/li><li><a href=\"#\" aria-label=\"Follow us on RedNote\" class=\"hover-wave\">RedNote<\/a><\/li><li><a href=\"#\" aria-label=\"Follow us on Facebook\" class=\"hover-wave\">Facebook<\/a><\/li><\/ul>\n <\/div>\n <div class=\"footer-col footer-nav-col\">\n <div class=\"footer-label\">Navigation<\/div>\n <div class=\"footer-nav-split\">\n <ul class=\"footer-links\"><li><a href=\"#hero-section\" class=\"hover-wave smooth-scroll\">Services<\/a><\/li><li><a href=\"#livechat-showcase\" class=\"hover-wave smooth-scroll\">Works<\/a><\/li><li><a href=\"#agency-container\" class=\"hover-wave smooth-scroll\">Team<\/a><\/li><\/ul>\n <ul class=\"footer-links\"><li><a href=\"#\" class=\"hover-wave muted-link\">Blog (Coming Soon)<\/a><\/li><li><a href=\"#contact-section\" class=\"hover-wave smooth-scroll\">Creative Space<\/a><\/li><\/ul>\n <\/div>\n <\/div>\n <div class=\"footer-col\">\n <div class=\"footer-label\">Studio Note<\/div>\n <p class=\"footer-desc\">This space brings together work we've done and work we're currently doing, along with conversations that continue beyond individual projects. If it feels right, this can be the starting point.<\/p>\n <\/div>\n <\/div>\n <div class=\"footer-bottom\">\n <div class=\"footer-huge-group\"><div class=\"huge-text\">Clearpage_<\/div><div class=\"footer-image-block\" id=\"footer-creative-box\"><\/div><\/div>\n <div class=\"footer-legal\"><div class=\"copyright\">@2026 CLEARPAGE. All rights reserved.<\/div><\/div>\n <\/div>\n <\/footer>\n <\/div>\n <div class=\"global-marquee\"><div class=\"marquee-content\"><span>Clearpage Digital \/\/ Engineering Digital Experiences<\/span><span>Creative Front-End Development<\/span><span>Immersive Web Design<\/span><span>Clearpage Digital \/\/ Engineering Digital Experiences<\/span><\/div><\/div>\n <div id=\"tech-modal\" class=\"tech-modal-wrapper\">\n <div class=\"tech-modal-bg\" id=\"tech-modal-bg\"><\/div>\n <div class=\"tech-modal-content\">\n <button id=\"tech-modal-close\" class=\"tech-modal-close\">CLOSE [X]<\/button>\n <div class=\"tm-media-box\" id=\"tm-media-box\"><\/div>\n <div class=\"tm-text-box\"><div class=\"tm-typewriter\" id=\"tm-typewriter\"><\/div><\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Audio Toggle Logic\n const bgAudio = document.getElementById('bg-audio');\n const audioToggle = document.getElementById('audio-toggle');\n let isPlaying = false;\n\n audioToggle.addEventListener('click', () => {\n if (isPlaying) {\n bgAudio.pause();\n audioToggle.innerText = '[ SOUND: OFF ]';\n } else {\n bgAudio.play().catch(e => console.log(\"Audio play failed:\", e));\n audioToggle.innerText = '[ SOUND: ON ]';\n }\n isPlaying = !isPlaying;\n });\n\n let toastTimer;\n function showGlobalToast(msg) {\n const t = document.getElementById('global-toast');\n if(!t) return;\n t.innerText = msg;\n t.classList.add('show');\n clearTimeout(toastTimer);\n toastTimer = setTimeout(() => t.classList.remove('show'), 3500);\n }\n\n const mobileQuery = window.matchMedia('(max-width: 1024px)');\n const isMobile = () => mobileQuery.matches;\n\n function setupLazyModelViewers() {\n if (!isMobile()) return;\n const modelViewers = document.querySelectorAll('model-viewer');\n modelViewers.forEach(mv => {\n const originalSrc = mv.getAttribute('src');\n mv.setAttribute('data-lazy-src', originalSrc);\n mv.removeAttribute('src');\n mv.style.background = 'radial-gradient(circle, #1a1a1a 0%, #0a0a0a 100%)';\n });\n const mvObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n const mv = entry.target;\n if (entry.isIntersecting && mv.getAttribute('data-lazy-src')) {\n mv.setAttribute('src', mv.getAttribute('data-lazy-src'));\n mv.removeAttribute('data-lazy-src');\n mv.style.background = '';\n }\n });\n }, { rootMargin: '200px 0px' });\n modelViewers.forEach(mv => mvObserver.observe(mv));\n }\n\n function pauseOffscreenVideos(activeIndex) {\n if (!isMobile()) return;\n document.querySelectorAll('#media-container video').forEach((v, i) => {\n if (i === activeIndex) { v.play().catch(() => {}); } else { v.pause(); }\n });\n }\n\n \/\/ PRELOADER FIX APPLIED HERE\n document.addEventListener(\"DOMContentLoaded\", () => {\n \/\/ FIX 1: Prevent browser scroll memory from breaking the reveal\n window.scrollTo(0, 0); \n document.body.style.overflow = 'hidden';\n setupLazyModelViewers();\n \n let plCounter = { val: 0 };\n const counterEl = document.getElementById(\"pl-counter-num\");\n \n const tlPreloader = gsap.timeline({\n onComplete: () => {\n \/\/ FIX 2: Pre-hide elements and disable CSS transitions to prevent GSAP fighting & FOUC\n gsap.set(\n ['nav', '.hero-section-header', '.project-list', '.col-right', '.active-info', '.global-marquee', '.audio-toggle'], \n { opacity: 0, transition: 'none' }\n );\n \n \/\/ Now it's safe to remove the loading class (No flashing)\n document.body.classList.remove('loading');\n \n const tlOut = gsap.timeline({\n onComplete: () => { \n document.getElementById(\"preloader\").style.display = \"none\"; \n document.body.style.overflow = \"\"; \n \/\/ FIX 3: Restore CSS transitions so hover effects and active-info switching work again\n gsap.set(['nav', '.active-info', '.audio-toggle'], { clearProps: \"transition\" });\n }\n });\n \n tlOut.to(\"#preloader\", { yPercent: -100, duration: 1.2, ease: \"power4.inOut\" })\n .fromTo('nav', { y: -50, opacity: 0 }, { y: 0, opacity: 1, duration: 1, ease: \"power3.out\" }, \"-=0.8\")\n .fromTo('.hero-section-header', { y: 30, opacity: 0 }, { opacity: 1, y: 0, duration: 1, ease: \"power3.out\" }, \"-=0.8\")\n .fromTo('.project-list', { y: 30, opacity: 0 }, { opacity: 1, y: 0, duration: 1, ease: \"power3.out\" }, \"-=0.7\")\n .fromTo('.col-right', { y: 40, opacity: 0, scale: 0.95 }, { opacity: 1, y: 0, scale: 1, duration: 1.2, ease: \"power4.out\" }, \"-=0.8\")\n .fromTo('.active-info', { y: 20, opacity: 0 }, { opacity: 1, y: 0, duration: 1, ease: \"power3.out\" }, \"-=0.6\")\n .fromTo('.global-marquee', { y: 30, opacity: 0 }, { opacity: 1, y: 0, duration: 1, ease: \"power3.out\" }, \"-=0.8\")\n .fromTo('.audio-toggle', { y: 30, opacity: 0 }, { opacity: 1, y: 0, duration: 1, ease: \"power3.out\" }, \"-=0.8\");\n }\n });\n\n \/\/ FIX 4: Explicit webkit fallback in GSAP for older iOS devices\n tlPreloader.to(\"#pl-title-fill\", { \n clipPath: \"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)\", \n webkitClipPath: \"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)\",\n duration: 2.5, \n ease: \"power2.inOut\" \n }, 0);\n \n tlPreloader.to(plCounter, { val: 100, duration: 2.5, ease: \"power2.inOut\", onUpdate: () => { counterEl.innerText = Math.floor(plCounter.val).toString().padStart(2, '0'); } }, 0);\n tlPreloader.to(\"#pl-subtext\", { opacity: 1, y: 0, duration: 1, ease: \"power2.out\" }, 0.8);\n });\n\n document.querySelectorAll('a[href^=\"#\"]').forEach(link => {\n link.addEventListener('click', function(e) {\n const targetId = this.getAttribute('href');\n if (targetId === '#') return;\n const targetEl = document.querySelector(targetId);\n if (targetEl) {\n e.preventDefault();\n if(menuOpen) { menuOpen = false; hamburger.classList.remove('open'); mobileNav.classList.remove('open'); document.querySelector('nav').classList.remove('menu-open'); document.body.style.overflow = ''; }\n const offsetTop = targetEl.getBoundingClientRect().top + window.scrollY;\n window.scrollTo({ top: offsetTop, behavior: 'smooth' });\n }\n });\n });\n\n const hamburger = document.getElementById('hamburger');\n const mobileNav = document.getElementById('mobile-nav');\n let menuOpen = false;\n\n \/\/ FIX: Toggle nav.menu-open class so nav z-index (90) jumps to 100,\n \/\/ which is above mobile-nav (95), making the hamburger X button tappable\n hamburger.addEventListener('click', () => {\n menuOpen = !menuOpen;\n hamburger.classList.toggle('open', menuOpen);\n mobileNav.classList.toggle('open', menuOpen);\n document.querySelector('nav').classList.toggle('menu-open', menuOpen);\n document.body.style.overflow = menuOpen ? 'hidden' : '';\n });\n\n const projects = [\n { year: \"2026\", title: \"Borneo Mazu\", role: \"UI\/UX & Web Dev\", desc: \"A dynamic cultural festival website built to showcase the Borneo Mazu celebration through modern design and immersive community storytelling.\", tags: [\"Web Design\", \"UI\/UX Design\", \"Custom CMS\"], industry: [\"Cultural Events\", \"Digital Exhibition\"], videoUrl: \"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Recording-2026-04-15-000101.mp4\", liveLink: \"https:\/\/borneomazu.com\", tech: [ { label: \"Engine\", val: \"Interactive\", modalVideo: \"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Recording-2026-04-15-000236.mp4\" }, { label: \"AI\", val: \"Actual AI\", modalVideo: \"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-15-at-12.53.19-PM.mov\" }, { label: \"Custom Css\", val: \"Map box\", modalVideo: \"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-15-at-1.02.18-PM.mov\" } ] },\n { year: \"2026\", title: \"Smartmys\", role: \"\", desc: \"A creative E-commerce website selling different type of gadgets.\", tags: [\"Web Design\", \"Interactive\", \"Webflow Development\"], industry: [\"Creative E-commerce\", \"Digital Design\"], videoUrl: \"https:\/\/clearpage.my\/wp-content\/uploads\/2026\/06\/Screen-Recording-2026-06-14-at-1.51.08-PM.mov\", liveLink: \"\", tech: [ { label: \"E-commerce\", val: \"Wordpress\", modalVideo: \"https:\/\/d23dyxeqlo5psv.cloudfront.net\/big_buck_bunny.mp4\" }, { label: \"Logic\", val: \"Vue.js\", modalVideo: \"https:\/\/www.w3schools.com\/html\/mov_bbb.mp4\" }, { label: \"Graphics\", val: \"WebGL\", modalVideo: \"https:\/\/d23dyxeqlo5psv.cloudfront.net\/big_buck_bunny.mp4\" }, { label: \"Deploy\", val: \"Vercel\", modalVideo: \"https:\/\/www.w3schools.com\/html\/mov_bbb.mp4\" } ] },\n { year: \"2026\", title: \"Perfect Match Furniture\", role: \"Branding & Web\", desc: \"a furniture brand website showcasing modern home pieces through clean layouts, refined visuals, and a functional, user-friendly experience.\", tags: [\"Web Development\", \"Interactive UI\"], industry: [\"Interactive\", \"3D Model\"], videoUrl: \"https:\/\/clearpage.my\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-16-at-11.00.28-PM.mp4\", liveLink: \"\", tech: [ { label: \"Form\", val: \"Enquires Form\", modalVideo: \"https:\/\/www.w3schools.com\/html\/mov_bbb.mp4\" }, { label: \"Animations\", val: \"GSAP\", modalVideo: \"https:\/\/d23dyxeqlo5psv.cloudfront.net\/big_buck_bunny.mp4\" } ] }\n ];\n\n const listContainer = document.getElementById('project-list');\n const activeInfo = document.getElementById('active-info');\n const infoTable = document.getElementById('info-table');\n const mediaContainer = document.getElementById('media-container');\n const hudCluster = document.getElementById('hud-cluster');\n let activeIdx = 0, isAnimating = false, isHudLocked = false;\n\n function initHero() {\n projects.forEach((proj, i) => {\n const li = document.createElement('li'); li.className = `pl-item ${i === 0 ? 'active' : ''}`; li.dataset.idx = i;\n li.innerHTML = `<span class=\"pl-year\">${proj.year}<\/span><span class=\"pl-title\">${proj.title}<\/span><span class=\"pl-role\">${proj.role}<\/span>`;\n li.addEventListener('click', () => handleSwitch(i)); listContainer.appendChild(li);\n const mediaEl = document.createElement('div'); mediaEl.className = `media-inner ${i === 0 ? 'active' : ''}`; mediaEl.id = `media-${i}`;\n const preload = isMobile() ? (i === 0 ? 'metadata' : 'none') : 'auto';\n mediaEl.innerHTML = `<video src=\"${proj.videoUrl}\" ${i === 0 ? 'autoplay' : ''} loop muted playsinline preload=\"${preload}\" style=\"width:100%; height:100%; object-fit:cover;\"><\/video>`;\n mediaContainer.appendChild(mediaEl);\n });\n setTimeout(() => { const firstVid = document.querySelector('#media-0 video'); if(firstVid) { firstVid.muted = true; firstVid.play().catch(e => console.log(\"Autoplay blocked:\", e)); } pauseOffscreenVideos(0); }, 500);\n populateContent(0); setTimeout(() => { activeInfo.classList.add('visible'); }, 100);\n }\n\n function handleSwitch(idx) {\n if (idx === activeIdx || isAnimating || isHudLocked || isModalOpen) return;\n isAnimating = true; const direction = idx < activeIdx ? 'up' : 'down';\n document.querySelectorAll('.pl-item')[activeIdx].classList.remove('active');\n document.querySelectorAll('.pl-item')[idx].classList.add('active');\n activeInfo.classList.remove('visible');\n const outEl = document.getElementById(`media-${activeIdx}`); const inEl = document.getElementById(`media-${idx}`);\n inEl.style.transition = 'none'; inEl.classList.remove('leave-up','leave-down','active'); inEl.classList.add(direction === 'down' ? 'enter-up' : 'enter-down');\n void inEl.offsetWidth; inEl.style.transition = '';\n outEl.classList.remove('active'); outEl.classList.add(direction === 'down' ? 'leave-up' : 'leave-down');\n inEl.classList.remove('enter-up','enter-down'); inEl.classList.add('active');\n const inVid = inEl.querySelector('video');\n if (inVid) { inVid.preload = 'metadata'; inVid.currentTime = 0; inVid.muted = true; inVid.play().catch(e => console.log(\"Play failed:\", e)); }\n activeIdx = idx; pauseOffscreenVideos(idx);\n if (isMobile()) { const pill = document.querySelectorAll('.pl-item')[idx]; const container = document.querySelector('.project-list'); if (pill && container) { const scrollLeftPos = pill.offsetLeft - (container.offsetWidth \/ 2) + (pill.offsetWidth \/ 2); container.scrollTo({ left: scrollLeftPos, behavior: 'smooth' }); } }\n setTimeout(() => { populateContent(idx); activeInfo.classList.add('visible'); setTimeout(() => { isAnimating = false; }, 400); }, 300);\n }\n\n function populateContent(idx) {\n const p = projects[idx];\n infoTable.innerHTML = `<div class=\"info-row\"><div class=\"info-label\">Overview<\/div><div class=\"info-content\">${p.desc}<\/div><\/div><div class=\"info-row\"><div class=\"info-label\">Tags<\/div><div class=\"info-content\">${p.tags.map(t=>`<span>${t}<\/span>`).join('')}<\/div><\/div><div class=\"info-row\"><div class=\"info-label\">Industry<\/div><div class=\"info-content\">${p.industry.map(i=>`<span>${i}<\/span>`).join('')}<\/div><\/div>`;\n hudCluster.innerHTML = p.tech.map((t,i)=>`<div class=\"hud-badge\" data-vid=\"${t.modalVideo}\" style=\"transition-delay:${i*0.1}s\"><div class=\"hud-label\">${t.label}<\/div><div class=\"hud-value\">${t.val}<\/div><\/div>`).join('');\n document.querySelectorAll('.hud-badge').forEach(b => b.addEventListener('click', e => { e.stopPropagation(); openBasicModal(b.getAttribute('data-vid')); }));\n }\n\n document.getElementById('explore-btn').addEventListener('click', e => {\n e.preventDefault(); const currentProject = projects[activeIdx].title;\n if (currentProject === \"Clearpage HQ\") { showGlobalToast(\"Clearpage HQ tech breakdown is still in development.\"); return; }\n else if (currentProject === \"Perfect Match Furniture\") { showGlobalToast(\"Perfect Match Furniture tech breakdown is still in development.\"); return; }\n isHudLocked = true; document.getElementById('hud-overlay').classList.add('locked');\n if (isMobile()) { const videoBox = document.querySelector('.media-wrapper'); if (videoBox) { videoBox.scrollIntoView({ behavior: 'smooth', block: 'center' }); } }\n });\n document.getElementById('hud-close').addEventListener('click', e => { e.preventDefault(); isHudLocked = false; document.getElementById('hud-overlay').classList.remove('locked'); });\n \n document.getElementById('visit-btn').addEventListener('click', e => {\n e.preventDefault();\n const currentLink = projects[activeIdx].liveLink;\n if (currentLink && currentLink !== \"\") {\n window.open(currentLink, '_blank');\n } else {\n showGlobalToast(\"Due to client privacy policies, direct linking is restricted.\");\n }\n });\n\n const modalWrapper = document.getElementById('tech-modal'); const tmMediaBox = document.getElementById('tm-media-box'); const tmTypewriter = document.getElementById('tm-typewriter');\n let isModalOpen = false, typeInterval;\n function openBasicModal(src) {\n if (!src) return; isModalOpen = true; tmMediaBox.innerHTML = '';\n const v = document.createElement('video'); v.src = src; v.autoplay = true; v.loop = true; v.muted = true; v.playsInline = true;\n v.style.cssText = \"width:100%; height:100%; object-fit:contain; position:absolute; top:0; left:0;\"; tmMediaBox.appendChild(v);\n v.play().catch(e => console.log(\"Modal video play error:\", e));\n modalWrapper.classList.add('show'); tmTypewriter.innerHTML = ''; clearInterval(typeInterval);\n let text = \"System Architecture Log \/\/ Interactive engine rendering successful. Data stream stabilized.\", i = 0;\n typeInterval = setInterval(() => { tmTypewriter.innerHTML += text.charAt(i); i++; if(i >= text.length) clearInterval(typeInterval); }, 30);\n }\n function openFeatureModal(type, src, text) {\n isModalOpen = true; tmMediaBox.innerHTML = '';\n if(type === 'video') { const v = document.createElement('video'); v.src = src; v.autoplay = true; v.loop = true; v.muted = true; v.playsInline = true; v.style.cssText = \"width:100%; height:100%; object-fit:contain; position:absolute; top:0; left:0;\"; tmMediaBox.appendChild(v); v.play().catch(e => console.log(\"Feature video play error:\", e)); }\n else { const img = document.createElement('img'); img.src = src; img.style.cssText = \"width:100%; height:100%; object-fit:contain; position:absolute; top:0; left:0;\"; tmMediaBox.appendChild(img); }\n modalWrapper.classList.add('show'); tmTypewriter.innerHTML = ''; clearInterval(typeInterval);\n let i = 0; typeInterval = setInterval(() => { tmTypewriter.innerHTML += text.charAt(i); i++; if(i >= text.length) clearInterval(typeInterval); }, 40);\n }\n function closeModal() { isModalOpen = false; modalWrapper.classList.remove('show'); setTimeout(() => { tmMediaBox.innerHTML = ''; tmTypewriter.innerHTML = ''; clearInterval(typeInterval); }, 400); }\n document.getElementById('tech-modal-close').addEventListener('click', closeModal);\n document.getElementById('tech-modal-bg').addEventListener('click', closeModal);\n\n const sliderTrack = document.getElementById('slider-track'); const slides = document.querySelectorAll('.slide'); const dots = document.querySelectorAll('.dot');\n let currentSlide = 0, slideInterval;\n function goToSlide(idx) { if (idx >= slides.length) idx = 0; if (idx < 0) idx = slides.length - 1; currentSlide = idx; sliderTrack.style.transform = `translateX(-${currentSlide * (100 \/ slides.length)}%)`; dots.forEach(d => d.classList.remove('active')); dots[currentSlide].classList.add('active'); }\n function startSlider() { slideInterval = setInterval(() => goToSlide(currentSlide + 1), 5000); }\n function stopSlider() { clearInterval(slideInterval); }\n document.getElementById('slide-next').addEventListener('click', () => { goToSlide(currentSlide+1); stopSlider(); startSlider(); });\n document.getElementById('slide-prev').addEventListener('click', () => { goToSlide(currentSlide-1); stopSlider(); startSlider(); });\n dots.forEach(d => d.addEventListener('click', e => { goToSlide(parseInt(e.target.dataset.idx)); stopSlider(); startSlider(); }));\n document.getElementById('ui-panel').addEventListener('mouseenter', stopSlider);\n document.getElementById('ui-panel').addEventListener('mouseleave', startSlider);\n let sliderTouchX = 0; const uiPanel = document.getElementById('ui-panel');\n uiPanel.addEventListener('touchstart', e => { sliderTouchX = e.changedTouches[0].screenX; }, { passive: true });\n uiPanel.addEventListener('touchend', e => { const diff = sliderTouchX - e.changedTouches[0].screenX; if (Math.abs(diff) > 40) { diff > 0 ? goToSlide(currentSlide+1) : goToSlide(currentSlide-1); stopSlider(); startSlider(); } }, { passive: true });\n slides.forEach(s => s.addEventListener('click', () => openFeatureModal(s.dataset.type, s.dataset.src, s.dataset.text)));\n startSlider();\n\n let hudMouseX = -1000, hudMouseY = -1000, threeMouseX = 0, threeMouseY = 0;\n const heroContent = document.getElementById('hero-content'); const heroFooter = document.getElementById('hero-footer'); const dataPacket = document.getElementById('data-packet');\n document.addEventListener('mousemove', e => {\n if (isMobile()) return; hudMouseX = e.clientX; hudMouseY = e.clientY;\n threeMouseX = (e.clientX \/ window.innerWidth) * 2 - 1; threeMouseY = -(e.clientY \/ window.innerHeight) * 2 + 1;\n const panel = document.getElementById('ui-panel');\n if (panel) { panel.style.transform = `rotateX(${(e.clientY\/window.innerHeight-0.5)*-15}deg) rotateY(${(e.clientX\/window.innerWidth-0.5)*15}deg) translateY(-20px)`; }\n });\n let touchStartY = 0;\n window.addEventListener('touchstart', e => { if (!isMobile() && window.scrollY <= 10) touchStartY = e.changedTouches[0].screenY; }, { passive: true });\n window.addEventListener('touchmove', e => {\n if (isMobile()) return; if (isAnimating || isHudLocked || isModalOpen || menuOpen) return;\n if (window.scrollY <= 10) { const delta = touchStartY - e.changedTouches[0].screenY;\n if (delta > 50 && activeIdx < projects.length - 1) { e.preventDefault(); handleSwitch(activeIdx+1); touchStartY = e.changedTouches[0].screenY; }\n else if (delta < -50 && activeIdx > 0) { e.preventDefault(); handleSwitch(activeIdx-1); touchStartY = e.changedTouches[0].screenY; }\n }\n }, { passive: false });\n let scrollAcc = 0;\n window.addEventListener('wheel', e => {\n if (isMobile() || isHudLocked || isModalOpen) return;\n if (window.scrollY <= 10) { if (e.deltaY > 0 && activeIdx === projects.length - 1) return; e.preventDefault();\n if (isAnimating) return; scrollAcc += e.deltaY;\n if (scrollAcc > 120) { handleSwitch(activeIdx+1); scrollAcc = 0; } else if (scrollAcc < -120) { if (activeIdx > 0) handleSwitch(activeIdx-1); scrollAcc = 0; }\n } else { scrollAcc = 0; }\n }, { passive: false });\n window.addEventListener('scroll', () => {\n const sy = window.scrollY;\n if (window.innerWidth > 1024) { if (sy < window.innerHeight && heroContent && heroFooter) { const s = 1 - (sy * 0.0003), o = 1 - (sy * 0.002); heroContent.style.transform = `scale(${s})`; heroContent.style.opacity = Math.max(o, 0); heroFooter.style.opacity = Math.max(o, 0); } }\n if (dataPacket) { dataPacket.style.top = `${(sy \/ (document.body.scrollHeight - window.innerHeight)) * 100}%`; }\n });\n\n const cssObserver = new IntersectionObserver((entries, obs) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('revealed'); obs.unobserve(e.target); } }); }, { threshold: 0.1 });\n document.querySelectorAll('.observe-me').forEach(el => cssObserver.observe(el));\n\n function initProjector() {\n if (isMobile()) { const loadingText = document.getElementById('loading-text'); if (loadingText) loadingText.style.display = 'none'; return; }\n const container = document.getElementById('canvas-3d-projector'); if(!container) return;\n const loadingText = document.getElementById('loading-text');\n const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, container.clientWidth\/container.clientHeight, 0.1, 1000);\n camera.position.set(0,2,12); camera.lookAt(0,0,0);\n const renderer = new THREE.WebGLRenderer({ alpha:true, antialias:true }); renderer.setSize(container.clientWidth, container.clientHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5)); container.appendChild(renderer.domElement);\n scene.add(new THREE.AmbientLight(0xffffff, 0.8)); const tl = new THREE.DirectionalLight(0xffffff, 1.5); tl.position.set(0,10,5); scene.add(tl);\n const bl = new THREE.PointLight(0x00ffff, 4, 15); bl.position.set(0,3,0); scene.add(bl);\n const group = new THREE.Group(); scene.add(group);\n new THREE.GLTFLoader().load('https:\/\/\/clearpage.my\/wp-content\/uploads\/3d-models\/projector.glb',\n gltf => { const m = gltf.scene; m.scale.set(6,6,6); m.position.set(0,-2,0); m.rotation.set(Math.PI\/6,-Math.PI\/2,0); group.add(m); if(loadingText) loadingText.style.display='none'; },\n xhr => { if(xhr.lengthComputable && loadingText) { loadingText.innerText=`INITIALIZING 3D HARDWARE... ${Math.round((xhr.loaded\/xhr.total)*100)}%`; } },\n err => { console.error(err); if(loadingText){ loadingText.innerText=\"ERROR LOADING HARDWARE\"; loadingText.style.color=\"red\"; } }\n );\n let isVisible = false; const observer = new IntersectionObserver(e => isVisible = e[0].isIntersecting); observer.observe(container);\n (function animate(){ requestAnimationFrame(animate); if (isVisible) { group.rotation.x += 0.05*(threeMouseY*0.5-group.rotation.x); group.rotation.y += 0.05*(threeMouseX*0.5-group.rotation.y); renderer.render(scene,camera); } })();\n window.addEventListener('resize', () => { camera.aspect = container.clientWidth\/container.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(container.clientWidth,container.clientHeight); });\n }\n initProjector();\n\n const canvas = document.getElementById('bg-canvas');\n if (canvas && !isMobile()) {\n const ctx = canvas.getContext('2d'); let w, h, pX=-1000, pY=-1000, vel=0, rot=0; const spc=60; let nodes=[];\n function rsCanvas(){ w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; nodes = []; for(let i=0; i<=Math.ceil(w\/spc); i++) { for(let j=0; j<=Math.ceil(h\/spc); j++) { nodes.push({x:i*spc,y:j*spc}); } } }\n window.addEventListener('resize', rsCanvas); rsCanvas();\n (function drawHUD(){\n ctx.clearRect(0,0,w,h); vel = Math.sqrt(Math.pow(hudMouseX-pX,2)+Math.pow(hudMouseY-pY,2)); pX = hudMouseX; pY = hudMouseY; vel *= 0.95; rot += 0.01+(vel*0.001);\n ctx.strokeStyle = 'rgba(255,255,255,0.05)'; ctx.lineWidth = 1; ctx.beginPath();\n nodes.forEach(n => { ctx.moveTo(n.x-3, n.y); ctx.lineTo(n.x+3, n.y); ctx.moveTo(n.x, n.y-3); ctx.lineTo(n.x, n.y+3); }); ctx.stroke();\n if(hudMouseX > 0){\n nodes.forEach(n => { let d = Math.sqrt(Math.pow(hudMouseX-n.x,2)+Math.pow(hudMouseY-n.y,2)); if(d < 180){ let a = 1-(d\/180); ctx.beginPath(); ctx.strokeStyle=`rgba(255,255,255,${a*0.2})`; ctx.moveTo(hudMouseX,hudMouseY); ctx.lineTo(n.x,n.y); ctx.stroke(); ctx.fillStyle=`rgba(255,255,255,${a*0.6})`; ctx.fillRect(n.x-2,n.y-2,4,4); } });\n ctx.beginPath(); ctx.strokeStyle = 'rgba(255,255,255,0.06)'; ctx.moveTo(0, hudMouseY); ctx.lineTo(w, hudMouseY); ctx.moveTo(hudMouseX, 0); ctx.lineTo(hudMouseX, h); ctx.stroke();\n let r = Math.min(25+(vel*0.5),60); ctx.save(); ctx.translate(hudMouseX,hudMouseY); ctx.rotate(rot); ctx.beginPath(); ctx.strokeStyle = 'rgba(255,255,255,0.4)';\n ctx.moveTo(-r, -r+10); ctx.lineTo(-r, -r); ctx.lineTo(-r+10, -r); ctx.moveTo(r-10, -r); ctx.lineTo(r, -r); ctx.lineTo(r, -r+10); ctx.moveTo(r, r-10); ctx.lineTo(r, r); ctx.lineTo(r-10, r); ctx.moveTo(-r+10, r); ctx.lineTo(-r, r); ctx.lineTo(-r, r-10); ctx.stroke();\n ctx.beginPath(); ctx.strokeStyle = 'rgba(255,255,255,0.15)'; ctx.setLineDash([4,6]); ctx.arc(0,0,r-8,0,Math.PI*2); ctx.stroke(); ctx.restore();\n ctx.font = \"10px 'JetBrains Mono',monospace\"; ctx.fillStyle = \"rgba(255,255,255,0.5)\"; ctx.textAlign = \"left\"; let dX = hudMouseX+35, dY = hudMouseY+35;\n ctx.beginPath(); ctx.strokeStyle = \"rgba(255,255,255,0.2)\"; ctx.setLineDash([]); ctx.moveTo(hudMouseX+10, hudMouseY+10); ctx.lineTo(dX-5, dY-5); ctx.lineTo(dX-5, dY+25); ctx.stroke();\n ctx.fillText(`X: ${hudMouseX.toFixed(1)}`, dX, dY); ctx.fillText(`Y: ${hudMouseY.toFixed(1)}`, dX, dY+12); ctx.fillText(`V: ${vel.toFixed(2)}px\/s`, dX, dY+24);\n }\n requestAnimationFrame(drawHUD);\n })();\n }\n\n document.addEventListener(\"DOMContentLoaded\", () => {\n setTimeout(() => {\n gsap.registerPlugin(ScrollTrigger); const mobile = isMobile();\n const text = \"Established in 2026, Clearpage Digital is a premium engineering studio working on digital products and web applications. Our approach is built around deep architecture, fluid systems, and immersive design decisions. We focus on creating interfaces and experiences that are highly performant, functional, and visually striking. Every system is shaped through thoughtful logic and precise technical execution, resulting in digital work that feels alive and considered.\";\n const tc = document.getElementById('reveal-text-container');\n if(tc) { tc.innerHTML = text.split(' ').map(w => `<span class=\"scroll-word\">${w}<\/span>`).join(' ');\n gsap.to('.scroll-word', { opacity: 1, stagger: 0.1, scrollTrigger: { trigger: '#scroll-reveal-section', start: mobile ? 'top 35%' : 'top 20%', end: mobile ? '+=150%' : '+=200%', pin: true, scrub: 0.5 } }); }\n const ac = document.getElementById(\"agency-container\");\n if(ac) { gsap.timeline({ scrollTrigger: { trigger: \"#agency-container\", start: \"top top\", end: mobile ? \"+=3500\" : \"+=2600\", pin: true, scrub: 1 } }).to(\".cards-conveyor\", { y: mobile ? \"-300vh\" : \"-240vh\", ease: \"none\" }); }\n ScrollTrigger.refresh();\n }, 500);\n });\n\n const step1 = document.getElementById('fs-step-1'); const step2 = document.getElementById('fs-step-2');\n const toStep2Btn = document.getElementById('fs-to-step-2'); const toStep1Btn = document.getElementById('fs-to-step-1');\n const submitBtn = document.getElementById('fs-submit'); const nameInput = document.getElementById('fs-name');\n const emailInput = document.getElementById('fs-email'); const formBox = document.getElementById('fs-form-box');\n const successToast = document.getElementById('fs-success-toast');\n const budgetPills = document.querySelectorAll('.budget-pill'); let selectedBudget = \"$5k - $10k\";\n\n toStep2Btn.addEventListener('click', () => {\n if (!nameInput.value || !emailInput.value) { nameInput.style.borderBottomColor = \"red\"; emailInput.style.borderBottomColor = \"red\";\n setTimeout(() => { nameInput.style.borderBottomColor = \"\"; emailInput.style.borderBottomColor = \"\"; }, 1500); return; }\n step1.classList.remove('active'); setTimeout(() => { step2.classList.add('active'); }, 50);\n });\n toStep1Btn.addEventListener('click', () => { step2.classList.remove('active'); setTimeout(() => { step1.classList.add('active'); }, 50); });\n budgetPills.forEach(pill => { pill.addEventListener('click', () => { budgetPills.forEach(p => p.classList.remove('active')); pill.classList.add('active'); selectedBudget = pill.getAttribute('data-val'); }); });\n\n \/\/ FIX: WhatsApp submission \u2014 formats all fields and opens wa.me deep link\n submitBtn.addEventListener('click', () => {\n const details = document.getElementById('fs-details').value;\n if (!details) {\n document.getElementById('fs-details').style.borderBottomColor = \"red\";\n setTimeout(() => { document.getElementById('fs-details').style.borderBottomColor = \"\"; }, 1500);\n return;\n }\n submitBtn.innerText = \"Sending...\";\n setTimeout(() => {\n const name = document.getElementById('fs-name').value;\n const email = document.getElementById('fs-email').value;\n const company = document.getElementById('fs-company').value || 'Not provided';\n const budget = selectedBudget;\n const projectDetails = details;\n\n const message = `--- New Enquiry from Clearpage.Digital ---\\nName: ${name}\\nEmail: ${email}\\nCompany: ${company}\\nBudget: ${budget}\\nProject Details: ${projectDetails}`;\n\n const waUrl = 'https:\/\/wa.me\/60106638820?text=' + encodeURIComponent(message);\n window.open(waUrl, '_blank');\n\n formBox.classList.add('hidden');\n successToast.classList.add('show');\n }, 800);\n });\n\n function initFooterCreative() {\n if (isMobile()) return;\n const container = document.getElementById('footer-creative-box'); if (!container) return;\n const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(50, container.clientWidth \/ container.clientHeight, 0.1, 100); camera.position.z = 3.5;\n const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setSize(container.clientWidth, container.clientHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); container.appendChild(renderer.domElement);\n const geo = new THREE.TorusKnotGeometry(1, 0.35, 120, 16); const mat = new THREE.MeshBasicMaterial({ color: 0x888888, wireframe: true, transparent: true, opacity: 0.5 }); const mesh = new THREE.Mesh(geo, mat); scene.add(mesh);\n let targetSpeed = 0.002; let currentSpeed = 0.002;\n container.addEventListener('mouseenter', () => { targetSpeed = 0.015; }); container.addEventListener('mouseleave', () => { targetSpeed = 0.002; });\n let isVisible = false; const observer = new IntersectionObserver(e => isVisible = e[0].isIntersecting); observer.observe(container);\n function animate() { requestAnimationFrame(animate); if (isVisible) { currentSpeed += (targetSpeed - currentSpeed) * 0.05; mesh.rotation.x += currentSpeed; mesh.rotation.y += currentSpeed * 1.2; renderer.render(scene, camera); } } animate();\n window.addEventListener('resize', () => { if(!container.clientWidth) return; camera.aspect = container.clientWidth \/ container.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(container.clientWidth, container.clientHeight); });\n }\n\n initHero();\n initFooterCreative();\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Clearpage Digital | Premium Web Design & Development Studio [ SOUND: OFF ] Message goes here clearpage.digital clearpage.digital Websites for brands and creatives whovalue architecture and perception. 00 Clearpage.Digital Work Products Team Let’s Talk Work Products Team Let’s Talk FacebookInstagram Selected Works \/\/ Engineering Digital Experiences – Premium Web Design & Custom Web Development Studio […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Home - ClearPage<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/clearpage.my\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - ClearPage\" \/>\n<meta property=\"og:description\" content=\"Clearpage Digital | Premium Web Design & Development Studio [ SOUND: OFF ] Message goes here clearpage.digital clearpage.digital Websites for brands and creatives whovalue architecture and perception. 00 Clearpage.Digital Work Products Team Let’s Talk Work Products Team Let’s Talk FacebookInstagram Selected Works \/\/ Engineering Digital Experiences – Premium Web Design & Custom Web Development Studio […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/clearpage.my\/\" \/>\n<meta property=\"og:site_name\" content=\"ClearPage\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-14T06:15:03+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"35 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/clearpage.my\\\/\",\"url\":\"https:\\\/\\\/clearpage.my\\\/\",\"name\":\"Home - ClearPage\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/clearpage.my\\\/#website\"},\"datePublished\":\"2026-04-15T10:21:10+00:00\",\"dateModified\":\"2026-06-14T06:15:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/clearpage.my\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/clearpage.my\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/clearpage.my\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/clearpage.my\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/clearpage.my\\\/#website\",\"url\":\"https:\\\/\\\/clearpage.my\\\/\",\"name\":\"ClearPage\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/clearpage.my\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n","yoast_head_json":{"title":"Home - ClearPage","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/clearpage.my\/","og_locale":"en_US","og_type":"article","og_title":"Home - ClearPage","og_description":"Clearpage Digital | Premium Web Design & Development Studio [ SOUND: OFF ] Message goes here clearpage.digital clearpage.digital Websites for brands and creatives whovalue architecture and perception. 00 Clearpage.Digital Work Products Team Let’s Talk Work Products Team Let’s Talk FacebookInstagram Selected Works \/\/ Engineering Digital Experiences – Premium Web Design & Custom Web Development Studio […]","og_url":"https:\/\/clearpage.my\/","og_site_name":"ClearPage","article_modified_time":"2026-06-14T06:15:03+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"35 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/clearpage.my\/","url":"https:\/\/clearpage.my\/","name":"Home - ClearPage","isPartOf":{"@id":"https:\/\/clearpage.my\/#website"},"datePublished":"2026-04-15T10:21:10+00:00","dateModified":"2026-06-14T06:15:03+00:00","breadcrumb":{"@id":"https:\/\/clearpage.my\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/clearpage.my\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/clearpage.my\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/clearpage.my\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/clearpage.my\/#website","url":"https:\/\/clearpage.my\/","name":"ClearPage","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/clearpage.my\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/clearpage.my\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clearpage.my\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clearpage.my\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clearpage.my\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clearpage.my\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":80,"href":"https:\/\/clearpage.my\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":1090,"href":"https:\/\/clearpage.my\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/1090"}],"wp:attachment":[{"href":"https:\/\/clearpage.my\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n \n \n Clearpage Digital | Premium Web Design & Development Studio<\/title>\n <meta name=\"title\" content=\"Clearpage Digital | Premium Web Design & Development Studio\">\n <meta name=\"description\" content=\"Clearpage is a premium web development and creative design studio which based in Kuching. We engineer immersive digital experiences, 3D websites, SaaS interfaces, and custom web applications.\">\n <meta name=\"keywords\" content=\"web design, web development company, creative studio, front-end development, Three.js, 3D websites, SaaS UI\/UX, Malaysia web design, custom web applications , Website devolper , Kuching Website devolper , Sarawak Website devolper , Kuching Website design , Kuching Website , Sarawak Website , Malaysia Website\">\n <meta name=\"author\" content=\"Clearpage Digital\">\n <link rel=\"canonical\" href=\"https:\/\/clearpage.digital\/\">\n\n \n <meta property=\"og:type\" content=\"website\">\n <meta property=\"og:url\" content=\"https:\/\/clearpage.digital\/\">\n <meta property=\"og:title\" content=\"Clearpage Digital | Premium Web Design & Development Studio\">\n <meta property=\"og:description\" content=\"We engineer immersive digital experiences, 3D websites, SaaS interfaces, and custom web applications.\">\n <meta property=\"og:image\" content=\"https:\/\/clearpage.digital\/og-image.jpg\">\n\n \n <meta property=\"twitter:card\" content=\"summary_large_image\">\n <meta property=\"twitter:url\" content=\"https:\/\/clearpage.digital\/\">\n <meta property=\"twitter:title\" content=\"Clearpage Digital | Premium Web Design & Development Studio\">\n <meta property=\"twitter:description\" content=\"We engineer immersive digital experiences, 3D websites, SaaS interfaces, and custom web applications.\">\n <meta property=\"twitter:image\" content=\"https:\/\/clearpage.digital\/og-image.jpg\">\n\n \n <script type=\"application\/ld+json\">\n {\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"WebDesignCompany\",\n \"name\": \"Clearpage Digital\",\n \"url\": \"https:\/\/clearpage.digital\",\n \"logo\": \"https:\/\/clearpage.digital\/logo.png\",\n \"image\": \"https:\/\/clearpage.digital\/og-image.jpg\",\n \"description\": \"Established in 2026, Clearpage Digital is a premium engineering studio working on digital products and web applications. Specializing in WebGL, immersive design, and custom web development.\",\n \"address\": {\n \"@type\": \"PostalAddress\",\n \"addressCountry\": \"MY\" \n },\n \"contactPoint\": {\n \"@type\": \"ContactPoint\",\n \"email\": \"hello.clearpage@gmail.com\",\n \"contactType\": \"customer service\"\n },\n \"sameAs\": [\n \"https:\/\/www.facebook.com\/clearpage\",\n \"https:\/\/www.instagram.com\/clearpage\"\n ],\n \"offers\": {\n \"@type\": \"Service\",\n \"serviceType\": [\"Web Design\", \"Web Development\", \"UI\/UX Design\", \"3D Web Development\"]\n }\n }\n <\/script>\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@300;400;500&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\n <script type=\"module\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/model-viewer\/3.4.0\/model-viewer.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\n\n <style>\n \/* SEO helper class *\/\n .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }\n\n * { \n box-sizing: border-box; \n margin: 0; \n padding: 0; \n }\n\n body, html { \n width: 100%; \n background-color: #050505; \n color: #f4f4f4;\n font-family: 'Inter', sans-serif;\n scroll-behavior: smooth;\n overflow-x: hidden;\n -webkit-text-size-adjust: 100%;\n }\n\n :root {\n --text-main: #f4f4f4; \n --text-muted: #555555;\n --accent: #ffffff;\n --font-sans: 'Inter', sans-serif;\n --font-display: 'Plus Jakarta Sans', sans-serif;\n --font-tech: 'JetBrains Mono', monospace;\n --ease: cubic-bezier(0.16, 1, 0.3, 1);\n --ease-out: cubic-bezier(0.25, 1, 0.5, 1);\n }\n\n a, button, .pl-item, .hud-badge, .tech-modal-close, .slide { cursor: pointer; }\n\n #bg-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; }\n\n .global-toast {\n position: fixed; top: 40px; left: 50%; transform: translate(-50%, -20px);\n background: #ffffff; color: #000000; font-family: var(--font-tech);\n font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em;\n padding: 14px 28px; border-radius: 100px; opacity: 0; pointer-events: none;\n transition: all 0.5s var(--ease); box-shadow: 0 15px 40px rgba(0,0,0,0.6);\n z-index: 1000000; text-align: center; white-space: nowrap;\n }\n .global-toast.show { opacity: 1; transform: translate(-50%, 0); }\n\n #preloader {\n position: fixed; inset: 0; background-color: #f4f4f4; z-index: 99999;\n display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;\n }\n .pl-content { display: flex; flex-direction: column; align-items: center; justify-content: center; }\n .pl-title-wrapper { position: relative; font-family: var(--font-display); font-size: clamp(40px, 8vw, 120px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }\n .pl-title-bg { color: rgba(0, 0, 0, 0.15); margin: 0; font-weight: 700; }\n \n \/* PRELOADER FIX 1: clip-path coordinates uniformly set to percentages and webkit prefixed *\/\n .pl-title-fill { \n position: absolute; \n top: 0; left: 0; \n color: #050505; \n margin: 0; \n font-weight: 700; \n -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);\n clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); \n }\n\n .pl-subtext { font-family: var(--font-tech); font-size: 9px; text-transform: uppercase; letter-spacing: 0.15em; text-align: center; line-height: 1.8; color: #555; opacity: 0; margin-top: 30px; transform: translateY(10px); }\n .pl-counter-num { margin-top: 50px; font-family: var(--font-tech); font-size: 12px; color: #050505; font-weight: 500; }\n\n body.loading nav, body.loading .hero-section-header, body.loading .project-list,\n body.loading .col-right, body.loading .active-info, body.loading .global-marquee, body.loading .audio-toggle { opacity: 0 !important; }\n\n nav { \n position: fixed; top: 0; left: 0; width: 100%; z-index: 90; \n display: flex; justify-content: space-between; align-items: center; \n padding: 30px 70px; text-transform: uppercase; letter-spacing: 0.15em; \n font-size: 10px; font-weight: 500; background: rgba(5, 5, 5, 0.6); \n backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);\n border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s ease;\n }\n nav * { pointer-events: auto; }\n\n nav.menu-open { z-index: 100 !important; }\n\n .nav-logo { font-family: var(--font-display); color: var(--text-main); text-decoration: none; transition: opacity 0.4s var(--ease); letter-spacing: -0.02em; font-size: 15px; font-weight: 600; text-transform: none; }\n .nav-logo:hover { opacity: 0.6; }\n .nav-links { display: flex; gap: 40px; align-items: center; font-family: var(--font-display); font-size: 10px; }\n .nav-link { color: var(--text-main); text-decoration: none; display: flex; align-items: center; transition: color 0.4s var(--ease), opacity 0.4s var(--ease); opacity: 0.6; }\n .nav-link:hover { color: var(--text-main); opacity: 1; }\n .nav-cta { border: 1px solid rgba(255, 255, 255, 0.2); padding: 10px 24px; border-radius: 100px; opacity: 1; transition: all 0.3s ease; }\n .nav-cta:hover { background: #fff; color: #000; box-shadow: 0 0 20px rgba(255,255,255,0.2); }\n\n .hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; z-index: 110; padding: 0; -webkit-tap-highlight-color: transparent; }\n .hamburger span { display: block; width: 22px; height: 1.5px; background: #fff; border-radius: 1px; transition: transform 0.4s var(--ease), opacity 0.3s ease; transform-origin: center; }\n .hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }\n .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }\n .hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }\n\n .mobile-nav { position: fixed; inset: 0; z-index: 95; background: rgba(5, 5, 5, 0.97); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease); }\n .mobile-nav.open { opacity: 1; pointer-events: auto; }\n .mobile-nav-link { font-family: var(--font-display); font-size: 32px; font-weight: 600; color: #fff; text-decoration: none; padding: 18px 0; letter-spacing: -0.02em; opacity: 0; transform: translateY(25px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); -webkit-tap-highlight-color: transparent; }\n .mobile-nav.open .mobile-nav-link { opacity: 0.7; transform: translateY(0); }\n .mobile-nav.open .mobile-nav-link:nth-child(1) { transition-delay: 0.06s; }\n .mobile-nav.open .mobile-nav-link:nth-child(2) { transition-delay: 0.12s; }\n .mobile-nav.open .mobile-nav-link:nth-child(3) { transition-delay: 0.18s; }\n .mobile-nav.open .mobile-nav-link:nth-child(4) { transition-delay: 0.24s; }\n .mobile-nav-link:active { opacity: 1; }\n .mobile-nav-footer { position: absolute; bottom: 70px; display: flex; gap: 35px; }\n .mobile-nav-footer a { font-family: var(--font-tech); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.35); text-decoration: none; }\n\n .page-scroll-wrapper { position: relative; width: 100%; z-index: 10; overflow-x: hidden; }\n\n .global-marquee { position: fixed; bottom: 0; left: 0; width: 100%; height: 26px; background: #050505; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; overflow: hidden; z-index: 90; }\n .marquee-content { display: flex; white-space: nowrap; animation: scrollMarquee 45s linear infinite; font-family: var(--font-tech); letter-spacing: 0.25em; color: rgba(255,255,255,0.2); text-transform: uppercase; font-size: 8px; }\n .marquee-content span { padding: 0 50px; display: inline-block; }\n @keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }\n\n .audio-toggle { position: fixed; bottom: 45px; right: 70px; z-index: 95; background: rgba(5, 5, 5, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); font-family: var(--font-tech); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; padding: 12px 24px; border-radius: 100px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all 0.4s var(--ease); cursor: pointer; -webkit-tap-highlight-color: transparent; }\n .audio-toggle:hover { background: #fff; color: #000; border-color: #fff; }\n\n #hero-section { position: sticky; top: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 10; cursor: crosshair; }\n .hero-content { display: flex; width: 100%; max-width: 1900px; padding: 0 70px; align-items: center; gap: 6%; transform-origin: center center; will-change: transform, opacity; }\n .col-left { width: 40%; display: flex; flex-direction: column; position: relative; z-index: 60; }\n .hero-section-header { margin-bottom: 20px; }\n .hero-subtitle { font-family: var(--font-tech); color: #777; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 5px; }\n .hero-title { font-family: var(--font-display); font-size: 2vw; font-weight: 500; letter-spacing: -0.02em; color: var(--text-main); }\n .project-list { list-style: none; display: flex; flex-direction: column; margin-bottom: 5vh; gap: 8px; }\n .pl-item { display: flex; align-items: center; gap: 20px; padding: 6px 0; color: var(--text-muted); transition: color 0.6s var(--ease), transform 0.6s var(--ease); -webkit-tap-highlight-color: transparent; }\n .pl-item:hover { transform: translateX(8px); color: #888; }\n .pl-item.active { color: var(--text-main); transform: translateX(12px); }\n .pl-year { width: 40px; opacity: 0.3; font-family: var(--font-tech); transition: opacity 0.6s; font-size: 10px; font-weight: 300; }\n .pl-item.active .pl-year { opacity: 0.6; color: var(--text-main); }\n .pl-title { font-family: var(--font-display); line-height: 1; transition: color 0.6s var(--ease), font-size 0.6s var(--ease), font-weight 0.6s var(--ease); letter-spacing: -0.02em; font-size: 1.8vw; font-weight: 400; }\n .pl-item.active .pl-title { font-size: 2.5vw; font-weight: 600; letter-spacing: -0.03em; }\n .pl-role { opacity: 0; transform: translateX(-15px); letter-spacing: 0.15em; text-transform: uppercase; transition: all 0.6s var(--ease); font-family: var(--font-tech); color: #777; font-size: 9px; }\n .pl-item.active .pl-role { opacity: 1; transform: translateX(0); }\n\n .active-info { display: flex; flex-direction: column; gap: 25px; max-width: 95%; opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }\n .active-info.visible { opacity: 1; transform: translateY(0); }\n .info-table { display: flex; flex-direction: column; width: 100%; }\n .info-row { display: flex; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }\n .info-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }\n .info-label { width: 30%; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-main); letter-spacing: -0.01em; }\n .info-content { width: 70%; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); font-size: 14px; color: #ffffff; line-height: 1.5; font-weight: 300; }\n .info-content span { display: block; }\n .action-row { display: flex; align-items: center; gap: 35px; margin-top: 5px; }\n .visit-btn { text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-main); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 4px; transition: all 0.4s var(--ease); font-family: var(--font-display); font-size: 10px; font-weight: 600; opacity: 0.7; }\n .visit-btn:hover { border-color: rgba(255,255,255,0.8); opacity: 1; }\n\n .liquid-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; text-transform: uppercase; letter-spacing: 0.15em; color: #fff; text-decoration: none; overflow: hidden; font-family: var(--font-display); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.4); border-radius: 100px; transition: all 0.6s var(--ease); font-size: 9px; font-weight: 600; }\n .liquid-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); transform: skewX(-20deg); animation: shine 5s infinite var(--ease); }\n @keyframes shine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }\n .liquid-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); box-shadow: 0 15px 30px rgba(0,0,0,0.5); }\n\n .col-right { width: 60%; position: relative; z-index: 15; display: flex; justify-content: flex-end; align-items: center; }\n .media-wrapper { position: relative; width: 76%; aspect-ratio: 1.45 \/ 1; overflow: hidden; border-radius: 4px; z-index: 30; box-shadow: 0 25px 80px rgba(0,0,0,0.9); border: 1px solid rgba(255,255,255,0.05); transform: translateZ(0); }\n .media-inner { width: 100%; height: 100%; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: transform 1.2s var(--ease), opacity 1s ease; }\n .media-inner.active { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; z-index: 2; }\n .media-inner.leave-up { transform: translateY(-100%) scale(0.95); opacity: 0; }\n .media-inner.leave-down { transform: translateY(100%) scale(0.95); opacity: 0; }\n .media-inner.enter-up { transform: translateY(100%); opacity: 0; }\n .media-inner.enter-down { transform: translateY(-100%); opacity: 0; }\n .media-inner video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(15%) contrast(1.1) brightness(0.95); }\n\n .video-hud-overlay { position: absolute; inset: 0; z-index: 40; pointer-events: none; background: rgba(5, 5, 5, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.6s var(--ease); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 8%; }\n .video-hud-overlay.locked { opacity: 1; pointer-events: auto; }\n .hud-cluster { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 90%; transform: translateY(25px); transition: transform 0.8s var(--ease); }\n .video-hud-overlay.locked .hud-cluster { transform: translateY(0); }\n .hud-badge { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid rgba(255,255,255,0.08); background: rgba(15,15,15,0.6); padding: 12px 20px; border-radius: 4px; opacity: 0; transform: scale(0.95); transition: all 0.5s var(--ease); box-shadow: 0 10px 30px rgba(0,0,0,0.5); margin-top: 10px; -webkit-tap-highlight-color: transparent; }\n .video-hud-overlay.locked .hud-badge { opacity: 1; transform: scale(1); }\n .hud-badge:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); transform: translateY(-4px) !important; box-shadow: 0 15px 40px rgba(0,0,0,0.8); }\n .hud-label { font-family: var(--font-tech); letter-spacing: 0.15em; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 6px; pointer-events: none; font-size: 8px; }\n .hud-value { font-family: var(--font-display); color: #fff; text-transform: uppercase; letter-spacing: 0.05em; pointer-events: none; font-size: 13px; font-weight: 500; }\n .hud-close-btn { margin-top: 35px; padding: 12px 28px; border: 1px solid rgba(255,255,255,0.15); background: transparent; border-radius: 100px; color: rgba(255,255,255,0.7); font-family: var(--font-tech); letter-spacing: 0.15em; text-transform: uppercase; transition: all 0.4s var(--ease); opacity: 0; transform: translateY(15px); font-size: 9px; }\n .video-hud-overlay.locked .hud-close-btn { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }\n .hud-close-btn:hover { background: #fff; color: #000; }\n\n .hero-footer { position: absolute; bottom: 45px; left: 70px; right: 70px; z-index: 50; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; transition: opacity 0.5s; }\n .foot-left, .foot-right { pointer-events: auto; }\n .scroll-hint { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.2em; font-family: var(--font-tech); transition: opacity 0.4s; font-size: 8px; }\n .scroll-hint span { display: inline-block; width: 1px; height: 20px; background: rgba(255,255,255,0.5); animation: scrollAnim 2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }\n @keyframes scrollAnim { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }\n .foot-right { display: flex; gap: 30px; text-transform: uppercase; font-size: 10px; }\n .foot-right a { color: rgba(255,255,255,0.5); text-decoration: none; letter-spacing: 0.15em; transition: color 0.4s var(--ease); font-family: var(--font-display); font-weight: 500; }\n .foot-right a:hover { color: var(--text-main); }\n\n .connection-bridge { position: relative; width: 100%; height: 12vh; z-index: 15; }\n .data-pipeline { position: absolute; left: 50%; top: -2vh; bottom: -5vh; width: 1px; background: rgba(255, 255, 255, 0.1); transform: translateX(-50%); z-index: 20; }\n .data-packet { position: absolute; left: 50%; top: 0%; width: 3px; height: 35px; background: #ffffff; box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0.8); transform: translateX(-50%); border-radius: 10px; will-change: top; }\n .bridge-flare { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80vw; height: 40vh; background: radial-gradient(circle, rgba(255, 255, 255, 0.02) 0%, transparent 60%); pointer-events: none; z-index: 10; }\n\n #livechat-showcase { position: relative; z-index: 20; width: 100%; min-height: 100vh; padding: 0 70px 100px; display: flex; align-items: center; justify-content: space-between; background: transparent; }\n .cover-gradient { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, transparent 0%, rgba(5,5,5,0.9) 15%, rgba(5,5,5,1) 100%); z-index: -1; pointer-events: none; }\n .lc-specs { width: 30%; z-index: 30; display: flex; flex-direction: column; gap: 30px; opacity: 0; transform: translateX(-40px); transition: all 1s var(--ease-out); }\n .lc-specs.revealed { opacity: 1; transform: translateX(0); }\n .lc-header { display: flex; flex-direction: column; gap: 10px; }\n .lc-subtitle { font-family: var(--font-tech); color: #777; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 5px; }\n .lc-title { font-family: var(--font-display); font-size: 2.5vw; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }\n .lc-data-box { background: rgba(15, 15, 15, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; padding: 30px; backdrop-filter: blur(10px); position: relative; overflow: hidden; }\n .lc-data-box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 15px 15px; z-index: -1; opacity: 0.5; pointer-events: none; }\n .lc-desc { font-size: 14px; color: #aaa; line-height: 1.6; font-weight: 300; margin-bottom: 25px; }\n .system-status { display: flex; gap: 8px; align-items: flex-end; margin-top: 20px; height: 15px; }\n .sys-bar { width: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; animation: sysPulse 1s infinite alternate ease-in-out; }\n @keyframes sysPulse { 0% { height: 30%; } 100% { height: 100%; } }\n\n .hologram-container { width: 60%; height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; perspective: 1200px; z-index: 20; opacity: 0; transform: scale(0.9); transition: all 1.5s var(--ease-out); transform: translateZ(0); }\n .hologram-container.revealed { opacity: 1; transform: scale(1); }\n .ui-glass-panel { position: absolute; top: 15%; width: 70%; aspect-ratio: 16\/10; background: rgba(10, 10, 15, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 40px rgba(0, 255, 255, 0.05); backdrop-filter: blur(15px); overflow: hidden; z-index: 22; transform-style: preserve-3d; transition: transform 0.1s ease-out; }\n .ui-glass-panel::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%); transform: translateY(-100%); animation: scan 4s linear infinite; pointer-events: none; z-index: 30; }\n @keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }\n\n .slider-wrapper { width: 100%; height: 100%; position: relative; z-index: 10; }\n .slider-track { display: flex; width: 300%; height: 100%; transition: transform 0.6s var(--ease-out); }\n .slide { width: 33.3333%; height: 100%; position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }\n .slide img, .slide video { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: brightness(0.8); transition: filter 0.3s; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }\n .slide:hover img, .slide:hover video { filter: brightness(1.1); }\n .slide-overlay { display: none !important; }\n .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20; transition: all 0.3s; backdrop-filter: blur(5px); font-family: var(--font-tech); -webkit-tap-highlight-color: transparent; }\n .slider-btn:hover { background: #fff; color: #000; }\n .slider-prev { left: 15px; } .slider-next { right: 15px; }\n .slider-dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 20; }\n .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: all 0.3s; cursor: pointer; }\n .dot.active { background: #fff; transform: scale(1.3); }\n\n .light-beam { position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%); width: 55%; height: 50%; background: linear-gradient(to top, rgba(200,255,255,0.15), transparent); clip-path: polygon(25% 100%, 75% 100%, 100% 0, 0 0); pointer-events: none; z-index: 20; }\n .light-beam::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; background: linear-gradient(to top, rgba(200,255,255,0.05) 1px, transparent 1px); background-size: 100% 10px; opacity: 0.5; animation: beamScan 2s linear infinite; }\n @keyframes beamScan { 0% { transform: translateY(0); } 100% { transform: translateY(-20px); } }\n .holo-floor { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%) rotateX(75deg); width: 400px; height: 400px; background: radial-gradient(circle, rgba(0,255,255,0.08) 0%, transparent 60%); border: 1px dashed rgba(255,255,255,0.1); border-radius: 50%; z-index: 18; pointer-events: none; }\n .holo-floor::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; border: 1px solid rgba(0,255,255,0.2); border-radius: 50%; box-shadow: 0 0 20px rgba(0,255,255,0.1); }\n #canvas-3d-projector { position: absolute; bottom: 0%; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; z-index: 21; pointer-events: none; }\n #loading-text { position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%); font-family: var(--font-tech); font-size: 12px; color: #00ff88; letter-spacing: 0.2em; z-index: 19; animation: pulse 1s infinite alternate; }\n @keyframes pulse { 0% { opacity: 0.5; } 100% { opacity: 1; } }\n\n #scroll-reveal-section { position: relative; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: flex-start; padding: 0 10%; z-index: 20; background: transparent; }\n .reveal-text-container { width: 50vw; font-family: var(--font-display); font-size: clamp(20px, 2.5vw, 40px); font-weight: 500; line-height: 1.4; text-align: left; letter-spacing: -0.01em; color: #ffffff; }\n .scroll-word { display: inline-block; margin-right: 0.22em; opacity: 0; }\n\n #agency-container { position: relative; width: 100%; height: 100vh; background-color: transparent; color: #ffffff; overflow: hidden; z-index: 20; }\n .fixed-bg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }\n .bg-kanji { position: absolute; font-family: var(--font-display); font-size: 25vw; font-weight: 900; color: rgba(255, 255, 255, 0.03); white-space: nowrap; }\n .kanji-1 { top: 5%; left: 30%; } .kanji-2 { top: 40%; right: -10%; } .kanji-3 { top: 75%; left: 10%; }\n .main-title { position: absolute; top: 5%; left: 4%; font-family: var(--font-display); font-size: 9vw; font-weight: 700; line-height: 0.85; letter-spacing: -0.05em; margin: 0; }\n .center-text { position: absolute; top: 30%; left: 20%; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; display: flex; gap: 50px; }\n .bottom-left-text { position: absolute; bottom: 8%; left: 4%; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: #888; }\n .bottom-right-title { position: absolute; bottom: 5%; right: 4%; font-family: var(--font-display); font-size: 11vw; font-weight: 700; line-height: 0.8; letter-spacing: -0.05em; text-align: right; margin: 0; }\n .white-bold { color: #fff; font-weight: 600; }\n .gray-text { color: #888; }\n .cards-conveyor { position: absolute; top: 100vh; left: 0; width: 100%; height: 100%; z-index: 10; will-change: transform; transform: translateZ(0); }\n .team-card { position: absolute; width: 300px; border: 1px solid rgba(255, 255, 255, 0.2); background-color: transparent; display: flex; flex-direction: column; will-change: transform; transform: translateZ(0); }\n .group-card { width: 550px; }\n .voxel-3d-model { width: 100%; height: 380px; background-color: transparent; outline: none; transform: translateZ(0); }\n .card-pos-1 { top: 10vh; right: 12%; } .card-pos-2 { top: 40vh; left: 18%; } .card-pos-3 { top: 70vh; right: 12%; } .card-pos-4 { top: 130vh; left: 50%; transform: translateX(-50%); }\n .member-info { background-color: #ffffff; color: #000000; display: flex; justify-content: space-between; align-items: stretch; width: 100%; padding: 15px; box-sizing: border-box; font-family: var(--font-sans); }\n .member-left { display: flex; flex-direction: column; justify-content: space-between; height: 45px; }\n .member-name { color: #000000; font-size: 1.1rem; font-weight: 700; margin: 0; font-family: var(--font-display); }\n .member-country { color: #555; font-size: 10px; font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 0.1em; }\n .member-right { color: #555; font-family: var(--font-sans); font-size: 12px; text-align: right; line-height: 1.4; }\n\n .tech-modal-wrapper { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.6s var(--ease); }\n .tech-modal-wrapper.show { opacity: 1; pointer-events: auto; }\n .tech-modal-bg { position: absolute; inset: 0; background: rgba(3, 3, 3, 0.92); backdrop-filter: blur(15px); }\n .tech-modal-content { position: relative; z-index: 10; width: 45vw; max-width: 800px; background: #000; border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; box-shadow: 0 40px 100px rgba(0,0,0,1); transform: scale(0.98) translateY(20px); transition: transform 0.8s var(--ease); overflow: hidden; display: flex; flex-direction: column; }\n .tech-modal-wrapper.show .tech-modal-content { transform: scale(1) translateY(0); }\n .tm-media-box { width: 100%; aspect-ratio: 16\/9; background: #000; position: relative; overflow: hidden; }\n .tm-media-box video, .tm-media-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }\n .tm-text-box { width: 100%; padding: 20px 25px; background: rgba(10,10,10,0.9); border-top: 1px solid rgba(255,255,255,0.05); min-height: 100px; }\n .tm-typewriter { font-family: var(--font-tech); font-size: 11px; color: #00ff88; line-height: 1.6; letter-spacing: 0.05em; }\n .tm-typewriter::after { content: '|'; animation: blink 1s infinite; }\n @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }\n .tech-modal-close { position: absolute; top: 15px; right: 15px; z-index: 20; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; color: #fff; font-family: var(--font-tech); padding: 8px 16px; letter-spacing: 0.15em; text-transform: uppercase; backdrop-filter: blur(8px); transition: all 0.4s var(--ease); font-size: 9px; -webkit-tap-highlight-color: transparent; }\n .tech-modal-close:hover { background: #fff; color: #000; }\n\n #contact-section { position: relative; width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 20; background: #050505; padding: 80px 20px; }\n #contact-section::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255,255,255,0.02) 4px, rgba(255,255,255,0.02) 5px); pointer-events: none; z-index: 1; }\n .form-wrapper { position: relative; width: 100%; max-width: 500px; z-index: 10; }\n .contact-form-box { background: #ffffff; color: #000000; padding: 60px 50px; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,0.8); position: relative; transition: all 0.6s var(--ease); }\n .contact-form-box.hidden { opacity: 0; pointer-events: none; transform: scale(0.98); }\n .form-step { display: none; flex-direction: column; opacity: 0; transform: translateY(10px); animation: stepFade 0.6s var(--ease) forwards; }\n .form-step.active { display: flex; }\n @keyframes stepFade { to { opacity: 1; transform: translateY(0); } }\n .step-header { display: flex; align-items: center; gap: 15px; margin-bottom: 30px; }\n .form-badge { background: #000; color: #fff; font-family: var(--font-tech); font-size: 10px; padding: 6px 12px; border-radius: 100px; letter-spacing: 0.1em; }\n .btn-back { background: none; border: none; font-family: var(--font-sans); font-size: 12px; color: #555; cursor: pointer; transition: color 0.3s; padding: 0; }\n .btn-back:hover { color: #000; }\n .form-title { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 40px; }\n .input-group { margin-bottom: 25px; position: relative; }\n .input-group input, .input-group textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid #ddd; padding: 12px 0; font-family: var(--font-sans); font-size: 16px; color: #000; outline: none; transition: border-color 0.4s var(--ease); resize: none; }\n .input-group input::placeholder, .input-group textarea::placeholder { color: #aaa; font-weight: 300; }\n .input-group input:focus, .input-group textarea:focus { border-bottom-color: #000; }\n .budget-group { margin-bottom: 35px; }\n .budget-label { font-family: var(--font-sans); font-size: 14px; font-weight: 500; margin-bottom: 15px; display: block; color: #000; }\n .budget-options { display: flex; gap: 10px; flex-wrap: wrap; }\n .budget-pill { border: 1px solid #ddd; background: transparent; padding: 10px 18px; border-radius: 100px; font-family: var(--font-sans); font-size: 13px; color: #555; cursor: pointer; transition: all 0.3s var(--ease); }\n .budget-pill.active { background: #000; color: #fff; border-color: #000; }\n .form-footer { margin-top: 20px; display: flex; justify-content: flex-start; }\n .form-action-btn { background: none; border: none; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: #000; cursor: pointer; padding: 0; position: relative; }\n .form-action-btn::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: #000; transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }\n .form-action-btn:hover::after { transform: scaleX(1); }\n .form-success-toast { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); background: #fff; color: #000; font-family: var(--font-sans); font-size: 14px; font-weight: 500; padding: 20px 30px; border-radius: 4px; opacity: 0; pointer-events: none; transition: all 0.6s var(--ease); box-shadow: 0 20px 50px rgba(0,0,0,0.5); text-align: center; white-space: nowrap; }\n .form-success-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }\n\n #site-footer { position: relative; width: 100%; background: #0c0c0c; padding: 100px 70px 60px; display: flex; flex-direction: column; z-index: 20; border-top: 1px solid rgba(255, 255, 255, 0.05); }\n .footer-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }\n .footer-col { display: flex; flex-direction: column; }\n .footer-label { font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: #777; margin-bottom: 20px; }\n .footer-primary-link { color: #ffffff; text-decoration: none; font-family: var(--font-sans); font-size: 15px; font-weight: 500; display: inline-block; width: fit-content; }\n .footer-nav-split { display: flex; gap: 40px; }\n .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }\n .footer-links.mt-auto { margin-top: 40px; }\n .footer-links a { color: #ffffff; text-decoration: none; font-family: var(--font-sans); font-size: 14px; font-weight: 400; display: inline-block; width: fit-content; }\n .footer-links a.muted-link { color: #777; }\n .footer-desc { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: #f4f4f4; font-weight: 400; max-width: 320px; }\n .hover-wave { position: relative; display: inline-block; text-decoration: none; }\n .hover-wave::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 6px; background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='6' viewBox='0 0 20 6'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.5' d='M0,3 Q5,6 10,3 T20,3'\/%3E%3C\/svg%3E\") repeat-x; background-size: 20px 6px; opacity: 0; transform: translateY(2px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); animation: wave-move 0.8s linear infinite; animation-play-state: paused; }\n .hover-wave.muted-link::after { background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='20' height='6' viewBox='0 0 20 6'%3E%3Cpath fill='none' stroke='%23777777' stroke-width='1.5' d='M0,3 Q5,6 10,3 T20,3'\/%3E%3C\/svg%3E\") repeat-x; background-size: 20px 6px; }\n .hover-wave:hover::after { opacity: 1; transform: translateY(0); animation-play-state: running; }\n @keyframes wave-move { to { background-position: -20px 0; } }\n .footer-bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 80px; }\n .footer-huge-group { display: flex; align-items: flex-end; gap: 20px; }\n .huge-text { font-family: var(--font-display); font-size: 13vw; font-weight: 600; line-height: 0.8; letter-spacing: -0.04em; color: #f4f4f4; margin-left: -0.5vw; pointer-events: none; }\n .footer-image-block { width: 14vw; height: 10vw; background: radial-gradient(circle at center, #1a1a1a 0%, #050505 100%); overflow: hidden; margin-bottom: 0.5vw; border: 1px solid rgba(255,255,255,0.05); border-radius: 4px; position: relative; cursor: crosshair; }\n .footer-image-block canvas { width: 100% !important; height: 100% !important; outline: none; }\n .footer-legal { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding-bottom: 1vw; }\n .legal-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }\n .legal-links a { color: #ffffff; text-decoration: none; font-family: var(--font-sans); font-size: 13px; font-weight: 400; display: inline-block; width: fit-content; }\n .copyright { font-family: var(--font-tech); font-size: 10px; color: #fff; letter-spacing: 0.05em; }\n\n @media (max-width: 1024px) {\n body, html { cursor: default; -webkit-overflow-scrolling: touch; width: 100vw !important; max-width: 100vw !important; overflow-x: hidden !important; }\n #bg-canvas { display: none !important; }\n nav { padding: 16px 20px; align-items: center; }\n .nav-links { display: none !important; visibility: hidden !important; opacity: 0 !important; position: absolute !important; }\n .hamburger { display: flex !important; z-index: 110; }\n #hero-section { position: relative !important; display: block !important; height: auto !important; min-height: 100dvh !important; cursor: default; }\n .hero-content { display: flex !important; flex-direction: column !important; padding: 100px 20px 40px !important; gap: 0 !important; align-items: stretch !important; transform: none !important; opacity: 1 !important; height: auto !important; overflow: hidden !important; }\n .col-left { display: contents !important; }\n .hero-section-header { order: 1 !important; margin-bottom: 20px !important; width: 100% !important; }\n .hero-title { font-size: 28px !important; line-height: 1.2 !important; }\n .hero-subtitle { font-size: 10px; margin-bottom: 8px !important; }\n .col-right { order: 2 !important; width: 100% !important; margin-bottom: 25px !important; justify-content: center !important; display: flex !important; flex: none !important; }\n .media-wrapper { width: 100% !important; aspect-ratio: 16\/10 !important; border-radius: 8px; transform: translateZ(0); }\n .project-list { order: 3 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; width: calc(100% + 40px) !important; margin-left: -20px !important; padding: 0 20px 15px 20px !important; gap: 12px !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; touch-action: pan-x pan-y !important; }\n .project-list::-webkit-scrollbar { display: none !important; }\n .pl-item { flex: 0 0 auto !important; padding: 14px 22px !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 100px !important; white-space: nowrap !important; }\n .pl-year { font-size: 10px !important; width: auto !important; margin-right: 6px; }\n .pl-title { font-size: 14px !important; font-weight: 500 !important; }\n .pl-role { display: none !important; }\n .active-info { order: 4 !important; gap: 16px !important; max-width: 100% !important; width: 100% !important; height: auto !important; }\n .info-row { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding: 16px 0 !important; width: 100% !important; }\n .info-label { width: 100% !important; font-size: 12px !important; color: #888 !important; margin-bottom: 4px !important; }\n .info-content { width: 100% !important; font-size: 14px !important; line-height: 1.5 !important; word-wrap: break-word !important; white-space: normal !important; }\n .info-content span { display: block; margin-bottom: 4px; }\n .action-row { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 15px !important; flex-wrap: nowrap !important; margin-top: 15px !important; width: 100% !important; }\n .liquid-btn { padding: 14px 24px !important; font-size: 10px !important; flex-shrink: 0 !important; }\n .visit-btn { font-size: 10px !important; white-space: nowrap !important; flex-shrink: 0 !important; }\n .video-hud-overlay { padding: 15px !important; justify-content: center !important; }\n .hud-cluster { gap: 6px !important; max-width: 100% !important; }\n .hud-badge { padding: 8px 12px !important; margin-top: 4px !important; }\n .hud-label { font-size: 7px !important; margin-bottom: 2px !important; }\n .hud-value { font-size: 10px !important; }\n .hud-close-btn { margin-top: 15px !important; padding: 8px 24px !important; font-size: 8px !important; }\n .tech-modal-content { width: 92vw !important; max-height: 85vh !important; display: flex !important; flex-direction: column !important; border-radius: 8px !important; }\n .tm-media-box { display: block !important; width: 100% !important; aspect-ratio: 16\/9 !important; min-height: 250px !important; height: auto !important; flex-shrink: 0 !important; position: relative !important; overflow: hidden !important; background: #050505 !important; }\n .tm-media-box video, .tm-media-box img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; }\n .tm-text-box { padding: 16px !important; flex-grow: 1 !important; overflow-y: auto !important; min-height: auto !important; }\n .tech-modal-close { top: 10px !important; right: 10px !important; background: rgba(0,0,0,0.8) !important; padding: 8px 16px !important; }\n .hero-footer { position: relative !important; padding: 20px !important; flex-direction: column !important; gap: 16px !important; align-items: flex-start !important; opacity: 1 !important; }\n #livechat-showcase { flex-direction: column !important; padding: 80px 20px 40px !important; gap: 40px !important; height: auto !important; }\n .lc-specs { width: 100% !important; opacity: 1 !important; transform: none !important; }\n .lc-title { font-size: 28px !important; }\n .lc-data-box { padding: 24px; }\n .lc-data-box .info-row { flex-direction: column !important; gap: 8px !important; }\n .lc-data-box .info-label { width: 100% !important; }\n .hologram-container { width: 100% !important; height: auto !important; perspective: none !important; transform: none !important; opacity: 1 !important; display: flex !important; flex-direction: column !important; gap: 30px !important; padding-bottom: 50px !important; transform: translateZ(0); }\n .ui-glass-panel { position: relative !important; top: auto !important; width: 100% !important; aspect-ratio: 16\/10; border-radius: 8px; }\n .light-beam, .holo-floor { display: none !important; }\n #canvas-3d-projector { display: none !important; }\n #loading-text { display: none !important; }\n #scroll-reveal-section { padding: 0 20px !important; }\n .reveal-text-container { width: 100% !important; font-size: 26px !important; }\n .main-title { font-size: 13vw !important; top: 10% !important; left: 20px !important; opacity: 0.5 !important; }\n .bottom-right-title { font-size: 11vw !important; right: 20px !important; bottom: 8% !important; opacity: 0.5 !important; }\n .center-text { top: 25% !important; left: 20px !important; right: 20px !important; flex-direction: column !important; gap: 16px !important; font-size: 14px !important; opacity: 0.4 !important; }\n .bottom-left-text { bottom: 20% !important; left: 20px !important; opacity: 0.4 !important; font-size: 13px !important; }\n .team-card { width: 80vw !important; max-width: 320px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; }\n .group-card { width: 88vw !important; max-width: 340px !important; }\n .voxel-3d-model { height: 320px !important; width: 100% !important; }\n .card-pos-1 { top: 15vh !important; } .card-pos-2 { top: 95vh !important; } .card-pos-3 { top: 175vh !important; } .card-pos-4 { top: 255vh !important; }\n .cards-conveyor { height: auto !important; }\n #site-footer { padding: 60px 20px; }\n .footer-top { grid-template-columns: 1fr; gap: 60px; }\n .footer-bottom { flex-direction: column; align-items: flex-start; gap: 40px; margin-top: 60px; }\n .footer-huge-group { flex-direction: column; align-items: flex-start; width: 100%; }\n .huge-text { font-size: 18vw; margin-left: 0; }\n .footer-image-block { display: none !important; }\n .footer-legal { padding-bottom: 0; gap: 30px; }\n .global-marquee { height: 26px; }\n .audio-toggle { bottom: 40px !important; right: 20px !important; padding: 10px 18px !important; font-size: 8px !important; }\n }\n @media (max-width: 400px) {\n .hero-title, .lc-title { font-size: 24px !important; }\n .hero-content { padding: 90px 16px 24px !important; }\n .voxel-3d-model { height: 280px !important; }\n .action-row { gap: 10px !important; }\n .liquid-btn { padding: 12px 18px !important; font-size: 9px !important; }\n .visit-btn { font-size: 9px !important; }\n }\n <\/style>\n<\/head>\n\n<body class=\"loading\">\n\n \n <audio id=\"bg-audio\" loop preload=\"none\">\n <source src=\"https:\/\/clearpage.my\/wp-content\/uploads\/2026\/04\/Black-Rain-Tobias-Voigt-Futuristic-Music.mp3\" type=\"audio\/mpeg\">\n <\/audio>\n <button class=\"audio-toggle\" id=\"audio-toggle\">[ SOUND: OFF ]<\/button>\n\n <div class=\"global-toast\" id=\"global-toast\">Message goes here<\/div>\n <div id=\"preloader\">\n <div class=\"pl-content\">\n <div class=\"pl-title-wrapper\">\n <div class=\"pl-title-bg\">clearpage.digital<\/div>\n <div class=\"pl-title-fill\" id=\"pl-title-fill\">clearpage.digital<\/div>\n <\/div>\n <div class=\"pl-subtext\" id=\"pl-subtext\">Websites for brands and creatives who<br>value architecture and perception.<\/div>\n <div class=\"pl-counter-num\" id=\"pl-counter-num\">00<\/div>\n <\/div>\n <\/div>\n <canvas id=\"bg-canvas\"><\/canvas>\n <nav>\n <a href=\"#hero-section\" class=\"nav-logo\">Clearpage.Digital<\/a>\n <div class=\"nav-links\">\n <a href=\"#hero-section\" class=\"nav-link\">Work<\/a>\n <a href=\"#livechat-showcase\" class=\"nav-link\">Products<\/a>\n <a href=\"#agency-container\" class=\"nav-link\">Team<\/a>\n <a href=\"#contact-section\" class=\"nav-link nav-cta\">Let's Talk<\/a>\n <\/div>\n <button class=\"hamburger\" id=\"hamburger\" aria-label=\"Menu\"><span><\/span><span><\/span><span><\/span><\/button>\n <\/nav>\n <div class=\"mobile-nav\" id=\"mobile-nav\">\n <a href=\"#hero-section\" class=\"mobile-nav-link\">Work<\/a>\n <a href=\"#livechat-showcase\" class=\"mobile-nav-link\">Products<\/a>\n <a href=\"#agency-container\" class=\"mobile-nav-link\">Team<\/a>\n <a href=\"#contact-section\" class=\"mobile-nav-link\">Let's Talk<\/a>\n <div class=\"mobile-nav-footer\"><a href=\"#\">Facebook<\/a><a href=\"#\">Instagram<\/a><\/div>\n <\/div>\n <div class=\"page-scroll-wrapper\">\n <section id=\"hero-section\">\n <div class=\"hero-content\" id=\"hero-content\">\n <div class=\"col-left\">\n <div class=\"hero-section-header\">\n <div class=\"hero-subtitle\">Selected Works \/\/<\/div>\n <h1 class=\"hero-title\">\n Engineering Digital Experiences\n <span class=\"sr-only\"> - Premium Web Design & Custom Web Development Studio<\/span>\n <\/h1>\n <\/div>\n <ul class=\"project-list\" id=\"project-list\"><\/ul>\n \n \n <noscript>\n <h2>Our Web Development Portfolio<\/h2>\n <ul>\n <li>\n <h3>Borneo Mazu<\/h3>\n <p>UI\/UX & Web Dev. A dynamic cultural festival website built to showcase the Borneo Mazu celebration through modern design and immersive community storytelling.<\/p>\n <p>Technologies: Custom CMS, Web Design, Interactive AI.<\/p>\n <\/li>\n <li>\n <h3>Smartmys<\/h3>\n <p>Creative E-Commerce website selling gadgets with WordPress Development.<\/p>\n <\/li>\n <li>\n <h3>Perfect Match Furniture<\/h3>\n <p>Branding & Web Development. A furniture brand website showcasing modern home pieces through clean layouts, refined visuals, and a functional, user-friendly experience.<\/p>\n <\/li>\n <\/ul>\n <\/noscript>\n\n <div class=\"active-info\" id=\"active-info\">\n <div class=\"info-table\" id=\"info-table\"><\/div>\n <div class=\"action-row\">\n <button class=\"liquid-btn\" id=\"explore-btn\">Explore Tech<\/button>\n <a href=\"#\" class=\"visit-btn\" id=\"visit-btn\">Visit Live Site<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"col-right\">\n <div class=\"media-wrapper\">\n <div id=\"media-container\"><\/div>\n <div class=\"video-hud-overlay\" id=\"hud-overlay\">\n <div class=\"hud-cluster\" id=\"hud-cluster\"><\/div>\n <button class=\"hud-close-btn\" id=\"hud-close\">Close Data [X]<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"hero-footer\" id=\"hero-footer\">\n <div class=\"foot-left\"><div class=\"scroll-hint\"><span><\/span> Scroll to View Architecture<\/div><\/div>\n <div class=\"foot-right\"><a href=\"#\">LinkedIn<\/a><a href=\"#\">Instagram<\/a><\/div>\n <\/div>\n <\/section>\n <div class=\"connection-bridge\"><div class=\"bridge-flare\"><\/div><div class=\"data-pipeline\" id=\"data-pipeline\"><div class=\"data-packet\" id=\"data-packet\"><\/div><\/div><\/div>\n <section id=\"livechat-showcase\">\n <div class=\"cover-gradient\"><\/div>\n <div class=\"lc-specs observe-me\">\n <div class=\"lc-header\">\n <div class=\"lc-subtitle\">App Deployment \/\/ Livechat<\/div>\n <h2 class=\"lc-title\">Clearchat<\/h2>\n <\/div>\n <div class=\"lc-data-box\">\n <p class=\"lc-desc\">A real-time customer engagement platform engineered for instant latency. Features automated AI handoffs, end-to-end encryption, and a seamless floating UI integration.<\/p>\n <div class=\"info-table\">\n <div class=\"info-row\"><div class=\"info-label\">Stack<\/div><div class=\"info-content\">React, Node.js, Socket.io<\/div><\/div>\n <div class=\"info-row\"><div class=\"info-label\">Industry<\/div><div class=\"info-content\">SaaS \/ Customer Support<\/div><\/div>\n <div class=\"info-row\"><div class=\"info-label\">Status<\/div><div class=\"info-content\" style=\"color:#00ff88;\">Online & Deployed<\/div><\/div>\n <\/div>\n <div class=\"system-status\">\n <div class=\"sys-bar\" style=\"animation-delay:0.1s\"><\/div><div class=\"sys-bar\" style=\"animation-delay:0.4s\"><\/div><div class=\"sys-bar\" style=\"animation-delay:0.2s\"><\/div><div class=\"sys-bar\" style=\"animation-delay:0.7s\"><\/div><div class=\"sys-bar\" style=\"animation-delay:0.3s\"><\/div><div class=\"sys-bar\" style=\"animation-delay:0.6s\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"hologram-container observe-me\" id=\"hologram-container\">\n <div class=\"ui-glass-panel\" id=\"ui-panel\">\n <div class=\"slider-wrapper\">\n <div class=\"slider-btn slider-prev\" id=\"slide-prev\"><<\/div>\n <div class=\"slider-btn slider-next\" id=\"slide-next\">><\/div>\n <div class=\"slider-dots\" id=\"slider-dots\"><div class=\"dot active\" data-idx=\"0\"><\/div><div class=\"dot\" data-idx=\"1\"><\/div><div class=\"dot\" data-idx=\"2\"><\/div><\/div>\n <div class=\"slider-track\" id=\"slider-track\">\n <div class=\"slide\" data-type=\"video\" data-src=\"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-15-021843.mp4\" data-text=\"[SYS_LOG] Integrating AI Neural Engine... Real-time response matrix activated.\"><video src=\"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-15-021843.mp4\" loop muted playsinline autoplay><\/video><div class=\"slide-overlay\"><span>Tap to Inspect<\/span><\/div><\/div>\n <div class=\"slide\" data-type=\"video\" data-src=\"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-15-021932.mp4\" data-text=\"[SYS_LOG] WebSocket handshake successful. End-to-end latency < 15ms.\"><video src=\"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-15-021932.mp4\" loop muted playsinline autoplay><\/video><div class=\"slide-overlay\"><span>Tap to Inspect<\/span><\/div><\/div>\n <div class=\"slide\" data-type=\"video\" data-src=\"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-15-021932.mp4\" data-text=\"[SYS_LOG] WebSocket handshake successful. End-to-end latency < 15ms.\"><video src=\"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-15-021932.mp4\" loop muted playsinline autoplay><\/video><div class=\"slide-overlay\"><span>Tap to Inspect<\/span><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"light-beam\"><\/div>\n <div class=\"holo-floor\"><\/div>\n <div id=\"loading-text\">INITIALIZING 3D HARDWARE...<\/div>\n <div id=\"canvas-3d-projector\"><\/div>\n <\/div>\n <\/section>\n <section id=\"scroll-reveal-section\"><div id=\"reveal-text-container\" class=\"reveal-text-container\"><\/div><\/section>\n <div id=\"agency-container\" class=\"voxel-agency-container\">\n <div class=\"fixed-bg-layer\">\n <div class=\"bg-kanji kanji-1\">\u5b9e\u4f53\u5316<\/div><div class=\"bg-kanji kanji-2\">\u6c89\u6d78<\/div><div class=\"bg-kanji kanji-3\">\u8bbe\u8ba1\u5373\u601d\u8003<\/div>\n <h2 class=\"main-title\">Team made<br>visible<\/h2>\n <div class=\"center-text\"><div class=\"white-bold\">Small team. Clear Intent.<\/div><div class=\"gray-text\">An open view into<br>a small design team.<br><br>Structure, rhythm, and<br>emotion - expressed<br>through clarity and control.<\/div><\/div>\n <div class=\"bottom-left-text\"><span class=\"white-bold\">Observe<\/span> how<br>ideas take form.<br><br><span class=\"white-bold\">Touch<\/span> the structure<br>behind the visuals.<br><br>See how thinking<br><span class=\"white-bold\">becomes<\/span> interface.<\/div>\n <h2 class=\"bottom-right-title\">Thinking shaped<br>into design<\/h2>\n <\/div>\n <div class=\"cards-conveyor\">\n <div class=\"team-card card-pos-1\"><model-viewer src=\"https:\/\/\/clearpage.my\/wp-content\/uploads\/3d-models\/nich.glb\" alt=\"Nicholas\" loading=\"lazy\" auto-rotate rotation-per-second=\"30deg\" camera-controls disable-zoom class=\"voxel-3d-model\"><\/model-viewer><div class=\"member-info\"><div class=\"member-left\"><div class=\"member-name\">Nicholas<\/div><div class=\"member-country\">Malaysia<\/div><\/div><div class=\"member-right\">Founder,<br>Creative Designer<\/div><\/div><\/div>\n <div class=\"team-card card-pos-2\"><model-viewer src=\"https:\/\/\/clearpage.my\/wp-content\/uploads\/3d-models\/darren.glb\" alt=\"Darren\" loading=\"lazy\" auto-rotate rotation-per-second=\"30deg\" camera-controls disable-zoom class=\"voxel-3d-model\"><\/model-viewer><div class=\"member-info\"><div class=\"member-left\"><div class=\"member-name\">Dragonfruitnino<\/div><div class=\"member-country\">Malaysia<\/div><\/div><div class=\"member-right\">Webflow Expert,<br>Creative Designer<\/div><\/div><\/div>\n <div class=\"team-card card-pos-3\"><model-viewer src=\"https:\/\/\/clearpage.my\/wp-content\/uploads\/3d-models\/eric.glb\" alt=\"Eric\" loading=\"lazy\" auto-rotate rotation-per-second=\"30deg\" camera-controls disable-zoom class=\"voxel-3d-model\"><\/model-viewer><div class=\"member-info\"><div class=\"member-left\"><div class=\"member-name\">Doggos<\/div><div class=\"member-country\">Malaysia<\/div><\/div><div class=\"member-right\">Webflow Expert,<br>Frontend Developer<\/div><\/div><\/div>\n <div class=\"team-card group-card card-pos-4\"><model-viewer src=\"https:\/\/\/clearpage.my\/wp-content\/uploads\/3d-models\/groups.glb?v=2\" alt=\"The Team\" loading=\"lazy\" auto-rotate rotation-per-second=\"30deg\" camera-controls disable-zoom class=\"voxel-3d-model\"><\/model-viewer><div class=\"member-info\"><div class=\"member-left\"><div class=\"member-name\">The Core Team<\/div><div class=\"member-country\">Malaysia<\/div><\/div><div class=\"member-right\">Clearpage Digital<br>Engineering Digital Experiences<\/div><\/div><\/div>\n <\/div>\n <\/div>\n <section id=\"contact-section\">\n <div class=\"form-wrapper\">\n <div class=\"contact-form-box\" id=\"fs-form-box\">\n <div class=\"form-step active\" id=\"fs-step-1\">\n <div class=\"step-header\"><span class=\"form-badge\">1\/2 Steps<\/span><\/div>\n <h2 class=\"form-title\">Let's start a<br>conversation<\/h2>\n <div class=\"input-group\"><input type=\"text\" id=\"fs-name\" placeholder=\"Your Name\" required><\/div>\n <div class=\"input-group\"><input type=\"email\" id=\"fs-email\" placeholder=\"Email\" required><\/div>\n <div class=\"input-group\"><input type=\"text\" id=\"fs-company\" placeholder=\"Company Name (Optional)\"><\/div>\n <div class=\"form-footer\"><button class=\"form-action-btn\" id=\"fs-to-step-2\">Next step<\/button><\/div>\n <\/div>\n <div class=\"form-step\" id=\"fs-step-2\">\n <div class=\"step-header\"><button class=\"btn-back\" id=\"fs-to-step-1\">Back<\/button><span class=\"form-badge\">2\/2 Steps<\/span><\/div>\n <h2 class=\"form-title\">A few details to<br>get started<\/h2>\n <div class=\"budget-group\">\n <label class=\"budget-label\">Estimated budget<\/label>\n <div class=\"budget-options\">\n <button class=\"budget-pill active\" data-val=\"$5-$10k\">$5k - $10k<\/button>\n <button class=\"budget-pill\" data-val=\"$10-$30k\">$10k - $30k<\/button>\n <button class=\"budget-pill\" data-val=\"$30k+\">$30k+<\/button>\n <\/div>\n <\/div>\n <div class=\"input-group\"><textarea id=\"fs-details\" placeholder=\"Tell us about your project...\" rows=\"4\" required><\/textarea><\/div>\n <div class=\"form-footer\"><button class=\"form-action-btn\" id=\"fs-submit\">Send request<\/button><\/div>\n <\/div>\n <\/div>\n <div class=\"form-success-toast\" id=\"fs-success-toast\">Thank you! Your submission has been received.<\/div>\n <\/div>\n <\/section>\n <footer id=\"site-footer\">\n <div class=\"footer-top\">\n <div class=\"footer-col\">\n <div class=\"footer-label\">Contact<\/div>\n <a href=\"mailto:hello.clearpage@gmail.com\" class=\"footer-primary-link hover-wave\">hello.clearpage@gmail.com<\/a>\n <ul class=\"footer-links mt-auto\"><li><a href=\"#\" aria-label=\"Follow us on Instagram\" class=\"hover-wave\">Instagram<\/a><\/li><li><a href=\"#\" aria-label=\"Follow us on RedNote\" class=\"hover-wave\">RedNote<\/a><\/li><li><a href=\"#\" aria-label=\"Follow us on Facebook\" class=\"hover-wave\">Facebook<\/a><\/li><\/ul>\n <\/div>\n <div class=\"footer-col footer-nav-col\">\n <div class=\"footer-label\">Navigation<\/div>\n <div class=\"footer-nav-split\">\n <ul class=\"footer-links\"><li><a href=\"#hero-section\" class=\"hover-wave smooth-scroll\">Services<\/a><\/li><li><a href=\"#livechat-showcase\" class=\"hover-wave smooth-scroll\">Works<\/a><\/li><li><a href=\"#agency-container\" class=\"hover-wave smooth-scroll\">Team<\/a><\/li><\/ul>\n <ul class=\"footer-links\"><li><a href=\"#\" class=\"hover-wave muted-link\">Blog (Coming Soon)<\/a><\/li><li><a href=\"#contact-section\" class=\"hover-wave smooth-scroll\">Creative Space<\/a><\/li><\/ul>\n <\/div>\n <\/div>\n <div class=\"footer-col\">\n <div class=\"footer-label\">Studio Note<\/div>\n <p class=\"footer-desc\">This space brings together work we've done and work we're currently doing, along with conversations that continue beyond individual projects. If it feels right, this can be the starting point.<\/p>\n <\/div>\n <\/div>\n <div class=\"footer-bottom\">\n <div class=\"footer-huge-group\"><div class=\"huge-text\">Clearpage_<\/div><div class=\"footer-image-block\" id=\"footer-creative-box\"><\/div><\/div>\n <div class=\"footer-legal\"><div class=\"copyright\">@2026 CLEARPAGE. All rights reserved.<\/div><\/div>\n <\/div>\n <\/footer>\n <\/div>\n <div class=\"global-marquee\"><div class=\"marquee-content\"><span>Clearpage Digital \/\/ Engineering Digital Experiences<\/span><span>Creative Front-End Development<\/span><span>Immersive Web Design<\/span><span>Clearpage Digital \/\/ Engineering Digital Experiences<\/span><\/div><\/div>\n <div id=\"tech-modal\" class=\"tech-modal-wrapper\">\n <div class=\"tech-modal-bg\" id=\"tech-modal-bg\"><\/div>\n <div class=\"tech-modal-content\">\n <button id=\"tech-modal-close\" class=\"tech-modal-close\">CLOSE [X]<\/button>\n <div class=\"tm-media-box\" id=\"tm-media-box\"><\/div>\n <div class=\"tm-text-box\"><div class=\"tm-typewriter\" id=\"tm-typewriter\"><\/div><\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Audio Toggle Logic\n const bgAudio = document.getElementById('bg-audio');\n const audioToggle = document.getElementById('audio-toggle');\n let isPlaying = false;\n\n audioToggle.addEventListener('click', () => {\n if (isPlaying) {\n bgAudio.pause();\n audioToggle.innerText = '[ SOUND: OFF ]';\n } else {\n bgAudio.play().catch(e => console.log(\"Audio play failed:\", e));\n audioToggle.innerText = '[ SOUND: ON ]';\n }\n isPlaying = !isPlaying;\n });\n\n let toastTimer;\n function showGlobalToast(msg) {\n const t = document.getElementById('global-toast');\n if(!t) return;\n t.innerText = msg;\n t.classList.add('show');\n clearTimeout(toastTimer);\n toastTimer = setTimeout(() => t.classList.remove('show'), 3500);\n }\n\n const mobileQuery = window.matchMedia('(max-width: 1024px)');\n const isMobile = () => mobileQuery.matches;\n\n function setupLazyModelViewers() {\n if (!isMobile()) return;\n const modelViewers = document.querySelectorAll('model-viewer');\n modelViewers.forEach(mv => {\n const originalSrc = mv.getAttribute('src');\n mv.setAttribute('data-lazy-src', originalSrc);\n mv.removeAttribute('src');\n mv.style.background = 'radial-gradient(circle, #1a1a1a 0%, #0a0a0a 100%)';\n });\n const mvObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n const mv = entry.target;\n if (entry.isIntersecting && mv.getAttribute('data-lazy-src')) {\n mv.setAttribute('src', mv.getAttribute('data-lazy-src'));\n mv.removeAttribute('data-lazy-src');\n mv.style.background = '';\n }\n });\n }, { rootMargin: '200px 0px' });\n modelViewers.forEach(mv => mvObserver.observe(mv));\n }\n\n function pauseOffscreenVideos(activeIndex) {\n if (!isMobile()) return;\n document.querySelectorAll('#media-container video').forEach((v, i) => {\n if (i === activeIndex) { v.play().catch(() => {}); } else { v.pause(); }\n });\n }\n\n \/\/ PRELOADER FIX APPLIED HERE\n document.addEventListener(\"DOMContentLoaded\", () => {\n \/\/ FIX 1: Prevent browser scroll memory from breaking the reveal\n window.scrollTo(0, 0); \n document.body.style.overflow = 'hidden';\n setupLazyModelViewers();\n \n let plCounter = { val: 0 };\n const counterEl = document.getElementById(\"pl-counter-num\");\n \n const tlPreloader = gsap.timeline({\n onComplete: () => {\n \/\/ FIX 2: Pre-hide elements and disable CSS transitions to prevent GSAP fighting & FOUC\n gsap.set(\n ['nav', '.hero-section-header', '.project-list', '.col-right', '.active-info', '.global-marquee', '.audio-toggle'], \n { opacity: 0, transition: 'none' }\n );\n \n \/\/ Now it's safe to remove the loading class (No flashing)\n document.body.classList.remove('loading');\n \n const tlOut = gsap.timeline({\n onComplete: () => { \n document.getElementById(\"preloader\").style.display = \"none\"; \n document.body.style.overflow = \"\"; \n \/\/ FIX 3: Restore CSS transitions so hover effects and active-info switching work again\n gsap.set(['nav', '.active-info', '.audio-toggle'], { clearProps: \"transition\" });\n }\n });\n \n tlOut.to(\"#preloader\", { yPercent: -100, duration: 1.2, ease: \"power4.inOut\" })\n .fromTo('nav', { y: -50, opacity: 0 }, { y: 0, opacity: 1, duration: 1, ease: \"power3.out\" }, \"-=0.8\")\n .fromTo('.hero-section-header', { y: 30, opacity: 0 }, { opacity: 1, y: 0, duration: 1, ease: \"power3.out\" }, \"-=0.8\")\n .fromTo('.project-list', { y: 30, opacity: 0 }, { opacity: 1, y: 0, duration: 1, ease: \"power3.out\" }, \"-=0.7\")\n .fromTo('.col-right', { y: 40, opacity: 0, scale: 0.95 }, { opacity: 1, y: 0, scale: 1, duration: 1.2, ease: \"power4.out\" }, \"-=0.8\")\n .fromTo('.active-info', { y: 20, opacity: 0 }, { opacity: 1, y: 0, duration: 1, ease: \"power3.out\" }, \"-=0.6\")\n .fromTo('.global-marquee', { y: 30, opacity: 0 }, { opacity: 1, y: 0, duration: 1, ease: \"power3.out\" }, \"-=0.8\")\n .fromTo('.audio-toggle', { y: 30, opacity: 0 }, { opacity: 1, y: 0, duration: 1, ease: \"power3.out\" }, \"-=0.8\");\n }\n });\n\n \/\/ FIX 4: Explicit webkit fallback in GSAP for older iOS devices\n tlPreloader.to(\"#pl-title-fill\", { \n clipPath: \"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)\", \n webkitClipPath: \"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)\",\n duration: 2.5, \n ease: \"power2.inOut\" \n }, 0);\n \n tlPreloader.to(plCounter, { val: 100, duration: 2.5, ease: \"power2.inOut\", onUpdate: () => { counterEl.innerText = Math.floor(plCounter.val).toString().padStart(2, '0'); } }, 0);\n tlPreloader.to(\"#pl-subtext\", { opacity: 1, y: 0, duration: 1, ease: \"power2.out\" }, 0.8);\n });\n\n document.querySelectorAll('a[href^=\"#\"]').forEach(link => {\n link.addEventListener('click', function(e) {\n const targetId = this.getAttribute('href');\n if (targetId === '#') return;\n const targetEl = document.querySelector(targetId);\n if (targetEl) {\n e.preventDefault();\n if(menuOpen) { menuOpen = false; hamburger.classList.remove('open'); mobileNav.classList.remove('open'); document.querySelector('nav').classList.remove('menu-open'); document.body.style.overflow = ''; }\n const offsetTop = targetEl.getBoundingClientRect().top + window.scrollY;\n window.scrollTo({ top: offsetTop, behavior: 'smooth' });\n }\n });\n });\n\n const hamburger = document.getElementById('hamburger');\n const mobileNav = document.getElementById('mobile-nav');\n let menuOpen = false;\n\n \/\/ FIX: Toggle nav.menu-open class so nav z-index (90) jumps to 100,\n \/\/ which is above mobile-nav (95), making the hamburger X button tappable\n hamburger.addEventListener('click', () => {\n menuOpen = !menuOpen;\n hamburger.classList.toggle('open', menuOpen);\n mobileNav.classList.toggle('open', menuOpen);\n document.querySelector('nav').classList.toggle('menu-open', menuOpen);\n document.body.style.overflow = menuOpen ? 'hidden' : '';\n });\n\n const projects = [\n { year: \"2026\", title: \"Borneo Mazu\", role: \"UI\/UX & Web Dev\", desc: \"A dynamic cultural festival website built to showcase the Borneo Mazu celebration through modern design and immersive community storytelling.\", tags: [\"Web Design\", \"UI\/UX Design\", \"Custom CMS\"], industry: [\"Cultural Events\", \"Digital Exhibition\"], videoUrl: \"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Recording-2026-04-15-000101.mp4\", liveLink: \"https:\/\/borneomazu.com\", tech: [ { label: \"Engine\", val: \"Interactive\", modalVideo: \"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Recording-2026-04-15-000236.mp4\" }, { label: \"AI\", val: \"Actual AI\", modalVideo: \"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-15-at-12.53.19-PM.mov\" }, { label: \"Custom Css\", val: \"Map box\", modalVideo: \"https:\/\/nicholaskongzheng.com\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-15-at-1.02.18-PM.mov\" } ] },\n { year: \"2026\", title: \"Smartmys\", role: \"\", desc: \"A creative E-commerce website selling different type of gadgets.\", tags: [\"Web Design\", \"Interactive\", \"Webflow Development\"], industry: [\"Creative E-commerce\", \"Digital Design\"], videoUrl: \"https:\/\/clearpage.my\/wp-content\/uploads\/2026\/06\/Screen-Recording-2026-06-14-at-1.51.08-PM.mov\", liveLink: \"\", tech: [ { label: \"E-commerce\", val: \"Wordpress\", modalVideo: \"https:\/\/d23dyxeqlo5psv.cloudfront.net\/big_buck_bunny.mp4\" }, { label: \"Logic\", val: \"Vue.js\", modalVideo: \"https:\/\/www.w3schools.com\/html\/mov_bbb.mp4\" }, { label: \"Graphics\", val: \"WebGL\", modalVideo: \"https:\/\/d23dyxeqlo5psv.cloudfront.net\/big_buck_bunny.mp4\" }, { label: \"Deploy\", val: \"Vercel\", modalVideo: \"https:\/\/www.w3schools.com\/html\/mov_bbb.mp4\" } ] },\n { year: \"2026\", title: \"Perfect Match Furniture\", role: \"Branding & Web\", desc: \"a furniture brand website showcasing modern home pieces through clean layouts, refined visuals, and a functional, user-friendly experience.\", tags: [\"Web Development\", \"Interactive UI\"], industry: [\"Interactive\", \"3D Model\"], videoUrl: \"https:\/\/clearpage.my\/wp-content\/uploads\/2026\/04\/Screen-Recording-2026-04-16-at-11.00.28-PM.mp4\", liveLink: \"\", tech: [ { label: \"Form\", val: \"Enquires Form\", modalVideo: \"https:\/\/www.w3schools.com\/html\/mov_bbb.mp4\" }, { label: \"Animations\", val: \"GSAP\", modalVideo: \"https:\/\/d23dyxeqlo5psv.cloudfront.net\/big_buck_bunny.mp4\" } ] }\n ];\n\n const listContainer = document.getElementById('project-list');\n const activeInfo = document.getElementById('active-info');\n const infoTable = document.getElementById('info-table');\n const mediaContainer = document.getElementById('media-container');\n const hudCluster = document.getElementById('hud-cluster');\n let activeIdx = 0, isAnimating = false, isHudLocked = false;\n\n function initHero() {\n projects.forEach((proj, i) => {\n const li = document.createElement('li'); li.className = `pl-item ${i === 0 ? 'active' : ''}`; li.dataset.idx = i;\n li.innerHTML = `<span class=\"pl-year\">${proj.year}<\/span><span class=\"pl-title\">${proj.title}<\/span><span class=\"pl-role\">${proj.role}<\/span>`;\n li.addEventListener('click', () => handleSwitch(i)); listContainer.appendChild(li);\n const mediaEl = document.createElement('div'); mediaEl.className = `media-inner ${i === 0 ? 'active' : ''}`; mediaEl.id = `media-${i}`;\n const preload = isMobile() ? (i === 0 ? 'metadata' : 'none') : 'auto';\n mediaEl.innerHTML = `<video src=\"${proj.videoUrl}\" ${i === 0 ? 'autoplay' : ''} loop muted playsinline preload=\"${preload}\" style=\"width:100%; height:100%; object-fit:cover;\"><\/video>`;\n mediaContainer.appendChild(mediaEl);\n });\n setTimeout(() => { const firstVid = document.querySelector('#media-0 video'); if(firstVid) { firstVid.muted = true; firstVid.play().catch(e => console.log(\"Autoplay blocked:\", e)); } pauseOffscreenVideos(0); }, 500);\n populateContent(0); setTimeout(() => { activeInfo.classList.add('visible'); }, 100);\n }\n\n function handleSwitch(idx) {\n if (idx === activeIdx || isAnimating || isHudLocked || isModalOpen) return;\n isAnimating = true; const direction = idx < activeIdx ? 'up' : 'down';\n document.querySelectorAll('.pl-item')[activeIdx].classList.remove('active');\n document.querySelectorAll('.pl-item')[idx].classList.add('active');\n activeInfo.classList.remove('visible');\n const outEl = document.getElementById(`media-${activeIdx}`); const inEl = document.getElementById(`media-${idx}`);\n inEl.style.transition = 'none'; inEl.classList.remove('leave-up','leave-down','active'); inEl.classList.add(direction === 'down' ? 'enter-up' : 'enter-down');\n void inEl.offsetWidth; inEl.style.transition = '';\n outEl.classList.remove('active'); outEl.classList.add(direction === 'down' ? 'leave-up' : 'leave-down');\n inEl.classList.remove('enter-up','enter-down'); inEl.classList.add('active');\n const inVid = inEl.querySelector('video');\n if (inVid) { inVid.preload = 'metadata'; inVid.currentTime = 0; inVid.muted = true; inVid.play().catch(e => console.log(\"Play failed:\", e)); }\n activeIdx = idx; pauseOffscreenVideos(idx);\n if (isMobile()) { const pill = document.querySelectorAll('.pl-item')[idx]; const container = document.querySelector('.project-list'); if (pill && container) { const scrollLeftPos = pill.offsetLeft - (container.offsetWidth \/ 2) + (pill.offsetWidth \/ 2); container.scrollTo({ left: scrollLeftPos, behavior: 'smooth' }); } }\n setTimeout(() => { populateContent(idx); activeInfo.classList.add('visible'); setTimeout(() => { isAnimating = false; }, 400); }, 300);\n }\n\n function populateContent(idx) {\n const p = projects[idx];\n infoTable.innerHTML = `<div class=\"info-row\"><div class=\"info-label\">Overview<\/div><div class=\"info-content\">${p.desc}<\/div><\/div><div class=\"info-row\"><div class=\"info-label\">Tags<\/div><div class=\"info-content\">${p.tags.map(t=>`<span>${t}<\/span>`).join('')}<\/div><\/div><div class=\"info-row\"><div class=\"info-label\">Industry<\/div><div class=\"info-content\">${p.industry.map(i=>`<span>${i}<\/span>`).join('')}<\/div><\/div>`;\n hudCluster.innerHTML = p.tech.map((t,i)=>`<div class=\"hud-badge\" data-vid=\"${t.modalVideo}\" style=\"transition-delay:${i*0.1}s\"><div class=\"hud-label\">${t.label}<\/div><div class=\"hud-value\">${t.val}<\/div><\/div>`).join('');\n document.querySelectorAll('.hud-badge').forEach(b => b.addEventListener('click', e => { e.stopPropagation(); openBasicModal(b.getAttribute('data-vid')); }));\n }\n\n document.getElementById('explore-btn').addEventListener('click', e => {\n e.preventDefault(); const currentProject = projects[activeIdx].title;\n if (currentProject === \"Clearpage HQ\") { showGlobalToast(\"Clearpage HQ tech breakdown is still in development.\"); return; }\n else if (currentProject === \"Perfect Match Furniture\") { showGlobalToast(\"Perfect Match Furniture tech breakdown is still in development.\"); return; }\n isHudLocked = true; document.getElementById('hud-overlay').classList.add('locked');\n if (isMobile()) { const videoBox = document.querySelector('.media-wrapper'); if (videoBox) { videoBox.scrollIntoView({ behavior: 'smooth', block: 'center' }); } }\n });\n document.getElementById('hud-close').addEventListener('click', e => { e.preventDefault(); isHudLocked = false; document.getElementById('hud-overlay').classList.remove('locked'); });\n \n document.getElementById('visit-btn').addEventListener('click', e => {\n e.preventDefault();\n const currentLink = projects[activeIdx].liveLink;\n if (currentLink && currentLink !== \"\") {\n window.open(currentLink, '_blank');\n } else {\n showGlobalToast(\"Due to client privacy policies, direct linking is restricted.\");\n }\n });\n\n const modalWrapper = document.getElementById('tech-modal'); const tmMediaBox = document.getElementById('tm-media-box'); const tmTypewriter = document.getElementById('tm-typewriter');\n let isModalOpen = false, typeInterval;\n function openBasicModal(src) {\n if (!src) return; isModalOpen = true; tmMediaBox.innerHTML = '';\n const v = document.createElement('video'); v.src = src; v.autoplay = true; v.loop = true; v.muted = true; v.playsInline = true;\n v.style.cssText = \"width:100%; height:100%; object-fit:contain; position:absolute; top:0; left:0;\"; tmMediaBox.appendChild(v);\n v.play().catch(e => console.log(\"Modal video play error:\", e));\n modalWrapper.classList.add('show'); tmTypewriter.innerHTML = ''; clearInterval(typeInterval);\n let text = \"System Architecture Log \/\/ Interactive engine rendering successful. Data stream stabilized.\", i = 0;\n typeInterval = setInterval(() => { tmTypewriter.innerHTML += text.charAt(i); i++; if(i >= text.length) clearInterval(typeInterval); }, 30);\n }\n function openFeatureModal(type, src, text) {\n isModalOpen = true; tmMediaBox.innerHTML = '';\n if(type === 'video') { const v = document.createElement('video'); v.src = src; v.autoplay = true; v.loop = true; v.muted = true; v.playsInline = true; v.style.cssText = \"width:100%; height:100%; object-fit:contain; position:absolute; top:0; left:0;\"; tmMediaBox.appendChild(v); v.play().catch(e => console.log(\"Feature video play error:\", e)); }\n else { const img = document.createElement('img'); img.src = src; img.style.cssText = \"width:100%; height:100%; object-fit:contain; position:absolute; top:0; left:0;\"; tmMediaBox.appendChild(img); }\n modalWrapper.classList.add('show'); tmTypewriter.innerHTML = ''; clearInterval(typeInterval);\n let i = 0; typeInterval = setInterval(() => { tmTypewriter.innerHTML += text.charAt(i); i++; if(i >= text.length) clearInterval(typeInterval); }, 40);\n }\n function closeModal() { isModalOpen = false; modalWrapper.classList.remove('show'); setTimeout(() => { tmMediaBox.innerHTML = ''; tmTypewriter.innerHTML = ''; clearInterval(typeInterval); }, 400); }\n document.getElementById('tech-modal-close').addEventListener('click', closeModal);\n document.getElementById('tech-modal-bg').addEventListener('click', closeModal);\n\n const sliderTrack = document.getElementById('slider-track'); const slides = document.querySelectorAll('.slide'); const dots = document.querySelectorAll('.dot');\n let currentSlide = 0, slideInterval;\n function goToSlide(idx) { if (idx >= slides.length) idx = 0; if (idx < 0) idx = slides.length - 1; currentSlide = idx; sliderTrack.style.transform = `translateX(-${currentSlide * (100 \/ slides.length)}%)`; dots.forEach(d => d.classList.remove('active')); dots[currentSlide].classList.add('active'); }\n function startSlider() { slideInterval = setInterval(() => goToSlide(currentSlide + 1), 5000); }\n function stopSlider() { clearInterval(slideInterval); }\n document.getElementById('slide-next').addEventListener('click', () => { goToSlide(currentSlide+1); stopSlider(); startSlider(); });\n document.getElementById('slide-prev').addEventListener('click', () => { goToSlide(currentSlide-1); stopSlider(); startSlider(); });\n dots.forEach(d => d.addEventListener('click', e => { goToSlide(parseInt(e.target.dataset.idx)); stopSlider(); startSlider(); }));\n document.getElementById('ui-panel').addEventListener('mouseenter', stopSlider);\n document.getElementById('ui-panel').addEventListener('mouseleave', startSlider);\n let sliderTouchX = 0; const uiPanel = document.getElementById('ui-panel');\n uiPanel.addEventListener('touchstart', e => { sliderTouchX = e.changedTouches[0].screenX; }, { passive: true });\n uiPanel.addEventListener('touchend', e => { const diff = sliderTouchX - e.changedTouches[0].screenX; if (Math.abs(diff) > 40) { diff > 0 ? goToSlide(currentSlide+1) : goToSlide(currentSlide-1); stopSlider(); startSlider(); } }, { passive: true });\n slides.forEach(s => s.addEventListener('click', () => openFeatureModal(s.dataset.type, s.dataset.src, s.dataset.text)));\n startSlider();\n\n let hudMouseX = -1000, hudMouseY = -1000, threeMouseX = 0, threeMouseY = 0;\n const heroContent = document.getElementById('hero-content'); const heroFooter = document.getElementById('hero-footer'); const dataPacket = document.getElementById('data-packet');\n document.addEventListener('mousemove', e => {\n if (isMobile()) return; hudMouseX = e.clientX; hudMouseY = e.clientY;\n threeMouseX = (e.clientX \/ window.innerWidth) * 2 - 1; threeMouseY = -(e.clientY \/ window.innerHeight) * 2 + 1;\n const panel = document.getElementById('ui-panel');\n if (panel) { panel.style.transform = `rotateX(${(e.clientY\/window.innerHeight-0.5)*-15}deg) rotateY(${(e.clientX\/window.innerWidth-0.5)*15}deg) translateY(-20px)`; }\n });\n let touchStartY = 0;\n window.addEventListener('touchstart', e => { if (!isMobile() && window.scrollY <= 10) touchStartY = e.changedTouches[0].screenY; }, { passive: true });\n window.addEventListener('touchmove', e => {\n if (isMobile()) return; if (isAnimating || isHudLocked || isModalOpen || menuOpen) return;\n if (window.scrollY <= 10) { const delta = touchStartY - e.changedTouches[0].screenY;\n if (delta > 50 && activeIdx < projects.length - 1) { e.preventDefault(); handleSwitch(activeIdx+1); touchStartY = e.changedTouches[0].screenY; }\n else if (delta < -50 && activeIdx > 0) { e.preventDefault(); handleSwitch(activeIdx-1); touchStartY = e.changedTouches[0].screenY; }\n }\n }, { passive: false });\n let scrollAcc = 0;\n window.addEventListener('wheel', e => {\n if (isMobile() || isHudLocked || isModalOpen) return;\n if (window.scrollY <= 10) { if (e.deltaY > 0 && activeIdx === projects.length - 1) return; e.preventDefault();\n if (isAnimating) return; scrollAcc += e.deltaY;\n if (scrollAcc > 120) { handleSwitch(activeIdx+1); scrollAcc = 0; } else if (scrollAcc < -120) { if (activeIdx > 0) handleSwitch(activeIdx-1); scrollAcc = 0; }\n } else { scrollAcc = 0; }\n }, { passive: false });\n window.addEventListener('scroll', () => {\n const sy = window.scrollY;\n if (window.innerWidth > 1024) { if (sy < window.innerHeight && heroContent && heroFooter) { const s = 1 - (sy * 0.0003), o = 1 - (sy * 0.002); heroContent.style.transform = `scale(${s})`; heroContent.style.opacity = Math.max(o, 0); heroFooter.style.opacity = Math.max(o, 0); } }\n if (dataPacket) { dataPacket.style.top = `${(sy \/ (document.body.scrollHeight - window.innerHeight)) * 100}%`; }\n });\n\n const cssObserver = new IntersectionObserver((entries, obs) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('revealed'); obs.unobserve(e.target); } }); }, { threshold: 0.1 });\n document.querySelectorAll('.observe-me').forEach(el => cssObserver.observe(el));\n\n function initProjector() {\n if (isMobile()) { const loadingText = document.getElementById('loading-text'); if (loadingText) loadingText.style.display = 'none'; return; }\n const container = document.getElementById('canvas-3d-projector'); if(!container) return;\n const loadingText = document.getElementById('loading-text');\n const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, container.clientWidth\/container.clientHeight, 0.1, 1000);\n camera.position.set(0,2,12); camera.lookAt(0,0,0);\n const renderer = new THREE.WebGLRenderer({ alpha:true, antialias:true }); renderer.setSize(container.clientWidth, container.clientHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5)); container.appendChild(renderer.domElement);\n scene.add(new THREE.AmbientLight(0xffffff, 0.8)); const tl = new THREE.DirectionalLight(0xffffff, 1.5); tl.position.set(0,10,5); scene.add(tl);\n const bl = new THREE.PointLight(0x00ffff, 4, 15); bl.position.set(0,3,0); scene.add(bl);\n const group = new THREE.Group(); scene.add(group);\n new THREE.GLTFLoader().load('https:\/\/\/clearpage.my\/wp-content\/uploads\/3d-models\/projector.glb',\n gltf => { const m = gltf.scene; m.scale.set(6,6,6); m.position.set(0,-2,0); m.rotation.set(Math.PI\/6,-Math.PI\/2,0); group.add(m); if(loadingText) loadingText.style.display='none'; },\n xhr => { if(xhr.lengthComputable && loadingText) { loadingText.innerText=`INITIALIZING 3D HARDWARE... ${Math.round((xhr.loaded\/xhr.total)*100)}%`; } },\n err => { console.error(err); if(loadingText){ loadingText.innerText=\"ERROR LOADING HARDWARE\"; loadingText.style.color=\"red\"; } }\n );\n let isVisible = false; const observer = new IntersectionObserver(e => isVisible = e[0].isIntersecting); observer.observe(container);\n (function animate(){ requestAnimationFrame(animate); if (isVisible) { group.rotation.x += 0.05*(threeMouseY*0.5-group.rotation.x); group.rotation.y += 0.05*(threeMouseX*0.5-group.rotation.y); renderer.render(scene,camera); } })();\n window.addEventListener('resize', () => { camera.aspect = container.clientWidth\/container.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(container.clientWidth,container.clientHeight); });\n }\n initProjector();\n\n const canvas = document.getElementById('bg-canvas');\n if (canvas && !isMobile()) {\n const ctx = canvas.getContext('2d'); let w, h, pX=-1000, pY=-1000, vel=0, rot=0; const spc=60; let nodes=[];\n function rsCanvas(){ w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; nodes = []; for(let i=0; i<=Math.ceil(w\/spc); i++) { for(let j=0; j<=Math.ceil(h\/spc); j++) { nodes.push({x:i*spc,y:j*spc}); } } }\n window.addEventListener('resize', rsCanvas); rsCanvas();\n (function drawHUD(){\n ctx.clearRect(0,0,w,h); vel = Math.sqrt(Math.pow(hudMouseX-pX,2)+Math.pow(hudMouseY-pY,2)); pX = hudMouseX; pY = hudMouseY; vel *= 0.95; rot += 0.01+(vel*0.001);\n ctx.strokeStyle = 'rgba(255,255,255,0.05)'; ctx.lineWidth = 1; ctx.beginPath();\n nodes.forEach(n => { ctx.moveTo(n.x-3, n.y); ctx.lineTo(n.x+3, n.y); ctx.moveTo(n.x, n.y-3); ctx.lineTo(n.x, n.y+3); }); ctx.stroke();\n if(hudMouseX > 0){\n nodes.forEach(n => { let d = Math.sqrt(Math.pow(hudMouseX-n.x,2)+Math.pow(hudMouseY-n.y,2)); if(d < 180){ let a = 1-(d\/180); ctx.beginPath(); ctx.strokeStyle=`rgba(255,255,255,${a*0.2})`; ctx.moveTo(hudMouseX,hudMouseY); ctx.lineTo(n.x,n.y); ctx.stroke(); ctx.fillStyle=`rgba(255,255,255,${a*0.6})`; ctx.fillRect(n.x-2,n.y-2,4,4); } });\n ctx.beginPath(); ctx.strokeStyle = 'rgba(255,255,255,0.06)'; ctx.moveTo(0, hudMouseY); ctx.lineTo(w, hudMouseY); ctx.moveTo(hudMouseX, 0); ctx.lineTo(hudMouseX, h); ctx.stroke();\n let r = Math.min(25+(vel*0.5),60); ctx.save(); ctx.translate(hudMouseX,hudMouseY); ctx.rotate(rot); ctx.beginPath(); ctx.strokeStyle = 'rgba(255,255,255,0.4)';\n ctx.moveTo(-r, -r+10); ctx.lineTo(-r, -r); ctx.lineTo(-r+10, -r); ctx.moveTo(r-10, -r); ctx.lineTo(r, -r); ctx.lineTo(r, -r+10); ctx.moveTo(r, r-10); ctx.lineTo(r, r); ctx.lineTo(r-10, r); ctx.moveTo(-r+10, r); ctx.lineTo(-r, r); ctx.lineTo(-r, r-10); ctx.stroke();\n ctx.beginPath(); ctx.strokeStyle = 'rgba(255,255,255,0.15)'; ctx.setLineDash([4,6]); ctx.arc(0,0,r-8,0,Math.PI*2); ctx.stroke(); ctx.restore();\n ctx.font = \"10px 'JetBrains Mono',monospace\"; ctx.fillStyle = \"rgba(255,255,255,0.5)\"; ctx.textAlign = \"left\"; let dX = hudMouseX+35, dY = hudMouseY+35;\n ctx.beginPath(); ctx.strokeStyle = \"rgba(255,255,255,0.2)\"; ctx.setLineDash([]); ctx.moveTo(hudMouseX+10, hudMouseY+10); ctx.lineTo(dX-5, dY-5); ctx.lineTo(dX-5, dY+25); ctx.stroke();\n ctx.fillText(`X: ${hudMouseX.toFixed(1)}`, dX, dY); ctx.fillText(`Y: ${hudMouseY.toFixed(1)}`, dX, dY+12); ctx.fillText(`V: ${vel.toFixed(2)}px\/s`, dX, dY+24);\n }\n requestAnimationFrame(drawHUD);\n })();\n }\n\n document.addEventListener(\"DOMContentLoaded\", () => {\n setTimeout(() => {\n gsap.registerPlugin(ScrollTrigger); const mobile = isMobile();\n const text = \"Established in 2026, Clearpage Digital is a premium engineering studio working on digital products and web applications. Our approach is built around deep architecture, fluid systems, and immersive design decisions. We focus on creating interfaces and experiences that are highly performant, functional, and visually striking. Every system is shaped through thoughtful logic and precise technical execution, resulting in digital work that feels alive and considered.\";\n const tc = document.getElementById('reveal-text-container');\n if(tc) { tc.innerHTML = text.split(' ').map(w => `<span class=\"scroll-word\">${w}<\/span>`).join(' ');\n gsap.to('.scroll-word', { opacity: 1, stagger: 0.1, scrollTrigger: { trigger: '#scroll-reveal-section', start: mobile ? 'top 35%' : 'top 20%', end: mobile ? '+=150%' : '+=200%', pin: true, scrub: 0.5 } }); }\n const ac = document.getElementById(\"agency-container\");\n if(ac) { gsap.timeline({ scrollTrigger: { trigger: \"#agency-container\", start: \"top top\", end: mobile ? \"+=3500\" : \"+=2600\", pin: true, scrub: 1 } }).to(\".cards-conveyor\", { y: mobile ? \"-300vh\" : \"-240vh\", ease: \"none\" }); }\n ScrollTrigger.refresh();\n }, 500);\n });\n\n const step1 = document.getElementById('fs-step-1'); const step2 = document.getElementById('fs-step-2');\n const toStep2Btn = document.getElementById('fs-to-step-2'); const toStep1Btn = document.getElementById('fs-to-step-1');\n const submitBtn = document.getElementById('fs-submit'); const nameInput = document.getElementById('fs-name');\n const emailInput = document.getElementById('fs-email'); const formBox = document.getElementById('fs-form-box');\n const successToast = document.getElementById('fs-success-toast');\n const budgetPills = document.querySelectorAll('.budget-pill'); let selectedBudget = \"$5k - $10k\";\n\n toStep2Btn.addEventListener('click', () => {\n if (!nameInput.value || !emailInput.value) { nameInput.style.borderBottomColor = \"red\"; emailInput.style.borderBottomColor = \"red\";\n setTimeout(() => { nameInput.style.borderBottomColor = \"\"; emailInput.style.borderBottomColor = \"\"; }, 1500); return; }\n step1.classList.remove('active'); setTimeout(() => { step2.classList.add('active'); }, 50);\n });\n toStep1Btn.addEventListener('click', () => { step2.classList.remove('active'); setTimeout(() => { step1.classList.add('active'); }, 50); });\n budgetPills.forEach(pill => { pill.addEventListener('click', () => { budgetPills.forEach(p => p.classList.remove('active')); pill.classList.add('active'); selectedBudget = pill.getAttribute('data-val'); }); });\n\n \/\/ FIX: WhatsApp submission \u2014 formats all fields and opens wa.me deep link\n submitBtn.addEventListener('click', () => {\n const details = document.getElementById('fs-details').value;\n if (!details) {\n document.getElementById('fs-details').style.borderBottomColor = \"red\";\n setTimeout(() => { document.getElementById('fs-details').style.borderBottomColor = \"\"; }, 1500);\n return;\n }\n submitBtn.innerText = \"Sending...\";\n setTimeout(() => {\n const name = document.getElementById('fs-name').value;\n const email = document.getElementById('fs-email').value;\n const company = document.getElementById('fs-company').value || 'Not provided';\n const budget = selectedBudget;\n const projectDetails = details;\n\n const message = `--- New Enquiry from Clearpage.Digital ---\\nName: ${name}\\nEmail: ${email}\\nCompany: ${company}\\nBudget: ${budget}\\nProject Details: ${projectDetails}`;\n\n const waUrl = 'https:\/\/wa.me\/60106638820?text=' + encodeURIComponent(message);\n window.open(waUrl, '_blank');\n\n formBox.classList.add('hidden');\n successToast.classList.add('show');\n }, 800);\n });\n\n function initFooterCreative() {\n if (isMobile()) return;\n const container = document.getElementById('footer-creative-box'); if (!container) return;\n const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(50, container.clientWidth \/ container.clientHeight, 0.1, 100); camera.position.z = 3.5;\n const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setSize(container.clientWidth, container.clientHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); container.appendChild(renderer.domElement);\n const geo = new THREE.TorusKnotGeometry(1, 0.35, 120, 16); const mat = new THREE.MeshBasicMaterial({ color: 0x888888, wireframe: true, transparent: true, opacity: 0.5 }); const mesh = new THREE.Mesh(geo, mat); scene.add(mesh);\n let targetSpeed = 0.002; let currentSpeed = 0.002;\n container.addEventListener('mouseenter', () => { targetSpeed = 0.015; }); container.addEventListener('mouseleave', () => { targetSpeed = 0.002; });\n let isVisible = false; const observer = new IntersectionObserver(e => isVisible = e[0].isIntersecting); observer.observe(container);\n function animate() { requestAnimationFrame(animate); if (isVisible) { currentSpeed += (targetSpeed - currentSpeed) * 0.05; mesh.rotation.x += currentSpeed; mesh.rotation.y += currentSpeed * 1.2; renderer.render(scene, camera); } } animate();\n window.addEventListener('resize', () => { if(!container.clientWidth) return; camera.aspect = container.clientWidth \/ container.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(container.clientWidth, container.clientHeight); });\n }\n\n initHero();\n initFooterCreative();\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Clearpage Digital | Premium Web Design & Development Studio [ SOUND: OFF ] Message goes here clearpage.digital clearpage.digital Websites for brands and creatives whovalue architecture and perception. 00 Clearpage.Digital Work Products Team Let’s Talk Work Products Team Let’s Talk FacebookInstagram Selected Works \/\/ Engineering Digital Experiences – Premium Web Design & Custom Web Development Studio […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Home - ClearPage<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/clearpage.my\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - ClearPage\" \/>\n<meta property=\"og:description\" content=\"Clearpage Digital | Premium Web Design & Development Studio [ SOUND: OFF ] Message goes here clearpage.digital clearpage.digital Websites for brands and creatives whovalue architecture and perception. 00 Clearpage.Digital Work Products Team Let’s Talk Work Products Team Let’s Talk FacebookInstagram Selected Works \/\/ Engineering Digital Experiences – Premium Web Design & Custom Web Development Studio […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/clearpage.my\/\" \/>\n<meta property=\"og:site_name\" content=\"ClearPage\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-14T06:15:03+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"35 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/clearpage.my\\\/\",\"url\":\"https:\\\/\\\/clearpage.my\\\/\",\"name\":\"Home - ClearPage\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/clearpage.my\\\/#website\"},\"datePublished\":\"2026-04-15T10:21:10+00:00\",\"dateModified\":\"2026-06-14T06:15:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/clearpage.my\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/clearpage.my\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/clearpage.my\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/clearpage.my\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/clearpage.my\\\/#website\",\"url\":\"https:\\\/\\\/clearpage.my\\\/\",\"name\":\"ClearPage\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/clearpage.my\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n","yoast_head_json":{"title":"Home - ClearPage","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/clearpage.my\/","og_locale":"en_US","og_type":"article","og_title":"Home - ClearPage","og_description":"Clearpage Digital | Premium Web Design & Development Studio [ SOUND: OFF ] Message goes here clearpage.digital clearpage.digital Websites for brands and creatives whovalue architecture and perception. 00 Clearpage.Digital Work Products Team Let’s Talk Work Products Team Let’s Talk FacebookInstagram Selected Works \/\/ Engineering Digital Experiences – Premium Web Design & Custom Web Development Studio […]","og_url":"https:\/\/clearpage.my\/","og_site_name":"ClearPage","article_modified_time":"2026-06-14T06:15:03+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"35 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/clearpage.my\/","url":"https:\/\/clearpage.my\/","name":"Home - ClearPage","isPartOf":{"@id":"https:\/\/clearpage.my\/#website"},"datePublished":"2026-04-15T10:21:10+00:00","dateModified":"2026-06-14T06:15:03+00:00","breadcrumb":{"@id":"https:\/\/clearpage.my\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/clearpage.my\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/clearpage.my\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/clearpage.my\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/clearpage.my\/#website","url":"https:\/\/clearpage.my\/","name":"ClearPage","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/clearpage.my\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/clearpage.my\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clearpage.my\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clearpage.my\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clearpage.my\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clearpage.my\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":80,"href":"https:\/\/clearpage.my\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":1090,"href":"https:\/\/clearpage.my\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/1090"}],"wp:attachment":[{"href":"https:\/\/clearpage.my\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}