
:root{--ink:#17234d;--text:#697087;--blue:#4b62e9;--mint:#c8ece2;--peach:#ffe3d0;--lav:#e5dcff}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;background:#fff;line-height:1.65}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.4}
.wrap{width:min(1320px,calc(100% - 80px));margin:auto}
.header{height:112px;display:flex;align-items:center;background:#fbfbff}
.brand{display:flex;gap:12px;align-items:center;font-size:25px;font-weight:800;letter-spacing:1px}
.brand small{display:block;font-size:9px;letter-spacing:5px;line-height:1.3;font-weight:500}
.brand-mark{font-size:44px;color:var(--blue);line-height:1}
.hero{background:radial-gradient(ellipse at 78% 40%,#e7e8ff,transparent 48%),linear-gradient(130deg,#fbfbff,#f7f8ff);overflow:hidden;padding:80px 0 120px}
.hero-grid{display:grid;grid-template-columns: .93fr 1.07fr;align-items:center;gap:40px;min-height:620px}
.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;color:var(--blue);margin-bottom:23px}
.eyebrow>span{display:inline-block;width:7px;height:7px;background:var(--blue);border-radius:50%;margin-right:9px}h1{font-size:58px;line-height:1.35;letter-spacing:-2px;margin:0 0 30px}h1 em{font-style:normal;color:var(--blue)}
.intro{color:var(--text);font-size:18px;line-height:1.95}
.hero-note{display:flex;gap:13px;align-items:center;font-size:13px;color:#7e86a0;margin-top:35px}
.hero-note i{width:3px;height:3px;border-radius:50%;background:#aeb6d0}
.hero-visual{position:relative;min-height:540px;display:flex;align-items:center}
.orbit{position:absolute;border:1px solid #d5d9fa;border-radius:50%;width:650px;height:650px;left:0;top:-50px}
.orbit-two{width:520px;height:520px;left:65px;top:15px}
.desk{z-index:1;background:white;border:8px solid #f6f7fc;border-radius:15px;box-shadow:0 25px 70px #6676c72b;min-width:680px;transform:rotate(-2deg);margin-left:5px}
.desk-top{display:flex;align-items:center;gap:5px;height:42px;border-bottom:1px solid #e8ebf5;padding:0 15px;font-size:11px}
.desk-top b{margin-right:auto}
.desk-top>span{font-size:9px;color:#989db3;margin-right:30px}
.desk-top i{width:5px;height:5px;background:#d8dced;border-radius:50%}
.logo-mini{color:var(--blue);font-size:18px}
.desk-body{display:flex;height:390px}
.desk-rail{display:flex;align-items:center;flex-direction:column;gap:27px;width:46px;padding-top:18px;background:#505fd9;color:#eee;flex-shrink:0}
.desk-rail b{font-size:24px}
.desk-rail span{font-size:16px}
.conversations{width:200px;border-right:1px solid #edf0f7;padding-top:18px;flex-shrink:0}
.conversations>strong{font-size:13px;margin:14px}
.mini-search{font-size:10px;color:#9ba2b9;background:#f4f6fc;margin:14px 12px;padding:7px 10px;border-radius:5px}
.conversation{display:flex;gap:8px;align-items:center;padding:14px 11px;position:relative}
.conversation.selected{background:#f0f2ff}
.avatar{width:32px;height:32px;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;font-size:12px;border-radius:10px;color:#4c5a9c;font-weight:700}
.blue{background:#dae6ff}
.mint{background:var(--mint)}
.peach{background:var(--peach)}
.violet{background:var(--lav)}
.conversation b{font-size:11px}
.conversation small{display:block;font-size:9px;color:#99a1b6}
.conversation time{position:absolute;right:10px;top:18px;font-size:8px;color:#a8afc0}
.chat{flex:1;padding:0 15px;background:#fdfdff}
.chat-head{height:61px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #edf0f8;font-size:11px}
.chat-head p small{display:block;color:#a5acc0;font-size:8px}
.status{font-size:8px;color:#5d82a5;background:#e5f2f4;padding:2px 7px;margin-left:auto;border-radius:3px}
.date{font-size:8px;text-align:center;color:#b2b7c7;margin:15px}
.bubble{font-size:11px;background:#eef0fa;border-radius:0 10px 10px;padding:12px 13px;margin-right:35px;line-height:1.7}
.bubble small{display:block;font-size:8px;color:#8994bb;margin-bottom:5px}
.bubble hr{border:0;border-top:1px solid #dde1f1;margin:8px 0}
.bubble.outgoing{margin:16px 0 0 65px;background:#e1e4ff;border-radius:10px 0 10px 10px}
.context{margin-top:18px;border:1px dashed #dbe0f0;font-size:8px;padding:9px;color:#909bb3}
.context span{display:block;color:#586a9b}
.floating{z-index:2;position:absolute;background:#fff;box-shadow:0 18px 45px #7982b729;border:1px solid #eef0fa;border-radius:12px}
.floating.language{left:-35px;bottom:-3px;display:flex;align-items:center;gap:12px;padding:16px 21px}
.language>span{font-size:20px;color:var(--blue);background:#edf0ff;padding:8px;border-radius:8px}
.floating b{display:block;font-size:12px}
.floating small{font-size:10px;color:#989fb2}
.floating.profile{right:-78px;top:0;width:175px;padding:18px}
.profile .avatar{width:40px;height:40px;margin-bottom:8px}
.profile div{display:flex;gap:4px;margin-top:10px}
.profile div span{background:#f0f2ff;color:#828aba;font-size:8px;padding:3px 5px}
.overview{padding:100px 0 108px}
.section-title{text-align:center;margin-bottom:52px}
.section-title .eyebrow{margin-bottom:12px}
.section-title h2,.section-copy h2{font-size:40px;letter-spacing:-1px}
.section-title>p:last-child{font-size:16px;color:var(--text);margin-top:16px}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.feature-grid article{padding:10px 10px 0}
.feature-icon{display:flex;width:58px;height:58px;border-radius:15px;background:#ebedff;align-items:center;justify-content:center;color:var(--blue);font-size:26px;margin-bottom:22px}
.feature-grid article:nth-child(2) .feature-icon{background:#e5f5ed;color:#4c9a87}
.feature-grid article:nth-child(3) .feature-icon{background:#fff0e4;color:#c89669}
.feature-grid article:nth-child(4) .feature-icon{background:#f0eaff;color:#9980c6}
.feature-grid h3{font-size:21px;margin-bottom:15px}
.feature-grid p{font-size:15px;line-height:1.9;color:var(--text)}
.understand{background:#f9faff;padding:85px 0}
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:110px}
.section-copy>p:not(.eyebrow){font-size:16px;color:var(--text);line-height:1.95;margin-top:22px}
.section-copy .eyebrow{margin-bottom:18px}
.check-list{list-style:none;padding:0;margin:30px 0 0}
.check-list li{position:relative;padding-left:32px;margin-top:20px}
.check-list li:before{content:'✓';position:absolute;left:0;top:0;color:var(--blue);font-weight:bold}
.check-list b{font-size:16px;font-weight:600}
.check-list span{display:block;color:var(--text);font-size:13px;margin-top:5px}
.translation-art{background:radial-gradient(ellipse at 55% 50%,#e9e7ff,transparent 70%),#f0effe;border-radius:24px;padding:30px;box-shadow:inset 0 0 50px #e9e5ff}
.art-heading{display:flex;align-items:center;gap:10px;font-size:13px;margin:0 0 25px}
.translation-sheet{background:#fff;border-radius:15px;padding:30px;box-shadow:0 14px 35px #4d5b9b0d}
.translation-sheet p{font-size:20px;line-height:1.75;color:#435075;margin-top:14px}
.language-label{font-size:10px;letter-spacing:1px;color:#8992ae}
.connector{color:#9198c8;margin:10px 0}
.term-note{background:#fff;margin:16px 24px 0;padding:18px;border-radius:10px;font-size:12px;box-shadow:0 10px 25px #4d5b9b0d}
.term-note b{display:block;color:#8173c6}
.term-note span{color:#969bb0}
.art-tag{font-size:11px;text-align:center;color:#8a8bb3;margin-top:22px;letter-spacing:2px}
.solutions{padding:100px 0 0}
.solution-row{min-height:520px;padding:10px 0 60px}
.small-number{font-size:11px;letter-spacing:2px;color:#9196b4;display:block;margin-bottom:22px}
.text-points{display:flex;gap:22px;margin-top:26px;font-size:13px;color:#6c76ba}
.message-art{position:relative;height:400px;border-radius:28px;background:radial-gradient(ellipse,#e4e8ff,transparent 70%),#f8f9ff;border:1px solid #eff1fc}
.message-art:before,.message-art:after{content:'';position:absolute;border:1px solid #dbe0f5;border-radius:50%;width:290px;height:290px;left:125px;top:20px}
.message-art:after{width:200px;height:200px;left:170px;top:65px}
.message-center{position:absolute;z-index:1;left:206px;top:100px;width:130px;height:135px;background:#fff;border-radius:22px;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 14px 45px #6376c622}
.message-center>span{font-size:36px;line-height:1.3;color:var(--blue)}
.message-center b{font-size:14px}
.message-center small{font-size:9px;color:#9ba2bc}
.message-pill{position:absolute;z-index:2;padding:13px 20px;background:white;border-radius:12px;border:1px solid #eef0f8;box-shadow:0 10px 30px #6a75a50f;font-size:12px;display:flex;align-items:center;gap:9px}
.dot{width:13px;height:13px;border-radius:4px}
.m1{top:40px;left:15px}
.m2{top:54px;right:10px}
.m3{top:220px;left:0}
.m4{top:230px;right:0}
.message-footer{position:absolute;bottom:22px;left:0;right:0;text-align:center}
.message-footer b{display:block;font-size:13px}
.message-footer span{font-size:10px;color:#8f98b4}
.customer-art{position:relative;background:#f4f8f6;border-radius:28px;padding:30px 55px 70px}
.customer-card{background:#fff;border-radius:16px;padding:25px;box-shadow:0 15px 40px #5579650e;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.customer-card>.avatar{width:45px;height:45px}
.customer-card h3{font-size:16px}
.customer-card p{font-size:10px;color:#a2a9ba}
.tag-neutral{margin-left:auto;background:#eaf4f0;color:#649280;font-size:9px;padding:3px 9px;border-radius:5px}
.customer-labels{width:100%;display:flex;gap:6px;margin-top:5px}
.customer-labels span{font-size:9px;background:#f4f5fa;color:#8993b0;padding:4px 8px;border-radius:3px}
.customer-card dl{width:100%;margin:15px 0 0;font-size:11px}
.customer-card dt{color:#a2aabe;margin-top:10px}
.customer-card dd{margin:3px 0 0;color:#65728e}
.handoff-card{position:absolute;bottom:18px;right:15px;background:#fff;border:1px solid #e8eeeb;box-shadow:0 12px 35px #40665213;display:flex;align-items:center;gap:10px;padding:16px 20px;border-radius:12px}
.handoff-card b{display:block;font-size:11px}
.handoff-card small{font-size:9px;color:#9aa7a1}
.handoff-card>span:last-child{font-size:19px;color:#79b49f;margin-left:20px}
.closing{padding:75px 0;background:#f5f6ff;text-align:center}
.closing .eyebrow{margin-bottom:12px}
.closing h2{font-size:38px}
.closing p:last-child{color:var(--text);margin-top:16px;font-size:15px}
.footer{height:140px;display:flex;align-items:center;justify-content:space-between}
.footer .brand{font-size:20px;color:var(--blue)}
.footer p,.footer>span:last-child{font-size:11px;color:#9ca3b7;letter-spacing:1px}@media(min-width:1800px){.hero{padding:95px 0 145px}
.hero-grid{min-height:650px}
.overview{padding:110px 0 115px}
.understand{padding:95px 0}
.solutions{padding-top:105px}
.solution-row{min-height:580px;padding-bottom:75px}}@media(max-width:900px){.wrap{width:calc(100% - 40px)}
.header{height:84px}
.hero{padding:45px 0 70px}
.hero-grid,.split{grid-template-columns:1fr;gap:45px}h1{font-size:43px}
.intro{font-size:16px}
.hero-visual{min-height:400px;transform:scale(.78);transform-origin:left center;width:120%}
.desk{min-width:650px}
.floating.profile{display:none}
.overview{padding:65px 0}
.feature-grid{grid-template-columns:1fr 1fr;gap:30px}
.section-title h2,.section-copy h2{font-size:31px}
.understand{padding:60px 0}
.translation-sheet p{font-size:17px}
.solutions{padding-top:65px}
.solution-row{padding-bottom:65px}
.message-art{overflow:hidden}
.message-center{left:calc(50% - 65px)}
.message-art:before{left:calc(50% - 145px)}
.message-art:after{left:calc(50% - 100px)}
.customer-art{padding:25px 25px 75px}
.closing h2{font-size:30px}
.footer{height:130px;flex-wrap:wrap;justify-content:center;gap:0;padding:25px 0}
.footer p{width:100%;text-align:center}
.hero-note{gap:8px;font-size:10px}}@media(max-width:480px){.hero-visual{transform:scale(.47);min-height:280px;margin-top:-50px;width:190%;margin-bottom:-80px}
.hero-grid{gap:0}
.eyebrow{font-size:9px;letter-spacing:1px}h1{font-size:37px}
.hero-note{margin-top:24px}
.feature-grid{gap:25px}
.feature-grid article{padding:0}
.feature-grid h3{font-size:17px}
.feature-grid p{font-size:13px}
.section-title h2,.section-copy h2{font-size:28px}
.translation-art{padding:20px}
.translation-sheet{padding:20px}
.translation-sheet p{font-size:15px}
.message-pill{padding:12px;font-size:10px}
.handoff-card{right:5px;padding:12px}
.footer .brand{font-size:17px}}
