html,body{overflow-x:hidden!important;max-width:100vw!important;width:100%!important}.marquee-bar,.marquee-track{overflow:hidden!important;max-width:100vw!important}.marquee-group{display:inline-flex!important;flex-wrap:nowrap!important}.el-dropdown{position:relative!important;display:inline-block!important;cursor:pointer!important}.language-trigger{color:white!important;font-size:14px!important;padding:8px 12px!important;display:inline-block!important}.el-dropdown>div>.static-dropdown-popper,.el-dropdown .static-dropdown-popper{display:none!important;opacity:0!important;visibility:hidden!important;position:absolute!important;top:100%!important;right:0!important;left:auto!important;z-index:1000!important;min-width:140px!important;background:white!important;border-radius:8px!important;box-shadow:0 4px 16px rgba(0,0,0,0.15)!important;padding:6px 0!important;margin:0!important;inset:auto!important}.el-dropdown:hover .static-dropdown-popper,.el-dropdown:focus-within .static-dropdown-popper{display:block!important;opacity:1!important;visibility:visible!important}.el-dropdown .el-dropdown-menu{padding:0!important;margin:0!important;width:100%!important;list-style:none!important;background:transparent!important;border:none!important}.el-dropdown .el-dropdown-menu__item{display:block!important;width:100%!important;box-sizing:border-box!important;padding:10px 16px!important;margin:0!important;line-height:1.5!important;color:#333!important;font-size:14px!important;cursor:pointer!important;background:transparent!important}.el-dropdown .el-dropdown-menu__item:hover{background-color:#ecf5ff!important;color:#409eff!important}.el-dropdown .el-scrollbar,.el-dropdown .el-scrollbar__wrap,.el-dropdown .el-scrollbar__view,.el-dropdown .el-dropdown__list{overflow:visible!important;width:100%!important;padding:0!important;margin:0!important}section#header .logo{position:absolute!important;left:30px!important;top:18px!important;z-index:1000!important;display:inline-block!important;opacity:1!important}section#header .logo span{color:white!important;font-size:20px!important;font-weight:bold!important}/* hero 人物贴图：这里原本有一条 @media(min-width:991px) 覆盖，把 .graphic-show 撑到 max-width:580px。
实测（1440 视口）580px 时人物图 580x816、top=-81 → 脑袋顶出 hero、盖住页头，即用户反馈的
「贴图都飞到顶上去了」。删掉这条覆盖后回到 index.css 的基础值 500px：
人物图 500x703、top=34，与源项目 Neko/index.php 渲染结果**逐像素一致**（都是 0→588 / -266→438 / 34→738）。
不要再用 overflow:hidden 去"裁" —— 人物的腿本来就要探到下面那块（源项目就是这样设计的），
裁掉会把小腿齐齐切断。 */.section-heading{text-align:center;margin-bottom:60px}.section-heading h2{margin-bottom:15px;padding-bottom:10px;text-align:center;display:block;position:relative;color:#222;font-size:36px;font-weight:700}.section-heading h2:after{content:"";width:50px;height:2px;bottom:0;left:50%;position:absolute;background:#2563eb;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.section-heading h2 span{color:#2563eb}.section-heading h4{font-family:"Poppins",sans-serif;font-weight:400;font-size:16px;line-height:28px;color:#7C7885}#optional-suffixes .suffix-grid{display:flex;align-items:stretch;justify-content:center;gap:18px;margin-bottom:40px}#optional-suffixes .suffix-item{flex:1 1 0px!important;transition:flex .22s ease-out;min-width:56px!important;min-height:320px;will-change:flex;contain:layout style}#optional-suffixes .suffix-item.active{flex:2.2 1 0px!important;min-width:180px!important}@media (min-width:992px){#optional-suffixes .suffix-item.active{flex:2 1 0px!important}#optional-suffixes .suffix-item{flex:1 1 0px!important}#optional-suffixes .suffix-grid{max-width:1000px!important}}#optional-suffixes .suffix-card .suffix-desc,#optional-suffixes .suffix-card .suffix-badges,#optional-suffixes .suffix-card .suffix-meaning{transition:opacity .18s ease;will-change:opacity}#optional-suffixes .suffix-item.active{flex:3}#optional-suffixes .suffix-card{height:100%;border-radius:26px;overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 18px;min-height:200px;cursor:pointer;transition:none;border:1px solid rgba(255,255,255,.25);box-shadow:0 10px 30px rgba(37,99,235,.15)}#optional-suffixes .suffix-card .suffix-name{font-size:22px;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5);opacity:1;transition:all .3s ease;display:flex;align-items:center;gap:8px;white-space:nowrap}#optional-suffixes .suffix-card.active .suffix-name{font-size:24px;opacity:1;justify-content:flex-start;writing-mode:horizontal-tb}#optional-suffixes .suffix-card .suffix-desc{max-height:0;opacity:0;overflow:hidden;transition:all .5s ease-in-out;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}#optional-suffixes .suffix-card.active .suffix-desc{max-height:160px;opacity:1;margin-top:8px}#optional-suffixes .suffix-card .suffix-badges{max-height:0;opacity:0;overflow:hidden;transition:all .5s ease-in-out .15s}#optional-suffixes .suffix-card.active .suffix-badges{max-height:44px;opacity:1;margin-top:6px}@media (max-width:767px){#optional-suffixes .suffix-grid{gap:10px}#optional-suffixes .suffix-card{min-height:180px;padding:20px 16px}#optional-suffixes .suffix-card .suffix-name{font-size:16px}#optional-suffixes .suffix-card.active .suffix-name{font-size:20px}}@media (max-width:480px){#optional-suffixes .suffix-grid{flex-direction:row;gap:8px}#optional-suffixes .suffix-item{flex:0.4 1 0px!important;min-width:46px!important}#optional-suffixes .suffix-item.active{flex:3 1 0px!important;min-width:130px!important}#optional-suffixes .suffix-card{min-height:130px;padding:14px 12px}#optional-suffixes .suffix-item.active .suffix-card{min-height:140px}#optional-suffixes .suffix-item:not(.active) .suffix-card .suffix-dot{width:32px!important;height:32px!important;min-width:32px!important;font-size:14px!important;line-height:32px}}.scroll-top-btn{bottom:0;opacity:0;right:10px;width:52px;height:52px;z-index:144;line-height:52px;font-size:16px;border-radius:50%;text-align:center;position:fixed;visibility:hidden;color:#fff!important;background:#2563eb;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;display:block;text-decoration:none;box-shadow:0 6px 20px rgba(37,99,235,.35)}.scroll-top-btn:hover{color:#fff!important;background:#1d4ed8;-webkit-animation:pulsePrimary 1s 1 ease-in-out;animation:pulsePrimary 1s 1 ease-in-out}.scroll-top-btn.active{opacity:1;bottom:10px;visibility:visible}@keyframes pulsePrimary{0%{box-shadow:0 0 0 0 rgba(37,99,235,.5)}70%{box-shadow:0 0 0 14px rgba(37,99,235,0)}100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}}.home-sticky-nav{transition:all .45s ease}.home-sticky-nav.nav-shrunk{--nav-glass-opacity: .94 !important;--nav-blur: 14px !important;--nav-shadow-opacity: .08 !important}section#header.home-sticky-nav.nav-shrunk ul.top-nav>li>a,section#header.home-sticky-nav.nav-shrunk .el-dropdown .language-trigger,.home-sticky-nav.nav-shrunk .top-nav a,.home-sticky-nav.nav-shrunk .language-trigger{color:#475569!important}.home-sticky-nav.nav-shrunk .logo span{color:#0f172a!important}.home-sticky-nav.nav-shrunk .logo img{filter:brightness(.35)}.home-sticky-nav.nav-shrunk .top-nav a,.home-sticky-nav.nav-shrunk a.logo span,.home-sticky-nav.nav-shrunk .language-trigger{color:#1e293b!important}.home-sticky-nav.nav-shrunk a.logo img,.home-sticky-nav.nav-shrunk .logo-img{filter:brightness(.35)}.home-sticky-nav.nav-shrunk .container{min-height:48px!important}.reveal-on-scroll{opacity:0;-webkit-transform:translateY(40px);transform:translateY(40px);-webkit-transition:opacity .8s ease,-webkit-transform .8s ease;transition:opacity .8s ease,transform .8s ease}.reveal-on-scroll.revealed{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}#optional-suffixes .suffix-card .suffix-acronym,#optional-suffixes .suffix-card .suffix-meaning{color:#ffffff!important;text-shadow:0 1px 8px rgba(0,0,0,.55)}#optional-suffixes .suffix-card .highlight{color:#ffd166!important;font-weight:800}#optional-suffixes .suffix-card .suffix-name,#optional-suffixes .suffix-card .suffix-badge{background:rgba(255,255,255,.22)!important;color:#fff!important;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(4px);padding:6px 12px;border-radius:20px}#optional-suffixes .suffix-card .suffix-badge i{color:#7CFC9A!important}#optional-suffixes .suffix-card .suffix-desc{max-height:0;opacity:0}#optional-suffixes .suffix-card.active .suffix-desc{max-height:160px;opacity:1}#optional-suffixes .suffix-card .suffix-badges{max-height:0;opacity:0}#optional-suffixes .suffix-card.active .suffix-badges{max-height:44px;opacity:1}#highlights-section{background:#f8fafc;padding:90px 0;margin-top:40px;border-radius:28px}.highlight-heading{font-size:36px;font-weight:800;color:#0f172a;margin-bottom:18px;text-align:center}.highlight-lead{font-size:16px;line-height:1.8;color:#64748b;text-align:center;max-width:720px;margin:0 auto 48px}.highlight-number{font-size:46px;font-weight:900;color:#2563eb;line-height:1.1;margin-bottom:8px}.highlight-label{font-size:16px;font-weight:600;color:#0f172a}.highlight-label small{color:#64748b;font-weight:400;font-size:13px}.highlight-btn-group a{display:inline-block;margin:0 8px 12px;padding:12px 30px;border-radius:12px;font-weight:600;text-decoration:none;transition:all .3s ease}.highlight-btn-group a.btn-success{background:#22c55e;color:#fff;box-shadow:0 8px 20px rgba(34,197,94,.25)}.highlight-btn-group a.btn-success:hover{background:#16a34a;transform:translateY(-2px)}.highlight-btn-group a.btn-default{background:#fff;color:#0f172a;border:1.5px solid #e2e8f0}.highlight-btn-group a.btn-default:hover{border-color:#2563eb;color:#2563eb;transform:translateY(-2px)}@media (max-width:767px){.highlight-number{font-size:32px}#highlights-section{padding:50px 0}}#optional-suffixes .suffix-item.active .suffix-card{justify-content:flex-end;align-items:stretch;padding:24px 22px;min-height:260px!important;max-height:none;overflow:visible}@media (max-width:991px){#optional-suffixes .suffix-item.active .suffix-card{min-height:280px!important}}#optional-suffixes .suffix-item.active .suffix-card .suffix-name{font-size:24px!important;margin-bottom:0}#optional-suffixes .suffix-item.active .suffix-card .suffix-desc{max-height:200px!important;margin-top:10px!important;font-size:15px!important;line-height:1.6!important}#optional-suffixes .suffix-item.active .suffix-card .suffix-badges{max-height:80px!important;margin-top:8px!important}#optional-suffixes .suffix-item.active .suffix-card .suffix-badge{font-size:13px!important;padding:6px 12px!important}#optional-suffixes .suffix-item.active .suffix-card .suffix-acronym{font-size:14px!important}#optional-suffixes .suffix-item.active .suffix-card .suffix-meaning{font-size:14px!important;line-height:1.6!important}#optional-suffixes .suffix-item:not(.active) .suffix-card{justify-content:center;align-items:center;padding:0;min-height:260px!important;max-height:none}@media (max-width:991px){#optional-suffixes .suffix-item:not(.active) .suffix-card{min-height:280px!important}}@media (max-width:480px){#optional-suffixes .suffix-item.active .suffix-card{min-height:240px!important}#optional-suffixes .suffix-item:not(.active) .suffix-card{min-height:240px!important}}#optional-suffixes .suffix-card--recommended::before{display:none!important;content:none!important}#optional-suffixes .suffix-grid{touch-action:pan-y}#optional-suffixes .suffix-grid.dragging,.carousel-track.dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}#carousel-section{padding:64px 0 84px;background:linear-gradient(180deg,#ffffff 0%,#f1f5f9 100%)}.carousel-wrap{position:relative;max-width:968px;margin:0 auto;padding:0;overflow:visible}.carousel-track{margin:0}.carousel-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;padding-bottom:4px;scroll-padding-left:calc(50% - 140px);scroll-padding-right:calc(50% - 140px)}.carousel-track::-webkit-scrollbar{display:none}.carousel-track.dragging{cursor:grabbing;scroll-snap-type:none}.carousel-card{flex:0 0 280px;min-width:240px;scroll-snap-align:start;background:#fff;border-radius:20px;padding:34px 28px;border:1px solid #e2e8f0;box-shadow:0 10px 30px rgba(15,23,42,.06);transition:all .3s ease;min-height:210px;display:flex;flex-direction:column}.carousel-card:hover{transform:translateY(-8px);box-shadow:0 16px 40px rgba(37,99,235,.18);border-color:#bfdbfe}.carousel-track{padding-top:12px;padding-bottom:12px}.carousel-icon{width:52px;height:52px;border-radius:14px;display:flex!important;align-items:center!important;justify-content:center!important;margin:0 auto 18px!important;flex-shrink:0}.carousel-icon svg{width:26px;height:26px}.cp1{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff}.cp2{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff}.cp3{background:linear-gradient(135deg,#10b981,#06b6d4);color:#fff}.cp4{background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff}.cp5{background:linear-gradient(135deg,#ec4899,#f97316);color:#fff}.cp6{background:linear-gradient(135deg,#0ea5e9,#2563eb);color:#fff}.carousel-title{font-size:17px;font-weight:700;color:#0f172a;margin-bottom:8px}.carousel-desc{font-size:14px;line-height:1.6;color:#64748b;flex:1}.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.85);color:#64748b;font-size:18px;line-height:1;cursor:pointer;z-index:10;opacity:.9;transition:all .2s ease;box-shadow:0 2px 8px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center}.carousel-arrow:hover{background:#2563eb;color:#fff;opacity:1}.carousel-prev{left:0}.carousel-next{right:0}.carousel-arrow{opacity:.92;background:rgba(255,255,255,.92);border:1px solid rgba(148,163,184,.3)}.carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:28px}.carousel-dots span{width:8px;height:8px;border-radius:50%;background:#cbd5e1;cursor:pointer;transition:all .3s ease}.carousel-dots span.active{background:#2563eb;width:24px;border-radius:4px}@media (max-width:991px){.carousel-card{flex-basis:280px}}@media (max-width:640px){.carousel-track{scroll-padding-left:calc(50% - 140px);scroll-padding-right:calc(50% - 140px)}.carousel-card{flex-basis:280px;min-width:0}.carousel-wrap{padding:0}.carousel-prev{left:0}.carousel-next{right:0}}#optional-suffixes .suffix-grid{max-width:1120px;margin-left:auto;margin-right:auto}#optional-suffixes .suffix-item.active .suffix-card .suffix-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:3em!important}#optional-suffixes .suffix-item.active .suffix-card{min-height:260px!important}#optional-suffixes .suffix-item:not(.active) .suffix-card{min-height:260px!important}#optional-suffixes .suffix-item{flex:1 1 0px!important;min-width:56px!important;min-height:300px}#optional-suffixes .suffix-item.active{flex:2 1 0px!important;min-width:220px!important}#optional-suffixes .suffix-grid{max-width:980px!important;margin-left:auto!important;margin-right:auto!important}@media (max-width:991px){#optional-suffixes .suffix-item.active{flex:2.4 1 0px!important}}#header-holder.main-header #top-content{padding-top:70px;padding-bottom:90px}@media (max-width:991px){#header-holder.main-header #top-content{padding-top:90px;padding-bottom:60px}}#header-holder.main-header .bg-animation .graphic-show .img.img1{margin-top:300px}@media (max-width:990px){#header-holder.main-header .bg-animation .graphic-show .img.img1{margin-top:165px}}@media (max-width:770px){#header-holder.main-header .bg-animation .graphic-show .img.img1{margin-top:190px}}@media (max-width:550px){#header-holder.main-header .bg-animation .graphic-show .img.img1{margin-top:180px}}
#optional-suffixes{background:#fff}
/* ===== hero 猫娘贴图定位（v1.3.53） =====
hero 里的人物贴图 00074-4069378009.png 由 .graphic-show 承载：它 absolute + bottom:0 贴住
hero 的下边，图片本身再用 .img.img1 的 margin-top 往下推。
v1.3.51 把首页顶栏换成「浮在页面上的胶囊」（12~78px）后，人物可见头顶落在 y≈-19，
被顶栏 + 视口上沿切掉（用户反馈「贴图都飞到上面去」）；同时 hero 高度从 588 收到 404，
贴图整体又上移 67px —— 两个问题叠加。
线上实测（1440）：.graphic-show 顶 = -240，图高 703，可见头顶 = imgTop + 2%（图片顶部
有 2% 透明边、底部 2.3%，**不能只看 .img 的 rect**）。
修法：宽屏把贴图缩到 430px，并把 margin-top 调到让可见头顶落在 y≈88（顶栏底 78 再留
10px），此时脚底 ≈666 < 下方卡片顶 700，不会压住卡片。
≤991px 是一列布局、贴图本来就够低（head 300+），保持原值不动。 */
@media (min-width: 992px) {
#header-holder.main-header .bg-animation .graphic-show { max-width: 430px !important; }
}
@media (min-width: 1200px) {
#header-holder.main-header .bg-animation .graphic-show .img.img1 { margin-top: 315px; }
}
/* ===== 顶栏后方那条带子（v1.3.53） =====
顶栏是浮在页面上的胶囊（top:12px / 左右各 16px），它上方与两侧原本露出页面底的雨珠层
（glass-rain.js 的 #glass-rain = rgb(5,7,13) 近黑底 + 城市雨景纹理），首页顶部因此出现
一条黑边；而「产品 / 套餐」页的 body 有浅灰底，同一位置是浅灰 —— 即用户反馈的
「背景覆盖不全」。
修法：把 hero 的蓝色背景层 .bg-animation 往**上**撑出去（它只承担背景，绝对定位、
不占文档流），蓝色一直顶到页面最上边，顶栏就浮在 hero 的蓝底上、与 hero 连成一片。
⚠️ 只能改 top / height：.graphic-show（猫娘）是 bottom:0 贴着 .bg-animation 的**下边**，
一旦改到下边（bottom 或给父级加 padding），贴图位置会跟着跑。
⚠️ 这里故意撑 200px（不是精确的 116px），顶栏高度将来变了也照样盖住。 */
@media (min-width: 769px) {
body.nk-home #header-holder.main-header .bg-animation {
top: -200px;
height: calc(100% + 200px);
}
}
/* ===== 回到顶部按钮美化（原样式是裸圆+细箭头，改成渐变圆角卡片） ===== */
.scroll-top-btn{right:24px;width:46px;height:46px;line-height:1;font-size:0;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 8px 24px rgba(37,99,235,.32),inset 0 1px 0 rgba(255,255,255,.25);transition:opacity .35s ease,bottom .35s ease,transform .25s ease,box-shadow .25s ease,background .25s ease}
.scroll-top-btn.active{bottom:24px}
.scroll-top-btn:hover{background:linear-gradient(135deg,#60a5fa,#2563eb);transform:translateY(-3px);box-shadow:0 14px 34px rgba(37,99,235,.45),inset 0 1px 0 rgba(255,255,255,.3);animation:none}
.scroll-top-btn:active{transform:translateY(-1px) scale(.95)}
.scroll-top-btn svg{width:20px;height:20px}
@media (max-width:575px){.scroll-top-btn{right:14px;width:42px;height:42px;border-radius:12px}.scroll-top-btn.active{bottom:14px}}
/* ===== 内容区块背景：挡住整页那层雨珠 canvas，保证正文可读 =====
雨珠（glass-rain.js）是整页 fixed 背景层。hero 被蓝色斜切盖住；
中间这些区块要各自铺不透明底，否则深色标题会压在深色雨珠上读不清
（用户反馈「云端产品的介绍不全」）。页脚上方 00078 猫娘那块保持透明，
雨珠就在那一段露出来，形成「雨珠 + 猫娘」的观感。 */
#optional-suffixes,#plans-section,#announcements,section.serverstatus,#message2{background:#ffffff}
/* ===== 服务器购买方 / 合作方 LOGO 墙（两行反向无缝平移） =====
无缝原理：track 里放「两份完全相同」的序列，动画把 track 平移 -50% —— 一整个拷贝的宽度，
所以循环到头时画面与第 0 帧完全一致，看不出接缝。
⚠️ 间隔必须用 .clients-item 的 margin-right，不能用 flex 的 gap：
gap 只在元素之间生效，两份拷贝交界处会少一个 gap，-50% 就会错位跳一下。
⚠️ LOGO 原图（G:/LHX个人网站/client）是 480x192、**无透明通道的白底图**，
所以卡片底色用白、不套滤镜，缩到 50px 高就是原样的「自然」观感。 */
#clients-section{padding:70px 0 84px;background:linear-gradient(180deg,#ffffff 0%,#f7fafd 100%)}
.clients-marquee{position:relative;width:100%;margin-top:6px}
.clients-row{position:relative;overflow:hidden;padding:13px 0;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.clients-track{display:flex;width:-webkit-max-content;width:max-content;will-change:transform;
-webkit-animation:clientsScrollL 68s linear infinite;animation:clientsScrollL 68s linear infinite}
.clients-track.is-reverse{-webkit-animation-name:clientsScrollR;animation-name:clientsScrollR;
-webkit-animation-duration:82s;animation-duration:82s}
.clients-row:hover .clients-track{-webkit-animation-play-state:paused;animation-play-state:paused}
@-webkit-keyframes clientsScrollL{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}}
@keyframes clientsScrollL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@-webkit-keyframes clientsScrollR{from{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
@keyframes clientsScrollR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
.clients-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
width:196px;height:100px;margin-right:24px;padding:0 22px;box-sizing:border-box;
background:#fff;border:1px solid #e6eef8;border-radius:16px;box-shadow:0 2px 10px rgba(15,23,42,.035);
-webkit-transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.clients-item img{display:block;width:auto;height:auto;max-width:100%;max-height:56px;object-fit:contain}
.clients-item:hover{transform:translateY(-4px);border-color:#cfe1fb;box-shadow:0 12px 28px rgba(37,99,235,.14)}
@media (max-width:991px){
#clients-section{padding:56px 0 66px}
.clients-item{width:168px;height:86px;margin-right:18px;padding:0 16px}
.clients-item img{max-height:48px}
.clients-track{-webkit-animation-duration:58s;animation-duration:58s}
.clients-track.is-reverse{-webkit-animation-duration:70s;animation-duration:70s}
}
@media (max-width:575px){
#clients-section{padding:48px 0 58px}
.clients-item{width:142px;height:74px;margin-right:12px;padding:0 12px;border-radius:12px}
.clients-item img{max-height:40px}
}
@media (prefers-reduced-motion:reduce){
.clients-track,.clients-track.is-reverse{-webkit-animation:none!important;animation:none!important}
.clients-row{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* ===== 公共顶栏 / 页脚在首页需要「实底」（与「产品 / 套餐」页逐项一致） =====
其它页面的 body 带 glass-enabled，而 glass-enabled 作用域里 --glass-bg-strong = #ffffff，
所以顶栏是纯白实底、页脚是浅色实底。首页 body 是裸 ：
· 顶栏拿到 :root 的 --glass-bg-strong = rgba(255,255,255,.16) + backdrop-blur，
结果亮蓝 hero 透上来，导航文字对比度偏低（实测线上 /cart 为 rgb(255,255,255) 实底、
无 blur，本页为 rgba(255,255,255,.16) + blur(24px)）；
· 页脚的 rgba(255,255,255,.1) + blur 则把背后的雨珠画布糊成彩色斑块透出来。
这里只补这两处的实底，不动首页其余样式。页脚上方 00078 猫娘那块仍保持透明，
雨珠照常在那里露出来。
注意：border / backdrop-filter 故意不加 !important —— 手机端 site-chrome.css 里
`header.glass-topbar{border:none!important;border-bottom:1px solid …!important}` 要能生效。 */
.glass-footer{--glass-border:#e2e8f0;background:#ffffff!important}
/* 就地给定顶栏用的两个边框色变量 —— 与「产品 / 套餐」页一致（那边由 body.glass-enabled 作用域提供，
首页没有）。这样不用手写颜色，glass-theme 与 site-chrome 里原有的
`border:1px solid var(--glass-border-strong)`（桌面）/
`border-bottom:1px solid var(--glass-border)`（手机）会自然算出同色。
首页 :root 把 --glass-border 覆盖成了 rgba(255,255,255,.25)（白底上等于看不见），
这个变量只作用于顶栏子树，不影响首页其它地方。 */
header.glass-topbar{
--glass-border:#e2e8f0;
--glass-border-strong:#cbd5e1;
background:#ffffff!important;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
/* ===== 手机端比例收敛（v1.3.51） =====
线上实测 390px 宽下：hero 高 903px、整页 7501px，标题 48px、区块上下内边距 48~60px，
手机上字号与留白都明显偏大。这里统一收一档；顶栏在 <=768px 是 fixed 且 body 已留 60px，
所以 hero 的 padding-top 要按「顶栏 60px + 视觉留白」给。 */
@media (max-width: 767px) {
/* ---- hero ---- */
#header-holder.main-header #top-content,
#top-content { padding-top: 76px !important; padding-bottom: 30px !important; }
#top-content .big-title,
.big-title { font-size: 27px !important; line-height: 1.34 !important; margin-bottom: 14px !important; }
#top-content .big-title span,
.big-title span { font-size: 27px !important; }
#top-content p,
#main-slider p.main-title { font-size: 13.5px !important; line-height: 1.66 !important; margin-bottom: 18px !important; }
.header-graphic { max-width: 226px !important; }
.home-hero-visual { margin-top: 10px; }
.btn-holder .ybtn { padding: 11px 20px; font-size: 14px; }
/* ---- 区块标题与间距 ---- */
.section-heading { margin-bottom: 26px; }
.section-heading h2,
.nk-sec-title { font-size: 23px !important; margin-bottom: 7px !important; padding-bottom: 7px !important; }
.section-heading h4,
.nk-sec-sub { font-size: 12.5px !important; line-height: 1.6 !important; }
#optional-suffixes { padding-top: 34px !important; padding-bottom: 18px !important; }
#optional-suffixes .suffix-card { min-height: 244px; border-radius: 20px; }
#optional-suffixes .suffix-card .suffix-name { font-size: 19px; }
#plans-section { padding: 38px 0 !important; }
.serverstatus { padding: 38px 0 30px !important; }
#clients-section { padding: 34px 0 44px !important; }
.nk-highlights { padding: 38px 0 !important; }
.nk-stat-num { font-size: 25px !important; }
/* ---- CTA / 页脚贴图 ---- */
.cta-card { padding: 26px 18px; border-radius: 20px; }
.home-footer-image { max-width: 148px !important; }
/* 手机端的页脚处理（<=768px 直接隐藏这块桌面页脚、由底部 Tab Bar 替代）在
public/static/css/site-chrome.css 里，首页与「产品 / 套餐」页行为一致。
页脚上方 00078 猫娘那块不受影响，手机上照常显示。 */
}