@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Noto+Serif+SC:wght@300;500;700&display=swap');
:root{--accent-cyan: #00f2fe;--accent-purple: #a855f7;--accent-gold: #fbbf24;--accent-emerald: #10b981;--deep-space: #020205;--fb-color: #1877F2;--ig-start: #f09433; --ig-end: #bc1888;--tk-color: #00f2fe;--dy-color: #ff0050;--xhs-color: #ff2442;}
body{font-family: 'Inter',sans-serif;color: #fff;overflow-x: hidden;scroll-behavior: smooth;}
html{scroll-padding-top: 80px;}

.social-top-bar {height: 48px; width: 100%; position: fixed; top: 0; left: 0; z-index: 100;background: rgba(0, 0, 0, 0.98);border-bottom: 1px solid rgba(255, 255, 255, 0.15);display: flex; justify-content: center; align-items: center; gap: 24px; backdrop-filter: blur(20px);}
.social-link {display: flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 20px;text-decoration: none;transition: all 0.3s ease; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);}
.social-link:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.5);}
.social-icon { width: 18px; height: 18px; fill: currentColor; }
.social-text { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; color: #fff; }

.link-fb { color: var(--fb-color); border-color: rgba(24, 119, 242, 0.3); }
.link-ig { color: #E1306C; border-color: rgba(225, 48, 108, 0.3); }
.link-tk { color: #fff; border-color: rgba(0, 242, 254, 0.3); }
.link-dy { color: #fff; border-color: rgba(255, 0, 80, 0.3); }
.link-xhs { color: var(--xhs-color); border-color: rgba(255, 36, 66, 0.3); }

nav {position: fixed; top: 0; left: 0; width: 100%; height: 80px; z-index: 90;padding: 0 40px; display: flex; justify-content: space-between; align-items: center;background: rgba(5, 5, 7, 0.8); backdrop-filter: blur(10px);border-bottom: 1px solid rgba(255,255,255,0.05); transition: all 0.3s;}
.nav-left { display: flex; align-items: center; gap: 24px;}
nav .nav-left .text-xl{font-size: 1.65em;}
.search-btn { color: rgba(255,255,255,0.6); transition: all 0.3s; cursor: pointer; padding: 8px; border-radius: 50%; }
.search-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-item {font-size: 16px; font-weight: 700; color: #fff;text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s; position: relative; padding: 8px 0;white-space: nowrap;}
.nav-item:hover { color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, 0.5); }
.nav-item::after {content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;background: var(--accent-cyan); transition: width 0.3s;}
.nav-item:hover::after { width: 100%; }

.hero-section{position: relative; height: 100vh; width: 100%;display: flex; align-items: center; justify-content: center;overflow: hidden;background: #000;perspective: 1200px;}
.universe-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, #0F172A 0%, #000000 80%); z-index: 0; }
.stars {position: absolute; top: 0; left: 0; width: 100%; height: 100%;background-image: radial-gradient(1px 1px at 10% 10%, white, transparent), radial-gradient(1px 1px at 50% 50%, white, transparent);background-size: 600px 600px; animation: stars-move 100s linear infinite; opacity: 0.8;}
@keyframes stars-move { from { transform: translateY(0); } to { transform: translateY(-600px); } }
.blue-nebula {position: absolute; top: 50%; left: 50%; width: 100vw; height: 100vh;transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(0, 140, 255, 0.15) 0%, rgba(0,0,0,0) 65%);filter: blur(90px); z-index: 1; pointer-events: none;}
#bg-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.products-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; }

.css-tablet {position: relative; width: 680px; height: 460px; background: #0a0a0a; border-radius: 36px;box-shadow: inset 0 0 0 1px #444, 0 0 0 2px #111, 0 40px 100px rgba(0,0,0,0.9);transform: rotateX(15deg) rotateY(-5deg); animation: tablet-float 10s ease-in-out infinite;display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: auto;}
.tablet-screen {width: 620px; height: 400px; background-color: #050505; border-radius: 24px; overflow: hidden; position: relative;background-image: url('https://images.unsplash.com/photo-1558655146-d09347e0d7a8?q=80&w=1200&auto=format&fit=crop');background-size: cover; background-position: center; filter: brightness(1.2) contrast(1.1);box-shadow: 0 0 60px rgba(0, 242, 254, 0.2);}
.tablet-screen::after {content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 40%, transparent 100%);pointer-events: none; z-index: 30;}
.screen-ui-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; font-family: 'JetBrains Mono', monospace; }
.scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: rgba(0, 242, 254, 0.8); box-shadow: 0 0 10px rgba(0, 242, 254, 0.8); animation: scan-down 3s linear infinite; opacity: 0.5; }
@keyframes scan-down { 0% { top: 0%; opacity: 0; } 50% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.ui-top-bar { position: absolute; top: 20px; left: 20px; right: 20px; height: 30px; border-bottom: 1px solid rgba(255,255,255,0.2); display: flex; justify-content: space-between; align-items: center; color: rgba(0, 242, 254, 0.8); font-size: 10px; }
.ui-data { position: absolute; bottom: 20px; left: 20px; color: rgba(0, 242, 254, 0.6); font-size: 8px; line-height: 1.5; }
.corner { position: absolute; width: 10px; height: 10px; border: 1px solid rgba(255,255,255,0.4); }
.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; } .tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; } .bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; } .br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
#three-screen-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; mix-blend-mode: hard-light; }

.pro-stylus {position: absolute; width: 14px; height: 380px; border-radius: 7px;background: linear-gradient(to right, #1a1a1a 0%, #333 30%, #444 50%, #333 70%, #111 100%);right: -120px; top: 40px; transform: rotate(5deg) translateZ(60px);box-shadow: -20px 20px 50px rgba(0,0,0,0.9), inset 0 0 2px rgba(255,255,255,0.05);z-index: 12; animation: stylus-float 8s ease-in-out infinite alternate;}
@keyframes tablet-float { 0%, 100% { transform: translateY(0) rotateX(15deg) rotateY(-5deg); } 50% { transform: translateY(-20px) rotateX(18deg) rotateY(-2deg); } }
@keyframes stylus-float { 0%, 100% { transform: rotate(5deg) translateY(0) translateZ(60px); } 50% { transform: rotate(8deg) translateY(-25px) translateZ(60px); } }
#three-canvas-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 600px; z-index: 20; pointer-events: none; mix-blend-mode: screen; }
.hero-content { position: absolute; bottom: 12%; left: 0; width: 100%; text-align: center; z-index: 30; pointer-events: none; }
.text-glow { text-shadow: 0 0 40px rgba(0, 242, 254, 0.4); }
.evolution-status { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; gap: 30px; align-items: flex-end; }
.status-tag { font-size: 10px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.2); transition: 0.5s; cursor: default; }
.status-tag.active { color: #00f2fe; text-shadow: 0 0 15px rgba(0, 242, 254, 0.8); transform: translateX(-10px); }
.status-tag.active::after { content: '●'; position: absolute; right: -20px; color: var(--accent-cyan); }

.product-section{padding: 60px 5%;border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; z-index: 10; }
.product-card{max-width: 1200px;margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.model-frame{width: 100%;height: 570px;background: rgba(255,255,255,0.03);border: 1px solid rgba(255,255,255,0.08);padding: 15px;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.model-frame video,.model-frame img{max-width: 100%;max-height: 100%;}

.canvas3d { width: 100%; height: 100%; cursor: grab; }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 32px; }
.spec-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 16px; border-radius: 12px; transition: 0.3s; }
.spec-item:hover { border-color: var(--card-glow); background: rgba(0, 242, 254, 0.05); }
.spec-label { font-size: 10px; color: rgba(255,255,255,0.6); text-transform: uppercase; display: block; margin-bottom: 4px; }
.spec-value { font-size: 14px; font-weight: 700; color: #fff; }
.card-purple { --card-glow: var(--accent-purple); }
.card-cyan { --card-glow: var(--accent-cyan); }
.card-emerald { --card-glow: var(--accent-emerald); }
.card-gold { --card-glow: var(--accent-gold); }

.philosophy-section{padding: 80px 0 0;text-align: center;position: relative;z-index: 10;border-top: 1px solid rgba(255,255,255,0.05);}
.philosophy-content{max-width: 800px; margin: 0 auto; padding: 0 24px; }
.philosophy-title { font-family: 'Cinzel', serif; font-size: 48px; font-weight: 400; letter-spacing: 2px; color: #fff; margin-bottom: 16px; background: linear-gradient(to right, #fff, #999); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.philosophy-subtitle { font-size: 12px; font-weight: 700; letter-spacing: 0.4em; color: var(--accent-cyan); text-transform: uppercase; margin-bottom: 60px; opacity: 0.8; }
.philosophy-text { font-family: 'Noto Serif SC', serif; font-size: 18px; line-height: 2.2; color: rgba(255,255,255,0.8); font-weight: 300; }
.philosophy-divider { width: 1px; height: 80px; background: linear-gradient(to bottom, transparent, var(--accent-cyan), transparent); margin: 40px auto 0; }

.about-section{padding: 80px 0;position: relative;overflow: hidden; display: flex; align-items: center; justify-content: center;min-height: 600px; border-top: 1px solid rgba(255,255,255,0.05);}
#earth-canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.about-content { position: relative; z-index: 10; text-align: center; max-width: 950px;padding: 0 40px;text-shadow: 0 0 20px rgba(0,0,0,0.8); }
.glow-title { color: #fff; text-shadow: 0 0 30px rgba(0, 242, 254, 0.6); }

footer{background: linear-gradient(to bottom,transparent 0%,#000000 100%);padding: 80px 5% 40px;position: relative;z-index: 10;}
.footer-link{display: flex;align-items: center;gap: 10px;color: rgba(255,255,255,1); text-decoration: none; margin-bottom: 15px; transition: 0.3s; }
.footer-link:hover { color: #fff; transform: translateX(5px); }
.cert-container { display: flex; gap: 30px; justify-content: flex-end; align-items: flex-start; margin: 30px -30px 0 0;}
.cert-icon { height: 48px; width: auto; color: #9ca3af; fill: currentColor; transition: all 0.4s ease; }
.cert-icon:hover { color: #00f2fe; filter: drop-shadow(0 0 10px rgba(0, 242, 254, 0.4)); transform: translateY(-3px); }
.nb-text { font-size: 10px; font-weight: bold; fill: currentColor;text-align: center;}
.logo-rohs:hover { filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.4)); color: #10b981; }

.view-specs-btn { display: inline-flex; align-items: center; margin-top: 24px; padding: 12px 28px; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all 0.3s; background: transparent; }
.view-specs-btn svg { width: 14px; height: 14px; margin-left: 8px; transition: transform 0.3s; }
.view-specs-btn:hover { transform: translateX(5px); background: rgba(255,255,255,0.05); }
.btn-purple:hover { border-color: var(--accent-purple); box-shadow: 0 0 15px rgba(168, 85, 247, 0.2); }
.btn-cyan:hover { border-color: var(--accent-cyan); box-shadow: 0 0 15px rgba(0, 242, 254, 0.2); }
.btn-emerald:hover { border-color: var(--accent-emerald); box-shadow: 0 0 15px rgba(16, 185, 129, 0.2); }
.btn-gold:hover { border-color: var(--accent-gold); box-shadow: 0 0 15px rgba(251, 191, 36, 0.2); }

.cyber-grid-container{width: 100%;height: 100vh;position: fixed;top: 0;left: 0;perspective: 1000px;overflow: hidden;background: radial-gradient(ellipse at 50% 0%, #0f172a 0%, #030303 90%);}
.cyber-grid{position: absolute;top: 0;left: -50%;width: 200%;height: 200%;background-image: linear-gradient(rgba(34, 211, 238, 0.2) 1px, transparent 1px),linear-gradient(90deg, rgba(6, 182, 212, 0.2) 1px, transparent 1px);background-size: 80px 80px;transform: rotateX(60deg);transform-origin: 50% 0;animation: gridMove 20s linear infinite;mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0) 90%);-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0) 90%);}
@keyframes gridMove{0%{transform: rotateX(60deg) translateY(0);}100% {transform: rotateX(60deg) translateY(80px);}}

select,option,input,button,textarea{border: none;background: none;box-shadow: none;outline: none;resize: none;}
.search-item{position: relative;}
.search-item .search-form{opacity: 0;visibility: hidden;width: 240px;height: 38px;border-radius: 50px;overflow: hidden;position: absolute;top: 50%;transform: translateY(-50%);left: -202px;transition: all 0.5s;}
.search-item .search-form input{width: 100%;height: 38px;font-size: 14px;color: #000;padding: 0 45px 0 15px;background: #fff;}
.search-item .search-form .search-btn{width: 38px;height: 38px;background: rgba(0,0,0,0.5);position: absolute;top: 0;right: 0;z-index: 99;}
.search-item:hover .search-form{opacity: 1;visibility: inherit;}
.body-section-top{padding-top: 80px;position: relative;z-index: 9;}
.bannerWidth{width: 100%;max-width: 1200px;margin: 0 auto;overflow: hidden;}
.bannerWidth .bannerswiper{overflow: hidden;position: relative;}
.bannerWidth .bannerswiper .swiper-pagination-bullets{bottom: 4px;}
.bannerWidth .bannerswiper .swiper-pagination-bullets .swiper-pagination-bullet{width: 12px;height: 3px;margin: 2px;border-radius: 0;background: #fff;}
.product-card.proshow{margin: 60px auto;display: block;}
.product-card.proshow .leading-relaxed img{max-width: 100%;}
.social-bar-you{width: 45px;height: auto;position: fixed;top: 50%;right: 0;transform: translateY(-50%);z-index: 99;}
.social-bar-you a.links{width: 145px;margin: 4px 0;cursor: pointer;display: flex;flex-wrap: wrap;position: relative;transition: all 0.5s;}
.social-bar-you a.links:hover{transform: translateX(-100px);}
.social-bar-you a.links .img{width: 45px;height: 45px;display: flex;align-items: center;justify-content: center;background: #121212;}
.social-bar-you a.links .img img{width: 22px;}
.social-bar-you a.links .img svg{width: 22px;height: 22px;}
.social-bar-you a.contactus .img svg{width: 28px;height: 28px;}
.social-bar-you a.links .txt{width: 100px;height: 45px;line-height: 45px;font-size: 14px;color: #fff;text-align: center;background: #232323;}
.copyright-tracking{font-size: 14px !important;color: rgba(255,255,255,1) !important;}
.copyright-tracking a{margin-left: 8px;font-size: 15px;color: rgba(255,255,255,1);}
.copyright-tracking a:first-child{margin-left: 0;}
.copyright-tracking a:hover{color: #fff;}

.statement-width{width: 100%;max-width: 1200px;margin: 60px auto;}
.statement-width .box-item-title{font-size: 42px;font-weight: 700;text-align: center;color: #fff;}
.statement-width .content-width img{max-width: 100% !important;height: auto !important;}
.statement-width .content-width table,.statement-width .content-width video{width: 100% !important;height: auto !important;margin: 10px 0 !important;}
.statement-width .content-text{margin-top: 40px;font-size: 16px;line-height: 2;color: #fff;}
.statement-width .text-p p{margin-bottom: 0;}
.w-100{width: 100%;}
.about-us-video{margin: 80px 0 40px;position: relative;z-index: 9;}

.language{margin-left: 20px;position: relative;}
.language .icon{height: 80px;line-height: 80px;padding-left: 28px;font-size: 16px;color: #fff;cursor: pointer;background: url('../images/language.png') no-repeat left center/20px;}
.language .list{min-width: 100%;background: #fff;position: absolute;left: 0;top: 100%;z-index: 10;opacity: 0;overflow: hidden;visibility: hidden;transform: translateY(10px);transition: transform 0.3s ease;}
.language .list a{display: block;white-space: nowrap;font-size: 15px;line-height: 36px;padding: 0 15px;color: #333;}
.language:hover .list{opacity: 1;visibility: visible;transform: translateY(0);}
.language .list a:hover{background: #000;color: #fff;}

.proshow-row-flex-wrap{display: flex;flex-wrap: wrap;justify-content: space-between;}
.pro-show-con-width{width: 48%;}
.pro-show-con-width h3{font-size: 20px;font-weight: 700;margin-bottom: 10px;}
.pro-show-con-width .content-width img{max-width: 100%;height: auto;}
.pro-show-con-width .content-text{line-height: 1.8;}

.online-inquiry-form{display: none;width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999999;background-color: #0009;backdrop-filter: blur(12px);}
.online-inquiry-form .messageForm{width: 100%;max-width: 900px;max-height: 100vh;overflow-y: auto;font-size: 16px;background: #fff;color: #333;border-radius: 20px;padding: 30px 50px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.online-inquiry-form .messageForm .form-top{margin-bottom: 20px;}
.online-inquiry-form .messageForm .form-top .title{font-weight: 700;margin-bottom: 6px;}
.online-inquiry-form .messageForm .form-top .title span{color: #cc3b28;}
.online-inquiry-form .messageForm .form-top input{width: 100%;height: 40px;padding: 0 15px;background: #f3f3f3;border: 1px solid #ccc;border-radius: 6px;box-shadow: 2px 2px 6px rgba(0,0,0,0.1) inset;appearance: none;}
.online-inquiry-form .messageForm .form-top textarea{width: 100%;height: 120px;padding: 10px;border-radius: 6px;background: #f3f3f3;border: 1px solid #ccc;box-shadow: 2px 2px 6px rgba(0,0,0,0.1) inset;}
.online-inquiry-form .messageForm .form-top input:focus,.online-inquiry-form .messageForm .form-top textarea:focus{border-color: #0092e1;}
.online-inquiry-form .messageForm .form-end{margin-top: 40px;display: flex;flex-wrap: wrap;justify-content: center;}
.online-inquiry-form .messageForm .contacthide{margin-right: 40px;width: 120px;height: 40px;line-height: 40px;text-align: center;background: #eee;color: #333;border-radius: 50px;cursor: pointer;}
.online-inquiry-form .messageForm .submit{width: 120px;height: 40px;line-height: 40px;text-align: center;background: #000;color: #fff;border-radius: 50px;}