/* Mobile CN logo 1.6x, center sections, hide updates QR, refine hero list */
@media (max-width:768px){html[lang="zh-CN"] .nav-logo img.brand-logo{height:35.2px}}
@media (max-width:768px){.download .section-title,.platform .section-title,.updates .section-title{text-align:center}.download-container{justify-content:center;align-items:center}.download-text{text-align:center;margin-right:0}.platform-content{align-items:center!important;justify-items:center!important}.platform-text{text-align:center}.updates-content{align-items:center}.updates-qr{display:none!important}}
@media (max-width:768px){.download .section-title.left,.platform .section-title.left,.updates .section-title.left{text-align:center!important}.download .section-title.left::after,.platform .section-title.left::after,.updates .section-title.left::after{margin-left:auto!important;margin-right:auto!important}}
@media (max-width:768px){.download .download-list{display:inline-block;text-align:left;margin-left:0!important}}
@media (max-width:768px){.updates-content{align-items:center!important}}
@media (max-width:768px){a.updates-card[href*="qr_placeholder"]{display:none!important}}
/* Late overrides to beat earlier @media(max-width:960px) flex-start rules */
@media (max-width:960px){.download-container{align-items:center!important;justify-content:center!important}.platform-content{align-items:center!important;justify-items:center!important}.download-text{text-align:center!important;margin-right:0!important}.download .section-title.left,.platform .section-title.left,.updates .section-title.left{text-align:center!important}.download .section-title.left::after,.platform .section-title.left::after,.updates .section-title.left::after{margin-left:auto!important;margin-right:auto!important}.download .download-list{display:inline-block!important;text-align:left!important;margin-left:0!important}}
@media (max-width:768px){.ai-text{text-align:center!important}}
@media (max-width:768px){.updates .updates-text{text-align:center!important}}
.video-hero .hero-list li{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:.1rem 0!important;white-space:normal!important;text-overflow:clip!important}
.video-hero .hero-list li::before{content:"•"!important;position:static!important;width:auto!important;height:auto!important;margin-right:.5rem!important;background:none!important;transform:none!important;color:var(--primary)!important}
.video-hero .hero-list li::after{display:none!important}
.video-hero .hero-list li:hover{box-shadow:none!important;transform:none!important;background:transparent!important}
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease, filter .6s ease; will-change: opacity, transform; } .reveal[data-anim="fade"] { transform: translateY(8px); filter: blur(2px); } .reveal[data-anim="up"] { transform: translateY(28px); } .reveal[data-anim="scale"] { transform: translateY(8px) scale(.98); } .reveal.show { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } .video-hero .hero-video { transform: translateZ(0); will-change: transform; transition: transform .6s ease; } .video-hero.parallax .hero-video { transform: scale(1.04) translateY(-2%); } .product-hero .icon-grid li { background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; } .product-hero .icon-grid li img { filter: none; } :root { --primary: #3388FF; --secondary: #D377CD; --accent: #46EBD5; --light: #0b0b0f; --dark: #e5e7eb; --surface: #121318; --border: #1f2430; --muted: #151923; --shadow: rgba(0, 0, 0, 0.35); --transition: all 0.3s ease; --hover: #66a8ff; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; background-color: var(--light); color: var(--dark); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } html { overflow-x: hidden; } .main-content, section, header, footer { overflow-x: hidden; } h1, h2, h3, h4, p, li, .hero-tagline, .product-description, .platform-label, .robot-label { word-break: break-word; overflow-wrap: anywhere; } a { color: var(--primary); text-decoration: none; transition: var(--transition); } a:hover { color: var(--hover); } img { max-width: 100%; display: block; } .container { max-width: 1180px; margin: 0 auto; padding: 0 20px; } .flex-between { display: flex; justify-content: space-between; } .center-y { align-items: center; } .top-nav { background-color: rgba(0, 0, 0, 0.6); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); position: sticky; top: 0; width: 100%; z-index: 100; } .nav-container { display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 1rem 24px; } .lang-switch { display: flex; gap: 0.4rem; margin-left: 1rem; align-items: center; } .lang-btn { background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--dark); border-radius: 999px; padding: 0.15rem 0.5rem; cursor: pointer; font-size: 0.85rem; line-height: 1.2; } .lang-btn.active { background: rgba(255,255,255,0.12); } .nav-container { gap: 0.75rem; } .nav-links { margin-left: auto; } .lang-switch:not(.mobile) { order: 3; } .mobile .lang-btn { width: 64px; } .nav-logo img { height: 42.6667px; width: auto; display: block; } body.lang-en .nav-logo img.brand-logo, body.lang-ja .nav-logo img.brand-logo { height: 20px; } html[lang="en"] .nav-logo img.brand-logo, html[lang="ja"] .nav-logo img.brand-logo { height: 20px; } @media (max-width: 768px) { .lang-switch:not(.mobile) { display: none !important; } .nav-logo img.brand-logo { height: 22px; } body.lang-en .nav-logo img.brand-logo, body.lang-ja .nav-logo img.brand-logo { height: 20px; } html[lang="en"] .footer-left img.brand-logo, html[lang="ja"] .footer-left img.brand-logo { height: 28px; } } .nav-links { display: flex; gap: 2rem; } .nav-links .nav-item { font-size: 1.1rem; color: var(--dark); position: relative; font-weight: 500; } .nav-links .nav-item.active::after, .nav-links .nav-item:hover::after { content: ""; position: absolute; bottom: -6px; left: 0; width: 100%; height: 2px; background-color: var(--primary); } .menu-toggle { background: none; border: none; font-size: 1.8rem; color: var(--dark); cursor: pointer; display: none; } .mobile-nav { position: fixed; inset: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.96); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); display: none; flex-direction: column; justify-content: center; align-items: center; transform: translateY(-100%); transition: transform .3s ease, opacity .3s ease; opacity: 0; pointer-events: none; z-index: 1000; padding-bottom: calc(env(safe-area-inset-bottom) + 84px); } .mobile-nav.active { display: flex; transform: translateY(0); opacity: 1; pointer-events: auto; } .mobile-nav a { font-size: 1.4rem; margin: 0.8rem 0; color: #fff; font-weight: 600; } .mobile-nav .lang-switch.mobile { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 24px); display: flex; justify-content: center; gap: 0.6rem; } body.nav-open .nav-links { display: none !important; } body.nav-open { overflow: hidden; } @media (max-width: 768px) { .nav-links { display: none; } .menu-toggle { display: block; } } .btn { display: inline-block; padding: 0.6rem 1.4rem; border-radius: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; position: relative; overflow: hidden; transition: var(--transition); text-align: center; } .btn-primary { background-color: #000; color: #fff; border: none; border-radius: 8px; box-shadow: 0 2px 4px var(--shadow); } .btn-primary.disabled, .btn-primary[aria-disabled="true"] { opacity: 0.5; filter: grayscale(0.2); cursor: not-allowed; pointer-events: none; } @media (max-width: 768px) { .download-buttons { display: grid !important; grid-template-columns: 1fr !important; gap: 0.8rem; } .download-buttons > a { display: block; } .download-buttons .btn { display: block; width: 100% !important; flex: 0 0 100% !important; border-radius: 999px; min-height: 48px; padding: 0.9rem 1rem; font-size: 1rem; line-height: 1.2; text-wrap: balance; } .download-buttons .btn.btn-primary { background: #fff; color: #000; border: 1px solid var(--border); } .download-buttons .btn.btn-primary.disabled, .download-buttons .btn.btn-primary[aria-disabled="true"] { opacity: 0.9; background: rgba(255,255,255,0.08); color: #9aa3b2; border: 1px solid var(--border); } .download-list { margin-bottom: 1.2rem; } .download-buttons { margin-top: 1.2rem; gap: 1rem; } } .btn-secondary { background-color: #fff; color: #000; border: 1px solid #ccc; } .btn-primary:hover { background-color: #000; box-shadow: 0 0 10px var(--primary), 0 0 20px var(--secondary), 0 0 30px var(--accent); } .btn-secondary:hover { color: #fff; background-color: #000; box-shadow: 0 0 10px var(--primary), 0 0 20px var(--secondary), 0 0 30px var(--accent); } .btn-secondary.disabled { background-color: #c3c7d3; color: #fff; cursor: default; } .btn-link { color: var(--primary); text-decoration: underline; font-size: 0.85rem; padding: 0; } .btn-link:hover { color: var(--secondary); } .section-title { font-size: 2rem; font-weight: 600; text-align: center; margin-bottom: 1.4rem; position: relative; word-break: keep-all; overflow-wrap: normal; text-wrap: balance; } .section-title::after { content: ""; display: block; width: 60px; height: 4px; background-color: var(--primary); margin: 0.6rem auto 0; border-radius: 2px; } .section-title.left { text-align: left; } .section-title.left::after { margin-left: 0; margin-right: auto; } .hero { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6rem 0; color: var(--dark); background-color: var(--light); overflow: hidden; } .video-hero { position: relative; min-height: 75vh; padding: 0; overflow: clip; } .hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero-overlay-dark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); z-index: 1; } .hero-content { position: relative; z-index: 2; } #hero-products { background-color: var(--light); } @media (max-width: 768px) { .section-title { font-size: clamp(1.4rem, 6vw, 1.8rem); line-height: 1.25; letter-spacing: 0.02em; } #hero-products { background-image: url('assets/hero_product.png'); background-size: cover; background-position: center; } .video-hero .hero-video { display: none; } } @media (prefers-reduced-data: reduce) { .video-hero .hero-video { display: none; } #hero-products { background-image: url('assets/hero_product.png'); background-size: cover; background-position: center; } } #hero-about { background-image: url('assets/hero_about_static.jpg'); background-size: cover; background-position: center; color: #fff; min-height: 75vh; } #hero-about .hero-title, #hero-about .hero-tagline { color: #fff; } .hero-content { position: relative; max-width: 800px; margin: 0 auto; padding: 0 1rem; } .hero-title { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary); } .hero-tagline { font-size: 1.4rem; font-weight: 500; margin-bottom: 1.6rem; color: var(--dark); } .hero-list { list-style: none; margin: 0 auto; padding: 0; max-width: 600px; font-size: 1rem; color: var(--dark); display: flex; flex-direction: column; gap: 0.5rem; align-items: center; } .hero-list li::before { content: "•"; color: var(--primary); margin-right: 0.5rem; } .plain-hero { background-image: none; background-color: var(--light); } .video-hero .hero-title { font-size: 4rem; font-weight: 700; color: #fff; background: linear-gradient(90deg, #ffffff 0%, #bfcaff 50%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .video-hero .hero-tagline { font-size: 1.4rem; color: #fff; } .video-hero .hero-list { color: #fff; font-size: 1.2rem; gap: 0.6rem; } .product-hero .hero-list { align-items: center; text-align: center; } .product-hero .icon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem 1rem; align-items: stretch; } .video-hero .hero-list li { background: rgba(255,255,255,0.10); border: 1px solid var(--border); padding: 10px 12px; border-radius: 14px; position: relative; overflow: hidden; backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); font-size: clamp(0.78rem, 2.2vw, 0.95rem); white-space: nowrap; text-overflow: ellipsis; } .video-hero .hero-list li::after { content:""; position:absolute; inset:0; border-radius: inherit; background: linear-gradient(120deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 30%, rgba(255,255,255,0.18)); opacity:.5; mix-blend-mode: screen; pointer-events:none; } .video-hero .hero-list li::before { content:""; position:absolute; top:-120%; left:-120%; width:240%; height:240%; background: radial-gradient(closest-side, rgba(255,255,255,0.15), transparent 60%); transform: rotate(25deg); } .video-hero .hero-list li::before { color: #fff; } .features { padding: 4rem 0; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.6rem; } .feature-item { background-color: #fff; border-radius: 8px; padding: 1.4rem; text-align: center; box-shadow: 0 2px 6px var(--shadow); transition: var(--transition); } .feature-item:hover { transform: translateY(-4px); box-shadow: 0 4px 12px var(--shadow); } .feature-icon { font-size: 2.2rem; margin-bottom: 0.6rem; color: var(--primary); } .products { background-color: var(--light); padding: 4rem 0; } .product-cards { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; } .products { overflow: visible; } .product-card { background-color: #fff; border-radius: 8px; padding: 1.6rem; flex: 1 1 280px; max-width: 380px; box-shadow: 0 2px 6px var(--shadow); display: flex; flex-direction: column; justify-content: space-between; transition: var(--transition); text-align: center; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px var(--shadow); } .product-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--primary); } .product-description { font-size: 1rem; margin-bottom: 0.8rem; color: var(--dark); } .product-features { flex: 1; margin-bottom: 1.4rem; list-style: none; padding-left: 0; color: var(--dark); text-align: center; } .product-features li { margin-bottom: 0.4rem; position: relative; } .product-features li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--primary); border-radius: 50%; margin-right: 8px; vertical-align: middle; } .download { padding: 4rem 0; background: linear-gradient(135deg, #eaf3ff 0%, #f6ecfa 100%); color: var(--dark); } .download-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .download-text { flex: 1 1 360px; margin-right: 2rem; } .download-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; } .download-list { list-style: disc inside; margin-top: 0.8rem; margin-left: 1rem; padding-left: 0; } .download-list li { margin-bottom: 0.4rem; font-size: 0.9rem; } .download-buttons .btn { min-width: 130px; font-size: 0.85rem; } .download-qr { width: 160px; text-align: center; margin-top: 1.6rem; } .download-qr img { width: 100%; height: auto; border-radius: 10px; background: #fff; border: 6px solid #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.35); } .qr-caption { font-size: 0.75rem; margin-top: 0.4rem; color: #fff; } .platform { padding: 4rem 0; background-color: var(--light); } .platform .container { gap: 1.2rem; } .new-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; } .feature-card { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 6px var(--shadow); overflow: hidden; transition: var(--transition); display: flex; flex-direction: column; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px var(--shadow); } .feature-img { width: 100%; height: 180px; object-fit: cover; } .feature-card h3 { font-size: 1.2rem; font-weight: 600; padding: 1rem 1rem 0.4rem; color: var(--primary); } .core-features { background-color: var(--light); padding: 3rem 0 1rem; } .core-features .section-title { text-align: center; } .core-features .icon-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.2rem; text-align: center; } .core-features .icon-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 1rem; } .core-features .icon-item img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 0.6rem; } .core-features .icon-item span { font-size: 0.9rem; font-weight: 500; color: var(--dark); } .feature-card p { font-size: 0.9rem; padding: 0 1rem 1rem; color: var(--dark); flex: 1; } .platform-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; } .platform { overflow: visible; } .platform-text { flex: 1 1 380px; } .platform-text p { margin-bottom: 1rem; } .platform-text .inline-links { font-size: 0.9rem; color: #cdd3df; } .platform-text .inline-links a { color: var(--hover); text-decoration: underline; } .platform-features { flex: 1 1 360px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .platform-item { background-color: #fff; border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; box-shadow: 0 1px 4px var(--shadow); transition: var(--transition); } .platform-item:hover { transform: translateY(-2px); box-shadow: 0 3px 8px var(--shadow); } .platform-item { flex-direction: column; align-items: center; justify-content: center; } .platform-icon { width: 36px; height: 36px; margin: 0 auto 0.6rem; flex-shrink: 0; } .platform-icon img { width: 100%; height: 100%; object-fit: contain; background: transparent; } .platform-label { font-size: 1rem; color: var(--dark); text-align: center; width: 100%; } .alliance { background-color: var(--light); padding: 4rem 0; } .alliance-content { display: flex; flex-wrap: wrap; gap: 2rem; align-items: stretch; } .alliance-promises { flex: 1 1 380px; display: flex; flex-direction: column; } .alliance-promises h3 { font-size: 1.4rem; margin-bottom: 0.6rem; color: var(--primary); } .alliance-promises ul { margin-bottom: 1rem; list-style: disc inside; } .alliance-promises li { margin-bottom: 0.4rem; } .alliance-links { flex: 1 1 380px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; } .alliance-links h4 { font-size: 1rem; margin: 0.2rem 0; color: var(--primary); } .alliance-links ul { list-style: none; } .alliance-links li { margin-bottom: 0.4rem; } .alliance-links a { color: var(--dark); text-decoration: underline; font-size: 0.9rem; } #alliance #joinBtn { margin: 0.4rem 0; } #alliance .alliance-links { margin-top: 0.2rem; } .alliance-actions { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0; background: transparent; border: none; } .alliance-actions .btn { margin: 0.1rem 0 0.2rem; } .alliance-links { gap: 0; justify-content: center; } .alliance-links h4 { margin: 0.2rem 0; } .alliance-links ul { margin: 0.1rem 0 0; padding: 0; } .alliance-links li { margin: 0.2rem 0; } .logo-slider-wrapper { margin-top: 2rem; overflow: hidden; border-top: 1px solid #e5e9f2; border-bottom: 1px solid #e5e9f2; padding: 1rem 0; } .logo-slider { display: flex; align-items: center; animation: marquee 30s linear infinite; } .logo-item { margin: 0 1rem; width: 40px; height: 40px; position: relative; } .logo-img { height: 28px; margin: 0 16px; opacity: .9; display: inline-block; vertical-align: middle; } .logo-slider a { display: inline-flex; align-items: center; } .logo-item.circle { border-radius: 50%; background-color: var(--primary); } .logo-item.square { background-color: var(--secondary); border-radius: 4px; } .logo-item.triangle { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid var(--accent); } .logo-item.diamond { width: 28px; height: 28px; background-color: var(--primary); transform: rotate(45deg); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; z-index: 200; } .card-gradient { position: relative; overflow: hidden; border-radius: 8px; } .card-gradient::before { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; } .card-gradient:hover::before { opacity: 1; } .modal.active { display: flex; } .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); } .modal-content { position: relative; background-color: rgba(10,12,16,0.9); border-radius: 14px; padding: 0; max-width: 960px; width: 92%; max-height: 90vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); z-index: 10; display: flex; flex-wrap: wrap; gap: 0; } .form-embed { width: 100%; padding: 1rem; position: relative; } .embed-frame { width: 100%; height: clamp(60vh, 72vh, 80vh); border: 0; border-radius: 12px; background: rgba(255,255,255,0.02); overflow: hidden; } .form-loading { position: absolute; inset: 0; width: 100%; height: clamp(60vh, 72vh, 80vh); border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 0.8rem; color: #cdd3df; background: rgba(0,0,0,0.45); border: 1px solid var(--border); z-index: 2; } .form-loading span { font-size: 0.95rem; } .spinner { width: 22px; height: 22px; border: 2px solid rgba(255,255,255,0.25); border-top-color: #3388FF; border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .modal-close { position: absolute; top: 0.5rem; right: 0.5rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--dark); } .modal-content h3 { width: 100%; margin: 0; padding: 1rem 1.2rem; font-size: 1.1rem; color: #fff; border-bottom: 1px solid var(--border); } .sidebar { position: fixed; top: 0; left: 0; width: 220px; height: 100vh; background-color: var(--light); border-right: 1px solid #e5e9f2; padding-top: 1rem; overflow-y: auto; z-index: 150; transition: transform 0.3s ease; } .sidebar.closed { transform: translateX(-100%); } .sidebar .logo { display: flex; justify-content: center; margin-bottom: 1.6rem; } .sidebar nav { display: flex; flex-direction: column; padding: 0 1rem; } .sidebar nav a { display: flex; align-items: center; padding: 0.8rem 0.8rem; color: var(--dark); font-weight: 500; border-radius: 8px; margin-bottom: 0.4rem; transition: var(--transition); } .sidebar nav a img.icon { width: 20px; height: 20px; margin-right: 0.6rem; } .sidebar nav a.active, .sidebar nav a:hover { background-color: var(--muted); color: var(--primary); } .header .nav { display: none; } .menu-toggle { display: none; background: none; border: none; font-size: 1.8rem; color: var(--primary); cursor: pointer; } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .menu-toggle { display: block; } body.sidebar-open { overflow: hidden; } } #joinForm { flex: 2 1 360px; display: flex; flex-direction: column; gap: 0.8rem; } #joinForm label { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--dark); } #joinForm input, #joinForm select, #joinForm textarea { margin-top: 0.4rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.9rem; } #joinForm textarea { resize: vertical; } .checkbox-label { flex-direction: row; align-items: flex-start; } .checkbox-label input { margin-right: 0.5rem; margin-top: 0.1rem; } .submit-btn { align-self: flex-start; margin-top: 0.8rem; } .modal-qr { flex: 1 1 200px; text-align: center; } .modal-qr img { width: 160px; height: 160px; border-radius: 6px; } .modal-qr p { margin-top: 0.4rem; font-size: 0.75rem; color: var(--dark); } .site-footer { background-color: #000; color: #fff; padding: 2rem 0; border-top: 1px solid var(--border); } .footer-inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: auto 1fr 1.6fr auto; column-gap: 2rem; align-items: center; } .footer-left { display: flex; align-items: center; flex-wrap: wrap; } .footer-left img { height: 48px; margin-right: 1rem; } .footer-info { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; } .footer-info span { color: rgba(255,255,255,0.9); } .footer-info span { line-height: 1.6; } .footer-right { display: flex; gap: 0.75rem; align-items: center; justify-content: flex-end; } .footer-right img { width: 96px; height: 96px; object-fit: contain; border-radius: 8px; border: 2px solid #fff; } .footer-col { border-left: 1px solid rgba(255,255,255,0.15); padding-left: 1rem; } .footer-col:first-of-type { border-left: none; padding-left: 0; } .footer-inner > .footer-col:nth-child(3) .footer-info span { white-space: nowrap; } @media (max-width: 960px) { .footer-inner { grid-template-columns: 1fr; row-gap: 1rem; } .footer-col { border-left: none; padding-left: 0; } .footer-right { justify-content: flex-start; } .footer-inner > .footer-col:nth-child(3) .footer-info span { white-space: normal; } } @media (max-width: 768px) { .hero { padding: 3.5rem 0; } .video-hero { min-height: 60vh; } .product-hero .icon-grid { grid-template-columns: 1fr; } .video-hero .hero-list { max-width: 92%; gap: 0.5rem; } .video-hero .hero-list li { white-space: normal; font-size: clamp(0.86rem, 3.6vw, 0.95rem); padding: 8px 12px; } .ai-recorder { padding: 2.5rem 0; } .download { padding: 3rem 0; } .platform { padding: 3rem 0; } .platform-content { display: grid; grid-template-columns: 1fr; row-gap: 0.4rem; align-items: start; justify-items: stretch; } .platform-text p { margin-bottom: 0.5rem; } .platform-text .btn { margin-top: 0.2rem; margin-bottom: 0; } .platform-features { margin-top: 0; } .ai-features { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 0.8rem; } .ai-item { min-height: 140px; } .ai-item span { text-align: center; hyphens: auto; overflow-wrap: anywhere; } } @media (max-width: 480px) { .product-hero .icon-grid { grid-template-columns: 1fr; } .video-hero .hero-list { max-width: 94%; } .video-hero { min-height: 56vh; } } .footer-info span { display: block; } .footer-nav { display: none; } .about-intro { padding: 4rem 0; } .about-intro p { margin-bottom: 1rem; line-height: 1.8; } .team { background-color: var(--light); padding: 4rem 0; overflow: clip; } .team-slider-wrapper { overflow: visible; width: 100%; position: relative; } .team-slider-wrapper::before, .team-slider-wrapper::after { content: ""; position: absolute; top: 0; height: 100%; width: min(22vw, 240px); pointer-events: none; z-index: 2; } .team-slider-wrapper::before { left: -22vw; background: linear-gradient(to right, rgba(11,11,15,1) 0%, rgba(11,11,15,0.8) 55%, rgba(11,11,15,0) 100%); } .team-slider-wrapper::after { right: -22vw; background: linear-gradient(to left, rgba(11,11,15,1) 0%, rgba(11,11,15,0.8) 55%, rgba(11,11,15,0) 100%); } .team .container { position: relative; } .team-controls { display: flex; justify-content: space-between; margin-top: 0.6rem; gap: 0.6rem; } .team-controls .btn-icon { background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--dark); border-radius: 8px; padding: 0.4rem 0.8rem; cursor: pointer; } .team-controls .btn-icon:hover { background: rgba(255,255,255,0.1); } .team-controls .btn-icon:disabled { opacity: 0.4; cursor: default; } .team .container::before, .team .container::after { display: none; } .team-slider { display: flex; align-items: stretch; overflow: visible; animation: team-scroll 30s linear infinite; } .team-member { background-color: #fff; border-radius: 8px; padding: 1.4rem; margin-right: 2rem; width: 260px; box-shadow: 0 2px 6px var(--shadow); flex-shrink: 0; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; will-change: transform; position: relative; z-index: 1; } .team-member:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.25); z-index: 5; } .team-member h3 { margin-top: 0.8rem; margin-bottom: 0.4rem; font-size: 1.2rem; color: var(--primary); } .team-member .role { font-size: 0.85rem; color: var(--primary); margin-bottom: 0.4rem; } .team-member .bio { font-size: 0.8rem; color: var(--dark); margin-bottom: 0.6rem; line-height: 1.5; } .team-avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; } @keyframes team-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .robots { padding: 4rem 0; } .robots .container { text-align: center; } .robots .container .section-title { text-align: center; } .robots .container p { text-align: center; margin: 0 auto; max-width: 820px; } .robot-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; margin: 2rem 0; } .robots { overflow: visible; } .robot-item { background-color: #fff; border-radius: 8px; padding: 1.2rem; width: 200px; text-align: center; box-shadow: 0 1px 4px var(--shadow); transition: var(--transition); } .robot-item:hover { transform: translateY(-4px); box-shadow: 0 4px 10px var(--shadow); } .robot-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; } .robot-icon { width: 36px; height: 36px; margin: 0 auto 0.6rem; flex-shrink: 0; } .robot-icon img { width: 100%; height: 100%; object-fit: contain; background: transparent; } .robot-label { font-size: 1rem; color: var(--dark); } .history { background-color: var(--light); padding: 4rem 0; } .timeline { list-style: none; position: relative; max-width: 720px; margin: 0 auto; border-left: 2px solid var(--primary); padding-left: 1.5rem; } .timeline li { position: relative; margin-bottom: 1.6rem; } .timeline li a { display: block; padding: 0.4rem 0.6rem; border-radius: 8px; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .timeline li a:hover { background: rgba(255,255,255,0.06); box-shadow: 0 6px 18px rgba(0,0,0,0.25); transform: translateY(-2px); } .timeline-date { font-weight: bold; color: var(--primary); margin-bottom: 0.2rem; display: inline-block; } .timeline-desc { font-size: 0.9rem; color: var(--dark); } .updates { padding: 4rem 0; } .updates-layout { display: grid; grid-template-columns: 5fr 7fr; gap: 2rem; align-items: start; } .updates-left .section-title.left::after { opacity: 0; transition: opacity .4s ease; } .updates-left:hover .section-title.left::after { opacity: 1; } .updates-right { display: flex; justify-content: flex-end; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap; } .updates-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; text-align: center; background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 12px; padding: 0.5rem; transition: transform .25s ease, box-shadow .25s ease; width: 100%; max-width: clamp(110px, 20vw, 150px); } .updates-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.35); } .updates-card img { width: 68%; height: auto; border-radius: 6px; } .updates-card .qr-caption { font-size: 0.8rem; margin: 0; text-align: center; width: 100%; } .updates-card::before { content:""; position:absolute; inset:0; padding:2px; border-radius:12px; background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition: opacity .3s ease; } .updates-card:hover::before { opacity:1; } @media (max-width: 992px) { .updates-layout { grid-template-columns: 1fr; } } @media (max-width: 640px) { .updates-right { justify-content: center; } } @media (max-width: 480px) { .updates-right { justify-content: center; } .updates-card { max-width: 70%; } } body::before { content: ""; position: fixed; inset: -30% -20% -20% -20%; background-image: radial-gradient(circle at center, rgba(51,136,255,0.45), transparent 60%), radial-gradient(circle at center, rgba(211,119,205,0.38), transparent 60%), radial-gradient(circle at center, rgba(70,235,213,0.34), transparent 60%); background-size: 40% 40%, 45% 45%, 42% 42%; background-position: 5% 20%, 92% 14%, 60% 86%; background-repeat: no-repeat; filter: blur(56px); animation: glassGlow 22s ease-in-out infinite alternate; z-index: 0; pointer-events: none; } body > * { position: relative; z-index: 1; } .products, .platform, .team, .robots { position: relative; } .products::before, .platform::before, .team::before, .robots::before { content: ""; position: absolute; inset: -10%; background-image: radial-gradient(340px 340px at 12% 28%, rgba(51,136,255,0.14), transparent 62%), radial-gradient(380px 380px at 88% 20%, rgba(211,119,205,0.12), transparent 64%), radial-gradient(320px 320px at 60% 84%, rgba(70,235,213,0.12), transparent 64%); filter: blur(42px); animation: containerGlow 26s ease-in-out infinite alternate; pointer-events: none; z-index: 0; } .products > *, .platform > *, .team > *, .robots > * { position: relative; z-index: 1; } @keyframes containerGlow { 0% { transform: translate3d(0,0,0); } 50% { transform: translate3d(1.5%, -1%, 0); } 100% { transform: translate3d(-1%, 1.5%, 0); } } @keyframes glassGlow { 0% { background-position: 10% 18%, 92% 16%, 60% 85%; } 50% { background-position: 16% 22%, 86% 20%, 58% 78%; } 100% { background-position: 12% 14%, 94% 22%, 64% 88%; } } .glass-section > * { position: relative; z-index: 1; } .updates-card { position: relative; cursor: pointer; } .updates-card::after { content: ""; position: absolute; inset: -30%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%); transform: translateX(-150%) skewX(-10deg); opacity: 0; pointer-events: none; } .updates-card:hover::after { opacity: .75; animation: sweep-shine 900ms ease; } .video-hero .hero-list li:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.18); } :is(.product-card, .platform-item, .team-member, .robot-item, .ai-item) { background: rgba(255,255,255,0.05) !important; border: 1px solid var(--border); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); position: relative; overflow: hidden; background-clip: padding-box; } :is(.product-card, .platform-item, .team-member, .robot-item, .ai-item)::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s ease; } :is(.product-card, .platform-item, .ai-item, .robot-item, .team-member, .feature-item, .feature-card):hover::before { opacity: 1; } :is(.product-card, .platform-item, .ai-item, .robot-item, .team-member, .feature-item, .feature-card)::after { content: ""; position: absolute; inset: -30%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%); transform: translateX(-150%) skewX(-10deg); opacity: 0; pointer-events: none; } :is(.product-card, .platform-item, .team-member, .robot-item, .ai-item):hover::after { opacity: .4; animation: sweep-shine 900ms ease; } @keyframes sweep-shine { from { transform: translateX(-150%) skewX(-10deg); } to { transform: translateX(150%) skewX(-10deg); } } .updates-content { display: flex; flex-direction: column; gap: 2rem; } .updates-text { font-size: 1rem; line-height: 1.6; } .updates-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.6rem; width: 100%; } .updates-qr { text-align: center; } .updates-qr img { width: 120px; height: 120px; border-radius: 6px; margin: 0 auto; } .updates-qr .qr-caption { margin-top: 0.4rem; font-size: 0.8rem; color: var(--dark); } .updates .section-title.left { text-align: left; } .updates .section-title.left::after { margin-left: 0; } @media (min-width: 768px) { .updates-content { flex-direction: row; align-items: center; justify-content: space-between; } .updates-grid { max-width: 540px; } } @media (max-width: 960px) { .hero-title { font-size: 2.4rem; } .hero-tagline { font-size: 1rem; } .nav-container { padding: 0.75rem 16px; } .product-cards { gap: 1rem; } .product-card { flex: 1 1 100%; max-width: 100%; } .ai-features { grid-template-columns: repeat(2, 1fr); } .download-container, .platform-content, .alliance-content, .updates-content { flex-direction: column; align-items: flex-start; } .platform-content { justify-content: flex-start; } .download-qr, .platform-features, .updates-qr { margin-top: 1.6rem; } .logo-slider { animation-duration: 20s; } .team-slider { animation-duration: 20s; } } @media (max-width: 600px) { .nav a { margin-left: 1rem; } .product-card { max-width: 100%; } .download-buttons .btn { flex: 1 1 calc(50% - 0.5rem); } .platform-features { grid-template-columns: repeat(2, 1fr); } .robot-item { width: 100%; } } @media (max-width: 768px) { .btn, .lang-btn, .btn-icon, .menu-toggle { min-height: 44px; } .btn-icon { padding: 0.5rem 0.9rem; } } @supports (padding: max(0px)) { body { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); } .top-nav { padding-top: calc(env(safe-area-inset-top) + 0px); } .site-footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); } } .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; } .team-card { background-color: #fff; border-radius: 8px; padding: 1.4rem; text-align: center; box-shadow: 0 2px 6px var(--shadow); transition: var(--transition); display: flex; flex-direction: column; align-items: center; } .team-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px var(--shadow); } .team-avatar { width: 72px; height: 72px; border-radius: 50%; margin-bottom: 0.8rem; object-fit: cover; } .team-card .role { font-weight: 600; color: var(--primary); margin-bottom: 0.4rem; } .team-card .bio { font-size: 0.85rem; color: var(--dark); } .main-content { margin-left: 0; } .nav-links .nav-item { color: var(--dark); } .mobile-nav { background-color: rgba(0, 0, 0, 0.96); } .btn-primary { background-color: #fff; color: #000; border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } .btn-primary:hover { background-color: #f3f4f6; box-shadow: 0 0 0 4px rgba(255,255,255,0.06); } .btn-secondary { background-color: transparent; color: var(--dark); border: 1px solid var(--border); } .btn-secondary:hover { color: #fff; background-color: #0f1115; box-shadow: none; } .hero-overlay-dark { background: rgba(0, 0, 0, 0.55); } .hero-title { color: #fff; } .hero-tagline { color: #cdd3df; } .feature-item, .feature-card, .ai-item, .platform-item, .product-card, .robot-item, .team-member, .team-card { background-color: var(--surface); border: 1px solid var(--border); box-shadow: none; } .product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .product-title { color: var(--dark); } .product-description, .feature-card p, .robot-label, .platform-label { color: #cdd3df; } .product-features, .product-features li { color: #cdd3df; } .download { background: linear-gradient(180deg, #0b0b0f 0%, #10131a 100%); color: var(--dark); } .platform { background-color: var(--light); } .alliance { background-color: var(--light); } .team { background-color: var(--light); } .logo-slider-wrapper { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .timeline { border-left: 2px solid var(--border); } .timeline-desc { color: #cdd3df; } .updates-qr .qr-caption { color: #cdd3df; } .modal-content { background-color: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } .intro { background-color: var(--light); padding: 4rem 0; } .intro-container { text-align: center; } .intro-title { font-size: 2.2rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--primary); } .intro-subtitle { font-size: 1.2rem; margin-bottom: 0.8rem; color: var(--dark); } .intro-list { list-style: disc inside; max-width: 540px; margin: 1rem auto 0; text-align: left; font-size: 1rem; } .intro-list li { margin-bottom: 0.4rem; } .ai-recorder { background-color: var(--light); padding: 4rem 0; } .ai-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; } .ai-text { flex: 1 1 360px; text-align: left; } .ai-title { font-size: 1.8rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--primary); } .ai-subtitle { font-size: 1rem; color: var(--dark); } .ai-features { flex: 1 1 360px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; justify-items: stretch; align-items: stretch; } .ai-item { background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.25); padding: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; transition: transform .25s ease, box-shadow .25s ease; min-height: 160px; width: 100%; height: 100%; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .ai-item:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.18); } .ai-item img { width: 40px; height: 40px; object-fit: contain; } .ai-item span { font-size: 0.9rem; color: var(--dark); text-align: center; width: 100%; } @media (hover: none) and (pointer: coarse) and (max-width: 820px) { .nav-links .nav-item:hover::after { content: none !important; display: none !important; } a:hover { color: inherit !important; } .btn-primary:hover, .btn-secondary:hover, .updates-card:hover, .feature-item:hover, .feature-card:hover, .product-card:hover, .platform-item:hover, .team-member:hover, .robot-item:hover, .ai-item:hover, .timeline li a:hover, .video-hero .hero-list li:hover { transform: none !important; box-shadow: none !important; background-color: inherit !important; } .updates-card:hover::before, .updates-card:hover::after, .card-gradient:hover::before { opacity: 0 !important; animation: none !important; } .logo-slider, .team-slider { animation: none !important; } }
#hero-about.parallax{background-size:104%;background-position:center 48%}#hero-about.parallax .hero-content{transform:translateY(-4%)}

#hero-about{will-change:background-position,background-size;transition:background-position .6s ease,background-size .6s ease;}#hero-about .hero-content{will-change:transform;transition:transform .6s ease;}#hero-about.parallax{background-size:104%;background-position:center 48%}#hero-about.parallax .hero-content{transform:translateY(-4%)}

@keyframes heroFloat{0%{transform:translateY(-4%)}50%{transform:translateY(-6%)}100%{transform:translateY(-4%)}}#hero-about.parallax .hero-content.show{animation:heroFloat 8s ease-in-out infinite}@media (max-width:768px){#hero-about{min-height:60vh}}@media (max-width:480px){#hero-about{min-height:56vh}}

@keyframes heroBgFloat{0%{background-size:104%;background-position:center 58%}50%{background-size:120%;background-position:center 42%}100%{background-size:104%;background-position:center 58%}}#hero-about.parallax{animation:heroBgFloat 7s ease-in-out infinite}
@keyframes heroBgFloatMobile{0%{background-position:center 45%}50%{background-position:center 41%}100%{background-position:center 45%}}@media (max-width:768px){#hero-about{background-size:180%!important;background-position:center 45%!important}#hero-about.parallax{animation:heroBgFloatMobile 10s ease-in-out infinite!important}}
@media (max-width:768px){html[lang="zh-CN"] .nav-logo img.brand-logo{height:29.3333px}}
/* Mobile fixes: re-enable team slider auto-scroll; disable inner scrolling in FAQ */
@media (hover:none) and (pointer:coarse) and (max-width:820px){.team-slider{animation:team-scroll 20s linear infinite!important}}
@media (max-width:820px){#sec-noa,#sec-compliance,#sec-testing,#sec-competitor,#sec-experience,#sec-insurance,#sec-product,#sec-method,#sec-glossary{overflow:visible!important;max-height:none!important;overscroll-behavior:auto!important;-webkit-overflow-scrolling:auto!important;touch-action:pan-y!important}#sec-noa .container,#sec-compliance .container,#sec-testing .container,#sec-competitor .container,#sec-experience .container,#sec-insurance .container,#sec-product .container,#sec-method .container,#sec-glossary .container,#sec-noa .feature-card,#sec-compliance .feature-card,#sec-testing .feature-card,#sec-competitor .feature-card,#sec-experience .feature-card,#sec-insurance .feature-card,#sec-product .feature-card,#sec-method .feature-card,#sec-glossary .feature-card,#sec-noa ul,#sec-compliance ul,#sec-testing ul,#sec-competitor ul,#sec-experience ul,#sec-insurance ul,#sec-product ul,#sec-method ul,#sec-glossary ul{overflow:visible!important;max-height:none!important;overscroll-behavior:auto!important;-webkit-overflow-scrolling:auto!important;touch-action:pan-y!important}#sec-noa .feature-card,#sec-noa .feature-card *{overflow:visible!important;max-height:none!important;overscroll-behavior:auto!important;-webkit-overflow-scrolling:auto!important;touch-action:pan-y!important}}
/* FAQ bullets: increase left and bottom padding */
.feature-card ul{padding:0 1.2rem 1rem 1.8rem!important}