/* ==========================================================================
   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; }
.ys-banner-pagination .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 .swiper-pagination-bullet-active { background: #fff; width: 38px; }

/* 切换箭头：贴屏幕两侧、垂直居中（悬停整屏高亮，箭头更明显） */
.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;
  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;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.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-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;
	}
}