/* Modern white navigation and a light-blue product-led homepage. */
:root{--ximo-ink:#13263f;--ximo-blue:#1764e8;--ximo-brand:#07548b;--ximo-muted:#6c7d94;--ximo-line:#e3ebf4}
html{scroll-padding-top:112px}body{padding-top:88px;font-family:"Microsoft YaHei","PingFang SC",system-ui,Arial,sans-serif}
.home-header,.site-navigation{position:fixed;inset:0 0 auto;z-index:110;background:rgba(255,255,255,.98);border-bottom:1px solid #e9eff6;box-shadow:0 3px 18px rgba(21,47,79,.035)}
.navbar-xs.width_1200{position:relative;inset:auto;display:flex;align-items:center;max-width:1440px;width:calc(100% - 96px);height:88px;margin:0 auto;padding:0;gap:36px;box-sizing:border-box}
.navbar-xs a.logo{flex:0 0 235px;width:235px;height:auto}.navbar-xs a.logo img{display:block;width:100%!important;height:auto!important}
ul.navbar-xs-menu{flex:1;display:flex;align-items:center;justify-content:flex-end;margin:0;padding:0;gap:14px;list-style:none}ul.navbar-xs-menu>li{position:relative;margin:0}
ul.navbar-xs-menu>li>a,ul.navbar-xs-menu>li>a:hover{display:flex;align-items:center;justify-content:center;gap:6px;height:88px;padding:0 9px;box-sizing:border-box;white-space:nowrap;font-size:16px;font-weight:600;line-height:24px;color:var(--ximo-ink);background:transparent;text-decoration:none}
ul.navbar-xs-menu>li>a::after{content:'';position:absolute;bottom:13px;left:9px;right:9px;height:3px;border-radius:2px;background:var(--ximo-blue);transform:scaleX(0);transition:transform .18s}
ul.navbar-xs-menu>li.active>a,ul.navbar-xs-menu>li>a:hover{color:var(--ximo-blue);background:transparent}ul.navbar-xs-menu>li.active>a::after,ul.navbar-xs-menu>li:hover>a::after,ul.navbar-xs-menu>li:focus-within>a::after{transform:scaleX(1)}
.nav-chevron{width:12px;height:12px;flex:0 0 12px;color:#8996a7}.nav-dropdown{position:absolute;top:77px;left:-18px;width:238px;padding:10px;background:#fff;border:1px solid var(--ximo-line);border-radius:14px;box-shadow:0 14px 40px rgba(24,55,93,.1);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s}
li:hover>.nav-dropdown,li:focus-within>.nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
ul.navbar-xs-menu>li.nav-dismissed>.nav-dropdown{opacity:0;visibility:hidden}
ul.navbar-xs-menu>li .nav-dropdown a{position:relative;display:block;height:auto;padding:12px 32px 12px 16px;border-radius:8px;color:#425775;font-size:14px;font-weight:400;line-height:1.5;background:transparent;text-decoration:none;transition:color .2s ease,background-color .2s ease,box-shadow .2s ease}
.nav-dropdown-label{display:block;transition:transform .2s cubic-bezier(.22,.61,.36,1)}
ul.navbar-xs-menu>li .nav-dropdown a::before{content:'';position:absolute;left:7px;top:50%;width:2px;height:14px;margin-top:-7px;border-radius:2px;background:var(--ximo-blue);opacity:0;transform:scaleY(.4);transition:opacity .2s ease,transform .2s ease}
ul.navbar-xs-menu>li .nav-dropdown a::after{content:'';position:absolute;right:15px;top:50%;width:6px;height:6px;margin-top:-3px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;opacity:0;transform:translateX(-4px) rotate(45deg);transition:opacity .2s ease,transform .2s ease}
ul.navbar-xs-menu>li .nav-dropdown a:hover,ul.navbar-xs-menu>li .nav-dropdown a:focus-visible{color:var(--ximo-blue);background:#eef5fe;box-shadow:inset 0 0 0 1px #e3edfc}
ul.navbar-xs-menu>li .nav-dropdown a:is(:hover,:focus-visible) .nav-dropdown-label{transform:translateX(4px)}
ul.navbar-xs-menu>li .nav-dropdown a:is(:hover,:focus-visible)::before{opacity:1;transform:scaleY(1)}
ul.navbar-xs-menu>li .nav-dropdown a:is(:hover,:focus-visible)::after{opacity:1;transform:translateX(0) rotate(45deg)}
ul.navbar-xs-menu>li .nav-dropdown a:focus-visible{outline:2px solid var(--ximo-blue);outline-offset:-2px}
.nav-chevron{transition:transform .2s ease,color .2s ease}
li.has-submenu:not(.nav-dismissed):is(:hover,:focus-within)>a .nav-chevron{color:var(--ximo-blue);transform:rotate(180deg)}
ul.navbar-xs-menu>li.language{margin:0 0 0 10px}ul.navbar-xs-menu>li.language>a,ul.navbar-xs-menu>li.language>a:hover{height:40px;padding:0 15px;font:600 14px/1 Arial,sans-serif;color:#60738c;border:1px solid var(--ximo-line);border-radius:24px}ul.navbar-xs-menu>li.language>a::after{display:none}
.language a::before{content:none}.language svg{width:18px;height:18px;flex:0 0 18px}.language:after{display:none}
ul.navbar-xs-menu>li>a:focus-visible,.hero-actions a:focus-visible,.hero-media-chip:focus-visible{outline:2px solid var(--ximo-blue);outline-offset:4px}
.navbar-sm{position:relative;height:72px;background:transparent}.navbar-sm-brand{height:72px}.navbar-sm-brand img{width:198px;max-width:52vw;height:auto;margin-left:24px}.navbar-sm-right{top:16px;right:24px;gap:12px}.navbar-sm-right .language{margin:0}
.navbar-sm-right .language a{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 12px;color:#60738c;font:600 13px/1 Arial,sans-serif;border:1px solid var(--ximo-line);border-radius:22px}
.navbar-sm-toggle,.navbar-sm-toggle-close{display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:0;border-radius:8px;background:#f3f7fc;color:var(--ximo-ink);cursor:pointer}.navbar-sm-toggle .iconfont,.navbar-sm-toggle-close .iconfont{font-size:27px}
.navbar-sm-main{left:0;overflow:hidden;visibility:hidden;pointer-events:none;z-index:200}.navbar-sm-main.active{visibility:visible;pointer-events:auto}
body>.navbar-sm-main{position:fixed;inset:0;width:100%;height:100%;height:100dvh;isolation:isolate;overscroll-behavior:contain}
body>.navbar-sm-main .navbar-sm-content{max-height:100%;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding-bottom:max(24px,env(safe-area-inset-bottom))}
.navbar-sm-main .navbar-sm-content{top:0;left:auto;right:0;width:min(360px,88vw);padding:24px;background:#fff;overflow-y:auto;transform:translateX(100%);transition:transform .2s;box-sizing:border-box}.navbar-sm-main.active .navbar-sm-content{left:auto;transform:translateX(0)}.navbar-sm-main .navbar-sm-right{top:20px;right:22px}
.navbar-sm-menu{padding-top:54px}.navbar-sm-menu-item{padding-left:0;border-bottom:1px solid #edf1f6}.navbar-sm-menu-item.active{background:transparent}.navbar-sm-menu-item>a{padding:16px 8px;color:#233c59;font-size:16px;line-height:1.6}.navbar-sm-menu-item.active>a{color:var(--ximo-blue);font-weight:700}
.nav-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.home-hero{position:relative;min-height:660px;display:flex;align-items:center;background:linear-gradient(112deg,#f0f7ff,#e9f3ff 70%,#e2edfb);color:var(--ximo-ink);overflow:hidden}
.hero-inner{width:min(1440px,calc(100% - 96px));margin:0 auto;padding:64px 0 70px;display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);gap:64px;align-items:center}.hero-copy{min-width:0;font-size:16px}
.hero-brand{margin:0 0 20px;color:var(--ximo-brand);font-size:14px;font-weight:600;letter-spacing:3px}.hero-title{margin:0;font-size:clamp(44px,3.1vw,64px);line-height:1.42;letter-spacing:-1px;font-weight:800}.hero-title span{display:block}.hero-title em{color:#1c5bbb;font-style:normal}
.hero-detail{margin:25px 0 0;max-width:550px;color:var(--ximo-muted);font-size:17px;line-height:1.95}.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0 0}.hero-tags span{padding:7px 14px;color:#52657e;background:rgba(255,255,255,.88);border:1px solid #e4edf8;border-radius:24px;font-size:13px;line-height:1.6;font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.hero-actions a{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 22px;border:1px solid #d8e5f5;border-radius:28px;text-decoration:none;font-size:15px;font-weight:600;color:#203852;transition:background .18s,transform .18s}.hero-actions a:hover{transform:translateY(-2px);background:#fff}.hero-actions .hero-primary{background:var(--ximo-blue);border-color:var(--ximo-blue);color:#fff;box-shadow:0 8px 22px rgba(23,100,232,.15)}.hero-actions .hero-primary:hover{background:#0954d0}.hero-actions svg{width:18px;height:18px}
.hero-product{position:relative;min-width:0;margin:0;padding:23px 28px 24px;background:rgba(255,255,255,.9);border:1px solid #dce8f8;outline:12px solid rgba(255,255,255,.3);border-radius:28px;box-shadow:0 24px 50px rgba(35,71,118,.14)}
.hero-media-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;color:#56718f;font-size:12px;line-height:1.5}.hero-media-heading strong{color:var(--ximo-brand);font:700 15px/1.5 Arial,sans-serif;letter-spacing:1px}.hero-product picture{display:block}.hero-product img{display:block;width:min(470px,100%);height:auto;margin:14px auto 16px}
.hero-media-links{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}.hero-media-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #e2eaf6;border-radius:20px;background:#f5f8fe;color:#566c85;font-size:12px;line-height:1.5;text-decoration:none}.hero-media-chip:hover{color:var(--ximo-blue);background:#edf4ff}.hero-media-chip svg{width:16px;height:16px;color:var(--ximo-blue)}.hero-media-footer{margin-top:15px;text-align:center;font-size:11px;color:#8a99ac;line-height:1.7}
html[lang="en"] .hero-title{font-size:clamp(40px,2.8vw,58px);letter-spacing:-1.5px;line-height:1.3}
@media(min-width:1921px){.hero-inner{max-width:1560px;padding:82px 0 90px;gap:86px}.home-hero{min-height:760px}.hero-title{font-size:72px}.hero-detail{font-size:19px}.hero-product img{width:min(550px,100%)}}
@media(min-width:1200px) and (max-width:1450px){body{padding-top:84px}.navbar-xs.width_1200{width:calc(100% - 64px);gap:24px;height:84px}.navbar-xs a.logo{flex-basis:198px;width:198px}ul.navbar-xs-menu{gap:10px}ul.navbar-xs-menu>li>a,ul.navbar-xs-menu>li>a:hover{height:84px;padding:0 6px;font-size:14px}ul.navbar-xs-menu>li>a::after{left:6px;right:6px}ul.navbar-xs-menu>li.language{margin-left:2px}.hero-inner{gap:45px}.hero-title{font-size:48px}}
@media(max-width:1199px){body{padding-top:72px}.navbar-xs.sm-hidden{display:none}.hero-inner{width:calc(100% - 64px);gap:36px;padding:54px 0 64px}.hero-title{font-size:40px}.hero-detail{font-size:16px}.hero-product{padding:20px;border-radius:24px;outline-width:8px}.hero-tags{gap:8px}.hero-tags span{font-size:12px;padding:6px 11px}.hero-actions a{font-size:14px;padding:0 16px}}
@media(max-width:900px){.home-hero{min-height:0}.hero-inner{grid-template-columns:1fr;max-width:640px;gap:42px}.hero-title{font-size:44px}.hero-product img{width:min(380px,100%)}.hero-detail{max-width:560px}}
@media(max-width:600px){body{padding-top:64px}.navbar-sm,.navbar-sm-brand{height:64px}.navbar-sm-brand img{width:168px;margin-left:20px}.navbar-sm-right{top:13px;right:20px;gap:9px}.navbar-sm-right .language a{height:34px;font-size:12px;padding:0 10px}.navbar-sm-toggle{height:34px;width:34px}.hero-inner{width:calc(100% - 40px);padding:42px 0 46px;gap:32px}.hero-brand{font-size:12px;letter-spacing:2px;margin-bottom:16px}.hero-title{font-size:36px;letter-spacing:-.8px}.hero-detail{margin-top:18px;font-size:14px;line-height:1.9}.hero-tags{margin-top:18px}.hero-tags span{font-size:11px;padding:5px 10px}.hero-actions{gap:10px;margin-top:22px}.hero-actions a{min-height:46px;font-size:13px;padding:0 15px;gap:8px}.hero-product{padding:18px 16px;border-radius:22px;outline-width:6px}.hero-media-heading{font-size:10px;gap:8px}.hero-media-heading strong{font-size:13px}.hero-product img{margin:16px auto}.hero-media-chip{font-size:11px;padding:7px 9px;gap:5px}.hero-media-links{gap:7px}.hero-media-footer{font-size:10px;margin-top:12px}html[lang="en"] .hero-title{font-size:35px}}
@media(max-width:360px){.hero-title{font-size:32px}.hero-actions a{padding:0 12px;font-size:12px}.hero-media-chip{font-size:10px;padding:6px 7px}.hero-media-chip svg{width:14px;height:14px}.navbar-sm-brand img{width:148px}.navbar-sm-right{right:16px}}
@media(prefers-reduced-motion:reduce){.nav-dropdown,ul.navbar-xs-menu>li>a::after,.hero-actions a,.navbar-sm-content,.nav-chevron,.nav-dropdown-label,ul.navbar-xs-menu>li .nav-dropdown a,ul.navbar-xs-menu>li .nav-dropdown a::before,ul.navbar-xs-menu>li .nav-dropdown a::after{transition:none}ul.navbar-xs-menu>li .nav-dropdown a:is(:hover,:focus-visible) .nav-dropdown-label,li.has-submenu:not(.nav-dismissed):is(:hover,:focus-within)>a .nav-chevron{transform:none}}
