/* ==========================================================================
   ysyun 主题主样式
   依赖：all.min.css(Bootstrap3) + base.css + fontawesome.css
   设计：蓝色科技风，主色 #1668dc
   ========================================================================== */

:root {
  --ys-primary: #1668dc;
  --ys-primary-dark: #0f52b3;
  --ys-primary-light: #e8f2ff;
  --ys-text: #1a1f36;
  --ys-text-sub: #5a6479;
  --ys-text-muted: #97a0b3;
  --ys-border: #e8ecf3;
  --ys-bg: #f7f9fc;
  --ys-white: #fff;
  --ys-radius: 8px;
  --ys-radius-lg: 12px;
  --ys-shadow: 0 2px 12px rgba(22, 104, 220, .08);
  --ys-shadow-hover: 0 8px 28px rgba(22, 104, 220, .16);
  --ys-transition: .25s ease;
}

/* ---------- 基础 ---------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--ys-text);
  background: var(--ys-white);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.ys-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

a { color: var(--ys-primary); text-decoration: none; transition: var(--ys-transition); }
a:hover { color: var(--ys-primary-dark); text-decoration: none; }

/* ---------- 按钮 ---------- */
.ys-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 20px;
  border-radius: var(--ys-radius);
  border: 1px solid transparent;
  font-size: 14px;
  cursor: pointer;
  transition: var(--ys-transition);
  white-space: nowrap;
  background: none;
}
.ys-btn-lg { height: 46px; padding: 0 30px; font-size: 15px; }
.ys-btn-block { width: 100%; }

.ys-btn-primary {
  background: var(--ys-primary);
  color: #fff !important;
  border-color: var(--ys-primary);
}
.ys-btn-primary:hover {
  background: var(--ys-primary-dark);
  border-color: var(--ys-primary-dark);
  box-shadow: 0 6px 18px rgba(22, 104, 220, .3);
}

.ys-btn-outline {
  border-color: rgba(255, 255, 255, .6);
  color: #fff !important;
}
.ys-btn-outline:hover {
  background: rgba(255, 255, 255, .14);
  border-color: #fff;
}

.ys-btn-ghost {
  border-color: var(--ys-border);
  color: var(--ys-text) !important;
}
.ys-btn-ghost:hover { border-color: var(--ys-primary); color: var(--ys-primary) !important; }

.ys-btn-text { color: var(--ys-text) !important; padding: 0 10px; }
.ys-btn-text:hover { color: var(--ys-primary) !important; }

/* ==========================================================================
   ① 顶部导航
   ========================================================================== */
.ys-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  transition: background .35s ease, box-shadow .35s ease;
}
/* 滚动后 / 非首页：变为白底实心 */
.ys-header.is-scrolled,
html:not(.ys-home) .ys-header {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
}

/* 非首页：顶部留出固定导航高度，避免内容被遮挡。
   ⚠️ 这条不能删：购物车页的 .qsv-page 顶距是按它下推的 68px 计算的
   （.qsv-page padding-top 只留二级条自身高度 50px），删掉会导致内容被头部盖住。 */
html:not(.ys-home) body { padding-top: 68px; }

/* 顶部导航改为通栏贴边（左右各 32px），不再用 .ys-container 的 1240px 居中。
   原因：.ys-container{max-width:1240px;margin:0 auto} 在 1920 屏下左右各空 340px，
   整条导航（LOGO/菜单/头像）看上去「挤在中间」。
   注意：.ys-container 是**全站通用容器**（banner、页脚也在用），
   所以这里必须限定在 .ys-header 作用域内覆盖，否则会把页面其他区块一起改乱。 */
.ys-header .ys-container {
  max-width: none;
  margin: 0;
  padding: 0 32px;
}

.ys-header-inner {
  display: flex;
  align-items: center;
  height: 68px;
  gap: 32px;
}

/* --- 透明状态下：导航文字与 Logo 变白 --- */
/* 注意：以下几组「变白」规则都限定在桌面端（min-width: 993px）。
   原因是移动端导航是白底抽屉，而抽屉本身就位于 .ys-header 内部，
   若这些规则全局生效，抽屉里的导航链接/登录按钮会被染成白字，
   在白底上就是「打开菜单看不到内容」。移动端抽屉的文字颜色见文件末尾
   的响应式段落。 */
@media (min-width: 993px) {
  html.ys-home .ys-header:not(.is-scrolled) .ys-nav-link {
    color: rgba(255, 255, 255, .94) !important;
  }
  html.ys-home .ys-header:not(.is-scrolled) .ys-nav-link:hover {
    color: #fff !important;
  }
  html.ys-home .ys-header:not(.is-scrolled) .ys-user-name,
  html.ys-home .ys-header:not(.is-scrolled) .ys-btn-text {
    color: rgba(255, 255, 255, .94) !important;
  }
  html.ys-home .ys-header:not(.is-scrolled) .ys-user-name:hover,
  html.ys-home .ys-header:not(.is-scrolled) .ys-btn-text:hover {
    color: #fff !important;
  }
  /* 透明状态下描边按钮改为白边 */
  html.ys-home .ys-header:not(.is-scrolled) .ys-btn-ghost {
    border-color: rgba(255, 255, 255, .5);
    color: #fff !important;
  }
  html.ys-home .ys-header:not(.is-scrolled) .ys-btn-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .14);
  }
}
html.ys-home .ys-header:not(.is-scrolled) .ys-hotline > i { color: rgba(255, 255, 255, .9); }
html.ys-home .ys-header:not(.is-scrolled) .ys-hotline-label { color: rgba(255, 255, 255, .62); }
html.ys-home .ys-header:not(.is-scrolled) .ys-hotline-num { color: #fff; }
/* 汉堡按钮：移动端头部在首页是透明覆盖在深色 Banner 上的，横线用白色；
   滚动后头部转白底（.is-scrolled），回落到基础样式的深色。 */
html.ys-home .ys-header:not(.is-scrolled) .ys-nav-toggle span { background: #fff; }
/* 透明状态下 Logo 文字用白色（图片 Logo 通常自带色，不做处理） */
html.ys-home .ys-header:not(.is-scrolled) .ys-logo-text { color: #fff; }

/* Logo */
.ys-logo { flex-shrink: 0; display: flex; align-items: center; }
.ys-logo img { max-height: 38px; display: block; }
.ys-logo-text { font-size: 22px; font-weight: 700; color: var(--ys-primary); letter-spacing: .5px; transition: color .35s; }

/* 导航列表 */
.ys-nav { flex: 1; min-width: 0; }
/* .ys-nav-main 是移动端双栏抽屉的定位容器（左列菜单 / 右列内容面板）。
   桌面端用 display: contents 让它不参与布局，使 .ys-nav-list 仍像是
   .ys-header-inner 的直接子元素，桌面端排布完全不受影响。 */
.ys-nav-main { display: contents; }
.ys-nav-list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ys-nav-item { position: relative; }

.ys-nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 68px;
  padding: 0 14px;
  color: var(--ys-text) !important;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .3s ease;
}
.ys-nav-link:hover,
.ys-nav-item:hover > .ys-nav-link { color: var(--ys-primary) !important; }
.ys-nav-arrow { font-size: 11px; transition: transform var(--ys-transition); }
.ys-nav-item:hover .ys-nav-arrow { transform: rotate(180deg); }

/* 下拉容器 */
.ys-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: 8px;
  background: #fff;
  border-radius: var(--ys-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
  border: 1px solid var(--ys-border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .26s ease, transform .26s ease, visibility .26s;
}
/* 展开触发只写在桌面端。
   这里是本文件最容易踩的坑：`:hover` 规则的特异性高于移动端布局里的
   类选择器，如果把它留在基础样式区，抽屉里的面板会在「手指/鼠标悬停时」
   被反向隐藏（表现为点开菜单是空的）。放进 min-width 媒体查询后，
   桌面与移动端各管各的，不再互相覆盖。 */
@media (min-width: 993px) {
  .ys-nav-item:hover > .ys-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
  /* 商品型全宽面板同样由悬停展开（它继承 .ys-dropdown 的盒模型，
     但定位是 fixed，需要自己的显隐规则） */
  .ys-nav-item:hover > .ys-dropdown-mega { opacity: 1; visibility: visible; transform: translateY(0); }
}
/* 宽屏触屏（平板横屏）：没有 hover 可用，悬停规则永远不会触发，
   退回「点一下展开」——由 JS 切换 .is-open。 */
@media (min-width: 993px) and (hover: none) {
  .ys-nav-item.is-open > .ys-dropdown,
  .ys-nav-item.is-open > .ys-dropdown-mega { opacity: 1; visibility: visible; transform: translateY(0); }
}

.ys-dropdown-list { list-style: none; margin: 0; padding: 0; }
.ys-dropdown-list > li { position: relative; }
.ys-dropdown-list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--ys-radius);
  color: var(--ys-text) !important;
  font-size: 14px;
  white-space: nowrap;
}
.ys-dropdown-list > li > a:hover { background: var(--ys-primary-light); color: var(--ys-primary) !important; }
.ys-sub-arrow { font-size: 11px; opacity: .55; transition: transform .22s ease; }
.ys-dropdown-list > li.has-child > a::after {
  content: "\f105";
  font-family: FontAwesome;
  position: absolute;
  right: 12px;
  font-size: 12px;
  opacity: .5;
}

/* 三级菜单 */
.ys-dropdown-sub {
  position: absolute;
  top: -8px;
  left: 100%;
  min-width: 180px;
  padding: 8px;
  margin-left: 4px;
  background: #fff;
  border-radius: var(--ys-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
  border: 1px solid var(--ys-border);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: all .22s ease;
}
.ys-dropdown-list > li:hover > .ys-dropdown-sub { opacity: 1; visibility: visible; }
.ys-dropdown-sub a {
  display: block;
  padding: 8px 14px;
  border-radius: var(--ys-radius);
  color: var(--ys-text) !important;
  font-size: 14px;
  white-space: nowrap;
}
.ys-dropdown-sub a:hover { background: var(--ys-primary-light); color: var(--ys-primary) !important; }

/* 商品型面板：全宽（贴齐视口宽度）
   触发方式：鼠标悬停导航项即展开。面板不拦截悬停（它在 .ys-nav-item 内，
   鼠标移入面板时父项仍处于 :hover），因此从左到右滑进面板不会中途收起。 */
.ys-dropdown-mega {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  width: 100%;
  min-width: 0;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
  padding: 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--ys-border);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .26s ease, transform .26s ease, visibility .26s;
}

.ys-mega { display: block; max-width: 1240px; margin: 0 auto; padding: 14px 20px 28px; }

/* 分组块：标题 + 卡片网格 */
.ys-mega-block { padding: 20px 0 4px; border-top: 1px solid var(--ys-border); }
.ys-mega-block:first-child { border-top: none; padding-top: 6px; }
.ys-mega-block-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ys-text) !important;
  margin-bottom: 16px;
}
.ys-mega-block-title i { font-size: 12px; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.ys-mega-block-title:hover { color: var(--ys-primary) !important; }
.ys-mega-block-title:hover i { opacity: 1; transform: translateX(3px); }

.ys-mega-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 20px; }
.ys-mega-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-radius-lg);
  background: #fff;
  transition: var(--ys-transition);
}
.ys-mega-card:hover {
  border-color: var(--ys-primary);
  box-shadow: var(--ys-shadow-hover);
  transform: translateY(-2px);
}
.ys-mega-card-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--ys-primary-light);
  color: var(--ys-primary);
  font-size: 17px;
  transition: var(--ys-transition);
}
.ys-mega-card:hover .ys-mega-card-icon { background: var(--ys-primary); color: #fff; }
.ys-mega-card-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ys-mega-card-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ys-text);
  line-height: 1.4;
}
.ys-mega-card:hover .ys-mega-card-name { color: var(--ys-primary); }
.ys-mega-card-go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ys-text-muted);
  transition: var(--ys-transition);
}
.ys-mega-card:hover .ys-mega-card-go { color: var(--ys-primary); }
.ys-mega-card-go i { font-size: 10px; }
.ys-mega-card-tag {
  flex-shrink: 0;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
  padding: 0 6px;
  border-radius: 3px;
  color: #e5484d;
  background: rgba(229, 72, 77, .1);
}

/* 移动端折叠组：桌面端不显示（抽屉右列里改为分组折叠） */
.ys-acc { display: none; }

/* 右侧操作区 */
.ys-header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.ys-hotline { display: flex; align-items: center; gap: 8px; }
.ys-hotline > i { font-size: 18px; color: var(--ys-primary); }
.ys-hotline-label { display: block; font-size: 11px; color: var(--ys-text-muted); line-height: 1.2; }
.ys-hotline-num { display: block; font-size: 15px; font-weight: 700; color: var(--ys-text); line-height: 1.2; }

.ys-user { display: flex; align-items: center; gap: 10px; }
.ys-user-name { color: var(--ys-text) !important; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.ys-user-name:hover { color: var(--ys-primary) !important; }

/* 移动端菜单按钮 */
/* 移动端专用：抽屉底部的用户操作区，桌面端不显示 */
.ys-nav-user { display: none; }

.ys-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 8px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
}
.ys-nav-toggle span { display: block; height: 2px; background: var(--ys-text); border-radius: 2px; transition: var(--ys-transition); }
.ys-nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ys-nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.ys-nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ys-nav-mask {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 998;
}
.ys-nav-mask.is-show { display: block; }

/* ==========================================================================
   ② Banner
   ========================================================================== */
.ys-banner { position: relative; background: #0a1830; }

/* stage：为分页点/箭头提供定位上下文（控件不可放进 .swiper-container 内，
   否则会与 Swiper 自身的指针处理冲突，导致切换卡死） */
.ys-banner-stage { position: relative; }

.ys-banner-swiper { position: relative; height: 500px; overflow: hidden; }
.ys-banner-swiper .swiper-slide {
  height: 100%;
  /* 深色打底：与插画底色同系，图片透明区融为背景 */
  background-color: #071229;
  background-image:
    radial-gradient(1100px 520px at 78% 42%, rgba(28, 92, 200, .5) 0%, transparent 62%),
    radial-gradient(760px 400px at 12% 88%, rgba(12, 52, 120, .55) 0%, transparent 60%),
    linear-gradient(120deg, #061024 0%, #0b2450 48%, #0e2f68 100%);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* ---------- 背景插画层（带缓慢推镜动画） ---------- */
.ys-slide-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  transform-origin: 70% 50%;
  will-change: transform;
  pointer-events: none;
}
.ys-slide-1 .ys-slide-bg { background-image: url(../img/banner/banner1.png); }
.ys-slide-2 .ys-slide-bg { background-image: url(../img/banner/banner3.png); }
.ys-slide-3 .ys-slide-bg { background-image: url(../img/banner/banner7.png); }

/* 慢速推镜：仅在当前激活屏播放，切换即重启 */
@keyframes ysKenBurns {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.5%, -1%, 0); }
}
html.ys-anim .ys-banner-swiper .swiper-slide-active .ys-slide-bg {
  animation: ysKenBurns 9s ease-out forwards;
}

/* 左→右暗角，保证文字可读 */
.ys-banner-swiper .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(4, 12, 28, .82) 0%, rgba(4, 12, 28, .55) 38%, rgba(4, 12, 28, .12) 62%, transparent 82%);
  pointer-events: none;
}

.ys-banner-content { position: relative; z-index: 2; max-width: 640px; color: #fff; }

/* ---------- 文字分层入场 ----------
   基准样式保持可见（opacity 不变），仅由动画负责「0 → 1」的入场。
   这样即使动画不执行（节流、prefers-reduced-motion、渲染异常），
   文字依然是可见的，不会白屏。 */
@keyframes ysRiseIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.ys-anim .ys-banner-swiper .swiper-slide-active .ys-banner-content > * {
  animation: ysRiseIn .8s cubic-bezier(.22, .68, .32, 1) both;
}
html.ys-anim .ys-banner-swiper .swiper-slide-active .ys-banner-title { animation-delay: .12s; }
html.ys-anim .ys-banner-swiper .swiper-slide-active .ys-banner-sub { animation-delay: .26s; }
html.ys-anim .ys-banner-swiper .swiper-slide-active .ys-banner-points { animation-delay: .38s; }
html.ys-anim .ys-banner-swiper .swiper-slide-active .ys-banner-actions { animation-delay: .5s; }

/* 用户关闭动效时，直接呈现最终状态（内容始终可见） */
@media (prefers-reduced-motion: reduce) {
  html.ys-anim .ys-banner-swiper .swiper-slide-active .ys-banner-content > *,
  html.ys-anim .ys-banner-swiper .swiper-slide-active .ys-slide-bg {
    animation: none !important;
  }
}

.ys-banner-title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.32;
  color: #fff;
  margin: 0 0 18px;
  letter-spacing: -.5px;
}
.ys-banner-sub { font-size: 17px; color: rgba(255, 255, 255, .86); margin: 0 0 22px; }

.ys-banner-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
}
.ys-banner-points li { font-size: 14px; color: rgba(255, 255, 255, .92); display: flex; align-items: center; gap: 7px; }
.ys-banner-points i { color: #6ee7a8; font-size: 15px; }

.ys-banner-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* 分页点：贴齐内容容器左下 */
.ys-banner-ctrl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 56px;
  z-index: 12;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  pointer-events: none;
}
.ys-banner-ctrl > * { pointer-events: auto; }

/* 重置 swiper.css 对 .swiper-pagination 的绝对定位，否则分页点会脱离
   flex 流并压到相邻元素上 */
.ys-banner-ctrl .swiper-pagination {
  position: static;
  display: flex;
  gap: 8px;
  width: auto;
  text-align: left;
}

.ys-banner-pagination { display: flex; gap: 8px; }
span.ys-banner-pagination .swiper-pagination-bullet, .ys-banner-pagination span.swiper-pagination-bullet {
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .4);
  opacity: 1;
  margin: 0 !important;
  transition: var(--ys-transition);
}
.ys-banner-pagination span.swiper-pagination-bullet-active, span.ys-banner-pagination .swiper-pagination-bullet-active { background: #fff; }

/* 切换箭头：贴屏幕两侧、垂直居中（悬停整屏高亮，箭头更明显） */
.ys-banner-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .26);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: var(--ys-transition);
  backdrop-filter: blur(6px);
  user-select: none;
}
.ys-banner-btn:hover { background: rgba(255, 255, 255, .3); border-color: #fff; }
.ys-banner-prev { left: 28px; }
.ys-banner-next { right: 28px; }

/* ==========================================================================
   ③ 通用区块
   ========================================================================== */
.ys-section { padding: 72px 0; }
.ys-section-head { text-align: center; margin-bottom: 48px; }
.ys-section-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--ys-text);
  margin: 0 0 12px;
  letter-spacing: -.5px;
}
.ys-section-sub { font-size: 15px; color: var(--ys-text-sub); margin: 0; }

/* ==========================================================================
   ④ 产品卡片
   ========================================================================== */
.ys-products { background: var(--ys-white); }

.ys-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.ys-product-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-radius-lg);
  transition: var(--ys-transition);
  position: relative;
  overflow: hidden;
}
.ys-product-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ys-primary), #4d9bff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ys-transition);
}
.ys-product-card:hover { transform: translateY(-6px); box-shadow: var(--ys-shadow-hover); border-color: transparent; }
.ys-product-card:hover::before { transform: scaleX(1); }

.ys-product-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ys-product-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--ys-primary-light);
  color: var(--ys-primary);
  font-size: 20px;
  flex-shrink: 0;
}
.ys-product-name { font-size: 17px; font-weight: 600; margin: 0; color: var(--ys-text); }

.ys-product-desc {
  font-size: 13px;
  color: var(--ys-text-sub);
  margin: 0 0 16px;
  min-height: 40px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ys-product-features { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; }
.ys-product-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ys-text-sub);
  padding: 5px 0;
}
.ys-product-features i { color: var(--ys-primary); font-size: 12px; }

.ys-product-foot { margin-top: auto; }

.ys-empty-tip {
  text-align: center;
  padding: 48px 20px;
  background: var(--ys-bg);
  border: 1px dashed var(--ys-border);
  border-radius: var(--ys-radius-lg);
  color: var(--ys-text-muted);
  font-size: 14px;
}
.ys-empty-tip i { color: var(--ys-primary); margin-right: 6px; }

/* 产品卡片内的二级分类 */
.ys-product-features a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  color: var(--ys-text-sub) !important;
  font-size: 13px;
}
.ys-product-features a:hover { color: var(--ys-primary) !important; }
.ys-product-count { margin-left: auto; font-size: 12px; color: var(--ys-text-muted); }

/* ==========================================================================
   ③ 核心优势 / 合作伙伴（浅灰底与白底交替）
   ========================================================================== */
.ys-advantages { background: var(--ys-bg); }
.ys-partners { background: var(--ys-white); }

/* ---------- 合作伙伴：横向滚动 Logo 墙 ----------
   每行一条无限循环的轨道。无缝的关键：轨道内含两份完全相同的
   Logo 序列，动画从 0 平移到 -50%，此刻第二份恰好顶到第一份的位置，
   循环回 0 时视觉上没有跳变（见 index.html 里渲染两遍 items 的写法）。 */
.ys-partners-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.ys-marquee {
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  /* 两侧渐隐遮罩：压住 Logo 进出画面时的硬边。
     用 mask 而不是叠一层渐变色的 div，是为了让白色底也适用——
     叠白色渐变在浅灰底区块上会露出色差。 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 88px, #000 calc(100% - 88px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 88px, #000 calc(100% - 88px), transparent 100%);
}

.ys-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: ysMarquee linear infinite;
  animation-duration: 60s;                 /* 兜底值；实际由 CSS 变量覆盖 */
  animation-duration: var(--ys-marquee-dur, 60s);
}
/* 反向行：从 -50% 回到 0，视觉上自右向左 */
.ys-marquee-reverse .ys-marquee-track {
  animation-direction: reverse;
}
@keyframes ysMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* 悬停暂停，方便看清某个 Logo */
.ys-marquee:hover .ys-marquee-track { animation-play-state: paused; }

/* 单个 Logo 卡片 */
.ys-partner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-right: 16px;
  padding: 10px 16px;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-radius-lg);
  background: var(--ys-bg);
  transition: border-color var(--ys-transition), background var(--ys-transition);
}
.ys-partner:hover {
  border-color: rgba(22, 104, 220, .3);
  background: #fff;
}
.ys-partner img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.ys-partner-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ys-text);
  white-space: nowrap;
}

/* 用户偏好减少动效时停下滚动，改为可横向拨动浏览。
   这也是无障碍要求：持续移动的内容对前庭敏感人群不友好。 */
@media (prefers-reduced-motion: reduce) {
  .ys-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ys-marquee-track { animation: none; }
}

@media (max-width: 992px) {
  .ys-partners-rows { gap: 12px; }
  .ys-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
  .ys-partner { padding: 8px 12px; margin-right: 12px; }
  .ys-partner img { width: 26px; height: 26px; }
  .ys-partner-name { font-size: 13px; }
}

/* ==========================================================================
   ⑤ 数据统计（深色区块）
   ========================================================================== */
.ys-nodes {
  background-color: #071229;
  background-image:
    radial-gradient(900px 400px at 15% 20%, rgba(28, 92, 200, .45) 0%, transparent 62%),
    linear-gradient(120deg, #061024 0%, #0b2450 55%, #0e2f68 100%);
  color: #fff;
}
.ys-section-head-light .ys-section-title { color: #fff; }
.ys-section-head-light .ys-section-sub { color: rgba(255, 255, 255, .72); }

.ys-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ys-stat { text-align: center; padding: 34px 16px; border-radius: var(--ys-radius-lg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.ys-stat-num { font-size: 40px; font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -1px; }
.ys-stat-num span { font-size: 20px; font-weight: 600; margin-left: 2px; }
.ys-stat-label { margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .72); }

/* ==========================================================================
   ⑥ 首页新闻（标题行带「查看全部」）
   ========================================================================== */
.ys-home-news { background: var(--ys-bg); }
.ys-section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  margin-bottom: 36px;
}

/* ==========================================================================
   ⑦ 行动号召（浅底 + 深色卡片，与上方深色统计区之间留出浅色分隔）
   ========================================================================== */
.ys-cta { padding: 72px 0 88px; background: var(--ys-bg); }
.ys-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 46px 48px;
  border-radius: 16px;
  background-color: #0b2450;
  background-image:
    radial-gradient(600px 300px at 88% 30%, rgba(28, 92, 200, .6) 0%, transparent 68%),
    linear-gradient(110deg, #061024 0%, #0d2b5e 100%);
  color: #fff;
}
.ys-cta-title { font-size: 28px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.ys-cta-sub { font-size: 15px; color: rgba(255, 255, 255, .76); margin: 0; }
.ys-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 992px) {
  .ys-stats { grid-template-columns: repeat(2, 1fr); }
  .ys-stat-num { font-size: 32px; }
  .ys-section-head-row { flex-direction: column; align-items: flex-start; }
  .ys-cta-inner { padding: 34px 26px; }
  .ys-cta-title { font-size: 23px; }
}

@media (max-width: 576px) {
  .ys-cta { padding-bottom: 64px; }
  .ys-stat { padding: 24px 12px; }
  .ys-stat-num { font-size: 26px; }
  .ys-cta-actions { width: 100%; }
  .ys-cta-actions .ys-btn { flex: 1; }
}

/* ==========================================================================
   ⑤ 内页通用（产品页 / 新闻 / 帮助 / 法务 / 单页）
   内页没有全屏 Banner，用一段深色 page-hero 承接固定导航，保持与首页同调性
   ========================================================================== */
.ys-page-hero {
  position: relative;
  padding: 132px 0 56px;
  background-color: #071229;
  background-image:
    radial-gradient(900px 380px at 80% 12%, rgba(28, 92, 200, .46) 0%, transparent 64%),
    linear-gradient(120deg, #061024 0%, #0b2450 52%, #0e2f68 100%);
  color: #fff;
  overflow: hidden;
}
.ys-page-hero::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -220px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(255, 255, 255, .09) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.ys-page-hero-inner { position: relative; z-index: 2; }
.ys-page-title {
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -.5px;
}
.ys-page-sub { font-size: 15px; color: rgba(255, 255, 255, .78); margin: 0; max-width: 760px; line-height: 1.8; }

/* 面包屑 */
.ys-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 13px; }
.ys-crumb li { color: rgba(255, 255, 255, .6); }
.ys-crumb a { color: rgba(255, 255, 255, .78) !important; }
.ys-crumb a:hover { color: #fff !important; }
.ys-crumb li + li::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, .35); }

/* 内页正文排版 */
.ys-main { padding: 56px 0 72px; }
.ys-article { font-size: 15px; line-height: 1.9; color: var(--ys-text-sub); }
.ys-article h1, .ys-article h2, .ys-article h3, .ys-article h4 { color: var(--ys-text); margin: 28px 0 14px; font-weight: 600; }
.ys-article h2 { font-size: 22px; }
.ys-article h3 { font-size: 18px; }
.ys-article p { margin: 0 0 16px; }
.ys-article img { max-width: 100%; height: auto; border-radius: var(--ys-radius); }
.ys-article ul, .ys-article ol { padding-left: 22px; margin: 0 0 16px; }
.ys-article li { margin-bottom: 8px; }
.ys-article table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.ys-article th, .ys-article td { border: 1px solid var(--ys-border); padding: 10px 12px; text-align: left; }
.ys-article th { background: var(--ys-bg); color: var(--ys-text); font-weight: 600; }
.ys-article blockquote {
  margin: 0 0 16px;
  padding: 12px 18px;
  border-left: 3px solid var(--ys-primary);
  background: var(--ys-primary-light);
  border-radius: 0 var(--ys-radius) var(--ys-radius) 0;
  color: var(--ys-text-sub);
}
/* 详情页正文用深色文字，避免继承 hero 的白色 */
.ys-article, .ys-article p, .ys-article div, .ys-article span { color: var(--ys-text-sub); }
.ys-article h1, .ys-article h2, .ys-article h3, .ys-article h4, .ys-article strong { color: var(--ys-text); }

/* 文章头部信息 */
.ys-article-head { padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--ys-border); }
.ys-article-title { font-size: 26px; font-weight: 700; color: var(--ys-text); margin: 0 0 12px; line-height: 1.4; }
.ys-article-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--ys-text-muted); }
.ys-article-meta i { margin-right: 5px; }

/* ==========================================================================
   ⑥ 列表页（新闻 / 帮助）
   ========================================================================== */
.ys-list-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }

.ys-list { display: grid; gap: 16px; }
.ys-list-item {
  display: block;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-radius-lg);
  transition: var(--ys-transition);
}
.ys-list-item:hover { transform: translateY(-3px); box-shadow: var(--ys-shadow-hover); border-color: transparent; }
.ys-list-title { font-size: 17px; font-weight: 600; color: var(--ys-text) !important; margin: 0 0 8px; line-height: 1.5; }
.ys-list-item:hover .ys-list-title { color: var(--ys-primary) !important; }
.ys-list-desc {
  font-size: 14px;
  color: var(--ys-text-sub);
  margin: 0 0 12px;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ys-list-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--ys-text-muted); }
.ys-list-meta i { margin-right: 5px; }

/* 侧栏 */
.ys-side { display: grid; gap: 20px; position: sticky; top: 88px; }
.ys-side-box { padding: 22px; background: #fff; border: 1px solid var(--ys-border); border-radius: var(--ys-radius-lg); }
.ys-side-title { font-size: 15px; font-weight: 600; color: var(--ys-text); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ys-border); }
.ys-side-list { list-style: none; margin: 0; padding: 0; }
.ys-side-list li { margin-bottom: 4px; }
.ys-side-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--ys-radius);
  color: var(--ys-text-sub) !important;
  font-size: 14px;
}
.ys-side-list a:hover, .ys-side-list a.is-active { background: var(--ys-primary-light); color: var(--ys-primary) !important; }
.ys-side-count { font-size: 12px; color: var(--ys-text-muted); }

/* 搜索框 */
.ys-search { display: flex; gap: 8px; }
.ys-search input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-radius);
  font-size: 14px;
  color: var(--ys-text);
  background: #fff;
  outline: none;
  transition: var(--ys-transition);
}
.ys-search input:focus { border-color: var(--ys-primary); box-shadow: 0 0 0 3px rgba(22, 104, 220, .12); }
.ys-search button {
  width: 46px !important;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid var(--ys-primary);
  border-radius: var(--ys-radius);
  background: var(--ys-primary);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: var(--ys-transition);
}
.ys-search button:hover { background: var(--ys-primary-dark); border-color: var(--ys-primary-dark); }

/* ==========================================================================
   ⑦ 产品列表（分类下的可购买产品）
   ========================================================================== */
.ys-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ys-plan {
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-radius-lg);
  transition: var(--ys-transition);
}
.ys-plan:hover { transform: translateY(-5px); box-shadow: var(--ys-shadow-hover); border-color: transparent; }
.ys-plan-name { font-size: 17px; font-weight: 600; color: var(--ys-text); margin: 0 0 10px; }
.ys-plan-desc {
  font-size: 13px;
  color: var(--ys-text-sub);
  margin: 0 0 18px;
  line-height: 1.7;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   ⑦之一 首页「产品与服务」：横向分组 Tab
   ========================================================================== */
.ys-tabs { position: relative; }

/* 标签栏：等宽居中、底部一条轨道，选中项主色下划线 */
.ys-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--ys-border);
}
.ys-tabs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--ys-text-sub);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--ys-transition), border-color var(--ys-transition);
}
.ys-tabs-btn:hover { color: var(--ys-primary); }
.ys-tabs-btn.is-active {
  color: var(--ys-primary);
  border-bottom-color: var(--ys-primary);
  font-weight: 600;
}
.ys-tabs-btn:focus-visible {
  outline: 2px solid var(--ys-primary);
  outline-offset: 2px;
  border-radius: var(--ys-radius) var(--ys-radius) 0 0;
}
.ys-tabs-count {
  font-style: normal;
  font-size: 12px;
  line-height: 1.6;
  padding: 0 7px;
  border-radius: 9px;
  background: var(--ys-bg);
  color: var(--ys-text-muted);
  transition: var(--ys-transition);
}
.ys-tabs-btn.is-active .ys-tabs-count {
  background: var(--ys-primary-light);
  color: var(--ys-primary);
}

/* 面板：默认隐藏，只有 .is-active 显示 */
.ys-tabs-panel { display: none; }
.ys-tabs-panel.is-active { display: block; animation: ysTabIn .32s ease both; }
@keyframes ysTabIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ys-tabs-panel.is-active { animation: none; }
}

/* 商品卡：顶部标出所属二级分组 + 库存，中部名称与配置介绍 */
.ys-plan-tab { padding-top: 18px; }
.ys-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ys-plan-group {
  font-size: 12px;
  line-height: 1.8;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--ys-primary-light);
  color: var(--ys-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ys-plan-stock-inline { font-size: 12px; color: var(--ys-text-muted); flex-shrink: 0; }

/* 配置介绍：后台商品「描述」拆成的逐行配置项（CPU：2核 / 内存：2G …） */
.ys-plan-specs {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.ys-plan-specs li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ys-text-sub);
}
.ys-plan-specs li i {
  color: var(--ys-primary);
  font-size: 11px;
  margin-top: 6px;
  flex-shrink: 0;
}
.ys-plan-specs li span { min-width: 0; word-break: break-word; }

/* 卡片内的购买按钮统一贴底：同排卡片高度由网格拉伸对齐，
   没有配置介绍的商品（按钮上方无内容）也能与其他卡片的按钮齐平。 */
.ys-plan-tab > .ys-btn { margin-top: auto; }
.ys-plan-tab .ys-plan-price { margin-top: 0; }

.ys-plan-amount-free { color: var(--ys-primary); font-size: 22px; }

@media (max-width: 992px) {
  .ys-tabs-nav { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ys-tabs-nav::-webkit-scrollbar { display: none; }
  .ys-tabs-btn { padding: 12px 16px; font-size: 14px; }
}
.ys-plan-price { display: flex; align-items: baseline; gap: 5px; margin-bottom: 16px; }
.ys-plan-amount { font-size: 26px; font-weight: 700; color: var(--ys-danger, #e5484d); letter-spacing: -.5px; }
.ys-plan-cycle { font-size: 13px; color: var(--ys-text-muted); }
.ys-plan-stock { font-size: 12px; color: var(--ys-text-muted); margin-bottom: 12px; }

/* ==========================================================================
   ⑧ 分页
   ========================================================================== */
.ys-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
.ys-pager a, .ys-pager span {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-radius);
  background: #fff;
  color: var(--ys-text-sub) !important;
  font-size: 14px;
  transition: var(--ys-transition);
}
.ys-pager a:hover { border-color: var(--ys-primary); color: var(--ys-primary) !important; }
.ys-pager .is-active { background: var(--ys-primary); border-color: var(--ys-primary); color: #fff !important; font-weight: 600; }
.ys-pager .is-disabled { opacity: .45; cursor: not-allowed; }

/* ==========================================================================
   ⑨ 通用占位 / 空态 / 维护模式
   ========================================================================== */
.ys-empty { text-align: center; padding: 60px 24px; background: #fff; border: 1px dashed var(--ys-border); border-radius: var(--ys-radius-lg); }
.ys-empty i { font-size: 42px; color: var(--ys-text-muted); margin-bottom: 16px; display: block; }
.ys-empty p { margin: 0; color: var(--ys-text-muted); font-size: 14px; }

.ys-holder { text-align: center; padding: 120px 24px; }
.ys-holder-code { font-size: 96px; font-weight: 800; line-height: 1; margin: 0 0 18px; letter-spacing: -2px;
  background: linear-gradient(120deg, var(--ys-primary) 0%, #4d9bff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ys-holder-title { font-size: 22px; font-weight: 600; color: var(--ys-text); margin: 0 0 12px; }
.ys-holder-text { font-size: 14px; color: var(--ys-text-sub); margin: 0 0 26px; }

/* 双栏图文（关于我们 / 产品介绍） */
.ys-split { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px; align-items: center; }
.ys-split-img img { width: 100%; height: auto; border-radius: var(--ys-radius-lg); display: block; }
.ys-split-title { font-size: 26px; font-weight: 700; color: var(--ys-text); margin: 0 0 16px; }

/* 特性卡片网格 */
.ys-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ys-feature {
  padding: 26px 22px;
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-radius-lg);
  transition: var(--ys-transition);
}
.ys-feature:hover { transform: translateY(-4px); box-shadow: var(--ys-shadow-hover); border-color: transparent; }
.ys-feature-icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--ys-primary-light);
  color: var(--ys-primary);
  font-size: 20px;
}
.ys-feature-title { font-size: 16px; font-weight: 600; color: var(--ys-text); margin: 0 0 8px; }
.ys-feature-text { font-size: 13px; color: var(--ys-text-sub); margin: 0; line-height: 1.75; }

/* 联系方式卡 */
.ys-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ys-contact-card {
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: var(--ys-radius-lg);
  text-align: center;
}
.ys-contact-card i { font-size: 26px; color: var(--ys-primary); margin-bottom: 12px; display: block; }
.ys-contact-label { font-size: 13px; color: var(--ys-text-muted); margin: 0 0 6px; }
.ys-contact-value { font-size: 17px; font-weight: 600; color: var(--ys-text); margin: 0; word-break: break-all; }

@media (max-width: 992px) {
  .ys-page-hero { padding: 112px 0 44px; }
  .ys-page-title { font-size: 26px; }
  .ys-list-layout { grid-template-columns: 1fr; }
  .ys-side { position: static; }
  .ys-plan-grid { grid-template-columns: repeat(2, 1fr); }
  .ys-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .ys-contact-grid { grid-template-columns: 1fr; }
  .ys-split { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 576px) {
  .ys-page-hero { padding: 100px 0 36px; }
  .ys-page-title { font-size: 22px; }
  .ys-main { padding: 40px 0 56px; }
  .ys-article-title { font-size: 20px; }
  .ys-plan-grid { grid-template-columns: 1fr; }
  .ys-feature-grid { grid-template-columns: 1fr; }
  .ys-holder-code { font-size: 64px; }
}

/* ==========================================================================
   ⑩ 页脚
   ========================================================================== */
.ys-footer { background: #0f1626; color: rgba(255, 255, 255, .7); padding: 56px 0 0; font-size: 13px; }

.ys-footer-top {
  display: flex;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.ys-footer-menus { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }

.ys-footer-title { font-size: 15px; font-weight: 600; color: #fff; margin: 0 0 16px; }
.ys-footer-links { list-style: none; margin: 0; padding: 0; }
.ys-footer-links li { margin-bottom: 9px; }
.ys-footer-links a { color: rgba(255, 255, 255, .66) !important; font-size: 13px; }
.ys-footer-links a:hover { color: #fff !important; }

.ys-footer-contact { width: 260px; flex-shrink: 0; }
.ys-footer-phone { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 16px; letter-spacing: .5px; }
.ys-footer-info { list-style: none; margin: 0; padding: 0; }
.ys-footer-info li { display: flex; gap: 8px; margin-bottom: 10px; line-height: 1.6; }
.ys-footer-info i { color: var(--ys-primary); margin-top: 4px; flex-shrink: 0; }

.ys-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 0 28px;
  font-size: 12px;
}
.ys-footer-links-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ys-footer-label { color: rgba(255, 255, 255, .45); }
.ys-footer-links-inline a { color: rgba(255, 255, 255, .6) !important; }
.ys-footer-links-inline a:hover { color: #fff !important; }
.ys-footer-copy { display: flex; flex-wrap: wrap; gap: 14px; color: rgba(255, 255, 255, .45); }
.ys-footer-copy a { color: rgba(255, 255, 255, .45) !important; }
.ys-footer-copy a:hover { color: #fff !important; }

/* ---------- 右侧悬浮 ---------- */
.ys-float { position: fixed; right: 20px; bottom: 90px; z-index: 900; display: flex; flex-direction: column; gap: 8px; }
.ys-float-item {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--ys-border);
  border-radius: 10px;
  color: var(--ys-text-sub) !important;
  font-size: 18px;
  cursor: pointer;
  box-shadow: var(--ys-shadow);
  transition: var(--ys-transition);
  position: relative;
}
.ys-float-item:hover { background: var(--ys-primary); border-color: var(--ys-primary); color: #fff !important; }
.ys-float-pop {
  position: absolute;
  right: 58px;
  top: 50%;
  transform: translateY(-50%) scale(.9);
  background: var(--ys-text);
  color: #fff;
  padding: 7px 14px;
  border-radius: var(--ys-radius);
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: var(--ys-transition);
}
.ys-float-phone:hover .ys-float-pop { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }

/* ==========================================================================
   ⑥ 响应式
   ========================================================================== */
@media (max-width: 1200px) {
  .ys-product-grid { grid-template-columns: repeat(3, 1fr); }
  .ys-footer-menus { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
  /* 移动端左右边距收到 16px（桌面 32px 在窄屏偏浪费宽度） */
  .ys-header .ys-container { padding: 0 16px; }

  .ys-header-inner { height: 60px; gap: 12px; }

  /* 移动端头部只保留 Logo + 菜单按钮：右侧操作区（热线/登录/注册/用户名）
     会在窄屏挤压汉堡按钮，其内容已收进抽屉的 .ys-nav-user。 */
  .ys-header-right { display: none; }
  .ys-logo { min-width: 0; flex: 1; }
  .ys-logo img { max-height: 32px; }
  .ys-logo-text { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ys-nav-toggle { margin-left: 0; flex-shrink: 0; }

  /* 导航转抽屉：从头部下沿铺满剩余视口，内部是「左列菜单 + 右列内容」双栏。
     抽屉从 60px（移动端头部高度）开始，头部（Logo + 关闭按钮）始终可见可用。

     高度用 vh 显式写死，不用 bottom: 0 —— .ys-header 带 backdrop-filter
     （非首页、以及首页滚动后都有），而 backdrop-filter 会让该元素成为
     后代 position: fixed 的包含块。此时抽屉的 bottom: 0 是相对 60px 高的
     头部底边，算出高度 0，抽屉会整块消失（内页菜单「打不开」即此因）。
     vh 始终以视口为基准，两种包含块下结果都正确。 */
  .ys-nav {
    position: fixed;
    top: 60px; left: 0; right: 0;
    height: calc(100vh - 60px);
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0;
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 999;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .1);
  }
  .ys-nav.is-open { transform: translateX(0); }
  /* 抽屉打开时头部转白底实心：抽屉是白底，透明头部会让白字 Logo 融进背景。
     用 body.ys-nav-open 而不是 .ys-nav-open，是为了在特异性上压过
     「首页透明态」的 html.ys-home .ys-header... 那组规则（它多一个元素选择器），
     否则首页打开抽屉后 Logo 与汉堡图标是白字白底、看不见。
     同时显式去掉 backdrop-filter：此时头部已是纯白底，毛玻璃不再可见，
     去掉后头部不再构成 containing block，抽屉定位不受其影响。 */
  body.ys-nav-open .ys-header {
    background: #fff;
    backdrop-filter: none;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
  }
  body.ys-nav-open .ys-header .ys-logo-text { color: var(--ys-primary); }
  body.ys-nav-open .ys-header:not(.is-scrolled) .ys-nav-toggle span { background: var(--ys-text); }
  body.ys-nav-open .ys-header:not(.is-scrolled) .ys-user-name,
  body.ys-nav-open .ys-header:not(.is-scrolled) .ys-btn-text { color: var(--ys-text) !important; }
  .ys-nav-main { display: flex; flex: 1; min-height: 0; position: relative; }

  /* 左列：一级菜单。固定 120px 宽、浅灰底，选中项白底并带主色标线，
     与右列内容形成层次（对齐参考站的双栏抽屉）。
     基础样式里 .ys-nav-list 是横向 flex 且 align-items: center，
     这里必须显式改回纵向 + 顶对齐，否则菜单项会竖排居中。 */
  .ys-nav-list {
    flex: 0 0 120px;
    width: 120px;
    height: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow-y: auto;
    background: #f5f6f8;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
  }
  .ys-nav-list::-webkit-scrollbar { display: none; }

  .ys-nav-item { position: relative; flex-shrink: 0; }
  .ys-nav-link {
    height: auto;
    min-height: 44px;
    padding: 10px 14px;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    font-size: 14px;
    line-height: 1.5;
    border-left: 3px solid transparent;
  }
  /* 二级展开箭头在左列没有意义（内容改在右列展示），隐藏之 */
  .ys-nav .ys-nav-arrow { display: none; }
  .ys-nav-item > .ys-nav-link { position: relative; }
  /* 选中态：白底 + 左侧主色竖条（竖条用伪元素画，避免 border 抖动） */
  .ys-nav-item.is-active > .ys-nav-link {
    background: #fff;
    color: var(--ys-primary) !important;
    font-weight: 600;
  }
  .ys-nav-item.is-active > .ys-nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    background: var(--ys-primary);
    border-radius: 0 2px 2px 0;
  }
  .ys-nav-toggle { display: flex; }

  /* 抽屉底部的用户操作区（桌面端不显示） */
  .ys-nav-user {
    display: block;
    margin-top: 16px;
    padding: 18px 20px 24px;
    border-top: 1px solid var(--ys-border);
  }
  .ys-nav-user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    color: var(--ys-text) !important;
    font-size: 14px;
    word-break: break-all;
  }
  .ys-nav-user-item i { color: var(--ys-primary); flex-shrink: 0; }
  .ys-nav-user-btns { display: flex; gap: 10px; margin-top: 6px; }
  .ys-nav-user-btns .ys-btn { flex: 1; }
  .ys-nav-user .ys-btn-block + .ys-btn-block { margin-top: 10px; }

  /* 抽屉是白底，需要显式指定文字颜色（导航链接的白字规则已在桌面端限定，
     但子菜单项仍可能继承透明态的白字，这里一并压回深色）。 */
  .ys-nav .ys-nav-link { color: var(--ys-text) !important; }
  .ys-nav .ys-nav-link:hover { color: var(--ys-primary) !important; }
  .ys-nav .ys-nav-arrow { color: var(--ys-text-muted); }
  .ys-nav .ys-dropdown-list > li > a,
  .ys-nav .ys-dropdown-sub a { color: var(--ys-text-sub) !important; }
  .ys-nav .ys-dropdown-list > li > a:hover,
  .ys-nav .ys-dropdown-sub a:hover { color: var(--ys-primary) !important; }

  /* 右列内容面板：每个一级项的 .ys-dropdown 都定位到右栏，
     只显示当前选中项那一份（.is-active 由 JS 切换）。

     定位用 absolute + 最近的定位祖先 .ys-nav-main：
     左列 .ys-nav-list 是滚动容器（overflow-y: auto），但它的 containing
     block 不在面板的包含块链上（面板的包含块是 .ys-nav-main，是它的祖先），
     因此不会被左列的溢出裁剪掉，同时自然让开底部的 .ys-nav-user。 */
  .ys-nav-main { position: relative; }
  .ys-nav-item { position: static; }
  .ys-dropdown,
  .ys-dropdown-mega {
    position: absolute;
    left: 120px;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    min-width: 0;
    max-height: none;
    padding: 16px 16px 24px;
    margin: 0;
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 显隐由选中态决定，不再用 hover / grid 动画 */
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: opacity .2s ease, visibility .2s;
  }
  .ys-nav-item.is-active > .ys-dropdown,
  .ys-nav-item.is-active > .ys-dropdown-mega { opacity: 1; visibility: visible; }

  /* 右列里的二级列表：块级铺开，行高放宽便于触控 */
  .ys-dropdown-list > li > a {
    padding: 12px 12px;
    font-size: 14px;
  }
  .ys-dropdown-list > li.has-child > a::after { right: 12px; }
  /* 三级：仍用 grid-template-rows 做高度动画（无需知道内容高度） */
  .ys-dropdown-sub {
    position: static;
    left: auto;
    top: auto;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 12px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1);
  }
  .ys-dropdown-sub > * { min-height: 0; overflow: hidden; }
  .ys-dropdown-list > li.is-expanded > .ys-dropdown-sub { grid-template-rows: 1fr; }
  .ys-dropdown-list > li.is-expanded > a .ys-sub-arrow { transform: rotate(180deg); }

  /* 商品型：全宽面板在抽屉里换成右列的分组折叠。桌面卡片网格隐藏，
     用 .ys-acc 展示分组 + 产品，省去横向空间。 */
  .ys-mega { display: none; }
  .ys-acc { display: block; padding: 0; }

  .ys-acc-group + .ys-acc-group { border-top: 1px solid var(--ys-border); }
  .ys-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 13px 12px;
    background: none;
    border: none;
    color: var(--ys-text) !important;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
  }
  .ys-acc-head i { font-size: 12px; color: var(--ys-text-muted); transition: transform .3s ease; }
  .ys-acc-group.is-open > .ys-acc-head { color: var(--ys-primary) !important; }
  .ys-acc-group.is-open > .ys-acc-head i { transform: rotate(180deg); color: var(--ys-primary); }

  .ys-acc-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1);
  }
  .ys-acc-body > .ys-acc-list { min-height: 0; overflow: hidden; }
  .ys-acc-group.is-open > .ys-acc-body { grid-template-rows: 1fr; }

  .ys-acc-list { list-style: none; margin: 0; padding: 0 0 8px; }
  .ys-acc-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: var(--ys-radius);
    color: var(--ys-text-sub) !important;
    font-size: 13px;
  }
  .ys-acc-list a:hover { background: var(--ys-primary-light); color: var(--ys-primary) !important; }
  .ys-acc-all { color: var(--ys-primary) !important; }
  .ys-acc-all i { font-size: 11px; }

  .ys-banner-swiper { height: 440px; }
  .ys-slide-bg { background-position: 72% center; }
  .ys-banner-swiper .swiper-slide::after {
    background: linear-gradient(180deg, rgba(4, 12, 28, .78) 0%, rgba(4, 12, 28, .55) 55%, rgba(4, 12, 28, .7) 100%);
  }
  .ys-banner-title { font-size: 28px; }
  .ys-banner-ctrl { bottom: 46px; }
  .ys-product-grid { grid-template-columns: repeat(2, 1fr); }
  .ys-section { padding: 52px 0; }
  .ys-section-title { font-size: 26px; }
  .ys-footer-top { flex-direction: column; }
  .ys-footer-contact { width: 100%; }
}

@media (max-width: 576px) {
  .ys-banner-swiper { height: 420px; }
  .ys-banner-title { font-size: 23px; }
  .ys-banner-sub { font-size: 15px; }
  .ys-banner-points { flex-direction: column; gap: 8px; margin-bottom: 26px; }
  .ys-banner-content { max-width: 100%; }
  .ys-banner-ctrl { bottom: 52px; }
  .ys-product-grid { grid-template-columns: 1fr; }
  .ys-footer-menus { grid-template-columns: repeat(2, 1fr); }
  .ys-float { right: 12px; bottom: 70px; }
  .ys-float-item { width: 42px; height: 42px; font-size: 16px; }
}

/* ==========================================================================
   ⑪ Banner 箭头响应式（必须放在文件末尾：基础样式 .ys-banner-btn 在前文定义，
      若把媒体查询写在前面会被后续基础规则覆盖而失效）
   箭头贴屏幕两侧、正文在容器内左对齐，视口收窄后两者必然相遇，
   因此按宽度让位，更窄时直接隐藏（触屏以滑动为主）。
   ========================================================================== */
@media (max-width: 1439px) {
  .ys-banner-swiper .ys-container,
  .ys-banner-ctrl { padding-left: 88px; }
  .ys-banner-content { max-width: 560px; }
}

@media (max-width: 992px) {
  .ys-banner-btn { display: none; }
  .ys-banner-swiper .ys-container,
  .ys-banner-ctrl { padding-left: 20px; }
  .ys-banner-content { max-width: 100%; }
}

/* ==========================================================================
   宽屏下的内容宽度
   --------------------------------------------------------------------------
   实测 .ys-container 的 max-width 是 1240px（全站统一，产品区/节点区都一样），
   于是宽屏上两侧留白很空：
     视口 1440 → 左右各约 100px
     视口 1920 → 左右各约 340px
     视口 2560 → 左右各约 660px
   这里只在 ≥1600px 的屏幕上放宽，1280~1599 保持原样不动（那一档观感本来合适，
   不动它可避免回归）。
   ========================================================================== */
@media (min-width: 1600px) {
	.ys-container {
		max-width: 1440px;
	}
}

@media (min-width: 1920px) {
	.ys-container {
		max-width: 1600px;
	}
}

@media (min-width: 2300px) {
	.ys-container {
		max-width: 1760px;
	}
}

/* ==========================================================================
   合作伙伴滚动动画（.ys-marquee）在宽屏下的宽度
   --------------------------------------------------------------------------
   实测（视口 1920）逐层宽度：
     div.ys-marquee        1200px
     div.ys-partners-rows  1240px  ← max-width:1240px, padding 0 20px（内容盒 1200）
     section#ysPartners    1905px
   限制它的是 .ys-partners-rows —— 合作伙伴区**独立的容器**，不在 .ys-container
   那套里，所以上一轮放宽 .ys-container 没有影响到它，滚动动画两侧仍各空约 350px。
   用与 .ys-container 相同的断点策略，只在宽屏放开。 */
@media (min-width: 1600px) {
	.ys-partners-rows {
		max-width: 1440px;
	}
}

@media (min-width: 1920px) {
	.ys-partners-rows {
		max-width: 1600px;
	}
}

@media (min-width: 2300px) {
	.ys-partners-rows {
		max-width: 1760px;
	}
}

/* ===== 首页新增：快捷入口卡片行 + 右侧悬浮工具栏（骨架版）=====
   对标腾讯云落地页：Banner 下方一排产品动态入口 + 右侧竖排悬浮组件。
   骨架阶段：图标用色块占位；悬浮栏客服渠道待定。 */
.ys-quick { padding: 34px 0 6px; background: #fff; }
.ys-quick-row { display: flex; flex-wrap: wrap; gap: 14px; }
.ys-quick-card { flex: 1 1 200px; display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 16px 18px; border: 1px solid #e6e9ef; border-radius: 8px; background: #fff;
  text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ys-quick-card:hover { border-color: #1668dc; box-shadow: 0 8px 22px rgba(23,38,70,.08); transform: translateY(-2px); }
.ys-quick-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, #1668dc, #4a9bff); opacity: .9; }
.ys-quick-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ys-quick-title { font-size: 15px; font-weight: 600; color: #1a1f36; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ys-quick-desc { font-size: 12px; color: #5b6675; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ys-quick-arrow { flex: 0 0 auto; font-size: 18px; line-height: 1; color: #aeb6c2; transition: color .2s ease, transform .2s ease; }
.ys-quick-card:hover .ys-quick-arrow { color: #1668dc; transform: translateX(3px); }

.ys-float-bar { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 60;
  display: flex; flex-direction: column; gap: 8px; }
.ys-float-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 52px; padding: 10px 0; border: 1px solid #e6e9ef; border-radius: 8px; background: #fff;
  box-shadow: 0 6px 18px rgba(23,38,70,.08); text-decoration: none;
  transition: border-color .2s ease, color .2s ease; }
.ys-float-item:hover { border-color: #1668dc; }
.ys-float-icon { width: 18px; height: 18px; border-radius: 5px; background: #1668dc; opacity: .85; }
.ys-float-label { font-size: 12px; color: #5b6675; }
.ys-float-item:hover .ys-float-label { color: #1668dc; }

@media (max-width: 767.98px) {
  .ys-quick { padding: 20px 0 4px; }
  .ys-quick-row { gap: 10px; }
  .ys-quick-card { flex: 1 1 calc(50% - 5px); padding: 12px; }
  .ys-quick-desc { display: none; }
  .ys-float-bar { right: 10px; gap: 6px; }
  .ys-float-item { width: 44px; }
  .ys-float-item:nth-child(-n+2) { display: none; }
}

/* ===== 首屏左侧活动标签栏（骨架版）=====
   对标腾讯云 Hero 左栏：竖排活动预告，右栏留给正文与主 CTA。
   实现方式为"新增 + 让位"：左栏绝对定位在 Banner 左侧，宽屏给 .ys-banner-content
   加左内边距让出空间；窄屏（<1200px）隐藏左栏，避免挤压正文。
   不改动任何现有幻灯片标记，动画与轮播逻辑不受影响。 */
.ys-banner {
	position: relative;
}

.ys-banner-aside {
	position: absolute;
	left: 28px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	width: 214px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ys-banner-aside-item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 10px 12px;
	border-left: 2px solid rgba(255, 255, 255, .22);
	border-radius: 0 8px 8px 0;
	background: rgba(255, 255, 255, .06);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

/* 标题行（2026-10-05）：与轮播标题一一对应，替代原「大促/产品」小标签，
   让左栏一眼可读、可点（hover 有位移+高亮+箭头提示） */
.ys-banner-aside-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	line-height: 1.4;
}
.ys-banner-aside-title::after {
	content: "›";
	font-size: 16px;
	line-height: 1;
	color: rgba(255, 255, 255, .45);
	transition: transform .2s ease, color .2s ease;
}
.ys-banner-aside-item:hover .ys-banner-aside-title::after,
.ys-banner-aside-item.is-active .ys-banner-aside-title::after {
	color: #7ab5ff;
	transform: translateX(2px);
}

.ys-banner-aside-item:hover {
	background: rgba(255, 255, 255, .13);
	border-left-color: #4a9bff;
	transform: translateX(3px);
}

.ys-banner-aside-item.is-active {
	border-left-color: #1668dc;
	background: rgba(22, 104, 220, .22);
}
.ys-banner-aside-item.is-active .ys-banner-aside-title {
	color: #fff;
}

.ys-banner-aside-tag {
	display: inline-block;
	align-self: flex-start;
	padding: 0 6px;
	border-radius: 4px;
	background: #1668dc;
	color: #fff;
	font-size: 11px;
	line-height: 18px;
}

.ys-banner-aside-text {
	font-size: 12.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .82);
}

.ys-banner-aside-item:hover .ys-banner-aside-text {
	color: #fff;
}

@media (min-width: 1200px) {
	.ys-banner-content {
		padding-left: 246px;
	}
}

@media (max-width: 1199.98px) {
	.ys-banner-aside {
		display: none;
	}
}

/* ==========================================================================
   首屏左栏位置右移
   --------------------------------------------------------------------------
   原来 left:28px，紧贴页面左边。改为随视口增长的位置：
     1440 → 约 100px   1920 → 约 134px   2560 → 160px（上限）
   同时把显示门槛从 1200 提到 1440：
   因为标题的左边界 = 容器内容左缘 + 246px 的内边距，
     · 1440 时标题约在 366px，左栏右缘 314px → 不重叠
     · 1280 时标题约在 286px，若左栏右缘 310px → 会压住标题
   所以在 1200~1439 这一段隐藏左栏，避免为了"往右移"反而撞上标题。
   ========================================================================== */
@media (min-width: 1440px) {
	.ys-banner-aside {
		left: clamp(48px, 7vw, 160px);
	}
}

@media (max-width: 1439.98px) {
	.ys-banner-aside {
		display: none;
	}
}

/* ===== 首屏右侧视频（试验版）=====
   以"右侧覆盖一层"的方式接入，不动原有轮播结构，撤掉只需删掉这段与模板里那 3 行。
   手机端不播视频（省流量省电，也避免低端机卡顿）。 */
.ys-banner-video {
	position: absolute;
	right: 0;
	top: 0;
	width: 52%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	pointer-events: none;
}

@media (max-width: 991.98px) {
	.ys-banner-video {
		display: none;
	}
}

/* ==========================================================================
   首屏改浅蓝（依据逐层审计结果，第三步／本次）
   --------------------------------------------------------------------------
   审计发现深色是**三层叠加**（上一轮只找到两层，所以置透明后底色仍旧深蓝）：
     ① section.ys-banner                 background-color rgb(10,24,48)
     ② 每张 .swiper-slide.ys-slide-N     background-color rgb(7,18,41)
                                        + radial-gradient(...)  ← 上一轮漏掉的关键层
     ③ div.ys-slide-bg                   background-image url(.../assets/img/...)（3D 立方体）
   轮播共 6 个 slide（3 真 + 3 个循环副本），全部需要处理，故用 .swiper-slide 统一命中。
   本次改动：
     · ① 换为白→浅蓝三段渐变
     · ② 置透明（同时清掉那层径向渐变）
     · ③ 隐去立方体背景图 —— 桌面端已被视频取代；手机端视频不播，暂时只剩渐变，
          后续可给手机配一张封面图（POSTER）作为替代
     · 文字改深色（底已变浅，深字可读）
   ========================================================================== */
section.ys-banner {
	background: linear-gradient(180deg, #f6faff 0%, #eaf3ff 44%, #ffffff 100%) !important;
}

section.ys-banner .swiper-slide {
	background-color: transparent !important;
	background-image: none !important;
}

section.ys-banner .ys-slide-bg {
	background-image: none !important;
}

section.ys-banner .ys-banner-title {
	color: #1a1f36 !important;
}

section.ys-banner .ys-banner-sub {
	color: #5b6675 !important;
}

section.ys-banner .ys-banner-points li,
section.ys-banner .ys-banner-points span {
	color: #5b6675 !important;
}

/* 预览用的分页圆点、控制按钮：浅底上要换成深色 */
section.ys-banner .swiper-pagination-bullet {
	background: rgba(26, 31, 54, .35) !important;
}

section.ys-banner .swiper-pagination-bullet-active {
	background: #1668dc !important;
}

section.ys-banner .ys-banner-btn {
	color: #1a1f36 !important;
	border-color: rgba(26, 31, 54, .18) !important;
}

/* ==========================================================================
   首屏浅色（第四步／收尾）：把"文字可读性暗角"翻成浅色
   --------------------------------------------------------------------------
   审计补漏：深色一共四层，前三层是元素（section / .swiper-slide / .ys-slide-bg），
   第四层是**伪元素** .ys-banner-swiper .swiper-slide::after —— 它是主题作者刻意加的
   "左→右暗角，保证文字可读"（CSS 里留有原注释）。伪元素无法通过 DOM 遍历发现，
   只能从 CSS 里查，所以上一轮审计漏掉了它。
   该层原本服务于"深底 + 白字"；现在底色已变浅、文字已变深，暗角必须反转成
   **白→透明**，作用不变（保障文字可读），但方向相反。
   ========================================================================== */
.ys-banner-swiper .swiper-slide::after {
	background: linear-gradient(90deg,
		rgba(246, 250, 255, .94) 0%,
		rgba(246, 250, 255, .72) 36%,
		rgba(246, 250, 255, 0) 76%) !important;
}

/* 窄屏那条是竖向渐变，同步反转 */
@media (max-width: 991.98px) {
	.ys-banner-swiper .swiper-slide::after {
		background: linear-gradient(180deg,
			rgba(246, 250, 255, .92) 0%,
			rgba(246, 250, 255, .66) 55%,
			rgba(246, 250, 255, .88) 100%) !important;
	}
}

/* ==========================================================================
   首屏底色按视频真实颜色对齐（第五步／收尾）
   --------------------------------------------------------------------------
   像素采样结果（1470x630 视频，canvas 取色）：
     左边缘 #c7d0df / #cbd2e2 / #ccd3e3   中心 #c3c8d8   右侧 #ced2e3
   即视频自带底色约为 **#c9d0e0（中等浅蓝灰）**，而我上一版给的页面底是
   #f6faff→#eaf3ff→#ffffff（接近纯白）—— 两者差得明显，所以视频看起来是
   "一块偏蓝的矩形贴在白底上"。这不是视频的问题，是页面底色没跟视频对齐。
   MP4 不能透明，只能让页面去适配视频：
     · 用**横向渐变**，视频起点（约 48%）处精确对齐视频底色 #cbd2e2，
       向左逐渐变浅，形成自然的左浅右深的过渡
     · 文字可读性遮罩同步改为以新底色为基（原来是白色系，会把蓝调洗掉）
   ========================================================================== */
section.ys-banner {
	background: linear-gradient(90deg,
		#e8eef9 0%,
		#dde4f2 38%,
		#cbd2e2 48%,
		#ccd3e3 100%) !important;
}

/* 遮罩改为以新底色为基（原来是 rgba(246,250,255,…) 近白，会洗掉蓝调） */
.ys-banner-swiper .swiper-slide::after {
	background: linear-gradient(90deg,
		rgba(232, 238, 249, .90) 0%,
		rgba(221, 228, 242, .62) 36%,
		rgba(203, 210, 226, 0) 72%) !important;
}

@media (max-width: 991.98px) {
	.ys-banner-swiper .swiper-slide::after {
		background: linear-gradient(180deg,
			rgba(232, 238, 249, .90) 0%,
			rgba(221, 228, 242, .58) 55%,
			rgba(203, 210, 226, .86) 100%) !important;
	}
}

/* ==========================================================================
   首屏两处收尾：视频四边渐隐 + 左栏文字对比度
   --------------------------------------------------------------------------
   ① 视频遮罩：MP4 不能透明，视频自带底色会形成矩形边界。这里用 mask-image
      让四条边都向内渐隐——左边缘渐隐最重要（它紧邻正文区）。
      两层遮罩用 intersect 取交集：横向管左右、纵向管上下。
      若浏览器不支持该写法，则完全不生效（不会画坏），属安全改动。
   ② 左栏文字：原 #5b6675 压在浅蓝底 #e8eef9 上对比度约 4.3:1，偏灰。
      改为 #2b3445（约 9:1），选中/悬停用近黑 #1a1f36。
   ========================================================================== */

.ys-banner-video {
	-webkit-mask-image:
		linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 7%, #000 20%, #000 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 12%, #000 88%, rgba(0, 0, 0, 0) 100%);
	mask-image:
		linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 7%, #000 20%, #000 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 12%, #000 88%, rgba(0, 0, 0, 0) 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.ys-banner-aside-text {
	color: #2b3445 !important;
}

.ys-banner-aside-item:hover .ys-banner-aside-text,
.ys-banner-aside-item.is-active .ys-banner-aside-text {
	color: #1a1f36 !important;
}

/* ==========================================================================
   首页顶部导航改深色文字
   --------------------------------------------------------------------------
   实测：#ysHeader 是"透明底 + 白字"（导航链接 color rgba(255,255,255,.94)），
   原本配深色首屏。首屏改浅蓝后白字对比度不足，改成深色。
   用 body:has(section.ys-banner) 限定——只有"页面里存在首屏 banner"（即首页）
   才生效，不影响内页可能存在的深色头图。
   按钮类（注册等）排除在外：它们是蓝底白字，改了反而会坏。
   ========================================================================== */
body:has(section.ys-banner) #ysHeader a:not([class*="btn"]) {
	color: #1a1f36 !important;
}

body:has(section.ys-banner) #ysHeader a:not([class*="btn"]):hover {
	color: #1668dc !important;
}

/* ==========================================================================
   首页"幽灵/描边"按钮反转（上一条的补漏）
   --------------------------------------------------------------------------
   上一条我用 a:not([class*="btn"]) 处理导航文字，结果把"幽灵按钮"一起排除了——
   实测导航的「登录」是 .ys-btn-ghost（透明底 + 白字）、首屏的「了解产品」是
   .ys-btn-outline（透明底 + 白边白字），它们都是为深色底设计的，在浅色底上
   等于隐形。
   这里只反转这一类（透明底的幽灵/描边按钮）：
     · 文字 白 -> 深 #1a1f36；边框 白 -> 深（半透明）
   实心按钮（注册 / 立即选购 = .ys-btn-primary，蓝底白字）**保持不变** ——
   它们本来就是对的，也是首页的主 CTA。
   ========================================================================== */
body:has(section.ys-banner) #ysHeader .ys-btn-ghost,
body:has(section.ys-banner) #ysHeader .ys-btn-text,
body:has(section.ys-banner) .ys-banner .ys-btn-outline,
body:has(section.ys-banner) .ys-banner .ys-btn-ghost,
body:has(section.ys-banner) .ys-banner .ys-btn-text {
	color: #1a1f36 !important;
	border-color: rgba(26, 31, 54, .30) !important;
}

body:has(section.ys-banner) #ysHeader .ys-btn-ghost:hover,
body:has(section.ys-banner) #ysHeader .ys-btn-text:hover,
body:has(section.ys-banner) .ys-banner .ys-btn-outline:hover,
body:has(section.ys-banner) .ys-banner .ys-btn-ghost:hover,
body:has(section.ys-banner) .ys-banner .ys-btn-text:hover {
	color: #1668dc !important;
	border-color: #1668dc !important;
}


/* 每条幻灯片各自一个视频：只显示"当前页"的那个（swiper 会给当前页加
   .swiper-slide-active）。用 opacity 而非 display —— display 切换无法过渡，
   且会让视频从头重放；opacity 切换更平滑。 */
.ys-banner-video {
	opacity: 0;
	transition: opacity .45s ease;
}

.swiper-slide-active .ys-banner-video {
	opacity: 1;
}

/* 视频铺满整屏（已确认保留：整屏连续画面，无拼贴感）
   ---- 现视频比例 2.33:1，首屏 3.84:1，cover 会裁掉约 39% 高度。 */
.ys-banner-video {
	width: 100% !important;
}


/* ===== 快捷入口改为 4 张大卡片（铺满整行）=====
   原来是一行 6 张小卡（flex: 1 1 200px，会因换行留出空隙）。
   改成 grid 四等分：无论容器多宽，四张卡始终等宽、正好铺满，右侧不留空。
   卡片同步放大（内边距、图标、标题字号），符合"大卡片"的要求。 */
.ys-quick-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.ys-quick-card {
	flex: none;
	align-items: center;
	padding: 22px 20px;
	border-radius: 10px;
}

.ys-quick-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
}

.ys-quick-title {
	font-size: 17px;
}

.ys-quick-desc {
	font-size: 13px;
	margin-top: 3px;
}

.ys-quick-arrow {
	font-size: 20px;
}

/* 平板两列、手机一列，保证卡片不会过窄 */
@media (max-width: 991.98px) {
	.ys-quick-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

@media (max-width: 479.98px) {
	.ys-quick-row {
		grid-template-columns: 1fr;
	}
}


/* ===== 快捷入口：4 张大卡片（在内容宽度内四等分，卡片边界清晰）=====
   上一版把这一节的容器放开到整屏，导致单卡过宽、1px 分隔线在宽屏上几乎看不见。
   现收回容器宽度（卡片随之变窄），并做三件事让"卡片"看得出来：
   ① 整行加一圈深一点的边框 + 圆角，四张卡构成一个整体面板；
   ② 卡与卡之间的分隔线加深到 .16（原来是 .08，几乎看不见）；
   ③ 分隔线贯穿整行高度，不再被卡片自身边框打断。
   卡片之间仍然零空隙（gap:0）。 */
.ys-quick-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border: 1px solid rgba(23, 38, 70, .16);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.ys-quick-card {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 26px clamp(16px, 2vw, 34px) 28px;
	border: 0;
	border-right: 1px solid rgba(23, 38, 70, .16);
	border-radius: 0;
	background: #fff;
	min-height: 132px;
}

.ys-quick-card:last-child {
	border-right: 0;
}

.ys-quick-card:hover {
	background: #f5f8fd;
	transform: none;
	box-shadow: none;
}

.ys-quick-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 6px;
}

.ys-quick-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 11px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 20px;
	color: #1668dc;
	background: rgba(22, 104, 220, .10);
}

.ys-quick-title {
	font-size: 19px;
	line-height: 1.4;
	font-weight: 600;
	color: #1a1f36;
}

.ys-quick-desc {
	font-size: 13.5px;
	line-height: 1.5;
	color: #6b7280;
}

.ys-quick-arrow {
	font-size: 22px;
	line-height: 1;
	color: #b6c0d4;
}

.ys-quick-card:hover .ys-quick-arrow {
	color: #1668dc;
	transform: translateX(3px);
}

@media (max-width: 991.98px) {
	.ys-quick-row {
		grid-template-columns: repeat(2, 1fr);
	}

	.ys-quick-card {
		padding: 22px 18px 24px;
		min-height: 0;
	}

	.ys-quick-card:nth-child(2n) {
		border-right: 0;
	}

	.ys-quick-card:nth-child(-n+2) {
		border-bottom: 1px solid rgba(23, 38, 70, .16);
	}

	.ys-quick-title {
		font-size: 16px;
	}

	.ys-quick-desc {
		font-size: 12.5px;
	}
}

@media (max-width: 479.98px) {
	.ys-quick-row {
		grid-template-columns: repeat(2, 1fr);
	}

	.ys-quick-card {
		padding: 18px 14px 20px;
	}
}


/* ===== 快捷入口：横向铺满整屏（左右到边）=====
   把这一节的容器放开（只影响本节），卡片行从屏幕最左排到最右。
   通栏后左右边框会贴在屏幕边上，不好看，所以去掉左右外框与圆角，
   只保留上下细边；卡与卡之间的 1px 分隔线保持不变（.16 已足够可见）。
   卡片内边距用 clamp 随屏宽放大，文字不会贴着屏幕边。 */
section.ys-quick .ys-container {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.ys-quick-row {
	border-left: 0;
	border-right: 0;
	border-radius: 0;
}

.ys-quick-card {
	padding: 28px clamp(24px, 4vw, 72px) 32px;
}

@media (max-width: 767.98px) {
	.ys-quick-card {
		padding: 20px 16px 22px;
	}
}


/* ===== 卡片行与上方 Banner 底部紧贴（顶部不留空隙）=====
   空隙来源：.ys-quick 自身有 padding: 34px 0 6px（旧规则第 1734 行，
   移动端第 1760 行为 20px），Banner 那一节本身没有下边距。
   这里把顶部内边距归零；用 section.ys-quick（0,1,1）提权，
   同时压过移动端媒体查询里的 .ys-quick（0,1,0），一处即可全覆盖。
   底部 6px 保留，卡片下面不至于和后一屏顶死。 */
section.ys-quick {
	padding-top: 0;
	margin-top: 0;
}

.ys-quick-row {
	margin-top: 0;
}


/* ===== 产品与服务：标题文案/蓝色高亮 + 与上方卡片行的间距减半 =====
   间距来自通用规则 .ys-section{padding:72px 0}（窄屏 52px），本节只加 padding-top。
   用 section.ys-products（0,1,1）提权压过 .ys-section（0,1,0），只影响本节，
   其余 .ys-section 区块的间距不变。 */
.ys-section-title .ys-hl {
	color: #1668dc;
}

section.ys-products {
	padding-top: 36px;
}

@media (max-width: 992px) {
	section.ys-products {
		padding-top: 26px;
	}
}


/* ===== 产品与服务：标题与「默认分组 / 云服务器」标签栏之间的间距减小 =====
   这段空白来自 .ys-section-head{margin-bottom:48px}（通用规则，所有区块共用）。
   这里只针对产品这一节收到 28px，其他 .ys-section 区块的标题下间距不受影响。
   同时把标签栏自身的 margin-top 归零（若有），避免两处叠加。 */
section.ys-products .ys-section-head {
	margin-bottom: 28px;
}

section.ys-products .ys-tabs-nav {
	margin-top: 0;
}

@media (max-width: 992px) {
	section.ys-products .ys-section-head {
		margin-bottom: 20px;
	}
}


/* ===== 页脚改为淡淡的白偏蓝 =====
   原样式是深底白字（.ys-footer{background:#0f1626;color:rgba(255,255,255,.7)}）。
   换浅底必须同时把文字/分隔线从"白系"翻成"深系"，否则浅底白字不可读。
   原有链接色带 !important，这里用更高优先级（.ys-footer .ys-footer-xxx a）
   同样带 !important 覆盖；其余属性同优先级、靠文件末尾的顺序覆盖。 */
.ys-footer {
	background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
	color: #5b6478;
}

.ys-footer-title {
	color: #1a1f36;
}

.ys-footer-links a {
	color: #6b7280 !important;
}

.ys-footer .ys-footer-links a:hover {
	color: #1668dc !important;
}

.ys-footer-phone {
	color: #1a1f36;
}

.ys-footer-phone a {
	color: #1a1f36 !important;
}

.ys-footer-bottom {
	border-top-color: rgba(23, 38, 70, .10);
}

.ys-footer-label {
	color: #98a2b3;
}

.ys-footer .ys-footer-links-inline a {
	color: #6b7280 !important;
}

.ys-footer .ys-footer-links-inline a:hover {
	color: #1668dc !important;
}

.ys-footer-copy {
	color: #98a2b3;
}

.ys-footer .ys-footer-copy a {
	color: #98a2b3 !important;
}

.ys-footer .ys-footer-copy a:hover {
	color: #1668dc !important;
}


/* 页脚上方那条分隔线原本是白色的（.ys-footer-top{border-bottom:1px solid rgba(255,255,255,.1)}），
   在浅底上等于消失，这里一并翻成深色细线。 */
.ys-footer-top {
	border-bottom-color: rgba(23, 38, 70, .10);
}


/* ===== 上云之路：三步流程卡片（合作伙伴区块上方）=====
   三列等分铺满容器（1fr × 3 + gap，正好占满，右侧不留空）。
   卡片沿用站内卡片语言：1px 浅边 + 10px 圆角 + 极浅蓝渐变底。 */
.ys-steps-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.ys-step-card {
	padding: 28px 24px 30px;
	border: 1px solid var(--ys-border);
	border-radius: 10px;
	background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ys-step-card:hover {
	border-color: #1668dc;
	box-shadow: 0 8px 22px rgba(23, 38, 70, .08);
	transform: translateY(-2px);
}

.ys-step-no {
	display: inline-flex;
	align-items: center;
	padding: 2px 11px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 20px;
	color: #1668dc;
	background: rgba(22, 104, 220, .10);
}

.ys-step-title {
	font-size: 17px;
	font-weight: 600;
	color: #1a1f36;
	margin: 14px 0 8px;
}

.ys-step-desc {
	font-size: 13.5px;
	line-height: 1.7;
	color: #6b7280;
	margin: 0;
}

@media (max-width: 991.98px) {
	.ys-steps-row {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.ys-step-card {
		padding: 22px 18px 24px;
	}
}


/* ===== 推荐返利转化带 =====
   通栏浅蓝底（比全白页身稍重，形成一块"整段"的视觉停顿），
   内容仍是容器宽度：左侧文案 + 主按钮，右侧 30% 大数字块。
   手机上纵向堆叠。 */
.ys-referral {
	background: linear-gradient(120deg, #eaf3ff 0%, #f6faff 55%, #eef5ff 100%);
	border-top: 1px solid rgba(23, 38, 70, .08);
	border-bottom: 1px solid rgba(23, 38, 70, .08);
}

.ys-referral-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.ys-referral .ys-section-title {
	margin: 0 0 12px;
}

.ys-referral .ys-section-sub {
	font-size: 15px;
	margin: 0 0 24px;
}

.ys-referral-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ys-referral-figure {
	flex-shrink: 0;
	text-align: center;
	padding: 22px 38px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid rgba(22, 104, 220, .16);
	box-shadow: 0 10px 26px rgba(23, 38, 70, .06);
}

.ys-referral-figure strong {
	display: block;
	font-size: 46px;
	line-height: 1;
	font-weight: 700;
	color: #1668dc;
}

.ys-referral-figure span {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	color: #6b7280;
}

@media (max-width: 991.98px) {
	.ys-referral-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 26px;
	}

	.ys-referral .ys-section-title {
		font-size: 26px;
	}

	.ys-referral-figure {
		width: 100%;
		padding: 20px 24px;
	}
}


/* ===== 合作伙伴区块与上方间距缩小 =====
   这段空白来自通用的 .ys-section{padding:72px 0}（窄屏 52px）。
   只给合作伙伴这一节减到 40px（窄屏 30px），其他区块不受影响。 */
section.ys-partners {
	padding-top: 40px;
}

@media (max-width: 992px) {
	section.ys-partners {
		padding-top: 30px;
	}
}


/* ===== 右侧悬浮栏重设计（在线联系 / 售后 / 活动）=====
   原来的"图标"是个蓝色小方块占位（.ys-float-icon 没有图标字体内容），
   现在换成真实的 Font Awesome 图标（headphones/wrench/gift，均已确认在
   主题的 fontawesome.css 里存在），悬停整块变主色蓝、图标与文字反白。
   同时取消旧的"手机上只留返回顶部"规则（原规则隐藏前两项，
   现悬浮栏只有 3 项且都有用，手机上应全部保留）。 */
.ys-float-bar {
	position: fixed;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ys-float-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 58px;
	padding: 11px 0;
	border: 1px solid #e6e9ef;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(23, 38, 70, .08);
	text-decoration: none;
	color: #5b6675;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.ys-float-item:hover {
	background: #1668dc;
	border-color: #1668dc;
	color: #fff;
	transform: translateX(-2px);
}

.ys-float-icon {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	opacity: 1;
	font-size: 19px;
	line-height: 1;
	color: #1668dc;
}

.ys-float-item:hover .ys-float-icon {
	color: #fff;
}

.ys-float-label {
	font-size: 11px;
	line-height: 1.2;
	color: inherit;
}

.ys-float-item:hover .ys-float-label {
	color: #fff;
}

@media (max-width: 767.98px) {
	.ys-float-bar {
		right: 8px;
		gap: 8px;
	}

	.ys-float-item {
		width: 50px;
		padding: 9px 0;
	}

	.ys-float-item:nth-child(-n+2) {
		display: flex;
	}
}


/* 悬浮项悬停不位移（原为 transform: translateX(-2px)）。
   元素在 hover 时移动会让"可点击性"检查（自动化工具、部分辅助技术）
   持续判定为不稳定，改为只变底色与投影、不改几何位置。 */
.ys-float-item:hover {
	transform: none;
	box-shadow: 0 8px 20px rgba(22, 104, 220, .18);
}


/* ==========================================================================
   帮助中心 / 新闻资讯 内页重做（8 个模板共用一套 class，一次覆盖全部）
   --------------------------------------------------------------------------
   覆盖：help.html / helpcategory / helparticle / helpsearch
         news.html / newscategory / newsarticle / newssearch
   设计语言与首页、登录页一致（色板 #1668dc · #1a1f36 · #6b7280 · #98a2b3、
   圆角 卡 14 / 控件 10、描边 rgba(23,38,70,.10)、卡片一层柔和阴影、控件无阴影）。
   列表页 = 内容区 + 右侧栏；详情页 = 文章卡；搜索/分页沿用站内规范。
   ========================================================================== */

/* ---------- ① 页头（浅蓝底带）---------- */
.ys-page-hero {
	background: linear-gradient(180deg, #f6faff 0%, #eaf3ff 100%);
	border-bottom: 1px solid rgba(23, 38, 70, .08);
	padding: 40px 0 34px;
}

.ys-page-title {
	font-size: 30px;
	line-height: 1.4;
	font-weight: 700;
	color: #1a1f36;
	margin: 0 0 10px;
}

.ys-page-sub {
	font-size: 14px;
	line-height: 1.7;
	color: #6b7280;
	margin: 0;
}

/* ---------- ② 列表页两栏：内容 + 右侧栏 ---------- */
.ys-list-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 24px;
	align-items: start;
	padding: 28px 0 56px;
}

.ys-main {
	background: transparent;
}

/* ---------- ③ 列表卡片 ---------- */
.ys-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ys-list-item {
	display: block;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid rgba(23, 38, 70, .10);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(23, 38, 70, .04);
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ys-list-item:hover {
	border-color: #1668dc;
	box-shadow: 0 14px 34px rgba(23, 38, 70, .08);
	transform: translateY(-2px);
}

.ys-list-title {
	display: block;
	font-size: 17px;
	line-height: 1.5;
	font-weight: 600;
	color: #1a1f36;
	margin: 0 0 8px;
}

.ys-list-desc {
	font-size: 13.5px;
	line-height: 1.7;
	color: #6b7280;
	margin: 0 0 10px;
}

.ys-list-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 12.5px;
	color: #98a2b3;
}

.ys-list-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* ---------- ④ 右侧栏卡片 ---------- */
.ys-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ys-side-box {
	padding: 18px 18px 8px;
	background: #fff;
	border: 1px solid rgba(23, 38, 70, .10);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(23, 38, 70, .04);
}

.ys-side-title {
	font-size: 15px;
	font-weight: 600;
	color: #1a1f36;
	margin: 0 0 12px;
}

.ys-side-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ys-side-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 0;
	font-size: 13.5px;
	color: #4b5563;
	text-decoration: none;
	border-bottom: 1px dashed rgba(23, 38, 70, .08);
	transition: color .2s ease;
}

.ys-side-list li:last-child a {
	border-bottom: 0;
}

.ys-side-list li a:hover {
	color: #1668dc;
}

.ys-side-count {
	flex: 0 0 auto;
	padding: 1px 8px;
	font-size: 12px;
	line-height: 18px;
	color: #1668dc;
	background: rgba(22, 104, 220, .10);
	border-radius: 999px;
}

/* ---------- ⑤ 搜索 ---------- */
.ys-search {
	display: flex;
	gap: 10px;
	margin: 0 0 18px;
}

.ys-search input[type="search"],
.ys-search input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	font-size: 14px;
	color: #1a1f36;
	background: #fff;
	border: 1px solid rgba(23, 38, 70, .14);
	border-radius: 10px;
	transition: border-color .2s ease;
}

.ys-search input:focus {
	border-color: #1668dc;
	outline: none;
}

.ys-search input::placeholder {
	color: #a8b0bf;
}

/* ---------- ⑥ 分页 ---------- */
.ys-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.ys-pager a,
.ys-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	font-size: 13px;
	color: #4b5563;
	background: #fff;
	border: 1px solid rgba(23, 38, 70, .12);
	border-radius: 8px;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.ys-pager a:hover {
	color: #1668dc;
	border-color: #1668dc;
}

.ys-pager .is-active,
.ys-pager span.is-active {
	color: #fff;
	background: #1668dc;
	border-color: #1668dc;
}

.ys-pager .is-disabled,
.ys-pager span.is-disabled {
	color: #c3c9d4;
	pointer-events: none;
	background: #f7f9fc;
}

/* ---------- ⑦ 文章页 ---------- */
.ys-article {
	padding: 30px 34px 34px;
	background: #fff;
	border: 1px solid rgba(23, 38, 70, .10);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(23, 38, 70, .04);
	font-size: 15px;
	line-height: 1.9;
	color: #374151;
}

.ys-article h1,
.ys-article h2,
.ys-article h3,
.ys-article h4 {
	color: #1a1f36;
	line-height: 1.45;
	margin: 26px 0 12px;
	font-weight: 600;
}

.ys-article h1 { font-size: 26px; }
.ys-article h2 { font-size: 21px; }
.ys-article h3 { font-size: 17px; }
.ys-article p { margin: 0 0 16px; }
.ys-article img { max-width: 100%; height: auto; border-radius: 10px; }
.ys-article a { color: #1668dc; }
.ys-article pre,
.ys-article code {
	background: #f7f9fc;
	border: 1px solid rgba(23, 38, 70, .08);
	border-radius: 8px;
}
.ys-article pre { padding: 14px 16px; overflow: auto; }

/* ---------- ⑧ 面包屑 / 空状态 / 联系方式卡 ---------- */
.ys-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 16px 0 0;
	font-size: 13px;
	color: #98a2b3;
}

.ys-crumb a {
	color: #6b7280;
	text-decoration: none;
}

.ys-crumb a:hover {
	color: #1668dc;
}

.ys-empty {
	padding: 60px 20px;
	text-align: center;
	font-size: 14px;
	color: #98a2b3;
	background: #fff;
	border: 1px solid rgba(23, 38, 70, .10);
	border-radius: 14px;
}

.ys-contact-card {
	padding: 18px;
	background: #fff;
	border: 1px solid rgba(23, 38, 70, .10);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(23, 38, 70, .04);
}

.ys-contact-label {
	font-size: 12.5px;
	color: #98a2b3;
	margin: 0 0 4px;
}

.ys-contact-value {
	font-size: 15px;
	font-weight: 600;
	color: #1a1f36;
	margin: 0 0 14px;
}

/* ---------- ⑨ 响应式 ---------- */
@media (max-width: 991.98px) {
	.ys-list-layout {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 20px 0 40px;
	}

	.ys-page-hero {
		padding: 26px 0 22px;
	}

	.ys-page-title {
		font-size: 22px;
	}

	.ys-list-item {
		padding: 16px;
		border-radius: 12px;
	}

	.ys-article {
		padding: 20px 18px 24px;
		border-radius: 12px;
		font-size: 14.5px;
	}

	.ys-side-box,
	.ys-contact-card,
	.ys-empty {
		border-radius: 12px;
	}
}


/* ===== 首页「新闻资讯」区块：帮助文章 + 新闻 两栏各半 =====
   左边帮助文章、右边新闻资讯，1:1 等分；卡片内不显示正文摘要（只留标题与元信息）。
   移动端单列堆叠。 */
.ys-twin {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.ys-twin-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(23, 38, 70, .10);
}

.ys-twin-title {
	font-size: 18px;
	font-weight: 600;
	color: #1a1f36;
	margin: 0;
}

.ys-twin-more {
	font-size: 13px;
	color: #6b7280;
	text-decoration: none;
	transition: color .2s ease;
}

.ys-twin-more:hover {
	color: #1668dc;
}

.ys-list-compact .ys-list-item {
	padding: 14px 16px;
	border-radius: 12px;
}

.ys-list-compact .ys-list-title {
	font-size: 15px;
	margin: 0 0 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ys-list-compact .ys-list-meta {
	font-size: 12px;
	gap: 4px 12px;
}

@media (max-width: 991.98px) {
	.ys-twin {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}


/* ===== 首页「关注最新消息」区块：副标题右移，与标题错开 =====
   标题左对齐、副标题缩进 12px，形成轻微错落（常见于腾讯云/阿里云这类官网的
   区块标题区）。只作用于首页这一块（section.ys-home-news），不影响其他区块。
   移动端缩进减半（6px），窄屏下错开过多会显散。 */
section.ys-home-news .ys-section-sub {
	padding-left: 12px !important;
}

@media (max-width: 991.98px) {
	section.ys-home-news .ys-section-sub {
		padding-left: 6px !important;
	}
}


/* 副标题错开加大：12px → 24px（移动端 12px） */
section.ys-home-news .ys-section-sub {
	padding-left: 24px !important;
}

@media (max-width: 991.98px) {
	section.ys-home-news .ys-section-sub {
		padding-left: 12px !important;
	}
}


/* 副标题改为「蓝色短竖线 + 缩进」（比纯缩进更有设计感）
   竖线用 border-left 实现：2px 品牌蓝、与文字间距 10px；
   整体缩进 12px（移动端 8px），与标题形成错落。 */
section.ys-home-news .ys-section-sub {
	padding-left: 10px !important;
	margin-left: 12px !important;
	border-left: 2px solid rgba(22, 104, 220, .55);
}

@media (max-width: 991.98px) {
	section.ys-home-news .ys-section-sub {
		padding-left: 8px !important;
		margin-left: 8px !important;
	}
}

/* ==================== ② 产品与服务：左侧一级分类 + 二级分组 + 商品网格 ====================
   一次只展示一个二级分组（商品分组）的商品，避免一次铺出上百个卡片。
   说明：.ys-cat-item 同时带 .ys-tabs-btn，因此沿用原有的 Tab 切换脚本，
   这里只覆盖外观（写在文件末尾，同权重下后出现的规则生效）。 */
.ys-cat {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.ys-cat-side { position: sticky; top: 90px; }
.ys-tabs-nav-v {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ys-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e8edf5;
  border-radius: 10px;
  background: #fff;
  color: #33475b;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: all .18s ease;
}
.ys-cat-item:hover { border-color: #c9dcf8; color: #1d5fbe; }
.ys-cat-item.is-active {
  border-color: #2b7de9;
  background: #f2f7ff;
  color: #1d5fbe;
  font-weight: 600;
}
.ys-cat-name { min-width: 0; }
.ys-cat-main { min-width: 0; }
.ys-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ys-subtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid #e8edf5;
  border-radius: 999px;
  background: #fff;
  color: #4a5b70;
  font-size: 13px;
  cursor: pointer;
  transition: all .18s ease;
}
.ys-subtab:hover { border-color: #2b7de9; color: #1d5fbe; }
.ys-subtab.is-active {
  border-color: #2b7de9;
  background: #2b7de9;
  color: #fff;
}
.ys-subtab .ys-tabs-count { font-style: normal; opacity: .8; }
.ys-subtab.is-active .ys-tabs-count { opacity: .95; }
@media (max-width: 991px) {
  .ys-cat { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ys-cat-side { position: static; }
  .ys-tabs-nav-v { flex-direction: row; flex-wrap: wrap; }
  .ys-cat-item { width: auto; padding: 8px 12px; font-size: 13px; }
}

/* ==================== 顶部导航「产品服务」下拉：左侧一级分组菜单 + 右侧商品分组 ==================== */
.ys-mega-split {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.ys-mega-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 14px;
  border-right: 1px solid var(--ys-border);
}
.ys-mega-side-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #33475b;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: all .16s ease;
}
.ys-mega-side-item:hover { background: #f4f8ff; color: var(--ys-primary); }
.ys-mega-side-item.is-active {
  background: #f2f7ff;
  border-color: #d7e6fb;
  color: var(--ys-primary);
  font-weight: 600;
}
.ys-mega-side-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ys-mega-side-count { font-style: normal; font-size: 12px; color: #94a3b8; }
.ys-mega-side-item.is-active .ys-mega-side-count { color: var(--ys-primary); }
.ys-mega-main { min-width: 0; }
.ys-mega-panel > .ys-mega-block:first-child { border-top: none; padding-top: 2px; }
@media (max-width: 991px) {
  .ys-mega-split { grid-template-columns: minmax(0, 1fr); }
  .ys-mega-side { flex-direction: row; flex-wrap: wrap; border-right: none; padding-right: 0; }
  .ys-mega-side-item { width: auto; }
}

/* 下拉右侧：二级分组卡片（一行多个，显示分组标题/标语） */
.ys-mega-gcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 10px;
}
.ys-mega-gcard {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid var(--ys-border);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: all .18s ease;
}
.ys-mega-gcard:hover {
  border-color: var(--ys-primary);
  box-shadow: 0 8px 20px -14px rgba(43,125,233,.65);
  transform: translateY(-1px);
}
.ys-mega-gcard-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ys-mega-gcard-name { font-size: 14px; font-weight: 600; color: #24364f; }
.ys-mega-gcard:hover .ys-mega-gcard-name { color: var(--ys-primary); }
.ys-mega-gcard-headline {
  font-style: normal;
  font-size: 11px;
  line-height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: #fff2e8;
  color: #e8730c;
  white-space: nowrap;
}
.ys-mega-gcard-tagline {
  font-size: 12px;
  line-height: 1.6;
  color: #7b8a9c;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ys-mega-gcard-go { font-size: 12px; color: #9aa8b8; }
.ys-mega-gcard-go i { font-size: 10px; margin-left: 3px; }
.ys-mega-gcard:hover .ys-mega-gcard-go { color: var(--ys-primary); }

/* 二级分组：标题小标签与分组标语（与顶部导航、购物车保持同一套视觉） */
.ys-subtab-head {
  font-style: normal;
  font-size: 11px;
  line-height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff2e8;
  color: #e8730c;
  white-space: nowrap;
}
.ys-subtab.is-active .ys-subtab-head { background: rgba(255,255,255,.22); color: #fff; }
.ys-subpanel-tagline {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--ys-primary);
  background: #f7faff;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.7;
  color: #5b6b7f;
}

/* 按需加载占位：服务端只渲染首个二级分组的商品，其余面板首次显示时才拉接口 */
.ys-plan-loading,
.ys-plan-empty,
.ys-plan-retry {
  grid-column: 1 / -1;
  padding: 32px 12px;
  text-align: center;
  font-size: 14px;
  color: #6b7a90;
}
.ys-plan-retry {
  cursor: pointer;
  color: var(--ys-primary);
}
.ys-plan-retry:hover { text-decoration: underline; }

/* ==========================================================================
   15. 滚动入场动画（2026-10-05）
   --------------------------------------------------------------------------
   · JS 用 IntersectionObserver 给 [data-ys-reveal] 加 .is-visible；
   · 首屏之上（banner）已有自己的入场序列，不参与；
   · 交错延迟用 --ys-reveal-delay（JS 按同组序号写入 0/.08/.16s…）；
   · prefers-reduced-motion：一律直接显示，不做动画。
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  [data-ys-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity .62s cubic-bezier(.22, .61, .36, 1),
      transform .62s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--ys-reveal-delay, 0s);
    will-change: opacity, transform;
  }
  [data-ys-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
  /* 从左侧滑入（referral 图/文双栏用，一左一右形成呼应） */
  [data-ys-reveal="left"]  { transform: translateX(-34px); }
  [data-ys-reveal="right"] { transform: translateX(34px); }
  [data-ys-reveal="left"].is-visible,
  [data-ys-reveal="right"].is-visible { transform: none; }

  /* 轻微放大入场（quick 快捷卡） */
  [data-ys-reveal="pop"] { transform: translateY(18px) scale(.96); }
  [data-ys-reveal="pop"].is-visible { transform: none; }

  /* 渐进式降级：JS 不可用时不能把内容藏成空白 */
  html.no-ys-io [data-ys-reveal] { opacity: 1; transform: none; }
}

/* SVG 雪碧图标（合作伙伴墙，2026-10-05）：use 继承 currentColor，
   与原 img 显示一致（源 icon 全部 fill=currentColor） */
.ys-partner-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  color: #3f4b5d;
}
.ys-partner:hover .ys-partner-icon { color: var(--ys-primary); }

/* ==========================================================================
   Banner 视觉打磨（2026-10-05，用户反馈批次）
   --------------------------------------------------------------------------
   ① 左栏选中/未选中对比度：未选中标题加白色实色（原继承到浅灰），描述加暗；
      选中项背景加深 + 左边条加宽，扫视层级一眼可分。
   ② 指示器：加高、加投影；选中段更宽（46px）且带发光边，浅蓝底上更醒目。
   ③ 左右箭头轻量化：48px→40px，描边减淡、毛玻璃降弱，hover 才恢复，减少拥挤感。
   ④ 主内容区：副标题与卖点之间加主次（副标题降透明度、卖点行距收紧）。
   ⑤ 全站滚动条自定义（浅色主题统一）。
   ========================================================================== */

/* ① 左栏层级 */
.ys-banner-aside-item .ys-banner-aside-title { color: #fff; }
.ys-banner-aside-item .ys-banner-aside-text { color: rgba(255, 255, 255, .66); }
.ys-banner-aside-item.is-active {
	background: rgba(13, 71, 161, .55);
	border-left-color: #4a9bff;
	box-shadow: 0 6px 18px rgba(9, 30, 66, .18);
}
.ys-banner-aside-item.is-active .ys-banner-aside-text { color: rgba(255, 255, 255, .9); }

/* ② 指示器 */
.ys-banner-pagination .swiper-pagination-bullet {
	height: 5px;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 1px 3px rgba(9, 30, 66, .25);
}
.ys-banner-pagination .swiper-pagination-bullet-active {
	width: 46px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(22, 104, 220, .35), 0 1px 4px rgba(9, 30, 66, .3);
}

/* ③ 箭头轻量化 */
.ys-banner-btn {
	width: 40px;
	height: 40px;
	font-size: 18px;
	background: rgba(255, 255, 255, .10);
	border-color: rgba(255, 255, 255, .20);
	backdrop-filter: blur(3px);
}
.ys-banner-btn:hover { background: rgba(255, 255, 255, .32); }
.ys-banner-next { right: 20px; }

/* ④ 主内容区主次 */
.ys-banner-sub { color: rgba(255, 255, 255, .72); margin-bottom: 18px; }
.ys-banner-points { gap: 8px 24px; margin-bottom: 28px; }

/* ⑤ 滚动条（全局，浅色统一；webkit + firefox 变量） */
* {
	scrollbar-width: thin;
	scrollbar-color: #c4cbd6 transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
	background: #c4cbd6;
	border-radius: 5px;
	border: 2px solid transparent;
	background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: #aab3c2; }

/* 指示器选中段加宽（对冲 base.css 的 span.20px!important） */
.ys-banner-pagination .swiper-pagination-bullet-active, span.ys-banner-pagination .swiper-pagination-bullet-active, .ys-banner-pagination span.swiper-pagination-bullet-active { width: 46px !important; }

/* ==========================================================================
   左栏最终定案（2026-10-05 第二轮）：浅色主题下的三态语言统一
   --------------------------------------------------------------------------
   实测问题：
     · 未选中标题是 #fff 纯白 —— 横幅底色早已转浅色（浅蓝渐变），白字几乎不可读；
     · active 用「深蓝半透明底 + 深色大阴影」，在浅底上读作一圈"黑色描边"，
       与 hover 的「浅色底 + 蓝竖条」形成两套视觉语言，同一组件看起来像两个样式。
   定案（三态递进、同一语言：白底 + 左竖条 + 主色文字）：
     idle   = 55% 白底 / 深色标题 / 灰描述 / 极浅左条
     hover  = 88% 白底 / 主色标题 / 蓝左条 + 轻阴影
     active = 实白底 / 主色标题 + 主色左条 / 轻阴影（不再用深蓝底与深色阴影）
   ========================================================================== */
.ys-banner-aside-item {
	background: rgba(255, 255, 255, .55);
	border-left-color: rgba(26, 31, 54, .12);
}
.ys-banner-aside-item .ys-banner-aside-title { color: #1a1f36 !important; }
.ys-banner-aside-item .ys-banner-aside-text { color: #616b7d !important; }
.ys-banner-aside-item .ys-banner-aside-title::after { color: rgba(26, 31, 54, .35); }

.ys-banner-aside-item:hover {
	background: rgba(255, 255, 255, .88);
	border-left-color: #4a9bff;
	box-shadow: 0 6px 16px rgba(23, 38, 70, .08);
}
.ys-banner-aside-item:hover .ys-banner-aside-title { color: #1668dc !important; }
.ys-banner-aside-item:hover .ys-banner-aside-title::after { color: #1668dc; }

.ys-banner-aside-item.is-active {
	background: #fff;
	border-left-color: #1668dc;
	box-shadow: 0 6px 16px rgba(23, 38, 70, .10);
}
.ys-banner-aside-item.is-active .ys-banner-aside-title { color: #1668dc !important; }
.ys-banner-aside-item.is-active .ys-banner-aside-text { color: #616b7d !important; }
.ys-banner-aside-item.is-active .ys-banner-aside-title::after { color: #1668dc; }

/* 勾选项四帧统一单行：实测 4 帧文案宽度 363~479px，而可用宽度仅 394px（640-246），
   导致「有的单行有的两行」。放宽内容区到 740px（可用 494px）+ 收紧行间距后，
   最长帧 467px 也能单行，四帧排版完全一致。 */
@media (min-width: 1200px) {
	.ys-banner-content { max-width: 740px; }
}
.ys-banner-points { gap: 8px 18px; }

/* 左右箭头：白实底 + 阴影（原来 10% 半透明白 + 深色图标，
   遇到横幅里的深色 3D 图形区域时图标融进背景、对比度骤降 —— 图7 的问题）。 */
section.ys-banner .ys-banner-btn {
	background: rgba(255, 255, 255, .92) !important;
	border-color: rgba(26, 31, 54, .06) !important;
	box-shadow: 0 4px 14px rgba(23, 38, 70, .16);
	backdrop-filter: none;
}
section.ys-banner .ys-banner-btn:hover {
	background: #fff !important;
	box-shadow: 0 6px 18px rgba(23, 38, 70, .22);
}

/* ==========================================================================
   返利带 & 上云之路（2026-10-06 反馈批）
   --------------------------------------------------------------------------
   ① 返利带「30% 卡片孤立」：实测左文案右边缘到 30% 卡片左边缘空出约 938px
      （.ys-referral-inner 用 space-between 撑满 1400px 容器）→ 改「居中构图」，
      并在文案与卡片之间加一段虚线+箭头（.ys-referral-flow，仅桌面），
      两边读成一个整体，而不是一左一右隔海相望。
   ② 上云之路「缺流程指示」：只有文字胶囊 → 胶囊内加序号圆点（1/2/3），
      卡片之间加虚线段箭头（SVG 内联背景，仅桌面；窄屏单列时隐藏）。
   ③ 标题「开启上云之路让企业迈向全新数字化阶段」实测单行 600px 无断句 →
      模板加 <br> 断成两行（改在 index.html，不在本文件）。
   ④ 副标题对比度：15px / #5a6479（约 5.9:1）→ 16px / #4a5568（约 7.5:1）。
      只动 .ys-section-sub（板块说明文字，叶子级）；卡片描述等仍用 --ys-text-sub，
      不受影响；深色区块的 .ys-section-head-light 覆盖色优先级更高，同样不受影响。
   ========================================================================== */

/* ④ 板块副标题：加深、微增字号 */
.ys-section-sub { font-size: 16px; color: #4a5568; }
.ys-referral .ys-section-sub { font-size: 16px; }

/* ① 返利带：居中构图 + 虚线箭头连接 */
.ys-referral-inner {
	justify-content: center;
	gap: clamp(24px, 3.2vw, 52px);
}
.ys-referral-flow { display: none; }
@media (min-width: 992px) {
	.ys-referral-flow {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		width: 72px;
	}
	.ys-referral-flow::before {
		content: "";
		flex: 1;
		height: 0;
		border-top: 2px dashed rgba(22, 104, 220, .38);
	}
	.ys-referral-flow::after {
		content: "";
		width: 0;
		height: 0;
		border-left: 9px solid rgba(22, 104, 220, .55);
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
	}
}
/* 30% 卡片给足存在感（原 22/38 内边距、46px 数字，居中构图后略放大） */
.ys-referral-figure { padding: 24px 44px; }
.ys-referral-figure strong { font-size: 50px; }

/* ② 上云之路：序号圆点 + 卡片间虚线段箭头 */
.ys-step-card { position: relative; }
.ys-step-no { padding: 2px 11px 2px 3px; }
.ys-step-no b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-right: 6px;
	border-radius: 50%;
	background: linear-gradient(135deg, #1668dc, #4d9bff);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}
@media (min-width: 992px) {
	.ys-steps-row { gap: 24px; }
	/* 箭头对准胶囊中心（实测胶囊中心距卡片顶 42px，箭头高 12 → top 36） */
	.ys-step-card:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 36px;
		right: -22px;
		width: 20px;
		height: 12px;
		background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 6h11' stroke='%231668dc' stroke-opacity='.4' stroke-width='2' stroke-dasharray='3 3'/%3E%3Cpath d='M12 1.5l4.5 4.5-4.5 4.5' fill='none' stroke='%231668dc' stroke-opacity='.55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	}
}

/* ⑤ 窄屏（<1300px）：左/右滑入改上下滑入 —— 修「横向可滚」隐患
   实测（390px 窄 iframe，未播放动画的最坏状态）：scrollWidth 394 / clientWidth 380，
   多出的 14px 来自 .ys-tabs-panels、.ys-referral-figure 等「右滑入」元素
   （未播放时 transform: translateX(+34px)，全宽元素直接悬出屏外）。
   容器 1240px + 两侧 20px 边距下，视口 <1300px 时侧向余量不足 34px，
   1280 级桌面同样有几像素溢出；≥1300px 桌面余量充足，保留原左右呼应效果。
   注意：必须包在 prefers-reduced-motion 媒体查询里（基础位移规则也在其中），
   否则关闭动效的用户会被这条规则置于永久偏移状态。 */
@media (prefers-reduced-motion: no-preference) and (max-width: 1299.98px) {
	[data-ys-reveal="left"],
	[data-ys-reveal="right"] { transform: translateY(26px); }
}

/* ==========================================================================
   轮播数据化 · 图片幻灯片样式（2026-10-06，配套插件 ys_banner）
   --------------------------------------------------------------------------
   图片与视频同版式：桌面占右侧 52%（object-fit: cover，避免拉伸变形），
   层级与视频一致（z-index 1，位于幻灯片的浅色遮罩 ::after 之下，文字照常可读）。
   窄屏（≤991.98px）与视频一致隐藏 —— 省流量、也保持与现版式相同的观感；
   若后续要手机端展示图片，需要另配一版遮罩强度，另行处理。
   ========================================================================== */
.ys-banner-image {
	position: absolute;
	right: 0;
	top: 0;
	width: 52%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	pointer-events: none;
}

@media (max-width: 991.98px) {
	.ys-banner-image { display: none; }
}

/* ==========================================================================
   文章详情页（新闻 / 帮助）反馈批（2026-10-06）
   --------------------------------------------------------------------------
   两页实测（1270px 视口）：
   ① 面包屑链接被早期「深色页头」时代的 `!important` 白字压住 —— 页头早已
      改浅色，白字在浅蓝底上对比度≈1.05:1，文字与分隔符几乎不可见；
   ② 元信息沿用模板内联白字 rgba(255,255,255,.7)，同样不可见；
   ③ 标题→元信息仅 14px（相邻 margin 折叠）、元信息→内容区 119px，
      头部与正文像两截；
   ④ 侧栏搜索按钮 42px/8px 与输入框 44px/10px 不一致；「需要帮助？」卡
      文字与按钮零间距（内联 margin 移走后）、分类只有一条时显得空；
   ⑤ 悬浮栏四项都是"白卡叠白卡"，压在侧栏上时层级不清，与内容区分不开。
   ========================================================================== */

/* ① 面包屑：深字可读 + 当前项加深 + 分隔符可见 */
.ys-crumb a { color: #4b5563 !important; }
.ys-crumb a:hover { color: #1668dc !important; }
.ys-crumb li { color: #98a2b3; }
.ys-crumb li:last-child { color: #1a1f36; font-weight: 600; }
.ys-crumb li + li::before { color: #c3c9d4; }

/* ② 元信息：深字 + 浅蓝药丸（给日期/分类/浏览量明确视觉锚点），与标题拉开层级 */
.ys-page-hero .ys-list-meta {
	margin-top: 20px;
	color: #4b5563;
	font-size: 13px;
}
.ys-page-hero .ys-list-meta span {
	padding: 3px 11px;
	background: rgba(22, 104, 220, .07);
	border-radius: 999px;
	color: #4b5563;
}
.ys-page-hero .ys-list-meta i { color: #1668dc; }

/* ③ 详情页：内容卡上移压住页头浅蓝带 —— 头部与正文连成一体，消除"断层"
   （-42px 实测：卡片压入色带约 14px、元信息到卡片 21px，两头都不挤） */
.ys-detail-main { padding-top: 0; }
.ys-detail-main .ys-list-layout { margin-top: -42px; }

/* ④ 正文卡：上下留白加大 + 中文长文行距/字距微调（现有测试内容仅两行，正式内容才能体现） */
.ys-article {
	padding: 34px 40px 38px;
	line-height: 1.95;
	letter-spacing: .01em;
}
.ys-article > :first-child { margin-top: 0; }
.ys-article > :last-child { margin-bottom: 0; }
.ys-article p { margin: 0 0 18px; }

/* ⑤ 侧栏：三卡节奏统一（同内边距/同间距）+ 控件严格对齐 + 分类空状态提示 */
.ys-side { gap: 14px; }
.ys-side-box { padding: 16px 18px 10px; }
.ys-side-help { padding-bottom: 16px; }
.ys-side-help .ys-feature-text { margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: #6b7280; }
.ys-side-help .ys-footer-info { margin: 0 0 2px; }
.ys-side-help .ys-footer-info li:last-child { margin-bottom: 8px; }
.ys-side-box .ys-btn-block {
	width: 100%;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ys-search { margin: 0 0 16px; }
.ys-search button { height: 44px; border-radius: 10px; }   /* 与输入框严格一致（原 42px/8px） */
.ys-side-hint { margin: 6px 0 0; font-size: 12.5px; color: #98a2b3; }
.ys-side-list + .ys-side-hint { margin-top: 8px; padding-top: 10px; border-top: 1px dashed rgba(23, 38, 70, .10); }

/* ⑥ 悬浮栏：整组做成半透明白底面板（毛玻璃 + 投影）——明确"浮在内容之上"；
   「顶部」是页面操作，用分隔线与上面三个业务入口区分 */
.ys-float-bar {
	padding: 6px;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(23, 38, 70, .08);
	border-radius: 16px;
	box-shadow: 0 14px 36px rgba(23, 38, 70, .16);
	gap: 4px;
}
.ys-float-item {
	width: 48px;
	padding: 9px 0;
	gap: 4px;
	border-color: transparent;
	border-radius: 12px;
	box-shadow: none;
}
.ys-float-bar .ys-float-item:hover { box-shadow: none; }
.ys-float-bar #ysToTop {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid rgba(23, 38, 70, .10);
	border-radius: 0 0 12px 12px;
}
.ys-float-bar #ysToTop .ys-float-icon { font-size: 16px; }

/* 窄屏：悬浮栏再收一号，减小与侧栏卡片的重叠面（面板样式已保证层级可辨） */
@media (max-width: 1399.98px) {
	.ys-float-bar { right: 10px; }
	.ys-float-item { width: 44px; }
}
@media (max-width: 767.98px) {
	.ys-detail-main .ys-list-layout { margin-top: -22px; }
	.ys-article { padding: 20px 16px 22px; }
	.ys-float-item { width: 42px; padding: 8px 0; }
	.ys-float-bar { padding: 5px; border-radius: 14px; }
}

/* ==========================================================================
   头部用户区图标（2026-10-06 反馈）
   · 移动端抽屉里的「用户项（头像图标 + 用户名）」整项不显示 —— 入口交给下方的
     「客户中心 / 退出登录」按钮（只针对用户项；电话项与按钮不受影响）；
   · PC 端右区用户头像图标放大（原继承 14px → 20px），更醒目。
   ========================================================================== */
.ys-nav-user .ys-nav-user-me { display: none; }
.ys-header-right .ys-user-name i { font-size: 20px; }

/* ==========================================================================
   右侧悬浮栏交互细化（2026-10-17 用户反馈：hover / 点击太生硬、部分操作没反应）
   · 原来只有 0.2s 的纯色跳变，且后段样式把阴影与位移都覆盖掉了 → 现在给
     「底色 + 投影 + 图标缩放」一起做 0.3s 缓动，整块轻微左移，手感更顺；
   · 点击加白色水波纹（触摸/未悬停时用主色波纹），点下去立刻有反馈；
   · 「在线联系」等待客服组件时图标脉冲，避免"点了没动静"。
   选择器统一带 .ys-float-bar 前缀，确保压过后面的 .ys-float-bar .ys-float-item:hover
   （同权、写在文件末尾，按顺序生效）。
   ========================================================================== */
.ys-float-bar .ys-float-item {
	position: relative;
	overflow: hidden;
	transition: background-color .35s cubic-bezier(.4, 0, .2, 1),
		border-color .35s cubic-bezier(.4, 0, .2, 1),
		color .35s cubic-bezier(.4, 0, .2, 1),
		box-shadow .35s cubic-bezier(.4, 0, .2, 1),
		transform .35s cubic-bezier(.4, 0, .2, 1);
}

/* 渐变必须用叠层淡入：background-image（linear-gradient）不能参与 transition，
   直接写在 :hover 里会"瞬间变蓝"，这正是蓝色效果显得生硬的根因。 */
.ys-float-bar .ys-float-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #2a7ff0 0%, #1668dc 55%, #1257bd 100%);
	opacity: 0;
	transition: opacity .35s cubic-bezier(.4, 0, .2, 1);
	pointer-events: none;
	z-index: 0;
}

.ys-float-bar .ys-float-item:hover::before {
	opacity: 1;
}

.ys-float-bar .ys-float-item:hover {
	border-color: transparent;
	color: #fff;
	transform: translateX(-3px);
	box-shadow: 0 10px 22px rgba(22, 104, 220, .28);
}

.ys-float-bar .ys-float-item:active {
	transform: translateX(-1px) scale(.96);
	transition-duration: .08s;
}

.ys-float-bar .ys-float-icon {
	position: relative;
	z-index: 1;
	transform-origin: 50% 50%;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1), color .35s ease;
}

.ys-float-bar .ys-float-item:hover .ys-float-icon {
	color: #fff;
	transform: scale(1.14) rotate(-4deg);
}

.ys-float-bar .ys-float-label {
	position: relative;
	z-index: 1;
	transition: color .35s ease;
}

.ys-float-bar .ys-float-item:hover .ys-float-label {
	color: #fff;
}

/* 点击水波纹：未悬停时用主色，悬停（蓝底）时用白色 */
.ys-float-bar .ys-float-item::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: rgba(22, 104, 220, .28);
	opacity: 0;
	transform: scale(0);
	pointer-events: none;
	z-index: 2;
}

.ys-float-bar .ys-float-item:hover::after {
	background: rgba(255, 255, 255, .55);
}

.ys-float-bar .ys-float-item.is-pressed::after {
	animation: ysFloatRipple .5s ease-out;
}

@keyframes ysFloatRipple {
	0% { opacity: .6; transform: scale(0); }
	100% { opacity: 0; transform: scale(11); }
}

/* 在线联系：客服组件就绪前图标脉冲 */
.ys-float-bar .ys-float-item.is-loading .ys-float-icon {
	animation: ysFloatPulse .9s ease-in-out infinite;
}

@keyframes ysFloatPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .55; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
	.ys-float-bar .ys-float-item,
	.ys-float-bar .ys-float-icon,
	.ys-float-bar .ys-float-label { transition: none !important; }
	.ys-float-bar .ys-float-item:hover { transform: none; }
	.ys-float-bar .ys-float-item.is-pressed::after,
	.ys-float-bar .ys-float-item.is-loading .ys-float-icon { animation: none; }
}

/* ==========================================================================
   悬浮栏「联系方式」弹层（2026-10-17 新增）
   · 点「联系方式」在栏左侧展开；QQ / 邮箱 / 电话（有配置才出现）/ 在线客服；
   · 复制按钮有"已复制"反馈；在线客服复用「在线联系」的打开逻辑；
   · 弹层用 opacity + 微位移过渡，和悬浮栏的缓动手感一致。
   ========================================================================== */
.ys-float-bar .ys-float-item.is-active::before { opacity: 1; }

.ys-float-bar .ys-float-item.is-active {
	border-color: transparent;
	color: #fff;
	transform: translateX(-3px);
	box-shadow: 0 10px 22px rgba(22, 104, 220, .28);
}

.ys-float-bar .ys-float-item.is-active .ys-float-icon {
	color: #fff;
	transform: scale(1.14) rotate(-4deg);
}

.ys-float-bar .ys-float-item.is-active .ys-float-label { color: #fff; }

.ys-contact-pop {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	width: 268px;
	max-width: calc(100vw - 96px);
	max-height: calc(100vh - 32px);
	overflow: auto;
	padding: 6px;
	background: #fff;
	border: 1px solid rgba(23, 38, 70, .10);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(23, 38, 70, .18);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-50%) translateX(8px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
	z-index: 2;
	-webkit-overflow-scrolling: touch;
}

.ys-contact-pop.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(-50%) translateX(0);
}

.ys-contact-pop-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 12px 8px;
	font-size: 14px;
	font-weight: 700;
	color: #1a1f36;
}

.ys-contact-pop-titles {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ys-contact-pop-sub {
	font-size: 11.5px;
	font-weight: 400;
	color: #98a2b3;
}

.ys-contact-pop-close {
	border: 0;
	background: transparent;
	color: #98a2b3;
	font-size: 18px;
	line-height: 1;
	padding: 2px 6px;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.ys-contact-pop-close:hover {
	background: #f2f6fd;
	color: #1668dc;
}

.ys-contact-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 10px;
	transition: background-color .2s ease;
}

.ys-contact-row + .ys-contact-row { margin-top: 2px; }

.ys-contact-row:hover { background: #f6f9ff; }

.ys-contact-icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #eef5ff;
	border-radius: 9px;
	font-size: 15px;
	color: #1668dc;
}

.ys-contact-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.ys-contact-label {
	font-size: 11.5px;
	line-height: 1.3;
	color: #98a2b3;
}

.ys-contact-value {
	font-size: 13.5px;
	line-height: 1.4;
	font-weight: 600;
	color: #1a1f36;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ys-contact-copy,
.ys-contact-open-chat,
.ys-contact-qr-btn {
	flex: 0 0 auto;
	border: 1px solid #dbe4f2;
	background: #fff;
	color: #1668dc;
	font-size: 12px;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 7px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ys-contact-copy:hover,
.ys-contact-open-chat:hover,
.ys-contact-qr-btn:hover {
	background: #1668dc;
	border-color: #1668dc;
	color: #fff;
}

.ys-contact-link {
	display: inline-flex;
	align-items: center;
}

.ys-contact-qr {
	padding: 2px 10px 10px 38px;
}

.ys-contact-qr img {
	display: block;
	width: 160px;
	height: 160px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #e6e9ef;
	border-radius: 8px;
}

.ys-contact-empty {
	padding: 18px 10px;
	text-align: center;
	font-size: 13px;
	color: #98a2b3;
}

.ys-contact-copy.is-copied {
	background: #e8f7ee;
	border-color: #b7e4c7;
	color: #178a4c;
}

@media (max-width: 767.98px) {
	.ys-contact-pop {
		right: calc(100% + 8px);
		width: 240px;
	}

	.ys-contact-row {
		gap: 8px;
		padding: 8px;
	}

	.ys-contact-value { font-size: 12.5px; }
}

@media (max-width: 480px) {
	.ys-contact-pop {
		width: 220px;
		max-width: calc(100vw - 80px);
	}
}

/* ==========================================================================
   右侧悬浮栏移动端修复（2026-10-17）
   5 个入口 + 四字标签（在线联系/联系方式）在 42~44px 宽按钮里会换行，
   导致按钮高低不一、整栏被撑高、与页面元素挤压。移动端改为纯图标模式：
   隐藏文字、统一 44px 方形按钮与间距，超窄屏再缩一档。
   ========================================================================== */
.ys-float-bar .ys-float-label {
	white-space: nowrap;
}

@media (max-width: 767.98px) {
	.ys-float-bar {
		right: 8px;
		gap: 6px;
		padding: 5px;
	}

	.ys-float-bar .ys-float-item {
		width: 44px;
		height: 44px;
		padding: 0;
		gap: 0;
	}

	.ys-float-bar .ys-float-item .ys-float-label {
		display: none;
	}

	.ys-float-bar .ys-float-icon {
		font-size: 18px;
	}

	.ys-contact-pop {
		right: calc(100% + 8px);
	}
}

@media (max-width: 380px) {
	.ys-float-bar {
		gap: 5px;
	}

	.ys-float-bar .ys-float-item {
		width: 42px;
		height: 42px;
		padding: 0;
	}
}

@media (max-height: 520px) and (max-width: 767.98px) {
	.ys-float-bar {
		gap: 4px;
		padding: 4px;
	}

	.ys-float-bar .ys-float-item {
		width: 38px;
		height: 38px;
		padding: 0;
	}

	.ys-float-bar .ys-float-icon {
		font-size: 16px;
	}
}

/* ==========================================================================
   悬浮栏「公告」弹层（2026-10-17）
   与联系方式弹层同一套浮层规范：白卡、圆角、淡入位移、窄屏收窄。
   ========================================================================== */
.ys-notice-pop {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	width: 300px;
	max-width: calc(100vw - 96px);
	max-height: calc(100vh - 32px);
	overflow: auto;
	padding: 6px;
	background: #fff;
	border: 1px solid rgba(23, 38, 70, .10);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(23, 38, 70, .18);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-50%) translateX(8px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
	z-index: 2;
	-webkit-overflow-scrolling: touch;
}

.ys-notice-pop.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(-50%) translateX(0);
}

.ys-notice-list {
	padding: 4px 12px 14px;
}

.ys-notice-item {
	border-radius: 10px;
}

.ys-notice-item + .ys-notice-item {
	border-top: 1px solid #f2f5fa;
}

.ys-notice-title {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 8px;
	border: 0;
	background: transparent;
	border-radius: 10px;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	transition: background-color .2s ease;
}

.ys-notice-title:hover {
	background: #f6f9ff;
}

.ys-notice-title.ysn-static,
.ys-notice-title.ysn-static:hover {
	background: transparent;
	cursor: default;
}

.ys-notice-title-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	color: #1a1f36;
	word-break: break-word;
}

.ys-notice-date {
	flex: 0 0 auto;
	font-size: 11px;
	color: #98a2b3;
}

.ys-notice-arrow {
	flex: 0 0 auto;
	font-size: 12px;
	color: #98a2b3;
	transition: transform .2s ease;
}

.ys-notice-item.is-open .ys-notice-arrow {
	transform: rotate(180deg);
}

.ys-notice-body {
	padding: 0 10px 12px;
}

.ys-notice-content {
	font-size: 15px;
	line-height: 1.8;
	font-weight: 700;
	color: #1a1f36;
	word-break: break-word;
}

.ys-notice-content a {
	color: #1668dc;
	text-decoration: underline;
}

.ys-notice-content ul,
.ys-notice-content ol {
	margin: 6px 0 8px;
	padding-left: 20px;
}

.ys-notice-content li {
	margin: 2px 0;
}

.ys-notice-content code {
	padding: 1px 5px;
	border-radius: 4px;
	background: #f2f5fa;
	font-size: .92em;
	font-weight: 500;
}

.ys-notice-content strong {
	font-weight: 800;
}

.ys-notice-content em {
	font-style: italic;
}

.ys-notice-content del {
	opacity: .75;
}

.ys-notice-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	font-size: 12.5px;
	color: #1668dc;
	text-decoration: none;
}

.ys-notice-link:hover {
	text-decoration: underline;
}

.ys-notice-empty {
	padding: 22px 10px;
	text-align: center;
	font-size: 13px;
	color: #98a2b3;
}

@media (max-width: 767.98px) {
	.ys-notice-pop {
		right: calc(100% + 8px);
		width: 260px;
		max-width: calc(100vw - 80px);
	}
}

@media (max-width: 480px) {
	.ys-notice-pop {
		width: 235px;
	}
}

.ys-notice-content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 8px 0;
	border-radius: 8px;
}