/* ==========================================================================
   悟空 AI 首页专用样式（按设计稿重构）
   作用域统一挂在 .wk-home 下，避免污染全站 site.css
   ========================================================================== */

.wk-home {
  --wk-primary: #0044ff;
  --wk-primary-deep: #1d4ed8;
  --wk-primary-soft: #e9f4ff;
  --wk-accent: #3b82f6;
  --wk-ink: #0f2033;
  --wk-muted: #757575;
  --wk-line: #e6ecf6;
  --wk-bg-soft: #f4f8ff;
  --wk-radius: 1.125rem;
  --wk-shadow: 0 1.125rem 2.875rem rgba(37, 99, 235, 0.12);
  --wk-shadow-sm: 0 0.5rem 1.375rem rgba(15, 32, 51, 0.06);
  font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  color: var(--wk-ink);
  line-height: 1.6;
}

/* 让首页脱离外层 container 限宽，与全屏 navbar 同宽（上限 1920px 居中） */
.wk-home {
  width: min(100vw, 120rem);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -1.5rem;
  background-color: #ffffff;
  overflow-x: hidden;
}

.wk-section {
  margin: 0 auto;
  padding: 2.5rem 16rem;
}

/* ── section-head 共享基础 ── */
.wk-section-head {
  text-align: center;
  margin-bottom: 2.75rem;
}
.wk-section-head h2 {
  font-size: 2.8125rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  letter-spacing: 0.25rem;
}
.wk-section-head h2 .wk-hl {
  color: #0576ff;
}
.wk-section-head p {
  color: var(--wk-muted);
  font-size: 0.9375rem;
  margin: 0;
}

/* ── 5. 面向电商团队 ── */
.wk-platform{
  padding-bottom: 0 ;
}

.wk-platform .wk-section-head {
  margin-bottom: 0;
}


/* 灰底占位图（带尺寸标注，方便后续替换） */
.wk-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: repeating-linear-gradient(45deg, #eef2f8, #eef2f8 0.75rem, #e7edf6 0.75rem, #e7edf6 1.5rem);
  color: #8a99b0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03125rem;
  border: 0.0625rem dashed #c3d0e4;
  overflow: hidden;
}

.wk-ph::after {
  content: attr(data-size);
  opacity: 0.9;
}

/* 通用按钮 */
.wk-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.875rem;
  padding: 0 1.625rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.wk-btn svg { width: 1.125rem; height: 1.125rem; }

.wk-btn--primary {
  background: url('https://hx-ai-storage.oss-cn-shenzhen.aliyuncs.com/res/assets/btn2.png?x-oss-process=image/format,webp/quality,q_85') center / 100% 100% no-repeat ;
  color: #fff;
}

.wk-btn--primary:hover {
  transform: translateY(-0.125rem);
}

.wk-btn--ghost {
  background: url('https://hx-ai-storage.oss-cn-shenzhen.aliyuncs.com/res/assets/btn6.png?x-oss-process=image/format,webp/quality,q_85') center / 100% 100% no-repeat;
  color: var(--wk-primary);
}

.wk-btn--ghost:hover {
  transform: translateY(-0.125rem);
}

/* ===================== 1. Hero ===================== */
.wk-hero {
  position: relative;
  background: url('https://hx-ai-storage.oss-cn-shenzhen.aliyuncs.com/res/assets/bg1.png?x-oss-process=image/format,webp/quality,q_85') center top / 100% 100% no-repeat;
  overflow: hidden;
}

.wk-hero-inner {
  /* max-width: 73.75rem; */
  margin: 0 auto;
  padding: 5.75rem 16.375rem 5.25rem;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2.5rem;
  align-items: center;
}

.wk-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--wk-primary);
  padding: 0.375rem 0;
  margin-bottom: 0.575rem;
}

.wk-hero h1 {
  font-size: 4.5rem;
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 0.575rem;
  letter-spacing: 0.0625rem;
}

.wk-hero h1 .wk-hl {
  color: var(--wk-primary);
}

.wk-hero-lead {
  font-size: 1rem;
  color: #091221;
  max-width: 30rem;
  margin: 0 0 2.7rem;
}

.wk-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.wk-hero-art {
  position: relative;
  min-height: 22.5rem;
}

.wk-hero-art .wk-ph {
  width: 100%;
  height: 22.5rem;
  border-radius: 1.5rem;
  border-color: #b9d0f5;
  background: repeating-linear-gradient(45deg, #e4eeff, #e4eeff 0.875rem, #d9e7ff 0.875rem, #d9e7ff 1.75rem);
}

/* ===================== 2. 专业AI创作工具 ===================== */
.wk-tools { background: #fff; }

/* 顶部导航为固定定位，锚点跳转时为目标区块预留可见空间。 */
#wk-tools,
#group-generic,
#group-image,
#group-text {
  scroll-margin-top: 86px;
}

.wk-tools-stats {
  display: flex;
  gap: 1.025rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: -1.375rem;
  margin-bottom: 2.5rem;
  font-size: 1.125rem;
  color: #757575;
}

.wk-tools-stats span strong {
  color: #8ab2fd;
  font-size: 0.9375rem;
  margin-right: 0.1875rem;
}

.wk-tools-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.wk-tool-panel {
  padding: 1.75rem;
}

.wk-tool-panel:nth-child(1) {
    background: url('https://hx-ai-storage.oss-cn-shenzhen.aliyuncs.com/res/assets/topBg.png') center top / 100% auto no-repeat;
    width: 56.25rem;
    height: 51.25rem;
    padding: 1rem;
}

.wk-tool-panel:nth-child(2) {
    background: url('https://hx-ai-storage.oss-cn-shenzhen.aliyuncs.com/res/assets/topBg2.png') center top / 100% auto no-repeat;
    width: 31.25rem;
    height: 51.25rem;
    padding: 1.25rem;
}

.wk-tool-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.375rem;
}

.wk-tool-panel-head h3 {
  font-size: 2rem;
  margin: 0 0 0.25rem;
  color: #fff;
}

/* 通用AI面板 header 左侧分组 */
.wk-panel-title-group {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 20px 6px 0;

}
.wk-panel-ai-badge {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 0.625rem;
}
/* 面板标题前图标 */
.wk-panel-icon {
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  align-self: center;
}
.wk-panel-desc {
  font-size: 0.8125rem;
  color: #fff;
  margin: 0;
  letter-spacing: 0.03125rem;
  line-height: 1.5;
}

.wk-tool-tag {
  font-size: 0.95rem;
  color: #fff;
  background: #000;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  margin-right: 1rem;
}

.wk-subtool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.wk-subtool {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.875rem;
  background: #fff;
  border: 0.0625rem solid var(--wk-line);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.wk-subtool:hover {
  transform: translateY(-0.1875rem);
  border-color: #bcd3ff;
  box-shadow: var(--wk-shadow);
}

.wk-subtool-ico {
  flex: 0 0 2.625rem;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #dbe8ff, #eef4ff);
  color: var(--wk-primary);
}

.wk-subtool-ico svg { width: 1.375rem; height: 1.375rem; }

.wk-subtool-body strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.wk-subtool-body p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--wk-muted);
  line-height: 1.5;
}

/* 通用 AI 面板：3+2 卡片 grid */
.wk-panel--general .wk-subtool-grid--general {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}
.wk-panel--general .wk-subtool-grid--general .wk-subtool--card:nth-child(-n+3) {
  grid-column: span 2;
  width: 280px;
  height: 350px;
}
.wk-panel--general .wk-subtool-grid--general .wk-subtool--card:nth-child(n+4) {
  grid-column: span 3;
  width: 425px;
  height: 314px;
}

/* 通用 AI 卡片样式 */
.wk-subtool--card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background-image: url('https://hx-ai-storage.oss-cn-shenzhen.aliyuncs.com/res/assets/topItemBg.png?x-oss-process=image/format,webp/quality,q_85');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: none;
  border-radius: 0.875rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wk-subtool--card:hover {
  transform: translateY(-0.1875rem);
  box-shadow: var(--wk-shadow);
}
.wk-subtool--card .wk-subtool-body {
  position: relative;
  z-index: 1;
  max-width: 60%;
}
.wk-subtool--card .wk-subtool-body strong {
  display: block;
  font-size: 1.5rem;
  color: #046fff;
  margin-bottom: 0.375rem;
}
.wk-subtool--card .wk-subtool-body p {
  margin: 0;
  font-size: 0.95rem;
  width: 200px;
  color: #091221;
  line-height: 1.5;
}
.wk-panel--general .wk-subtool-grid--general .wk-subtool--card:nth-child(n+4) .wk-subtool-body p {
  width: 400px;
}
/* 缩略图公共属性 */
.wk-subtool-thumb {
  position: absolute;
  object-fit: contain;
}

/* 后两张：位置相同 */
.wk-panel--general .wk-subtool-grid--general .wk-subtool--card:nth-child(n+4) .wk-subtool-thumb {
  bottom: 20px;
  left: 70px  ;
}

/* 每张独立尺寸 */
.wk-panel--general .wk-subtool-grid--general .wk-subtool--card:nth-child(1) .wk-subtool-thumb {
  width: 174px;   /* 请自行调整 */
  height: 134px;
  bottom: 20px;
  left: 50px;
}
.wk-panel--general .wk-subtool-grid--general .wk-subtool--card:nth-child(2) .wk-subtool-thumb {
  width: 130px;
  height: 150px;
  bottom: 20px;
  left: 70px;
}
.wk-panel--general .wk-subtool-grid--general .wk-subtool--card:nth-child(3) .wk-subtool-thumb {
  width: 191px;
  height: 145px;  
  bottom: 20px;
  left: 50px;
}
.wk-panel--general .wk-subtool-grid--general .wk-subtool--card:nth-child(4) .wk-subtool-thumb {
  width: 256px;
  height: 160px;
}
.wk-panel--general .wk-subtool-grid--general .wk-subtool--card:nth-child(5) .wk-subtool-thumb {
  width: 290px;
  height: 164px ;
}

/* 电商创意面板：子工具竖向排列，使用文字卡片 */
.wk-subtool-grid--ecom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.875rem;
}

.wk-subtool--ecom-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 460px;
  height: 156px;
  padding: 1.125rem 1.5rem;
  min-height: 6.25rem;
  border-radius: 0.875rem;
  background: url('https://hx-ai-storage.oss-cn-shenzhen.aliyuncs.com/res/assets/wenziBg2.png') center top / 100% auto no-repeat;
  border: 0.0625rem solid rgba(255, 255, 255, 0.9);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.wk-subtool--ecom-card:hover {
  transform: translateY(-0.1875rem);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--wk-shadow);
}

.wk-subtool--ecom-card strong {
  font-size: 1.125rem;
  font-weight: 700;
  color: #046fff;
  margin-bottom: 6px;
  line-height: 1.4;
}

.wk-subtool--ecom-card p {
  margin: 0;
  font-size: 0.8125rem;
  color: #262e3c;
  letter-spacing: 0.03125rem;
  line-height: 1.55;
}

/* 电商创意 / 营销文案 面板头部在浅色背景上需要深色文字 */
.wk-panel--ecom .wk-tool-panel-head,
.wk-copywriting-head {
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.wk-panel--ecom .wk-panel-title-group,
.wk-copywriting-head .wk-panel-title-group {
  padding: -1rem 0 0 5.5rem;
  align-items: center;
  gap: 0.75rem;
}

.wk-panel--ecom .wk-tool-panel-head h3,
.wk-copywriting-head h3 {
  font-size: 1.8rem;
  margin: 0.25rem 0 0.25rem;
  color: #091221;
  font-weight: 500;
}

.wk-panel--ecom .wk-panel-desc,
.wk-copywriting-head .wk-panel-desc {
  color: #091221;
  font-size: 0.875rem;
}

.wk-panel--ecom .wk-panel-ai-badge,
.wk-copywriting-head .wk-panel-ai-badge {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  object-fit: contain;
}

/* 营销文案区 */
.wk-copywriting {
  padding: 1.5rem 1.75rem;
  background: url('https://hx-ai-storage.oss-cn-shenzhen.aliyuncs.com/res/assets/topBg3.png') center top / 100% auto no-repeat;
  width: 88.75rem;
  height: 20.625rem;
}

.wk-copy-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.875rem;
  margin-top: 1rem;
}

.wk-copy-card {
  padding: 1.4rem 0.875rem;
  border-radius: 0.75rem;
  background: #fcfeff;
  border: 0.0625rem solid var(--wk-line);
  text-align: center;
  height: 4.375rem;
  text-decoration: none;
  color: var(--wk-ink);
  margin-top: 0.625rem;
  font-size: 1rem;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wk-copy-card:hover {
  transform: translateY(-0.1875rem);
  color: #046eff;
  border-color: #bcd3ff;
  box-shadow: var(--wk-shadow);
}

/* ===================== 4. 行业新场景（模特展示） ===================== */
.wk-showcase {
  background: url('https://hx-ai-storage.oss-cn-shenzhen.aliyuncs.com/res/assets/midBg.png?x-oss-process=image/format,webp/quality,q_85') center / 100% 100% no-repeat;
  width: 120rem;
  height: 100rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wk-showcase-tabs {
  display: flex;
  gap: 4rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 2.125rem;
  width: 60rem;
  height: 4rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: url('https://hx-ai-storage.oss-cn-shenzhen.aliyuncs.com/res/assets/tab.png?x-oss-process=image/format,webp/quality,q_85') center / 60rem 4rem no-repeat;
  border-radius: 999px;
}

.wk-tab {
  height: 2.875rem;
  padding: 0 1.375rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--wk-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wk-tab:hover {
  color: var(--wk-primary);
}

.wk-tab.is-active {
  background: url('https://hx-ai-storage.oss-cn-shenzhen.aliyuncs.com/res/assets/btn1.png?x-oss-process=image/format,webp/quality,q_85') center / 100% 100% no-repeat;
  width: 8.8125rem;
  height: 2.5625rem;
  color: #fff;
  border: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wk-tab.is-active::before {
  content: '';
  display: inline-block;
  width: 1.5625rem;
  height: 1.4375rem;
  background: url('https://hx-ai-storage.oss-cn-shenzhen.aliyuncs.com/res/assets/star1.png?x-oss-process=image/format,webp/quality,q_85') center / 100% 100% no-repeat;
  margin-right: 0.25rem;
  flex-shrink: 0;
}

/* 行业新场景 —— 展示舞台 */
.wk-showcase-stage {
  width: 93.75rem;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--wk-radius);
}

.wk-showcase-panel {
  display: none;
}
.wk-showcase-panel.is-active {
  display: block;
}

/* 图片滑动行（前三 tab） */
.wk-slide-row {
  overflow: hidden;
  border-radius: var(--wk-radius);
  margin-bottom: 0.75rem;
}
.wk-slide-row:last-child { margin-bottom: 0; }

.wk-slide-img {
  display: block;
  height: 36.3125rem;
  max-width: none;
}

.wk-slide-top {
  width: 118.8125rem;
  animation: wk-slide-x-top 12s ease-in-out infinite alternate;
}
.wk-slide-bottom {
  width: 120rem;
  animation: wk-slide-x-bottom 12s ease-in-out infinite alternate-reverse;
}

@keyframes wk-slide-x-top {
  from { transform: translateX(0); }
  to { transform: translateX(-25.0625rem); }
}
@keyframes wk-slide-x-bottom {
  from { transform: translateX(0); }
  to { transform: translateX(-26.25rem); }
}

/* 视频特效双行 marquee */
.wk-media-row {
  overflow: hidden;
  border-radius: var(--wk-radius);
  margin-bottom: 0.75rem;
}
.wk-media-row:last-child { margin-bottom: 0; }

.wk-media-track {
  display: flex;
  width: max-content;
  animation: wk-marquee 40s linear infinite;
}
.wk-media-row:nth-child(2) .wk-media-track {
  animation-direction: reverse;
}

.wk-media-item {
  height: 18.125rem;
  width: auto;
  min-width: 12.5rem;
  margin-right: 0.75rem;
  border-radius: 0.875rem;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}

/* 视频首帧卡片 */
.wk-media-item--video {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.wk-media-item--video img,
.wk-media-item--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.wk-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.wk-play-icon::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.5rem 0 0.5rem 0.875rem;
  border-color: transparent transparent transparent #fff;
  margin-left: 0.15rem;
}
.wk-media-item--video:hover .wk-play-icon {
  background: rgba(0, 68, 255, 0.75);
}

/* 视频弹窗 */
.wk-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wk-video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}
.wk-video-modal-body {
  position: relative;
  width: 43.75rem;
  max-width: 90vw;
  height: 62.5rem;
  max-height: 90vh;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
}
.wk-video-modal-body video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}
.wk-video-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.wk-video-modal-close:hover {
  background: rgba(0, 68, 255, 0.8);
}

@keyframes wk-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.wk-showcase-actions {
  text-align: center;
  margin-top: 2.25rem;
}


/* ===================== 5. 面向电商团队 ===================== */
.wk-platform { background: #fff; }

.wk-platform-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: -8.25rem;
}

.wk-platform-copy h2 {
  font-size: 1.875rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
}

.wk-platform-copy h2 .wk-hl { color: var(--wk-primary); }

.wk-platform-copy > p {
  color: var(--wk-muted);
  font-size: 0.9375rem;
  margin: 0 0 2rem;
}

.wk-step {
  display: flex;
  gap: 1rem;
  width: 37.5rem;
  padding: 1.125rem 0;
  border-top: 0.0625rem solid var(--wk-line);
}

.wk-step:first-of-type { border-top: none; }

.wk-step-no {
  flex: 0 0 auto;
  font-size: 2.375rem;
  font-weight: 800;
  color: #046eff;
  min-width: 2.125rem;
}

.wk-step-body strong {
  display: block;
  font-size: 2.125rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.wk-step-body p {
  margin: 0;
  color: var(--wk-muted);
  font-size: 1.125rem;
}

.wk-platform-art {
  width: 67.1875rem;
  height: 59.1875rem;
  background: url('https://hx-ai-storage.oss-cn-shenzhen.aliyuncs.com/res/assets/bottomBg.png?x-oss-process=image/format,webp/quality,q_85') center / 100% 100% no-repeat;
}

/* ===================== 6. 积分套餐 ===================== */
.wk-pricing { background: linear-gradient(180deg, #f6f9ff 0%, #eef4ff 100%); }

.wk-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.375rem;
}

.wk-price-card {
  position: relative;
  background: #fff;
  border-radius: var(--wk-radius);
  border: 0.0625rem solid var(--wk-line);
  padding: 1.875rem 1.5rem;
  box-shadow: var(--wk-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
}

.wk-price-card:hover {
  transform: translateY(-0.375rem);
  border-color: #bcd3ff;
  box-shadow: var(--wk-shadow);
}

.wk-price-badge {
  position: absolute;
  top: -0.375rem;
  right: 0;
  width: 8.75rem;
  height: 2.5rem;
  background: url('https://hx-ai-storage.oss-cn-shenzhen.aliyuncs.com/res/assets/bottomPriBg.png?x-oss-process=image/format,webp/quality,q_85') center / 100% 100% no-repeat;
  color: #fff;
  font-size: 1.375rem;
  line-height: 2.5rem;
  padding-left: 1rem;
  border-radius: 0 var(--wk-radius) 0 0.875rem;
}

.wk-price-name {
  font-size: 1rem;
  font-weight: 700;
  color: #17202e;
  margin-bottom: 0.875rem;
}

.wk-price-points {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 2rem;
  font-weight: 600;
  color: #091221;
  margin-bottom: 0.375rem;
}
.wk-price-flash {
  width: 1.0625rem;
  height: 1.3125rem;
  flex-shrink: 0;
  object-fit: contain;
  position: relative;
  top: 0.5125rem;
}

.wk-price-points small {
  font-size: 0.875rem;
  color: #091221;
  margin-left: 0.25rem;
}

.wk-price-money {
  font-size: 1.375rem;
  color: var(--wk-primary);
  margin-bottom: 0.25rem;
}

.wk-price-origin {
  font-size: 0.9125rem;
  color: #9aa7bc;
  text-decoration: line-through;
  margin-bottom: 1.125rem;
}

.wk-price-buy {
  display: block;
  text-align: center;
  width: 17.25rem;
  height: 3.5rem;
  line-height: 3.5rem;
  background: url('https://hx-ai-storage.oss-cn-shenzhen.aliyuncs.com/res/assets/btn5.png?x-oss-process=image/format,webp/quality,q_85') center / 100% 100% no-repeat;
  color: #fff;
  font-size: 1.125rem;
  text-decoration: none;
  letter-spacing: 0.0625rem;
  margin-bottom: 1.25rem;
}

.wk-price-buy:hover {
  transform: translateY(-0.125rem);
  color: #fff;
}

.wk-price-feats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.wk-price-feats li {
  font-size: 0.8125rem;
  color: var(--wk-muted);
  padding-left: 1.375rem;
  position: relative;
}

.wk-price-feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.375rem;
  width: 0.875rem;
  height: 0.5rem;
  border-left: 0.125rem solid var(--wk-primary);
  border-bottom: 0.125rem solid var(--wk-primary);
  transform: rotate(-45deg);
}

/* ===================== 充值中心 ===================== */
.wk-recharge-page {
  display: block !important;
  background: #fff;
}

.wk-recharge-page > .wk-section {
  display: block;
  clear: both;
  width: 100%;
}

.wk-recharge-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem 16rem;
  background:
    radial-gradient(circle at 18% 16%, rgba(64, 138, 255, 0.16), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}

.wk-recharge-summary > .wk-section {
  display: block;
  clear: none;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}

.wk-recharge-hero .wk-section-head {
  margin-bottom: 0;
  text-align: left;
}

.wk-recharge-balance-section {
  display: block;
}

.wk-recharge-balance-card {
  width: min(100%, 28rem);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  border: 0.0625rem solid #cfe0ff;
  border-radius: var(--wk-radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--wk-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wk-recharge-balance-label {
  color: var(--wk-muted);
  font-size: 1rem;
  font-weight: 600;
}

.wk-recharge-balance-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  color: var(--wk-primary-deep);
}

.wk-recharge-balance-value #balanceValue {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.wk-recharge-balance-unit {
  color: var(--wk-ink);
  font-size: 0.875rem;
  font-weight: 600;
}

.wk-recharge-pricing .wk-section-head {
  margin-bottom: 2.25rem;
}

.wk-recharge-page .recharge-package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: 1.375rem;
  align-items: stretch;
}

.wk-recharge-page .wk-price-buy {
  width: 100%;
  min-height: 3rem;
  height: 3rem;
  margin-top: auto;
  margin-bottom: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #0044ff 0%, #3b82f6 100%);
  box-shadow: 0 0.625rem 1.25rem rgba(0, 68, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.wk-recharge-page .wk-price-feats {
  margin-bottom: 1.25rem;
}

.wk-recharge-page .wk-price-buy:disabled {
  cursor: not-allowed;
  filter: grayscale(0.65);
  opacity: 0.72;
}

.wk-recharge-orders {
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.wk-recharge-orders-head {
  margin-bottom: 1.5rem;
}

.wk-recharge-orders-head h2 {
  font-size: 2.25rem;
}

.wk-recharge-orders .points-record-item {
  border: 0.0625rem solid var(--wk-line);
  border-radius: 0.875rem;
  box-shadow: var(--wk-shadow-sm);
}

/* ===================== 7. 底部信息区 ===================== */
.wk-foot {
  background: url('https://hx-ai-storage.oss-cn-shenzhen.aliyuncs.com/res/assets/bottomBg2.png?x-oss-process=image/format,webp/quality,q_85') center / 100% 100% no-repeat;
  color: #fff;
  width: 120rem;
  height: 43.75rem;
}

.wk-foot-inner {
  max-width: 73.75rem;
  margin: 0 auto;
  padding: 10.5rem 1.5rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.wk-foot-brand {
  margin-bottom: 1.125rem;
}

.wk-foot-brand .wk-foot-logo {
  width: 11.75rem;
  height: 4.375rem;
  display: block;
}

.wk-foot-desc {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.86);
  width: 52.75rem;
  margin: 0 0 1.375rem;
  line-height: 1.7;
}

.wk-foot-desc p {
  margin: 0;
  text-indent: 2em;
}

.wk-foot-desc p + p {
  margin-top: 0.5rem;
}

.wk-foot-contact {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  font-size: 1.375rem;
}

.wk-foot-contact span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.wk-foot-qr {
  display: flex;
  gap: 1.5rem;
  justify-content: flex-end;
}

.wk-foot-qr figure {
  margin: 0;
  text-align: center;
}

.wk-foot-qr-box {
  width: 13.75rem;
  height: 13.75rem;
  background: #fff;
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;
}

.wk-foot-qr figcaption {
  font-size: 1.25rem;
  color: #fff;
}

.wk-foot-title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  text-align: center;
}

.wk-foot-copyright {
  text-align: center;
  padding: 0.5rem 1.5rem;
  font-size: 1.125rem;
  color: #fff;
  border-top: 0.0625rem solid #fff;
  max-width: 73.75rem;
  margin: -80px auto;
}


/* ===================== 背景图懒加载 ===================== */
/* 未进入视口的区块隐藏背景图，由 IntersectionObserver 添加 .wk-visible 触发加载 */
.wk-tools:not(.wk-visible) .wk-tool-panel:nth-child(1),
.wk-tools:not(.wk-visible) .wk-tool-panel:nth-child(2),
.wk-tools:not(.wk-visible) .wk-subtool-grid--general .wk-subtool--img,
.wk-tools:not(.wk-visible) .wk-subtool-grid--ecom .wk-subtool--img,
.wk-tools:not(.wk-visible) .wk-copywriting { background-image: none !important; }

.wk-showcase:not(.wk-visible),
.wk-showcase:not(.wk-visible) .wk-showcase-tabs,
.wk-showcase:not(.wk-visible) .wk-tab.is-active,
.wk-showcase:not(.wk-visible) .wk-tab.is-active::before { background-image: none !important; }

.wk-platform:not(.wk-visible) .wk-platform-art { background-image: none !important; }

.wk-pricing:not(.wk-visible) .wk-price-badge,
.wk-pricing:not(.wk-visible) .wk-price-buy { background-image: none !important; }

.wk-foot:not(.wk-visible) { background-image: none !important; }

/* ===================== 渲染性能优化 ===================== */
/* 跳过屏幕外区块的布局与绘制计算 */
.wk-tools,
.wk-platform,
.wk-pricing {
  content-visibility: auto;
  contain-intrinsic-size: auto 60rem;
}

/* ===================== 响应式 ===================== */
@media (max-width: 991.98px) {
  .wk-home { width: 100%; margin-top: 0; }
  .wk-section { padding: 2.5rem 1.5rem; }

  /* section-head */
  .wk-section-head { margin-bottom: 1.75rem; }
  .wk-section-head h2 { font-size: 1.8125rem; letter-spacing: 0.125rem; }
  .wk-section-head p { font-size: 0.9375rem; }

  /* Hero */
  .wk-hero { background-size: cover; }
  .wk-hero-inner { grid-template-columns: 1fr; padding: 3rem 1.5rem; gap: 1.5rem; }
  .wk-hero-copy { text-align: left; }
  .wk-hero-badge { font-size: 1.0625rem; margin-bottom: 0.375rem; }
  .wk-hero-badge img { width: 1rem; height: auto; }
  .wk-hero h1 { font-size: 2.5625rem; line-height: 1.25; margin-bottom: 0.5rem; }
  .wk-hero-lead { font-size: 1.0625rem; line-height: 1.6; max-width: 100%; margin-bottom: 1.25rem; }
  .wk-hero-art { min-height: 12rem; }
  .wk-hero-art .wk-ph { height: 12rem; }

  /* 工具区 */
  .wk-tools-stats { font-size: 0.9125rem; gap: 0.5rem; margin-top: -0.5rem; margin-bottom: 1.5rem; }
  .wk-tools-top { grid-template-columns: 1fr; gap: 1rem; }
  .wk-tool-panel { padding: 1.25rem !important; }
  .wk-tool-panel:nth-child(1),
  .wk-tool-panel:nth-child(2) {
    width: 100%;
    height: auto;
    background-size: 100% 100%;
  }
  .wk-tool-panel-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem; }
  .wk-tool-panel-head h3 { font-size: 1.4125rem; }
  .wk-panel-title-group { padding: 0.5rem 0 0 !important; }
  .wk-panel-desc { font-size: 0.8625rem; }
  /* 面板前图标（topIcon1-3.png）在窄屏缩小，避免占据过多横向空间 */
  .wk-panel-icon { width: 3rem !important; height: auto !important; }
  /* 面板右上角标签 */
  .wk-tool-tag { font-size: 0.8125rem; padding: 0.25rem 0.625rem; }

  /* 通用 AI 卡片：单列 */
  .wk-panel--general .wk-subtool-grid--general { grid-template-columns: 1fr; }
  .wk-panel--general .wk-subtool-grid--general .wk-subtool--card:nth-child(-n+3),
  .wk-panel--general .wk-subtool-grid--general .wk-subtool--card:nth-child(n+4) {
    grid-column: span 1;
    width: 100%;
    height: auto;
    min-height: 10rem;
  }
  .wk-subtool--card .wk-subtool-body { max-width: 100%; }
  .wk-subtool--card .wk-subtool-body strong { font-size: 1.1625rem; }
  .wk-subtool--card .wk-subtool-body p,
  .wk-panel--general .wk-subtool-grid--general .wk-subtool--card:nth-child(n+4) .wk-subtool-body p { width: 100%; font-size: 0.9125rem; }
  .wk-panel--general .wk-subtool-grid--general .wk-subtool--card .wk-subtool-thumb {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    left: auto !important;
    width: 5rem !important;
    height: auto !important;
    max-height: 5rem;
  }

  /* 电商创意卡片 */
  .wk-subtool--ecom-card { width: 100%; height: auto; min-height: 5rem; padding: 1rem 1.25rem; background-size: 100% 100%; }
  .wk-subtool--ecom-card strong { font-size: 1.0625rem; }
  .wk-subtool--ecom-card p { font-size: 0.8125rem; }

  /* 营销文案 */
  .wk-copywriting { width: 100%; height: auto; padding: 1.25rem; background-size: 100% 100%; }
  .wk-copywriting-head .wk-panel-title-group { padding: 0.25rem 0 0 !important; }
  .wk-copywriting-head h3 { font-size: 1.4125rem; }
  .wk-copy-grid { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
  .wk-copy-card { font-size: 0.9125rem; height: auto; min-height: 3.5rem; padding: 0.875rem 0.5rem; }

  /* 行业新场景 */
  .wk-showcase { width: 100%; height: auto; padding: 2.5rem 1rem; background-size: cover; }
  .wk-showcase-tabs { width: 100%; max-width: 100%; gap: 0.5rem; height: auto; padding: 0.375rem; background-size: 100% 100%; flex-wrap: wrap; justify-content: space-around; }
  .wk-tab { font-size: 0.9125rem; height: 2.25rem; padding: 0 0.5rem; }
  .wk-tab.is-active { width: auto; min-width: 6rem; height: 2.25rem; background-size: 100% 100%; }
  .wk-tab.is-active::before { width: 1rem; height: 1rem; }

  .wk-showcase-stage { width: 100%; max-width: 100%; }
  /* 移动端：保留左右滞畦动画，但将平移量改为图片相对视窗的溢出量（100vw - 100%），避免图片被推出屏 */
  .wk-slide-row { overflow: hidden; }
  .wk-slide-img { height: 12rem; width: auto; max-width: none; }
  .wk-slide-top {
    width: auto !important;
    animation: wk-slide-x-top-mobile 14s ease-in-out infinite alternate;
  }
  .wk-slide-bottom {
    width: auto !important;
    animation: wk-slide-x-bottom-mobile 14s ease-in-out infinite alternate-reverse;
  }
  @keyframes wk-slide-x-top-mobile {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100vw - 100%)); }
  }
  @keyframes wk-slide-x-bottom-mobile {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100vw - 100%)); }
  }
  .wk-media-item { height: 10rem; min-width: 8rem; }
  .wk-play-icon { width: 2.25rem; height: 2.25rem; }
  /* 视频 marquee 在移动端适当放慢，避免内容过快难以看清 */
  .wk-media-row { overflow: hidden; }
  .wk-media-track { animation-duration: 30s; }

  /* 场景展示底部 CTA 按钮 */
  .wk-showcase-actions { display: flex; justify-content: center; margin-top: 1.25rem; }
  .wk-showcase-actions .wk-btn { height: 2.5rem; padding: 0 1.5rem; font-size: 0.9625rem; background-size: 100% 100%; }

  /* 视频弹窗 */
  .wk-video-modal-body { width: 92vw; height: auto; max-height: 85vh; }

  /* 面向电商团队 */
  .wk-platform-inner { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 0; }
  .wk-step { width: 100%; padding: 1rem 0; }
  .wk-step-no { font-size: 1.5625rem; min-width: 1.75rem; }
  .wk-step-body strong { font-size: 1.1875rem; margin-bottom: 0.25rem; }
  .wk-step-body p { font-size: 0.9625rem; }
  .wk-platform-art { width: 100%; height: 16rem; background-size: contain; }

  /* 积分套餐 */
  .wk-pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 0.875rem; }
  .wk-price-card { padding: 1.25rem 1rem; }
  .wk-price-badge { width: 6rem; height: 2rem; font-size: 0.9625rem; line-height: 2rem; padding-left: 0.75rem; }
  .wk-price-name { font-size: 0.9625rem; }
  .wk-price-points { font-size: 1.5625rem; }
  .wk-price-flash { width: 1rem; height: auto; }
  .wk-price-money { font-size: 1.1625rem; }
  .wk-price-buy { width: 100%; height: 2.75rem; line-height: 2.75rem; background-size: 100% 100%; font-size: 1.0125rem; }
  .wk-price-feats li { font-size: 0.8125rem; }

  .wk-recharge-page .recharge-package-grid { gap: 0.875rem; }
  .wk-recharge-summary { grid-template-columns: 1fr; gap: 1rem; padding: 2.5rem 1.5rem; }
  .wk-recharge-hero .wk-section-head { text-align: center; }
  .wk-recharge-balance-card { width: min(100%, 24rem); }
  .wk-recharge-orders-head h2 { font-size: 1.875rem; }

  /* 底部 */
  .wk-foot { width: 100%; height: auto; background-size: cover; }
  .wk-foot-inner { grid-template-columns: 1fr; padding: 3rem 1.5rem; gap: 1.5rem; }
  .wk-foot-desc { width: 100%; font-size: 0.9625rem; }
  .wk-foot-contact { font-size: 0.9625rem; gap: 0.875rem; }
  .wk-foot-brand .wk-foot-logo { width: 8rem; height: auto; }
  .wk-foot-qr { justify-content: flex-start; }
  .wk-foot-title { text-align: left; }
  .wk-foot-copyright { font-size: 0.9125rem; margin: 0 auto; }

  /* 按钮 */
  .wk-btn { height: 2.5rem; padding: 0 1.25rem; font-size: 0.9625rem; }
  /* Hero 按钮区同步缩小（它们使用 btn2/btn6 背景图，需保持宽高比） */
  .wk-hero-actions { gap: 0.75rem; }
  .wk-hero-actions .wk-btn { height: 2.5rem; padding: 0 1.5rem; font-size: 0.9625rem; gap: 0.375rem; background-size: 100% 100%; }
  .wk-hero-actions .wk-btn svg { width: 1rem; height: 1rem; }
}

@media (max-width: 575.98px) {
  .wk-section { padding: 2rem 1rem; }
  .wk-section-head h2 { font-size: 1.5625rem; letter-spacing: 0.0625rem; }
  .wk-section-head p { font-size: 0.8625rem; }

  /* Hero */
  .wk-hero-inner { padding: 2.5rem 1rem 2rem; }
  .wk-hero h1 { font-size: 2.0625rem; line-height: 1.3; margin-bottom: 0.375rem; }
  .wk-hero-badge { font-size: 0.9625rem; margin-bottom: 0.25rem; }
  .wk-hero-lead { font-size: 0.7125rem; line-height: 1.55; margin-bottom: 1rem; }
  /* Hero 按钮区进一步压缩（保持 btn2/btn6 图片比例，不用 flex:1 拉伸） */
  .wk-hero-actions { gap: 0.5rem; flex-wrap: wrap; }
  .wk-hero-actions .wk-btn { flex: 0 0 auto; justify-content: center; height: 2.25rem; padding: 0 1.25rem; font-size: 0.8625rem; gap: 0.25rem; background-size: 100% 100%; }
  .wk-hero-actions .wk-btn svg { width: 0.875rem; height: 0.875rem; }

  /* 工具区统计 */
  .wk-tools-stats { font-size: 0.8125rem; gap: 0.375rem; }
  .wk-tools-stats span strong { font-size: 0.8625rem; }

  /* 面板标题与图标进一步压缩 */
  .wk-panel-icon { width: 2.5rem !important; }
  .wk-tool-panel-head h3,
  .wk-copywriting-head h3 { font-size: 1.2125rem; }
  .wk-panel-desc { font-size: 0.8125rem; }
  .wk-tool-tag { font-size: 0.7625rem; padding: 0.2rem 0.5rem; }

  /* 卡片进一步压缩 */
  .wk-subtool--card { padding: 1rem; }
  .wk-subtool--card .wk-subtool-body strong { font-size: 1.0625rem; }
  .wk-panel--general .wk-subtool-grid--general .wk-subtool--card .wk-subtool-thumb {
    width: 4rem !important;
    max-height: 4rem;
  }
  /* 电商创意卡片内内容 */
  .wk-subtool--ecom-card { padding: 0.875rem 1rem; min-height: 4.5rem; }
  .wk-subtool--ecom-card strong { font-size: 0.9625rem; }
  .wk-subtool--ecom-card p { font-size: 0.7625rem; }

  /* 营销文案 */
  .wk-copy-grid { grid-template-columns: repeat(2, 1fr); }
  .wk-copy-card { font-size: 0.8125rem; min-height: 3rem; padding: 0.75rem 0.5rem; }

  /* 行业新场景 tabs 与媒体 */
  .wk-tab { font-size: 0.8125rem; padding: 0 0.375rem; }
  .wk-tab.is-active { min-width: 5rem; }
  .wk-media-item { height: 8rem; min-width: 6rem; }
  .wk-media-track { animation-duration: 40s; }

  /* 面向电商团队步骤 */
  .wk-step-no { font-size: 1.3125rem; }
  .wk-step-body strong { font-size: 1.0625rem; }
  .wk-step-body p { font-size: 0.8625rem; }
  .wk-platform-art { height: 12rem; }

  /* 积分套餐 */
  .wk-pricing-grid { grid-template-columns: 1fr; }
  .wk-recharge-page .recharge-package-grid { grid-template-columns: 1fr; }
  .wk-recharge-summary { padding: 2rem 1rem; }
  .wk-recharge-page .wk-price-buy { min-height: 2.875rem; height: 2.875rem; }
  .wk-recharge-balance-card { padding: 0.875rem 1rem; }
  .wk-recharge-balance-value #balanceValue { font-size: 1.625rem; }
  .wk-recharge-orders-head h2 { font-size: 1.625rem; }

  /* 底部 */
  .wk-foot-inner { padding: 2.5rem 1rem; }
  .wk-foot-brand .wk-foot-logo { width: 6.5rem; }
  .wk-foot-desc { font-size: 0.9125rem; }
  .wk-foot-contact { font-size: 0.9125rem; }

  /* 场景展示底部 CTA */
  .wk-showcase-actions .wk-btn { height: 2.25rem; padding: 0 1.25rem; font-size: 0.8625rem; }
}