/* ============================================================
   智派科技官网 · 质感提升 v3（2026-09-30）
   目标：提升专业度与美感
   ① 阴影分层（3 级）
   ② 正文对比度提升
   ③ 深色卡描边
   ④ 页脚重排（加公众号 + 备案）
   ⑤ CTA 渐变 + 副按钮
   ⑥ 统一图标容器
   ============================================================ */

/* ===== ① 阴影分层（3 级 elevation）===== */
:root {
  --sh-1: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --sh-2: 0 2px 4px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.07);
  --sh-3: 0 4px 8px rgba(16,24,40,.05), 0 12px 28px rgba(16,24,40,.10);
  --sh-4: 0 8px 16px rgba(16,24,40,.06), 0 20px 48px rgba(16,24,40,.13);
}

/* 基础卡：sh-1（最轻） */
.card, .feat, .value-card, .aud-card, .tf-item {
  box-shadow: var(--sh-1);
  border-color: #e4e9f2;
}
/* 可交互卡 hover：sh-3 */
.card:hover, .feat:hover, .value-card:hover, .aud-card:hover, .tf-item:hover {
  box-shadow: var(--sh-3);
}
/* 重点卡（关于我们信息卡）：sh-2 */
.brief-box, .info-list, .cbox { box-shadow: var(--sh-2); }

/* 产品截图卡：sh-3（最重，因为最"实物"） */
.shot-main { box-shadow: var(--sh-4); }
.shot-item { box-shadow: var(--sh-2); }
.shot-item:hover { box-shadow: var(--sh-3); }

/* 首屏产品预览卡：sh-4 */
.hv-card { box-shadow: 0 24px 64px rgba(37,99,235,.16), 0 8px 20px rgba(16,24,40,.08); }

/* ===== ② 正文对比度提升（12→14px，中灰→深灰）===== */
.card p, .feat p, .aud-card p, .tf-job, .value-card p,
.vp-old, .vp-new, .shot-cap span {
  color: #4a5361 !important;       /* #4b5563 → #4a5361 略深 */
  font-size: 14px !important;
  line-height: 1.85 !important;
}
.sec-hd p { color: #545c6b !important; }

/* 卡片标题加大 */
.card h3 { font-size: 19px !important; }
.feat h4 { font-size: 16.5px !important; }
.aud-who { font-size: 16.5px !important; }
.tf-role { font-size: 16.5px !important; }
.value-card h3 { font-size: 17px !important; }

/* ===== ③ 深色卡描边 + 文字提亮 ===== */
.sec-power .feat {
  border: 1px solid rgba(255,255,255,.10) !important;
  border-top: 3px solid var(--c-power) !important;
  background: #fff !important;          /* 保持浅卡（强对比）*/
}
.sec-power .feat:hover {
  border-color: rgba(255,255,255,.22) !important;
  border-top-color: #818cf8 !important;
}
/* 深色区标题/副标题提亮 */
.sec-power .sec-hd h2 { color: #fff !important; }
.sec-power .sec-hd p  { color: #a8b5c9 !important; }

/* ===== ④ 数字层级修正（01-04 不再压过标题）===== */
.feat-n {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #c7d2fe !important;
  letter-spacing: 0 !important;
  margin-bottom: 10px !important;
  display: inline-block;
  padding: 2px 9px;
  border-radius: 6px;
  background: rgba(99,102,241,.10);
}
.sec-power .feat-n { background: rgba(99,102,241,.12) !important; }

/* ===== ⑤ 数据条：加大呼吸感 ===== */
.stat-strip { padding: 56px 0 !important; }
.stat-strip .wrap { gap: 20px !important; }
.stat-item .n { font-size: 42px !important; margin-bottom: 10px !important; }
.stat-item .l { font-size: 13px !important; color: #9fb0c9 !important; line-height: 1.75 !important; }
/* 数据项之间加分隔线（提升秩序感）*/
.stat-item + .stat-item { position: relative; }
.stat-item + .stat-item::before {
  content: ''; position: absolute; left: -10px; top: 12%; bottom: 12%;
  width: 1px; background: rgba(255,255,255,.10);
}

/* ===== ⑥ 图标容器统一（全部圆角方，尺寸一致）===== */
.card-ic, .value-ic, .aud-ic, .tf-av {
  width: 54px !important; height: 54px !important;
  border-radius: 14px !important;        /* 统一圆角方（原来场景是圆形）*/
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 24px !important;
}
.aud-ic { border-radius: 14px !important; }   /* 覆盖 responsive 里的圆形 */

/* ===== ⑦ CTA 升级：渐变 + 副按钮 + 纹理 ===== */
.cta {
  padding: 82px 0 !important;
  background:
    radial-gradient(700px 300px at 20% 0%, rgba(96,165,250,.22) 0%, transparent 60%),
    radial-gradient(600px 280px at 85% 100%, rgba(139,92,246,.20) 0%, transparent 62%),
    linear-gradient(135deg, #1e3a8a 0%, #2563eb 52%, #1d4ed8 100%) !important;
  position: relative;
  overflow: hidden;
}
/* 网格纹理（专业感）*/
.cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 78%);
  pointer-events: none;
}
.cta .wrap { position: relative; z-index: 1; }
.cta h2 { font-size: 33px !important; margin-bottom: 14px !important; }
.cta p { font-size: 16px !important; opacity: .90 !important; margin-bottom: 32px !important; }
.cta .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta .btn-w {
  background: #fff; color: #1d4ed8;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  font-weight: 700;
}
.cta .btn-w:hover { transform: translateY(-2px); background: #f0f6ff; }
/* CTA 副按钮（描边款）*/
.btn-o {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.42);
}
.btn-o:hover { transform: translateY(-2px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.75);
}

/* ===== ⑧ 页脚重排（4 列 → 内容均衡）===== */
.ft-in {
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr !important;
  gap: 38px !important;
}
.ft-col h5 { font-size: 13.5px !important; letter-spacing: .3px; }
.ft-col a, .ft-col p { font-size: 13px !important; line-height: 1.85 !important; }
.ft-col a:hover { color: #fff !important; }
/* 联系方式行：图标 + 文字（比纯文字好扫读）*/
.ft-contact { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.ft-contact i {
  font-style: normal; font-size: 13px; flex: none;
  width: 18px; text-align: center; opacity: .8;
}
.ft-contact span { font-size: 13px; line-height: 1.7; }
/* 公众号二维码占位 */
.ft-qr {
  width: 108px; height: 108px; border-radius: 10px;
  background: #fff; padding: 6px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.ft-qr img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ft-qr-cap { font-size: 12px; color: #8794ab; line-height: 1.6; }
/* 底部备案行 */
.ft-bar .wrap { align-items: center; }
.ft-bar a { transition: color .18s; }
.ft-bar .beian-group { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.ft-bar .beian-group span { opacity: .85; }

/* ===== ⑨ 竖向节奏统一（8px 栅格）===== */
.sec { padding: 88px 0 !important; }
.sec-hd { margin-bottom: 44px !important; }
.hero { padding: 88px 0 84px !important; }

/* ===== ⑩ 首屏增强：产品卡放大 + 环境光 ===== */
.hero-visual { position: relative; }
.hero-visual::before {
  content: '';
  position: absolute; inset: -8% -6%;
  background: radial-gradient(circle at 62% 42%, rgba(59,130,246,.16) 0%, transparent 62%);
  filter: blur(38px);
  z-index: -1;
}
.hv-body { padding: 22px; }
.hv-row { padding: 12px 14px; }
.hv-txt b { font-size: 13px; }
.hv-txt small { font-size: 11px; }

/* 首屏 chips 更整齐 */
.hero-chips { gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; font-size: 13px;
  background: #fff; border: 1px solid #e4e9f2;
  color: #4a5361; font-weight: 500;
  box-shadow: var(--sh-1);
}
.chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  flex: none;
}

/* 首屏副按钮更有存在感 */
.hero-btns .btn-g {
  border: 1.5px solid #d5dceb; color: #374151; font-weight: 600;
  box-shadow: var(--sh-1);
}
.hero-btns .btn-g:hover { border-color: var(--blue); color: var(--blue); background: #f8fbff; }

/* ===== ⑪ 标题体系：英文标签精简（去掉装饰性英文）===== */
/* 保留编号 + 中文，英文改小透明 */
.sec-hd .kicker { letter-spacing: .6px !important; }
.sec-hd h2 { font-size: 33px !important; }

/* ===== 响应式补齐 ===== */
@media (max-width: 900px) {
  .ft-in { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .cta { padding: 62px 0 !important; }
  .cta h2 { font-size: 26px !important; }
  .stat-strip { padding: 40px 0 !important; }
  .stat-item .n { font-size: 32px !important; }
  .stat-item + .stat-item::before { display: none; }
  .sec { padding: 64px 0 !important; }
}
@media (max-width: 640px) {
  .ft-in { grid-template-columns: 1fr !important; }
  .card-ic, .value-ic, .aud-ic, .tf-av {
    width: 48px !important; height: 48px !important; border-radius: 12px !important; font-size: 21px !important;
  }
  .cta h2 { font-size: 22px !important; }
  .cta .cta-btns .btn { width: 100%; }
  .cta .cta-btns { flex-direction: column; }
}
