/* ==========================================================================
   爱智星官网 — UI 精修层（polish）
   在 style.css（骨架）与 themes.css（配色主题）之上做视觉打磨。
   1. 深色区块扩面   2. 卡片/按钮微渐变   3. 深色区配图同色蒙版   4. 圆角层级补 xs
   全部为纯视觉增强，不改结构、不改文案。
   ========================================================================== */

/* ---------- 1. 深色区块扩面 ---------- */

/* 首页「明星产品」深色带内的 pl-card：三张卡统一深蓝渐变底（底色/文字由 style.css 的
   .pl-entry .pl-card 统一处理），这里只补深底上的层次与主推卡的强调 */
.section-deep .pl-card { box-shadow: 0 22px 50px -28px rgba(0, 0, 0, .7); }
.section-deep .pl-card:hover { border-color: rgba(255, 255, 255, .3); }
/* 主推卡：加亮蓝渐变 + 描边 + 更强投影，全站最显眼位置 */
.section-deep .pl-card.is-primary {
  background: linear-gradient(158deg, var(--brand-light) 0%, var(--brand) 58%, var(--brand-dark) 100%);
  border-color: rgba(255, 255, 255, .3);
  box-shadow: 0 26px 60px -26px rgba(67, 171, 255, .5);
}
.section-deep .pl-card.is-primary .pl-tag { background: var(--cyan); }

/* 深色带内的次级信息提亮 */
.section-deep .pl-idx { color: rgba(255, 255, 255, .6); }
.section-deep .lead,
.section-deep .section-head .lead { color: rgba(214, 230, 245, .82); }

/* 深色带内的 feat-list / spec-table：白底组件一律转半透明白，避免大面积白块刺眼 */
.section-deep .feat { border-top-color: rgba(255, 255, 255, .16); }
.section-deep .feat:last-child { border-bottom-color: rgba(255, 255, 255, .16); }
.section-deep .feat h4 { color: #fff; }
.section-deep .feat p { color: rgba(214, 230, 245, .8); }
.section-deep .feat-key {
  background: rgba(67, 171, 255, .16);
  color: #9fd4ff;
}
.section-deep .spec-table { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); }
.section-deep .spec-table th,
.section-deep .spec-table td { border-bottom-color: rgba(255, 255, 255, .14); color: rgba(238, 246, 255, .92); }
.section-deep .spec-table thead th { background: rgba(67, 171, 255, .14); color: #fff; }
.section-deep .dh-card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
}
.section-deep .dh-card h3 { color: #fff; }
.section-deep .dh-card p { color: rgba(214, 230, 245, .78); }
.section-deep .dh-tags li { background: rgba(67, 171, 255, .16); color: #9fd4ff; }
.section-deep .small.muted { color: rgba(255, 255, 255, .55); }
.section-deep .h-3 { color: #fff; }

/* ---------- 2. 卡片 / 按钮微渐变 ---------- */

/* 主按钮：3%~5% 的斜向渐变，避免大色块的塑料感 */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 52%, var(--brand) 100%);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand-dark) 78%, var(--brand-dark) 100%);
}

/* 卡片：顶部 2px 渐变描边，hover 时由中心向两侧展开 */
.pl-card, .robot-card, .feat, .dh-card, .info-card {
  position: relative;
  overflow: hidden;
}
.pl-card::before, .robot-card::before, .feat::before,
.dh-card::before, .info-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand-light), var(--cyan), var(--brand-light));
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.pl-card:hover::before, .robot-card:hover::before, .feat:hover::before,
.dh-card:hover::before, .info-card:hover::before { opacity: 1; }

/* 已带深色底的卡片不需要顶部描边（会与 is-primary 冲突） */
.pl-card.is-primary::before { display: none; }

/* 服务客户 chips：悬停微渐变 */
.chips li:hover {
  background: linear-gradient(135deg, var(--bg-blue), #fff);
  border-color: var(--brand-light);
  color: var(--brand);
}

/* 深色带内的 chips 反色 */
.section-deep .chips li {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(238, 246, 255, .9);
}
.section-deep .chips li:hover {
  background: linear-gradient(135deg, rgba(67, 171, 255, .26), rgba(255, 255, 255, .1));
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
}
.section-deep .client-group { border-top-color: rgba(255, 255, 255, .14); }
.section-deep .client-group:last-child { border-bottom-color: rgba(255, 255, 255, .14); }
.section-deep .client-group h4 span { color: rgba(255, 255, 255, .55); }

/* ---------- 3. 深色区配图加同色蒙版 ---------- */
/* 目的：深色区内的实拍图偏亮偏杂，叠一层同色系薄蒙版后与底色统一 */
.section-deep .prod-shot,
.section-deep .robot-media,
.section-deep .split-media,
.section-deep .bs-pair .prod-shot,
.cta-band .prod-shot,
.cta-band .robot-media,
.cta-band .split-media {
  position: relative;
}
.section-deep .prod-shot::after,
.section-deep .robot-media::after,
.section-deep .split-media::after,
.cta-band .prod-shot::after,
.cta-band .robot-media::after,
.cta-band .split-media::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(168deg,
    rgba(7, 33, 70, .16) 0%,
    rgba(7, 33, 70, .10) 46%,
    rgba(7, 33, 70, .22) 100%);
}
/* 角标类内容压在蒙版之上，避免被染暗 */
.section-deep .prod-shot > *:not(img),
.section-deep .robot-media > *:not(img),
.section-deep .split-media > *:not(img),
.cta-band .prod-shot > *:not(img),
.cta-band .robot-media > *:not(img),
.cta-band .split-media > *:not(img) { position: relative; z-index: 1; }

/* ---------- 4. 圆角层级补 xs ---------- */
/* 现状圆角散落 2/4/8/10/12/13/15px，8px 以下无变量；补 --radius-xs 统一小构件 */
:root { --radius-xs: 6px; }

:focus-visible { border-radius: var(--radius-xs); }
.info-ico { border-radius: var(--radius-s); }
.person-name i { border-radius: var(--radius-xs); }
.nav-toggle { border-radius: var(--radius-s); }
.footer-qr-box img { border-radius: var(--radius-s); }
/* ---------- 5. Mind+ 编程软件子块（2026-10-21 加，products #open-hardware） ---------- */
/* 截图类配图：白底 + 细边框承载，图注压在圆角图下方 */
.mp-fig { margin: 0; }
.mp-fig .prod-shot { background: #fff; border: 1px solid var(--line); }
.mp-fig img { display: block; width: 100%; height: auto; }
.mp-fig figcaption { margin-top: 14px; font-size: 12.8px; line-height: 1.8; color: var(--muted); }
/* 大屏截图定 16:9，与右栏两段文字高度接近，避免半屏空白 */
.mp-fig.mp-shot .prod-shot { aspect-ratio: 16 / 9; }
.mp-fig.mp-shot img { height: 100%; object-fit: cover; }
.mp-dl { margin-top: 26px; }
.mp-books p { line-height: 1.95; }

/* 四大能力：2×2 图文卡（图在上、文在下），替代原纯文字 .hw-list */
.mp-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 64px; }
.mp-cap {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.mp-cap:hover { border-color: rgba(67, 171, 255, .5); box-shadow: 0 12px 28px -18px rgba(7, 33, 70, .55); }
/* 图区固定 16:10 白底承载，四张图比例不一（1.29~1.95）用 contain 保证不裁不变形 */
.mp-cap-media { position: relative; aspect-ratio: 16 / 10; background: #fff; border-bottom: 1px solid var(--line); }
.mp-cap-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 16px 22px; }
.mp-cap-body { padding: 18px 22px 22px; }
.mp-cap-num { display: block; font-family: var(--ff-num); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: var(--brand-light); }
.mp-cap h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; margin-top: 7px; font-size: 1.04rem; line-height: 1.5; }
.mp-cap h4 em {
  font-family: var(--ff-num); font-style: normal; font-size: 11.2px; font-weight: 700;
  letter-spacing: .1em; color: var(--brand-light);
}
.mp-cap p { margin-top: 9px; font-size: 13.2px; line-height: 1.8; color: var(--ink-2); }

/* 数据可视化面板：标题 + 两张深色组件图 */
.mp-panel { margin-bottom: 8px; }
.mp-panel-hd { max-width: 900px; }
.mp-panel-hd h4 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 1.12rem; }
.mp-panel-hd h4 em {
  font-family: var(--ff-num); font-style: normal; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; color: var(--brand-light);
}
.mp-panel-hd p { margin-top: 10px; font-size: 14.2px; line-height: 1.9; color: var(--ink-2); }
.mp-widgets { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.mp-widget { margin: 0; }
.mp-widget-shot { position: relative; aspect-ratio: 16 / 9; background: #0c1016; border-radius: var(--radius-l); overflow: hidden; }
.mp-widget-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-widget figcaption { margin-top: 11px; font-size: 12.6px; line-height: 1.7; color: var(--muted); }

/* 配套教材：11 册封面按 PDF 版式分三条，替代原纯文字书名列表 */
.mp-book-row { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mp-book { margin: 0; padding: 14px 14px 15px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); }
.mp-book-shot { aspect-ratio: 690 / 220; background: #fff; }
.mp-book-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mp-book figcaption { margin-top: 12px; font-size: 12.4px; line-height: 1.7; color: var(--muted); }
.mp-book figcaption b { display: block; margin-bottom: 3px; font-size: 12.8px; font-weight: 700; color: var(--brand); }

@media (max-width: 860px) {
  .mp-fig figcaption { font-size: 12.2px; }
  .mp-caps, .mp-widgets { grid-template-columns: 1fr; gap: 16px; }
  .mp-cap-media img { padding: 12px 16px; }
  .mp-book-row { grid-template-columns: 1fr; gap: 14px; }
}
/* 导语配图：Mind+ logo（左上）+ 卡通插画（右下）双图叠位，比例固定不重叠 */
.mp-hero-shot { position: relative; aspect-ratio: 536 / 336; background: #fff; }
.mp-hero-logo { position: absolute; left: 4.2%; top: 5.5%; width: 18.5%; height: auto; }
.mp-hero-art { position: absolute; right: 2%; bottom: 2%; width: 71%; height: auto; }
@media (max-width: 640px) {
  /* 窄屏改为「logo 在上、插画在下」的常规流，避免两图挤在一起 */
  .mp-hero-shot { aspect-ratio: auto; padding: 18px 16px 10px; }
  .mp-hero-logo { position: static; display: block; width: 66px; margin-bottom: 8px; }
  .mp-hero-art { position: static; display: block; width: 100%; }
}

/* ---------- 6. 页脚 ICP 备案号（2026-10-21 备案通过后接入，工信部要求可点击跳转） ---------- */
.footer-icp { color: #8ba7c2; text-decoration: none; transition: color .2s ease; }
.footer-icp:hover { color: #fff; }