/* ==========================================================================
   零零壹云计算 · 主题样式
   配色：主色白 / 徽章蓝 #3296f9 / 按钮黄+蓝
   说明：变量集中在 :root，改一处即可全局换肤；分节注释便于二次开发定位。
   ========================================================================== */

/* ===================== 1. 主题变量 ===================== */
:root {
  /* 品牌色 */
  --c-blue: #3296f9;          /* 主品牌蓝（徽章 / 链接 / 主按钮） */
  --c-blue-dark: #1f7ae0;     /* 蓝色 hover */
  --c-yellow: #fdd700;        /* 强调黄（副按钮） */
  --c-yellow-dark: #e6c600;   /* 黄色 hover */
  --c-navy: #15212a;          /* 深藏蓝（首页轮播底） */

  /* 中性色 */
  --c-text: #212122;          /* 主文字 */
  --c-muted: #6c757d;         /* 次要文字 */
  --c-grey: #4c4a4a;
  --c-grey-light: #aaa;
  --c-border: #eef0f3;
  --c-bg-soft: #f7f8fa;

  /* 尺寸 */
  --header-height: 72px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 16px 48px rgba(31, 100, 200, .16);
  --shadow-sm: 0 4px 16px rgba(31, 100, 200, .08);

  /* 玻璃态（玻璃拟态窗口效果） */
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-border: rgba(255, 255, 255, .65);
  --glass-blur: blur(20px) saturate(180%);

  /* 字体 */
  --font-base: "SiYuanHei", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ===================== 2. 字体与基础 ===================== */
/* 本地思源黑体 */
@font-face {
  font-family: "SiYuanHei";
  src: url("../font/siyuanhei.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--c-text);
  background: #fff;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

/* 锁定背景滚动（移动菜单展开时由 JS 添加） */
body.no-scroll { overflow: hidden; }

/* ===================== 3. 玻璃态工具类 ===================== */
/* 玻璃拟态：半透明 + 背景模糊，营造悬浮通透的高级感 */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

/* ===================== 4. 通用徽标 / 按钮 ===================== */
.badge {
  display: inline-block;
  padding: .18em .5em;
  font-size: .72em;
  font-weight: 700;
  border-radius: 6px;
  vertical-align: middle;
}

.badge--blue { background: var(--c-blue); color: #fff; }
.badge--grey { background: var(--c-grey); color: #fff; }

.btn-brand {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .6em 1.4em;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--c-blue);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
}

.btn-brand:hover {
  background: var(--c-blue-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(50, 150, 249, .35);
}

.btn-brand:active { transform: translateY(0); }

.btn-brand--yellow { background: var(--c-yellow); color: #000; }
.btn-brand--yellow:hover { background: var(--c-yellow-dark); color: #000; box-shadow: 0 8px 20px rgba(253, 215, 0, .4); }

.btn-block { display: flex; width: 100%; justify-content: center; }

/* ===================== 5. 顶部资讯栏 ===================== */
.topbar {
  background: #fff url("../img/top_bg.png") no-repeat center/cover;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
  font-size: .88rem;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* 最左（资讯）· 最右（账户）布局 */
  gap: 1rem;
  min-height: 40px;
  padding: 0 1.5rem;               /* 全宽布局，仅保留两端留白 */
}

.topbar__news { display: flex; align-items: center; gap: .5rem; }
.topbar__news .badge { background: var(--c-blue); }
.topbar__slogan { color: var(--c-muted); font-weight: 400; }   /* 标语浅色、取消加粗 */
.topbar__news-link { color: var(--c-text); }
.topbar__news-link:hover { color: var(--c-blue-dark); }

.topbar__nav { display: flex; align-items: center; gap: 1.1rem; margin: 0; }

.topbar__nav a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--c-grey);
  transition: color .2s;
}

.topbar__nav a:hover { color: var(--c-blue); }

.topbar__nav--featured {
  background: rgba(50, 150, 249, .1);
  color: var(--c-blue);
  padding: .25em .8em;
  border-radius: 20px;
}

/* ===================== 6. 主导航栏 ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
  transition: box-shadow .25s;
}

/* 滚动后由 JS 添加，增强层级 */
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;                       /* 品牌 / 导航 / 操作区间距 */
  height: var(--header-height);
}

.brand img { display: block; height: 55px; width: auto; }

.main-nav { display: none; margin-left: auto; } /* 桌面端显示并贴右（margin-left 吸收剩余空间），见响应式 */

.main-nav__list {
  display: flex;
  align-items: center;
  gap: 2.4rem;                     /* 加宽导航间距 */
}

.nav-item { position: relative; }
/* mega 菜单项不建立定位上下文，使其 .mega-menu 相对 .site-header 居中 */
.nav-item--mega { position: static; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 0;
  font-weight: 400;               /* 取消加粗 */
  color: var(--c-muted);          /* 字体颜色进一步调浅 */
  transition: color .2s;
}

/* 悬停下划线动画：从左向右展开 */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--c-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}

.nav-item > .nav-link:hover { color: var(--c-blue); }
.nav-item > .nav-link:hover::after { transform: scaleX(1); }

/* ===================== 7. 下拉菜单 ===================== */
.dropdown-menu-panel,
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 12px;                       /* 外距离：与导航拉开间距 */
  padding: 1rem;                          /* 内距离 */
  background: #fff;                       /* 实底：取消半透明玻璃态 */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.97); /* 入场动画起点 */
  transition: opacity .25s, transform .25s, visibility .25s;
  pointer-events: none;
}

/* 悬停 / 键盘聚焦时展开 */
.nav-item:hover > .dropdown-menu-panel,
.nav-item:hover > .mega-menu,
.nav-item:focus-within > .dropdown-menu-panel,
.nav-item:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* 悬停桥接：透明 ::before 覆盖导航与下拉间空隙，鼠标下滑可固定菜单不消失 */
.dropdown-menu-panel::before,
.mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  height: 20px;
}

/* 单排下拉收窄（最新活动 / 帮助中心） */
.dropdown-menu-panel { min-width: 180px; }

.dropdown-menu-panel__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border-radius: var(--radius-sm);
  color: var(--c-text);
  transition: background .2s, color .2s, transform .2s;
}

.dropdown-menu-panel__item:hover {
  background: rgba(50, 150, 249, .08);
  color: var(--c-blue);
  transform: translateX(4px);
}

/* 带图标的服务项（最新活动下拉 / 关于我们 mega 共用） */
.dropdown-service {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .8rem 1.1rem;                  /* 内距离 */
  border-radius: var(--radius-sm);
  transition: background .2s, transform .2s;
}

.dropdown-service:hover {
  background: rgba(50, 150, 249, .08);
  transform: translateX(4px);
}

.dropdown-service > i {
  flex: none;
  width: 1.4rem;
  margin-top: .15rem;
  color: var(--c-blue);
  transition: transform .25s;
}

.dropdown-service:hover > i { transform: scale(1.15) rotate(-6deg); }

.dropdown-service__title { display: block; font-weight: 600; color: var(--c-text); }
.dropdown-service:hover .dropdown-service__title { color: var(--c-blue); }
.dropdown-service__desc { display: block; color: var(--c-muted); font-size: .8rem; }

/* ===================== 8. Mega 菜单 ===================== */
.mega-menu {
  left: 50%;                              /* 相对 .site-header 水平居中（视口居中） */
  transform: translateX(-50%) translateY(14px) scale(.97);
  width: 1280px;                          /* 加宽：原 1200px */
  max-width: calc(100vw - 2rem);          /* 防止小屏溢出 */
  margin-top: 0;                          /* 贴紧导航栏下缘，悬停由 ::before 桥接 */
  display: flex;
  padding: 0;
  /* 不设 overflow:hidden，避免裁剪 ::before 悬停桥接 */
}

.nav-item:hover > .mega-menu,
.nav-item:focus-within > .mega-menu { transform: translateX(-50%) translateY(0) scale(1); }

.mega-menu__main { flex: 1; padding: 2rem; }  /* 内距离加大，缓解紧凑 */

.mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;                              /* 列间距加大 */
}

/* 选项卡：一级分类标签（左） + 二级分类卡片面板（右） */
.mega-tabs { display: flex; gap: 1.25rem; }

/* 左侧标签栏（一级分类） */
.mega-tabs__nav {
  flex: none;
  width: 180px;
  padding-right: 1rem;
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.mega-tabs__item { list-style: none; }

.mega-tabs__link {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .6rem .8rem;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--c-grey);
  font-size: .95rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.mega-tabs__link i { color: var(--c-blue); }

.mega-tabs__link:hover,
.mega-tabs__link.is-active {
  background: rgba(50, 150, 249, .08);
  color: var(--c-blue-dark);
  font-weight: 600;
}

/* 右侧面板区 */
.mega-tabs__panels { flex: 1; min-width: 0; }

/* 面板默认隐藏，激活显示 */
.mega-tabs__panel { display: none; }
.mega-tabs__panel.is-active { display: block; }

/* 二级分类卡片：3 列横向排布（单排最多 3 个，避免拥挤） */
.mega-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

.mega-card {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
  position: relative; /* 关键！作为图片定位参照物 */
}
/* 卡片角标 */
.hot-sale-label-wbe{
  position: absolute;
  top: -5px;
  right: -5px;
  width: 48px;
  opacity: 0.9;
}


.mega-card:hover {
  transform: translateY(-3px);
  border-color: rgba(50, 150, 249, .45);
  background: #f5f9ff;                    /* 悬停淡蓝底 */
  box-shadow: var(--shadow-sm);
}

.mega-card__link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1.25rem 1.05rem;               /* 加高卡片，增大留白 */
  font-size: 1rem;
  /* font-weight: 600; */
  color: var(--c-text);
}

/* 国旗图标（地区匹配），细描边避免浅色国旗与白底粘连 */
.mega-card__flag {
  flex: none;
  width: 25px;
  /* height: 15px; */
  /* border-radius: 4px; */
  object-fit: cover;
  /* box-shadow: 0 0 0 1px var(--c-border); */
}

.mega-card__name { flex: 1; min-width: 0; }  /* 名称撑满剩余空间，箭头贴右 */

.mega-card__link i { color: var(--c-blue); font-size: .85rem; transition: transform .2s; }
.mega-card:hover .mega-card__link i { transform: translateX(3px); }

/* 底部快捷标签 */
.mega-menu__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-border);
}

.mega-menu__footer-label { color: var(--c-muted); font-size: .88rem; }

.mega-menu__footer a {
  padding: .35em 1em;
  border-radius: 6px;
  background: var(--c-blue);
  color: #fff;
  font-size: .85rem;
  transition: background .2s, transform .2s;
}

.mega-menu__footer a:hover { background: var(--c-blue-dark); transform: translateY(-1px); }

/* 右侧优惠卡片 */
.mega-menu__offer {
  flex: none;
  width: 280px;                           /* 加宽：原 250px */
  padding: 1.75rem 1.5rem;
  background: linear-gradient(160deg, #3a9cff, var(--c-blue-dark));
  color: #fff;
  border-radius: 0 var(--radius) var(--radius) 0;  /* 贴合菜单右侧圆角（原靠 overflow:hidden 裁切） */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mega-menu__offer h4 { font-size: 1.2rem; line-height: 1.4; }
.mega-menu__offer p { font-size: .86rem; opacity: .92; }
.mega-menu__offer del { opacity: .7; }
.mega-menu__offer-price { margin: .75rem 0; }
.mega-menu__offer-price strong { display: block; font-size: 1.1rem; }
.mega-menu__offer-price b { color: var(--c-yellow);font-size: 1.5rem; }
.mega-menu__offer .btn-brand { background: #fff; color: var(--c-blue-dark); align-self: flex-start; }
.mega-menu__offer .btn-brand:hover { background: var(--c-yellow); color: #000; }

/* 关于我们：同样视口居中显示，三列服务（两排显示） */
.mega-menu--about {
  width: 1100px;
  max-width: calc(100vw - 2rem);
}

.mega-menu--about .mega-menu__grid {
  grid-template-columns: repeat(3, 1fr);  /* 3 列 → 6 项两排 */
  gap: 1rem;
}

/* ===================== 9. 右侧操作区 ===================== */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: .8rem;
}

/* 控制台入口（渐变胶囊按钮，独立于通用 .btn-brand） */
.btn-console {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .55em 1.3em;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #fdd801, var(--c-yellow) 60%, var(--c-yellow));
  color: #000;
  box-shadow: 0 6px 16px rgba(50, 150, 249, .3);
  transition: transform .2s, box-shadow .2s, filter .2s;
}

.btn-console i { font-size: 1em; }

.btn-console span { font-size: 0.8em; }

.btn-console:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(50, 150, 249, .42);
  filter: brightness(1.04);
}

.btn-console:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(50, 150, 249, .28); }

.side-trigger {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}

.side-trigger img { width: 30px; height: 30px; }
.side-trigger:hover {
  border-color: var(--c-blue);
  transform: rotate(90deg);
  box-shadow: 0 4px 12px rgba(50, 150, 249, .25);
}

/* 汉堡按钮 */
.hamburger {
  display: none; /* 移动端显示，见响应式 */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 2px;
  width: 24px;
  margin: 0 auto;
  background: var(--c-text);
  transition: transform .25s, opacity .25s;
}

/* 展开后变为 X */
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===================== 10. 移动端菜单 ===================== */
.mobile-menu {
  position: fixed;
  inset: 0;                       /* 全屏覆盖 */
  z-index: 1050;
  display: flex;
  flex-direction: column;
  background: #fff;
  transform: translateX(-100%);
  transition: transform .3s ease;
}

.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--c-border);
}

.mobile-menu__header .brand img { height: 32px; }

.mobile-menu__close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-text);
  cursor: pointer;
}

.mobile-menu__inner {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0 1rem 1rem;
}

/* 分组按钮左侧「文字 + 徽章」，让徽章紧靠文字 */
.mobile-menu__label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.mobile-menu__link {
  padding: .85rem .25rem;
  font-weight: 600;
  border-bottom: 1px solid var(--c-border);
}

.mobile-menu__group { border-bottom: 1px solid var(--c-border); }

.mobile-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .85rem .25rem;
  border: none;
  background: transparent;
  font-weight: 600;
  color: var(--c-text);
}

.mobile-menu__toggle i { font-size: .8rem; transition: transform .25s; }
.mobile-menu__toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.mobile-menu__sub {
  display: block;
  padding: .55rem .5rem;
  color: var(--c-grey);
  border-left: 2px solid var(--c-border);
  transition: color .2s, border-color .2s, transform .2s;
}

.mobile-menu__sub:hover { color: var(--c-blue); border-left-color: var(--c-blue); transform: translateX(3px); }

.mobile-menu__footer {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 1.5rem;
}

.mobile-menu__footer small { color: var(--c-grey-light); }

/* ===================== 11. 侧边栏 ===================== */
.offcanvas-header{
  border-bottom: 1px solid var(--c-border);
}

.side-panel { width: 480px !important; max-width: 92vw; }

.side-panel__heading {
  margin: 1.4rem 0 .1rem;
  font-weight: 700;
}

.side-panel__heading:first-child { margin-top: 0; }
.side-panel__desc { color: var(--c-muted); font-size: .85rem; }

/* 机房卡片（玻璃态） */
.side-card {
  display: block;
  padding: .5rem;
  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  transition: transform .25s, box-shadow .25s;
}

.side-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }

.side-card img {
  width: 100%;
  height: 125px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.side-card__body {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .5rem .1rem;
}

.side-card__tag {
  align-self: flex-start;
  padding: .1em .5em;
  border-radius: 6px;
  background: var(--c-blue);
  color: #fff;
  font-size: .7rem;
}

.side-card__title { font-weight: 700; color: var(--c-text); }
.side-card small { color: var(--c-muted); }

/* 促销卡片（玻璃态） */
.side-promo {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem;
  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  transition: transform .25s, box-shadow .25s;
}

.side-promo:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }

.side-promo__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--c-blue);
  color: #fff;
}

.side-promo__body { flex: 1; display: flex; flex-direction: column; }
.side-promo__body strong { color: var(--c-text); }
.side-promo__body small { color: var(--c-muted); }

.side-promo__discount {
  flex: none;
  padding: .15em .6em;
  border-radius: 20px;
  background: var(--c-grey);
  color: #fff;
  font-size: .8rem;
}

.side-promo__discount--blue { background: var(--c-blue); }

/* 操作系统图标网格 */
.os-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}

.os-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .7rem .3rem;
  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  font-size: .8rem;
  color: var(--c-grey);
  transition: color .2s, transform .2s, box-shadow .2s;
}

.os-grid__item:hover { color: var(--c-blue); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.os-grid__item img { height: 28px; width: auto; }


/* ===================== 页面标题横幅（page-hero） ===================== */
/* 内页通用横幅：背景引用 assets/img/cart_banner.jpg（1920×480），
   叠加深色渐变遮罩，保证标题 / 副标题 / 按钮在图上清晰可读。 */
.page-hero {
  position: relative;
  padding: 6.5rem 0;                     /* 上下留白撑起横幅高度 */
  background:
    /* linear-gradient(90deg, rgba(76, 152, 232, 0.72), rgba(13, 26, 40, .38)), */
    url("../img/cart_banner.jpg") center/cover no-repeat;
  color: #fff;
}

.page-hero__title {
  margin: 0 0 .5rem;
  font-size: 3rem;
  font-weight: 700;
}

.page-hero__subtitle {
  margin: 0 0 1.5rem;
  font-size: .95rem;
  opacity: .92;
}

.page-hero__actions {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}


/* ===================== 12. 轮播框 Hero Carousel（复制自 /001/） ===================== */
/* 首页产品横幅：四帧英雄轮播，视觉风格沿用原 /001/ 模板——
   首帧深藏蓝底 + 视频背景，第 2–4 帧白底黑字；黄/蓝双按钮、右侧 SVG 插画。
   技术栈由原 Flickity + AOS 升级为 Bootstrap 轮播 + 原生 CSS 入场动画。 */
.hero-carousel {
  position: relative;
  overflow: hidden;
  background: var(--c-navy);            /* 视频未加载时的占位色 */
}

/* 单帧：默认深色全高横幅（首帧视频底） */
.hero-slide {
  position: relative;
  min-height: 600px;
  color: #fff;
  overflow: hidden;
  background: var(--c-navy);
}

/* 浅色帧（第 2–4 帧无视频）：白底黑字 */
.hero-slide--light {
  color: var(--c-text);
  background: #fff;
}

/* 首帧视频背景 */
.hero-slide__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 视频上的深色遮罩，保证文字可读 */
.hero-slide__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .62);
}

.hero-slide__inner {
  position: relative;
  z-index: 2;
  min-height: 600px;
  display: flex;
  align-items: center;
  padding: 4rem 0;
}

/* 左：文案 */
.hero-slide__content { position: relative; z-index: 2; max-width: 640px; }

.hero-slide__title {
  margin: 0 0 1.25rem;
  color: #fff;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 1px;
}

.hero-slide__desc {
  max-width: 560px;
  margin: 0 0 2.5rem;
  color: #d4dee7;                       /* 浅灰蓝，深底上的次要文字 */
  font-size: 1.15rem;
  line-height: 1.7;
}

/* 浅色帧：标题转深色、副文案转中灰 */
.hero-slide--light .hero-slide__title { color: var(--c-text); }
.hero-slide--light .hero-slide__desc  { color: var(--c-muted); }

.hero-slide__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* 双按钮：黄主 + 蓝次（.btn-brand 本身即蓝色），统一放大到横幅尺寸 */
.hero-slide__actions .btn-brand,
.hero-slide__actions .btn-brand--yellow { padding: .7em 1.9em; font-size: 1.05rem; }

/* 右：SVG 插画（绝对定位、向右溢出，营造大图氛围） */
.hero-slide__figure {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: 46%;
  z-index: 1;
  pointer-events: none;
}
.hero-slide__img { width: 100%; height: auto; max-height: 520px; object-fit: contain; }

/* 文字入场动画（由 .carousel-item.active 触发，逐级上浮） */
.hero-slide .hero-slide__title,
.hero-slide .hero-slide__desc,
.hero-slide .hero-slide__actions,
.hero-slide .hero-slide__figure { opacity: 0; }

.carousel-item.active .hero-slide__title   { animation: heroUp .8s .05s ease forwards; }
.carousel-item.active .hero-slide__desc    { animation: heroUp .8s .15s ease forwards; }
.carousel-item.active .hero-slide__actions { animation: heroUp .8s .25s ease forwards; }
.carousel-item.active .hero-slide__figure  { animation: heroFade 1s .2s ease forwards; }

/* 文字上浮；插画因自身带 translateY(-50%) 定位，仅做淡入 */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 底部指示器：横条胶囊式，激活态拉长并变为品牌黄 */
.hero-carousel .carousel-indicators { margin-bottom: 1.5rem; }
.hero-carousel .carousel-indicators [data-bs-target] {
  width: 32px;
  height: 3px;
  margin: 0 4px;
  border: 0;
  border-radius: 2px;
  background: rgba(88, 93, 98, 0.3);
  opacity: 1;
  transition: width .3s, background .3s;
}
.hero-carousel .carousel-indicators .active { width: 56px; background: var(--c-yellow); }

/* 浅色帧激活时（.is-light 由 JS 依据当前帧切换）：指示器改深灰、激活蓝 */
.hero-carousel.is-light .carousel-indicators [data-bs-target] { background: rgba(21, 33, 42, .18); }
.hero-carousel.is-light .carousel-indicators .active { background: var(--c-blue); }

/* 左右切换按钮：半透明白圆钮，悬停反色 */
.hero-carousel__btn {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(136, 133, 133, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #535151;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s, background .25s, border-color .25s;
}
.hero-carousel__btn--prev { left: 20px; }
.hero-carousel__btn--next { right: 20px; }
.hero-carousel:hover .hero-carousel__btn { opacity: 1; }
.hero-carousel__btn:hover { background: var(--c-yellow); border-color: var(--c-yellow); color: #000; }

/* 浅色帧激活时：切换按钮转深色描边，悬停蓝色反色 */
.hero-carousel.is-light .hero-carousel__btn { border-color: rgba(21, 33, 42, .18); background: rgba(21, 33, 42, .06); color: var(--c-text); }
.hero-carousel.is-light .hero-carousel__btn:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }

/* 中屏（992–1199px）：收窄插画，避免挤压左侧文案 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-slide__figure { width: 44%; }
  .hero-slide__img { max-height: 440px; }
}

/* 移动端（<992px）：隐藏插画、内容居中 */
@media (max-width: 991.98px) {
  .hero-slide,
  .hero-slide__inner { min-height: 520px; }
  .hero-slide__inner { justify-content: center; text-align: center; }
  .hero-slide__figure { display: none; }
  .hero-slide__desc { margin: 0 auto 2.2rem; }
  .hero-slide__actions { justify-content: center; }
  .hero-carousel__btn { display: none; }
}

/* 减少动效偏好：取消入场动画 */
@media (prefers-reduced-motion: reduce) {
  .hero-slide .hero-slide__title,
  .hero-slide .hero-slide__desc,
  .hero-slide .hero-slide__actions,
  .hero-slide .hero-slide__figure { opacity: 1; animation: none; }
}

/* ===================== 13. 我们的产品和服务 ===================== */
/* 产品专区：标题 + 副标语 + 图标选项卡 + 卡片网格。
   网格为 4 列，首列「专区介绍卡」纵向占两行，其余为节点卡（图片底 + 标题/副标题 + 底部按钮）。
   选项卡复用 Bootstrap Tab 组件（Bundle 已引入），内容淡入淡出；介绍卡走玻璃态。 */
.product-tabs {
  position: relative;                    /* 供左侧 blob 装饰绝对定位 */
  padding: 4.5rem 0 5rem;
  background:
    radial-gradient(1200px 500px at 82% -10%, rgba(50, 150, 249, .12), transparent 60%),
    radial-gradient(900px 420px at 8% 110%, rgba(253, 215, 0, .10), transparent 60%),
    linear-gradient(180deg, #f8fbff, #fff);
}

/* 左侧背景装饰：竖排圆点 blob.svg，绝对定位于左缘、垂直居中，不拦截点击 */
.product-tabs__blob {
  position: absolute;
  left: 0;
  top: 25%;
  transform: translateY(-50%);
  z-index: 0;
  width: 103px;
  height: 284px;
  opacity: .55;
  pointer-events: none;
}
/* 内容容器置于装饰之上 */
.product-tabs .container { position: relative; z-index: 1; }

/* 标题区（居中） */
.product-tabs__head { text-align: center; margin-bottom: 2.25rem; }
.product-tabs__title {
  margin: 0 0 .75rem;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 1px;
}
.product-tabs__subtitle {
  margin: 0 auto;
  max-width: 640px;
  color: var(--c-muted);
  font-size: 1.05rem;
}

/* 选项卡导航：胶囊玻璃态，等宽均分；列数随一级分类数量自适应（auto-fit），
   移动端固定 3 列自动折两行 */
.product-tabs__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .75rem;
  margin-bottom: 2rem;
}
.product-tabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* 等宽按钮内文字居中 */
  width: 100%;
  gap: .55rem;
  padding: .7rem 1.4rem;
  border: 1px solid rgb(216 219 232 / 65%);
  border-radius: 20px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--c-text);
  font-size: .98rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s, background .25s, box-shadow .25s, transform .25s;
}
.product-tabs__tab i { color: var(--c-blue); }
.product-tabs__tab:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
/* 激活态：品牌蓝渐变 + 白字 */
.product-tabs__tab.active {
  background: linear-gradient(135deg, var(--c-blue), var(--c-blue-dark));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(50, 150, 249, .35);
}
.product-tabs__tab.active i { color: #fff; }

/* 内容区 */
.product-tabs__content { position: relative; }

/* 卡片网格：4 列；节点卡约 160px，介绍卡纵向占两行（≈ 2 张节点卡高） */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 1.25rem;
}

/* 专区介绍卡（玻璃态 + 左上角光斑，纵向占两行） */
.product-intro {
  grid-row: span 2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.75rem 1.5rem;
  border-radius: var(--radius);
  overflow: hidden;
}
.product-intro::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(50, 150, 249, .25), transparent 70%);
}
.product-intro__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--c-blue), var(--c-blue-dark));
  color: #fff;
  font-size: 1.4rem;
  box-shadow: 0 8px 18px rgba(50, 150, 249, .35);
}
.product-intro__title { margin: 0 0 .5rem; font-size: 1.35rem; font-weight: 700; }
.product-intro__desc { margin: 0 0 1.25rem; color: var(--c-muted); font-size: .95rem; line-height: 1.7; }
.product-intro__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--c-blue);
  font-weight: 600;
  font-size: .95rem;
  transition: gap .2s, color .2s;
}
.product-intro__more:hover { color: var(--c-blue-dark); gap: .7rem; }

/* 节点卡片（浅色图片底，约 160px）：标题/副标题在上，底部实线空心按钮在下 */
.product-node {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "flag body"
    "btn  btn";
  align-items: center;
  align-content: space-between;
  min-height: 150px;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  color: var(--c-text);
  /* 白色雾化叠加：提亮底图、保留细节，确保深色文字可读（无深色笼罩） */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .8)),
    url("../img/product_bj_1.jpg") center/cover no-repeat;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.product-node:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.product-node__flag {
  grid-area: flag;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  /* border-radius: 12px; */
  overflow: hidden;   /* 裁切国旗 SVG，保持圆角边框 */
  /* background: #fff; */
  /* border: 1px solid #ccc; */
}
/* 国旗 SVG：铺满容器并等比裁切（与 header.html 的 mega-card__flag 同款处理） */
.product-node__flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-node__body { grid-area: body; display: flex; flex-direction: column; min-width: 0;margin-left: .5rem; }
.product-node__name {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .2px;
  color: var(--c-text);
}
.product-node__desc {
  margin-top: .25rem;
  color: var(--c-muted);
  font-size: .86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 卡片底部按钮：实线空心文字按钮（品牌蓝描边），悬停填充反色 */
.product-node__btn {
  grid-area: btn;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1.1rem;
  border: 1px solid var(--c-muted);
  border-radius: 999px;
  color: var(--c-muted);
  font-size: .85rem;
  font-weight: 500;
  transition: background .25s, color .25s, border-color .25s;
}
.product-node:hover .product-node__btn {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: #fff;
}

/* 响应式：介绍卡由「纵向占两行」降级为「整行通栏」，节点卡逐步减少列数；
   <992px 选项卡改 3 列，5 个标签自动折成两行（3+2） */
@media (max-width: 991.98px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .product-intro { grid-row: span 1; grid-column: 1 / -1; }
  .product-tabs__nav { grid-template-columns: repeat(3, 1fr); }
  .product-tabs__blob { display: none; }   /* 窄屏容器贴边，隐藏左侧装饰 */
}
@media (max-width: 767.98px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-node { min-height: 148px; }
  .product-tabs__tab { font-size: .84rem; gap: .4rem; padding: .6rem .5rem; }
}

/* ===================== 14. 核心业务场景 ===================== */
/* 以真实业务场景为切入点的选型方法论：2×3 卡片，正面为场景名，悬停翻转显示选型建议。
   翻转采用 perspective + preserve-3d + backface-visibility 实现；正反面用网格叠放，
   单元格高度取两者较大值，避免固定高度导致的文字溢出。 */
.scenario {
  padding: 4.5rem 0 5rem;
  background:
    radial-gradient(1000px 420px at 50% -10%, rgba(50, 150, 249, .07), transparent 60%),
    linear-gradient(180deg, #fff, #f7faff);
}

/* 标题区（居中） */
.scenario__head { text-align: center; margin-bottom: 1rem; }
.scenario__title {
  margin: 0 0 .75rem;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 1px;
}
.scenario__subtitle {
  margin: 0 auto;
  max-width: 640px;
  color: var(--c-muted);
  font-size: 1.05rem;
}

/* 卡片网格：桌面 3 列 × 2 行，移动端逐级降列 */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* 翻转卡片：外层建立 3D 视距，悬停 / 聚焦时内层绕 Y 轴翻转 180° */
.scenario-card { perspective: 1200px; }
.scenario-card__inner {
  display: grid;               /* 正反面叠放在同一网格单元，高度取两者较大值 */
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4, .2, .2, 1);
}
.scenario-card:hover .scenario-card__inner,
.scenario-card:focus .scenario-card__inner,
.scenario-card:focus-within .scenario-card__inner { transform: rotateY(180deg); }

/* 正反面共用：叠放 + 背面隐藏 */
.scenario-card__face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 1.5rem;
  text-align: center;
  border-radius: var(--radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 正面：场景名 + 一句卖点 + 翻转提示 */
.scenario-card__face--front {
  background: #fff;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
}
/* 场景图标：emoji，置于浅蓝渐变圆角底上，无需额外着色 */
.scenario-card__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(50, 150, 249, .12), rgba(50, 150, 249, .04));
  border: 1px solid rgba(50, 150, 249, .12);
  font-size: 2rem;
  line-height: 1;
}
.scenario-card__title { margin: 0 0 .4rem; font-size: 1.22rem; font-weight: 700; }
/* 场景一句卖点：居中灰字，说明该场景核心价值 */
.scenario-card__hint { margin: 0 0 .95rem; color: var(--c-muted); font-size: .88rem; }
/* 翻转提示：胶囊样式，引导用户悬停查看背面选型建议 */
.scenario-card__flip {
  padding: .3rem .85rem;
  border-radius: 999px;
  background: rgba(50, 150, 249, .08);
  color: var(--c-blue);
  font-size: .78rem;
  letter-spacing: .5px;
}

/* 背面：选型建议（预先翻转 180°，内容顶部左对齐） */
.scenario-card__face--back {
  transform: rotateY(180deg);
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  background: linear-gradient(160deg, #eef4fe, #fff);
  border: 1px solid var(--c-border);
}
/* 「选型建议」标签：浅蓝胶囊 */
.scenario-card__label {
  display: inline-flex;
  align-items: center;
  margin: 0 0 .6rem;
  padding: .25rem .65rem;
  border-radius: 6px;
  background: rgba(50, 150, 249, .12);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--c-blue);
}
.scenario-card__list { display: grid; gap: .45rem; width: 100%; margin: 0; }
/* 每条选型建议：浅色圆角卡片 + 左侧对勾 + 蓝色左边框，形成「条件 → 推荐」的阅读节奏 */
.scenario-card__list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .45rem .6rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(50, 150, 249, .12);
  border-left: 3px solid #0d83fa;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--c-text);
}
/* 对勾图标（Font Awesome）：用 ::before 注入，避免逐条硬编码 <i> */
.scenario-card__list li::before {
  content: "\f058";                 /* fa-circle-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  flex: none;
  margin-top: .2em;
  font-size: .88rem;
  line-height: 1;
  color: var(--c-blue);
}

/* 结论行：蓝色底强调，加粗深蓝，突出最终结论 */
.scenario-card__result {
  background: rgba(50, 150, 249, .1);
  border-color: rgba(50, 150, 249, .22);
  color: var(--c-blue-dark);
  font-weight: 700;
}

/* 底部操作区：查看更多 / 咨询客服。
   margin-top: auto 吸收上方剩余空间，把按钮固定在背面底部，不额外撑高卡片 */
.scenario-card__actions {
  display: flex;
  gap: .5rem;
  width: 100%;
  margin-top: auto;
  padding-top: .6rem;
}
.scenario-card__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .36rem .6rem;
  border-radius: var(--radius-sm);
  font-size: .82rem;
  font-weight: 600;
  transition: background .2s, color .2s, border-color .2s;
}
/* 主按钮：查看更多 */
.scenario-card__btn--more {
  background: var(--c-blue);
  border: 1px solid var(--c-blue);
  color: #fff;
}
.scenario-card__btn--more:hover {
  background: var(--c-blue-dark);
  border-color: var(--c-blue-dark);
  color: #fff;
}
/* 次按钮：咨询客服（描边） */
.scenario-card__btn--service {
  background: #fff;
  border: 1px solid var(--c-blue);
  color: var(--c-blue);
}
.scenario-card__btn--service:hover {
  background: rgba(50, 150, 249, .08);
  color: var(--c-blue-dark);
}

/* 响应式：3 列 → 2 列 → 1 列 */
@media (max-width: 991.98px) { .scenario-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .scenario-grid { grid-template-columns: 1fr; } }

/* ===================== 15. 为什么选择我们 ===================== */
/* 品牌信任背书：黄色背景（#fdd801）+ 深色字体，4 张玻璃态卡片。
   玻璃态 = 半透明白 + backdrop-filter 背景模糊，让黄色背景从卡片后透出。
   背景装饰：hardware.svg 硬件线条插画，半透明覆盖于黄色底之上（见 ::before）。 */
.why {
  position: relative;                     /* 供 ::before 水印绝对定位 */
  padding: 4.5rem 0 5rem;
  background: #fdd801;
  color: #1a1a1a;
  overflow: hidden;                       /* 裁掉水印超出的部分 */
}

/* 半透明背景：硬件线条插画 hardware.svg，纯装饰，置于内容之下 */
.why::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../svg/ico/hardware.svg") no-repeat center / cover;
  opacity: .15;                           /* 半透明，不干扰卡片阅读 */
  pointer-events: none;
  z-index: 0;
}

/* 内容层提到水印之上，保证标题与卡片可点击、可读 */
.why .container { position: relative; z-index: 1; }

/* 标题区（居中，深色） */
.why__head { text-align: center; margin-bottom: 2.5rem; }
.why__title {
  margin: 0;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 1px;
  color: #1a1a1a;
}

/* 卡片网格：桌面 4 列，随屏宽逐级降列 */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

/* 玻璃态卡片：半透明白 + 背景模糊，悬停轻微上浮并提亮 */
.why-card {
  padding: 1.6rem 1.25rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
  text-align: center;
  transition: transform .25s, background .25s, box-shadow .25s;
}
.why-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .12);
}

/* 图标：深藏蓝圆底 + 黄色图标，呼应品牌与背景色 */
.why-card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  background: #fff;
  color: #fdd801;
  font-size: 1.35rem;
}
.why-card__title {
  margin: 0 0 .5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a1a1a;
}
.why-card__desc {
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(0, 0, 0, .7);
}

/* 响应式：4 列 → 2 列 → 1 列 */
@media (max-width: 991.98px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .why-grid { grid-template-columns: 1fr; } }

/* ===================== 16. 数据节点分布 ===================== */
/* 全球数据中心节点地图：底图 + 绝对定位的标注点，悬停 / 聚焦显示节点简介。
   标注点坐标用百分比（相对 .nodes__map），随容器等比缩放，适配不同屏宽。 */
.nodes {
  padding: 4.5rem 0 0;      /* 底部由能力横幅撑起，使横幅紧贴专区底部 */
  background: #fff;
}

/* 标题区（居中） */
.nodes__head { text-align: center; margin-bottom: 1rem; }
.nodes__title {
  margin: 0 0 .75rem;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 1px;
}
.nodes__subtitle {
  margin: 0 auto;
  max-width: 640px;
  color: var(--c-muted);
  font-size: 1.05rem;
}

/* 地图容器：作为标注点的定位基准，底图等比缩放 */
.nodes__map {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}
.nodes__bg {
  display: block;
  width: 100%;
  height: auto;
}

/* 标注点：绝对定位（坐标为圆点位置），内部子元素均相对它定位 */
.node {
  position: absolute;
  z-index: 1;
}
/* 悬停 / 聚焦时提升当前节点的层级，保证其简介窗口不被其它标注点或城市名遮挡
   （.node 带 z-index 会建立层叠上下文，内部的 .node__tip 只能在其内部排序，
     因此需提升整个节点层级而非仅提升窗口） */
.node:hover,
.node:focus,
.node:focus-within {
  z-index: 20;
}

/* 各节点坐标（相对地图容器，百分比） */
.node--losangeles { top: 42%; left: 23%; }
.node--frankfurt  { top: 36%; left: 47%; }
.node--seoul      { top: 40%; left: 80%; }
.node--tokyo      { top: 43%; left: 85%; }
.node--hongkong   { top: 53%; left: 78%; }
.node--singapore  { top: 64%; left: 76%; }
.node--xian       { top: 45%; left: 72%; }
.node--ningbo     { top: 48%; left: 76%; }

/* 圆点：品牌蓝 + 白描边，居中于坐标点 */
.node__dot {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-blue);
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(50, 150, 249, .22), 0 4px 10px rgba(50, 150, 249, .35);
  cursor: pointer;
}
/* 扩散光晕脉冲 */
.node__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(50, 150, 249, .55);
  animation: node-ping 2.2s ease-out infinite;
}
@keyframes node-ping {
  0%       { transform: scale(.55); opacity: 1; }
  80%, 100% { transform: scale(1.9); opacity: 0; }
}

/* 城市名：常显，位于圆点正下方 */
.node__label {
  position: absolute;
  top: 12px;
  left: 0;
  transform: translateX(-50%);
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  line-height: 1;
}

/* 悬停窗口：节点简介，位于圆点上方；纯 CSS 实现（无需 JS） */
.node__tip {
  position: absolute;
  bottom: 18px;
  left: 0;
  transform: translateX(-50%) translateY(6px);
  width: 200px;
  padding: .65rem .8rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 3;
}
/* 透明桥接带：连接圆点与窗口，避免鼠标移动时悬停中断 */
.node__tip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 18px;
}
/* 底部箭头 */
.node__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fff;
}
.node__tip strong {
  display: block;
  margin-bottom: .25rem;
  font-size: .85rem;
  color: var(--c-text);
}
.node__tip span {
  display: block;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--c-muted);
}

/* 悬停 / 聚焦（键盘、触屏）显示 */
.node:hover .node__tip,
.node:focus .node__tip,
.node:focus-within .node__tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 键盘聚焦时给圆点加一圈高亮，弥补零尺寸容器的轮廓不可见 */
.node { outline: none; }
.node:focus-visible .node__dot {
  box-shadow: 0 0 0 3px rgba(50, 150, 249, .22), 0 0 0 5px rgba(50, 150, 249, .6);
}

/* 移动端：圆点与字号略缩，避免拥挤 */
@media (max-width: 575.98px) {
  .node__dot { width: 13px; height: 13px; }
  .node__label { font-size: .7rem; top: 10px; }
  .node__tip { width: 170px; }
}

/* 能力横幅：玻璃态，全宽、紧贴专区底部，4 项关键数据（大数字 + 标语）。
   全宽 = 直接铺满整个版面（无最大宽度/圆角），内容由内部 .container 约束居中；
   玻璃 = 淡蓝 → 淡黄渐变 + 背景模糊 + 上下白色描边。 */
.nodes__banner {
  margin-top: 3.5rem;                    /* 与上方地图拉开间距 */
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, rgba(50, 150, 249, .14), rgba(50, 150, 249, .04) 55%, rgba(253, 215, 0, .12));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, .8);
  border-bottom: 1px solid rgba(255, 255, 255, .8);
}

/* 数据网格：桌面 4 列，随屏宽降为 2 列 */
.nodes__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}

/* 单个数据：大数字在上，标语在下 */
.nodes__stat-num {
  display: block;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .5px;
  color: var(--c-blue-dark);
}
.nodes__stat-label {
  display: block;
  margin-top: .6rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--c-muted);
}

/* 响应式：4 列 → 2 列 */
@media (max-width: 991.98px) {
  .nodes__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ===================== 17. 页脚 ===================== */
/* 浅色页脚：顶部主区（4 列链接 + 品牌二维码）+ 底部备案信息条。
   背景 #ebeff5，symbol.svg 作为居中半透明水印（见 ::before）。 */
.site-footer {
  position: relative;
  color: var(--c-text);                  /* 主文字：黑色系 */
  background: #ebeff5;
  overflow: hidden;
}

/* 居中半透明水印：品牌符号 symbol.svg，纯装饰，置于内容之下 */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/symbol.svg") no-repeat center / 600px auto;
  opacity: .08;                          /* 半透明，不干扰阅读 */
  pointer-events: none;
  z-index: 0;
}
/* 右侧背景装饰：竖排圆点 blob.svg，镜像翻转 180°，与产品区左侧装饰呼应 */
.site-footer::after {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;
  width: 103px;
  height: 284px;
  transform: translateY(-50%) rotate(180deg);
  background: url("../img/blob.svg") no-repeat center / contain;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

.site-footer__main,
.site-footer__bottom { position: relative; z-index: 1; }   /* 盖在装饰之上 */

/* 顶部主区 */
.site-footer__main { padding: 3.5rem 0 1rem; }

/* 列标题：深色 + 蓝色小竖条 */
.site-footer__heading {
  position: relative;
  margin: 0 0 1.1rem;
  padding-left: .9rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--c-text);
}
.site-footer__heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1em;
  border-radius: 2px;
  background: var(--c-blue);
}

/* 链接菜单 */
.footer-menu { display: grid; gap: .55rem; }
.footer-menu a {
  color: var(--c-muted);
  font-size: .92rem;
  transition: color .2s, padding-left .2s;
}
.footer-menu a:hover { color: var(--c-grey-light); padding-left: .3rem; }

/* 品牌 + 二维码列 */
.site-footer__brand img { display: block; height: 60px; width: auto; }
.site-footer__slogan {
  margin: 1rem 0 1.25rem;
  color: var(--c-muted);
  font-size: .86rem;
  line-height: 1.7;
}

/* 二维码组 */
.footer-qr { display: flex; gap: 1rem; }
.footer-qr__item { text-align: center; }
.footer-qr__img {
  display: block;
  width: 92px;
  height: 92px;
  padding: 6px;                          /* 白底留边，衬托二维码 */
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--c-border);     /* 浅底上给白卡加描边，增强层次 */
  object-fit: contain;
}
.footer-qr__label {
  display: inline-block;
  margin-top: .55rem;
  color: var(--c-muted);
  font-size: .8rem;
}

/* 底部：法律声明 + 支持系统 */
.site-footer__bottom {
  border-top: 1px solid rgba(0, 0, 0, .06);
  /* background: rgba(0, 0, 0, .03); */
  padding: 1.4rem 0 1.6rem;
  font-size: .82rem;
  color: var(--c-muted);
}

/* 法律声明列表 */
.footer-legal { display: grid; gap: .45rem; margin: 0; }
.footer-legal li { line-height: 1.7; }
.footer-legal a {
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s;
}
.footer-legal a:hover { color: var(--c-blue); }
.footer-legal__ico {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: .25rem;
  vertical-align: -2px;
}

/* 支持系统图标 */
.footer-systems {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .9rem;
}
.footer-systems__label { color: var(--c-muted); font-size: .8rem; white-space: nowrap; }
.footer-systems__list { display: flex; align-items: center; gap: .8rem; margin: 0; }
.footer-systems__ico {
  display: block;
  width: 22px;                          /* 系统图标统一尺寸，按需调整 */
  height: 22px;
  opacity: .9;                          /* 轻微降饱和，hover 恢复并上浮 */
  transition: opacity .2s, transform .2s;
}
.footer-systems__list li:hover .footer-systems__ico { opacity: 1; transform: translateY(-2px); }

/* 版权 */
.site-footer__copyright {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, .06);
  text-align: center;
  color: var(--c-muted);
  font-size: .8rem;
}

/* 移动端：链接与标题居中、二维码居中、系统图标左对齐 */
@media (max-width: 991.98px) {
  .site-footer__heading { text-align: center; padding-left: 0; margin-top: .5rem; }
  .site-footer__heading::before { display: none; }   /* 居中后隐藏左侧竖条 */
  .footer-menu { text-align: center; }               /* 链接文字居中 */
  .site-footer__brand { display: block; text-align: center; }
  .site-footer__brand img { margin: 0 auto; }          /* LOGO 居中显示 */
  .site-footer__slogan { text-align: center; }
  .footer-qr { justify-content: center; }
  .footer-systems { justify-content: flex-start; }
  .site-footer::before { background-size: 340px auto; }   /* 水印随屏收窄 */
  .site-footer::after { display: none; }                  /* 右侧圆点装饰移动端隐藏 */
}

/* ===================== 18. 响应式 ===================== */
/* 桌面端（≥992px）：显示主菜单，隐藏汉堡与移动菜单 */
@media (min-width: 992px) {
  .main-nav { display: block; }
  .hamburger { display: none; }
  .mobile-menu { display: none; }
}

/* 移动端（<992px）：隐藏主菜单，显示汉堡 */
@media (max-width: 991.98px) {
  .main-nav { display: none; }
  .hamburger { display: flex; }
  .site-header__actions .btn-brand,
  .site-header__actions .btn-console { display: none; } /* 控制台按钮移入移动菜单「用户中心」 */
  .topbar__nav span { display: none; }                  /* 只留图标，节省空间 */
  .topbar__slogan { display: none; }                    /* 移动端不显示标语，只留 news 与开始选购 */
  .topbar__inner { padding: 0 .75rem; }                 /* 顶栏两端贴紧屏幕边缘 */
}

/* ===================== 19. 图片灯箱 ===================== */
/* 点击机柜卡片放大预览：模糊背景 + 居中大图，点击空白处关闭 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.lightbox.is-open { opacity: 1; visibility: visible; }

/* 模糊背景（点击关闭） */
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.lightbox__content {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: min(920px, 92vw);
  max-height: 86vh;
}

.lightbox__content img {
  display: block;
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.lightbox__close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--c-text);
  font-size: 1.25rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, background .2s;
}

.lightbox__close:hover { background: #fff; transform: scale(1.1); }

/* ===================== 20. 右侧悬浮按钮（返回顶部 / 微信客服） ===================== */
/* 固定于右下角，纵向排列：返回顶部在上、微信客服球在下 */
.float-stack {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;                          /* 与返回顶部保持 16px 间距，避免浮动动画遮挡 */
}

/* 返回顶部：圆钮，滚动超过一屏后由 JS 添加 .is-visible 显示 */
.back-top {
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--c-yellow);
  color: var(--c-muted);
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(50, 150, 249, .4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s, visibility .3s, background .2s;
}
.back-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top:hover { background: var(--c-blue-dark); }

/* 微信客服悬浮球 */
.wx-float { position: relative; }
.wx-float__ball {
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.wx-float__ball img { width: 100%; height: 100%; object-fit: cover; }

/* 微信球轻微浮动动画：幅度 6px < 与返回顶部的 16px 间距，不会遮挡上方按钮 */
@keyframes wx-float-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.wx-float__ball { animation: wx-float-bob 3s ease-in-out infinite; }
.wx-float:hover .wx-float__ball { animation-play-state: paused; }   /* 悬停扫码时暂停 */

/* 二维码面板：悬停 / 键盘聚焦时滑入（纯 CSS，无需 JS） */
.wx-float__panel {
  position: absolute;
  right: calc(100% + 14px);
  bottom: 0;
  width: 168px;
  padding: .9rem;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.wx-float:hover .wx-float__panel,
.wx-float:focus-within .wx-float__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.wx-float__title { margin: 0 0 .4rem; font-size: .85rem; font-weight: 600; color: var(--c-text); }
.wx-float__qr { display: block; width: 100%; border-radius: 6px; }

/* ===================== 21. 最新活动页（new.html） ===================== */
/* 2026 秋季上云季活动页：主题横幅 + 四大专区 + 活动产品卡 + 活动规则。
   活动用色为「品牌蓝」渐变（#3296f9 → #1f7ae0），与全局品牌蓝统一，
   营造限时抢购氛围。 */

/* —— 活动主题横幅 —— */
.campaign-hero {
  position: relative;
  padding: 7rem 0 6.5rem;
  overflow: hidden;
  color: #fff;
  background:
    url("../img/new-hero.png") no-repeat center / cover,
    radial-gradient(120% 150% at 88% -20%, rgba(50, 150, 249, .55), transparent 55%),
    radial-gradient(130% 150% at 0% 130%, rgba(31, 122, 224, .45), transparent 55%),
    linear-gradient(120deg, #123a68 0%, #10325a 55%, #0c2949 100%);
}
.campaign-hero__inner { position: relative; z-index: 1; }

/* 活动标签（胶囊） */
.campaign-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #3296f9, #1f7ae0);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(50, 150, 249, .35);
}
.campaign-hero__title {
  margin: 1.25rem 0 .75rem;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.2;
}
.campaign-hero__subtitle { max-width: 640px; margin: 0; font-size: 1.05rem; opacity: .92; }

/* 数据看板：三项关键数字 */
.campaign-hero__stats { display: flex; flex-wrap: wrap; gap: 2.5rem; margin: 2.25rem 0; }
.campaign-hero__stat { display: flex; flex-direction: column; }
.campaign-hero__stat strong { font-size: 1.9rem; font-weight: 700; color: #7ec3ff; }
.campaign-hero__stat span { font-size: .88rem; opacity: .82; }
.campaign-hero__actions { display: flex; gap: .9rem; flex-wrap: wrap; }

/* 背景飘浮装饰图标（礼物 / 购物车 / 标签，纯装饰，缓慢浮动） */
.campaign-hero__float {
  position: absolute;
  color: rgba(255, 255, 255, .1);
  font-size: 2.6rem;
  pointer-events: none;
  animation: campaign-float 6s ease-in-out infinite;
}
.campaign-hero__float--1 { top: 18%; left: 8%; font-size: 3rem; }
.campaign-hero__float--2 { top: 30%; right: 12%; animation-delay: 1.2s; }
.campaign-hero__float--3 { bottom: 18%; left: 16%; animation-delay: 2.4s; }
.campaign-hero__float--4 { bottom: 30%; right: 22%; font-size: 2rem; animation-delay: .6s; }
@keyframes campaign-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-16px) rotate(8deg); }
}

/* 活动按钮：品牌蓝渐变实心 / 半透明描边 */
.campaign-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.8rem;
  border-radius: 999px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #3296f9, #1f7ae0);
  box-shadow: 0 10px 26px rgba(50, 150, 249, .38);
  transition: transform .2s, box-shadow .2s;
}
.campaign-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(50, 150, 249, .5); }
.campaign-btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .5); box-shadow: none; }
.campaign-btn--ghost:hover { background: rgba(255, 255, 255, .12); box-shadow: none; }

/* —— 活动专区（通用容器） —— */
.campaign { padding: 4.5rem 0; }
.campaign--alt { background: var(--c-bg-soft); }   /* 偶数专区换浅灰底，增强分区层次 */
.campaign__head { margin-bottom: 2.25rem; text-align: center; }
.campaign__title { margin: 0 0 .6rem; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700;margin-top: 2rem; }
.campaign__title i { color: #3296f9; margin-right: .4rem; }
.campaign__subtitle { margin: 0 auto; max-width: 620px; color: var(--c-muted); font-size: .98rem; }

/* 卡片网格：auto-fit 自适应，3~4 张卡片自动均分，窄屏自动降列 */
.campaign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* —— 活动产品卡 —— */
.campaign-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem 1.4rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.campaign-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* 卡片顶部品牌蓝渐变装饰线 */
.campaign-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3296f9, #1f7ae0);
}
.campaign-card__head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.campaign-card__flag {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.campaign-card__flag img { width: 100%; height: 100%; object-fit: cover; }
.campaign-card__name { flex: 1; margin: 0; font-size: 1.08rem; font-weight: 700; }
.campaign-card__hot {
  flex: none;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #3296f9, #1f7ae0);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
}
/* 配置清单：2 列展示 CPU / 内存 / 硬盘 / 带宽 */
.campaign-card__config {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem .75rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.campaign-card__config li {
  display: flex;
  justify-content: space-between;
  padding: .45rem .6rem;
  border-radius: 8px;
  background: var(--c-bg-soft);
  font-size: .85rem;
}
.campaign-card__config span { color: var(--c-muted); }
.campaign-card__config b { font-weight: 600; color: var(--c-text); }
/* 活动亮点标签（续费同价 / 抢购中 等） */
.campaign-card__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.campaign-card__tag {
  padding: .22rem .7rem;
  border-radius: 999px;
  background: rgba(50, 150, 249, .1);
  color: var(--c-blue);
  font-size: .78rem;
  font-weight: 500;
}
.campaign-card__tag--accent { background: rgba(50, 150, 249, .12); color: #1f7ae0; }
/* 价格：原价划线 + 活动价（礼物图标） */
.campaign-card__price { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1rem; }
.campaign-card__price-old { color: var(--c-grey-light); text-decoration: line-through; font-size: .88rem; }
.campaign-card__price-now { color: #1f7ae0; font-size: 1.4rem; font-weight: 700; }
.campaign-card__price-now b { font-size: 1.9rem; }
.campaign-card__price-now i { font-size: 1rem; margin-right: .2rem; }
/* 抢购进度条 + 进度文字 */
.campaign-card__progress {
  height: 8px;
  border-radius: 999px;
  background: #e0efff;
  overflow: hidden;
  margin-bottom: .4rem;
}
.campaign-card__progress-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3296f9, #1f7ae0);
}
.campaign-card__progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--c-muted);
  margin-bottom: 1.2rem;
}
/* 抢购按钮（购物车图标），贴底对齐 */
.campaign-card__btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1rem;
  border-radius: 9px;
  background: linear-gradient(90deg, #3296f9, #1f7ae0);
  color: #fff;
  font-weight: 600;
  transition: transform .2s, box-shadow .2s;
}
.campaign-card__btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(50, 150, 249, .4); }

/* 已抢光状态：内容降透明 + 右上角「已抢光」印章 + 按钮置灰禁用 */
.campaign-card--soldout .campaign-card__head,
.campaign-card--soldout .campaign-card__config,
.campaign-card--soldout .campaign-card__tags,
.campaign-card--soldout .campaign-card__price,
.campaign-card--soldout .campaign-card__progress,
.campaign-card--soldout .campaign-card__progress-meta { opacity: .5; }
.campaign-card--soldout .campaign-card__btn { background: #b7bcc4; box-shadow: none; pointer-events: none; }
.campaign-card__soldout {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 2;
  padding: .3rem .8rem;
  border: 2px solid #1f7ae0;
  border-radius: 8px;
  background: #fff;
  color: #1f7ae0;
  font-size: .82rem;
  font-weight: 700;
  transform: rotate(8deg);
}

/* —— 活动规则 —— */
/* 黄色背景 + 硬件线条水印（hardware.svg）+ 玻璃态卡片，与「为什么选择我们」区风格统一 */
.campaign-rules {
  position: relative;                     /* 供 ::before 水印绝对定位 */
  padding-top: 1rem;                      /* 紧接上方物理专区，收窄顶部留白 */
  background: #ffdd00;
  overflow: hidden;                       /* 裁掉水印超出的部分 */
}
/* 半透明背景：硬件线条插画 hardware.svg，纯装饰，置于内容之下 */
.campaign-rules::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../svg/ico/hardware.svg") no-repeat center / cover;
  opacity: .15;                           /* 半透明，不干扰正文阅读 */
  pointer-events: none;
  z-index: 0;
}
/* 内容层提到水印之上，保证标题与卡片可读 */
.campaign-rules .container { position: relative; z-index: 1; }
/* 玻璃态规则卡片：半透明白 + backdrop-filter 背景模糊，让黄色与水印从卡片后透出 */
.campaign-rules__list {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1.75rem;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.campaign-rules__list li { display: flex; align-items: flex-start; gap: .6rem; color: var(--c-text); font-size: .95rem; }
.campaign-rules__list i { color: #3296f9; margin-top: .2rem; flex: none; }

/* 响应式：横幅与卡片在窄屏收缩 */
@media (max-width: 575.98px) {
  .campaign-hero { padding: 5rem 0 4.5rem; }
  .campaign-hero__stats { gap: 1.5rem; }
  .campaign { padding: 3rem 0; }
}

/* ===================== 22. 新闻公告页（news / newscate / newscontent / newssearch） ===================== */
/* 新闻中心四页共用「品牌蓝」视觉：浅蓝渐变横幅 + 左主栏右侧栏两栏布局。
   分类卡 / 文章列表 / 详情正文 / 侧边栏部件，统一沿用全局圆角与阴影变量。 */

/* —— 页面横幅（面包屑 + 标题 + 搜索） —— */
.news-hero {
  position: relative;
  padding: 5.5rem 0;
  overflow: hidden;
  background:
    radial-gradient(90% 130% at 92% -20%, rgba(50, 150, 249, .20), transparent 55%),
    radial-gradient(70% 110% at 0% 120%, rgba(50, 150, 249, .10), transparent 55%),
    linear-gradient(135deg, #eaf3ff 0%, #f6faff 50%, #eef2fc 100%);
}
.news-hero__inner { position: relative; z-index: 1; }
/* 面包屑：首页 / 新闻公告 / 当前页 */
.news-hero__crumb { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; font-size: .9rem; color: var(--c-muted); }
.news-hero__crumb a { color: var(--c-muted); text-decoration: none; }
.news-hero__crumb a:hover { color: var(--c-blue); }
.news-hero__crumb i { font-size: .72rem; color: var(--c-grey-light); }
.news-hero__title { margin: 0 0 .8rem; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: 1px; color: var(--c-navy); }
.news-hero__subtitle { margin: 0; max-width: 640px; color: var(--c-muted); font-size: 1.05rem; }

/* —— 搜索框 —— */
.news-search { display: flex; gap: .5rem; max-width: 560px; margin-top: 1.5rem; }
.news-search__input {
  flex: 1; min-width: 0; padding: .72rem 1.1rem;
  border: 1px solid var(--c-border); border-radius: 999px;
  background: #fff; font-size: .98rem; color: var(--c-text);
  transition: border-color .2s, box-shadow .2s;
}
.news-search__input:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(50, 150, 249, .15); }
.news-search__btn {
  flex: none; display: inline-flex; align-items: center; gap: .4rem;
  padding: .72rem 1.4rem; border: none; border-radius: 999px;
  background: var(--c-blue); color: #fff; font-weight: 600; cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
.news-search__btn:hover { background: var(--c-blue-dark); box-shadow: 0 8px 20px rgba(50, 150, 249, .35); }
/* 侧栏内搜索框：单行紧凑 */
.news-search--side { margin-top: 0; }
.news-search--side .news-search__btn { padding: .72rem 1rem; }

/* —— 内容主体（两栏布局） —— */
.news-body { padding: 3rem 0 4rem; }
.news-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; }
.news-main { min-width: 0; }

/* —— 分区标题 —— */
.news-section { margin-bottom: 2.75rem; }
.news-section__head { text-align: center; margin-bottom: 1.75rem; }
.news-section__title { margin: 0 0 .5rem; font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 700; color: var(--c-navy); }
.news-section__subtitle { margin: 0; color: var(--c-muted); font-size: .98rem; }

/* —— 分类卡片网格 —— */
.news-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.news-cat-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .7rem;
  padding: 1.4rem 1.25rem; background: #fff;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.news-cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.news-cat-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #eaf3ff, #d7e9ff); color: var(--c-blue); font-size: 1.2rem;
}
.news-cat-card__name { font-size: 1.05rem; font-weight: 700; color: var(--c-navy); }
.news-cat-card__count { font-size: .85rem; color: var(--c-muted); }
.news-cat-card:hover .news-cat-card__name { color: var(--c-blue); }

/* —— 文章列表 —— */
.news-list { display: flex; flex-direction: column; gap: 1rem; }
.news-list__item {
  position: relative; display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem; background: #fff;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  text-decoration: none; color: inherit; overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.news-list__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c-blue); opacity: 0; transition: opacity .2s; }
.news-list__item:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.news-list__item:hover::before { opacity: 1; }
.news-list__body { flex: 1; min-width: 0; }
.news-list__title { margin: 0 0 .35rem; font-size: 1.1rem; font-weight: 700; color: var(--c-text); }
.news-list__item:hover .news-list__title { color: var(--c-blue); }
.news-list__desc {
  margin: 0 0 .5rem; color: var(--c-muted); font-size: .93rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-list__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; font-size: .85rem; color: var(--c-grey-light); }
.news-list__meta-item { display: inline-flex; align-items: center; }
.news-list__meta i { margin-right: .3rem; }
.news-list__arrow { flex: none; color: var(--c-grey-light); font-size: 1.1rem; transition: transform .2s, color .2s; }
.news-list__item:hover .news-list__arrow { color: var(--c-blue); transform: translateX(3px); }

/* —— 分页 —— */
.news-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.news-pager__btn, .news-pager__num {
  display: inline-flex; align-items: center; gap: .35rem; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 .9rem;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: #fff; color: var(--c-text); font-size: .92rem; text-decoration: none;
  font-family: inherit; cursor: pointer;
  transition: all .2s;
}
.news-pager__btn:hover, .news-pager__num:hover { border-color: var(--c-blue); color: var(--c-blue); }
.news-pager__btn:disabled { opacity: .4; cursor: not-allowed; }
.news-pager__num.is-active { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }

/* —— 详情正文 —— */
.news-article { padding: 1.75rem 2rem; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); }
.news-article__title { margin: 0 0 1.25rem; font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 800; line-height: 1.4; color: var(--c-navy); }
.news-article__meta {
  display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--c-border); color: var(--c-muted); font-size: .92rem;
}
.news-article__meta i { margin-right: .35rem; color: var(--c-blue); }
.news-article__body { font-size: 1rem; line-height: 1.9; color: #333; }
.news-article__body p { margin: 0 0 1rem; }
.news-article__body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.news-article__body a { color: var(--c-blue); }
.news-article__back { margin-top: 1.75rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--c-blue); text-decoration: none; font-weight: 600; }
.news-article__back:hover { color: var(--c-blue-dark); }

/* —— 侧边栏 —— */
.news-side { display: flex; flex-direction: column; gap: 1.25rem; }
.news-widget { padding: 1.4rem 1.5rem; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); }
.news-widget__title { position: relative; margin: 0 0 1.1rem; padding-left: .75rem; font-size: 1.05rem; font-weight: 700; color: var(--c-navy); }
.news-widget__title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 1em; border-radius: 2px; background: var(--c-blue); }
.news-widget__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.news-widget__link { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .6rem; border-radius: var(--radius-sm); color: var(--c-text); text-decoration: none; transition: background .2s, color .2s; }
.news-widget__link:hover { background: var(--c-bg-soft); color: var(--c-blue); }
.news-widget__count {
  flex: none; min-width: 24px; height: 24px; padding: 0 .45rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--c-bg-soft); color: var(--c-muted); font-size: .8rem;
}
.news-widget__link:hover .news-widget__count { background: var(--c-blue); color: #fff; }

/* —— 空状态 & 结果提示 —— */
.news-empty { padding: 2.5rem 1rem; text-align: center; color: var(--c-muted); background: #fff; border: 1px dashed var(--c-border); border-radius: var(--radius); }
.news-result-tip { margin: 0 0 1rem; color: var(--c-muted); font-size: .95rem; }

/* —— 响应式：窄屏单栏 —— */
@media (max-width: 991.98px) {
  .news-layout { grid-template-columns: 1fr; }
  /* 移动端：右侧栏（搜索 + 分类）提到文章列表上方，避免切换分类需滚动到底部 */
  .news-main { order: 2; }
  .news-side { order: 1; }
  .news-hero { padding: 2.75rem 0; }
  .news-article { padding: 1.4rem 1.25rem; }
}

/* ===================== 23. 关于我们（about） ===================== */
/* 关于我们页：横幅（topbanner01.jpg） → 品牌故事 → 机房展示（玻璃态） → 资质展示（玻璃态，黄底） → 企业文化。
   机房与资质图片点击可放大（复用全局灯箱 data-lightbox-src）。 */

/* —— 通用分区头：标题 + 副标题，各分区复用 —— */
.about-sec-head { margin: 0 0 2.5rem; text-align: center; }
.about-sec-title { margin: 0 0 .55rem; font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 700; color: var(--c-navy); }
.about-sec-subtitle { margin: 0; color: var(--c-muted); }

/* —— 页面横幅：topbanner01.jpg 背景 + 深色遮罩保证文字可读 —— */
.about-hero {
  position: relative;
  padding: 5.5rem 0;
  color: #fff;
  background: url("../img/topbanner01.jpg") center / cover no-repeat;
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 25, 38, .55) 0%, rgba(13, 25, 38, .8) 100%);
}
.about-hero__inner { position: relative; z-index: 1; }
.about-hero__crumb { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; font-size: .9rem; color: rgba(255, 255, 255, .75); }
.about-hero__crumb a { color: rgba(255, 255, 255, .75); transition: color .2s; }
.about-hero__crumb a:hover { color: #fff; }
.about-hero__crumb i { font-size: .72rem; color: rgba(255, 255, 255, .55); }
.about-hero__title { margin: 0 0 .8rem; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: 1px; }
.about-hero__subtitle { margin: 0; max-width: 680px; font-size: 1.05rem; color: rgba(255, 255, 255, .85); }

/* —— 专区一：公司品牌故事 —— */
.about-story { padding: 4.5rem 0; background: #fff; }
.about-story__body { max-width: 780px; margin: 0 auto 2.75rem; font-size: 1.02rem; line-height: 1.95; color: var(--c-muted); }
.about-story__body p { margin: 0 0 1.15rem; }
.about-story__body p:last-child { margin-bottom: 0; }
.about-story__pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.about-pillar { display: flex; flex-direction: column; align-items: center; gap: .85rem; padding: 1.75rem 1.25rem; text-align: center; background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius); transition: transform .25s, box-shadow .25s; }
.about-pillar:hover { transform: translateY(-5px); box-shadow: var(--shadow-sm); }
.about-pillar__icon { font-size: 2.25rem; line-height: 1; color: var(--c-blue); }
.about-pillar__label { font-size: .95rem; font-weight: 600; color: var(--c-text); }

/* —— 专区二：机房展示（玻璃态模糊框，浅蓝渐变底 + maxsecurity.svg 水印点缀） —— */
.about-dc {
  position: relative;
  padding: 4.5rem 0;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(50, 150, 249, .18), transparent 55%),
    radial-gradient(70% 110% at 0% 100%, rgba(50, 150, 249, .10), transparent 55%),
    linear-gradient(135deg, #e8f1ff 0%, #f4f8ff 50%, #eef2fc 100%);
}
.about-dc::before { /* 背景水印：maxsecurity.svg 平铺，低透明度不抢内容 */
  content: "";
  position: absolute;
  inset: 0;
  background: url("../svg/ico/maxsecurity.svg") repeat;
  opacity: .09;
  pointer-events: none;
}
.about-dc .container { position: relative; z-index: 1; }
.about-dc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.about-dc-card { display: flex; flex-direction: column; padding: .85rem; border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.about-dc-card:hover { transform: translateY(-6px); box-shadow: 0 24px 64px rgba(31, 100, 200, .22); }
.about-dc-card__media { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: #fff; }
.about-dc-card__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; transition: transform .35s; }
.about-dc-card:hover .about-dc-card__img { transform: scale(1.05); }
.about-dc-card__caption { display: flex; align-items: center; gap: .45rem; padding: .75rem .25rem .15rem; font-size: .9rem; font-weight: 600; color: var(--c-navy); }
.about-dc-card__caption i { color: var(--c-blue); }

/* —— 资质展示（玻璃态模糊框，黄色底 + redundant.svg 水印点缀） —— */
.about-cred { position: relative; padding: 4.5rem 0; background: #fdd605; }
.about-cred::before { /* 背景水印：redundant.svg 平铺，低透明度不抢内容 */
  content: "";
  position: absolute;
  inset: 0;
  background: url("../svg/ico/redundant.svg") repeat;
  opacity: .09;
  pointer-events: none;
}
.about-cred .container { position: relative; z-index: 1; }
.about-cred .about-sec-title { color: var(--c-navy); }
.about-cred .about-sec-subtitle { color: rgba(21, 33, 42, .72); }
.about-cred__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.about-cred-card { display: flex; flex-direction: column; padding: 1rem; border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.about-cred-card:hover { transform: translateY(-6px); box-shadow: 0 24px 64px rgba(0, 0, 0, .28); }
.about-cred-card__media { display: flex; align-items: center; justify-content: center; height: 250px; overflow: hidden; border-radius: var(--radius-sm); background: #fff; }
.about-cred-card__img { width: 100%; height: 100%; object-fit: contain; }
.about-cred-card__body { display: flex; flex-direction: column; gap: .3rem; padding: .95rem .2rem 0; }
.about-cred-card__title { font-weight: 700; color: var(--c-navy); }
.about-cred-card__hint { display: inline-flex; align-items: center; gap: .4rem; margin-top: .25rem; font-size: .85rem; color: var(--c-blue); }

/* —— 企业文化（保留原有卡片） —— */
.about-values { padding: 4.5rem 0; background: var(--c-bg-soft); }
.about-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.about-value { padding: 2rem 1.5rem; text-align: center; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); transition: transform .25s, box-shadow .25s; }
.about-value:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.about-value__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 1rem; border-radius: 50%; font-size: 1.5rem; color: var(--c-blue); background: linear-gradient(135deg, #eaf3ff, #d7e9ff); }
.about-value__title { margin: 0 0 .6rem; font-size: 1.15rem; font-weight: 700; color: var(--c-text); }
.about-value__desc { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--c-muted); }

/* —— 响应式：窄屏堆叠 —— */
@media (max-width: 991.98px) {
  .about-dc__grid { grid-template-columns: 1fr; }
  .about-story__pillars { grid-template-columns: repeat(2, 1fr); }
  .about-cred__grid { grid-template-columns: 1fr; }
  .about-values__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .about-story__pillars { grid-template-columns: 1fr; }
  .about-values__grid { grid-template-columns: 1fr; }
}

/* ===================== 24. 帮助中心（help / helpcategory / helparticle / helpsearch） ===================== */
/* 帮助中心首页：横幅 + 搜索 → 帮助分类。子页面（分类列表 / 详情 / 搜索）复用 22 节通用内容页样式
   （news-body / news-list / news-widget / news-article / news-pager 等），仅横幅与空状态走 help 前缀类。
   变量：helpCate（分类：id / title）、helpListCate（分类文章列表）、helpContent（详情）、helpSearch（搜索）。
   链接约定：分类 /helpcategory/{id}.html    文章 /helparticle/{id}.html    搜索 /helpsearch.html */

/* —— 页面横幅：浅蓝渐变底 + 搜索框（视觉与新闻页统一） —— */
.help-hero {
  position: relative;
  padding: 5.5rem 0;
  overflow: hidden;
  background:
    radial-gradient(90% 130% at 92% -20%, rgba(50, 150, 249, .20), transparent 55%),
    radial-gradient(70% 110% at 0% 120%, rgba(50, 150, 249, .10), transparent 55%),
    linear-gradient(135deg, #eaf3ff 0%, #f6faff 50%, #eef2fc 100%);
}
.help-hero__inner { position: relative; z-index: 1; }
.help-hero__crumb { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; font-size: .9rem; color: var(--c-muted); }
.help-hero__crumb a { color: var(--c-muted); text-decoration: none; }
.help-hero__crumb a:hover { color: var(--c-blue); }
.help-hero__crumb i { font-size: .72rem; color: var(--c-grey-light); }
.help-hero__title { margin: 0 0 .8rem; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: 1px; color: var(--c-navy); }
.help-hero__subtitle { margin: 0; max-width: 640px; color: var(--c-muted); font-size: 1.05rem; }

/* —— 搜索框 —— */
.help-search { display: flex; gap: .5rem; max-width: 560px; margin-top: 1.5rem; }
.help-search__input {
  flex: 1; min-width: 0; padding: .72rem 1.1rem;
  border: 1px solid var(--c-border); border-radius: 999px;
  background: #fff; font-size: .98rem; color: var(--c-text);
  transition: border-color .2s, box-shadow .2s;
}
.help-search__input:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(50, 150, 249, .15); }
.help-search__btn {
  flex: none; display: inline-flex; align-items: center; gap: .4rem;
  padding: .72rem 1.4rem; border: none; border-radius: 999px;
  background: var(--c-blue); color: #fff; font-weight: 600; cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
.help-search__btn:hover { background: var(--c-blue-dark); box-shadow: 0 8px 20px rgba(50, 150, 249, .35); }

/* —— 帮助分类 —— */
.help-cate { padding: 3rem 0 4.5rem; }
.help-cate__head { text-align: center; margin-bottom: 1.75rem; }
.help-cate__title { margin: 0 0 .5rem; font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 700; color: var(--c-navy); }
.help-cate__subtitle { margin: 0; color: var(--c-muted); font-size: .98rem; }
.help-cate__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.help-cate-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .7rem;
  padding: 1.4rem 1.25rem; background: #fff;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.help-cate-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.help-cate-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #eaf3ff, #d7e9ff); color: var(--c-blue); font-size: 1.2rem;
}
.help-cate-card__name { font-size: 1.05rem; font-weight: 700; color: var(--c-navy); }
.help-cate-card:hover .help-cate-card__name { color: var(--c-blue); }
.help-empty { padding: 2.5rem 1rem; text-align: center; color: var(--c-muted); background: #fff; border: 1px dashed var(--c-border); border-radius: var(--radius); }

/* ===================== 25. 人才招聘（job） ===================== */
/* 人才招聘页：横幅 → 福利理念 → 热招岗位（4 个岗位卡） → 投递方式。
   岗位卡含：岗位名 + 标签、招聘信息（人数 / 学历 / 经验 / 地点）、工作职责、薪酬待遇、投递按钮。
   说明：纯静态页面，无动态数据；沿用品牌蓝渐变横幅与全局圆角 / 阴影变量。 */

/* —— 页面横幅：浅蓝渐变底 + 面包屑 + 标题 —— */
.job-hero {
  position: relative;
  padding: 5.5rem 0;
  overflow: hidden;
  background:
    radial-gradient(90% 130% at 92% -20%, rgba(50, 150, 249, .20), transparent 55%),
    radial-gradient(70% 110% at 0% 120%, rgba(50, 150, 249, .10), transparent 55%),
    linear-gradient(135deg, #eaf3ff 0%, #f6faff 50%, #eef2fc 100%);
}
.job-hero__inner { position: relative; z-index: 1; }
.job-hero__crumb { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; font-size: .9rem; color: var(--c-muted); }
.job-hero__crumb a { color: var(--c-muted); text-decoration: none; }
.job-hero__crumb a:hover { color: var(--c-blue); }
.job-hero__crumb i { font-size: .72rem; color: var(--c-grey-light); }
.job-hero__title { margin: 0 0 .8rem; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: 1px; color: var(--c-navy); }
.job-hero__subtitle { margin: 0; max-width: 640px; color: var(--c-muted); font-size: 1.05rem; }

/* —— 分区头：标题 + 副标题，各分区复用 —— */
.job-sec-head { margin: 0 0 2.5rem; text-align: center; }
.job-sec-title { margin: 0 0 .55rem; font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 700; color: var(--c-navy); }
.job-sec-subtitle { margin: 0; color: var(--c-muted); font-size: .98rem; }

/* —— 福利理念 —— */
.job-perks { padding: 4.5rem 0; background: #fff; }
.job-perks__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.job-perk { padding: 2rem 1.5rem; text-align: center; background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius); transition: transform .25s, box-shadow .25s; }
.job-perk:hover { transform: translateY(-6px); box-shadow: var(--shadow); background: #fff; }
.job-perk__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 1rem; border-radius: 50%; font-size: 1.5rem; color: var(--c-blue); background: linear-gradient(135deg, #eaf3ff, #d7e9ff); }
.job-perk__title { margin: 0 0 .6rem; font-size: 1.15rem; font-weight: 700; color: var(--c-text); }
.job-perk__desc { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--c-muted); }

/* —— 热招岗位 —— */
.job-list { padding: 4.5rem 0; background: var(--c-bg-soft); }
.job-list__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.job-card { display: flex; flex-direction: column; padding: 1.75rem 1.75rem 1.5rem; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); transition: transform .25s, box-shadow .25s; }
.job-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
/* 岗位卡头部：图标 + 岗位名 + 招聘中标签 */
.job-card__head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; }
.job-card__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; font-size: 1.3rem; color: var(--c-blue); background: linear-gradient(135deg, #eaf3ff, #d7e9ff); }
.job-card__name { flex: 1; margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--c-navy); }
.job-card__badge { flex: none; }
/* 招聘信息标签行 */
.job-card__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.job-card__meta-item { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .7rem; border-radius: 999px; background: var(--c-bg-soft); color: var(--c-muted); font-size: .84rem; }
.job-card__meta-item i { color: var(--c-blue); }
/* 职责 / 待遇 两个板块 */
.job-card__section { margin-bottom: 1.25rem; }
.job-card__label { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; font-size: .98rem; font-weight: 700; color: var(--c-text); }
.job-card__label i { color: var(--c-blue); }
.job-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.job-card__list li { position: relative; padding-left: 1.35rem; font-size: .92rem; line-height: 1.6; color: var(--c-muted); }
.job-card__list li::before { content: "\f00c"; position: absolute; left: 0; top: .05rem; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .8rem; color: var(--c-blue); }
/* 薪酬待遇：浅蓝底高亮框 */
.job-card__pay { padding: .95rem 1.1rem; border-radius: var(--radius-sm); background: linear-gradient(135deg, #eaf3ff, #f3f8ff); border: 1px solid #ddeafc; }
.job-card__pay .job-card__list li::before { content: "\f0d6"; color: #f0a500; }
/* 投递按钮 */
.job-card__cta { margin-top: auto; padding-top: .35rem; }
.job-card__btn { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.4rem; border-radius: 999px; background: var(--c-blue); color: #fff; font-size: .92rem; font-weight: 600; text-decoration: none; transition: background .2s, box-shadow .2s; }
.job-card__btn:hover { background: var(--c-blue-dark); color: #fff; box-shadow: 0 8px 20px rgba(50, 150, 249, .35); }

/* —— 投递方式 —— */
.job-apply { position: relative; padding: 4.5rem 0; overflow: hidden; background: linear-gradient(135deg, #1f7ae0 0%, #3296f9 60%, #4aa8ff 100%); }
.job-apply__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; text-align: center; color: #fff; }
.job-apply__title { margin: 0 0 .8rem; font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 800; }
.job-apply__desc { margin: 0 0 1.75rem; font-size: 1rem; line-height: 1.8; color: rgba(255, 255, 255, .9); }
.job-apply__mail { display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.9rem; border-radius: 999px; background: #fff; color: var(--c-blue); font-size: 1.05rem; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.job-apply__mail:hover { transform: translateY(-3px); color: var(--c-blue-dark); box-shadow: 0 14px 34px rgba(0, 0, 0, .22); }

/* —— 响应式：窄屏堆叠 —— */
@media (max-width: 991.98px) {
  .job-list__grid { grid-template-columns: 1fr; }
  .job-perks__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .job-perks__grid { grid-template-columns: 1fr; }
}

/* ===================== 26. 发票开具（invoice） ===================== */
/* 发票开具页：横幅 → 服务承诺 → 开票流程 → 开票信息 → 添加企业微信客服。
   说明：纯静态页面，向用户说明平台为正规企业、可开具发票，并引导添加企业微信客服办理。
   变量：setting.company_name（公司名称）、setting.web_view（资源根路径，用于客服二维码）。 */

/* —— 页面横幅：浅蓝渐变底 + 面包屑 + 标题 —— */
.invoice-hero {
  position: relative;
  padding: 5.5rem 0;
  overflow: hidden;
  background:
    radial-gradient(90% 130% at 92% -20%, rgba(50, 150, 249, .20), transparent 55%),
    radial-gradient(70% 110% at 0% 120%, rgba(50, 150, 249, .10), transparent 55%),
    linear-gradient(135deg, #eaf3ff 0%, #f6faff 50%, #eef2fc 100%);
}
.invoice-hero__inner { position: relative; z-index: 1; }
.invoice-hero__crumb { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; font-size: .9rem; color: var(--c-muted); }
.invoice-hero__crumb a { color: var(--c-muted); text-decoration: none; }
.invoice-hero__crumb a:hover { color: var(--c-blue); }
.invoice-hero__crumb i { font-size: .72rem; color: var(--c-grey-light); }
.invoice-hero__title { margin: 0 0 .8rem; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: 1px; color: var(--c-navy); }
.invoice-hero__subtitle { margin: 0; max-width: 640px; color: var(--c-muted); font-size: 1.05rem; }

/* —— 分区头 —— */
.invoice-sec-head { margin: 0 0 2.5rem; text-align: center; }
.invoice-sec-title { margin: 0 0 .55rem; font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 700; color: var(--c-navy); }
.invoice-sec-subtitle { margin: 0; color: var(--c-muted); font-size: .98rem; }

/* —— 服务承诺 —— */
.invoice-intro { padding: 4.5rem 0; background: #fff; }
.invoice-intro__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.invoice-feature { padding: 2rem 1.5rem; text-align: center; background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius); transition: transform .25s, box-shadow .25s; }
.invoice-feature:hover { transform: translateY(-6px); box-shadow: var(--shadow); background: #fff; }
.invoice-feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 1rem; border-radius: 50%; font-size: 1.5rem; color: var(--c-blue); background: linear-gradient(135deg, #eaf3ff, #d7e9ff); }
.invoice-feature__title { margin: 0 0 .6rem; font-size: 1.15rem; font-weight: 700; color: var(--c-text); }
.invoice-feature__desc { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--c-muted); }

/* —— 开票流程 —— */
.invoice-flow { padding: 4.5rem 0; background: var(--c-bg-soft); }
.invoice-flow__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.invoice-step { position: relative; padding: 2rem 1.25rem 1.5rem; text-align: center; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); }
.invoice-step__num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: .9rem; border-radius: 50%; font-size: 1.1rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #3296f9, #1f7ae0); box-shadow: 0 8px 20px rgba(50, 150, 249, .3); }
.invoice-step__title { margin: 0 0 .55rem; font-size: 1.1rem; font-weight: 700; color: var(--c-text); }
.invoice-step__desc { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--c-muted); }

/* —— 开票信息 —— */
.invoice-info { padding: 4.5rem 0; background: #fff; }
.invoice-info__card { max-width: 720px; margin: 0 auto; padding: 2rem 2.25rem; background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius); }
.invoice-info__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.invoice-info__list li { position: relative; padding-left: 1.6rem; font-size: .98rem; line-height: 1.6; color: var(--c-text); }
.invoice-info__list li::before { content: "\f058"; position: absolute; left: 0; top: .05rem; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1rem; color: var(--c-blue); }
.invoice-info__note { display: flex; align-items: flex-start; gap: .6rem; margin: 0; padding: .85rem 1.1rem; border-radius: var(--radius-sm); background: #fff7e6; border: 1px solid #ffe1a8; color: #8a6d1a; font-size: .9rem; line-height: 1.6; }
.invoice-info__note i { color: #f0a500; margin-top: .15rem; }

/* —— 添加企业微信客服 —— */
.invoice-cta { padding: 4.5rem 0; background: linear-gradient(135deg, #1f7ae0 0%, #3296f9 60%, #4aa8ff 100%); }
.invoice-cta__inner { display: flex; align-items: center; gap: 3rem; max-width: 880px; margin: 0 auto; }
.invoice-cta__body { flex: 1; color: #fff; }
.invoice-cta__title { margin: 0 0 .8rem; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; }
.invoice-cta__desc { margin: 0 0 1.75rem; font-size: 1rem; line-height: 1.8; color: rgba(255, 255, 255, .9); }
.invoice-cta__btn { display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.8rem; border-radius: 999px; background: #fff; color: var(--c-blue); font-size: 1rem; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.invoice-cta__btn:hover { transform: translateY(-3px); color: var(--c-blue-dark); box-shadow: 0 14px 34px rgba(0, 0, 0, .22); }
.invoice-cta__qr { flex: none; display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 1.25rem; background: #fff; border-radius: var(--radius); box-shadow: 0 18px 44px rgba(0, 0, 0, .22); }
.invoice-cta__qr img { width: 168px; height: 168px; object-fit: contain; }
.invoice-cta__qr span { font-size: .9rem; font-weight: 600; color: var(--c-navy); }

/* —— 响应式：窄屏堆叠 —— */
@media (max-width: 991.98px) {
  .invoice-intro__grid { grid-template-columns: 1fr; }
  .invoice-flow__grid { grid-template-columns: repeat(2, 1fr); }
  .invoice-cta__inner { flex-direction: column; text-align: center; gap: 2rem; }
}
@media (max-width: 575.98px) {
  .invoice-flow__grid { grid-template-columns: 1fr; }
  .invoice-info__card { padding: 1.5rem 1.25rem; }
}

/* ===================== 27. 推广返佣（affiliates） ===================== */
/* 推广返佣（CPS）页：横幅 → 推广流程 → 佣金权益 → 返佣排行榜 → 推广技巧 → 加入 CTA。
   说明：纯静态营销页；排行榜与技巧为示例内容，佣金比例为示意数值，可按实际政策调整。
   变量：setting.web_view（资源根路径）。 */

/* —— 页面横幅：浅蓝渐变（与全站内容页统一） —— */
.aff-hero {
  position: relative;
  padding: 4rem 0;
  overflow: hidden;
  background:
    radial-gradient(90% 130% at 92% -20%, rgba(50, 150, 249, .20), transparent 55%),
    radial-gradient(70% 110% at 0% 120%, rgba(50, 150, 249, .10), transparent 55%),
    linear-gradient(135deg, #eaf3ff 0%, #f6faff 50%, #eef2fc 100%);
}
.aff-hero__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 3rem; }
.aff-hero__content { flex: 1; min-width: 0; }
.aff-hero__crumb { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; font-size: .9rem; color: var(--c-muted); }
.aff-hero__crumb a { color: var(--c-muted); text-decoration: none; }
.aff-hero__crumb a:hover { color: var(--c-blue); }
.aff-hero__crumb i { font-size: .72rem; color: var(--c-grey-light); }
.aff-hero__title { margin: 0 0 1rem; font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 800; line-height: 1.25; letter-spacing: .5px; color: var(--c-navy); }
.aff-hero__title em { font-style: normal; color: var(--c-blue); }
.aff-hero__subtitle { margin: 0 0 0.75rem; max-width: 540px; font-size: 1.05rem; line-height: 1.8; color: var(--c-muted); }
.aff-hero__stats { display: flex; flex-wrap: wrap; gap: 2rem; margin-bottom: 1rem; }
.aff-hero__stat { display: flex; flex-direction: column; gap: .2rem; }
.aff-hero__stat b { font-size: 1.5rem; font-weight: 800; color: var(--c-blue); }
.aff-hero__stat span { font-size: .88rem; color: var(--c-muted); }
.aff-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.aff-hero__btn { display: inline-flex; align-items: center; gap: .5rem; padding: .78rem 1.7rem; border-radius: 999px; background: var(--c-blue); color: #fff; font-size: .98rem; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
.aff-hero__btn:hover { transform: translateY(-3px); background: var(--c-blue-dark); color: #fff; box-shadow: 0 14px 34px rgba(50, 150, 249, .35); }
.aff-hero__btn--ghost { background: #fff; color: var(--c-blue); border: 1px solid var(--c-border); }
.aff-hero__btn--ghost:hover { background: #fff; color: var(--c-blue-dark); border-color: var(--c-blue); box-shadow: var(--shadow-sm); }
/* 横幅右侧：最高返佣比例卡（白底卡片） */
.aff-hero__aside { flex: none; width: 320px; }
.aff-rate { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1rem 2rem; text-align: center; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); }
.aff-rate__label { font-size: .95rem; font-weight: 600; color: var(--c-navy); }
.aff-rate__num { font-size: 4rem; font-weight: 800; line-height: 1; color: var(--c-blue); }
.aff-rate__hint { font-size: .88rem; color: var(--c-muted); }
.aff-rate__list { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; width: 100%; border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: .5rem; }
.aff-rate__list li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--c-text); }
.aff-rate__list li i { color: var(--c-blue); }

/* —— 分区头 —— */
.aff-sec-head { margin: 0 0 2.5rem; text-align: center; }
.aff-sec-title { margin: 0 0 .55rem; font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 700; color: var(--c-navy); }
.aff-sec-subtitle { margin: 0; color: var(--c-muted); font-size: .98rem; }

/* —— 推广流程 —— */
.aff-flow { padding: 4.5rem 0; background: #fff; }
.aff-flow__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.aff-step { position: relative; padding: 2rem 1.25rem 1.5rem; text-align: center; background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius); transition: transform .25s, box-shadow .25s; }
.aff-step:hover { transform: translateY(-6px); box-shadow: var(--shadow); background: #fff; }
.aff-step__num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: .9rem; border-radius: 50%; font-size: 1.1rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #3296f9, #1f7ae0); box-shadow: 0 8px 20px rgba(50, 150, 249, .3); }
.aff-step__title { margin: 0 0 .55rem; font-size: 1.1rem; font-weight: 700; color: var(--c-text); }
.aff-step__desc { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--c-muted); }

/* —— 推广案例（玻璃态模糊框） —— */
.aff-case {
  position: relative;
  padding: 4.5rem 0;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(50, 150, 249, .16), transparent 55%),
    radial-gradient(70% 110% at 0% 100%, rgba(50, 150, 249, .10), transparent 55%),
    linear-gradient(135deg, #e8f1ff 0%, #f4f8ff 50%, #eef2fc 100%);
}
.aff-case__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.aff-case-card { display: flex; flex-direction: column; padding: .85rem; border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.aff-case-card:hover { transform: translateY(-6px); box-shadow: 0 24px 64px rgba(31, 100, 200, .22); }
.aff-case-card__media { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: #fff; }
.aff-case-card__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; transition: transform .35s; }
.aff-case-card:hover .aff-case-card__img { transform: scale(1.05); }
.aff-case-card__body { display: flex; flex-direction: column; gap: .3rem; padding: .85rem .3rem .15rem; }
.aff-case-card__title { display: flex; align-items: center; gap: .45rem; font-size: .98rem; font-weight: 700; color: var(--c-navy); }
.aff-case-card__title i { color: var(--c-blue); }
.aff-case-card__desc { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--c-muted); }

/* —— 返佣排行榜（左榜单 + 右达人心声） —— */
.aff-rank { padding: 4.5rem 0; background: #fff; }
.aff-rank__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: start; }
.aff-rank__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.aff-rank-row { display: flex; align-items: center; gap: 1rem; padding: .95rem 1.35rem; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.aff-rank-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: transparent; }
/* 前三名：金 / 银 / 铜 主题背景 */
.aff-rank-row--1 { background: linear-gradient(90deg, #fff8e1, #fff 60%); border-color: #f0d060; }
.aff-rank-row--2 { background: linear-gradient(90deg, #f3f6f9, #fff 60%); border-color: #d8dee6; }
.aff-rank-row--3 { background: linear-gradient(90deg, #fbf1e8, #fff 60%); border-color: #eccaa4; }
.aff-rank-row__no { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; font-size: 1rem; color: var(--c-muted); background: var(--c-bg-soft); }
.aff-rank-row--1 .aff-rank-row__no { color: #f5b301; background: #fff3cd; }
.aff-rank-row--2 .aff-rank-row__no { color: #8a98a8; background: #eef1f5; }
.aff-rank-row--3 .aff-rank-row__no { color: #c77b3f; background: #f7e4d2; }
.aff-rank-row__avatar { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; font-size: 1rem; color: #fff; background: linear-gradient(135deg, #3296f9, #1f7ae0); }
.aff-rank-row__name { flex: 1; min-width: 0; font-weight: 600; color: var(--c-text); }
.aff-rank-row__amount { flex: none; font-weight: 800; font-size: 1.05rem; color: var(--c-blue); }
.aff-rank__note { margin: 1.5rem 0 0; text-align: center; color: var(--c-grey-light); font-size: .85rem; }

/* 右栏：推广达人心声（感言卡） */
.aff-rank__quotes { display: flex; flex-direction: column; gap: .8rem; position: sticky; top: 5rem; }
.aff-rank__quotes-title { margin: 0 0 .1rem; display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 700; color: var(--c-navy); }
.aff-rank__quotes-title i { color: var(--c-blue); }
.aff-quote { margin: 0; padding: 1.1rem 1.25rem; background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius); transition: transform .2s, box-shadow .2s; }
.aff-quote:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.aff-quote__text { margin: 0 0 .85rem; font-size: .92rem; line-height: 1.7; color: var(--c-text); }
.aff-quote__meta { display: flex; align-items: center; gap: .7rem; }
.aff-quote__avatar { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; color: #fff; background: linear-gradient(135deg, #3296f9, #1f7ae0); }
.aff-quote__info { display: flex; flex-direction: column; gap: .15rem; }
.aff-quote__info b { font-size: .95rem; font-weight: 700; color: var(--c-text); }
.aff-quote__info i { font-style: normal; font-size: .8rem; color: var(--c-blue); }

/* —— 推广技巧 —— */
.aff-tips { padding: 4.5rem 0; background: var(--c-bg-soft); }
.aff-tips__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.aff-tip { padding: 1.75rem 1.5rem; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); transition: transform .25s, box-shadow .25s; }
.aff-tip:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.aff-tip__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 1rem; border-radius: 12px; font-size: 1.25rem; color: var(--c-blue); background: linear-gradient(135deg, #eaf3ff, #d7e9ff); }
.aff-tip__title { margin: 0 0 .55rem; font-size: 1.08rem; font-weight: 700; color: var(--c-text); }
.aff-tip__desc { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--c-muted); }

/* —— 加入 CTA（黄色底，与资质展示同色系） —— */
.aff-cta { padding: 4.5rem 0; background: #fdd605; }
.aff-cta__inner { max-width: 640px; margin: 0 auto; text-align: center; color: var(--c-navy); }
.aff-cta__title { margin: 0 0 .8rem; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--c-navy); }
.aff-cta__desc { margin: 0 0 1.75rem; font-size: 1rem; line-height: 1.8; color: rgba(21, 33, 42, .78); }
.aff-cta__btn { display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 2rem; border-radius: 999px; background: var(--c-navy); color: #fff; font-size: 1.05rem; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.aff-cta__btn:hover { transform: translateY(-3px); background: #0d1a24; color: #fff; box-shadow: 0 14px 34px rgba(0, 0, 0, .25); }

/* —— 响应式：窄屏堆叠 —— */
@media (max-width: 991.98px) {
  .aff-hero__inner { flex-direction: column; align-items: stretch; }
  .aff-hero__aside { width: 100%; }
  .aff-flow__grid { grid-template-columns: repeat(2, 1fr); }
  .aff-case__grid { grid-template-columns: repeat(2, 1fr); }
  .aff-rank__grid { grid-template-columns: 1fr; }
  .aff-rank__quotes { position: static; }
  .aff-tips__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .aff-flow__grid { grid-template-columns: 1fr; }
  .aff-case__grid { grid-template-columns: 1fr; }
  .aff-tips__grid { grid-template-columns: 1fr; }
}

/* ===================== 28. 代理加盟（dl） ===================== */
/* 代理加盟页：横幅 → 代理优势 → 加盟流程 → 申请加入 CTA。
   说明：纯静态页面，向用户介绍代理政策并引导联系客服申请；
   变量：setting.company_name（公司名称）、setting.web_view（资源根路径，用于客服二维码）。 */

/* —— 页面横幅：浅蓝渐变底 + 面包屑 + 标题 —— */
.dl-hero {
  position: relative;
  padding: 5.5rem 0;
  overflow: hidden;
  background:
    radial-gradient(90% 130% at 92% -20%, rgba(50, 150, 249, .20), transparent 55%),
    radial-gradient(70% 110% at 0% 120%, rgba(50, 150, 249, .10), transparent 55%),
    linear-gradient(135deg, #eaf3ff 0%, #f6faff 50%, #eef2fc 100%);
}
.dl-hero__inner { position: relative; z-index: 1; }
.dl-hero__crumb { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; font-size: .9rem; color: var(--c-muted); }
.dl-hero__crumb a { color: var(--c-muted); text-decoration: none; }
.dl-hero__crumb a:hover { color: var(--c-blue); }
.dl-hero__crumb i { font-size: .72rem; color: var(--c-grey-light); }
.dl-hero__title { margin: 0 0 .8rem; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: 1px; color: var(--c-navy); }
.dl-hero__subtitle { margin: 0; max-width: 640px; color: var(--c-muted); font-size: 1.05rem; }

/* —— 分区头 —— */
.dl-sec-head { margin: 0 0 2.5rem; text-align: center; }
.dl-sec-title { margin: 0 0 .55rem; font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 700; color: var(--c-navy); }
.dl-sec-subtitle { margin: 0; color: var(--c-muted); font-size: .98rem; }

/* —— 代理优势 —— */
.dl-perks { padding: 4.5rem 0; background: #fff; }
.dl-perks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.dl-perk { padding: 2rem 1.5rem; text-align: center; background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius); transition: transform .25s, box-shadow .25s; }
.dl-perk:hover { transform: translateY(-6px); box-shadow: var(--shadow); background: #fff; }
.dl-perk__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 1rem; border-radius: 50%; font-size: 1.5rem; color: var(--c-blue); background: linear-gradient(135deg, #eaf3ff, #d7e9ff); }
.dl-perk__title { margin: 0 0 .6rem; font-size: 1.15rem; font-weight: 700; color: var(--c-text); }
.dl-perk__desc { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--c-muted); }

/* —— 加盟流程 —— */
.dl-flow { padding: 4.5rem 0; background: var(--c-bg-soft); }
.dl-flow__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.dl-step { position: relative; padding: 2rem 1.25rem 1.5rem; text-align: center; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); }
.dl-step__num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: .9rem; border-radius: 50%; font-size: 1.1rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #3296f9, #1f7ae0); box-shadow: 0 8px 20px rgba(50, 150, 249, .3); }
.dl-step__title { margin: 0 0 .55rem; font-size: 1.1rem; font-weight: 700; color: var(--c-text); }
.dl-step__desc { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--c-muted); }

/* —— 申请加入 CTA —— */
.dl-cta { padding: 4.5rem 0; background: linear-gradient(135deg, #1f7ae0 0%, #3296f9 60%, #4aa8ff 100%); }
.dl-cta__inner { display: flex; align-items: center; gap: 3rem; max-width: 880px; margin: 0 auto; }
.dl-cta__body { flex: 1; color: #fff; }
.dl-cta__title { margin: 0 0 .8rem; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; }
.dl-cta__desc { margin: 0 0 1.75rem; font-size: 1rem; line-height: 1.8; color: rgba(255, 255, 255, .9); }
.dl-cta__btn { display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.8rem; border-radius: 999px; background: #fff; color: var(--c-blue); font-size: 1rem; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.dl-cta__btn:hover { transform: translateY(-3px); color: var(--c-blue-dark); box-shadow: 0 14px 34px rgba(0, 0, 0, .22); }
.dl-cta__qr { flex: none; display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 1.25rem; background: #fff; border-radius: var(--radius); box-shadow: 0 18px 44px rgba(0, 0, 0, .22); }
.dl-cta__qr img { width: 168px; height: 168px; object-fit: contain; }
.dl-cta__qr span { font-size: .9rem; font-weight: 600; color: var(--c-navy); }

/* —— 响应式：窄屏堆叠 —— */
@media (max-width: 991.98px) {
  .dl-perks__grid { grid-template-columns: 1fr; }
  .dl-flow__grid { grid-template-columns: 1fr; }
  .dl-cta__inner { flex-direction: column; text-align: center; gap: 2rem; }
}