/* ============================================================================
   Yinhai Tech —— 前端版式
   ----------------------------------------------------------------------------
   分工：theme.json 管设计 token 与元素默认值；本文件管需要复杂选择器的版式。
   零外部依赖：无 CDN、无 Web Font、无图标库。图标如需图形，用内联 SVG 或 CSS 绘制。
   断点：手机 <640 · 小屏 >=640 · iPad 竖屏 >=768 · iPad 横屏/桌面 >=1024 · 宽屏 >=1280
   ========================================================================== */

/* 风格锁定：冷白 + 深石墨蓝 + 电光蓝 · 圆角 12px · 轻阴影 · 细线图标 · 玻璃拟态数据装饰 */
:root {
  --yt-radius-sm: 8px;
  --yt-radius: 12px;          /* 风格锁定值 */
  --yt-radius-lg: 16px;
  --yt-shadow: 0 6px 22px rgba(13, 21, 38, .07);
  --yt-shadow-lg: 0 16px 44px rgba(13, 21, 38, .11);
  --yt-shadow-brand: 0 10px 28px rgba(29, 107, 255, .26);
  --yt-line: #E3E8F0;         /* 冷细线 */
  --yt-soft: #F7F9FC;         /* 冷灰白底 */
  --yt-ink-900: #0D1526;      /* 深石墨蓝 */
  --yt-ink-700: #2F3B52;      /* 石墨蓝 */
  --yt-ink-500: #5A6680;
  --yt-ink-400: #8B98AC;      /* 石板灰 */
  --yt-brand-900: #0B1220;    /* 深石墨蓝（深色区块底） */
  --yt-brand-700: #16233C;
  --yt-brand-500: #1D6BFF;    /* 电光蓝（主色） */
  --yt-brand-400: #4E8DFF;
  --yt-brand-100: #E4EDFF;
  --yt-brand-50: #F1F6FF;
  --yt-sec-y: clamp(56px, 7vw, 104px);

  /* 玻璃拟态：数据装饰面板统一用它，避免各处手写不一致 */
  --yt-glass-bg: linear-gradient(140deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  --yt-glass-border: rgba(255,255,255,.22);
  --yt-glass-blur: 14px;
}

/* ============================== 区块区块通用 ============================== */
.sec { padding-block: var(--yt-sec-y); }
.sec--soft { background: var(--yt-soft); }
.sec--dark { background: var(--yt-brand-900); color: #C9D6E8; }
.sec--dark .wp-block-heading { color: #fff; }
.sec--dark a { color: #8FB6F5; }
.sec--dark a:hover { color: #fff; }
/* 深色区相邻时不要出现双倍间距（为什么选择 + 合作标识墙 在视觉上是一整块） */
.sec--why { padding-bottom: clamp(24px, 3vw, 44px); }
.sec--clients { padding-top: 0; }

/* ============================== 章节标题 ============================== */
.sec-head { text-align: center; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head .wp-block-heading { font-size: clamp(24px, 3.1vw, 36px); letter-spacing: .01em; }
.sec-head__en {
  margin: 10px 0 0;
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--yt-ink-400);
}
.sec--dark .sec-head__en { color: #6E86A6; }
/* 章节下的补充说明（外贸服务区用了它） */
.sec-head__sub { max-width: 46em; margin: 16px auto 0; font-size: clamp(14px, 1.5vw, 16px); color: var(--yt-ink-500); }
.sec--dark .sec-head__sub { color: #8FA5C2; }
/* 区块内的次要小标题（服务流程 / 客户墙） */
.steps-title, .wall-title {
  margin-top: clamp(40px, 5vw, 64px); margin-bottom: 22px;
  font-size: 20px !important;
}
.steps-title::after, .wall-title::after { display: none; }
/* 中文标题下方那道短蓝线：用伪元素画，不额外加区块 */
.sec-head .wp-block-heading::after {
  content: ""; display: block; width: 44px; height: 3px;
  margin: 18px auto 0; background: var(--yt-brand-500); border-radius: 2px;
}

/* ============================== 顶栏 / 页头 ============================== */
.site-topbar { background: var(--yt-brand-900); font-size: 13px; }
.site-topbar .wp-block-group { color: #93A9C6; }
.site-topbar p { margin: 0; }

/*
 * ★ 顶栏高度必须长在**真正装文字的那一行 flex**（.topbar-inner）上。
 *
 * 之前 min-height:40px 挂在外层包装（.site-topbar > .wp-block-group）上，
 * 而里面那行 flex 只有内容高度 —— 实测那一行高 23px 且**顶部对齐**，
 * 于是文字距顶 0px、距底 17px，视觉上就是「太靠上」。
 * 把高度给到这一行、再 align-items:center，文字才真正居中。
 */
.topbar-inner {
  min-height: var(--yt-topbar-h, 40px);
  align-items: center;
  gap: 18px;
}
.topbar-list {
  color: #93A9C6;
  letter-spacing: .01em;
  line-height: 1.4;
  min-width: 0;          /* 允许在小屏被压缩，而不是把电话挤出视口 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右侧联系方式：图标 + 号码，左侧一条极细分隔线，
   把「一句宣传语」和「一个联系方式」在视觉上分开 */
.topbar-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.topbar-phone .yt-icon { color: var(--yt-brand-400); flex: none; }
.topbar-phone__num { letter-spacing: .01em; }
.topbar-phone::before {
  content: "";
  width: 1px; height: 14px;
  margin-right: 4px;
  background: rgba(255, 255, 255, .18);
  flex: none;
}

/* ---- 顶栏右侧：电话 + 商城按钮 ---- */
.topbar-right { gap: 14px; align-items: center; }
.topbar-shop-wrap { margin: 0; }
.topbar-shop {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--yt-brand-500);
  color: #fff !important;              /* 覆盖 .sec--dark a 之类可能命中的链接色 */
  font-size: 12.5px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background .16s, box-shadow .16s, transform .16s;
}
.topbar-shop .yt-icon { color: currentColor; flex: none; }
.topbar-shop:hover {
  background: var(--yt-brand-400);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(29, 107, 255, .35);
}
/* 手机上顶栏本就隐藏（.site-topbar display:none），这里不用再做收口 */

/* ★ 吸顶必须挂在 <header class="wp-block-template-part"> 上，不能挂在 .site-header 上。
 *
 * 为什么：`position: sticky` 只在**父容器的范围**内粘。
 *   .site-header 的父元素，正是模板部件包出来的那层 header，高度只有 113px
 *   （深色信息条 40 + 导航 73）—— 它只能在 113px 内粘，于是滚过去就跟着走了。
 *   实测（真浏览器）：滚动 800px 后 .site-header 的 top = -760，
 *   与一个普通静态元素的位置**完全一致**，说明 sticky 一点作用都没起。
 *   而模板部件的父级是整页的 .wp-site-blocks（7130px 高），挂这一层才粘得稳。
 *
 * 为什么用负 top：信息条是次要信息，一直占着顶部会挤掉正文。
 *   top = -40px 让信息条正好滚出视口，导航条停在 0。
 *   手机上信息条本来就是 display:none，所以那里 top 要回到 0。
 */
:root {
  --yt-topbar-h: 40px;    /* 与 .site-topbar 的 min-height 对应 */
  --yt-adminbar-h: 0px;   /* 登录后台时 WP 工具栏会占住顶部，页头要让开 */
}
body.admin-bar { --yt-adminbar-h: 32px; }
@media screen and (max-width: 782px) { body.admin-bar { --yt-adminbar-h: 46px; } }
@media (max-width: 1023px) { :root { --yt-topbar-h: 0px; } }  /* 与 .site-topbar display:none 的断点一致 */

header.wp-block-template-part {
  position: sticky;
  top: calc(var(--yt-adminbar-h) - var(--yt-topbar-h));
  z-index: 90; /* 低于核心导航的移动端覆盖菜单，高于正文全部内容 */
}

.site-header {
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--yt-line);
  transition: box-shadow .22s, border-color .22s;
}
/* 滚动后的状态：类由 assets/js/header.js 加。没有 JS 也照常吸顶，只是少这道阴影。 */
.site-header.is-stuck {
  box-shadow: 0 6px 22px rgba(13, 21, 38, .09);
  border-bottom-color: transparent; /* 已经有阴影了，再画分割线显脏 */
}

/* 吸顶页头会盖住锚点目标，滚动定位时留出补偿 */
html { scroll-padding-top: 96px; }
.header-inner { min-height: 72px; gap: 20px; }

/* 品牌 */
.brand { gap: 11px; }
.brand-text { line-height: 1.15; }
.brand .wp-block-site-title { font-size: 17px; font-weight: 800; letter-spacing: .06em; }
.brand .wp-block-site-title a { color: var(--yt-ink-900); text-decoration: none; }
/*
 * 站名下面那行小字 —— 2026-09-23 老陈要求换成「chenhaiiot」，并指定**大写显示**。
 *
 * 做法：HTML 里保留小写原文 `chenhaiiot`（域名本来就这么写，语义正确），
 * 由 CSS 的 text-transform 负责显示成 CHENHAIIOT。
 * 想改回小写只需删掉下面这一行，不用动模板。
 */
.brand-en {
  margin: 0; font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--yt-ink-400);
}
.brand .wp-block-site-logo img { border-radius: 10px; }

/* 主导航（核心 Navigation 区块自带移动端覆盖菜单，无需额外脚本） */
.site-nav { flex: 1 1 auto; justify-content: center; }
.site-nav .wp-block-navigation-item__content {
  padding: 10px 14px; border-radius: 10px;
  font-size: 15px; font-weight: 500; color: var(--yt-ink-700);
  text-decoration: none; transition: color .16s, background .16s;
}
/*
 * 悬停：底色变品牌蓝 + 字变白（老陈 2026-09-23 指定）。
 *
 * ★ 下拉的父项在"下拉展开期间"也要保持高亮，否则鼠标一移开父项就变回灰色。
 *   核心不会给父项加"已展开"类，所以用 :hover / :focus-within 覆盖整个 .has-child ——
 *   :focus-within 还顺带把键盘 Tab 的可见焦点照顾到了（可访问性）。
 *
 * ★ 选择器都带 :root 前缀：核心 navigation 样式表里
 *   `.wp-block-navigation .has-child .wp-block-navigation__submenu-container`
 *   已经是 (0,3,0)，跟普通写法**同分** —— 同分就只能比样式表先后，那是"靠运气"。
 *   前缀 :root 把权重抬到 (0,4,0) 以上，与加载顺序无关。（见 CLAUDE.md §七 那条教训）
 */
:root .site-nav .wp-block-navigation-item__content:hover,
:root .site-nav .has-child:hover > .wp-block-navigation-item__content,
:root .site-nav .has-child:focus-within > .wp-block-navigation-item__content {
  color: #fff; background: var(--yt-brand-500);
}
:root .site-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--yt-brand-500); font-weight: 700; }
:root .site-nav .current-menu-item > .wp-block-navigation-item__content:hover { color: #fff; }
/* 下拉箭头跟随文字颜色（核心已写 stroke:currentColor，这里只调大小/间距） */
.site-nav .wp-block-navigation__submenu-icon { width: .62em; height: .62em; margin-left: .38em; opacity: .75; }

/* ---------------------------------------------------------------- 下拉面板 */
/*
 * 只在桌面端接管样式；**移动端一律交给核心的覆盖菜单**（它在 .is-menu-open 里
 * 把子菜单设成 position:static、缩进 2rem）。用媒体查询隔离，免得把手机菜单弄坏。
 */
@media (min-width: 1024px) {

  /* 面板本体 */
  :root .site-nav .has-child > .wp-block-navigation__submenu-container {
    background: #fff;
    border: 1px solid var(--yt-line);
    border-radius: 14px;
    box-shadow: 0 20px 44px rgba(13, 21, 38, .16), 0 2px 6px rgba(13, 21, 38, .06);
    padding: 10px;
    gap: 2px;
    min-width: 240px;
    left: 0;
    top: calc(100% + 12px);
    overflow: visible;   /* 圆角靠 border-radius，不要 overflow:hidden 免得切掉阴影 */
  }

  /*
   * 面板上方那条 12px 的"透明桥"。
   * 没有它的话，鼠标从导航项往下移进面板的瞬间会离开 :hover 区域，下拉立刻收起 ——
   * 这是最典型的"下拉点不到"故障。
   */
  :root .site-nav .has-child > .wp-block-navigation__submenu-container::before {
    content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
    background: transparent;
  }

  /* 面板里的每一项 */
  :root .site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block; width: 100%;
    padding: 9px 13px; border-radius: 9px;
    font-size: 14.5px; font-weight: 500; color: var(--yt-ink-700);
    white-space: nowrap;
  }
  /* 面板内的悬停（同样蓝底白字，保持一致） */
  :root .site-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
  :root .site-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content:hover {
    background: var(--yt-brand-500); color: #fff;
  }
  /* 面板里的当前页 */
  :root .site-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
    color: var(--yt-brand-500); font-weight: 700; background: var(--yt-brand-50);
  }

  /*
   * 产品中心：11 项排两列（"大栏目"观感）。
   * 核心给子菜单容器写的是 display:flex; flex-direction:column，这里改成 grid。
   * 选择器带上 .wp-block-navigation__submenu-container 两重类名，权重高于核心规则，
   * 不依赖样式表先后。
   */
  :root .site-nav .wp-block-navigation__submenu-container.nav-mega-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(196px, 1fr));
    min-width: 470px;
    column-gap: 4px;
  }
  /* 两列里每项等宽，长名称不换行撑破面板 */
  :root .site-nav .wp-block-navigation__submenu-container.nav-mega-2col .wp-block-navigation-item { width: 100%; }
}

/* 头部右侧 */
.header-cta { gap: 12px; }
/* 语言切换器。
   Polylang 输出的是 <ul><li>，所以这里要清掉列表默认样式。
   非当前语言用一个分隔符与当前语言隔开，看起来像 "简体中文 | English"。 */
.lang-switch {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 0; list-style: none;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--yt-ink-500);
}
.lang-switch li { display: inline-flex; align-items: center; margin: 0; }
.lang-switch li + li::before {
  content: "|"; margin: 0 8px; color: var(--yt-line); font-weight: 400;
}
.lang-switch a { color: var(--yt-ink-500); text-decoration: none; }
.lang-switch a:hover { color: var(--yt-brand-500); }
.lang-switch .current-lang a { color: var(--yt-brand-500); }
.lang-switch .lang-item-en a { letter-spacing: .04em; }
.lang-switch--placeholder {
  padding: 7px 12px; border: 1px solid var(--yt-line); border-radius: 999px;
  cursor: default; letter-spacing: .06em;
}
.header-cta .wp-block-button__link { padding: 11px 22px; font-size: 15px; }

/* ============================== 首屏 ============================== */
.hero {
  position: relative;   /* 3D 粒子画布的定位父级 */
  overflow: hidden;     /* 粒子越界不要撑出横向滚动条 */
  background:
    radial-gradient(1100px 480px at 78% -12%, #DCE9FC 0%, rgba(220, 233, 252, 0) 62%),
    linear-gradient(180deg, var(--yt-brand-50) 0%, #fff 78%);
  padding-block: clamp(48px, 6vw, 92px) clamp(56px, 7vw, 104px);
}
/* 3D 粒子背景层：在背景之上、内容之下。
   pointer-events:none 是必须的 —— 它是纯装饰，不能挡住按钮点击。 */
.hero-particles {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero > .wp-block-group { position: relative; z-index: 1; }
.hero-grid { gap: clamp(28px, 5vw, 56px); }
.hero .wp-block-heading {
  font-size: clamp(27px, 3.6vw, 44px); line-height: 1.22;
  letter-spacing: -.01em;
  /* 参考稿里标题是一行。中文每字 1em，13 字 ×44px≈572px 刚好放进左列；
     text-wrap:balance 保证万一换行也是匀称两行，不会出现「…软件平 / 台」这种孤字。 */
  text-wrap: balance;
}
.hero .wp-block-heading .accent { color: var(--yt-brand-500); }
.hero-eyebrow {
  display: inline-block; margin: 0 0 22px;
  padding: 7px 14px; background: #fff; border: 1px solid var(--yt-brand-100);
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--yt-brand-500);
}
.hero-sub { margin: 20px 0 0; max-width: 34em; font-size: clamp(15px, 1.6vw, 17px); color: var(--yt-ink-500); }
.hero-actions { margin-top: 32px; gap: 14px; }

.hero-stats { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--yt-line); gap: 8px; }
.hero-stat { flex: 1 1 0; }
.hero-stat__num { margin: 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; color: var(--yt-brand-500); letter-spacing: -.01em; }
.hero-stat__label { margin: 0; font-size: 13px; color: var(--yt-ink-400); }

/* 右侧主图。
 * 两种形态：
 *   .hero-visual             —— 没装图时用纯 CSS 画一个界面示意（零外链，页面不开天窗）
 *   .hero-visual--shot       —— 装了真实截图（媒体库 hero-dashboard）
 * 装图：php tools\install-media.php <图片> hero-dashboard "<alt>"
 */
.hero-visual {
  position: relative; aspect-ratio: 4 / 3; padding: 18px;
  border-radius: var(--yt-radius-lg);
  background: linear-gradient(150deg, #16233C, #123A80 55%, #1D6BFF);
  box-shadow: var(--yt-shadow-lg);
  overflow: hidden;
}
/* 纯 CSS 示意只在没有真实截图时画 */
.hero-visual:not(.hero-visual--shot)::before {
  content: ""; position: absolute; inset: 18px;
  border-radius: 12px 12px 8px 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0 26px, rgba(255,255,255,.96) 26px),
    repeating-linear-gradient(0deg, #EFF3F8 0 1px, transparent 1px 30px);
}
.hero-visual:not(.hero-visual--shot)::after {
  content: ""; position: absolute; left: 40px; right: 40px; bottom: 34%; height: 3px;
  background: var(--yt-brand-500); border-radius: 3px;
  clip-path: polygon(0 62%, 12% 34%, 24% 52%, 38% 14%, 52% 42%, 66% 8%, 80% 30%, 100% 0, 100% 100%, 0 100%);
}

/* 真实截图形态：图片铺满，圆角与阴影沿用同一套 token */
.hero-visual--shot { padding: 0; background: #0B1220; }
.hero-visual--shot .hero-shot { margin: 0; width: 100%; height: 100%; }
.hero-visual--shot .hero-shot__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--yt-radius-lg);
}
/* 底部压一层极淡的暗角，让浮在上面的玻璃徽标读得清 */
.hero-visual--shot::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(180deg, rgba(11,18,32,0), rgba(11,18,32,.42));
  pointer-events: none;
}

.hero-visual__badge {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  margin: 0; padding: 11px 16px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(var(--yt-glass-blur));
  -webkit-backdrop-filter: blur(var(--yt-glass-blur));
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--yt-radius);
  box-shadow: var(--yt-shadow-lg);
  font-size: 13px; font-weight: 700; color: var(--yt-ink-900);
  display: flex; align-items: center; gap: 9px;
}
/* 徽标前的小圆点：用 CSS 画，不引图标库。
   ⚠️ 2026-09-22：原本是绿色（表示"系统运行正常"）—— 那枚徽标的文案
   「系统运行正常 · 可用率 99.9%」是没有事实依据的占位数字，已删除；
   现在徽标是示意图的**标注**（设备接入 · 数据汇聚 · 算法分析 · 业务应用），
   绿色"在线"点会误导，改成品牌蓝。 */
.hero-visual__badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--yt-brand-500); box-shadow: 0 0 0 4px rgba(29,107,255,.16); flex: none;
}

/* ============================== 卡片栅格 ============================== */
.card-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  height: 100%; padding: 26px 22px;
  background: #fff; border: 1px solid var(--yt-line);
  border-radius: var(--yt-radius);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.card:hover { border-color: var(--yt-brand-100); box-shadow: var(--yt-shadow); transform: translateY(-2px); }
.card .wp-block-heading { font-size: 17px; margin-bottom: 8px; }
.card p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--yt-ink-500); }
.card__no { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--yt-brand-400); }

/* 高亮卡（行业解决方案里的"外贸出海"） */
.card--hi {
  background: linear-gradient(160deg, #16233C, #1D6BFF);
  border-color: transparent; box-shadow: var(--yt-shadow-brand);
}
.card--hi .wp-block-heading { color: #fff; }
.card--hi p { color: rgba(255, 255, 255, .85); }

/* ★ 卡片标题里如果套了链接（行业方案卡就是这样），链接色**必须继承标题色**。
 *   否则高亮卡是蓝底、而默认链接色也是蓝的 —— 蓝底蓝字，等于看不见。
 *   默认链接色来自 WP 全局样式，优先级不低，所以这里要显式覆盖。 */
.card .wp-block-heading a { color: inherit; text-decoration: none; }
.card .wp-block-heading a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------ 行业解决方案：悬停变蓝 ------------------------------
 * 需求：鼠标指向任意一张卡，它就变成和高亮卡一样的蓝底白字。
 *
 * 为什么用 ::after 叠一层渐变而不是直接换 background：
 *   CSS 的 background 过渡对 **渐变不生效**（linear-gradient 不可插值），
 *   直接改会"啪"地硬切，很难看。叠一层 opacity 过渡就顺滑了。
 *   代价是卡片自己的白底还在最下面 —— 由这层盖住，不影响观感。
 * 为什么 :not(.card--hi)：高亮卡本来就是蓝的，再叠一层会变暗。
 * 为什么不用 .card:hover：能力区（.card-grid）那批卡是白底方案，
 *   只有行业解决方案这个区块要求"整卡变蓝"，所以作用域限定在 .sec--ind。
 */
.sec--ind .card { position: relative; overflow: hidden; }
.sec--ind .card::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(160deg, #16233C, #1D6BFF);
  opacity: 0; transition: opacity .24s ease;
  pointer-events: none;           /* 别挡住卡片里的链接点击 */
}
.sec--ind .card > * { position: relative; z-index: 1; }  /* 内容压在渐变之上 */
.sec--ind .card .wp-block-heading,
.sec--ind .card p,
.sec--ind .card .card__icon { transition: color .24s ease, background-color .24s ease, border-color .24s ease; }

@media (hover: hover) {           /* 触屏设备上不要"粘住"悬停态 */
  .sec--ind .card:not(.card--hi):hover {
    border-color: transparent;
    box-shadow: var(--yt-shadow-brand);
  }
  .sec--ind .card:not(.card--hi):hover::after { opacity: 1; }
  .sec--ind .card:not(.card--hi):hover .wp-block-heading { color: #fff; }
  .sec--ind .card:not(.card--hi):hover p { color: rgba(255, 255, 255, .86); }
  .sec--ind .card:not(.card--hi):hover .card__icon {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
  }
}

/* 深色区里的卡 */
.sec--dark .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.sec--dark .card:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); }
.sec--dark .card p { color: #8FA5C2; }

/* ============================== 合作标识墙 ============================== */
.logo-wall { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px)  { .logo-wall { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .logo-wall { grid-template-columns: repeat(6, 1fr); } }
.logo-wall__tile {
  min-height: 74px; padding: 10px;
  display: grid; place-items: center; text-align: center;
  background: rgba(255,255,255,.96); border-radius: var(--yt-radius-sm);
  transition: transform .18s, box-shadow .18s;
}
.logo-wall__tile:hover { transform: translateY(-2px); box-shadow: var(--yt-shadow); }
.logo-wall__tile p { margin: 0; font-size: 13px; font-weight: 600; color: var(--yt-ink-500); }
.logo-wall__tile.is-hi { background: linear-gradient(160deg, #2059A8, #2F6FE0); }
.logo-wall__tile.is-hi p { color: #fff; }

/* ============================== 结尾 CTA ============================== */
.cta-band__sub { max-width: 40em; margin: 16px auto 30px; color: var(--yt-ink-500); }
.cta-band .wp-block-buttons { gap: 14px; }

/* ============================== 页脚 ============================== */
.site-footer { background: var(--yt-brand-900); color: #8497B4; font-size: 14px; }
.site-footer p { margin: 0; }
.site-footer a { color: #8497B4; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid; gap: 34px; grid-template-columns: 1fr;
  padding-block: clamp(44px, 5vw, 68px);
}
@media (min-width: 640px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; } }

.footer-brand .wp-block-site-title a { color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .06em; text-decoration: none; }
.footer-desc { margin-top: 18px !important; line-height: 1.85; max-width: 32em; }
.footer-tel { margin-top: 18px !important; }
.footer-tel { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.footer-col .wp-block-heading { font-size: 15px; color: #fff; margin-bottom: 16px; }
.footer-col .wp-block-list { list-style: none; padding: 0; margin: 0; }
.footer-col li + li { margin-top: 10px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 20px; font-size: 13px; color: #6B7F9C;
}

/* ============================== 栏目页卡片网格 ==============================
 * 栏目页（/news/、/industry/、分类归档…）统一用这套：图片在上的竖版卡片，
 * 桌面 3 列 · iPad 2 列 · 手机 1 列。
 *
 * 为什么不再用「一行一张的横向大卡」：
 *   一行一张时卡片宽 1200px，而标题+摘要只有一两行 —— 内容全挤在左边、
 *   右边一大片空白，看着就像坏了（用户反馈的「内容都拥挤在左边」就是这个）。
 *   三列每张约 380px，文字自然铺满，观感也更接近参考稿。
 */
.post-grid .wp-block-post-template {
  display: grid; gap: 24px; grid-template-columns: 1fr;
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 640px)  { .post-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-grid .wp-block-post-template { grid-template-columns: repeat(3, 1fr); } }
/*
 * ★ 网格必须挂在 .wp-block-post-template 上，不能挂在外面的 .post-grid 组上。
 *   WordPress 渲染 wp:post-template 时会多包一层
 *       <ul class="wp-block-post-template"> … <li class="wp-block-post post-N post …"> …
 *   外层那个 group 只有 <ul> 一个子元素 —— 把 grid-template-columns 挂在外层，
 *   等于只给 <ul> 分了 3 列里的第 1 列，于是 <li> 全部挤在左边一列里竖着排。
 *   （实测过：卡片被压到 ~432px 宽一列，右边全空。）
 */

.pager { gap: 8px; margin-top: 40px; }
.pager .wp-block-query-pagination-numbers { display: flex; gap: 8px; }
.pager a, .pager .page-numbers {
  min-width: 40px; height: 40px; padding-inline: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--yt-line); border-radius: var(--yt-radius-sm);
  font-size: 14px; color: var(--yt-ink-700); background: #fff; text-decoration: none;
}
.pager a:hover { border-color: var(--yt-brand-400); color: var(--yt-brand-500); }
.pager .current { background: var(--yt-brand-500); border-color: var(--yt-brand-500); color: #fff; font-weight: 700; }

/* ============================== 文章内页正文排版 ============================== */
.site-main .wp-block-post-content { font-size: 16px; line-height: 1.95; }
.site-main .wp-block-post-content > * + * { margin-top: 1.15em; }
.site-main .wp-block-post-content h2 {
  font-size: clamp(20px, 2.2vw, 24px); margin-top: 2.1em;
  padding-left: 14px; border-left: 4px solid var(--yt-brand-500);
}
.site-main .wp-block-post-content h3 { font-size: 18px; margin-top: 1.8em; }
.site-main .wp-block-post-content ul { list-style: disc; padding-left: 1.35em; }
.site-main .wp-block-post-content ol { list-style: decimal; padding-left: 1.35em; }
.site-main .wp-block-post-content a { color: var(--yt-brand-500); }

/*
 * ★★ 正文区里的按钮必须是**白字**（2026-09-24 实测的真实配色 bug）
 *
 * theme.json 给 button 元素设了 color.text = base(#FFFFFF)，但它编译出来是
 * `:root :where(.wp-element-button)` —— 权重只有 (0,1,0)；
 * 而上面那条 `.site-main .wp-block-post-content a` 是 (0,2,1)，**把它整条压掉了**。
 * 结果：正文区里的**实底按钮变成"蓝底蓝字"**，字等于看不见
 * （MES 产品页的「数字孪生演示」按钮实测 color 与 background 都是 rgb(29,107,255)）。
 * 页眉/侧栏的按钮不在 .wp-block-post-content 里，所以一直是对的 —— 这也解释了
 * 为什么只有正文区那几个出问题。
 *
 * 修法：在**同一权重层级**补一条（0,3,0 > 0,2,1），ghost 变体再往上盖一层。
 */
.site-main .wp-block-post-content .wp-block-button__link {
  color: var(--wp--preset--color--base);
}
.site-main .wp-block-post-content .wp-block-button__link:hover {
  color: var(--wp--preset--color--base);
}
/* 次要按钮（白底）在正文区里要反回来用品牌蓝字，否则白底白字 */
.site-main .wp-block-post-content .wp-block-button.is-style-yinhai-ghost .wp-block-button__link {
  color: var(--yt-brand-500);
}
.site-main .wp-block-post-content .wp-block-button.is-style-yinhai-ghost .wp-block-button__link:hover {
  color: var(--yt-brand-700);
}
.site-main .wp-block-post-content img { border-radius: var(--yt-radius-sm); }

/* ============================== 移动端收口 ============================== */
@media (max-width: 1023px) {
  /* 顶栏在手机上隐藏：信息密度不值那 40px */
  .site-topbar { display: none; }
  /* 头部只留品牌 + 汉堡（核心 Navigation 自动变成覆盖菜单） */
  .header-cta .wp-block-buttons { display: none; }
}
@media (max-width: 639px) {
  .hero-visual__badge { left: 8px; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
}

/* ============================== 细线图标 ============================== */
.yt-icon { display: block; flex: none; }
.card__icon {
  width: 44px; height: 44px; margin-bottom: 16px;
  display: grid; place-items: center;
  border-radius: var(--yt-radius-sm);
  background: var(--yt-brand-50); color: var(--yt-brand-500);
  border: 1px solid var(--yt-brand-100);
}
.card__icon .yt-icon { width: 21px; height: 21px; }
.card--hi .card__icon { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .26); color: #fff; }
.sec--dark .card__icon { background: rgba(78, 141, 255, .14); border-color: rgba(78, 141, 255, .28); color: #7FADFF; }

/* 行内小图标（列表项、流程步骤、卖点） */
.yt-icon-inline { display: inline-flex; align-items: center; gap: 9px; }
.yt-icon-inline .yt-icon { width: 18px; height: 18px; color: var(--yt-brand-500); }

/* ============================== 玻璃拟态数据装饰 ============================== */
/*
 * 用途：深色区块上的数据面板、首屏浮层、客户案例指标卡。
 * 关键：backdrop-filter 需要下层有内容才看得出效果 —— 所以总是叠在渐变/图形之上。
 * 降级：不支持 backdrop-filter 的浏览器拿到半透明底，仍然可读。
 */
.glass {
  background: var(--yt-glass-bg);
  border: 1px solid var(--yt-glass-border);
  border-radius: var(--yt-radius);
  backdrop-filter: blur(var(--yt-glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--yt-glass-blur)) saturate(160%);
  box-shadow: 0 8px 32px rgba(11, 18, 32, .24);
}
.glass p { margin: 0; color: rgba(255, 255, 255, .9); }
.glass__num { font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; color: #fff; letter-spacing: -.01em; }
.glass__label { font-size: 12.5px; color: rgba(255, 255, 255, .72); }

/* 数据条：一排玻璃小面板，放在深色区块标题下方 */
.glass-row { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-bottom: clamp(28px, 3.5vw, 44px); }
@media (min-width: 768px) { .glass-row { grid-template-columns: repeat(4, 1fr); } }
.glass-row .glass { padding: 16px 18px; }

/* ============================== 外贸推广服务（googles-seo 业务线） ============================== */
.svc-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

.svc {
  height: 100%; padding: 26px 24px;
  background: #fff; border: 1px solid var(--yt-line); border-radius: var(--yt-radius);
  display: flex; flex-direction: column;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.svc:hover { border-color: var(--yt-brand-100); box-shadow: var(--yt-shadow); transform: translateY(-2px); }
.svc__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.svc__icon {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--yt-radius-sm);
  background: var(--yt-brand-50); border: 1px solid var(--yt-brand-100); color: var(--yt-brand-500);
}
.svc__icon .yt-icon { width: 20px; height: 20px; }
.svc .wp-block-heading { font-size: 17px; margin: 0; }
.svc p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--yt-ink-500); }
/* 价格标签：外贸服务是明码标价的，价格必须显眼 */
.svc__price {
  margin-top: auto; padding-top: 16px;
  font-size: 14px; font-weight: 700; color: var(--yt-brand-500);
  border-top: 1px dashed var(--yt-line);
}
.svc__price small { display: block; font-weight: 500; font-size: 12px; color: var(--yt-ink-400); margin-top: 4px; }

/* 报价卡底部动作：查看详情 + 立即询价。
   「立即询价」是主行动（实心），「查看详情」是次行动（描边）——
   这个区块的转化目标是拿询盘，不是让人逛商品详情，所以主次要分清。 */
.svc__actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px !important;
}
.svc__actions a {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.svc__more {
  color: var(--yt-ink-700) !important;
  background: #fff; border: 1px solid var(--yt-line);
}
.svc__more:hover { border-color: var(--yt-brand-400); color: var(--yt-brand-500) !important; }
.svc__quote {
  color: #fff !important;
  background: var(--yt-brand-500); border: 1px solid transparent;
}
.svc__quote:hover { background: var(--yt-brand-400); transform: translateY(-1px); }

/* 服务流程：5 步横向 */
.steps { display: grid; gap: 18px; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 640px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.step { position: relative; padding: 20px 18px; background: var(--yt-soft); border-radius: var(--yt-radius); }
.step__no {
  width: 28px; height: 28px; margin-bottom: 12px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--yt-brand-500); color: #fff;
  font-size: 13px; font-weight: 800;
}
.step .wp-block-heading { font-size: 15px; margin-bottom: 6px; }
.step p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--yt-ink-500); }

/* ============================== 案例与客户（合并区） ============================== */
/* 案例卡：左文右数据（数据用玻璃拟态，呼应"数据感"） */
.case-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .case-grid { grid-template-columns: repeat(3, 1fr); } }
.case {
  height: 100%; border-radius: var(--yt-radius-lg); overflow: hidden;
  background: linear-gradient(150deg, #16233C, #123A80 55%, #1D6BFF);
  border: 1px solid rgba(255,255,255,.10);
}
.case__body { padding: 24px; position: relative; z-index: 2; }
.case__domain { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.case .wp-block-heading { font-size: 18px; color: #fff; margin-bottom: 10px; }
.case p { margin: 0; color: rgba(255,255,255,.84); font-size: 14px; line-height: 1.7; }
.case__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.case__metric { padding: 12px 10px; text-align: center; }
.case__metric b { display: block; font-size: 18px; font-weight: 800; color: #fff; }
.case__metric span { font-size: 11.5px; color: rgba(255,255,255,.68); }

/* 客户标识墙（与案例同区） */
.client-wall { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin-top: 28px; }
@media (min-width: 640px)  { .client-wall { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .client-wall { grid-template-columns: repeat(6, 1fr); } }
.client-wall__tile {
  min-height: 68px; padding: 10px;
  display: grid; place-items: center; text-align: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--yt-radius-sm);
  transition: background .18s, border-color .18s, transform .18s;
}
.client-wall__tile:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.24); transform: translateY(-2px); }
.client-wall__tile p { margin: 0; font-size: 13px; font-weight: 600; color: #B9C6DC; }

/* ============================== 联系表单 ============================== */
.form-card {
  padding: clamp(24px, 3vw, 40px);
  background: #fff; border: 1px solid var(--yt-line);
  border-radius: var(--yt-radius-lg); box-shadow: var(--yt-shadow);
}
.form-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--yt-ink-900); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 12px 14px;
  font: inherit; font-size: 15px; color: var(--yt-ink-900);
  background: var(--yt-soft);
  border: 1px solid var(--yt-line); border-radius: var(--yt-radius-sm);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  background: #fff; border-color: var(--yt-brand-400);
  box-shadow: 0 0 0 3px var(--yt-brand-100); outline: none;
}
.form-field textarea { min-height: 132px; resize: vertical; }
.form-field .req { color: var(--yt-brand-500); }
.form-note { margin: 0; font-size: 13px; color: var(--yt-ink-400); }
/* 表单实际提交流程由表单插件（Fluent Forms / CF7）接管；这里只提供样式容器 */

/* ============================== 网格容器的 margin 清零 ============================== */
/*
 * 这里修的是一个肉眼可见的版式 bug。
 * 症状：网格第一格正常，同排其余各格整体下沉约 18px —— 看起来「第一格浮高」。
 *
 * 成因：WordPress 给每个 group 自动加 `is-layout-flow`，并输出——
 *     :root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }
 *     :root :where(.is-layout-flow) > *            { margin-block: 1.15em 0 }   ← 来自 theme.json 的 blockGap
 *   组内除第一个子元素外统统被压下 1.15em，而我们的网格已用 `gap` 控间距，两者叠加：
 *   ① 同排第一格位置正常，第 2..N 格整体下移；
 *   ② 被下移的格子高度 = 单元格高度 - 1.15em → 同排高度也不齐。
 *
 * ★★ 这个 bug 已犯过两次，第二次返工后才查清真正的根因 —— 务必看懂：★★
 *
 *   旧写法是 `.card-grid > *`，优先级 (0,1,0)；WP 的 `:root :where(.is-layout-flow) > *`
 *   也是 (0,1,0)（`:where()` 记 0 分，只剩 `:root` 的 1 分）—— **完全同分**。
 *   同分就只比先后，而 theme.css 当时恰好排在 `global-styles-inline-css` 之后，
 *   于是「看起来修好了」。
 *
 *   已用真实浏览器（CDP）逐条匹配规则实测确认，页面上同时存在：
 *     global-styles-inline-css : `:root :where(.is-layout-flow) > *` { margin-block: 1.15em 0 }
 *     yinhai-tech-theme-css    : `.tst__metrics > *`               { margin-block: 0 }
 *   两者同分，我们的规则胜出**纯属样式表顺序的运气**。
 *
 *   所以任何改变样式表顺序、或合并/内联 CSS 的东西（缓存插件、CSS 优化插件、
 *   enqueue 优先级变动、换服务器、上 CDN）都会让它**静默复发**，且不报任何错。
 *   这才是它反复出现的真正原因：不是「忘了加类名」，是**修复本身不稳**。
 *
 *   现改用 `:root` 前缀把优先级抬到 **(0,2,0)**，无论样式表谁先谁后都稳赢。
 *   故意不用 !important —— 那会把后续调试变成猜谜。
 *
 * 只清「网格/列表容器」的直接子元素；卡片**内部**（图标 → 标题 → 段落）的
 * 1.15em 间距是设计要的，不动。
 *
 * ★ 新增网格容器时必须把类名加进下面这份清单。两道检查会拦住漏加：
 *     php  tools\check-grid-margins.php                     ← 免浏览器，静态 DOM 快检
 *     node tools\browser.js check http://127.0.0.1:8096/    ← 真实浏览器几何校验（权威）
 */
:root .card-grid > *,
:root .svc-grid > *,
:root .steps > *,
:root .glass-row > *,
:root .case-grid > *,
:root .case__metrics > *,
:root .client-wall > *,
:root .logo-wall > *,
:root .footer-grid > *,
:root .form-grid > *,
:root .post-grid > *,
/* 正文页两栏布局（single.html / page.html）。.layout 一旦变成栅格，
   .side 作为第 2 个子元素就会被 WP 的 flow 规则压下 1.15em —— 正是那个老 bug。 */
:root .layout > *,
:root .side__list > *,
:root .side > *,
/* 页面标题带：面包屑 / 标题 / 副标题的间距由上面的 .pagehead 规则控制，
   不能让 WP 的 blockGap 再插一脚。 */
:root .pagehead > *,
/* 栏目卡片：真正的网格容器是 WP 自己包的那层 <ul class="wp-block-post-template">，
   WP 同样会给它加 is-layout-flow，不清零的话第 2 张起会被压下 1.15em。 */
:root .post-grid .wp-block-post-template > *,
:root .hero-stats > *,
/* 询盘表单（inc/inquiry.php）：它也是 display:grid 的容器，必须一起清零。
   实测漏加时 browser.js 门禁报 flow-margin-residue：
   p.inquiry-hp / p.inquiry-submit 被 WP 的流式规则压下 16px / 4px。 */
:root .inquiry-form > *,
:root .tst-grid > *,
:root .tst__metrics > *,
:root .post.wp-block-group > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* 侧栏咨询电话 */
.side__tel { margin: 12px 0 0 !important; text-align: center; font-size: 13px; color: var(--yt-ink-400); }

/* ============================== 栏目页卡片（.post）==============================
 * /news/、/industry/、分类归档 统一用它，形态与首页的能力卡片一致。
 *
 * ★ 必须带 .wp-block-group 限定 —— 这是撞名事故的修复：
 *   WordPress 的 post_class() 会给每个查询项加一个**裸 `post` 类**
 *   （<li class="wp-block-post post-1 post type-post …">），和本站自己的 `.post` 撞名。
 *   实测后果（2026-09-18 用真实浏览器量到）：<li> 被当成 .post 变成 `232px 948px`
 *   两列网格，卡片被挤进 232px 列，右边空出 948px。
 *   加 .wp-block-group 限定后，只命中本站那个 <div class="wp-block-group post">。
 */
.post.wp-block-group {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--yt-line);
  border-radius: var(--yt-radius); overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.post.wp-block-group:hover {
  border-color: var(--yt-brand-100); box-shadow: var(--yt-shadow); transform: translateY(-2px);
}

/* 缩略图 */
.post .wp-block-post-featured-image { margin: 0; aspect-ratio: 16 / 10; }
.post .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 没有特色图时的占位：品牌渐变 + 细网格（呼应「数据感」），卡片顶部不塌陷。
   :has() 不支持时整条规则失效 → 卡片只是少一块顶部区域，属于安全降级。 */
.post.wp-block-group:not(:has(.wp-block-post-featured-image))::before {
  content: ""; display: block; aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.06) 0 1px, transparent 1px 28px),
    linear-gradient(150deg, #16233C, #123A80 58%, #1D6BFF);
}

.post__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.post__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  /* ★ ink-400(#8B98AC) 压白底对比度只有 2.92，低于 WCAG AA 的 4.5 —— 12.5px 的小字更糟。
     改 ink-500(#5A6680) 后是 5.76，过 AA。（2026-09-24 全站对比度扫描发现） */
  font-size: 12.5px; color: var(--yt-ink-500); margin-bottom: 10px;
}
.post__meta a { color: var(--yt-ink-500); text-decoration: none; }
.post__meta a:hover { color: var(--yt-brand-500); }
.post .wp-block-post-title { font-size: 17.5px; line-height: 1.45; margin-bottom: 10px; }
.post .wp-block-post-title a { text-decoration: none; color: var(--yt-ink-900); }
.post .wp-block-post-title a:hover { color: var(--yt-brand-500); }
.post .wp-block-post-excerpt__excerpt {
  font-size: 13.5px; line-height: 1.75; color: var(--yt-ink-500); margin: 0 0 18px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post .wp-block-read-more {
  margin-top: auto; font-size: 14px; font-weight: 600;
  color: var(--yt-brand-500); text-decoration: none;
}
.post .wp-block-read-more:hover { text-decoration: underline; }

/* ============================== 页面标题带（栏目页 / 单页通用） ==============================
 * .pagehead / .pagehead__sub / .breadcrumb 出现在 index.html、archive.html、
 * archive-job.html、single.html 四个模板里，但 CSS **一直没写**。
 *
 * 实测（真实 DOM 审计）：这几个类在页面上存在，样式表里却搜不到任何规则 ——
 * 于是标题、面包屑、副标题全按浏览器默认排版，面包屑还带着 <p> 自带的上下边距，
 * 表现就是「栏目导航/标题错位」。这类"类名写了、CSS 没写"的漏洞静态扫 PHP 模板不可靠
 * （pattern 里有 `card<?php echo $x ?>` 这种插值），要用真实 DOM 审计。
 */
.pagehead {
  background: linear-gradient(180deg, var(--yt-brand-50) 0%, #fff 100%);
  border-bottom: 1px solid var(--yt-line);
  padding-block: clamp(28px, 3.6vw, 48px) clamp(26px, 3.2vw, 42px);
}
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px; font-size: 13px; color: var(--yt-ink-400);
}
.breadcrumb a { color: var(--yt-ink-400); text-decoration: none; }
.breadcrumb a:hover { color: var(--yt-brand-500); }
.breadcrumb span { color: var(--yt-ink-400); opacity: .55; }

.pagehead h1,
.pagehead .wp-block-query-title,
.pagehead .wp-block-heading {
  margin: 0; font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.25; letter-spacing: -.01em;
}
.pagehead h1::after,
.pagehead .wp-block-query-title::after,
.pagehead .wp-block-heading::after { display: none; }   /* 不用章节标题那道短蓝线 */
.pagehead__sub {
  margin: 12px 0 0; max-width: 46em;
  font-size: clamp(14px, 1.5vw, 16px); color: var(--yt-ink-500);
}

/* ------------------------------ 按钮 ------------------------------ */
/* 主行动按钮：比默认按钮更突出（大一圈 + 品牌投影） */
.wp-block-button.is-cta .wp-block-button__link {
  padding: 13px 28px; font-size: 15px;
  box-shadow: var(--yt-shadow-brand);
}
/*
 * 次要按钮。
 * ★ functions.php 用 register_block_style() 注册了 `yinhai-ghost`（「次要按钮」），
 *   但没给 inline_style，样式表里也没有对应规则 —— 结果首页「查看案例」和
 *   「免费咨询」长得一模一样，次要样式等于不存在（实测：.is-style-yinhai-ghost
 *   在 DOM 里但无任何 CSS 规则）。这里补上。
 */
.wp-block-button.is-style-yinhai-ghost .wp-block-button__link {
  background: #fff; color: var(--yt-brand-500);
  border: 1px solid var(--yt-brand-100);
  box-shadow: var(--yt-shadow);
}
.wp-block-button.is-style-yinhai-ghost .wp-block-button__link:hover {
  background: var(--yt-brand-50);
  border-color: var(--yt-brand-400);
  color: var(--yt-brand-500);
}
/* 深色区里的次要按钮要反过来，否则白底白字 */
.sec--dark .wp-block-button.is-style-yinhai-ghost .wp-block-button__link {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  box-shadow: none;
}
.sec--dark .wp-block-button.is-style-yinhai-ghost .wp-block-button__link:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

/* ============================== 正文页 / 单页：两栏布局 ==============================
 * single.html 与 page.html 用的是同一套类名：.layout > (.article + .side)。
 *
 * ⚠️ 这套类名在模板里写了很久，但 CSS **一直没写** —— 于是：
 *   · .layout 不是栅格，侧栏被挤到正文**下面**，不是旁边；
 *   · .side__list 是 wp:page-list / wp:latest-posts，按浏览器默认渲染成
 *     **带圆点的 disc 列表 + 40px 左缩进**，在白色卡片里明显错位。
 * （实测：/about/ 上 .side__list 的 list-style=disc，padding-left=40px，
 *   且样式表里搜不到任何 .side__list 规则。）
 */
.layout { display: grid; gap: clamp(28px, 3.4vw, 48px); grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .layout--aside-right { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}
.article { min-width: 0; }

/* 正文头部 */
.article__head { margin-bottom: clamp(20px, 2.4vw, 30px); }
.article .wp-block-post-title {
  font-size: clamp(23px, 3vw, 34px); line-height: 1.32; letter-spacing: -.01em; margin-bottom: 14px;
}
.article__meta { gap: 8px 18px; font-size: 13px; color: var(--yt-ink-400); }
.article__meta a { color: var(--yt-ink-400); text-decoration: none; }
.article__meta a:hover { color: var(--yt-brand-500); }
.article__meta > * + *::before {
  content: "·"; margin-right: 14px; color: var(--yt-line);
}
.article__figure { margin: 0 0 clamp(24px, 3vw, 34px); border-radius: var(--yt-radius); overflow: hidden; }
.article__figure img { width: 100%; height: auto; display: block; }
.article__foot { margin-top: clamp(28px, 3.4vw, 40px); padding-top: 24px; border-top: 1px solid var(--yt-line); }

/* ------------------------------ 侧栏 ------------------------------ */
.side { display: flex; flex-direction: column; gap: 20px; }
.side__box {
  padding: 22px;
  background: #fff; border: 1px solid var(--yt-line); border-radius: var(--yt-radius);
}
/* 标题左侧那道蓝线：与章节标题的手法是同一套视觉语言 */
.side__title {
  margin: 0 !important; padding-left: 11px;
  border-left: 3px solid var(--yt-brand-500);
  font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--yt-ink-900);
}

/* ★ 栏目导航 / 相关阅读
 *   wp:page-list 与 wp:latest-posts 都会把我们的类名加在默认的 <ul> 上，
 *   不写这段就是「圆点 + 40px 缩进」的浏览器默认样式。
 *   这里统一改成：无符号、无缩进、行间一条虚线分隔、hover 右移一点。 */
.side__list { list-style: none; margin: 0; padding: 0; }
.side__list > li { margin: 0; padding: 0; }
.side__list > li::marker { content: none; }
.side__list > li + li { border-top: 1px dashed var(--yt-line); }
.side__list > li > a {
  display: block; padding: 9px 0;
  font-size: 14px; line-height: 1.5; color: var(--yt-ink-700); text-decoration: none;
  transition: color .16s, padding-left .16s;
}
.side__list > li > a:hover { color: var(--yt-brand-500); padding-left: 5px; }
/* 当前所在页高亮（wp:page-list 会给当前项加 current_page_item / current-menu-item） */
.side__list > .current_page_item > a,
.side__list > .current-menu-item > a { color: var(--yt-brand-500); font-weight: 700; }
/* wp:latest-posts 的日期（本主题关闭了日期，这里兜底） */
.side__list .wp-block-latest-posts__post-date { display: block; font-size: 12px; color: var(--yt-ink-400); }

/* 侧栏里的按钮撑满，视觉上更像一个行动区 */
.side__box .wp-block-button, .side__box .wp-block-button__link { width: 100%; }
.side__box .wp-block-button__link { text-align: center; }

/* ============================== 标签与上下篇（文章内页） ============================== */
.tags { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; font-size: 13px; color: var(--yt-ink-400); }
.tags a {
  padding: 6px 14px; border-radius: var(--yt-radius-pill, 999px);
  background: var(--yt-brand-50); border: 1px solid var(--yt-brand-100);
  color: var(--yt-brand-700, #16233C); text-decoration: none; font-size: 13px;
}
.tags a:hover { background: var(--yt-brand-100); }
.navlinks { gap: 12px; margin-top: 22px; }
.navlinks .wp-block-post-navigation-link {
  border: 1px solid var(--yt-line); border-radius: var(--yt-radius-sm);
  padding: 15px 18px; font-size: 14px;
}
.navlinks .wp-block-post-navigation-link a { color: var(--yt-ink-700); text-decoration: none; }
.navlinks .wp-block-post-navigation-link a:hover { color: var(--yt-brand-500); }

/* ============================== 团队成员 ============================== */
.team-card { text-align: center; }
.team-card .avatar {
  width: 72px; height: 72px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, #16233C, #1D6BFF);
  box-shadow: var(--yt-shadow-brand);
}
.team-card .avatar p {
  margin: 0; font-size: 28px; font-weight: 800; color: #fff; line-height: 1;
}
/* 真实头像（wp:image）：圆形裁切与文字居中对齐 */
.team-card .wp-block-image { margin: 0 auto 16px; width: 72px; }
.team-card .wp-block-image img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
/* 一圈浅色描边，让头像从卡片白底上"浮"出来。
   用 box-shadow 而不是 border —— border 会把 72px 撑成 74px，
   四张头像尺寸就不一致了。 */
.team-card__photo img { box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--yt-line); }
.team-card__name { font-size: 17px; margin-bottom: 4px !important; }
.team-card__role {
  margin: 0 0 12px !important; font-size: 13px; font-weight: 600;
  color: var(--yt-brand-500); letter-spacing: .02em;
}
.team-card__bio { font-size: 13.5px !important; line-height: 1.7; color: var(--yt-ink-500); }

/* ============================== 客户评价与成果 ============================== */
.tst-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px)  { .tst-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tst-grid { grid-template-columns: repeat(3, 1fr); } }

.tst {
  height: 100%; padding: 26px 24px;
  background: #fff; border: 1px solid var(--yt-line);
  border-radius: var(--yt-radius);
  display: flex; flex-direction: column;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.tst:hover { border-color: var(--yt-brand-100); box-shadow: var(--yt-shadow); transform: translateY(-2px); }

.tst__head { gap: 12px; margin-bottom: 18px; }
.tst__mark {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center; border-radius: var(--yt-radius-sm);
  background: var(--yt-brand-50); border: 1px solid var(--yt-brand-100);
}
.tst__mark p { margin: 0; font-size: 19px; font-weight: 800; color: var(--yt-brand-500); line-height: 1; }
.tst__domain { margin: 0 !important; font-size: 14.5px; font-weight: 700; color: var(--yt-ink-900); letter-spacing: .02em; }
.tst__field { margin: 2px 0 0 !important; font-size: 12.5px; color: var(--yt-ink-400); }

/* 指标：整块用浅底，让数字跳出来 */
.tst__metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 14px 12px; margin-bottom: 16px;
  background: var(--yt-soft); border-radius: var(--yt-radius-sm);
}
.tst__metric { text-align: center; }
.tst__metric p { margin: 0; }
.tst__metric b { display: block; font-size: 19px; font-weight: 800; color: var(--yt-brand-500); letter-spacing: -.01em; }
.tst__metric span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--yt-ink-400); line-height: 1.4; }

.tst__desc { margin: 0 !important; font-size: 13.5px; line-height: 1.75; color: var(--yt-ink-500); }
.tst__quote-pending {
  margin: auto 0 0 !important; padding-top: 16px;
  border-top: 1px dashed var(--yt-line);
  font-size: 12px; color: var(--yt-ink-400); font-style: normal;
}
.tst-note { margin-top: 28px !important; font-size: 12.5px; color: var(--yt-ink-400); }

/* ============================== 商城（WooCommerce · 目录模式） ==============================
 * Woo 的区块模板会带一整套自己的样式（浅灰底、方角、自己的按钮）。
 * 这里不是"覆盖它的全部"，只做三件必要的事：
 *   ① 把商品卡改成本站的卡片语言（白底 / 圆角 12 / 细描边 / 悬浮微抬）；
 *   ② **隐藏 Woo 自带的「Read more」按钮** —— 目录模式下它和
 *      「立即询价」是同一件事的两种说法，两个按钮并排只会让人犹豫；
 *   ③ 把「立即询价」做成卡片里的唯一主行动。
 * 其余（标题、价格、图片）沿用 Woo 的结构，只在字号与颜色上校准。
 */
.wc-block-product-template .wc-block-product,
ul.products li.product {
  display: flex; flex-direction: column;
  padding: 0 0 18px;
  background: #fff;
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-radius);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.wc-block-product-template .wc-block-product:hover,
ul.products li.product:hover {
  border-color: var(--yt-brand-100);
  box-shadow: var(--yt-shadow);
  transform: translateY(-2px);
}

/* 商品图：统一 4:3 裁切，避免不同尺寸图片把整行高度拉歪 */
.wc-block-product .wc-block-components-product-image,
.wc-block-product .wp-block-woocommerce-product-image {
  margin: 0 0 14px;
  aspect-ratio: 4 / 3;
  background: var(--yt-soft);
  overflow: hidden;
}
.wc-block-product .wc-block-components-product-image img,
.wc-block-product .wp-block-woocommerce-product-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 标题与价格 */
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-title {
  margin: 0 14px 6px;
  font-size: 15.5px; line-height: 1.45;
}
.wc-block-product .wp-block-post-title a { color: var(--yt-ink-900); text-decoration: none; }
.wc-block-product .wp-block-post-title a:hover { color: var(--yt-brand-500); }

/* 报价：用主题色加粗，这是商城主信息 */
.wc-block-product .yinhai-price,
.wc-block-product .wc-block-components-product-price {
  display: block;
  margin: 0 14px 10px;
  font-size: 14px; font-weight: 700; color: var(--yt-brand-500);
  line-height: 1.5;
}

/* ★ 隐藏 Woo 自带的 Read more —— 目录模式下「立即询价」才是唯一动作 */
.wc-block-product .wc-block-components-product-button,
.wc-block-product .wp-block-woocommerce-product-button,
.wc-block-product .added_to_cart { display: none !important; }

/* 「立即询价」：卡片底部的主按钮，撑满整宽 */
.yinhai-quote-btn {
  display: block;
  margin: auto 14px 0;      /* margin-top:auto 让它在等高卡片里始终贴底对齐 */
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--yt-brand-500);
  color: #fff !important;
  font-size: 13.5px; font-weight: 600; line-height: 1;
  text-align: center; text-decoration: none;
  transition: background .16s, transform .16s, box-shadow .16s;
}
.yinhai-quote-btn:hover {
  background: var(--yt-brand-400);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(29, 107, 255, .3);
}

/* 商品详情页：把询价按钮从摘要区里"提"出来，做得更显眼 */
.single-product .yinhai-quote-btn {
  display: inline-block;
  margin: 18px 0 0;
  padding: 14px 34px;
  font-size: 15px;
}
/* 详情页不再显示 Woo 的价格区第二遍（报价已由过滤器统一输出） */
.single-product .summary .price { display: block; margin-bottom: 6px; }

/* 排序下拉与结果计数：与站点风格对齐 */
.woocommerce-products-header,
.wp-block-woocommerce-product-results-count,
.wc-block-product-results-count { font-size: 13.5px; color: var(--yt-ink-500); }
.wc-block-catalog-sorting select {
  padding: 8px 12px; border: 1px solid var(--yt-line); border-radius: var(--yt-radius-sm);
  background: #fff; font-size: 13.5px; color: var(--yt-ink-700);
}

/* 可访问性：尊重减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================== 询盘表单（inc/inquiry.php 渲染） ============================== */
.inquiry-form {
  display: grid; gap: 14px;
  max-width: 640px; margin: 0;
  padding: 22px;
  background: var(--yt-white, #fff);
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-radius-lg, 16px);
  box-shadow: var(--yt-shadow-sm, 0 1px 2px rgba(13,21,38,.06));
}
.inquiry-field { margin: 0; display: grid; gap: 6px; }
.inquiry-field label { font-size: 13.5px; font-weight: 700; color: var(--yt-ink-900); }
.inquiry-field .req { color: #D92D20; }
.inquiry-field input,
.inquiry-field textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--yt-line); border-radius: var(--yt-radius-sm, 8px);
  background: #fff; font: inherit; font-size: 15px; color: var(--yt-ink-900);
  /* 移动端字号 >= 15px，避免 iOS 聚焦时自动放大 */
}
.inquiry-field input:focus,
.inquiry-field textarea:focus {
  outline: 2px solid var(--yt-brand-500); outline-offset: 1px; border-color: var(--yt-brand-500);
}
.inquiry-field textarea { resize: vertical; min-height: 120px; }
.inquiry-submit { margin: 4px 0 0; }
.inquiry-privacy { margin: 0; font-size: 12.5px; color: var(--yt-ink-500); }

/* 蜜罐：对真人不可见，但**不能用 display:none** —— 部分机器人会跳过隐藏元素。
   用绝对定位移出视口，保持"可聚焦但看不见"。 */
.inquiry-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.inquiry-note {
  max-width: 640px; margin: 0 0 14px;
  padding: 12px 15px; border-radius: var(--yt-radius-sm, 8px);
  font-size: 14px; font-weight: 600;
  border: 1px solid transparent;
}
.inquiry-note.is-ok  { background: #ECFDF3; border-color: #A6F4C5; color: #067647; }
.inquiry-note.is-err { background: #FEF3F2; border-color: #FDA29B; color: #B42318; }

/* 表单里的主按钮沿用主题按钮样式；这里只补尺寸 */
.inquiry-submit .wp-block-button__link { padding: 12px 24px; cursor: pointer; }

/* ============================================================================
   视觉优化（2026-09-23 · 老陈："下面的介绍和栏目优化好看，现在比较单调"）
   ----------------------------------------------------------------------------
   这一整块是**纯样式**改动，没有动任何标记与文案：
     ① 章节标题：英文副标题提到标题**上方**做成小胶囊（eyebrow），层次拉开
     ② 卡片：图标底色/描边/悬浮抬升统一，鼠标移上去顶部滑出品牌色高光条
     ③ 产品卡：等高、底部动作区用发丝线分开
     ④ 服务流程：步骤之间加连接线，序号做成渐变圆
     ⑤ 区块节奏：浅色区改渐变、相邻区块之间加发丝分隔
   选择器一律带 :root 前缀 —— 抬到 (0,3,0) 以上，不依赖样式表先后
   （CLAUDE.md §七 那条"修复不能靠加载顺序的运气"）。
   ========================================================================== */

/* ---------------------------------------------------------------- ① 章节标题 */
:root .sec-head {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
}
/* 用 gap 控制间距，就不需要子元素自带 margin —— 一并清掉，
   免得跟 WP 的流式规则(.is-layout-flow > *)打架（那正是"第一格浮高"的老毛病）。 */
:root .sec-head > * { margin: 0; }
:root .sec-head .sec-head__sub { width: 100%; max-width: 46em; line-height: 1.75; }

/* 英文副标题 → 标题上方的胶囊标签 */
:root .sec-head__en {
  order: -1;                    /* 纯 CSS 提到标题上方，不动标记 */
  margin: 0;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--yt-brand-50);
  border: 1px solid var(--yt-brand-100);
  color: var(--yt-brand-500);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
}
:root .sec--dark .sec-head__en {
  background: rgba(78, 141, 255, .14);
  border-color: rgba(78, 141, 255, .3);
  color: #9CC2FF;
}
/* 标题下那道短蓝线：改成渐变，端点不突兀 */
:root .sec-head .wp-block-heading::after {
  background: linear-gradient(90deg, var(--yt-brand-500), var(--yt-brand-400));
}

/* ---------------------------------------------------------------- ⑤ 区块节奏 */
/* 浅色区用极淡的纵向渐变代替纯色，区块之间不再"一块一块硬拼" */
:root .sec--soft { background: linear-gradient(180deg, #F7F9FC 0%, #FBFCFE 100%); }
/* 相邻两个浅色区块之间补一条发丝分隔，避免连成一片看不出分节 */
:root .sec--soft + .sec--soft { box-shadow: inset 0 1px 0 var(--yt-line); }

/* ---------------------------------------------------------------- ② 卡片统一 */
:root .card,
:root .svc {
  position: relative; overflow: hidden;
  background: #fff;
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-radius-lg);
  padding: 24px 22px;
  box-shadow: 0 1px 2px rgba(13, 21, 38, .04);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* 鼠标移上去：整体抬起 + 顶部滑出品牌色高光条 */
:root .card::before,
:root .svc::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--yt-brand-500), var(--yt-brand-400));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s ease;
}
:root .card:hover,
:root .svc:hover {
  transform: translateY(-4px);
  border-color: var(--yt-brand-100);
  box-shadow: var(--yt-shadow-lg);
}
:root .card:hover::before,
:root .svc:hover::before { transform: scaleX(1); }

/* 图标徽章：统一成"浅蓝底 + 电光蓝图标"的圆角方块 */
:root .card__icon,
:root .svc__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--yt-brand-50);
  border: 1px solid var(--yt-brand-100);
  color: var(--yt-brand-500);
  flex: none;
}
:root .svc__head { align-items: center; gap: 13px; margin-bottom: 12px; }
:root .card .wp-block-heading,
:root .svc .wp-block-heading { color: var(--yt-ink-900); }

/* 高亮卡（智慧方案里被强调的那张）：渐变底 + 更实的阴影，视觉重心明确 */
:root .card--hi {
  background: linear-gradient(150deg, #16233C 0%, #123A80 55%, #1D6BFF 100%);
  border-color: transparent;
  box-shadow: var(--yt-shadow-brand);
}
:root .card--hi .card__icon {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .26);
  color: #fff;
}

/*
 * ★ 深色区块里的卡片必须保持"深色玻璃"。
 *   实测踩到：上面 `:root .card { background:#fff }` 与原有的
 *   `.sec--dark .card` 权重**同为 (0,2,0)**，我的规则在文件后面 → 白底赢了，
 *   「为什么选择晨海智能」那张深色区直接变成一片白卡片，设计的深浅节奏全丢了。
 *   这里用 (0,3,0) 显式压回来，并且**不依赖文件顺序**。
 */
:root .sec--dark .card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
}
:root .sec--dark .card:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .22);
}
:root .sec--dark .card p { color: #8FA5C2; }
:root .sec--dark .card .wp-block-heading { color: #fff; }
:root .sec--dark .card__no { color: #7FADFF; }
:root .sec--dark .card__icon {
  background: rgba(78, 141, 255, .14);
  border-color: rgba(78, 141, 255, .28);
  color: #7FADFF;
}

/* ---------------------------------------------------------------- ③ 产品卡 */
/* 等高，底部动作区永远贴底对齐 */
:root .svc { display: flex; flex-direction: column; height: 100%; }
:root .svc > p { margin-bottom: 0; }
:root .svc .svc__actions {
  margin-top: auto !important;
  padding-top: 16px;
  border-top: 1px solid var(--yt-line);
}

/* ---------------------------------------------------------------- ④ 服务流程 */
:root .step {
  background: #fff;
  border: 1px solid var(--yt-line);
  border-radius: var(--yt-radius-lg);
  box-shadow: 0 1px 2px rgba(13, 21, 38, .04);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
:root .step:hover { transform: translateY(-4px); box-shadow: var(--yt-shadow); border-color: var(--yt-brand-100); }
:root .step__no {
  width: 34px; height: 34px; margin-bottom: 14px;
  background: linear-gradient(140deg, var(--yt-brand-500), var(--yt-brand-400));
  box-shadow: 0 6px 14px rgba(29, 107, 255, .28);
  font-size: 14px; font-weight: 800;
}
/* 步骤之间的连接线（只在桌面端一行五列时画） */
@media (min-width: 1024px) {
  :root .steps { gap: 18px; }
  :root .step:not(:last-child)::after {
    content: ""; position: absolute;
    top: 37px; left: 100%; width: 18px; height: 2px;
    background: linear-gradient(90deg, var(--yt-brand-100), var(--yt-brand-400));
  }
}