/* ============================================
   英智云创官网设计系统
   设计规范：蓝灰主色调，企业科技风格，克制微动效
   ============================================ */

/* ========== 无障碍工具类 ========== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========== 设计令牌（Design Tokens） ========== */
:root {
  /* 色彩系统 - 英智云创企业科技风格 */
  --color-primary: #0052d9; /* 科技蓝 - 品牌主色 */
  --color-primary-light: #4d7fff;
  --color-primary-dark: #0039a6;

  --color-gray-900: #1a1a1a; /* 深灰 - 商务稳重 */
  --color-gray-800: #333333;
  --color-gray-700: #4d4d4d;
  --color-gray-600: #666666;
  --color-gray-500: #808080;
  --color-gray-400: #999999;
  --color-gray-300: #b3b3b3;
  --color-gray-200: #cccccc;
  --color-gray-100: #e6e6e6;
  --color-gray-50: #f5f5f5;

  --color-white: #ffffff;
  --color-black: #000000;

  /* 功能色 */
  --color-success: #52c41a;
  --color-warning: #fa8c16;
  --color-error: #a50000; /* 深红色 - 匹配图片中的深红色调 */
  --color-info: #1890ff;

  /* 背景色 */
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-gray-50);
  --bg-dark: var(--color-gray-900);

  /* 文字色 */
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-700);
  --text-muted: var(--color-gray-600);
  --text-light: var(--color-gray-400);
  --text-on-dark: var(--color-white);

  /* 边框色 */
  --border-color: var(--color-gray-200);
  --border-color-light: var(--color-gray-100);

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* 间距系统（基于8px） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px; /* 模块间距（基于ui-ux-pro-max原则） */
  --space-32: 128px;

  /* 字体 */
  --font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "Consolas", "Monaco", "Courier New", monospace;

  /* 字体大小 */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 64px;

  /* 行高 */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* 过渡动画 */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* 布局宽度 */
  --container-width: 1280px;
  --container-padding: var(--space-6);

  /* 断点标准 (Breakpoint Tokens) */
  --breakpoint-xxl: 1400px;
  --breakpoint-xl: 1200px;
  --breakpoint-lg: 992px;
  --breakpoint-md: 768px;
  --breakpoint-sm: 576px;
}

/* ========== 重置与全局样式 ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 92px; /* 72px 固定导航栏 + 20px 留白 */
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}


/* ========== 排版样式 ========== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

h1 {
  font-size: var(--text-5xl);
}

h2 {
  font-size: var(--text-4xl);
}

h3 {
  font-size: var(--text-3xl);
}

h4 {
  font-size: var(--text-2xl);
}

p {
  margin-bottom: var(--space-4);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* 正文内链：加粗 + 继承正文颜色 */
.content-link {
  color: inherit;
  font-weight: 700;
}

a:hover {
  color: var(--color-primary-dark);
}

/* ========== 按钮样式 ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-8);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--radius-full); /* 统一全局按钮为胶囊状全圆角 */
  cursor: pointer;
  transition: all var(--transition-normal);
  text-align: center;
  white-space: nowrap;
  user-select: none;
  gap: var(--space-2);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* 移除全局的 ::after 伪元素，以防在各种不希望出现的地方强制产生箭头。如果需要箭头，在 HTML 里添加 <i> 标签更可控。 */

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
  /* 移除了 translateY(-1px) 避免抖动 */
}

/* primary 按钮悬浮时箭头的交互 */
.btn-primary:hover i:not(.fa-arrow-right) {
  transform: translateX(4px);
}

/* 全站按钮中去掉箭头图标 */
.btn .fa-arrow-right,
.yz-btn .fa-arrow-right {
  display: none;
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
  /* 移除了 translateY(-1px) 避免抖动 */
}

.btn-outline:hover i {
  transform: translateX(4px);
  color: var(--color-white);
}

/* ========== 导航栏样式 ========== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color-light);
  height: 72px; /* 稍微增加高度以适应低位红线 */
  transition: all var(--transition-normal);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  position: relative;
}

.nav-brand {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.brand-logo {
  height: 32px; /* 调整 Logo 大小，与文字协调 */
  width: auto;
}

.yz-uploaded-logo {
  display: block;
  height: 38px;
  max-width: 220px;
  object-fit: cover;
}

.logo-text {
  font-size: var(--text-2xl); /* 增大品牌文字 */
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.nav-menu {
  flex: 1;
  display: flex;
  justify-content: center;
  height: 100%;
  position: relative; /* 为红线提供定位参考 */
}

.nav-underline {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--color-error);
  transition:
    left 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    width 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.3s ease; /* 限制过渡属性，避免干扰 */
  pointer-events: none;
  z-index: 10;
  opacity: 0;
}

/* 移除这里的 hover 自动显示，全部交给 JS 精准控制 */

.nav-primary {
  display: flex;
  list-style: none;
  gap: 0;
  height: 100%;
}

.nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0; /* 移除 li 上的 padding，移交给 a 标签以确保红线位置同步 */
}

.nav-item > a {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-primary);
  font-weight: 400;
  font-size: 19px;
  height: 100%;
  padding: 0 30px; /* 统一感应区域：左右各 30px，确保覆盖间隙的一半 */
  transition: color var(--transition-fast);
}

/* 针对第一个项目”产品中心”左侧感应区进行特别扩大 */
.nav-primary .nav-item:first-child > a {
  padding-left: 90px;
}

/* 栏目数 >= 8 时自动缩小内边距，防止换行 */
.nav-primary.nav-compact .nav-item > a {
  padding: 0 15px;
  font-size: 17px;
}
.nav-primary.nav-compact .nav-item:first-child > a {
  padding-left: 35px;
}

.nav-item > a:hover {
  color: var(--color-error);
}

.nav-item.active > a {
  color: var(--text-primary);
  font-weight: 400;
}

.nav-item.has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background-color: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  list-style: none;
  padding: var(--space-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-normal);
  z-index: 100;
}

.dropdown-menu li {
  padding: 0;
}

.dropdown-menu a {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.dropdown-menu a:hover {
  background-color: var(--color-gray-50);
  color: var(--color-primary);
  padding-left: var(--space-6);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* 增加透明桥接层，防止鼠标斜向移动时 Mega Menu 消失 */
.nav-item.has-megamenu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px; /* 桥接导航项到菜单顶部的距离 */
  background: transparent;
  z-index: 100;
}

.nav-item.has-megamenu.is-open::after {
  display: block;
}

/* ========== 优化相邻导航栏菜单快速切换（平滑与硬切结合） ========== */
/*
   目标逻辑：
   1. 首次把鼠标移入导航栏上的下拉项：播放 0.6s 的慢动作展开。
   2. 在已经展开的两个下拉项之间横向平移：旧的瞬间消失 (0s)，新的瞬间展开 (0s)。
   3. 把鼠标完全移出导航栏：当前展开的菜单播放 0.6s 的慢动作收回。
*/

/* 技巧：当整个 .nav-primary 处于 hover 状态时，给所有的 .megamenu 设定极短的无动画 0s。
   这就意味着在内部横滑时，不论是离开旧的，还是进入新的，都会瞬间切换。 */
/* .nav-primary:hover .megamenu {
    transition: max-height 0s, box-shadow 0s !important;
} */

/* 但是！如果是“首次把鼠标放上去”，我们需要让上面的 0s 规则延迟一下才生效，
   这样“首次展开”的过程就能躲过 0s 的绞杀，享受到 0.6s 的平滑展开。
   这个延迟时间要略大于 0s，但不用等完全展开。我们给 .nav-primary:hover 整体加一个短暂的过渡延迟（通过让透明度不生效的属性来充当计时器）。
   在 CSS 纯方案里，这非常困难。所以我们换一种更聪明的做法：

   在默认情况下，只要你还没离开，就维持正常的 0.6s 收回。 */
.megamenu {
  position: fixed;
  top: 72px;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid var(--border-color);
  box-shadow: none;
  padding: 0;
  opacity: 1;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  /* 【收回动画】：默认慢速收回 (0.8s) */
  transition:
    max-height 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0.8s,
    box-shadow 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 99;
  pointer-events: none;
}

/* 【展开动画】：默认慢速展开 (1s) */
.nav-item.has-megamenu.is-open .megamenu {
  opacity: 1;
  visibility: visible;
  max-height: 1200px;
  pointer-events: auto;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transition:
    max-height 1s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 【重点：解决横滑时的割裂感】
   横滑意味着“从一个有下拉的项移到另一个有下拉的项”。
   如果我们在 CSS 里用兄弟选择器，当 hover 产品中心时，它的后续兄弟（解决方案）就会受到影响。
*/
/*
.nav-item.has-megamenu:hover ~ .nav-item.has-megamenu .megamenu,
.nav-item.has-megamenu:hover ~ .nav-item.has-megamenu:hover .megamenu {
    transition: max-height 0s, box-shadow 0s !important;
}
*/

/* 更好的无JS终极 CSS :has 方案：如果当前的 .nav-primary 内有【任何一个】 .has-megamenu 被 hover（说明菜单已经展开了），
   此时再去 hover 其他的 .has-megamenu，它们全部变成 0s 动画。
   (目前由于无法判定首次 hover，纯 CSS 最佳方案是利用JS给整个 nav-primary 挂一个 is-active 类)。
   这里我们将通过一段简短的 JS 来完美控制这个逻辑，而不是用 CSS 死磕。
   在 CSS 中，我们只需要写好一个瞬切辅助类： */

.nav-primary.is-switching .megamenu {
  transition: none !important;
}

/* ========== Mega Menu 巨型菜单 ========== */

.megamenu-container {
  display: flex;
  width: 100%;
  max-width: var(--container-width); /* 与解决方案对齐 */
  margin: 0 auto; /* 与解决方案对齐 */
  gap: 60px;
  min-height: 448px; /* 最小高度兜底，实际高度由内容自适应 */
  height: auto; /* 允许自适应 */
  padding: 0; /* 【统一高度】将外部包裹层的 30px padding 取消，依靠内部侧边栏的 40px 撑开（和解决方案逻辑一致） */
  align-items: stretch; /* 确保子元素（包括 banner）高度拉伸 */
  box-sizing: border-box; /* 增加这个 */
}

/* === 产品中心下拉框左侧列表 (重构版：参考解决方案结构) === */
.megamenu-sidebar {
  width: 250px; /* 【统一左侧分割线】宽度从 260px 缩短为 250px，与解决方案完全对齐 */
  flex-shrink: 0;
  border-right: 1px solid var(--border-color);
  padding: 40px 0; /* 【统一高度】从 20px 0 改为 40px 0，与解决方案保持一致 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.megamenu-tabs {
  list-style: none;
  padding: 0;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.megamenu-tab {
  padding: 16px 16px; /* 【缩短间距】将原本的左右20px改为16px，让出横向空间给文字 */
  font-size: 15px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  border-left: 3px solid transparent;
  font-weight: 400;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px; /* 【缩小间距】图标和文字间距从12px减为10px，更紧凑 */
  position: relative;
  background-color: transparent;
}

.megamenu-tab-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 14px;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.megamenu-tab-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0; /* 防止子元素撑破 flex 容器 */
}

.megamenu-tab-title {
  font-size: 15px;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.megamenu-tab-arrow {
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(-5px);
  transition: all var(--transition-fast);
  position: absolute;
  right: 20px;
}

/* 悬停和激活状态 */
.megamenu-tab:hover,
.megamenu-tab.active {
  background-color: #fff;
  border-left-color: var(--color-primary);
}

.megamenu-tab:hover .megamenu-tab-icon,
.megamenu-tab.active .megamenu-tab-icon {
  background-color: var(--color-primary);
  color: #fff;
}

.megamenu-tab:hover .megamenu-tab-title,
.megamenu-tab.active .megamenu-tab-title {
  color: var(--color-primary);
  font-weight: 700;
}

.megamenu-tab:hover .megamenu-tab-arrow,
.megamenu-tab.active .megamenu-tab-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-primary);
}

/* 中间内容区 */
.megamenu-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 【新增】让中间所有的内容垂直居中 */
  padding: 40px 0; /* 【统一高度】让中间内容也保持上下 40px 的内边距，与左侧对齐 */
}

.megamenu-pane {
  display: none;
  flex: 1; /* 允许面板在内容区拉伸 */
}

.megamenu-pane.active {
  display: flex;
  flex-direction: column;
}

.megamenu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  flex: 1; /* 允许网格在面板内拉伸 */
  align-content: center; /* 【新增】当网格有多项时，垂直居中对齐 */
}

.megamenu-item {
  display: flex;
  gap: 16px;
  padding: 12px;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.2s;
}

.megamenu-item:hover {
  background-color: var(--bg-secondary);
}

.megamenu-item-icon {
  width: 40px;
  height: 40px;
  background: #f0f4f8;
  color: var(--color-primary);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.megamenu-item-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

/* 单个内容的专属高度自适应布局 */
.megamenu-grid:has(> .single-item) {
  display: flex; /* 改为 flex 以支持高度拉伸 */
  flex-direction: column;
  justify-content: center; /* 【修改核心】垂直居中 */
  height: 100%;
  padding-top: 0; /* 移除强行的下移 padding，交给居中去处理 */
  padding-left: 0px;
}

.megamenu-grid .single-item {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: transparent !important;
  cursor: default;
  height: auto;
}

.megamenu-grid .single-item .megamenu-item-icon {
  display: none; /* 按照图片参考，隐藏图标 */
}

.megamenu-grid .single-item .megamenu-item-info {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 标题、描述、按钮之间的自适应间距，稍微拉开一点，更协调 */
}

.megamenu-grid .single-item .megamenu-item-title {
  font-size: 18px; /* 标题从 20px 降至 18px */
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.2;
}

.megamenu-grid .single-item .megamenu-item-desc {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: 0;
}

.megamenu-item-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* 右侧推广位 */
.megamenu-banner {
  width: 320px; /* 【修改】宽度增加到 320px，和高度的 320px 一致，形成正方形 */
  min-width: 320px; /* 强制固定宽度，防止在 flex 布局中被压缩 */
  flex-shrink: 0;
  text-decoration: none;
  display: block;
  align-self: center; /* 随下拉框高度增加自动垂直居中 */
}

/* 移除悬停时的上移效果，保持布局稳定 */
.megamenu-banner:hover {
  transform: none;
}

.megamenu-banner-card {
  background: linear-gradient(135deg, #1a6fc4 0%, #0d4a86 100%);
  border-radius: 12px;
  padding: 36px 30px; /* 因为面积变大，增加了内边距让内部呼吸感更好 */
  width: 320px; /* 【修改】宽度增加到 320px，和 a 标签一致 */
  height: 100%; /* 内部 div 直接撑满父级 <a> 的高度 */
  min-height: 320px; /* 【终极杀招】直接给这个蓝色色块写死一个最小高度 */
  color: #fff;
  display: flex;
  flex-direction: column;
  text-align: left; /* 强制内部内容左对齐 */
  box-sizing: border-box; /* 确保 padding 不增加宽度 */
}

.megamenu-banner-card .badge {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  margin-bottom: 16px;
}

.megamenu-banner-card h4 {
  font-size: 18px;
  margin-bottom: 8px;
  line-height: 1.3;
  text-align: left; /* 确保标题左对齐 */
}

.megamenu-banner-card p {
  font-size: 13px;
  opacity: 0.8;
  margin-bottom: auto;
  text-align: left; /* 确保描述文字左对齐 */
}

.megamenu-banner-card .text-link {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  justify-content: flex-start; /* 确保立即查看文字在弹性布局中靠左 */
  text-align: left;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(5px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mobile-nav-menu {
  display: none;
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 19px;
  position: relative;
}

.mobile-toggle span {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* Closed state: three stacked bars */
.mobile-toggle span:nth-child(1) { top: 0; }
.mobile-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.mobile-toggle span:nth-child(3) { top: 100%; transform: translateY(-100%); }

/* Open state: X */
.navbar.is-open .mobile-toggle span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.navbar.is-open .mobile-toggle span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  opacity: 0;
}

.navbar.is-open .mobile-toggle span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* ========== 侧边咨询入口 ========== */
.sidebar-contact {
  position: fixed;
  right: var(--space-6);
  top: 56%;
  transform: translateY(-50%);
  z-index: 1001; /* 确保高于导航栏和其他内容 */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 68px; /* 稍微调大一点，显得更大气 */
  height: 68px;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-normal);
  cursor: pointer;
}

.contact-item:hover {
  transform: translateX(-4px); /* 向左轻微偏移 */
  box-shadow: var(--shadow-xl);
  color: var(--color-primary);
}

.contact-item.back-to-top {
  margin-top: 0;
  background-color: var(--color-white);
}

.contact-item.back-to-top:hover {
  background-color: var(--color-gray-900);
  color: var(--color-white);
}

.yz-contact-phone:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.contact-label {
  font-size: 11px; /* 缩小文字，突出图标 */
  margin-top: var(--space-1);
  font-weight: 500;
}

/* 弹出窗口通用样式 */
.contact-popup {
  position: absolute;
  right: 74px; /* 缩小间距，确保 hover 能够顺滑过渡 */
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background-color: var(--color-white);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
  pointer-events: none;
  width: 170px; /* 统一宽度 */
  height: 180px; /* 统一高度 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 确保内容垂直居中 */
  text-align: center;
  border: 1px solid var(--border-color-light);
}

/* 增加透明桥接层，防止鼠标移动到弹出框时消失 */
.contact-popup::before {
  content: "";
  position: absolute;
  top: 0;
  right: -20px; /* 向按钮方向延伸，填补间隙 */
  width: 20px;
  height: 100%;
  background: transparent;
}

.contact-item:hover .contact-popup,
.contact-item.is-active .contact-popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

/* 弹出窗口装饰小三角 */
.contact-popup::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background-color: var(--color-white);
  border-right: 1px solid var(--border-color-light);
  border-top: 1px solid var(--border-color-light);
}

.popup-title {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-color-light);
  padding-bottom: var(--space-2);
  flex-shrink: 0;
}

.phone-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  justify-content: center;
}

.phone-number {
  font-size: var(--text-base);
  color: var(--color-primary);
  font-weight: 700;
}

.qr-image {
  width: 120px; /* 进一步优化二维码大小 */
  height: 120px;
  display: block;
  margin: 0 auto;
}


/* ========== 英智云创关于我们专用样式 ========== */

.yz-about-top-banner {
  position: relative;
  height: 480px;
  overflow: hidden;
  background: #07182f;
}

.yz-about-top-banner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.yz-about-top-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2, 17, 36, 0.58), rgba(2, 17, 36, 0.18));
}

.yz-about-top-banner-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px;
  text-align: center;
}

.yz-about-top-banner-text h1,
.yz-about-top-banner-text h2 {
  margin: 0;
  color: #fff;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 4px;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

.yz-about-top-banner-text p {
  margin: 0;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: no-preference) {
  .yz-about-page.yz-about-reveal-ready .yz-about-reveal-item {
    opacity: 0;
    transform: translateY(34px);
    transition:
      opacity .72s ease,
      transform .72s cubic-bezier(.22, .61, .36, 1),
      box-shadow var(--transition-normal),
      border-color var(--transition-normal);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }

  .yz-about-page.yz-about-reveal-ready .yz-about-reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .yz-about-page.yz-about-reveal-ready .yz-about-contact-card.yz-about-reveal-item.is-visible:hover {
    transform: translateY(-8px);
  }

  .yz-about-page.yz-about-reveal-ready .yz-about-mv-card.yz-about-reveal-item.is-visible:hover {
    transform: translateY(-4px);
    transition-delay: 0s;
  }

  .yz-about-page.yz-about-reveal-ready .yz-about-mv-strip.yz-about-reveal-item {
    transition:
      opacity .64s ease,
      transform .64s cubic-bezier(.22, .61, .36, 1),
      box-shadow var(--transition-normal),
      border-color var(--transition-normal);
  }

  .yz-about-page.yz-about-reveal-ready .yz-about-method .yz-section-head.yz-about-reveal-item {
    transition-delay: .06s;
  }

  .yz-about-page.yz-about-reveal-ready .yz-about-method-item.yz-about-reveal-item {
    transform: translateX(-32px);
  }

  .yz-about-page.yz-about-reveal-ready .yz-about-method-item.yz-about-reveal-item.is-visible {
    transform: translateX(0);
  }

  .yz-about-page.yz-about-reveal-ready .yz-about-method-flow .yz-about-method-item.yz-about-reveal-item:nth-child(1) {
    transition-delay: .62s;
  }

  .yz-about-page.yz-about-reveal-ready .yz-about-method-flow .yz-about-method-item.yz-about-reveal-item:nth-child(2) {
    transition-delay: .95s;
  }

  .yz-about-page.yz-about-reveal-ready .yz-about-method-flow .yz-about-method-item.yz-about-reveal-item:nth-child(3) {
    transition-delay: 1.29s;
  }

  .yz-about-page.yz-about-reveal-ready .yz-about-method-flow .yz-about-method-item.yz-about-reveal-item:nth-child(4) {
    transition-delay: 1.62s;
  }

  .yz-about-page.yz-about-reveal-ready .yz-about-method-flow .yz-about-method-item.yz-about-reveal-item:nth-child(5) {
    transition-delay: 1.96s;
  }

  .yz-about-page.yz-about-reveal-ready .yz-about-method-flow .yz-about-method-item.yz-about-reveal-item:nth-child(6) {
    transition-delay: 2.29s;
  }
}

.yz-about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 52px;
  align-items: stretch;
}

.yz-about-hero .yz-about-hero-title {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: 36px;
}

.yz-about-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.yz-about-hero p {
  max-width: 720px;
}

.yz-about-hero-visual {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.yz-about-hero-banner {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  border: 1px solid #e6edf8;
}

/* ---------- 关于我们 共享 ---------- */
.yz-about-section-soft {
  background: #f0f5fb;
}

.yz-about-beliefs {
  background: #f0f5fb;
}

.yz-about-underline {
  display: block;
  width: 52px;
  height: 3px;
  background: var(--color-primary);
  margin: 16px auto 0;
  border-radius: 2px;
}

/* ---------- 1. 我们的核心定位 ---------- */
.yz-about-belief-grid {
  display: grid;
  gap: 24px;
}

.yz-about-belief-item {
  display: flex;
  flex-direction: column;
}

.yz-about-belief-grid article,
.yz-about-contrast article {
  background: #fff;
  border: 1px solid #cfdff3;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 82, 217, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.yz-about-belief-item:hover article,
.yz-about-contrast article:hover {
  transform: translateY(-3px);
  border-color: #7fb7ff;
  box-shadow: 0 12px 32px rgba(0, 82, 217, 0.12);
}

.yz-about-belief-grid {
  grid-template-columns: repeat(3, 1fr);
}
.yz-about-belief-grid article {
  flex: 1;
  padding: 40px 32px 36px;
  text-align: left;
}
.yz-about-belief-icon {
  display: block;
  width: 124px;
  height: 96px;
  margin: 0 auto 26px;
  transition: transform 0.28s ease, filter 0.28s ease;
}

.yz-about-belief-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.yz-about-belief-item:hover .yz-about-belief-icon {
  transform: translateY(-4px);
  filter: drop-shadow(0 12px 20px rgba(0, 82, 217, 0.12));
}
.yz-about-belief-grid h3 {
  font-size: 20px;
  margin-bottom: 10px;
  text-align: center;
}
.yz-about-belief-grid p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.75;
}
/* ---------- 2. 使命与愿景 ---------- */
.yz-about-mission-vision .yz-section-head {
  text-align: center;
  margin-bottom: 48px;
}

.yz-about-mission-vision .yz-about-underline {
  margin-left: auto;
  margin-right: auto;
}

.yz-about-mv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.yz-about-mv-card {
  background: #fff;
  border: 1px solid #cfdff3;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 82, 217, 0.06);
  padding: 48px 44px 46px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.yz-about-mv-card:hover {
  transform: translateY(-4px);
  border-color: #7fb7ff;
  box-shadow: 0 12px 32px rgba(0, 82, 217, 0.12);
}

.yz-about-mv-label {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 34px;
  color: #3b82f6;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.2;
}

.yz-about-mv-label .yz-about-mv-icon {
  --badge-accent: #3b82f6;
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  color: #fff;
  font-size: 18px;
}
.yz-about-mv-label .yz-about-mv-icon::before,
.yz-about-mv-label .yz-about-mv-icon::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--badge-accent), #7dd3fc);
  transform: rotate(45deg);
}
.yz-about-mv-label .yz-about-mv-icon::after {
  inset: 11px;
  opacity: 0.42;
  transform: translate(12px, -2px) rotate(45deg);
}
.yz-about-mv-label .yz-about-mv-icon i {
  position: relative;
  z-index: 2;
}

.yz-about-mv-card h3 {
  margin: 0 0 28px;
  color: var(--text-primary);
  font-size: 27px;
  line-height: 1.45;
  font-weight: 900;
}

.yz-about-mv-card p {
  color: var(--text-secondary);
  font-size: 19px;
  line-height: 1.82;
  margin: 0;
}

.yz-about-mv-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 36px;
  border: 1px solid #bfd8fb;
  background: #dbeafe;
}

.yz-about-mv-point {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  padding: 28px 28px;
  min-width: 0;
  transition: background .24s ease, box-shadow .24s ease;
}

.yz-about-mv-point:hover {
  background: rgba(255, 255, 255, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.yz-about-mv-point + .yz-about-mv-point {
  border-left: 1px solid rgba(148, 163, 184, 0.45);
}

.yz-about-mv-point i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin-top: 4px;
  border-radius: 4px;
  color: #fff;
  background: #2563eb;
  font-size: 19px;
  line-height: 1;
  transition: transform .24s ease, background .24s ease, box-shadow .24s ease;
}

.yz-about-mv-point:hover i {
  transform: translateY(-2px);
  background: #1d4ed8;
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
}

.yz-about-mv-point strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text-primary);
  font-size: 21px;
  line-height: 1.35;
  font-weight: 900;
  transition: color .24s ease;
}

.yz-about-mv-point:hover strong {
  color: #1d4ed8;
}

.yz-about-mv-point span {
  display: block;
  color: #526178;
  font-size: 17px;
  line-height: 1.65;
}

/* ---------- 3. 我们怎么做项目 ---------- */
.yz-about-method .container {
  max-width: 1622px;
}

.yz-about-method-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}
.yz-about-method-item {
  flex: 0 0 254px;
  display: flex;
  flex-direction: column;
  max-width: 254px;
  min-width: 254px;
}
.yz-about-method-step {
  background: #fff;
  border: 1px solid #cfdff3;
  border-radius: 8px;
  text-align: center;
  padding: 0 18px 28px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  flex: 1;
}
.yz-about-method-item:hover .yz-about-method-step {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 82, 217, 0.10);
  border-color: #7fb7ff;
}
.yz-about-method-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -28px auto 16px;
  position: relative;
  z-index: 2;
}
.yz-about-method-circle span {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-primary);
}
.yz-about-method-illust {
  display: block;
  width: 160px;
  height: 124px;
  margin: 0 auto 16px;
  object-fit: cover;
  transition: transform 0.28s ease, filter 0.28s ease;
}
.yz-about-method-item:hover .yz-about-method-illust {
  transform: translateY(-4px);
  filter: drop-shadow(0 12px 20px rgba(0, 82, 217, 0.12));
}
.yz-about-method-step p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
.yz-about-method-arrow {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 14px 28px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  background: linear-gradient(135deg, #0052d9 0%, #0077ff 62%, #23a7ff 100%);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 16px 50%);
  box-shadow: 0 12px 26px rgba(0, 82, 217, 0.15);
  transition: transform 0.24s ease, box-shadow 0.24s ease;
  border-radius: 0 0 8px 8px;
}
.yz-about-method-item:hover .yz-about-method-arrow {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 82, 217, 0.22);
}

/* ---------- 4. 做什么 / 不做什么 ---------- */
.yz-about-contrast ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.yz-about-contrast-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.yz-about-contrast article {
  position: relative;
  overflow: hidden;
  padding: 40px 36px 36px;
  border-radius: 8px;
}
.yz-about-contrast article::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(135deg, rgba(0, 82, 217, 0.08), rgba(35, 167, 255, 0));
  transition: opacity 0.25s ease;
}
.yz-about-contrast article:hover::after {
  opacity: 1;
}
.yz-about-do {
  border-top: 4px solid #159947;
}
.yz-about-dont {
  border-top: 4px solid #d05a4e;
}
.yz-about-contrast-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 22px;
}
.yz-about-contrast-label i {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 900;
}
.yz-about-contrast-label i::before {
  -webkit-text-stroke: 0.45px currentColor;
}
.yz-about-do .yz-about-contrast-label i {
  color: #fff;
  background: #159947;
}
.yz-about-dont .yz-about-contrast-label i {
  color: #fff;
  background: #d05a4e;
}
.yz-about-contrast li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid #edf3fb;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.75;
}
.yz-about-contrast li:last-child {
  padding-bottom: 0;
}
.yz-about-contrast li > i {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  transition: transform 0.24s ease, background 0.24s ease, color 0.24s ease;
}
.yz-about-do li > i {
  color: #159947;
  background: rgba(21, 153, 71, 0.1);
}
.yz-about-dont li > i {
  color: #d05a4e;
  background: rgba(208, 90, 78, 0.1);
}
.yz-about-contrast li:hover > i {
  transform: scale(1.08);
}
.yz-about-contrast li strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-primary);
  font-size: 16px;
}
.yz-about-contrast li span {
  display: block;
}
.yz-about-contrast-note {
  margin: 28px auto 0;
  padding: 18px 24px;
  max-width: 760px;
  border-radius: 8px;
  background: #f4f8ff;
  border: 1px solid #d8e6f7;
  color: var(--color-primary);
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}

.yz-about-contact {
  background: #f0f5fb;
}

.yz-about-contact-head {
  text-align: center;
  margin-bottom: 40px;
}

.yz-about-contact-head h2 {
  margin: 0;
  font-size: 34px;
}

.yz-about-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.yz-about-contact-card {
  min-height: 300px;
  padding: 52px 32px 42px;
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  background: #fff;
  text-align: center;
  color: var(--text-primary);
  box-shadow: 0 18px 42px rgba(0, 82, 217, 0.08);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease;
}

.yz-about-contact-card:hover {
  transform: translateY(-8px);
  border-color: #0077ff;
  box-shadow: 0 26px 60px rgba(0, 82, 217, 0.18);
}

.yz-about-contact-icon {
  width: 74px;
  height: 74px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef5ff;
  color: var(--color-primary);
  font-size: 26px;
  box-shadow: 0 14px 36px rgba(0, 82, 217, 0.12);
  margin-bottom: 28px;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms ease, color 240ms ease;
}

.yz-about-contact-card:hover .yz-about-contact-icon {
  transform: scale(1.06);
  background: var(--color-primary);
  color: #fff;
}

.yz-about-contact-card h3 {
  font-size: 20px;
  margin-bottom: 28px;
}

.yz-about-contact-card strong {
  display: block;
  color: var(--color-primary);
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 14px;
  overflow-wrap: anywhere;
}

.yz-about-contact-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
}


/* ========== 页脚样式 ========== */
.footer {
  background-color: var(--color-gray-900);
  color: var(--color-white);
  padding: 25px 0 var(--space-8);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.link-title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
  color: var(--color-white);
}

.footer-links ul {
  list-style: none;
}

.footer-links li {
  margin-bottom: var(--space-3);
}

.footer-links a {
  color: var(--color-gray-400);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-white);
}

.footer-links i {
  width: 20px;
  margin-right: var(--space-2);
  color: var(--color-primary-light);
}

.footer-contact-group li {
  display: flex;
  align-items: flex-start;
}
.footer-contact-group li i {
  flex-shrink: 0;
  margin-top: 3px;
}
.footer-contact-group li span {
  flex: 1;
  min-width: 0;
}

.yz-footer-qr {
  width: 120px;
  height: 120px;
  margin-top: 12px;
  border-radius: 6px;
  border: 1px solid #333;
  object-fit: cover;
}

.footer-bottom {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-800);
  display: flex;
  justify-content: space-between;
  color: var(--color-gray-500);
  font-size: var(--text-sm);
}

/* ========== 解决方案详情页增强样式 ========== */

.sol-arch-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  perspective: 1000px;
}

.arch-layer {
  position: relative;
  padding: 24px 32px;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(0, 82, 217, 0.08);
  background: #fff;
}

.arch-layer:hover {
  transform: translateY(-5px) translateZ(10px);
  box-shadow: 0 15px 35px rgba(0, 82, 217, 0.1);
  border-color: rgba(0, 82, 217, 0.2);
  z-index: 10;
}

/* 各层级配色与装饰 - 统一采用品牌深蓝色调 */
.arch-layer-app,
.arch-layer-platform,
.arch-layer-network,
.arch-layer-perception {
  border-left: 5px solid #0052d9;
  background: #f0f7ff;
}

.layer-badge {
  font-weight: 700;
  color: #0052d9;
  font-size: 18px;
  letter-spacing: 0.5px;
}

.arch-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.arch-node {
  background: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #333;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.arch-layer:hover .arch-node {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.arch-node:hover {
  border-color: var(--color-primary-light);
  color: var(--color-primary);
  transform: scale(1.02);
}

.arch-node i {
  color: var(--color-primary);
  font-size: 16px;
}


.hidden-desktop {
  display: none;
}

/* ========== 页面管理 (page.php) ========== */

/* ============================================
   英智云创官网前台组件
   ============================================ */
.yz-page {
  background: #fff;
}

.yz-main {
  padding-top: 72px;
}

.yz-logo .logo-text {
  color: var(--color-primary);
}

.yz-logo {
  gap: 10px;
}

.yz-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0, 102, 204, 0.22);
  border-radius: 8px;
  background: #f3f8ff;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.yz-nav-primary .nav-item > a {
  font-size: 16px;
  padding: 0 18px;
}

.yz-nav-primary .nav-item:first-child > a {
  padding-left: 18px;
}

.yz-service-nav-link i {
  font-size: 11px;
}

.yz-nav-actions {
  gap: 14px;
}

.yz-nav-cta {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  background: linear-gradient(135deg, #0052d9 0%, #0077ff 48%, #003a9f 100%);
  background-size: 160% 160%;
  background-position: 0% 50%;
  border: none;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 82, 217, 0.35);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1), background-position 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.yz-nav-cta:hover {
  background-position: 100% 50%;
  box-shadow: 0 10px 30px rgba(0, 82, 217, 0.46), 0 0 0 4px rgba(0, 119, 255, 0.12);
  transform: translateY(-2px);
  color: #fff;
}

.yz-nav-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 6px 4px;
  text-decoration: none;
  white-space: nowrap;
  color: #0f2f63;
  transition: color 0.2s ease;
}

.yz-nav-phone:hover {
  color: #0b66e4;
}

.yz-nav-phone .yz-nav-phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 24px;
  width: 24px;
}

.yz-nav-phone span {
  font-family: "Arial Narrow", Arial, "Helvetica Neue", sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: currentColor;
  letter-spacing: 0.1px;
  line-height: 1;
}

.yz-megamenu {
  background: rgba(255, 255, 255, 0.98);
}

.yz-megamenu-shell {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
}

.yz-megamenu-side {
  padding: 24px;
  border-radius: 8px;
  background: #f5f8ff;
  border: 1px solid #e5edff;
}

.yz-megamenu-side h3 {
  font-size: 22px;
  margin: 10px 0 12px;
}

.yz-megamenu-side p {
  color: var(--text-secondary);
  line-height: 1.7;
}

.yz-megamenu-note {
  position: relative;
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: var(--color-primary);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 12px 24px rgba(0, 82, 217, 0.16);
}

.yz-megamenu-note::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 1px;
  background: #dbe6fb;
}

.yz-megamenu-note:hover {
  background: var(--color-primary);
  color: #fff;
  transform: none;
}

.yz-megamenu-note-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  text-align: left;
}

.yz-megamenu-note-title {
  font-size: 15px;
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
}

.yz-megamenu-note-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 8px;
  background: #fff;
  color: var(--color-primary);
  border: 1px solid #fff;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  transition: none;
}

.yz-megamenu-note-btn i {
  font-size: 12px;
}

.yz-megamenu-note:hover .yz-megamenu-note-btn {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
}

.yz-megamenu-note-icon {
  width: 60px;
  height: 50px;
  flex-shrink: 0;
}

/* ---------- mega menu product grid ---------- */
.yz-megamenu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-content: start;
}

/* ---------- product card ---------- */
.yz-megamenu-card {
  position: relative;
  min-height: 197px;
  padding: 20px 22px 24px;
  border: 1px solid #e8edf5;
  border-radius: 8px;
  color: var(--text-primary);
  background: #fff;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 12px;
  row-gap: 10px;
  align-content: start;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.yz-megamenu-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 18px rgba(0,82,217,0.08);
}

/* ---------- card header row: icon + title ---------- */
.yz-megamenu-card-head {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.yz-megamenu-card-icon {
  --mega-icon-accent: #2563eb;
  --mega-icon-soft: #7dd3fc;
  --mega-icon-glow: rgba(37, 99, 235, 0.18);
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: transparent;
  font-size: 16px;
  isolation: isolate;
  overflow: visible;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.yz-megamenu-card-icon::before,
.yz-megamenu-card-icon::after {
  content: "";
  position: absolute;
  border-radius: 7px;
  transform: rotate(45deg);
}

.yz-megamenu-card-icon::before {
  inset: 7px;
  z-index: 0;
  background: linear-gradient(135deg, var(--mega-icon-accent), var(--mega-icon-soft));
  box-shadow: 0 8px 16px var(--mega-icon-glow);
}

.yz-megamenu-card-icon::after {
  inset: 10px;
  z-index: 1;
  background: linear-gradient(135deg, var(--mega-icon-soft), var(--mega-icon-accent));
  opacity: 0.42;
  transform: translate(8px, -2px) rotate(45deg);
}

.yz-megamenu-card-icon i {
  position: relative;
  z-index: 2;
}

.yz-megamenu-card:hover .yz-megamenu-card-icon {
  transform: translateY(-1px);
}

/* ---------- text content ---------- */
.yz-megamenu-card strong {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yz-megamenu-card-desc {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  padding-right: 34px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* ---------- arrow indicator (bottom right) ---------- */
.yz-megamenu-card-arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #f4f7fc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a0b4cc;
  font-size: 11px;
  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.yz-megamenu-card:hover .yz-megamenu-card-arrow {
  transform: translateX(3px);
  color: var(--color-primary);
  background: #eef5ff;
}

/* ---------- subtle icon colour variations per column ---------- */
/* 第 1 列 (3n+1)：蓝色 #2563eb — 默认，无需额外规则 */
/* 第 2 列 (3n+2)：青色 */
.yz-megamenu-card:nth-child(3n+2) .yz-megamenu-card-icon {
  --mega-icon-accent: #0f766e;
  --mega-icon-soft: #67e8f9;
  --mega-icon-glow: rgba(15, 118, 110, 0.18);
}
/* 第 3 列 (3n)：紫色 */
.yz-megamenu-card:nth-child(3n) .yz-megamenu-card-icon {
  --mega-icon-accent: #7c3aed;
  --mega-icon-soft: #60a5fa;
  --mega-icon-glow: rgba(124, 58, 237, 0.16);
}

/* ========== Solutions Mega Menu ========== */
.yz-megamenu-sols .yz-megamenu-shell {
  display: block;
  max-width: 1640px;
  padding: 0 24px;
}

.yz-megamenu-sols .yz-megamenu-note {
  background: #0f766e;
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.16);
}

.yz-megamenu-sols .yz-megamenu-note::before {
  background: #cdeee9;
}

.yz-megamenu-sols .yz-megamenu-note:hover {
  background: #0f766e;
}

.yz-megamenu-sols .yz-megamenu-note-btn,
.yz-megamenu-sols .yz-megamenu-note:hover .yz-megamenu-note-btn {
  color: #0f766e;
}

.nav-item.has-megamenu.is-open .yz-megamenu-sols,
.nav-item.has-megamenu:focus-within .yz-megamenu-sols {
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}

.yz-solnav-menu {
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr);
  min-height: 430px;
  background: #fff;
}

.yz-solnav-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 22px;
  background: #f4f8ff;
  border-right: 1px solid #e8eefb;
}

.yz-solnav-all {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 20px;
  border-bottom: 1px solid #cfe8e4;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
}

.yz-solnav-all:hover {
  color: var(--color-primary);
}

.yz-solnav-all-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.yz-solnav-all .fa-arrow-right {
  font-size: 13px;
  transition: transform 0.2s ease;
}

.yz-solnav-all:hover .fa-arrow-right {
  transform: translateX(3px);
}

.yz-solnav-industry-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.yz-solnav-industry-link {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 7px;
  color: #24324a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.yz-solnav-industry-link:hover,
.yz-solnav-industry-link.is-active {
  background: var(--color-primary);
  color: #fff;
}

.yz-solnav-note {
  margin-top: auto;
}

.yz-solnav-note::before {
  display: none;
}

.yz-solnav-content {
  padding: 32px 44px 42px;
  min-width: 0;
}

.yz-solnav-panel {
  display: none;
}

.yz-solnav-panel.is-active {
  display: block;
}

.yz-solnav-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 42px;
  align-items: start;
}

.yz-solnav-column {
  min-width: 0;
}

.yz-solnav-scene-name {
  min-height: 44px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  color: #111827;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  text-align: left;
}

.yz-solnav-solution-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.yz-solnav-solution {
  display: block;
  min-height: 74px;
  margin: -8px -10px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.yz-solnav-solution:hover {
  background: #f5f8ff;
  box-shadow: 0 8px 18px rgba(0, 82, 217, 0.08);
  color: var(--color-primary);
  transform: translateY(-1px);
}

.yz-solnav-solution-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}

.yz-solnav-solution:hover .yz-solnav-solution-title {
  color: var(--color-primary);
}

.yz-solnav-solution-title-text {
  min-width: 0;
}

.yz-solnav-solution-mark {
  width: 3px;
  height: 15px;
  border-radius: 999px;
  background: var(--color-primary);
  flex-shrink: 0;
  transition: background 0.18s ease, height 0.18s ease;
}

.yz-solnav-solution:hover .yz-solnav-solution-mark {
  height: 20px;
  background: #0f766e;
}

.yz-solnav-badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.yz-solnav-badge-hot {
  color: #ef4444;
  background: #fff1f2;
}

.yz-solnav-badge-new {
  color: #2563eb;
  background: #eff6ff;
}

.yz-solnav-solution-desc {
  display: -webkit-box;
  margin-top: 8px;
  padding-left: 12px;
  color: #7b8494;
  font-size: 13px;
  line-height: 1.75;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 1360px) {
  .yz-solnav-content {
    padding-left: 34px;
    padding-right: 34px;
  }

  .yz-solnav-columns {
    gap: 28px;
  }
}

/* ---------- two-column solutions grid (industry left, scenario right) ---------- */
.yz-megamenu-sols-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-content: start;
}

/* ---------- each group (industry / scenario) ---------- */
.yz-megamenu-sols-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- group title ---------- */
.yz-megamenu-sols-group-title {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
}

/* ---------- solutions card list (internal multi-column: max 4 per column) ---------- */
.yz-megamenu-sols-list {
  display: grid;
  grid-template-rows: repeat(4, minmax(70px, auto));
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: 20px 24px;
}

/* ---------- solution card (compact row) ---------- */
.yz-megamenu-sols-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 70px;
  padding: 12px 10px;
  border-radius: 6px;
  background: transparent;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.2s ease;
}

.yz-megamenu-sols-card:hover {
  background: #f5f8ff;
}

/* ---------- card icon ---------- */
.yz-megamenu-sols-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #eef5ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background 0.2s ease, color 0.2s ease;
}

.yz-megamenu-sols-card:hover .yz-megamenu-sols-card-icon {
  background: var(--color-primary);
  color: #fff;
}

/* ---------- card body ---------- */
.yz-megamenu-sols-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.yz-megamenu-sols-card-body strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yz-megamenu-sols-card:hover .yz-megamenu-sols-card-body strong {
  color: var(--color-primary);
}

.yz-megamenu-sols-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* Subtle icon colour variations — scenario column gets teal accent */
.yz-megamenu-sols-group:nth-child(2) .yz-megamenu-sols-card-icon {
  background: #f0faf9;
  color: #0d9488;
}
.yz-megamenu-sols-group:nth-child(2) .yz-megamenu-sols-card:hover .yz-megamenu-sols-card-icon {
  background: #0d9488;
  color: #fff;
}
.yz-megamenu-sols-group:nth-child(2) .yz-megamenu-sols-card:hover .yz-megamenu-sols-card-body strong {
  color: #0d9488;
}

/* ----- Keyboard accessibility: show mega menu on focus-within ----- */
.nav-item.has-megamenu:focus-within .megamenu {
  opacity: 1;
  visibility: visible;
  max-height: 800px;
  pointer-events: auto;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transition:
    max-height 1s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.yz-kicker {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 12px;
}

.yz-page-hero {
  padding: 104px 0 84px;
  background:
    linear-gradient(135deg, rgba(0, 82, 217, 0.08), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #f7faff 0%, #fff 100%);
  border-bottom: 1px solid #edf1f7;
}

.yz-page-hero.yz-about-hero {
  background: #fff;
}

.yz-page-hero h1 {
  max-width: 780px;
  font-size: 46px;
  margin-bottom: 20px;
}

.yz-page-hero p {
  max-width: 760px;
  font-size: 19px;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* ===== Process Hero（合作流程 Banner）===== */
.yz-process-hero {
  position: relative;
  min-height: 480px;
  padding: 0;
  display: flex;
  align-items: center;
  background-color: var(--color-primary-dark, #002766);
  background-image: var(--process-hero-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: none;
  overflow: hidden;
}
.yz-process-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 40, 104, 0.90) 0%, rgba(0, 55, 140, 0.78) 55%, rgba(0, 82, 217, 0.65) 100%);
  z-index: 0;
}
.yz-process-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.yz-process-hero h1 {
  color: #fff;
  font-size: 40px;
  line-height: 1.28;
  font-weight: 700;
  margin-bottom: 16px;
  max-width: none;
}
.yz-process-hero p {
  color: #fff;
  font-size: 17px;
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto;
}

/* ===== Process Hero 响应式 ===== */
@media (max-width: 992px) {
  .yz-process-hero {
    min-height: 380px;
  }
  .yz-process-hero h1 {
    font-size: 32px;
  }
  .yz-process-hero p {
    font-size: 15px;
  }
}
@media (max-width: 576px) {
  .yz-process-hero {
    min-height: 280px;
  }
  .yz-process-hero h1 {
    font-size: 26px;
  }
  .yz-process-hero p {
    font-size: 16px;
  }
}

/* ===== Process Advantage Section（合作优势卡片）===== */
.yz-process-advantage-section {
  padding: 88px 0 72px;
  min-height: 700px;
  background: #f6f8fc;
}
.yz-process-advantage-section .yz-section-head {
  margin-bottom: 48px;
}

@media (prefers-reduced-motion: no-preference) {
  .yz-sols-page.yz-sols-reveal-ready .yz-sols-reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity .25s ease,
      transform .25s cubic-bezier(.22, .61, .36, 1),
      box-shadow var(--transition-normal),
      border-color var(--transition-normal);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }

  .yz-sols-page.yz-sols-reveal-ready .yz-sols-reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .yz-sols-page.yz-sols-reveal-ready .yz-sols-ind-card.yz-sols-reveal-item.is-visible:hover {
    transform: translateY(-6px);
  }

  .yz-process-page.yz-process-reveal-ready .yz-process-reveal-item {
    opacity: 0;
    transform: translateY(34px);
    transition:
      opacity .72s ease,
      transform .72s cubic-bezier(.22, .61, .36, 1),
      box-shadow var(--transition-normal),
      border-color var(--transition-normal);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }

  .yz-process-page.yz-process-reveal-ready .yz-process-reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .yz-process-page.yz-process-reveal-ready .yz-process-reveal-item.is-visible:hover {
    transition-delay: 0s;
  }
}

.yz-process-advantage-grid {
  display: flex;
  justify-content: center;
  gap: 24px;
}
.yz-process-advantage-card {
  width: 313px;
  height: 310px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e0e5ef;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  padding: 32px 24px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.yz-process-advantage-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}
.yz-process-advantage-art {
  width: 140px;
  height: 140px;
  margin-bottom: 16px;
  flex-shrink: 0;
  object-fit: cover;
}
.yz-process-advantage-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px 0;
  line-height: 1.35;
}
.yz-process-advantage-card p {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Process Advantage 响应式 ===== */
@media (max-width: 1400px) {
  .yz-process-advantage-grid {
    flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  .yz-process-advantage-section {
    min-height: auto;
    padding: 56px 0 48px;
  }
  .yz-process-advantage-grid {
    gap: 16px;
  }
  .yz-process-advantage-card {
    width: calc(50% - 8px);
    height: auto;
    min-height: 220px;
  }
}
@media (max-width: 480px) {
  .yz-process-advantage-card {
    width: 100%;
    min-height: auto;
  }
}

/* ===== Process Wave Section（波浪线流程）===== */
.yz-process-wave-section {
  padding: 80px 0 68px;
  overflow: hidden;
  background: #fff;
}
.yz-process-wave-section .yz-section-head {
  margin-bottom: 26px;
}

.yz-process-faq-section {
  background: #fff;
}

/* --- 波浪线容器 --- */
.yz-process-wave-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 430px;
}

.yz-process-wave-wrap::before {
  content: "";
  position: absolute;
  inset: 0 -70px 10px;
  pointer-events: none;
  background: none;
  opacity: 0;
  z-index: 0;
}

/* --- SVG 波浪线 --- */
.yz-process-wave-svg {
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  height: 350px;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 10px 16px rgba(15, 35, 80, .12));
}

.yz-process-wave-line {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.yz-process-wave-line--groove {
  stroke: #e8edf5;
  stroke-width: 14;
  opacity: 0.98;
}

/* 灰色底线 */
.yz-process-wave-line--grey {
  stroke: #cfd7e4;
  stroke-width: 8;
  opacity: 1;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .85)) drop-shadow(0 -1px 2px rgba(15, 35, 80, .12));
}

/* 蓝色动画线 */
.yz-process-wave-line--blue {
  stroke: #2563eb;
  stroke-width: 8;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  transition: stroke-dashoffset 3.5s ease-in-out;
  filter: drop-shadow(0 6px 12px rgba(37, 99, 235, .2));
}
.yz-process-wave-wrap.is-active .yz-process-wave-line--blue {
  stroke-dashoffset: 0;
}

/* 节点圆圈 */
.yz-process-wave-dot {
  fill: #fff;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 16;
  filter: drop-shadow(0 8px 18px rgba(37, 99, 235, .24));
  transition: fill 0.3s ease, transform 0.3s ease;
}
.yz-process-wave-wrap.is-active .yz-process-wave-dot {
  fill: #2563eb;
}

/* --- 卡片列 --- */
.yz-process-wave-cards {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.yz-process-wave-item {
  width: 200px;
  height: 1px;
  position: absolute;
  left: var(--wave-x);
  top: var(--wave-y);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.yz-process-wave-item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.yz-process-wave-item:nth-child(1) { --wave-x: 11.3%; --wave-y: 68.15%; }
.yz-process-wave-item:nth-child(2) { --wave-x: 27%; --wave-y: 44.3%; }
.yz-process-wave-item:nth-child(3) { --wave-x: 50%; --wave-y: 49%; }
.yz-process-wave-item:nth-child(4) { --wave-x: 67.5%; --wave-y: 43%; }
.yz-process-wave-item:nth-child(5) { --wave-x: 85%; --wave-y: 36.75%; }

/* --- 触发器（图标+标题，始终可见） --- */
.yz-process-wave-trigger {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(calc(-50% + var(--wave-label-shift, 0px)));
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  width: 200px;
  padding: 0;
  z-index: 2;
}

.yz-process-wave-icon {
  --badge-accent: #2563eb;
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 36px;
  order: 1;
  margin-bottom: 8px;
  transition: transform 0.3s ease;
}
.yz-process-wave-icon::before,
.yz-process-wave-icon::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--badge-accent), #7dd3fc);
  transform: rotate(45deg);
}
.yz-process-wave-icon::after {
  inset: 17px;
  opacity: 0.42;
  transform: translate(16px, -3px) rotate(45deg);
}
.yz-process-wave-icon i {
  position: relative;
  z-index: 2;
  color: #fff;
}
.yz-process-wave-item:hover .yz-process-wave-icon {
  transform: scale(1.08);
}

.yz-process-wave-trigger h3 {
  order: 2;
  font-size: 19px;
  font-weight: 800;
  color: #111827;
  margin: 0;
  line-height: 1.35;
  text-align: center;
  transition: color 0.3s ease;
}
.yz-process-wave-item:hover .yz-process-wave-trigger h3 {
  color: #2563eb;
}

/* --- 描述弹出卡片 --- */
.yz-process-wave-popup {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translate(calc(-50% + var(--wave-label-shift, 0px)), 12px);
  width: 240px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e0e5ef;
  box-shadow: 0 16px 36px rgba(15, 35, 80, 0.14);
  padding: 16px 18px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  z-index: 10;
}
.yz-process-wave-popup::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
}
.yz-process-wave-item:hover .yz-process-wave-popup {
  opacity: 1;
  visibility: visible;
  transform: translate(calc(-50% + var(--wave-label-shift, 0px)), 0);
}
.yz-process-wave-popup p {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.7;
  margin: 0;
}

/* --- 波浪线响应式 --- */
@media (max-width: 992px) {
  .yz-process-wave-section {
    padding: 56px 0 48px;
  }
  .yz-process-wave-wrap {
    min-height: auto;
  }
  .yz-process-wave-wrap::before {
    display: none;
  }
  .yz-process-wave-svg {
    display: none;
  }
  .yz-process-wave-cards {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    pointer-events: auto;
  }
  .yz-process-wave-item {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    height: auto;
    width: 100%;
    max-width: 360px;
  }
  .yz-process-wave-item::before {
    display: none;
  }
  .yz-process-wave-trigger {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
  }
  .yz-process-wave-popup {
    position: static;
    transform: none;
    width: 100%;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    padding: 10px 0 0;
    margin-top: 4px;
  }
  .yz-process-wave-popup::before {
    display: none;
  }
}

.yz-hero-grid,
.yz-two-col {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.yz-hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 32px;
}

.yz-hero-panel,
.yz-side-card {
  padding: 32px;
  border: 1px solid #e6edf8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 42, 106, 0.08);
}

.yz-hero-panel strong {
  display: block;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.yz-hero-panel ul {
  list-style: none;
}

.yz-hero-panel li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 14px;
  color: var(--text-secondary);
}

.yz-hero-panel li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

.yz-section {
  padding: 84px 0;
}

@media (prefers-reduced-motion: no-preference) {
  .yz-home-page .yz-scroll-reveal .yz-scroll-title,
  .yz-home-page .yz-scroll-reveal .yz-scroll-content {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity .68s ease,
      transform .68s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
  }

  .yz-home-page .yz-scroll-reveal.is-visible .yz-scroll-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .02s;
  }

  .yz-home-page .yz-scroll-reveal.is-visible .yz-scroll-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--reveal-delay, .16s);
  }
}

.yz-section-soft {
  background: #f6f8fc;
}

.yz-section-head {
  max-width: 760px;
  margin-bottom: 36px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.yz-section-head h2 {
  font-size: 36px;
}

.yz-service-list {
  display: flex;
  flex-direction: column;
  gap: 112px;
}

.yz-service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 576px);
  gap: 80px;
  background: transparent;
}

.yz-service-row.is-reverse {
  grid-template-columns: minmax(0, 576px) minmax(0, 1fr);
}

@media (prefers-reduced-motion: no-preference) {
  .yz-product-page.yz-product-reveal-ready .yz-product-reveal-item {
    opacity: 0;
    transform: translateY(34px);
    transition:
      opacity .72s ease,
      transform .72s cubic-bezier(.22, .61, .36, 1),
      box-shadow var(--transition-normal),
      border-color var(--transition-normal);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }

  .yz-product-page.yz-product-reveal-ready .yz-product-reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

}

/* 交替布局：奇数项（第二、四...）反转左右 */
.yz-service-row.is-reverse .yz-service-content {
  order: 2;
}

.yz-service-row.is-reverse .yz-service-visual {
  order: 1;
}

/* ---- 内容区 ---- */
.yz-service-content {
  position: relative;
  padding: 8px 0 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.yz-service-content > *:not(.yz-service-art):not(.yz-service-index) {
  position: relative;
  z-index: 2;
}

.yz-service-index {
  position: absolute;
  top: -12px;
  right: 0;
  color: rgba(0, 82, 217, 0.05);
  font-size: 58px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.yz-service-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.yz-service-title-row .yz-service-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.yz-service-title-row h3 {
  margin-bottom: 0;
  word-break: break-word;
}

.yz-service-content .yz-service-icon {
  --badge-accent: var(--color-primary);
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #fff;
  font-size: 20px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.yz-service-content .yz-service-icon::before,
.yz-service-content .yz-service-icon::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--badge-accent), #7dd3fc);
  transform: rotate(45deg);
}
.yz-service-content .yz-service-icon::after {
  inset: 11px;
  opacity: 0.42;
  transform: translate(12px, -2px) rotate(45deg);
}
.yz-service-content .yz-service-icon i {
  position: relative;
  z-index: 2;
}

.yz-service-content h3 {
  font-size: 24px;
  margin-bottom: 8px;
  line-height: 1.4;
  color: #1a1a2e;
}

.yz-service-content .yz-service-title-row .yz-service-icon,
.yz-service-content .yz-service-title-row h3 {
  margin-bottom: 0;
}

.yz-service-subtitle {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 14px;
}

.yz-service-desc {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 16px;
  width: 100%;
  max-width: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

.yz-service-content .yz-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 0;
  margin-top: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.yz-service-content .yz-meta-line i {
  color: var(--color-primary);
  margin-right: 8px;
}

.yz-service-content .yz-meta-line strong {
  color: #334155;
  font-weight: 700;
}

.yz-service-content .yz-card-detail-btn {
  align-self: flex-start;
  margin-top: 24px;
}

/* ---- 内容区装饰插画（产品页隐藏以减少视觉杂讯）---- */
.yz-service-art {
  display: none;
}

/* ---- 图片区 —— 独立视觉物体，非填满卡片的半盒 ---- */
.yz-service-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  width: 100%;
  max-width: 576px;
}

/* 隐藏旧版点阵 & 圆弧装饰（产品页） */
.yz-product-page .yz-service-visual::before,
.yz-product-page .yz-service-visual::after {
  display: none;
}

.yz-service-visual img {
  width: 100%;
  height: 400px;
  max-height: 400px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.yz-service-row:hover .yz-service-visual img {
  transform: scale(1.025);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.yz-service-visual-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 400px;
  max-height: 400px;
  aspect-ratio: 36 / 25;
  border-radius: 16px;
  background: #f5f7fb;
  font-size: 72px;
  color: rgba(0, 82, 217, 0.12);
}

.yz-arrow-link,
.yz-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--color-primary);
}

.yz-table-wrap {
  overflow-x: auto;
}

.yz-compare-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e8edf5;
}

.yz-compare-table th,
.yz-compare-table td {
  padding: 18px 20px;
  text-align: left;
}
.yz-compare-table td:first-child,
.yz-compare-table td:last-child {
  white-space: nowrap;
}
.yz-compare-table .yz-service-icon {
  --badge-accent: #2563eb;
  position: relative;
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: #fff;
  font-size: 15px;
  isolation: isolate;
  overflow: visible;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 10px;
}

.yz-compare-table tbody tr:nth-child(3n+2) .yz-service-icon {
  --badge-accent: #0f766e;
}

.yz-compare-table tbody tr:nth-child(3n) .yz-service-icon {
  --badge-accent: #7c3aed;
}

.yz-compare-table .yz-service-icon::before,
.yz-compare-table .yz-service-icon::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--badge-accent), #7dd3fc);
  transform: rotate(45deg);
}

.yz-compare-table .yz-service-icon::before {
  z-index: 0;
}

.yz-compare-table .yz-service-icon::after {
  inset: 12px;
  z-index: 1;
  opacity: 0.42;
  transform: translate(12px, -2px) rotate(45deg);
}

.yz-compare-table .yz-service-icon i {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: inherit;
}

.yz-compare-table thead tr {
  background: linear-gradient(90deg, #409EFF, #1D6FE0);
}
.yz-compare-table th {
  background: transparent;
  color: #fff;
  font-weight: 700;
  font-family: inherit;
}

.yz-compare-table tbody tr:nth-child(even) td {
  background: #fff;
}
.yz-compare-table td {
  border-bottom: 1px solid #d6e4f5;
}
.yz-compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.yz-compare-pill {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 999px;
  background: #409EFF;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.yz-scenario-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.yz-scenario-grid-compact {
  grid-template-columns: repeat(4, 1fr);
}

.yz-scenario-card {
  min-height: 250px;
  padding: 28px;
  border: 1px solid #e8edf5;
  border-radius: 8px;
  background: #fff;
  transition: all var(--transition-normal);
}

.yz-scenario-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(0, 82, 217, 0.09);
}

.yz-scenario-card > i {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #eef5ff;
  color: var(--color-primary);
  font-size: 24px;
  margin-bottom: 22px;
}

.yz-scenario-card span {
  display: inline-block;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.yz-scenario-card h3 {
  font-size: 21px;
}

.yz-scenario-card p {
  color: var(--text-secondary);
  line-height: 1.7;
}

.yz-process-line {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.yz-process-step {
  position: relative;
  padding: 28px 22px;
  border: 1px solid #e8edf5;
  border-radius: 8px;
  background: #fff;
}

.yz-process-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 18px;
}

.yz-process-step > i {
  color: var(--color-primary);
  font-size: 24px;
  margin-bottom: 16px;
}

.yz-process-step h3 {
  font-size: 20px;
}

.yz-process-step p {
  color: var(--text-secondary);
  line-height: 1.7;
}

.yz-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.yz-benefit-grid div {
  padding: 24px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e8edf5;
  font-weight: 700;
}

/* ===== FAQ 折叠面板 ===== */
.yz-faq-list {
  display: grid;
  gap: 12px;
}

.yz-faq-item {
  background: linear-gradient(135deg, #f8faff 0%, #ffffff 100%);
  border: 1px solid #e3eaf5;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.yz-faq-item:hover {
  border-color: #93baf5;
}

.yz-faq-question {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.55;
}

.yz-faq-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.yz-faq-qtext {
  flex: 1;
}

.yz-faq-chevron {
  flex-shrink: 0;
  color: #2563eb;
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.5;
  animation: faq-chevron-pulse 2.5s ease-in-out infinite;
}

@keyframes faq-chevron-pulse {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50%      { opacity: 0.85; transform: translateY(3px); }
}

/* --- 展开状态 --- */
.yz-faq-item.is-open {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

/* --- 答案区 --- */
.yz-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.yz-faq-answer-inner {
  padding: 0 24px 20px 68px;
}

.yz-faq-answer-inner p {
  font-size: 15px;
  line-height: 1.75;
  color: #4b5563;
  margin: 0;
}

/* --- 响应式 --- */
@media (max-width: 576px) {
  .yz-faq-question {
    padding: 16px 16px;
    font-size: 15px;
    gap: 12px;
  }
  .yz-faq-answer-inner {
    padding: 0 16px 16px 56px;
  }
  .yz-faq-answer-inner p {
    font-size: 14px;
  }
}

.yz-detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 36px;
  align-items: start;
}

.yz-detail-content {
  padding: 42px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e8edf5;
}

.yz-detail-side {
  position: sticky;
  top: 100px;
}

.yz-side-card .btn {
  width: 100%;
  margin-top: 12px;
}

.yz-contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 36px;
}

.yz-contact-info,
.yz-contact-form {
  padding: 34px;
  border: 1px solid #cbdcf4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(15, 80, 170, 0.08);
}

.yz-contact-card {
  display: grid;
  grid-template-columns: 28px 72px 1fr;
  column-gap: 26px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #edf1f7;
}

.yz-contact-card-icon {
  --badge-accent: var(--color-primary);
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #fff;
  font-size: 12px;
}
.yz-contact-card-icon::before,
.yz-contact-card-icon::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--badge-accent), #7dd3fc);
  transform: rotate(45deg);
}
.yz-contact-card-icon::after {
  inset: 6px;
  opacity: 0.42;
  transform: translate(7px, -1px) rotate(45deg);
}
.yz-contact-card-icon i {
  position: relative;
  z-index: 2;
}

.yz-contact-card > span:not(.yz-contact-card-icon) {
  color: var(--text-muted);
}

.yz-contact-follow-title {
  font-size: 27px;
  font-weight: 700;
  color: #0052d9;
  margin: 36px 0 0 0;
}

.yz-contact-follow-desc {
  font-size: var(--text-base);
  color: #666;
  margin: 8px 0 0 0;
}

.yz-contact-info h2 {
  font-size: 27px;
  color: #0052d9;
}

.yz-contact-qrs {
  display: flex;
  gap: 22px;
  align-items: stretch;
  margin-top: 16px;
}
.yz-contact-qr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 214px;
  flex: 1;
  padding: 18px;
  border: 1px solid #e8edf5;
  border-radius: 8px;
  background: #f8fbff;
}
.yz-contact-qr-item span {
  font-size: 14px;
  color: #555;
}
.yz-contact-qr {
  width: 150px;
  height: 150px;
  padding: 8px;
  border: 1px solid #e8edf5;
  border-radius: 8px;
  background: #fff;
  object-fit: cover;
}

.yz-contact-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.yz-contact-form .yz-form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.yz-contact-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text-primary);
  font-weight: 700;
}

.yz-contact-form input,
.yz-contact-form textarea {
  width: 100%;
  border: 1px solid #dce4ef;
  border-radius: 8px;
  padding: 13px 14px;
  font: inherit;
  outline: none;
}

.yz-contact-form input:focus,
.yz-contact-form textarea:focus,
.yz-contact-form select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 82, 217, 0.08);
}

.yz-contact-form label.has-error input,
.yz-contact-form label.has-error textarea,
.yz-contact-form label.has-error select {
  color: #b42318 !important;
  border-color: #d92d20 !important;
  background-color: #fff7f7;
}

.yz-contact-form label.has-error input:focus,
.yz-contact-form label.has-error textarea:focus,
.yz-contact-form label.has-error select:focus {
  border-color: #d92d20 !important;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.1);
}

.yz-contact-form label.has-error input.is-flashing,
.yz-contact-form label.has-error textarea.is-flashing,
.yz-contact-form label.has-error select.is-flashing {
  animation: yzPhoneErrorFlash .3s ease-in-out 3;
}

@keyframes yzPhoneErrorFlash {
  0%,
  100% {
    background: #fff7f7;
    box-shadow: 0 0 0 0 rgba(217, 45, 32, 0);
  }

  50% {
    background: #fee2e2;
    box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.14);
  }
}

.yz-field-error {
  display: block;
  min-height: 17px;
  color: #b42318;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  visibility: hidden;
  opacity: 0;
  transition: opacity .16s ease;
}

.yz-contact-form label.has-error .yz-field-error {
  visibility: visible;
  opacity: 1;
}

.yz-contact-form select {
  width: 100%;
  border: 1px solid #dce4ef;
  border-radius: 8px;
  padding: 13px 14px;
  font: inherit;
  font-weight: 400;
  outline: none;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.yz-contact-form textarea::placeholder {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
}

.yz-message-field {
  position: relative;
}

.yz-message-field textarea {
  padding-bottom: 58px;
}

.yz-field-label {
  display: block;
}

.yz-form-full {
  grid-column: 1 / -1;
}

.yz-form-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.yz-form-status {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 10px 24px rgba(15, 80, 170, 0.12);
}

.yz-form-status:empty {
  display: none;
}

.yz-form-status.is-success {
  color: #047857;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.yz-form-status.is-error {
  color: #b42318;
  background: #fff1f0;
  border-color: #fecaca;
}

.yz-contact-form button[disabled] {
  cursor: not-allowed;
  opacity: .72;
}

.yz-cta-band {
  position: relative;
  overflow: hidden;
  padding: 58px 0;
  background: #2458f3;
  color: #fff;
}

.yz-cta-band::before,
.yz-cta-band::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 460px;
  height: 132px;
  border: 34px solid rgba(91, 189, 255, 0.34);
  border-radius: 50%;
  filter: drop-shadow(0 18px 18px rgba(45, 150, 255, 0.18));
}

.yz-cta-band::before {
  left: 34px;
  bottom: -70px;
  border-right-color: transparent;
  transform: rotate(6deg);
}

.yz-cta-band::after {
  right: 54px;
  top: -78px;
  border-left-color: transparent;
  transform: rotate(7deg);
}

.yz-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
}

.yz-cta-band h2,
.yz-cta-band p {
  color: #fff;
  margin-bottom: 8px;
}

.yz-cta-band .btn-primary {
  background: #fff;
  color: #1f3fbf;
  border-color: #fff;
  box-shadow: 0 14px 32px rgba(13, 50, 160, 0.22);
}

.yz-cta-band .btn-primary:hover {
  background: #eef5ff;
  color: #1f3fbf;
  border-color: #eef5ff;
}

.yz-sidebar-contact .contact-item {
  color: var(--text-primary);
}

.yz-sidebar-contact .yz-contact-diagnosis:hover,
.yz-sidebar-contact .yz-contact-phone:hover {
  background: var(--color-primary);
  color: #fff;
}

.yz-phone-popup {
  width: 190px;
  height: auto;
  min-height: 80px;
  justify-content: flex-start;
  padding: 16px 14px;
}

.yz-phone-popup .phone-list {
  font-size: 13px;
  color: var(--text-secondary);
}

.yz-footer-bottom a {
  color: inherit;
}

/* ========== 英智云创首页 Hero ========== */
.yz-home-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  padding: 0;
  background: #080d21;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* 底层径向光晕 */
.yz-hero-backdrop {
  position: absolute;
  inset: -60% 0 -40%;
  background:
    radial-gradient(ellipse 80% 60% at 30% 50%, rgba(0, 82, 217, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 70% at 75% 40%, rgba(0, 229, 255, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 80%, rgba(0, 200, 83, 0.04) 0%, transparent 60%);
  pointer-events: none;
}

/* 网格叠加层 */
.yz-hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 70%);
}

/* 环绕光斑 */
.yz-hero-ambient {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.18;
  pointer-events: none;
}
.yz-hero-ambient-left {
  top: -15%;
  left: -8%;
  background: radial-gradient(circle, rgba(0, 82, 217, 0.6), transparent);
}
.yz-hero-ambient-right {
  bottom: -20%;
  right: -5%;
  background: radial-gradient(circle, rgba(0, 200, 83, 0.35), transparent);
}

.yz-home-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 500px;
  gap: 40px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 36px;
}

/* ---- 左侧文案 ---- */
.yz-kicker-hero {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 14px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 999px;
  color: #111827;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(8px);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.yz-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.yz-badge-tag {
  display: inline-block;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  letter-spacing: 0;
}

.yz-home-hero-copy h1 {
  max-width: 700px;
  font-size: 50px;
  line-height: 1.12;
  margin-bottom: 18px;
  color: #0052d9;
  font-weight: 800;
  letter-spacing: 0;
}

.yz-hero-accent {
  background: linear-gradient(135deg, #00e5ff 0%, #00c853 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.yz-home-hero-copy p {
  max-width: 620px;
  font-size: 20px;
  line-height: 1.72;
  color: #111827;
  margin-bottom: 24px;
}

/* 按钮 */
.yz-hero-actions {
  display: flex;
  gap: 14px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.yz-hero-btn {
  background: linear-gradient(135deg, #0052d9 0%, #0077ff 48%, #003a9f 100%);
  background-size: 160% 160%;
  background-position: 0% 50%;
  border: none;
  padding: 14px 32px;
  font-size: 16px;
  border-radius: 8px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 82, 217, 0.35);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1), background-position 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.yz-hero-btn:hover {
  background-position: 100% 50%;
  box-shadow: 0 10px 30px rgba(0, 82, 217, 0.46), 0 0 0 4px rgba(0, 119, 255, 0.12);
  transform: translateY(-2px);
  color: #fff;
}

.yz-hero-btn-outline {
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #0052d9;
  background: #fff;
  color: #0052d9;
  box-shadow: none;
  transition: border-color 220ms ease, color 220ms ease, background 220ms ease;
}
.yz-hero-btn-outline:hover {
  border-color: #0052d9;
  background: #0052d9;
  color: #fff;
  box-shadow: none;
}

/* 信任证据 */
.yz-hero-proof {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.yz-proof-item {
  min-width: 120px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
  transition: border-color var(--transition-normal);
}
.yz-proof-item:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.yz-proof-item-hl {
  border-color: rgba(0, 229, 255, 0.18);
  background: rgba(0, 229, 255, 0.04);
}

.yz-proof-num {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 2px;
}

.yz-proof-unit {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 229, 255, 0.8);
}

.yz-proof-label {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.48);
  font-weight: 500;
}

/* ---- 右侧仪表盘面板 ---- */
.yz-home-hero-board {
  position: relative;
  width: 100%;
  max-width: 500px;
  justify-self: end;
  padding: 20px;
  border-radius: 8px;
  background: rgba(15, 25, 55, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.yz-home-hero-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.6;
  pointer-events: none;
}

.yz-home-hero-board::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.4), transparent);
  pointer-events: none;
}

/* Board 内部全局层级 */
.yz-board-header,
.yz-board-status-bar,
.yz-board-metrics-row,
.yz-board-flow-viz,
.yz-board-cards {
  position: relative;
  z-index: 1;
}

/* 窗口标题栏 */
.yz-board-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.yz-board-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.yz-board-dot-red    { background: #ff5f56; }
.yz-board-dot-yellow { background: #ffbd2e; }
.yz-board-dot-green  { background: #27c93f; }

.yz-board-header small {
  margin-left: auto;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0;
}

/* 状态栏 */
.yz-board-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 14px;
  border-radius: 6px;
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.12);
}

.yz-status-live {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 229, 255, 0.9);
}

.yz-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
  animation: yz-pulse 2s infinite;
}

@keyframes yz-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(0, 229, 255, 0.5); }
  50%      { opacity: 0.4; box-shadow: 0 0 14px rgba(0, 229, 255, 0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .yz-pulse-dot,
  .yz-board-card,
  .yz-hero-btn,
  .yz-hero-btn-outline,
  .yz-proof-item,
  .yz-flow-step {
    animation: none;
    transition: none;
  }
}

.yz-status-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0;
}

/* 指标卡片行 */
.yz-board-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.yz-board-metric-card {
  padding: 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.yz-metric-val {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 2px;
}

.yz-metric-unit {
  font-size: 13px;
  font-weight: 600;
  color: rgba(0, 229, 255, 0.75);
}

.yz-metric-label {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 6px;
}

.yz-metric-trend {
  font-size: 11px;
  font-weight: 600;
}
.yz-trend-up {
  color: #00c853;
}

/* 流程可视化 */
.yz-board-flow-viz {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 14px;
  padding: 10px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.yz-flow-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
  border-radius: 6px;
  transition: background var(--transition-fast);
  min-width: 0;
}
.yz-flow-step i {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.35);
  transition: color var(--transition-fast);
}
.yz-flow-step span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

.yz-flow-step-active {
  background: rgba(0, 200, 83, 0.1);
}
.yz-flow-step-active i {
  color: rgba(0, 200, 83, 0.8);
}
.yz-flow-step-active span {
  color: rgba(0, 200, 83, 0.85);
  font-weight: 600;
}

.yz-flow-connector {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.yz-flow-connector i {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.15);
}

/* 业务卡片 */
.yz-board-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.yz-board-card {
  min-height: 80px;
  padding: 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-primary);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.yz-board-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.yz-board-card i {
  display: block;
  font-size: 16px;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.yz-board-card strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.yz-board-card em {
  display: block;
  font-size: 12px;
  font-style: normal;
  color: var(--text-secondary);
  line-height: 1.5;
}

.yz-home-intro {
  padding-top: 24px;
  border-bottom: 1px solid #edf1f7;
}

.yz-home-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.yz-home-service-card {
  min-height: 320px;
  padding: 32px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e8edf5;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
}

.yz-home-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 42px rgba(0, 82, 217, 0.1);
  border-color: var(--color-primary);
}

.yz-home-service-card > i {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #eef5ff;
  color: var(--color-primary);
  font-size: 28px;
  margin-bottom: 24px;
}

.yz-home-service-card h3 {
  font-size: 24px;
}

.yz-home-service-card p {
  color: var(--text-secondary);
  line-height: 1.8;
}

.yz-home-service-card span {
  margin-top: auto;
  color: var(--color-primary);
  font-weight: 700;
}

/* ========== 产品中心水平手风琴 ========== */
.yz-product-accordion {
  --yz-pa-motion-duration: 620ms;
  --yz-pa-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --yz-pa-content-ease: cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: row;
  height: 420px;
  gap: 16px;
  align-items: stretch;
  justify-content: center;
}

.yz-product-section-container {
  max-width: calc(1700px + var(--container-padding) + var(--container-padding));
  width: min(100%, calc(1700px + var(--container-padding) + var(--container-padding)));
}

.yz-product-accordion-panel {
  position: relative;
  flex: 0 0 200px;
  border-radius: 8px;
  overflow: hidden;
  background-image:
    linear-gradient(to bottom, rgba(0, 57, 166, 0.98) 0%, rgba(0, 82, 217, 0.88) 34%, rgba(0, 82, 217, 0.38) 100%),
    var(--product-image, none),
    linear-gradient(160deg, #0052d9 0%, #1f6cf0 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  border: 1px solid rgba(0, 82, 217, 0.12);
  cursor: default;
  transition: flex var(--yz-pa-motion-duration) var(--yz-pa-motion-ease),
              background var(--yz-pa-motion-duration) var(--yz-pa-motion-ease),
              transform var(--yz-pa-motion-duration) var(--yz-pa-motion-ease),
              box-shadow var(--yz-pa-motion-duration) var(--yz-pa-motion-ease),
              border-color var(--yz-pa-motion-duration) var(--yz-pa-motion-ease);
}

.yz-product-accordion-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.02));
  pointer-events: none;
}

.yz-product-accordion-panel:nth-child(1),
.yz-product-accordion-panel:nth-child(4) {
  background-image:
    linear-gradient(to bottom, rgba(15, 36, 84, 0.98) 0%, rgba(37, 71, 150, 0.9) 34%, rgba(37, 71, 150, 0.38) 100%),
    var(--product-image, none),
    linear-gradient(160deg, #0f2454 0%, #254796 100%);
}

.yz-product-accordion-panel:nth-child(3) {
  background-image:
    linear-gradient(to bottom, rgba(0, 128, 135, 0.98) 0%, rgba(3, 174, 189, 0.88) 34%, rgba(3, 174, 189, 0.38) 100%),
    var(--product-image, none),
    linear-gradient(160deg, #03aebd 0%, #20c9b7 100%);
}

.yz-product-accordion-panel:nth-child(6) {
  background-image:
    linear-gradient(to bottom, rgba(0, 128, 135, 0.98) 0%, rgba(3, 174, 189, 0.88) 34%, rgba(3, 174, 189, 0.38) 100%),
    var(--product-image, none),
    linear-gradient(160deg, #03aebd 0%, #20c9b7 100%);
}

/* Default state: first panel expanded. .is-interacting guard: skip when JS is managing state. */
.yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded {
  flex: 0 1 620px;
  background-image:
    linear-gradient(to right, rgba(15, 36, 84, 0.98) 0%, rgba(37, 71, 150, 0.92) 42%, rgba(37, 71, 150, 0.18) 100%),
    var(--product-image, none),
    linear-gradient(160deg, #0f2454 0%, #254796 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  border-color: #254796;
  box-shadow: 0 16px 42px rgba(15, 36, 84, 0.18);
}

.yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded:nth-child(2),
.yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded:nth-child(5) {
  flex: 0 1 620px;
  background-image:
    linear-gradient(to right, rgba(0, 57, 166, 0.98) 0%, rgba(0, 82, 217, 0.92) 42%, rgba(0, 82, 217, 0.18) 100%),
    var(--product-image, none),
    linear-gradient(160deg, #0052d9 0%, #1f6cf0 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  border-color: var(--color-primary);
  box-shadow: 0 16px 42px rgba(0, 82, 217, 0.15);
}

.yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded:nth-child(3),
.yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded:nth-child(6) {
  flex: 0 1 620px;
  background-image:
    linear-gradient(to right, rgba(0, 92, 112, 0.98) 0%, rgba(0, 148, 168, 0.94) 42%, rgba(3, 174, 189, 0.22) 100%),
    var(--product-image, none),
    linear-gradient(135deg, #03aebd 0%, #20c9b7 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  border-color: #03aebd;
  box-shadow: 0 16px 42px rgba(3, 174, 189, 0.18);
}

/* Container hover: all panels collapse. Guarded: skip when JS is managing active panel. */
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel {
  flex: 0 0 200px;
}

/* Container hover + panel 1 hover: expand (Indigo). Guarded + no transform to prevent jitter. */
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:nth-child(1):hover {
  flex: 0 1 620px;
  background-image:
    linear-gradient(to right, rgba(15, 36, 84, 0.98) 0%, rgba(37, 71, 150, 0.92) 42%, rgba(37, 71, 150, 0.18) 100%),
    var(--product-image, none),
    linear-gradient(160deg, #0f2454 0%, #254796 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  box-shadow: 0 16px 42px rgba(15, 36, 84, 0.18);
  border-color: #254796;
}

/* Container hover + panel 2 hover: expand (Blue). Guarded + no transform to prevent jitter. */
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:nth-child(2):hover {
  flex: 0 1 620px;
  background-image:
    linear-gradient(to right, rgba(0, 57, 166, 0.98) 0%, rgba(0, 82, 217, 0.92) 42%, rgba(0, 82, 217, 0.18) 100%),
    var(--product-image, none),
    linear-gradient(160deg, #0052d9 0%, #1f6cf0 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  box-shadow: 0 16px 42px rgba(0, 82, 217, 0.15);
  border-color: var(--color-primary);
}

/* Container hover + panel 3 hover: expand (Teal). Guarded + no transform to prevent jitter. */
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:nth-child(3):hover {
  flex: 0 1 620px;
  background-image:
    linear-gradient(to right, rgba(0, 92, 112, 0.98) 0%, rgba(0, 148, 168, 0.94) 42%, rgba(3, 174, 189, 0.22) 100%),
    var(--product-image, none),
    linear-gradient(135deg, #03aebd 0%, #20c9b7 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  box-shadow: 0 16px 42px rgba(3, 174, 189, 0.18);
  border-color: #03aebd;
}

/* Container hover + panel 4 hover: repeat panel 1 color. Guarded + no transform to prevent jitter. */
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:nth-child(4):hover {
  flex: 0 1 620px;
  background-image:
    linear-gradient(to right, rgba(15, 36, 84, 0.98) 0%, rgba(37, 71, 150, 0.92) 42%, rgba(37, 71, 150, 0.18) 100%),
    var(--product-image, none),
    linear-gradient(160deg, #0f2454 0%, #254796 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  box-shadow: 0 16px 42px rgba(15, 36, 84, 0.18);
  border-color: #254796;
}

/* Container hover + panel 5 hover: repeat panel 2 color. */
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:nth-child(5):hover {
  flex: 0 1 620px;
  background-image:
    linear-gradient(to right, rgba(0, 57, 166, 0.98) 0%, rgba(0, 82, 217, 0.92) 42%, rgba(0, 82, 217, 0.18) 100%),
    var(--product-image, none),
    linear-gradient(160deg, #0052d9 0%, #1f6cf0 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  box-shadow: 0 16px 42px rgba(0, 82, 217, 0.15);
  border-color: var(--color-primary);
}

/* Container hover + panel 6 hover: repeat panel 3 color. */
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:nth-child(6):hover {
  flex: 0 1 620px;
  background-image:
    linear-gradient(to right, rgba(0, 92, 112, 0.98) 0%, rgba(0, 148, 168, 0.94) 42%, rgba(3, 174, 189, 0.22) 100%),
    var(--product-image, none),
    linear-gradient(135deg, #03aebd 0%, #20c9b7 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  box-shadow: 0 16px 42px rgba(3, 174, 189, 0.18);
  border-color: #03aebd;
}

/* JS active state — when .is-interacting is on the container, the :has(:hover)
   rules above are silenced by :not(.is-interacting) guards. The rules below
   manage expansion via .is-active with box-shadow feedback (no transform). */

.yz-product-accordion.is-interacting > .yz-product-accordion-panel {
  flex: 0 0 200px;
}

.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active:nth-child(1) {
  flex: 0 1 620px;
  background-image:
    linear-gradient(to right, rgba(15, 36, 84, 0.98) 0%, rgba(37, 71, 150, 0.92) 42%, rgba(37, 71, 150, 0.18) 100%),
    var(--product-image, none),
    linear-gradient(160deg, #0f2454 0%, #254796 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  box-shadow: 0 16px 42px rgba(15, 36, 84, 0.18);
  border-color: #254796;
}

.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active:nth-child(2) {
  flex: 0 1 620px;
  background-image:
    linear-gradient(to right, rgba(0, 57, 166, 0.98) 0%, rgba(0, 82, 217, 0.92) 42%, rgba(0, 82, 217, 0.18) 100%),
    var(--product-image, none),
    linear-gradient(160deg, #0052d9 0%, #1f6cf0 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  box-shadow: 0 16px 42px rgba(0, 82, 217, 0.15);
  border-color: var(--color-primary);
}

.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active:nth-child(3) {
  flex: 0 1 620px;
  background-image:
    linear-gradient(to right, rgba(0, 92, 112, 0.98) 0%, rgba(0, 148, 168, 0.94) 42%, rgba(3, 174, 189, 0.22) 100%),
    var(--product-image, none),
    linear-gradient(135deg, #03aebd 0%, #20c9b7 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  box-shadow: 0 16px 42px rgba(3, 174, 189, 0.18);
  border-color: #03aebd;
}

.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active:nth-child(4) {
  flex: 0 1 620px;
  background-image:
    linear-gradient(to right, rgba(15, 36, 84, 0.98) 0%, rgba(37, 71, 150, 0.92) 42%, rgba(37, 71, 150, 0.18) 100%),
    var(--product-image, none),
    linear-gradient(160deg, #0f2454 0%, #254796 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  box-shadow: 0 16px 42px rgba(15, 36, 84, 0.18);
  border-color: #254796;
}

.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active:nth-child(5) {
  flex: 0 1 620px;
  background-image:
    linear-gradient(to right, rgba(0, 57, 166, 0.98) 0%, rgba(0, 82, 217, 0.92) 42%, rgba(0, 82, 217, 0.18) 100%),
    var(--product-image, none),
    linear-gradient(160deg, #0052d9 0%, #1f6cf0 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  box-shadow: 0 16px 42px rgba(0, 82, 217, 0.15);
  border-color: var(--color-primary);
}

.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active:nth-child(6) {
  flex: 0 1 620px;
  background-image:
    linear-gradient(to right, rgba(0, 92, 112, 0.98) 0%, rgba(0, 148, 168, 0.94) 42%, rgba(3, 174, 189, 0.22) 100%),
    var(--product-image, none),
    linear-gradient(135deg, #03aebd 0%, #20c9b7 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  box-shadow: 0 16px 42px rgba(3, 174, 189, 0.18);
  border-color: #03aebd;
}

/* Accordion content; only the button link navigates. */
.yz-pa-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  padding: 28px 24px;
  color: #fff;
  text-decoration: none;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded .yz-pa-item,
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:hover .yz-pa-item,
.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active .yz-pa-item {
  color: #fff;
}

/* Icon */
.yz-pa-icon {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #fff;
  font-size: 20px;
  margin-bottom: 22px;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.yz-pa-icon::before,
.yz-pa-icon::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.06));
  transform: rotate(45deg);
}
.yz-pa-icon::after {
  inset: 11px;
  opacity: 0.5;
  transform: translate(12px, -2px) rotate(45deg);
}
.yz-pa-icon i {
  position: relative;
  z-index: 2;
}

.yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded .yz-pa-icon,
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:hover .yz-pa-icon,
.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active .yz-pa-icon {
  /* diamond badge keeps its own look in expanded state */
}

/* Body (hidden when collapsed via overflow + opacity) */
.yz-pa-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  opacity: 1;
  width: 100%;
  transition: opacity 420ms var(--yz-pa-content-ease);
}

.yz-pa-body h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.35;
  color: currentColor;
  transform: translate3d(0, 0, 0);
  transform-origin: left center;
  max-width: 100%;
  transition:
    transform var(--yz-pa-motion-duration) var(--yz-pa-motion-ease),
    max-width var(--yz-pa-motion-duration) var(--yz-pa-motion-ease);
  will-change: transform;
}

@media (min-width: 993px) {
  .yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded .yz-pa-body h3,
  .yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:hover .yz-pa-body h3,
  .yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active .yz-pa-body h3 {
    max-width: calc(100% - 72px);
    transform: translate3d(64px, -55px, 0);
  }
}

.yz-pa-body p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.7;
  margin-top: 0;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition:
    color 420ms var(--yz-pa-content-ease),
    margin-top var(--yz-pa-motion-duration) var(--yz-pa-motion-ease);
}

.yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded .yz-pa-body p,
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:hover .yz-pa-body p,
.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active .yz-pa-body p {
  color: rgba(255, 255, 255, 0.82);
  -webkit-line-clamp: unset;
}

@media (min-width: 993px) {
  .yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded .yz-pa-body p,
  .yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:hover .yz-pa-body p,
  .yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active .yz-pa-body p {
    margin-top: -40px;
  }
}

.yz-pa-meta {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 8px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 320ms var(--yz-pa-content-ease), max-height 520ms var(--yz-pa-motion-ease);
}

.yz-pa-meta strong {
  color: var(--text-primary);
}

.yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded .yz-pa-meta,
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:hover .yz-pa-meta,
.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active .yz-pa-meta {
  opacity: 1;
  max-height: 48px;
  color: rgba(255, 255, 255, 0.78);
  transition-delay: 90ms, 0ms;
}

.yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded .yz-pa-meta strong,
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:hover .yz-pa-meta strong,
.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active .yz-pa-meta strong {
  color: #fff;
}

.yz-pa-extra {
  margin-top: 8px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 320ms var(--yz-pa-content-ease), max-height 520ms var(--yz-pa-motion-ease);
}

.yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded .yz-pa-extra,
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:hover .yz-pa-extra,
.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active .yz-pa-extra {
  opacity: 1;
  max-height: 180px;
  transition-delay: 80ms, 0ms;
}

.yz-pa-detail {
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.yz-pa-detail strong {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.yz-pa-detail span {
  color: rgba(255, 255, 255, 0.82);
}

.yz-pa-feature-list {
  display: grid;
  row-gap: 7px;
  justify-content: start;
}

.yz-pa-feature-row {
  display: flex;
  align-items: center;
  gap: 30px;
}

.yz-pa-feature-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  line-height: 1.45;
}

.yz-pa-feature-list i {
  color: #fff;
  font-size: 13px;
}

.yz-card-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 8px;
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  cursor: pointer;
}

.yz-card-detail-btn:hover {
  background: var(--color-primary);
  color: #fff !important;
  border-color: var(--color-primary);
}

.yz-pa-btn {
  align-self: flex-start;
  margin-top: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms var(--yz-pa-content-ease), transform 420ms var(--yz-pa-content-ease), background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded .yz-pa-btn,
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:hover .yz-pa-btn,
.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active .yz-pa-btn {
  opacity: 1;
  transform: translateY(0);
  color: #0052d9;
  transition-delay: 130ms, 90ms, 0ms, 0ms, 0ms;
}

.yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded .yz-pa-item,
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:nth-child(1):hover .yz-pa-item,
.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active:nth-child(1) .yz-pa-item {
  color: #fff;
}

.yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded .yz-pa-body p,
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:nth-child(1):hover .yz-pa-body p,
.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active:nth-child(1) .yz-pa-body p,
.yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded .yz-pa-meta,
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:nth-child(1):hover .yz-pa-meta,
.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active:nth-child(1) .yz-pa-meta {
  color: rgba(255, 255, 255, 0.82);
}

.yz-product-accordion:not(.is-interacting):not(:has(> .yz-product-accordion-panel:hover)) > .yz-product-accordion-panel.is-expanded .yz-pa-meta strong,
.yz-product-accordion:not(.is-interacting):has(> .yz-product-accordion-panel:hover) > .yz-product-accordion-panel:nth-child(1):hover .yz-pa-meta strong,
.yz-product-accordion.is-interacting > .yz-product-accordion-panel.is-active:nth-child(1) .yz-pa-meta strong {
  color: #fff;
}

.yz-home-solutions-section {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.yz-home-solutions-section .container {
  position: relative;
  z-index: 1;
}

/* ========== 首页解决方案 - Tab 式布局 ========== */

/* Tab 栏 */
.yz-solution-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 28px;
}

.yz-solution-tab {
  padding: 10px 22px;
  border: 1px solid #dfe6f0;
  border-radius: 8px;
  background: #f8fafd;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  font-family: inherit;
}

.yz-solution-tab:hover {
  border-color: #b8cef0;
  color: var(--color-primary);
  background: #eef5ff;
}

.yz-solution-tab.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,82,217,.18);
}

/* 主体大卡片 - 左右分栏 */
.yz-solution-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #f3f7fd 0%, #f6f9fe 48%, #eef7f7 100%);
  overflow: hidden;
  box-shadow: 0 2px 24px rgba(0,42,106,.06);
  min-height: 380px;
  margin-bottom: 24px;
}

/* 左侧内容面板 */
.yz-solution-main-left {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.yz-solution-main-panel {
  display: none;
  animation: yz-sol-fadein .45s ease both;
}

.yz-solution-main-panel.active {
  display: block;
}

@keyframes yz-sol-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.yz-solution-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.yz-solution-badge-cat,
.yz-solution-badge-sub {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.yz-solution-badge-cat {
  background: rgba(0,82,217,.08);
  color: var(--color-primary);
}

.yz-solution-badge-sub {
  background: rgba(35,210,195,.1);
  color: #14a89d;
}

.yz-solution-main-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 14px;
  line-height: 1.35;
}

.yz-solution-main-desc {
  display: -webkit-box;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.8;
  min-height: 81px;
  margin-bottom: 22px;
  max-width: 440px;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.yz-solution-main-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 8px;
  border: 1px solid var(--color-primary);
  background: #fff;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.yz-solution-main-cta:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* 右侧能力图区域 */
.yz-solution-main-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.yz-solution-capability {
  width: 100%;
}

.yz-solution-capability-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* 视觉面板切换（每个方案独立一个可视化 panel） */
.yz-solution-visual {
  display: none;
  width: 100%;
  max-width: 380px;
}
.yz-solution-visual.active {
  display: block;
}

.yz-solution-visual[data-template="2"] {
  max-width: 540px;
  min-height: 316px;
}

.yz-solution-visual[data-template="2"].active {
  display: flex;
  align-items: center;
}

@media (min-width: 993px) {
  .yz-solution-main-right:has(.yz-solution-visual.active[data-template="1"]) {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .yz-solution-visual[data-template="1"] {
    max-width: 430px;
  }
}

.yz-solution-visual[data-template="3"] {
  max-width: 520px;
}

/* 中心胶囊 */
.yz-cap-center-rect {
  fill: var(--color-primary);
  transform-origin: 210px 190px;
  opacity: 0;
}

.yz-solution-capability.animating .yz-cap-center-rect {
  animation: yz-cap-center-in .55s .05s ease both;
}

@keyframes yz-cap-center-in {
  0% { opacity: 0; transform: scale(0.7) rotate(0deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.yz-cap-center-text {
  fill: #fff;
  font-size: 13px;
  font-weight: 800;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  opacity: 0;
}

.yz-solution-capability.animating .yz-cap-center-text {
  animation: yz-cap-fade-in .45s .3s ease both;
}

/* 轨道环 */
.yz-cap-orbit {
  fill: none;
  stroke: rgba(0,82,217,.13);
  stroke-width: 1.5;
  stroke-dasharray: 8 5;
  opacity: 0;
}

.yz-solution-capability.animating .yz-cap-orbit {
  animation: yz-cap-orbit-in 1s .12s ease both;
}

@keyframes yz-cap-orbit-in {
  0% { stroke-dashoffset: 600; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* 连线 */
.yz-cap-link {
  stroke: rgba(0,82,217,.16);
  stroke-width: 1.2;
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  opacity: 0;
}

.yz-solution-capability.animating .yz-cap-link {
  animation: yz-cap-link-draw .55s ease both;
}

.yz-cap-link-1 { animation-delay: .28s !important; }
.yz-cap-link-2 { animation-delay: .34s !important; }
.yz-cap-link-3 { animation-delay: .40s !important; }
.yz-cap-link-4 { animation-delay: .46s !important; }
.yz-cap-link-5 { animation-delay: .52s !important; }
.yz-cap-link-6 { animation-delay: .58s !important; }

@keyframes yz-cap-link-draw {
  0% { stroke-dashoffset: 130; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* 节点 */
.yz-cap-node-ring {
  fill: #fff;
  stroke: var(--color-primary);
  stroke-width: 2;
  opacity: 0;
  transform-origin: 0 0;
}

.yz-cap-node-dot {
  fill: var(--color-primary);
  opacity: 0;
  transform-origin: 0 0;
}

.yz-cap-node text {
  fill: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  opacity: 0;
}

.yz-solution-capability.animating .yz-cap-node-ring {
  animation: yz-cap-node-pop .45s ease both;
}

.yz-solution-capability.animating .yz-cap-node-dot {
  animation: yz-cap-dot-blink 1.35s ease-in-out infinite both;
}

.yz-solution-capability.animating .yz-cap-node text {
  animation: yz-cap-fade-in .45s ease both;
}

.yz-solution-capability.animating .yz-cap-node-1 .yz-cap-node-ring { animation-delay: .45s; }
.yz-solution-capability.animating .yz-cap-node-2 .yz-cap-node-ring { animation-delay: .54s; }
.yz-solution-capability.animating .yz-cap-node-3 .yz-cap-node-ring { animation-delay: .63s; }
.yz-solution-capability.animating .yz-cap-node-4 .yz-cap-node-ring { animation-delay: .72s; }
.yz-solution-capability.animating .yz-cap-node-5 .yz-cap-node-ring { animation-delay: .81s; }
.yz-solution-capability.animating .yz-cap-node-6 .yz-cap-node-ring { animation-delay: .90s; }

.yz-solution-capability.animating .yz-cap-node-1 .yz-cap-node-dot { animation-delay: .75s; }
.yz-solution-capability.animating .yz-cap-node-2 .yz-cap-node-dot { animation-delay: .84s; }
.yz-solution-capability.animating .yz-cap-node-3 .yz-cap-node-dot { animation-delay: .93s; }
.yz-solution-capability.animating .yz-cap-node-4 .yz-cap-node-dot { animation-delay: 1.02s; }
.yz-solution-capability.animating .yz-cap-node-5 .yz-cap-node-dot { animation-delay: 1.11s; }
.yz-solution-capability.animating .yz-cap-node-6 .yz-cap-node-dot { animation-delay: 1.20s; }

.yz-solution-capability.animating .yz-cap-node-1 text { animation-delay: .54s; }
.yz-solution-capability.animating .yz-cap-node-2 text { animation-delay: .63s; }
.yz-solution-capability.animating .yz-cap-node-3 text { animation-delay: .72s; }
.yz-solution-capability.animating .yz-cap-node-4 text { animation-delay: .81s; }
.yz-solution-capability.animating .yz-cap-node-5 text { animation-delay: .90s; }
.yz-solution-capability.animating .yz-cap-node-6 text { animation-delay: .99s; }

@keyframes yz-cap-node-pop {
  0% { opacity: 0; transform: translate(0, 0) scale(0); }
  55% { opacity: 1; transform: translate(0, 0) scale(1.18); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes yz-cap-dot-blink {
  0%, 100% { opacity: .35; }
  45% { opacity: 1; }
}

@keyframes yz-cap-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 底部双卡片：行业方案 + 领域方案 */
.yz-solution-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 8px;
}

.yz-solution-sub {
  border-radius: 12px;
  padding: 24px 28px;
  min-height: 148px;
  background: linear-gradient(135deg, #f3f7fd 0%, #edf4fe 50%, #f1f7f8 100%);
  border: 1px solid rgba(0,82,217,.07);
  transition: box-shadow .3s ease;
  display: none;
}

.yz-solution-sub.active {
  display: block;
}

.yz-solution-sub:hover {
  box-shadow: 0 8px 28px rgba(0,42,106,.08);
}

.yz-solution-sub-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.yz-solution-sub-header .yz-solution-sub-icon {
  --badge-accent: var(--color-primary);
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  color: #fff;
  font-size: 16px;
}
.yz-solution-sub-header .yz-solution-sub-icon::before,
.yz-solution-sub-header .yz-solution-sub-icon::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--badge-accent), #7dd3fc);
  transform: rotate(45deg);
}
.yz-solution-sub-header .yz-solution-sub-icon::after {
  inset: 9px;
  opacity: 0.42;
  transform: translate(10px, -2px) rotate(45deg);
}
.yz-solution-sub-header .yz-solution-sub-icon i {
  position: relative;
  z-index: 2;
}

.yz-solution-sub-header h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.yz-solution-sub-tag {
  font-size: 11px;
  font-weight: 600;
  color: #8ca3c7;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-left: auto;
}

.yz-solution-sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.yz-solution-sub-list li {
  display: inline-flex;
}

.yz-solution-sub-label {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid rgba(0,82,217,.1);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s ease;
  cursor: pointer;
}

.yz-solution-sub-label:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: #eef5ff;
}

.yz-solution-sub-empty {
  color: var(--text-muted);
  font-size: 14px;
  padding: 6px 0;
  line-height: 1.6;
}

/* fallback */
.yz-solution-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: 15px;
}

/* ==========================================
   模板2：三层能力支撑架构图 (Layered Flow)
   ========================================== */
.yz-flow-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.yz-flow-layer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 11px 16px;
  border: 2px solid rgba(0, 82, 217, 0.42);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 16px 32px rgba(0, 82, 217, 0.08);
  opacity: 0;
  transform: translateY(14px);
}

.yz-flow-layer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.yz-flow-layer-head i {
  font-size: 18px;
}

.yz-flow-layer-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.yz-flow-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  background: rgba(245, 247, 250, 0.95);
  color: #4b5563;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
}

.yz-flow-support {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 36px;
  margin: -2px auto;
  opacity: 0;
}

.yz-flow-support::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 18px solid rgba(0, 82, 217, 0.14);
}

.yz-flow-support span {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0052d9, #3385ff);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 16px rgba(0, 82, 217, 0.2);
}

.yz-flow-stack.animating .yz-flow-layer {
  animation: yz-flow-layer-in .48s ease both;
}

.yz-flow-stack.animating .yz-flow-layer-3 { animation-delay: .04s; }
.yz-flow-stack.animating .yz-flow-support-2 { animation: yz-flow-support-in .38s .24s ease both; }
.yz-flow-stack.animating .yz-flow-layer-2 { animation-delay: .38s; }
.yz-flow-stack.animating .yz-flow-support-1 { animation: yz-flow-support-in .38s .58s ease both; }
.yz-flow-stack.animating .yz-flow-layer-1 { animation-delay: .72s; }

.yz-flow-stack.animating .yz-flow-chip {
  animation: yz-flow-chip-in .36s ease both;
}

.yz-flow-stack.animating .yz-flow-layer-3 .yz-flow-chip:nth-child(1) { animation-delay: .18s; }
.yz-flow-stack.animating .yz-flow-layer-3 .yz-flow-chip:nth-child(2) { animation-delay: .24s; }
.yz-flow-stack.animating .yz-flow-layer-3 .yz-flow-chip:nth-child(3) { animation-delay: .30s; }
.yz-flow-stack.animating .yz-flow-layer-3 .yz-flow-chip:nth-child(4) { animation-delay: .36s; }
.yz-flow-stack.animating .yz-flow-layer-2 .yz-flow-chip:nth-child(1) { animation-delay: .52s; }
.yz-flow-stack.animating .yz-flow-layer-2 .yz-flow-chip:nth-child(2) { animation-delay: .58s; }
.yz-flow-stack.animating .yz-flow-layer-2 .yz-flow-chip:nth-child(3) { animation-delay: .64s; }
.yz-flow-stack.animating .yz-flow-layer-2 .yz-flow-chip:nth-child(4) { animation-delay: .70s; }
.yz-flow-stack.animating .yz-flow-layer-1 .yz-flow-chip:nth-child(1) { animation-delay: .86s; }
.yz-flow-stack.animating .yz-flow-layer-1 .yz-flow-chip:nth-child(2) { animation-delay: .92s; }
.yz-flow-stack.animating .yz-flow-layer-1 .yz-flow-chip:nth-child(3) { animation-delay: .98s; }
.yz-flow-stack.animating .yz-flow-layer-1 .yz-flow-chip:nth-child(4) { animation-delay: 1.04s; }

@keyframes yz-flow-layer-in {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes yz-flow-support-in {
  0% { opacity: 0; transform: translateY(10px) scale(0.88); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes yz-flow-chip-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   模板3：平台能力布局图 (Platform Capability)
   ========================================== */
.yz-platform-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 顶部胶囊标签 */
.yz-platform-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  opacity: 0;
  transform: translateY(-6px);
}

.yz-platform-pill-text {
  display: inline-block;
  background: linear-gradient(135deg, #dceaff, #eef4ff);
  border: 1.5px solid rgba(0,82,217,.25);
  border-radius: 24px;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: .6px;
  box-shadow: 0 2px 10px rgba(0,82,217,.12), 0 1px 3px rgba(0,82,217,.06);
}

.yz-platform-arrow {
  color: rgba(0,82,217,.5);
  margin-top: 0;
}

/* 三张能力卡片行 */
.yz-platform-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 100%;
}

.yz-platform-card {
  background: #fff;
  border: 1px solid rgba(0,82,217,.1);
  border-radius: 16px;
  padding: 26px 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  box-shadow: 0 4px 22px rgba(0,82,217,.07), 0 2px 6px rgba(0,0,0,.05);
  transition: box-shadow .3s, transform .3s, border-color .3s;
  opacity: 0;
  transform: translateY(10px);
}

.yz-platform-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,82,217,.11), 0 3px 10px rgba(0,0,0,.07);
  border-color: rgba(0,82,217,.2);
}

/* 小彩色图标徽章 */
.yz-platform-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pc-icon-bg, rgba(0,82,217,.08));
  color: var(--pc-icon-color, var(--color-primary));
  font-size: 20px;
  flex-shrink: 0;
}

.yz-platform-card-heading {
  display: block;
  min-height: 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  text-align: center;
}

/* 检查清单圆角 chips */
.yz-platform-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.yz-platform-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 calc(50% - 4px);
  background: #f5f8fd;
  border: 1px solid rgba(0,82,217,.08);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.4;
}

.yz-platform-chip i {
  font-size: 12px;
  color: rgba(0,82,217,.5);
  flex-shrink: 0;
}

/* ---------- 动画 ---------- */
.yz-platform-wrap.animating .yz-platform-pill {
  animation: yz-platform-pill-in .45s ease both;
}

.yz-platform-wrap.animating .yz-platform-card {
  animation: yz-platform-card-in .45s ease both;
}

.yz-platform-wrap.animating .yz-platform-card-1 { animation-delay: .18s; }
.yz-platform-wrap.animating .yz-platform-card-2 { animation-delay: .28s; }
.yz-platform-wrap.animating .yz-platform-card-3 { animation-delay: .38s; }

.yz-platform-wrap.animating .yz-platform-chip {
  opacity: 0;
  animation: yz-platform-chip-in .35s ease both;
}

.yz-platform-wrap.animating .yz-platform-card-1 .yz-platform-chip:nth-child(1) { animation-delay: .32s; }
.yz-platform-wrap.animating .yz-platform-card-1 .yz-platform-chip:nth-child(2) { animation-delay: .38s; }
.yz-platform-wrap.animating .yz-platform-card-1 .yz-platform-chip:nth-child(3) { animation-delay: .44s; }
.yz-platform-wrap.animating .yz-platform-card-2 .yz-platform-chip:nth-child(1) { animation-delay: .42s; }
.yz-platform-wrap.animating .yz-platform-card-2 .yz-platform-chip:nth-child(2) { animation-delay: .48s; }
.yz-platform-wrap.animating .yz-platform-card-2 .yz-platform-chip:nth-child(3) { animation-delay: .54s; }
.yz-platform-wrap.animating .yz-platform-card-3 .yz-platform-chip:nth-child(1) { animation-delay: .52s; }
.yz-platform-wrap.animating .yz-platform-card-3 .yz-platform-chip:nth-child(2) { animation-delay: .58s; }
.yz-platform-wrap.animating .yz-platform-card-3 .yz-platform-chip:nth-child(3) { animation-delay: .64s; }

@keyframes yz-platform-pill-in {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes yz-platform-card-in {
  0%   { opacity: 0; transform: translateY(10px) scale(.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes yz-platform-chip-in {
  0%   { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 1; transform: translateX(0); }
}

.yz-home-process-section .container {
  position: relative;
  z-index: 1;
  max-width: 1760px;
}

.yz-home-scenario-strip {
  --solution-card-width: 260px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, var(--solution-card-width)));
  justify-content: center;
  gap: 20px;
  max-width: calc(var(--solution-card-width) * 6 + 20px * 5);
  margin: 0 auto;
}

.yz-home-scenario-card {
  position: relative;
  min-height: 318px;
  padding: 28px 24px 30px;
  border: 1px solid rgba(0, 82, 217, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.92)),
    radial-gradient(circle at 18% 0%, rgba(0, 82, 217, 0.14), transparent 32%);
  box-shadow: 0 18px 46px rgba(15, 35, 80, 0.06);
  overflow: hidden;
  transition: transform 0.38s ease, box-shadow 0.38s ease, border-color 0.38s ease;
}

.yz-home-scenario-card:nth-child(2),
.yz-home-scenario-card:nth-child(5) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.92)),
    radial-gradient(circle at 18% 0%, rgba(0, 152, 255, 0.16), transparent 34%);
}

.yz-home-scenario-card:nth-child(3),
.yz-home-scenario-card:nth-child(6) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 253, 252, 0.92)),
    radial-gradient(circle at 18% 0%, rgba(35, 210, 195, 0.18), transparent 34%);
}

.yz-home-scenario-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #0052d9, #23d2c3);
}

.yz-home-scenario-card::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -56px;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  border: 1px solid rgba(0, 82, 217, 0.1);
  background: rgba(255, 255, 255, 0.45);
  transition: transform 0.38s ease;
}

.yz-home-scenario-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 82, 217, 0.22);
  box-shadow: 0 26px 58px rgba(15, 35, 80, 0.13);
}

.yz-home-scenario-card:hover::after {
  transform: scale(1.18);
}

.yz-home-scenario-card b {
  position: absolute;
  top: 24px;
  right: 24px;
  color: rgba(0, 82, 217, 0.12);
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
}

.yz-home-scenario-card i {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #eef5ff, #ffffff);
  color: var(--color-primary);
  box-shadow: 0 12px 28px rgba(0, 82, 217, 0.1);
  font-size: 23px;
  margin-bottom: 28px;
}

.yz-home-scenario-card span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--color-primary);
  background: rgba(0, 82, 217, 0.08);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}

.yz-home-scenario-card h3 {
  position: relative;
  z-index: 1;
  font-size: 21px;
  line-height: 1.35;
  margin-bottom: 14px;
}

.yz-home-scenario-card p {
  position: relative;
  z-index: 1;
  color: var(--text-secondary);
  line-height: 1.78;
}

.yz-home-process-card {
  height: 384px;
  min-height: 384px;
  padding: 30px 24px 128px;
}

.yz-home-process-card > span {
  position: absolute;
  top: 26px;
  right: 24px;
  z-index: 2;
  min-height: 30px;
  padding: 0 13px;
  margin: 0;
  border: 1px solid rgba(0, 82, 217, 0.14);
  background: rgba(0, 82, 217, 0.08);
}

.yz-home-process-card > h3 {
  max-width: calc(100% - 82px);
  margin-top: 0;
  margin-bottom: 18px;
  font-size: 22px;
}

.yz-home-process-card > p {
  display: -webkit-box;
  margin-top: 44px;
  padding-right: 4px;
  overflow: hidden;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.yz-home-process-art {
  position: absolute;
  left: 20px;
  bottom: 16px;
  z-index: 1;
  width: 126px;
  max-width: 48%;
  pointer-events: none;
  object-fit: cover;
  transition: transform 0.38s ease, opacity 0.38s ease, filter 0.38s ease;
}

.yz-home-process-card:hover {
  background:
    linear-gradient(135deg, #0052d9 0%, #0875ff 52%, #23a7ff 100%);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 28px 66px rgba(0, 82, 217, 0.26);
}

.yz-home-process-card:hover::before {
  background: linear-gradient(90deg, #0052d9, #23d2c3);
}

.yz-home-process-card:hover::after {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

.yz-home-process-card:hover b {
  color: rgba(255, 255, 255, 0.2);
}

.yz-home-process-card:hover i {
  color: #0052d9;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 28px rgba(0, 24, 80, 0.18);
}

.yz-home-process-card:hover span {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.yz-home-process-card:hover h3,
.yz-home-process-card:hover p {
  color: #fff;
}

.yz-home-process-card:hover .yz-home-process-art {
  transform: translate(8px, -8px) scale(1.04);
  filter: drop-shadow(0 18px 24px rgba(0, 34, 120, 0.28));
}

.yz-section-action {
  margin-top: 34px;
  text-align: center;
}

.yz-home-case-section {
  --case-section-bg: #f6f8fc;
  position: relative;
  overflow: hidden;
  background: var(--case-section-bg) !important;
}

.yz-home-case-section::before {
  display: none;
}

.yz-home-case-section .container {
  position: relative;
  z-index: 1;
}

.yz-home-case-top {
  display: flex;
  justify-content: center;
  margin-bottom: 34px;
  text-align: center;
}

.yz-home-case-top > div {
  max-width: 760px;
}

.yz-home-case-top h2 {
  margin: 0 0 12px;
  font-size: 36px;
  line-height: 1.25;
}

.yz-home-case-top p {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.8;
}

.yz-home-case-arrow {
  position: absolute;
  z-index: 6;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.96);
  color: #243244;
  box-shadow: 0 8px 18px rgba(20, 46, 86, 0.08);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

.yz-home-case-prev {
  left: -29px;
}

.yz-home-case-next {
  right: -29px;
}

.yz-home-case-arrow:hover {
  transform: translateY(-50%) scale(1.04);
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.yz-home-case-carousel {
  position: relative;
}

.yz-home-case-viewport {
  position: relative;
  height: 520px;
  min-height: 520px;
}

.yz-home-case-viewport::before,
.yz-home-case-viewport::after {
  display: none;
}

.yz-home-case-slide {
  --case-notch-size: 48px;
  --case-split-x: 46%;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(420px, 46%) minmax(0, 54%);
  height: 520px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(22, 42, 72, 0.12);
  box-shadow: 0 22px 58px rgba(20, 46, 86, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: none;
  transition: opacity .35s ease, visibility .35s ease;
  -webkit-mask-image:
    radial-gradient(circle var(--case-notch-size) at 0 50%, transparent 0 47px, #000 48px),
    radial-gradient(circle var(--case-notch-size) at 100% 50%, transparent 0 47px, #000 48px);
  -webkit-mask-size: 50% 100%, 50% 100%;
  -webkit-mask-position: left top, right top;
  -webkit-mask-repeat: no-repeat;
  mask-image:
    radial-gradient(circle var(--case-notch-size) at 0 50%, transparent 0 47px, #000 48px),
    radial-gradient(circle var(--case-notch-size) at 100% 50%, transparent 0 47px, #000 48px);
  mask-size: 50% 100%, 50% 100%;
  mask-position: left top, right top;
  mask-repeat: no-repeat;
}

.yz-home-case-slide.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
  z-index: 2;
}

.yz-home-case-slide::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: calc(var(--case-split-x) - 84px);
  top: -12%;
  width: 220px;
  height: 124%;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 700' preserveAspectRatio='none'%3E%3Cpath d='M0 0H104C150 92 160 170 122 258C84 348 104 432 150 508C184 568 158 638 114 700H0Z' fill='white'/%3E%3Cpath d='M104 0C150 92 160 170 122 258C84 348 104 432 150 508C184 568 158 638 114 700' fill='none' stroke='%230052d9' stroke-opacity='.2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(13px 0 0 rgba(0, 82, 217, 0.08));
  transform: rotate(10deg);
  transform-origin: center center;
  pointer-events: none;
}

.yz-home-case-slide::after {
  content: "";
  display: none;
}

.yz-home-case-slide-copy {
  position: relative;
  z-index: 3;
  padding: 68px 56px 48px;
  background: #fff;
  overflow: hidden;
}

.yz-home-case-slide h3 {
  max-width: 560px;
  color: #20242c;
  font-size: 28px;
  line-height: 1.24;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yz-home-case-slide-copy > p {
  max-width: 560px;
  color: #313b4a;
  font-size: 17px;
  line-height: 1.85;
  margin-bottom: 48px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yz-home-case-scene-label {
  display: block;
  color: #1f2937;
  font-size: 18px;
  margin-bottom: 20px;
}

.yz-home-case-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 42px;
}

.yz-home-case-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 46px;
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.yz-home-case-pill-product {
  box-shadow: 0 10px 22px rgba(0, 82, 217, 0.20);
}

a.yz-home-case-pill-product {
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.yz-home-case-pill-product i {
  flex: 0 0 auto;
  margin-left: 8px;
  font-size: 12px;
  line-height: 1;
}

a.yz-home-case-pill-product:hover {
  background: #0048c2;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 82, 217, 0.28);
}

.yz-home-case-pill-scene {
  border: 1px solid rgba(0, 82, 217, 0.18);
  background: #eef5ff;
  color: var(--color-primary);
  cursor: default;
}

.yz-home-case-progress {
  width: 260px;
  height: 3px;
  margin-bottom: 34px;
  background: #dbe8ff;
  overflow: hidden;
}

.yz-home-case-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-primary);
  transform-origin: left;
  transform: scaleX(0);
}

.yz-home-case-slide.active .yz-home-case-progress span {
  animation: yz-home-case-progress var(--case-autoplay, 5000ms) linear both;
}

.yz-home-case-carousel:hover .yz-home-case-slide.active .yz-home-case-progress span {
  animation-play-state: paused;
}

.yz-home-case-cta {
  min-width: 0;
}

.yz-home-case-slide-visual {
  position: relative;
  z-index: 1;
  display: block;
  height: 520px;
  min-height: 520px;
  overflow: hidden;
  background: #0f1f35;
}

.yz-home-case-slide-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(0,0,0,0.04));
}

.yz-home-case-slide-visual img,
.yz-home-case-slide-fallback {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  transition: transform .8s ease, filter .8s ease;
}

.yz-home-case-slide.active .yz-home-case-slide-visual img {
  transform: scale(1.03);
}

.yz-home-case-empty {
  max-width: 760px;
  margin: 0 auto;
  padding: 34px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #dfe8f4;
  text-align: center;
  box-shadow: 0 18px 46px rgba(14, 38, 74, 0.09);
}

.yz-home-case-empty h3 {
  font-size: 28px;
  margin: 12px 0;
}

.yz-home-case-empty p {
  color: var(--text-secondary);
  line-height: 1.8;
}

@keyframes yz-home-case-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}


/* ========== YZYC Buttons ========== */
.yz-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
}

.yz-btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.yz-btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}

.yz-btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.yz-btn-outline:hover {
  background: var(--color-primary);
  color: #fff;
}

.yz-btn-white {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
}

.yz-btn-white:hover {
  background: rgba(255,255,255,0.9);
  color: var(--color-primary-dark);
}

/* ========== YZYC Cases: Featured ========== */
.yz-case-featured {
  border: 1px solid #e8edf5;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}

.yz-case-featured-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: #f8faff;
  border-bottom: 1px solid #eef2f8;
}

.yz-case-founder-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: #eef5ff;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 14px;
}

.yz-case-featured-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.yz-case-featured-img {
  overflow: hidden;
  background: #f0f0f0;
  min-height: 320px;
}

.yz-case-featured-img a {
  display: block;
  width: 100%;
  height: 100%;
}

.yz-case-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.yz-case-featured-img:hover img {
  transform: scale(1.04);
}

.yz-case-featured-info {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.yz-case-featured-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #888;
}

.yz-case-featured-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.yz-case-featured-title {
  font-size: 24px;
  margin-bottom: 12px;
  line-height: 1.4;
}

.yz-case-featured-title a {
  color: var(--text-primary);
  text-decoration: none;
}

.yz-case-featured-title a:hover {
  color: var(--color-primary);
}

.yz-case-featured-desc {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 20px;
}

/* ========== YZYC Cases: Card Grid ========== */
.yz-case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.yz-case-card {
  display: block;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e8edf5;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.25s, transform 0.25s;
}

.yz-case-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.yz-case-card-img {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #f0f0f0;
}

.yz-case-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.yz-case-card:hover .yz-case-card-img img {
  transform: scale(1.05);
}

.yz-case-card-body {
  padding: 20px;
}

.yz-case-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #999;
  margin-bottom: 10px;
}

.yz-case-card-body h3 {
  font-size: 17px;
  margin-bottom: 8px;
  line-height: 1.4;
  color: var(--text-primary);
}

.yz-case-card-body p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========== YZYC Case Detail Breadcrumb ========== */
.yz-detail-breadcrumb {
  background: #f6f8fc;
  border-bottom: 1px solid #e8edf5;
  padding: 14px 0;
  font-size: 14px;
}

.yz-detail-breadcrumb .container {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #888;
}

.yz-detail-breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
}

.yz-detail-breadcrumb a:hover {
  color: #1d4ed8;
}

.yz-detail-breadcrumb i {
  font-size: 10px;
}

.yz-detail-breadcrumb span {
  color: var(--text-primary);
}

/* ========== YZYC Case Detail Layout ========== */
.yz-case-detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding: 48px 0;
}

.yz-case-detail-main {
  min-width: 0;
}

.yz-case-detail-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.yz-case-detail-sidebar-card {
  background: #fff;
  border: 1px solid #e8edf5;
  border-radius: 8px;
  padding: 24px;
}

.yz-case-detail-sidebar-card h3 {
  font-size: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

/* ========== YZYC Case Detail Header ========== */
.yz-case-detail-header {
  margin-bottom: 28px;
  text-align: center;
}

.yz-case-detail-founder-tag {
  margin-bottom: 12px;
}

.yz-case-detail-title {
  font-size: 32px;
  line-height: 1.35;
  margin-bottom: 16px;
}

.yz-case-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14px;
  color: #888;
}

.yz-case-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ========== YZYC Case Detail Cover ========== */
.yz-case-detail-cover {
  margin-bottom: 32px;
  border-radius: 8px;
  overflow: hidden;
}

.yz-case-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ========== YZYC Case Detail Content ========== */
.yz-case-detail-content {
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-primary);
}

.yz-case-detail-content h2 {
  font-size: 24px;
  margin: 36px 0 16px;
}

.yz-case-detail-content h3 {
  font-size: 19px;
  margin: 28px 0 12px;
}

.yz-case-detail-content p {
  margin-bottom: 16px;
}

.yz-case-detail-content img {
  max-width: 100%;
  border-radius: 6px;
  margin: 16px 0;
}

/* ========== YZYC Case Detail Gallery ========== */
.yz-case-detail-gallery {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid #e8edf5;
}

.yz-case-detail-gallery h3 {
  font-size: 18px;
  margin-bottom: 16px;
}

.yz-case-detail-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.yz-case-detail-gallery-item {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e8edf5;
}

.yz-case-detail-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ========== YZYC Case Detail Nav ========== */
.yz-case-detail-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid #e8edf5;
}

.yz-case-detail-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px 20px;
  border: 1px solid #e8edf5;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, background 0.2s;
}

.yz-case-detail-nav-item:hover {
  border-color: var(--color-primary);
  background: #f8faff;
}

.yz-case-detail-nav-item > i {
  flex: 0 0 auto;
}

.yz-case-detail-nav-item > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.yz-case-detail-nav-prev {
  justify-content: flex-start;
}

.yz-case-detail-nav-next {
  justify-content: flex-end;
}

.yz-case-detail-nav-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.yz-case-detail-nav-label {
  display: inline-flex;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 15px;
  color: var(--color-primary);
  margin-bottom: 0;
}

.yz-case-detail-nav-title {
  display: block;
  min-width: 0;
  flex: 0 1 auto;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18em;
}

.yz-case-detail-nav-next .yz-case-detail-nav-title {
  order: 1;
}

.yz-case-detail-nav-next .yz-case-detail-nav-label {
  order: 2;
}

.yz-case-detail-nav-next > div {
  flex: 0 1 auto;
  justify-content: flex-end;
}

/* ========== YZYC Case Detail Summary ========== */
.yz-case-detail-summary {
  list-style: none;
  padding: 0;
  margin: 0;
}

.yz-case-detail-summary li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 14px;
}

.yz-case-detail-summary li:last-child {
  border-bottom: none;
}

.yz-case-detail-summary strong {
  color: var(--text-secondary);
  font-weight: 500;
}

.yz-case-detail-summary span {
  color: var(--text-primary);
}

/* ========== YZYC Case Detail Sidebar CTA ========== */
.yz-case-detail-cta-card {
  background: linear-gradient(135deg, #eef5ff, #fff);
  border-color: #c5d9ff;
}

.yz-case-detail-cta-card h3 {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 8px;
}

.yz-case-detail-cta-card p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.6;
}

.yz-case-detail-cta-card .yz-btn {
  padding: 8px 18px;
  font-size: 14px;
}

/* ========== YZYC Case Detail Related ========== */
.yz-case-detail-related {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #f5f5f5;
}

.yz-case-detail-related:last-child {
  border-bottom: none;
}

.yz-case-detail-related:hover .yz-case-detail-related-info h4 {
  color: var(--color-primary);
}

.yz-case-detail-related-img {
  width: 64px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f0f0f0;
}

.yz-case-detail-related-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yz-case-detail-related-info h4 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 4px;
  transition: color 0.2s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.yz-case-detail-related-info span {
  font-size: 12px;
  color: #999;
}

/* ============================================
   YZYC Image Fallback Placeholders
   Renders icon + label when image src is empty,
   avoiding broken-image UI during content setup.
   ============================================ */
.yz-img-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #eef1f6;
  color: #bcc3ce;
  gap: 8px;
}

.yz-img-fallback i {
  font-size: 36px;
  color: #c8cdd6;
  opacity: 0.9;
}

.yz-img-fallback span {
  font-size: 14px;
  color: #bcc3ce;
}

/* Cover / featured hero — needs explicit min-height */
.yz-img-fallback--cover {
  height: auto;
  min-height: 300px;
}

/* Card grid — smaller icon */
.yz-img-fallback--card i { font-size: 26px; }
.yz-img-fallback--card span { font-size: 12px; }

/* Thumbnail (related sidebar) — icon-only */
.yz-img-fallback--thumb { gap: 0; }
.yz-img-fallback--thumb i { font-size: 13px; }
.yz-img-fallback--thumb span { display: none; }

/* YZYC — Homepage image carousel banner layering */
/* Banner slider fills the full hero section */
.yz-home-banner-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* Gradient mask: left 0%–68% near-opaque with deep blue-black,
   then gently transitions toward the right so the report image
   stays visible. Multi-stop linear gradient (to right). */
.yz-home-banner-slider::after {
  display: none;
}
.yz-home-banner-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--banner-image);
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 0;
}
.yz-home-banner-slide.active {
  opacity: 1;
  z-index: 1;
}
/* Dots — below CTA buttons, left-aligned with text */
.yz-home-banner-dots {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  z-index: 3;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.yz-home-banner-dot {
  width: 28px;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: all 0.25s ease;
}
.yz-home-banner-dot.active,
.yz-home-banner-dot:hover {
  background: #0052d9;
}
.yz-home-banner-dot:focus-visible {
  outline: 2px solid #00e5ff;
  outline-offset: 3px;
}

/* --- Banner left/right arrow buttons --- */
.yz-home-banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1002;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
  font-size: 18px;
  line-height: 1;
}
.yz-home-banner-arrow:hover,
.yz-home-banner-arrow:focus-visible {
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  outline: none;
}
.yz-home-banner-arrow:focus-visible {
  outline: 2px solid #00e5ff;
  outline-offset: 2px;
}
.yz-home-banner-arrow--left {
  left: 20px;
}
.yz-home-banner-arrow--right {
  right: 20px;
}

/* Homepage hero copy sits above banner & masks, single column on desktop */
.yz-home-hero-grid {
  grid-template-columns: 1fr;
  position: relative;
  z-index: 2;
}
.yz-home-hero-copy {
  max-width: 720px;
  position: relative;
  z-index: 2;
}

/* ============================================================
   Banner 底部功能卡片（桌面端）
   ============================================================ */

/* 包裹条：负 margin 上翻叠进 banner 底部，靠 z-index 坐落在前景 */
.yz-banner-card-strip {
  position: relative;
  z-index: 3;
  margin-top: -72px;
  margin-bottom: 0;
  padding: 0 20px;
  background: linear-gradient(to bottom, transparent 72px, #f6f8fc 72px);
}

.yz-banner-card-strip .container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 108px;
  align-items: start;
  gap: 24px;
  overflow: visible;
}

/* 单张卡片 */
.yz-banner-card {
  position: relative;
  align-self: start;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "desc desc";
  column-gap: 16px;
  row-gap: 5px;
  min-height: 108px;
  padding: 18px 20px;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: #333;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, min-height 0.25s ease, padding 0.25s ease;
}

  .yz-banner-card:hover {
    background: linear-gradient(135deg, #0052d9 0%, #0039a6 100%);
    color: #fff;
    box-shadow: 0 8px 28px rgba(0, 82, 217, 0.35);
    min-height: 136px;
    padding-bottom: 42px;
    transform: translateY(-28px);
    z-index: 4;
  }


.yz-banner-card-icon {
  --badge-accent: #0052d9;
  grid-area: icon;
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #fff;
  font-size: 12px;
  transition: transform 0.25s ease;
}
.yz-banner-card-icon::before,
.yz-banner-card-icon::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--badge-accent), #7dd3fc);
  transform: rotate(45deg);
}
.yz-banner-card-icon::after {
  inset: 6px;
  opacity: 0.42;
  transform: translate(6px, -1px) rotate(45deg);
}
.yz-banner-card-icon i {
  position: relative;
  z-index: 2;
  font-size: 12px;
  color: #fff;
  transition: color 0.25s ease;
}
.yz-banner-card:hover .yz-banner-card-icon i {
  color: #fff;
}

.yz-banner-card h3 {
  grid-area: title;
  font-size: 1rem;
  font-weight: 700;
  margin: 3px 0 0 0;
  line-height: 1.35;
  color: #1a1a1a;
  transition: color 0.25s ease;
}

.yz-banner-card:hover h3 {
  color: #fff;
}

.yz-banner-card p {
  grid-area: desc;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #666;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.25s ease;
}

.yz-banner-card:hover p {
  color: rgba(255, 255, 255, 0.85);
}

.yz-banner-card-action {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translate(-50%, 10px);
  font-size: 0.72rem;
  font-weight: 600;
  color: #0052d9;
  background: #fff;
  border-radius: 999px;
  min-width: 78px;
  height: 26px;
  padding: 0 14px;
  box-shadow: 0 6px 16px rgba(0, 35, 100, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.yz-banner-card:hover .yz-banner-card-action {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  color: #0052d9;
}

/* ============================================
   产品中心专用 Hero (Product Center Hero)
   不进用通用 .yz-page-hero，独立 class 作用域
   ============================================ */
.yz-product-hero {
  position: relative;
  min-height: 480px;
  padding: 0;
  background-color: var(--color-primary-dark, #002766);
  background-image: var(--product-hero-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: none;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.yz-product-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 40, 104, 0.90) 0%, rgba(0, 55, 140, 0.78) 55%, rgba(0, 82, 217, 0.65) 100%);
  z-index: 0;
}

.yz-product-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 840px;
  margin: 0 auto;
}

.yz-product-hero h1 {
  color: #fff;
  font-size: 40px;
  line-height: 1.28;
  font-weight: 700;
  margin-bottom: 20px;
  max-width: 840px;
  white-space: nowrap;
  text-align: center;
}

.yz-product-hero p {
  color: #fff;
  font-size: 17px;
  line-height: 1.8;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  text-align: center;
}

/* ============================================
   产品详情页最终覆盖：Light SaaS / Scoped
   ============================================ */
.yz-pd-page {
  background:
    linear-gradient(180deg, #f8fbff 0%, #ffffff 32%, #f7faff 100%);
}

.yz-pd-hero {
  min-height: 680px;
  padding: 132px 0 92px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(124, 58, 237, 0.06) 42%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border-bottom: 1px solid #e8eef8;
  color: #0f172a;
}

.yz-pd-hero .yz-pd-hero-grid-overlay {
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 78%);
}

.yz-pd-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
  gap: 60px;
  align-items: center;
}

.yz-pd-hero-copy {
  max-width: 650px;
}

.yz-pd-hero-kicker {
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.16);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.08);
  letter-spacing: 0;
}

.yz-pd-hero-kicker i {
  color: #2563eb;
}

.yz-pd-hero-title {
  color: #0f172a;
  font-size: 58px;
  letter-spacing: 0;
}

.yz-pd-glow-text {
  background: linear-gradient(120deg, #0f172a 0%, #2563eb 46%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 16px 28px rgba(37, 99, 235, 0.18));
}

.yz-pd-hero-sub {
  color: #526178;
  font-size: 17px;
}

.yz-pd-hero-btn {
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

.yz-pd-hero-btn:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.yz-pd-hero-btn-outline {
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.yz-pd-hero-btn-outline:hover {
  color: #fff;
  border-color: #2563eb;
  background: #2563eb;
}

.yz-pd-hero-visual {
  position: relative;
}

.yz-pd-visual-shell {
  position: relative;
  min-height: 430px;
  padding: 22px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(37, 99, 235, 0.14);
  overflow: hidden;
}

.yz-pd-visual-shell::before {
  content: "";
  position: absolute;
  inset: 56px 22px 22px;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(37, 99, 235, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, #f8fbff, #eef5ff);
  background-size: 28px 28px, 28px 28px, auto;
}

.yz-pd-visual-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}

.yz-pd-visual-topbar span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.yz-pd-visual-topbar span:nth-child(1) { background: #ef4444; }
.yz-pd-visual-topbar span:nth-child(2) { background: #f59e0b; }
.yz-pd-visual-topbar span:nth-child(3) { background: #22c55e; }

.yz-pd-visual-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 0.86fr;
  gap: 18px;
  align-items: center;
  min-height: 310px;
}

.yz-pd-visual-radar {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  --orbit-radius: 104px;
}

.yz-pd-visual-radar i {
  position: relative;
  z-index: 3;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 18px 34px rgba(37, 99, 235, 0.26);
  font-size: 26px;
}

.yz-pd-ring,
.yz-pd-node {
  position: absolute;
  border-radius: 999px;
}

.yz-pd-ring-1 {
  inset: 18%;
  border: 1px solid rgba(37, 99, 235, 0.22);
}

.yz-pd-ring-2 {
  inset: 4%;
  border: 1px dashed rgba(124, 58, 237, 0.24);
}

.yz-pd-node {
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  z-index: 2;
  background: #14b8a6;
  box-shadow: 0 0 0 8px rgba(20, 184, 166, 0.12);
  transform: translate(-50%, -50%) rotate(0deg) translateX(var(--orbit-radius));
  will-change: transform;
}

.yz-pd-node-1 {
  animation: yz-pd-orbit-node-1 14s linear infinite;
}

.yz-pd-node-2 {
  background: #2563eb;
  box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.12);
  animation: yz-pd-orbit-node-2 14s linear infinite;
}

.yz-pd-node-3 {
  background: #7c3aed;
  box-shadow: 0 0 0 8px rgba(124, 58, 237, 0.12);
  animation: yz-pd-orbit-node-3 14s linear infinite;
}

.yz-pd-flow-track {
  display: none;
}

.yz-pd-visual-triangle .yz-pd-ring {
  border: 0;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.yz-pd-visual-triangle .yz-pd-ring::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: rgba(248, 251, 255, 0.72);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.yz-pd-visual-triangle .yz-pd-ring-1 {
  inset: 11% 11% 17%;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.44), rgba(20, 184, 166, 0.36), rgba(124, 58, 237, 0.42));
  filter: drop-shadow(0 16px 28px rgba(37, 99, 235, 0.12));
}

.yz-pd-visual-triangle .yz-pd-ring-2 {
  inset: 24% 25% 31%;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(124, 58, 237, 0.2));
  opacity: 0.8;
}

.yz-pd-visual-triangle i {
  transform: translateY(12px);
}

.yz-pd-visual-triangle .yz-pd-node {
  top: 11%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: yz-pd-triangle-node 9s linear infinite;
}

.yz-pd-visual-triangle .yz-pd-node-2 {
  animation-delay: -3s;
}

.yz-pd-visual-triangle .yz-pd-node-3 {
  animation-delay: -6s;
}

.yz-pd-visual-workflow .yz-pd-ring {
  display: none;
}

.yz-pd-visual-workflow .yz-pd-flow-track {
  position: absolute;
  inset: 7% 10% 4%;
  z-index: 1;
  display: block;
}

.yz-pd-visual-workflow .yz-pd-flow-track svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.yz-pd-visual-workflow .yz-pd-flow-track path {
  fill: none;
  stroke: #18aefa;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
  filter: drop-shadow(0 8px 12px rgba(24, 174, 250, 0.28));
}

.yz-pd-visual-workflow > i,
.yz-pd-visual-workflow .yz-pd-node {
  display: none;
}

.yz-pd-flow-dot {
  fill: #fbbf24;
  stroke: rgba(251, 191, 36, 0.26);
  stroke-width: 9;
  filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.62));
}

.yz-pd-flow-dot-2 {
  fill: #22c55e;
  stroke: rgba(34, 197, 94, 0.24);
  filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.56));
  opacity: 0.86;
}

.yz-pd-visual-workflow .yz-pd-node {
  top: 15%;
  left: 22%;
  width: 16px;
  height: 16px;
  background: #fbbf24;
  box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.16), 0 0 22px rgba(251, 191, 36, 0.48);
  transform: translate(-50%, -50%);
  animation: yz-pd-workflow-node 6.8s linear infinite;
}

.yz-pd-visual-workflow .yz-pd-node-2,
.yz-pd-visual-workflow .yz-pd-node-3 {
  width: 10px;
  height: 10px;
  background: #fbbf24;
  box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.12), 0 0 18px rgba(251, 191, 36, 0.34);
  opacity: 0.62;
}

.yz-pd-visual-workflow .yz-pd-node-2 {
  animation-delay: -2.25s;
}

.yz-pd-visual-workflow .yz-pd-node-3 {
  animation-delay: -4.5s;
}

/* ── Dashboard: 五阶引擎波纹 ── */
.yz-pd-visual-dashboard .yz-pd-flow-track { display: none; }

.yz-pd-visual-dashboard {
  background:
    linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px),
    linear-gradient(160deg, #0B1120 0%, #1E293B 100%);
  background-size: 20px 20px, 20px 20px, 100% 100%;
  border-radius: 16px;
  overflow: hidden;
}

/* 双环向外发射 */
.yz-pd-visual-dashboard::before,
.yz-pd-visual-dashboard::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid #fff;
  z-index: 1;
  animation: yz-pd-ping 3s cubic-bezier(0, 0, 0.15, 1) infinite;
}
.yz-pd-visual-dashboard::before { animation-delay: -1s; }
.yz-pd-visual-dashboard::after  { animation-delay: 0s; }

@keyframes yz-pd-ping {
  0%   { width: 30px;  height: 30px;  opacity: 1; }
  100% { width: 260px; height: 260px; opacity: 0; }
}

/* 中心图标：引擎核心 */
.yz-pd-visual-dashboard i {
  width: 56px; height: 56px;
  border-radius: 16px;
  font-size: 22px;
  background: linear-gradient(135deg, #3B82F6, #14B8A6);
  box-shadow: 0 0 40px rgba(59,130,246,.6), 0 0 0 6px rgba(59,130,246,.14);
  z-index: 10;
}

/* ring 转点：ring-1, ring-2 变成圆点 */
.yz-pd-visual-dashboard .yz-pd-ring {
  position: absolute;
  border-radius: 50%;
  border: 0;
  z-index: 3;
  animation: yz-pd-node-flicker 2.5s ease-in-out infinite;
}

.yz-pd-visual-dashboard .yz-pd-ring-1 {
  top: 50%; left: 8%;
  width: 9px; height: 9px;
  background: #F472B6;
  box-shadow: 0 0 14px rgba(244,114,182,.9);
  animation-delay: -0.4s;
}

.yz-pd-visual-dashboard .yz-pd-ring-2 {
  top: 28%; left: 26%;
  width: 7px; height: 7px;
  background: #14B8A6;
  box-shadow: 0 0 12px rgba(20,184,166,.9);
  animation-delay: -2s;
}

/* 3 个处理节点 */
.yz-pd-visual-dashboard .yz-pd-node {
  position: absolute;
  top: auto; left: auto;
  border-radius: 50%;
  z-index: 5;
  animation: yz-pd-node-flicker 2.5s ease-in-out infinite;
}
@keyframes yz-pd-node-flicker {
  0%, 100% { opacity: .25; transform: translate(-50%, -50%) scale(.6); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
}

.yz-pd-visual-dashboard .yz-pd-node-1 {
  top: 8%; left: 50%;
  width: 9px; height: 9px;
  background: #22D3EE;
  box-shadow: 0 0 14px rgba(34,211,238,.9);
  animation-delay: 0s;
}
.yz-pd-visual-dashboard .yz-pd-node-2 {
  bottom: 8%; left: 50%;
  width: 9px; height: 9px;
  background: #818CF8;
  box-shadow: 0 0 14px rgba(129,140,248,.9);
  animation-delay: -.8s;
}
.yz-pd-visual-dashboard .yz-pd-node-3 {
  top: 50%; right: 8%;
  width: 9px; height: 9px;
  background: #A78BFA;
  box-shadow: 0 0 14px rgba(167,139,250,.9);
  animation-delay: -1.6s;
}

/* ── Tianshu: 雷达扫描智控系统 ── */
.yz-pd-visual-tianshu .yz-pd-flow-track { display: none; }

.yz-pd-visual-tianshu {
  background: radial-gradient(ellipse at 50% 45%, #1E1B2E 0%, #0D0A18 100%);
  border-radius: 16px;
}

/* 雷达扫描光束 - conic-gradient 旋转 */
.yz-pd-visual-tianshu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: conic-gradient(from 0deg,
    rgba(34, 211, 238, 0) 0deg,
    rgba(34, 211, 238, .18) 8deg,
    rgba(34, 211, 238, .06) 16deg,
    rgba(34, 211, 238, 0) 20deg,
    transparent 360deg
  );
  animation: yz-pd-tianshu-sweep 4s linear infinite;
}
@keyframes yz-pd-tianshu-sweep {
  to { transform: rotate(360deg); }
}

/* 距离环 */
.yz-pd-visual-tianshu::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 110px; height: 110px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(34, 211, 238, .22);
  outline: 1px solid rgba(34, 211, 238, .14);
  outline-offset: 28px;
  z-index: 1;
}

/* 中心图标：指挥中枢 */
.yz-pd-visual-tianshu i {
  width: 52px; height: 52px;
  border-radius: 50%;
  font-size: 20px;
  background: radial-gradient(circle at 40% 35%, #22D3EE, #0891B2);
  box-shadow:
    0 0 30px rgba(34, 211, 238, .6),
    0 0 0 4px rgba(34, 211, 238, .2),
    0 0 0 10px rgba(34, 211, 238, .06);
  z-index: 10;
}

/* ring 转方形捕获标记 */
.yz-pd-visual-tianshu .yz-pd-ring,
.yz-pd-visual-tianshu .yz-pd-node {
  position: absolute;
  border-radius: 2px;
  z-index: 5;
  width: 10px !important;
  height: 10px !important;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  inset: auto;
  background: none !important;
  border: 1px solid transparent;
  will-change: auto !important;
  animation: yz-pd-tianshu-target 2.4s ease-in-out infinite;
}
@keyframes yz-pd-tianshu-target {
  0%, 100% { opacity: .2; transform: translate(-50%, -50%) scale(.6); border-width: 1px; }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); border-width: 2px; }
}
.yz-pd-visual-tianshu .yz-pd-ring-1 {
  top: 85%; left: 20%;
  width: 10px; height: 10px;
  border: 1px solid #FB7185;
  box-shadow: 0 0 10px rgba(251, 113, 133, .7);
  animation-delay: -.4s;
}
.yz-pd-visual-tianshu .yz-pd-ring-2 {
  top: 50%; left: 8%;
  width: 10px; height: 10px;
  border: 1px solid #C084FC;
  box-shadow: 0 0 10px rgba(192, 132, 252, .7);
  animation-delay: -2s;
}

/* 正上 */
.yz-pd-visual-tianshu .yz-pd-node-1 {
  top: 8%; left: 50%;
  width: 10px; height: 10px;
  border: 1px solid #22D3EE;
  box-shadow: 0 0 10px rgba(34, 211, 238, .7);
  animation-delay: 0s;
}
/* 右上 */
.yz-pd-visual-tianshu .yz-pd-node-2 {
  top: 15%; left: 80%;
  width: 10px; height: 10px;
  border: 1px solid #A3E635;
  box-shadow: 0 0 10px rgba(163, 230, 53, .7);
  animation-delay: -.8s;
}
/* 右下 */
.yz-pd-visual-tianshu .yz-pd-node-3 {
  top: 85%; left: 80%;
  width: 10px; height: 10px;
  border: 1px solid #F59E0B;
  box-shadow: 0 0 10px rgba(245, 158, 11, .7);
  animation-delay: -1.6s;
}

/* ── 定制开发: 数据流管线 ── */
.yz-pd-visual-custom .yz-pd-flow-track { display: none; }

.yz-pd-visual-custom {
  background: linear-gradient(180deg, #0A1628 0%, #112240 50%, #0A1628 100%);
  border-radius: 16px;
  overflow: hidden;
}

/* 纵向数据管线 */
.yz-pd-visual-custom::before {
  content: "";
  position: absolute;
  top: 10%; bottom: 10%;
  left: 28%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent, rgba(34,211,238,.5) 20%, rgba(34,211,238,.5) 80%, transparent);
  z-index: 1;
  animation: yz-pd-custom-line1 3s ease-in-out infinite;
}
.yz-pd-visual-custom::after {
  content: "";
  position: absolute;
  top: 10%; bottom: 10%;
  right: 28%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent, rgba(168,85,247,.5) 20%, rgba(168,85,247,.5) 80%, transparent);
  z-index: 1;
  animation: yz-pd-custom-line2 3s ease-in-out infinite;
}
@keyframes yz-pd-custom-line1 {
  0%,100%{opacity:.3} 50%{opacity:1}
}
@keyframes yz-pd-custom-line2 {
  0%,100%{opacity:1} 50%{opacity:.3}
}

/* 横向连接桥 */
.yz-pd-visual-custom .yz-pd-ring {
  position: absolute;
  left: 10%; right: 10%;
  height: 1px;
  border-radius: 0;
  border: 0;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}
.yz-pd-visual-custom .yz-pd-ring-1 {
  top: 35%;
  animation: yz-pd-custom-bridge1 4s ease-in-out infinite;
}
.yz-pd-visual-custom .yz-pd-ring-2 {
  top: 65%;
  animation: yz-pd-custom-bridge2 4s ease-in-out infinite;
}
@keyframes yz-pd-custom-bridge1 {
  0%,100%{opacity:.15} 50%{opacity:.5}
}
@keyframes yz-pd-custom-bridge2 {
  0%,100%{opacity:.5} 50%{opacity:.15}
}

/* 中枢节点 */
.yz-pd-visual-custom i {
  width: 44px; height: 44px;
  border-radius: 6px;
  font-size: 18px;
  background: linear-gradient(135deg, #22D3EE, #A855F7);
  box-shadow: 0 0 30px rgba(34,211,238,.4), 0 0 0 4px rgba(34,211,238,.1);
  z-index: 10;
}

/* 数据包 - 沿管线流动 */
.yz-pd-visual-custom .yz-pd-node {
  position: absolute;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50%;
  background: #22D3EE !important;
  box-shadow: 0 0 8px rgba(34,211,238,.8);
  z-index: 5;
  top: auto;
  left: auto;
  transform: none !important;
  will-change: auto !important;
  animation: yz-pd-custom-packet 2s ease-in-out infinite;
}
@keyframes yz-pd-custom-packet {
  0%   { top: 10%; opacity: .2; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { top: 90%; opacity: .2; }
}

.yz-pd-visual-custom .yz-pd-node-1 {
  left: calc(28% - 3px);
  top: 25%;
  animation-delay: 0s;
}
.yz-pd-visual-custom .yz-pd-node-2 {
  right: calc(28% - 3px);
  top: 55%;
  animation-delay: -.7s;
}
.yz-pd-visual-custom .yz-pd-node-3 {
  left: calc(28% - 3px);
  top: 80%;
  animation-delay: -1.3s;
}

@keyframes yz-pd-orbit-node-1 {
  from { transform: translate(-50%, -50%) rotate(-34deg) translateX(var(--orbit-radius)); }
  to { transform: translate(-50%, -50%) rotate(326deg) translateX(var(--orbit-radius)); }
}

@keyframes yz-pd-orbit-node-2 {
  from { transform: translate(-50%, -50%) rotate(148deg) translateX(var(--orbit-radius)); }
  to { transform: translate(-50%, -50%) rotate(508deg) translateX(var(--orbit-radius)); }
}

@keyframes yz-pd-orbit-node-3 {
  from { transform: translate(-50%, -50%) rotate(58deg) translateX(var(--orbit-radius)); }
  to { transform: translate(-50%, -50%) rotate(418deg) translateX(var(--orbit-radius)); }
}

@keyframes yz-pd-triangle-node {
  0% { top: 11%; left: 50%; }
  33.333% { top: 83%; left: 89%; }
  66.666% { top: 83%; left: 11%; }
  100% { top: 11%; left: 50%; }
}

@keyframes yz-pd-workflow-node {
  0% { top: 21%; left: 28%; opacity: 0; }
  8% { opacity: 1; }
  18% { top: 21%; left: 67%; opacity: 1; }
  28% { top: 35%; left: 79%; opacity: 1; }
  38% { top: 35%; left: 36%; opacity: 1; }
  48% { top: 50%; left: 36%; opacity: 1; }
  58% { top: 50%; left: 69%; opacity: 1; }
  68% { top: 65%; left: 79%; opacity: 1; }
  78% { top: 65%; left: 33%; opacity: 1; }
  88% { top: 80%; left: 33%; opacity: 1; }
  100% { top: 80%; left: 71%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .yz-pd-node {
    animation: none;
  }

  .yz-pd-node-1 { transform: translate(-50%, -50%) rotate(-34deg) translateX(var(--orbit-radius)); }
  .yz-pd-node-2 { transform: translate(-50%, -50%) rotate(148deg) translateX(var(--orbit-radius)); }
  .yz-pd-node-3 { transform: translate(-50%, -50%) rotate(58deg) translateX(var(--orbit-radius)); }

  .yz-pd-visual-triangle .yz-pd-node,
  .yz-pd-visual-workflow .yz-pd-node {
    transform: translate(-50%, -50%);
  }

  .yz-pd-visual-triangle .yz-pd-node-1 { top: 11%; left: 50%; }
  .yz-pd-visual-triangle .yz-pd-node-2 { top: 83%; left: 89%; }
  .yz-pd-visual-triangle .yz-pd-node-3 { top: 83%; left: 11%; }
  .yz-pd-visual-workflow .yz-pd-node-1 { top: 21%; left: 28%; opacity: 1; }
  .yz-pd-visual-workflow .yz-pd-node-2 { top: 50%; left: 69%; opacity: 0.72; }
  .yz-pd-visual-workflow .yz-pd-node-3 { top: 80%; left: 71%; opacity: 0.72; }

  .yz-pd-visual-dashboard .yz-pd-ring,
  .yz-pd-visual-dashboard .yz-pd-node { animation: none; opacity: .85; }
  .yz-pd-visual-dashboard::before,
  .yz-pd-visual-dashboard::after { animation: none; width: 100px; height: 100px; opacity: .5; }
  .yz-pd-visual-dashboard::before { width: 160px; height: 160px; opacity: .3; }

  .yz-pd-visual-tianshu .yz-pd-node,
  .yz-pd-visual-tianshu .yz-pd-ring { animation: none; opacity: .85; border-width: 1px; }
  .yz-pd-visual-tianshu::before { animation: none; background: none; }

  .yz-pd-visual-custom .yz-pd-node { animation: none; opacity: .8; }
  .yz-pd-visual-custom .yz-pd-node-1 { top: 25%; }
  .yz-pd-visual-custom .yz-pd-node-2 { top: 55%; }
  .yz-pd-visual-custom .yz-pd-node-3 { top: 80%; }
  .yz-pd-visual-custom::before,
  .yz-pd-visual-custom::after,
  .yz-pd-visual-custom .yz-pd-ring { animation: none; opacity: .5; }
}

.yz-pd-visual-stack {
  display: grid;
  gap: 12px;
}

.yz-pd-visual-card,
.yz-pd-visual-bars {
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.yz-pd-visual-card {
  padding: 16px;
}

.yz-pd-visual-card small {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-bottom: 8px;
}

.yz-pd-visual-card strong {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.45;
}

.yz-pd-visual-bars {
  padding: 16px;
  display: grid;
  gap: 9px;
}

.yz-pd-visual-bars strong {
  color: #0f172a;
  font-size: 13px;
  line-height: 1.2;
  margin-bottom: 2px;
}

.yz-pd-visual-bar-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.yz-pd-visual-bar-row span {
  color: #64748b;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}

.yz-pd-visual-bar-row i {
  display: block;
  width: var(--bar);
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
}

.yz-pd-page .yz-section-head .yz-kicker {
  font-size: 36px;
  margin-bottom: 18px;
  line-height: 1.3;
}

.yz-pd-tabs-section,
.yz-pd-architecture-section,
.yz-pd-advantages-section,
.yz-pd-applications-section,
.yz-pd-delivery-section {
  padding: 96px 0;
}

.yz-pd-tabs {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  margin-top: 42px;
}

.yz-pd-tab-list {
  display: grid;
  gap: 12px;
  align-self: center;
}

.yz-pd-tab-btn {
  width: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  color: #334155;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, color .22s ease;
}

.yz-pd-tab-btn .yz-pd-tab-icon {
  --badge-accent: #2563eb;
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 15px;
}
.yz-pd-tab-btn .yz-pd-tab-icon::before,
.yz-pd-tab-btn .yz-pd-tab-icon::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--badge-accent), #7dd3fc);
  transform: rotate(45deg);
}
.yz-pd-tab-btn .yz-pd-tab-icon::after {
  inset: 8px;
  opacity: 0.42;
  transform: translate(9px, -2px) rotate(45deg);
}
.yz-pd-tab-btn .yz-pd-tab-icon i {
  position: relative;
  z-index: 2;
}

.yz-pd-tab-btn.is-active,
.yz-pd-tab-btn:hover {
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.34);
  background: #fff;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.1);
}

.yz-pd-tab-panels {
  min-width: 0;
}

.yz-pd-tab-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 32px;
  align-items: center;
  min-height: 410px;
  padding: 38px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.07);
}

.yz-pd-tab-panel[hidden] {
  display: none;
}

.yz-pd-panel-tag {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #2563eb;
  background: #eff6ff;
  font-size: 13px;
  font-weight: 700;
}

.yz-pd-tab-copy h3 {
  font-size: 30px;
  margin-bottom: 16px;
  color: #0f172a;
}

.yz-pd-tab-copy p {
  color: #526178;
  line-height: 1.8;
  margin-bottom: 22px;
}

.yz-pd-tab-copy ul {
  display: grid;
  gap: 12px;
  list-style: none;
}

.yz-pd-tab-copy li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #334155;
}

.yz-pd-tab-copy li i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #2563eb;
  font-size: 11px;
  flex: 0 0 auto;
}

.yz-pd-tab-visual {
  min-height: 310px;
  border-radius: 16px;
  background: #f8fafc;
  overflow: hidden;
}

/* ---------- B2B SaaS mini dashboard mockup ---------- */

.yz-pd-dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 310px;
  padding: 20px 22px 22px;
}

/* -- top bar (window chrome) -- */

.yz-pd-dash-topbar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8ecf1;
}

.yz-pd-dash-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.yz-pd-dash-dot:nth-child(1) { background: #ef4444; }
.yz-pd-dash-dot:nth-child(2) { background: #f59e0b; }
.yz-pd-dash-dot:nth-child(3) { background: #22c55e; }

.yz-pd-dash-topbar em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

/* -- stat cards row -- */

.yz-pd-dash-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.yz-pd-dash-stat {
  position: relative;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e8ecf1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.yz-pd-dash-stat small {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  margin-bottom: 4px;
  line-height: 1.2;
}

.yz-pd-dash-stat-val {
  display: inline-block;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}

.yz-pd-dash-unit {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  line-height: 1;
  margin-left: 2px;
  vertical-align: baseline;
}

.yz-pd-dash-trend {
  position: absolute;
  top: 8px;
  right: 10px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}

.yz-pd-dash-trend-up { color: #22c55e; }
.yz-pd-dash-trend-down { color: #ef4444; }
.yz-pd-dash-trend-good { color: #2563eb; }

/* -- chart area -- */

.yz-pd-dash-chart {
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 10px;
  padding: 14px 16px 10px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.yz-pd-dash-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.yz-pd-dash-chart-head span {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.yz-pd-dash-chart-head small {
  font-size: 10px;
  color: #94a3b8;
}

.yz-pd-dash-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 72px;
}

.yz-pd-dash-bar-col {
  flex: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
}

.yz-pd-dash-bar {
  width: 100%;
  height: calc(var(--h) * 100%);
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #2563eb, #7c3aed);
  transition: height .3s ease;
}

/* -- log / activity list -- */

.yz-pd-dash-log {
  background: #fff;
  border: 1px solid #e8ecf1;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.yz-pd-dash-log-head {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.yz-pd-dash-log-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 11px;
}

.yz-pd-dash-log-row + .yz-pd-dash-log-row {
  border-top: 1px solid #f8fafc;
}

.yz-pd-dash-log-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2563eb;
  flex-shrink: 0;
}

.yz-pd-dash-log-row:nth-child(even) .yz-pd-dash-log-dot {
  background: #7c3aed;
}

.yz-pd-dash-log-text {
  flex: 1;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yz-pd-dash-log-row small {
  font-size: 10px;
  color: #94a3b8;
  flex-shrink: 0;
}

.yz-pd-architecture-board {
  margin-top: 42px;
  padding: 34px;
  border: 1px solid #dbe7f7;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(239, 246, 255, 0.88)),
    radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.12), transparent 28%);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
}

.yz-pd-arch-row,
.yz-pd-arch-core {
  display: grid;
  gap: 16px;
}

.yz-pd-arch-row {
  grid-template-columns: repeat(4, 1fr);
}

.yz-pd-arch-row span {
  padding: 16px 12px;
  border: 1px solid #dbe7f7;
  border-radius: 12px;
  background: #fff;
  color: #334155;
  text-align: center;
  font-weight: 700;
}

.yz-pd-arch-core {
  grid-template-columns: repeat(3, 1fr);
  margin: 22px 0;
}

.yz-pd-arch-core div {
  min-height: 178px;
  padding: 26px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #4f46e5 60%, #7c3aed);
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.18);
}

.yz-pd-arch-core i {
  font-size: 24px;
  margin-bottom: 18px;
}

.yz-pd-arch-core strong {
  display: block;
  font-size: 18px;
  margin-bottom: 10px;
}

.yz-pd-arch-core p {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
  margin: 0;
}

.yz-pd-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 42px;
}

.yz-pd-info-card {
  min-height: 230px;
  padding: 30px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.yz-pd-info-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: 0 20px 44px rgba(37, 99, 235, 0.1);
}

.yz-pd-info-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 14px;
  color: #2563eb;
  background: linear-gradient(135deg, #eff6ff, #eef2ff);
  font-size: 21px;
}

.yz-pd-info-card h3 {
  font-size: 21px;
  color: #0f172a;
}

.yz-pd-info-card p {
  color: #526178;
  line-height: 1.75;
  margin: 0;
}

.yz-pd-advantage-map {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 0.78fr) minmax(300px, 1fr);
  gap: 34px;
  align-items: center;
  margin-top: 52px;
  padding: 8px 0;
}

.yz-pd-advantage-column {
  display: grid;
  gap: 38px;
  min-width: 0;
}

.yz-pd-advantage-column-left .yz-pd-advantage-card:nth-child(1),
.yz-pd-advantage-column-left .yz-pd-advantage-card:nth-child(3) {
  margin-left: 64px;
}

.yz-pd-advantage-column-left .yz-pd-advantage-card:nth-child(2) {
  margin-right: 64px;
}

.yz-pd-advantage-column-right .yz-pd-advantage-card:nth-child(1),
.yz-pd-advantage-column-right .yz-pd-advantage-card:nth-child(3) {
  margin-right: 64px;
}

.yz-pd-advantage-column-right .yz-pd-advantage-card:nth-child(2) {
  margin-left: 64px;
}

.yz-pd-advantage-card {
  --adv-accent: #2563eb;
  --adv-soft: rgba(37, 99, 235, 0.12);
  position: relative;
  isolation: isolate;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 50px;
  color: #0f172a;
  text-align: center;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.34), rgba(125, 211, 252, 0.18));
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  filter: drop-shadow(0 18px 18px rgba(37, 99, 235, 0.12));
  transition: transform .24s ease, filter .24s ease;
}

.yz-pd-advantage-card::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.86)),
    linear-gradient(135deg, var(--adv-soft), rgba(255, 255, 255, 0));
  clip-path: inherit;
}

.yz-pd-advantage-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(120deg, transparent 18%, rgba(255, 255, 255, 0.56), transparent 42%);
  opacity: .55;
  transform: translateX(-46%);
  transition: transform .36s ease;
}

.yz-pd-advantage-card:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 24px 24px rgba(37, 99, 235, 0.16));
}

.yz-pd-advantage-card:hover::after {
  transform: translateX(38%);
}

.yz-pd-advantage-column-left .yz-pd-advantage-card:nth-child(2),
.yz-pd-advantage-column-right .yz-pd-advantage-card:nth-child(2) {
  --adv-accent: #0f766e;
  --adv-soft: rgba(20, 184, 166, 0.13);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.34), rgba(125, 211, 252, 0.16));
}

.yz-pd-advantage-column-right .yz-pd-advantage-card:nth-child(1),
.yz-pd-advantage-column-right .yz-pd-advantage-card:nth-child(3) {
  --adv-accent: #7c3aed;
  --adv-soft: rgba(124, 58, 237, 0.13);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(96, 165, 250, 0.16));
}

.yz-pd-advantage-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.yz-pd-advantage-title .yz-pd-advantage-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: #fff;
  font-size: 16px;
}
.yz-pd-advantage-title .yz-pd-advantage-icon::before,
.yz-pd-advantage-title .yz-pd-advantage-icon::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--adv-accent), #7dd3fc);
  transform: rotate(45deg);
}
.yz-pd-advantage-title .yz-pd-advantage-icon::after {
  inset: 8px;
  opacity: 0.42;
  transform: translate(9px, -2px) rotate(45deg);
}
.yz-pd-advantage-title .yz-pd-advantage-icon i {
  position: relative;
  z-index: 2;
}

.yz-pd-advantage-title h3 {
  margin: 0;
  color: var(--adv-accent);
  font-size: 22px;
  line-height: 1.35;
  font-weight: 800;
}

.yz-pd-advantage-card p {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: 420px;
  color: #475569;
  font-size: 15px;
  line-height: 1.75;
}

.yz-pd-advantage-center {
  position: relative;
  min-height: 470px;
  display: grid;
  place-items: center;
}

.yz-pd-advantage-center::before,
.yz-pd-advantage-center::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.yz-pd-advantage-center::before {
  inset: 28px -38px;
  border-radius: 999px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, rgba(96, 165, 250, 0.62), rgba(20, 184, 166, 0.28), rgba(124, 58, 237, 0.6)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 24px 54px rgba(37, 99, 235, 0.1);
}

.yz-pd-advantage-center::after {
  width: calc(100% + 110px);
  height: 1px;
  left: 50%;
  top: 50%;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.36), rgba(124, 58, 237, 0.3), transparent);
  transform: translate(-50%, -50%);
}

.yz-pd-advantage-core {
  position: relative;
  z-index: 2;
  width: min(100%, 318px);
  min-height: 372px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 42px 34px 38px;
  text-align: center;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.9) 52%, rgba(241, 245, 249, 0.96)),
    radial-gradient(circle at 50% 0, rgba(96, 165, 250, 0.24), transparent 42%);
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: 34px;
  box-shadow:
    0 26px 54px rgba(37, 99, 235, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.yz-pd-advantage-core::before,
.yz-pd-advantage-core::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.yz-pd-advantage-core::before {
  inset: 16px;
  border: 1px solid rgba(147, 197, 253, 0.42);
  border-radius: 24px;
}

.yz-pd-advantage-core::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(45, 212, 191, 0.22)),
    linear-gradient(160deg, transparent 0 28%, rgba(96, 165, 250, 0.2) 28% 52%, transparent 52%);
  clip-path: polygon(0 46%, 22% 34%, 46% 56%, 72% 30%, 100% 10%, 100% 100%, 0 100%);
}

.yz-pd-advantage-core-mark,
.yz-pd-advantage-core span,
.yz-pd-advantage-core strong,
.yz-pd-advantage-core-flow,
.yz-pd-advantage-core em {
  position: relative;
  z-index: 1;
}

.yz-pd-advantage-core-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #0ea5e9 56%, #14b8a6);
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.22);
  font-size: 24px;
}

.yz-pd-advantage-core span {
  margin-top: 10px;
  color: #64748b;
  font-size: 18px;
  font-style: normal;
  letter-spacing: 0;
}

.yz-pd-advantage-core strong {
  color: #1d4ed8;
  font-size: 39px;
  line-height: 1.2;
  font-weight: 900;
  text-shadow: 0 10px 20px rgba(37, 99, 235, 0.16);
}

.yz-pd-advantage-core-flow {
  display: grid;
  gap: 8px;
  width: 172px;
  margin-top: 22px;
}

.yz-pd-advantage-core-flow b {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.85), rgba(20, 184, 166, 0.66));
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.12);
}

.yz-pd-advantage-core-flow b:nth-child(2) {
  width: 78%;
  margin-left: auto;
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.72), rgba(124, 58, 237, 0.68));
}

.yz-pd-advantage-core-flow b:nth-child(3) {
  width: 58%;
  margin: 0 auto;
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.7), rgba(96, 165, 250, 0.72));
}

.yz-pd-advantage-core em {
  max-width: 232px;
  margin-top: 18px;
  padding: 7px 14px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 999px;
  color: #1d4ed8;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.1);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.5;
  font-style: normal;
}

.yz-pd-advantage-node {
  position: absolute;
  z-index: 3;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.yz-pd-advantage-node:nth-child(even) {
  background: #8b5cf6;
}

.yz-pd-advantage-node-1 {
  left: -62px;
  top: 23%;
}

.yz-pd-advantage-node-2 {
  right: -62px;
  top: 23%;
}

.yz-pd-advantage-node-3 {
  left: -90px;
  top: 50%;
}

.yz-pd-advantage-node-4 {
  right: -90px;
  top: 50%;
}

.yz-pd-advantage-node-5 {
  left: -62px;
  bottom: 23%;
}

.yz-pd-advantage-node-6 {
  right: -62px;
  bottom: 23%;
}

.yz-pd-app-card .yz-pd-info-icon {
  --app-icon-accent: #0f766e;
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: 42px;
  height: 42px;
  margin-bottom: 0;
  color: #fff;
  background: transparent;
  font-size: 17px;
}

.yz-pd-app-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-content: start;
  column-gap: 16px;
  row-gap: 14px;
}

.yz-pd-app-card h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
}

.yz-pd-app-card p {
  grid-column: 2;
}

.yz-pd-app-card .yz-pd-info-icon::before,
.yz-pd-app-card .yz-pd-info-icon::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--app-icon-accent), #7dd3fc);
  transform: rotate(45deg);
}

.yz-pd-app-card .yz-pd-info-icon::after {
  inset: 12px;
  opacity: 0.42;
  transform: translate(12px, -2px) rotate(45deg);
}

.yz-pd-app-card .yz-pd-info-icon i {
  position: relative;
  z-index: 2;
}

.yz-pd-app-card:nth-child(2) .yz-pd-info-icon {
  --app-icon-accent: #2563eb;
}

.yz-pd-app-card:nth-child(3) .yz-pd-info-icon {
  --app-icon-accent: #4f46e5;
}

.yz-pd-app-card:nth-child(4) .yz-pd-info-icon {
  --app-icon-accent: #ea580c;
}

.yz-pd-cta-band {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
}

/* ---------- Product Intro Section ---------- */
.yz-pd-intro-section {
  padding: 96px 0;
}

.yz-pd-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 42px;
  align-items: start;
  margin-top: 22px;
}

.yz-pd-intro-copy {
  max-width: 1180px;
  margin: 0 auto;
}

.yz-pd-intro-copy p {
  color: #526178;
  line-height: 1.85;
  font-size: 16px;
  margin: 0;
  max-width: 1180px;
}

.yz-pd-intro-image {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.08);
  aspect-ratio: 16 / 9;
  background: #f8fafc;
}

.yz-pd-intro-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Customer Pain Section ---------- */
.yz-pd-pain-section {
  padding: 96px 0;
}

.yz-pd-pain-tabs {
  margin-top: 36px;
}

.yz-pd-pain-btn-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 32px;
  padding: 5px;
  border-radius: 14px;
  background: #f1f5f9;
  max-width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.yz-pd-pain-btn {
  padding: 10px 26px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: #475569;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}

.yz-pd-pain-btn.is-active,
.yz-pd-pain-btn:hover {
  color: #1d4ed8;
}

.yz-pd-pain-btn.is-active {
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.yz-pd-pain-panels {
  min-height: 220px;
}

.yz-pd-pain-panel[hidden] {
  display: none;
}

.yz-pd-pain-panel.is-active {
  display: block;
}

.yz-pd-pain-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 430px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.yz-pd-pain-question-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 430px;
  padding: 58px 62px 46px;
  border-right: 1px solid #e2e8f0;
  background:
    radial-gradient(circle at 76% 76%, rgba(126, 199, 255, 0.24), transparent 24%),
    linear-gradient(145deg, #e9f5ff 0%, #f4f9ff 48%, #eef7ff 100%);
  overflow: hidden;
}

.yz-pd-pain-question-card::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 19px 0 0 19px;
  pointer-events: none;
}

.yz-pd-pain-question-copy {
  position: relative;
  z-index: 2;
  max-width: 520px;
}

.yz-pd-pain-question-copy h3 {
  margin: 0;
  color: #111827;
  font-size: 36px;
  line-height: 1.25;
  font-weight: 700;
}

.yz-pd-pain-question-copy p {
  margin: 48px 0 0;
  color: #111827;
  font-size: 19px;
  line-height: 1.8;
}

.yz-pd-pain-question-copy p span {
  color: #111827;
  font-weight: 700;
}

.yz-pd-pain-brand-mark {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 96px;
  align-items: center;
  gap: 16px;
  width: max-content;
}

.yz-pd-pain-brand-text {
  color: #176bff;
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 10px 22px rgba(37, 99, 235, 0.2);
}

.yz-pd-pain-brand-line {
  display: block;
  width: 96px;
  height: 2px;
  background: #2563eb;
}

.yz-pd-pain-geo {
  position: absolute;
  right: -34px;
  bottom: -26px;
  width: 360px;
  height: 270px;
  opacity: 0.82;
  pointer-events: none;
}

.yz-pd-pain-geo::before {
  content: "";
  position: absolute;
  right: 36px;
  bottom: 16px;
  width: 190px;
  height: 190px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(219, 236, 255, 0.66));
  clip-path: polygon(50% 0, 100% 48%, 52% 100%, 0 50%);
  filter: drop-shadow(0 26px 32px rgba(80, 125, 220, 0.16));
}

.yz-pd-pain-geo-block {
  position: absolute;
  display: block;
  transform: skewY(-24deg) rotate(0deg);
  box-shadow: 0 24px 34px rgba(59, 130, 246, 0.14);
}

.yz-pd-pain-geo-block-a {
  right: 134px;
  bottom: 54px;
  width: 132px;
  height: 130px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(231, 244, 255, 0.68));
}

.yz-pd-pain-geo-block-b {
  right: 8px;
  bottom: 136px;
  width: 156px;
  height: 88px;
  background: linear-gradient(140deg, rgba(100, 126, 255, 0.9), rgba(98, 202, 255, 0.54));
}

.yz-pd-pain-geo-block-c {
  right: -2px;
  bottom: 50px;
  width: 112px;
  height: 106px;
  background: linear-gradient(145deg, rgba(105, 197, 255, 0.78), rgba(137, 122, 255, 0.54));
}

.yz-pd-pain-list-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 42px;
  padding: 64px 72px;
  background: #f8fafc;
}

.yz-pd-pain-list-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.yz-pd-pain-status-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border: 2px solid rgba(239, 68, 68, 0.72);
  border-radius: 50%;
  background: #fff5f5;
  color: #dc2626;
  font-size: 13px;
  font-weight: 900;
}

.yz-pd-pain-status-icon i {
  font-weight: 900;
}

.yz-pd-pain-list-copy h4 {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
}

.yz-pd-pain-list-copy p {
  margin: 0;
  color: #64748b;
  font-size: 16px;
  line-height: 1.65;
}

/* ---------- Delivery Form & Deployment Section ---------- */
.yz-pd-delivery-section .container {
  max-width: 1480px;
}

.yz-pd-delivery-board {
  display: grid;
  gap: 28px;
  margin-top: 46px;
  padding: 34px;
  border: 1px solid #dbeafe;
  border-radius: 24px;
  background: linear-gradient(145deg, #f8fbff 0%, #f1f7ff 100%);
  box-shadow: 0 24px 58px rgba(37, 99, 235, 0.1);
}

.yz-pd-delivery-lane {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.yz-pd-delivery-row {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.yz-pd-delivery-row-label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  margin: 0;
  padding: 18px 12px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.9));
  color: #1d4ed8;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.18;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 14px 28px rgba(37, 99, 235, 0.08);
}

.yz-pd-delivery-row-label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -11px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 12px solid #2563eb;
  filter: drop-shadow(0 4px 8px rgba(37, 99, 235, 0.24));
  transform: translateY(-50%);
}

.yz-pd-delivery-row-label span {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 6px;
}

.yz-pd-delivery-top {
  grid-template-columns: repeat(var(--delivery-count, 4), minmax(0, 1fr));
}

.yz-pd-delivery-bottom {
  grid-template-columns: repeat(var(--delivery-count, 3), minmax(0, 1fr));
}

.yz-pd-delivery-chip {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  color: #1e293b;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.04);
}

.yz-pd-delivery-chip .yz-pd-delivery-chip-icon {
  --badge-accent: #2563eb;
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: #fff;
  font-size: 14px;
}
.yz-pd-delivery-chip .yz-pd-delivery-chip-icon::before,
.yz-pd-delivery-chip .yz-pd-delivery-chip-icon::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--badge-accent), #7dd3fc);
  transform: rotate(45deg);
}
.yz-pd-delivery-chip .yz-pd-delivery-chip-icon::after {
  inset: 7px;
  opacity: 0.42;
  transform: translate(8px, -1px) rotate(45deg);
}
.yz-pd-delivery-chip .yz-pd-delivery-chip-icon i {
  position: relative;
  z-index: 2;
}

.yz-pd-delivery-top .yz-pd-delivery-chip {
  min-height: 100px;
  padding: 16px 18px;
}

.yz-pd-delivery-top .yz-pd-delivery-chip span {
  line-height: 1.55;
}

.yz-pd-delivery-mode {
  min-height: 104px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: center;
  column-gap: 18px;
  text-align: left;
}

.yz-pd-delivery-mode-copy {
  min-width: 0;
}

.yz-pd-delivery-mode small {
  display: block;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.yz-pd-delivery-mode small + small {
  margin-top: 4px;
}

.yz-pd-delivery-mode small strong {
  color: #1e293b;
  font-weight: 800;
}

.yz-pd-delivery-mode-art {
  width: 96px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
}

.yz-pd-delivery-mode-art svg {
  width: 86px;
  height: 68px;
}

.yz-pd-delivery-mode-art svg path,
.yz-pd-delivery-mode-art svg rect,
.yz-pd-delivery-mode-art svg circle {
  fill: none;
  stroke: #2563eb;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.yz-pd-delivery-mode-art svg path:first-child,
.yz-pd-delivery-mode-art svg rect:first-child {
  fill: rgba(37, 99, 235, 0.1);
}

.yz-pd-delivery-core-row {
  display: grid;
  grid-template-columns: repeat(var(--delivery-count, 3), minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  min-width: 0;
}

.yz-pd-delivery-core-card {
  min-height: 226px;
  padding: 30px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 20px 46px rgba(37, 99, 235, 0.18);
}

.yz-pd-delivery-core-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.yz-pd-delivery-core-head .yz-pd-delivery-core-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: #fff;
  font-size: 19px;
}
.yz-pd-delivery-core-head .yz-pd-delivery-core-icon::before,
.yz-pd-delivery-core-head .yz-pd-delivery-core-icon::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(255,255,255,0.32), rgba(255,255,255,0.06));
  transform: rotate(45deg);
}
.yz-pd-delivery-core-head .yz-pd-delivery-core-icon::after {
  inset: 9px;
  opacity: 0.5;
  transform: translate(10px, -2px) rotate(45deg);
}
.yz-pd-delivery-core-head .yz-pd-delivery-core-icon i {
  position: relative;
  z-index: 2;
}

.yz-pd-delivery-core-card h3 {
  margin: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.35;
}

.yz-pd-delivery-core-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.75;
}

/* ---------- Customer Value Section ---------- */
.yz-pd-value-section {
  padding: 96px 0;
}

.yz-pd-value-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 42px;
}

.yz-pd-value-card {
  --value-accent: #2563eb;
  --value-accent-soft: rgba(37, 99, 235, 0.11);
  position: relative;
  min-height: 430px;
  padding: 32px 32px 28px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 24px;
  background: linear-gradient(145deg, #fff 0%, #fff 58%, #f7fbff 100%);
  box-shadow: 0 22px 54px rgba(37, 99, 235, 0.12);
  overflow: hidden;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.yz-pd-value-card:nth-child(2) {
  --value-accent: #0f766e;
  --value-accent-soft: rgba(20, 184, 166, 0.13);
}

.yz-pd-value-card:nth-child(3) {
  --value-accent: #4f46e5;
  --value-accent-soft: rgba(99, 102, 241, 0.13);
}

.yz-pd-value-card:nth-child(4) {
  --value-accent: #ea580c;
  --value-accent-soft: rgba(249, 115, 22, 0.13);
}

.yz-pd-value-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.82);
  pointer-events: none;
}

.yz-pd-value-card:hover {
  transform: translateY(-6px);
  border-color: var(--value-accent);
  box-shadow: 0 24px 58px rgba(37, 99, 235, 0.12);
}

.yz-pd-value-card-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.yz-pd-value-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #fff;
  font-size: 15px;
}

.yz-pd-value-icon::before,
.yz-pd-value-icon::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--value-accent), #7dd3fc);
  transform: rotate(45deg);
}

.yz-pd-value-icon::after {
  inset: 12px;
  opacity: 0.42;
  transform: translate(12px, -2px) rotate(45deg);
}

.yz-pd-value-icon i {
  position: relative;
  z-index: 2;
}

.yz-pd-value-card-head h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 21px;
  color: #0f172a;
  line-height: 1.4;
}

.yz-pd-value-desc {
  position: relative;
  z-index: 2;
  margin: 30px 0 0;
  color: #334155;
  font-size: 16px;
  line-height: 1.85;
}

.yz-pd-value-illustration {
  position: absolute;
  left: 28px;
  right: 24px;
  bottom: 14px;
  z-index: 2;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.yz-pd-value-illustration svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yz-pd-value-illustration img {
  display: block;
  width: 88%;
  height: 88%;
  object-fit: cover;
}

.yz-pd-value-route {
  fill: none;
  stroke: #94a3b8;
  stroke-width: 2;
  stroke-dasharray: 10 10;
}

.yz-pd-value-window {
  fill: #dbeafe;
  stroke: #bfdbfe;
  stroke-width: 4;
}

.yz-pd-value-dot-red {
  fill: #fb7185;
}

.yz-pd-value-dot-yellow {
  fill: #f59e0b;
}

.yz-pd-value-dot-green {
  fill: #22c55e;
}

.yz-pd-value-panel {
  fill: #fff;
  opacity: 0.88;
}

.yz-pd-value-panel-soft {
  fill: #eff6ff;
}

.yz-pd-value-node {
  fill: var(--value-accent);
  opacity: 0.92;
}

.yz-pd-value-node-b {
  opacity: 1;
}

.yz-pd-value-plane {
  fill: #fff;
  stroke: var(--value-accent);
  stroke-width: 3;
}

.yz-pd-value-white {
  fill: #fff;
}

.yz-pd-value-white-stroke,
.yz-pd-value-white-stroke-thin {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.yz-pd-value-white-stroke {
  stroke-width: 5;
}

.yz-pd-value-white-stroke-thin {
  stroke-width: 3;
}

.yz-pd-value-line,
.yz-pd-value-arrow,
.yz-pd-value-check,
.yz-pd-value-quote,
.yz-pd-value-accent-stroke {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.yz-pd-value-line {
  stroke: #bfdbfe;
  stroke-width: 5;
}

.yz-pd-value-arrow,
.yz-pd-value-accent-stroke {
  stroke: var(--value-accent);
  stroke-width: 4;
}

.yz-pd-value-check {
  stroke: #22c55e;
  stroke-width: 4;
}

.yz-pd-value-quote {
  stroke: var(--value-accent);
  stroke-width: 4;
  opacity: 0.45;
}

.yz-pd-value-label {
  fill: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
}

.yz-pd-value-orbit {
  fill: none;
  stroke: var(--value-accent-soft);
  stroke-width: 6;
  stroke-dasharray: 6 12;
}

.yz-pd-value-orbit-ring {
  fill: none;
  stroke: var(--value-accent);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  opacity: 0.5;
}

/* 产品详情页板块进入动效：标题先出现，内容随后跟上。 */
@media (prefers-reduced-motion: no-preference) {
  .yz-pd-page.yz-pd-reveal-ready .yz-pd-reveal-piece {
    opacity: 0;
    transform: translateY(34px);
    transition:
      opacity .72s ease,
      transform .72s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--pd-reveal-delay, 0s);
    will-change: opacity, transform;
  }

  .yz-pd-page.yz-pd-reveal-ready .yz-pd-reveal-piece.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .yz-pd-page.yz-pd-reveal-ready .yz-pd-advantage-card.yz-pd-reveal-piece {
    transform: translateY(28px) scale(.96);
    transition:
      opacity .64s ease,
      transform .64s cubic-bezier(.22, .61, .36, 1),
      filter .24s ease;
  }

  .yz-pd-page.yz-pd-reveal-ready .yz-pd-advantage-card.yz-pd-reveal-piece.is-visible {
    transform: translateY(0) scale(1);
  }

.yz-pd-page.yz-pd-reveal-ready .yz-pd-advantage-card.yz-pd-reveal-piece.is-visible:hover {
    transform: translateY(-5px) scale(1);
  }
}

/* Unified small diamond badge calibration: match .yz-pd-value-icon proportions */
.yz-banner-card-icon,
.yz-pa-icon,
.yz-solution-sub-header .yz-solution-sub-icon,
.yz-about-mv-label .yz-about-mv-icon,
.yz-service-content .yz-service-icon,
.yz-pd-tab-btn .yz-pd-tab-icon,
.yz-pd-advantage-title .yz-pd-advantage-icon,
.yz-pd-delivery-chip .yz-pd-delivery-chip-icon,
.yz-pd-delivery-core-head .yz-pd-delivery-core-icon,
.yz-process-wave-icon,
.yz-contact-card-icon {
  --badge-normalized-accent: #2563eb;
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  flex-shrink: 0;
  background: transparent;
  color: #fff;
  font-size: 15px;
  isolation: isolate;
  overflow: visible;
}

.yz-pd-advantage-title .yz-pd-advantage-icon {
  --badge-normalized-accent: var(--adv-accent);
}

.yz-product-page .yz-service-list .yz-service-row .yz-service-icon {
  --badge-accent: #2563eb;
}

.yz-product-page .yz-service-list .yz-service-row:nth-child(3n+2) .yz-service-icon {
  --badge-accent: #0f766e;
}

.yz-product-page .yz-service-list .yz-service-row:nth-child(3n) .yz-service-icon {
  --badge-accent: #7c3aed;
}

.yz-banner-card-icon::before,
.yz-banner-card-icon::after,
.yz-pa-icon::before,
.yz-pa-icon::after,
.yz-solution-sub-header .yz-solution-sub-icon::before,
.yz-solution-sub-header .yz-solution-sub-icon::after,
.yz-about-mv-label .yz-about-mv-icon::before,
.yz-about-mv-label .yz-about-mv-icon::after,
.yz-service-content .yz-service-icon::before,
.yz-service-content .yz-service-icon::after,
.yz-pd-tab-btn .yz-pd-tab-icon::before,
.yz-pd-tab-btn .yz-pd-tab-icon::after,
.yz-pd-advantage-title .yz-pd-advantage-icon::before,
.yz-pd-advantage-title .yz-pd-advantage-icon::after,
.yz-pd-delivery-chip .yz-pd-delivery-chip-icon::before,
.yz-pd-delivery-chip .yz-pd-delivery-chip-icon::after,
.yz-pd-delivery-core-head .yz-pd-delivery-core-icon::before,
.yz-pd-delivery-core-head .yz-pd-delivery-core-icon::after,
.yz-process-wave-icon::before,
.yz-process-wave-icon::after,
.yz-contact-card-icon::before,
.yz-contact-card-icon::after {
  content: "";
  position: absolute;
  inset: 7px;
  width: auto;
  height: auto;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--badge-accent, var(--badge-normalized-accent)), #7dd3fc);
  box-shadow: none;
  filter: none;
  opacity: 1;
  transform: rotate(45deg);
}

.yz-banner-card-icon::before,
.yz-pa-icon::before,
.yz-solution-sub-header .yz-solution-sub-icon::before,
.yz-about-mv-label .yz-about-mv-icon::before,
.yz-service-content .yz-service-icon::before,
.yz-pd-tab-btn .yz-pd-tab-icon::before,
.yz-pd-advantage-title .yz-pd-advantage-icon::before,
.yz-pd-delivery-chip .yz-pd-delivery-chip-icon::before,
.yz-pd-delivery-core-head .yz-pd-delivery-core-icon::before,
.yz-process-wave-icon::before,
.yz-contact-card-icon::before {
  z-index: 0;
}

.yz-banner-card-icon::after,
.yz-pa-icon::after,
.yz-solution-sub-header .yz-solution-sub-icon::after,
.yz-about-mv-label .yz-about-mv-icon::after,
.yz-service-content .yz-service-icon::after,
.yz-pd-tab-btn .yz-pd-tab-icon::after,
.yz-pd-advantage-title .yz-pd-advantage-icon::after,
.yz-pd-delivery-chip .yz-pd-delivery-chip-icon::after,
.yz-pd-delivery-core-head .yz-pd-delivery-core-icon::after,
.yz-process-wave-icon::after,
.yz-contact-card-icon::after {
  inset: 12px;
  z-index: 1;
  opacity: 0.42;
  transform: translate(12px, -2px) rotate(45deg);
}

.yz-banner-card-icon i,
.yz-pa-icon i,
.yz-solution-sub-header .yz-solution-sub-icon i,
.yz-about-mv-label .yz-about-mv-icon i,
.yz-service-content .yz-service-icon i,
.yz-pd-tab-btn .yz-pd-tab-icon i,
.yz-pd-advantage-title .yz-pd-advantage-icon i,
.yz-pd-delivery-chip .yz-pd-delivery-chip-icon i,
.yz-pd-delivery-core-head .yz-pd-delivery-core-icon i,
.yz-process-wave-icon i,
.yz-contact-card-icon i {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: inherit;
  transform: none;
}

/* ============================================
   Non-home Banner Typography Standard: title 40px / desc 17px not bold
   PC/Desktop only (>992px), does NOT affect mobile or .yz-home-hero
   ============================================ */
@media (min-width: 993px) {
  .yz-about-top-banner-text h1,
  .yz-about-top-banner-text h2,
  .yz-product-hero h1,
  .yz-pd-hero-title,
  .yz-sols-hero h1,
  .yz-sd-hero h1,
  .yz-process-hero h1,
  .yz-cases-hero h1,
  .page-banner-title,
  .sub-page-banner h1 {
    font-size: 40px !important;
  }

  .yz-about-top-banner-text p,
  .yz-product-hero p,
  .yz-pd-hero-sub,
  .yz-sols-hero p,
  .yz-sd-hero p,
  .yz-process-hero p,
  .yz-cases-hero p,
  .page-banner-subtitle,
  .sub-page-banner p {
    font-size: 19px !important;
    font-weight: 400 !important;
  }
}
    /* ===== 解决方案页 —— 全新设计 ===== */
    :root {
      --sol-accent: #2563eb;
      --sol-bg: #eff6ff;
    }

    /* ----- Hero (image banner, product-center style) ----- */
    .yz-sols-hero {
      position: relative;
      min-height: 480px;
      padding: 0;
      background-color: var(--color-primary-dark, #002766);
      background-image: var(--sols-hero-image, none);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-bottom: none;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    .yz-sols-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(0, 40, 104, 0.90) 0%, rgba(0, 55, 140, 0.78) 55%, rgba(0, 82, 217, 0.65) 100%);
      z-index: 0;
    }
    .yz-sols-hero-inner {
      position: relative;
      z-index: 1;
      max-width: 820px;
      margin: 0 auto;
      text-align: center;
    }
    .yz-sols-hero h1 {
      color: #fff;
      font-size: 46px; font-weight: 800; line-height: 1.22;
      margin-bottom: 18px;
    }
    .yz-sols-hero h1 b { color: #fff; font-weight: 800; }
    .yz-sols-hero p {
      color: #fff;
      font-size: 17px; line-height: 1.75; margin: 0 auto 28px;
      max-width: 600px;
    }
    /* ----- 通用 Section ----- */
    .yz-sols-section { padding: 88px 0; }
    .yz-sols-section-alt { background: #f8fafc; }
    .yz-sols-section-head {
      text-align: center; max-width: 620px; margin: 0 auto 56px;
    }
    .yz-sols-kicker {
      display: inline-block;
      font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
      color: #94a3b8; text-transform: uppercase; margin-bottom: 12px;
    }
    .yz-sols-section-head h2 {
      font-size: 38px; font-weight: 800; color: #111827; margin-bottom: 14px;
    }
    .yz-sols-section-head p {
      font-size: 16px; color: #6b7280; line-height: 1.7;
    }

    /* ========== 行业行 ========== */
    .yz-sols-row {
      margin-bottom: 150px;
      scroll-margin-top: 20px;
    }
    .yz-sols-row-head {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 32px; padding-bottom: 16px;
      border-bottom: 2px solid #eef1f6;
    }
    .yz-sols-row-head h3 {
      font-size: 22px; font-weight: 700; color: #111827; margin: 0;
      display: flex; align-items: center; gap: 10px;
    }
    /* Industry row heading icon badge */
    .yz-sols-row-icon {
      position: relative;
      display: inline-grid;
      place-items: center;
      width: 38px; height: 38px;
      min-width: 38px;
      background: transparent;
      color: #fff;
      isolation: isolate;
      overflow: visible;
      flex-shrink: 0;
      font-size: 15px;
    }
    .yz-sols-row-icon::before,
    .yz-sols-row-icon::after {
      content: "";
      position: absolute;
      inset: 7px;
      border-radius: 6px;
      background: linear-gradient(135deg, var(--color-primary, #0052d9), #7dd3fc);
      transform: rotate(45deg);
    }
    .yz-sols-row-icon::before {
      z-index: 0;
    }
    .yz-sols-row-icon::after {
      z-index: 1;
      inset: 12px;
      opacity: .42;
      transform: translate(12px, -2px) rotate(45deg);
    }
    .yz-sols-row-icon i {
      position: relative;
      z-index: 2;
      color: #fff;
    }

    /* ========== 场景方案网格 ========== */
    .yz-sols-scenario-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    /* ========== 场景卡片 ========== */
    .yz-sols-sc-card {
      display: flex; flex-direction: column; text-decoration: none; color: inherit;
      padding: 28px 28px 24px;
      border-radius: 14px;
      background: #fff; border: 1px solid #eef1f6;
      box-shadow: 0 2px 14px rgba(15,23,42,.04);
      transition: all .28s ease;
    }
    .yz-sols-sc-card:hover {
      transform: translateY(-4px);
      border-color: var(--sol-accent);
      box-shadow: 0 12px 32px rgba(0,0,0,.08);
    }
    .yz-sols-sc-card-top {
      display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
    }
    .yz-sols-sc-card-icon {
      width: 38px; height: 38px; min-width: 38px;
      background: transparent;
      display: grid; place-items: center;
      isolation: isolate;
      overflow: visible;
      position: relative;
      font-size: 15px;
      color: #fff;
    }
    .yz-sols-sc-card-icon::before,
    .yz-sols-sc-card-icon::after {
      content: "";
      position: absolute;
      inset: 7px;
      border-radius: 6px;
      background: linear-gradient(135deg, var(--sol-accent), #7dd3fc);
      transform: rotate(45deg);
    }
    .yz-sols-sc-card-icon::before {
      z-index: 0;
    }
    .yz-sols-sc-card-icon::after {
      z-index: 1;
      inset: 12px;
      opacity: .42;
      transform: translate(12px, -2px) rotate(45deg);
    }
    .yz-sols-sc-card-icon i {
      position: relative;
      z-index: 2;
    }
    .yz-sols-sc-card h3 {
      font-size: 18px; font-weight: 700; color: #111827; margin: 0;
      line-height: 1.35;
    }
    .yz-sols-sc-card p {
      font-size: 14px; color: #6b7280; line-height: 1.7; margin: 0 0 16px;
      flex: 1;
      display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .yz-sols-sc-card-tags {
      display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
    }
    .yz-sols-sc-card-tag {
      display: inline-block;
      padding: 4px 12px; border-radius: 4px;
      font-size: 12px; font-weight: 600;
      background: var(--sol-bg); color: var(--sol-accent);
      border: 1px solid transparent;
    }
    .yz-sols-sc-card-cta {
      display: inline-flex; align-items: center; gap: 6px;
      align-self: flex-start;
      padding: 9px 18px;
      border-radius: 8px;
      background: #f1f5f9;
      color: var(--color-primary, #0052d9);
      border: 1px solid #e2e8f0;
      font-size: 14px; font-weight: 700;
      line-height: 1;
      transition: all .3s ease;
    }
    .yz-sols-sc-card-cta i {
      font-size: 12px; transition: transform .3s ease;
    }
    .yz-sols-sc-card:hover .yz-sols-sc-card-cta i {
      transform: translateX(4px);
    }
    .yz-sols-sc-card:hover .yz-sols-sc-card-cta {
      background: #eaf2ff;
      border-color: rgba(0,82,217,.22);
    }

    /* 轮播指示器 */
    .yz-sols-carousel-dots {
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .yz-sols-carousel-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: #d8e2f0; border: none; cursor: pointer;
      transition: all .3s ease; padding: 0; flex-shrink: 0;
    }
    .yz-sols-carousel-dot.active {
      background: var(--color-primary, #0052d9);
      transform: scale(1.25);
    }

    /* ----- 响应式 ----- */
    @media (max-width: 992px) {
      .yz-sols-hero { min-height: 380px; }
      .yz-sols-hero h1 { font-size: 32px; line-height: 1.28; }
      .yz-sols-hero p { font-size: 16px; max-width: 100%; }
      .yz-sols-section-head h2 { font-size: 30px; }
      .yz-sols-scenario-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .yz-sols-sc-card { padding: 22px 22px 20px; }
      .yz-sols-sc-card-icon { width: 38px; height: 38px; min-width: 38px; font-size: 15px; }
      .yz-sols-sc-card h3 { font-size: 16px; }
      .yz-sols-sc-card p { font-size: 13px; -webkit-line-clamp: 3; }
      .yz-sols-row { margin-bottom: 80px; }
    }
    @media (max-width: 576px) {
      .yz-sols-hero { min-height: 320px; }
      .yz-sols-hero h1 { font-size: 26px; }
      .yz-sols-hero p { font-size: 16px; }
      .yz-sols-section-head h2 { font-size: 26px; }
      .yz-sols-scenario-grid { grid-template-columns: 1fr; gap: 12px; }
      .yz-sols-sc-card { padding: 20px; }
      .yz-sols-sc-card-icon { width: 38px; height: 38px; min-width: 38px; font-size: 15px; }
      .yz-sols-sc-card h3 { font-size: 15px; }
      .yz-sols-sc-card p { font-size: 13px; -webkit-line-clamp: 3; }
      .yz-sols-row { margin-bottom: 48px; scroll-margin-top: 12px; }
      .yz-sols-row-head h3 { font-size: 17px; }
    }