/* ============================================
   灯超人官网 - 全局样式（手机端优先）
   视觉：深蓝 #0F4C81 + 金色点缀，大数字卡，画册感
   ============================================ */
:root {
  --blue-deep: #0A3459;
  --blue: #0F4C81;
  --blue-light: #1B6FB5;
  --gold: #C9A05C;
  --gold-bright: #E4C185;
  --ink: #1C2B3A;
  --gray: #6B7A88;
  --bg: #F6F8FA;
  --white: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.6;
  /* 为吸底栏留出空间 */
  padding-bottom: 64px;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* 页面容器：手机宽度居中，桌面端也保持卡片式 */
.page {
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  min-height: 100vh;
  box-shadow: 0 0 24px rgba(10, 52, 89, .08);
}

/* ---------- 顶部导航 ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(10, 52, 89, .96);
  color: #fff;
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  flex: none;
}
.topbar .brand .logo-img {
  height: 38px; width: auto;
  flex: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
}
.nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 0;
  padding: 0;
  background: none;
}
.nav a {
  flex: none;
  text-align: center;
  padding: 6px 11px;
  color: #E8EEF4;
  font-size: 13.5px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
}
.nav a.active, .nav a:active { color: var(--blue-deep); background: var(--gold-bright); font-weight: 700; }

/* ---------- 首屏 Hero ---------- */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 24px 160px;
  color: #fff;
  background:
    radial-gradient(ellipse 120% 60% at 50% 100%, rgba(228,193,133,.22), transparent 60%),
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(27,111,181,.55), transparent 65%),
    linear-gradient(160deg, var(--blue-deep) 0%, var(--blue) 55%, #0D5A96 100%);
  overflow: hidden;
}
.hero .tag {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--gold-bright);
  border: 1px solid rgba(228,193,133,.5);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
  align-self: flex-start;
}
.hero .hero-logo {
  height: 92px; width: auto;
  align-self: flex-start;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .35));
}
.hero h1 {
  font-size: 34px;
  line-height: 1.35;
  font-weight: 800;
  margin-bottom: 12px;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.hero .sub {
  font-size: 16px;
  color: rgba(255,255,255,.85);
  margin-bottom: 28px;
}
.hero .sub b { color: var(--gold-bright); }

/* ---------- 大数字卡 ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 16px;
  margin-top: 16px;
  position: relative;
  z-index: 5;
}
.stat-card {
  background: var(--white);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(10,52,89,.10);
}
.stat-card .num {
  font-size: 34px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.1;
}
.stat-card .num em { font-style: normal; color: var(--gold); font-size: 20px; }
.stat-card .label { font-size: 13px; color: var(--gray); margin-top: 6px; }

/* ---------- 通用区块 ---------- */
.section { padding: 36px 16px 8px; }
.section-title {
  text-align: center;
  margin-bottom: 22px;
}
.section-title h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue-deep);
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
}
.section-title h2::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 36px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}
.section-title p { font-size: 14px; color: var(--gray); margin-top: 6px; }

/* ---------- 卖点四宫格 ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feature-card {
  background: var(--white);
  border: 1px solid #E8EEF3;
  border-radius: 14px;
  padding: 18px 14px;
}
.feature-card .icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 10px;
}
.feature-card h3 { font-size: 16px; color: var(--blue-deep); margin-bottom: 4px; }
.feature-card p { font-size: 13px; color: var(--gray); line-height: 1.5; }

/* ---------- 系列入口卡 ---------- */
.series-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, var(--blue-deep), var(--blue));
  border-radius: 14px;
  padding: 18px;
  color: #fff;
  margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(10,52,89,.18);
}
.series-card.gold {
  background: linear-gradient(135deg, #8A6420, var(--gold));
  box-shadow: 0 6px 16px rgba(138,100,32,.25);
}
.series-card .sc-icon {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.series-card h3 { font-size: 17px; margin-bottom: 2px; }
.series-card p { font-size: 13px; color: rgba(255,255,255,.82); }
.series-card .arrow { margin-left: auto; font-size: 20px; color: rgba(255,255,255,.6); }

/* ---------- 场景网格 ---------- */
.scene-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.scene-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--blue-deep), var(--blue-light));
  color: #fff;
  padding: 18px 14px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.scene-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 15%, rgba(228,193,133,.30), transparent 45%);
}
.scene-card h3 { position: relative; font-size: 16px; }
.scene-card p { position: relative; font-size: 12px; color: rgba(255,255,255,.75); }

/* ---------- 案例横滑 ---------- */
.case-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 16px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.case-scroll::-webkit-scrollbar { display: none; }
.case-card {
  flex: none;
  width: 240px;
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid #E8EEF3;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(10,52,89,.07);
}
.case-card .cc-top {
  height: 96px;
  background: linear-gradient(135deg, var(--blue-deep), var(--blue-light));
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-bright);
  font-size: 30px;
  font-weight: 800;
}
.case-card .cc-body { padding: 12px 14px 14px; }
.case-card h3 { font-size: 15px; color: var(--blue-deep); }
.case-card .meta { font-size: 12px; color: var(--gray); margin-top: 4px; }
.case-card .badge {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(201,160,92,.12);
  padding: 2px 10px;
  border-radius: 999px;
}

/* ---------- EMC 横幅 ---------- */
.emc-banner {
  margin: 0 16px;
  border-radius: 14px;
  padding: 22px 18px;
  color: #fff;
  background:
    radial-gradient(ellipse 100% 80% at 100% 0%, rgba(228,193,133,.28), transparent 55%),
    linear-gradient(135deg, #082C4B, var(--blue));
}
.emc-banner h3 { font-size: 19px; margin-bottom: 8px; }
.emc-banner h3 em { font-style: normal; color: var(--gold-bright); }
.emc-banner p { font-size: 14px; color: rgba(255,255,255,.85); }
.emc-banner .points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.emc-banner .points span {
  font-size: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---------- 资质带 ---------- */
.cert-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 16px 8px;
}
.cert-strip::-webkit-scrollbar { display: none; }
.cert-item {
  flex: none;
  background: var(--white);
  border: 1px dashed #C9D6E0;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--blue-deep);
  font-weight: 600;
  white-space: nowrap;
}
.cert-item::before { content: "✔ "; color: var(--gold); }

/* ---------- 底部 ---------- */
.footer {
  margin-top: 40px;
  background: var(--blue-deep);
  color: rgba(255,255,255,.75);
  text-align: center;
  padding: 28px 16px 20px;
  font-size: 13px;
}
.footer .brand {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 6px;
}
.footer .brand .logo-img {
  height: 44px; width: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35));
}
.footer .slogan { color: var(--gold-bright); margin-bottom: 12px; }
.footer a { color: var(--gold-bright); }

/* ---------- 吸底转化栏 ---------- */
.action-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97);
  box-shadow: 0 -4px 16px rgba(10,52,89,.12);
}
.action-bar .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
}
.action-bar .btn {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* ---------- 微信咨询弹窗 ---------- */
.wx-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(6, 26, 45, .72);
  align-items: center; justify-content: center;
  padding: 24px;
}
.wx-modal.show { display: flex; }
.wx-card {
  position: relative;
  width: 100%; max-width: 320px;
  background: #fff;
  border-radius: 16px;
  padding: 20px 18px 16px;
  text-align: center;
}
.wx-card img { width: 100%; border-radius: 8px; margin: 10px 0 8px; }
.wx-title { font-size: 17px; font-weight: 800; color: var(--blue-deep); }
.wx-tip { font-size: 13px; color: var(--gray); line-height: 1.7; }
.wx-tip a { color: var(--blue); font-weight: 700; }
.wx-close {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px;
  border: none; border-radius: 50%;
  background: rgba(10, 52, 89, .08);
  color: var(--blue-deep);
  font-size: 20px; line-height: 1;
  cursor: pointer;
}
.btn-call {
  background: linear-gradient(135deg, var(--gold), #B8863B);
  color: #fff;
}
.btn-video {
  background: var(--blue);
  color: #fff;
}

/* ---------- 内页通用 ---------- */
.page-hero {
  padding: 40px 24px 30px;
  color: #fff;
  background:
    radial-gradient(ellipse 100% 70% at 50% 120%, rgba(228,193,133,.20), transparent 60%),
    linear-gradient(160deg, var(--blue-deep), var(--blue));
}
.page-hero h1 { font-size: 26px; margin-bottom: 6px; }
.page-hero p { font-size: 14px; color: rgba(255,255,255,.8); }
.content-block {
  background: var(--white);
  border: 1px solid #E8EEF3;
  border-radius: 14px;
  padding: 18px;
  margin: 0 16px 14px;
}
.content-block h3 {
  font-size: 16px;
  color: var(--blue-deep);
  margin-bottom: 8px;
  padding-left: 10px;
  border-left: 3px solid var(--gold);
}
.content-block p, .content-block li { font-size: 14px; color: var(--gray); }
.content-block ul { padding-left: 4px; }
.content-block li { padding: 4px 0 4px 18px; position: relative; }
.content-block li::before {
  content: "•";
  position: absolute; left: 2px;
  color: var(--gold);
  font-weight: 700;
}
/* ---------- 停车场专项方案（首页大卡） ---------- */
.parking-hero {
  border-radius: 16px;
  padding: 22px 18px;
  color: #fff;
  background:
    radial-gradient(ellipse 120% 70% at 85% 0%, rgba(228,193,133,.30), transparent 55%),
    radial-gradient(ellipse 100% 50% at 0% 100%, rgba(27,111,181,.50), transparent 60%),
    linear-gradient(160deg, #082C4B, var(--blue));
  box-shadow: 0 8px 22px rgba(8,44,75,.28);
}
.parking-hero .ph-badge {
  display: inline-block;
  font-size: 12px;
  color: var(--gold-bright);
  border: 1px solid rgba(228,193,133,.55);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.parking-hero h3 { font-size: 21px; margin-bottom: 8px; }
.parking-hero .ph-desc { font-size: 13.5px; color: rgba(255,255,255,.85); line-height: 1.7; }
.ph-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0 14px;
}
.ph-stats > div {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
}
.ph-stats b {
  display: block;
  font-size: 19px;
  font-weight: 800;
  color: var(--gold-bright);
  line-height: 1.2;
}
.ph-stats b i { font-style: normal; font-size: 13px; margin-left: 1px; }
.ph-stats span { font-size: 11px; color: rgba(255,255,255,.7); }
.ph-points { display: grid; gap: 8px; }
.ph-point {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 11px 12px;
}
.ph-point .ico {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(228,193,133,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.ph-point b { display: block; font-size: 14px; color: #fff; }
.ph-point p { font-size: 12px; color: rgba(255,255,255,.72); margin-top: 2px; line-height: 1.55; }
.ph-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), #B8863B);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

/* ---------- 场景卡「主推」角标 ---------- */
.scene-card.main { border: 1.5px solid var(--gold-bright); }
.scene-card .main-tag {
  position: absolute;
  top: 0; right: 0;
  background: linear-gradient(135deg, var(--gold), #B8863B);
  color: #fff;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 0 12px 0 10px;
}

/* ---------- 停车场完整方案（解决方案页） ---------- */
.parking-scheme { margin: 0 0 6px; }
.ps-head {
  margin: 0 16px 14px;
  border-radius: 16px;
  padding: 22px 18px;
  color: #fff;
  background:
    radial-gradient(ellipse 120% 70% at 85% 0%, rgba(228,193,133,.28), transparent 55%),
    linear-gradient(160deg, #082C4B, var(--blue));
}
.ps-head .ps-badge {
  display: inline-block;
  font-size: 12px;
  color: var(--gold-bright);
  border: 1px solid rgba(228,193,133,.55);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.ps-head h2 { font-size: 21px; margin-bottom: 8px; }
.ps-head p { font-size: 13.5px; color: rgba(255,255,255,.85); line-height: 1.7; }
.ps-block {
  background: var(--white);
  border: 1px solid #E8EEF3;
  border-radius: 14px;
  padding: 18px 16px;
  margin: 0 16px 14px;
}
.ps-block h3 {
  font-size: 16px;
  color: var(--blue-deep);
  margin-bottom: 12px;
  padding-left: 10px;
  border-left: 3px solid var(--gold);
}
.pain-list li {
  font-size: 14px;
  color: var(--gray);
  padding: 5px 0 5px 24px;
  position: relative;
  line-height: 1.6;
}
.pain-list li::before {
  content: "✗";
  position: absolute; left: 2px;
  color: #C0392B;
  font-weight: 700;
}
.arch-list li {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid #E8EEF3;
}
.arch-list li b {
  display: block;
  font-size: 14px;
  color: var(--blue-deep);
}
.arch-list li span { display: block; font-size: 13px; color: var(--gray); margin-top: 3px; line-height: 1.55; }
.ps-points { display: grid; gap: 10px; }
.ps-point {
  border: 1px solid #E8EEF3;
  border-radius: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #FBFDFE, var(--white));
}
.ps-point b { display: block; font-size: 14.5px; color: var(--blue-deep); margin-bottom: 4px; }
.ps-point p { font-size: 13px; color: var(--gray); line-height: 1.65; }
.ps-case {
  background: #FFF8EC;
  border: 1px solid rgba(201,160,92,.45);
}
.ps-case h3 { border-left-color: #B8863B; }
.ps-case-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.ps-case-stats > div {
  background: var(--white);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  border: 1px solid rgba(201,160,92,.30);
}
.ps-case-stats b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.2;
}
.ps-case-stats b i { font-style: normal; font-size: 15px; color: var(--gold); }
.ps-case-stats span { font-size: 12px; color: var(--gray); }
.ps-case > p { font-size: 13px; color: #8A6420; }

.placeholder-note {
  margin: 14px 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #FFF8EC;
  border: 1px dashed var(--gold);
  font-size: 13px;
  color: #8A6420;
}

/* ============================================
   视觉升级：科技感 + 高级感（推广落地页版）
   ============================================ */

/* 图纸感网格底纹（极淡，衬卡片） */
.page {
  background:
    linear-gradient(rgba(15, 76, 129, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 76, 129, .045) 1px, transparent 1px),
    var(--white);
  background-size: 26px 26px, 26px 26px, auto;
}

/* 视频号二维码展示（联系页/案例页） */
.qr-img {
  display: block;
  width: 240px;
  max-width: 72%;
  margin: 14px auto 8px;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
.qr-tip {
  text-align: center;
  font-size: 13px;
  color: #5a6b7d;
  margin-bottom: 0;
}

/* ---------- 首屏：车库场景动画（车到灯亮·联动跟随） ---------- */
.hero .grid-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, .9), transparent 70%);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .9), transparent 70%);
  pointer-events: none;
}
.garage-anim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 138px;
  pointer-events: none;
  z-index: 1;
}
/* 顶灯：灯座 + 光锥 + 地面光斑 */
.g-lamps { position: absolute; inset: 0; }
.g-lamp {
  position: absolute;
  top: 0;
  left: calc(7% + var(--i) * 16.6%);
  width: 3px; height: 9px;
  background: #ffe9c4;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 226, 160, .9);
}
.g-lamp::before {  /* 向下光锥 */
  content: "";
  position: absolute;
  top: 7px; left: 50%;
  width: 150px; height: 90px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(255, 226, 160, .5), rgba(255, 226, 160, .07) 76%, transparent);
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  opacity: .12;
  animation: glamp 18s linear infinite;
}
.g-lamp::after {   /* 地面光斑 */
  content: "";
  position: absolute;
  top: 86px; left: 50%;
  width: 132px; height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 226, 160, .55), transparent 70%);
  opacity: .12;
  animation: glamp 18s linear infinite;
}
/* 双段对比：0~50% 普通传统感应灯（车到才亮、车过快灭、无波纹） / 50~100% 灯超人物联灯（组网感应、提前照亮、波纹联动） */
.g-lamp[style*="--i:0"]::before, .g-lamp[style*="--i:0"]::after { animation-name: glamp0; }
.g-lamp[style*="--i:1"]::before, .g-lamp[style*="--i:1"]::after { animation-name: glamp1; }
.g-lamp[style*="--i:2"]::before, .g-lamp[style*="--i:2"]::after { animation-name: glamp2; }
.g-lamp[style*="--i:3"]::before, .g-lamp[style*="--i:3"]::after { animation-name: glamp3; }
.g-lamp[style*="--i:4"]::before, .g-lamp[style*="--i:4"]::after { animation-name: glamp4; }
.g-lamp[style*="--i:5"]::before, .g-lamp[style*="--i:5"]::after { animation-name: glamp5; }
@keyframes glamp0 { 0%, 4% { opacity: .12; } 5.7% { opacity: 1; } 10% { opacity: 1; } 12.2% { opacity: .12; } 54.5% { opacity: .12; } 57.5% { opacity: 1; } 61.25% { opacity: 1; } 64.6%, 100% { opacity: .12; } }
@keyframes glamp1 { 0%, 10% { opacity: .12; } 11.7% { opacity: 1; } 16% { opacity: 1; } 18.2% { opacity: .12; } 54.5% { opacity: .12; } 57.5% { opacity: 1; } 68% { opacity: 1; } 71.35%, 100% { opacity: .12; } }
@keyframes glamp2 { 0%, 16% { opacity: .12; } 17.7% { opacity: 1; } 22% { opacity: 1; } 24.2% { opacity: .12; } 54.5% { opacity: .12; } 57.5% { opacity: 1; } 74.75% { opacity: 1; } 78.1%, 100% { opacity: .12; } }
@keyframes glamp3 { 0%, 22% { opacity: .12; } 23.7% { opacity: 1; } 28% { opacity: 1; } 30.2% { opacity: .12; } 54.5% { opacity: .12; } 57.5% { opacity: 1; } 81.5% { opacity: 1; } 84.8%, 100% { opacity: .12; } }
@keyframes glamp4 { 0%, 28% { opacity: .12; } 29.7% { opacity: 1; } 34% { opacity: 1; } 36.2% { opacity: .12; } 61.25% { opacity: .12; } 64.3% { opacity: 1; } 88.25% { opacity: 1; } 91.55%, 100% { opacity: .12; } }
@keyframes glamp5 { 0%, 34% { opacity: .12; } 35.7% { opacity: 1; } 37.6% { opacity: 1; } 39.8% { opacity: .12; } 68% { opacity: .12; } 71% { opacity: 1; } 95% { opacity: 1; } 98.3%, 100% { opacity: .12; } }
/* 无线物联联动（仅物联段）：车头到达哪盏灯，哪盏灯座感应闪 */
.g-lamp {
  animation: gflash 18s linear infinite;
  animation-delay: calc(9.812s + var(--i) * 1.214s);
}
@keyframes gflash {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 226, 160, .9); }
  1%  { box-shadow: 0 0 24px 5px rgba(255, 240, 200, 1); }
  2.5%  { box-shadow: 0 0 8px rgba(255, 226, 160, .9); }
}
.g-lamp .g-wave {   /* 无线波纹（仅物联段出现） */
  position: absolute;
  top: -8px; left: 50%;
  width: 12px; height: 12px;
  transform: translateX(-50%);
  opacity: 0;
  animation: gwave-on 18s linear infinite;
  pointer-events: none;
}
.g-lamp[style*="--i:0"] .g-wave { animation-name: gwave0; }
.g-lamp[style*="--i:1"] .g-wave { animation-name: gwave1; }
.g-lamp[style*="--i:2"] .g-wave { animation-name: gwave2; }
.g-lamp[style*="--i:3"] .g-wave { animation-name: gwave3; }
.g-lamp[style*="--i:4"] .g-wave { animation-name: gwave4; }
.g-lamp[style*="--i:5"] .g-wave { animation-name: gwave5; }
@keyframes gwave0 { 0%, 54.5% { opacity: 0; } 55.5% { opacity: 1; } 63.8% { opacity: 1; } 64.6%, 100% { opacity: 0; } }
@keyframes gwave1 { 0%, 54.5% { opacity: 0; } 55.5% { opacity: 1; } 70.5% { opacity: 1; } 71.35%, 100% { opacity: 0; } }
@keyframes gwave2 { 0%, 54.5% { opacity: 0; } 55.5% { opacity: 1; } 77.3% { opacity: 1; } 78.1%, 100% { opacity: 0; } }
@keyframes gwave3 { 0%, 54.5% { opacity: 0; } 55.5% { opacity: 1; } 84% { opacity: 1; } 84.8%, 100% { opacity: 0; } }
@keyframes gwave4 { 0%, 61.25% { opacity: 0; } 62.25% { opacity: 1; } 90.8% { opacity: 1; } 91.55%, 100% { opacity: 0; } }
@keyframes gwave5 { 0%, 68% { opacity: 0; } 69% { opacity: 1; } 97.5% { opacity: 1; } 98.3%, 100% { opacity: 0; } }
.g-lamp .g-wave::before,
.g-lamp .g-wave::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 228, 165, .9);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.35);
  animation: gwave .92s linear infinite;   /* 0.92s 一圈循环涟漪 */
}
.g-lamp .g-wave::after { animation-delay: .46s; }  /* 第二道错半圈 */
@keyframes gwave {
  0%  { opacity: 0; transform: scale(.35); }
  15% { opacity: .8; }
  100% { opacity: 0; transform: scale(3.4); }
}
/* 对比文字标签：普通段 / 物联段 交替浮现 */
.g-tag {
  position: absolute;
  left: 50%; top: 30px;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  padding: 4px 12px;
  background: rgba(8, 26, 44, .62);
  border: 1px solid rgba(228, 193, 133, .25);
  border-radius: 6px;
}
.g-tag b { display: block; font-size: 14px; letter-spacing: 1px; color: #cfd8e3; }
.g-tag span { display: block; font-size: 10.5px; color: rgba(223, 233, 243, .8); margin-top: 2px; }
.g-tag em { font-style: normal; }
.g-tag-plain em { color: #ff9a8a; }
.g-tag-iot b { color: #E4C185; }
.g-tag-iot em { color: #ffe9c4; }
.g-tag-plain { animation: gtagPlain 18s linear infinite; }
.g-tag-iot { animation: gtagIot 18s linear infinite; }
@keyframes gtagPlain { 0% { opacity: 0; } 2% { opacity: 1; } 44% { opacity: 1; } 47.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes gtagIot { 0%, 50% { opacity: 0; } 52% { opacity: 1; } 94% { opacity: 1; } 97.5% { opacity: 0; } 100% { opacity: 0; } }
/* 车道 */
.g-road {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  background: linear-gradient(to bottom, #16344f, #0e2438);
  border-top: 1px solid rgba(228, 193, 133, .22);
}
.g-road i {
  position: absolute;
  top: 50%; left: 0;
  width: calc(100% + 52px);
  height: 3px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 26px, transparent 26px 52px);
  animation: gline 1.15s linear infinite;
  opacity: .55;
}
@keyframes gline {
  to { transform: translateY(-50%) translateX(-52px); }
}
/* 小车 */
.g-car {
  position: absolute;
  bottom: 36px;
  left: -90px;
  width: 74px; height: 32px;
  animation: gcar 18s linear infinite;
}
@keyframes gcar {
  0% { left: -90px; }
  44.4% { left: 100%; }    /* 普通段跑完出屏（60px/s） */
  49.99% { left: 100%; }   /* 出屏后停在屏外，不再飞回 */
  50% { left: -90px; }     /* 物联段开始，车从左侧自然进场 */
  100% { left: 100%; }     /* 物联段跑完出屏（53.3px/s） */
}
.g-car i {  /* 车身 */
  position: absolute;
  inset: 5px 0 7px 0;
  background: linear-gradient(180deg, #dfe9f5, #9db4cc);
  border-radius: 9px 13px 3px 3px;
  box-shadow: 0 4px 10px rgba(0,0,0,.45);
}
.g-car i::before {  /* 车窗 */
  content: "";
  position: absolute;
  top: 3px; left: 15px; right: 17px; height: 11px;
  background: linear-gradient(180deg, #35597c, #1d3a57);
  border-radius: 4px;
}
.g-car i::after {  /* 车头灯光束 */
  content: "";
  position: absolute;
  top: 55%; right: -32px;
  width: 32px; height: 11px;
  background: linear-gradient(90deg, rgba(255, 240, 200, .95), rgba(255, 240, 200, 0));
  clip-path: polygon(0 18%, 0 82%, 100% 100%, 100% 0);
}
.g-car b {  /* 车轮 */
  position: absolute;
  bottom: -1px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5a7089, #17293c 70%);
  border: 2px solid #0c1826;
}
.g-car .w1 { left: 9px; }
.g-car .w2 { right: 9px; }
.hero-cta { display: flex; gap: 10px; margin-top: 2px; }
.hbtn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
}
.hbtn.gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #4A3200;
  box-shadow: 0 6px 20px rgba(228, 193, 133, .38);
}
.hbtn.ghost {
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  background: rgba(255, 255, 255, .06);
}
.hero-trust {
  margin-top: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  letter-spacing: .5px;
  text-align: center;
}

/* 大数字：渐变文字质感 */
.stats .num {
  background: linear-gradient(160deg, var(--blue) 20%, var(--blue-light) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 雷达扫描动效（契合"雷达感应"卖点） ---------- */
.ph-head { display: flex; align-items: center; justify-content: space-between; }
.radar {
  position: relative;
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(228, 193, 133, .45);
  background: radial-gradient(circle, transparent 52%, rgba(228, 193, 133, .08) 53%, transparent 70%);
}
.radar::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px dashed rgba(228, 193, 133, .35);
}
.radar i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px rgba(228, 193, 133, .9);
}
.radar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(228, 193, 133, .65), rgba(228, 193, 133, .12) 60deg, transparent 75deg);
  animation: radarScan 2.8s linear infinite;
}
@keyframes radarScan { to { transform: rotate(360deg); } }

/* ---------- 卖点卡质感 ---------- */
.feature-card { transition: transform .25s ease, box-shadow .25s ease; }
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(10, 52, 89, .14);
}
.feature-card { position: relative; overflow: hidden; }
.feature-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright), transparent);
  opacity: 0;
  transition: opacity .25s ease;
}
.feature-card:hover::before { opacity: 1; }

/* ---------- 线索表单（获客核心组件） ---------- */
.lead-form {
  margin: 0;
  border-radius: 20px;
  padding: 16px 14px;
  color: #22334A;
  background: linear-gradient(168deg, #E6F0FB, #CFE2F5);
  box-shadow: 0 12px 30px rgba(30, 80, 140, .16);
}
/* v1032e 节能测算联动基数区 */
.lf-opt { font-style: normal; font-size: 11px; font-weight: 400; color: rgba(34, 51, 74, .55); margin-left: 6px; letter-spacing: 0; }
#calcBase { animation: calcIn .28s ease; }
@keyframes calcIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lf-block { margin-bottom: 8px; }
.lf-block label, .lf-field label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: rgba(11, 53, 87, .92);
  margin-bottom: 8px;
  letter-spacing: .3px;
}
.lf-block label i, .lf-field label i { font-style: normal; color: #E4573D; margin-left: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11, 53, 87, .22);
  background: #FFFFFF;
  font-size: 13px;
  color: #2B3B50;
  cursor: pointer;
  transition: all .18s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.chip:active { transform: scale(.96); }
.chip::before { content: "○"; margin-right: 5px; font-size: 12px; color: rgba(11, 53, 87, .32); }
.chip.on::before { content: "✓"; color: #FFFFFF; font-weight: 800; }
.chip.on {
  background: #1D6FE0;
  border-color: #1D6FE0;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(29, 111, 224, .35);
}
.chips.err { animation: chipShake .35s ease; }
@keyframes chipShake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.lf-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; margin-bottom: 8px; }
.lf-field { margin-bottom: 0; }
.lf-row + .lf-field, .lf-field { margin-bottom: 10px; }
.lead-form input,
.lead-form textarea {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(11, 53, 87, .18);
  border-radius: 10px;
  padding: 11px 12px;
  color: #22334A;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s ease, background .2s ease;
  -webkit-appearance: none;
}
.lead-form input:focus,
.lead-form textarea:focus {
  border-color: #1D6FE0;
  background: #FFFFFF;
}
.lead-form ::placeholder { color: rgba(34, 51, 74, .40); }
.lead-form textarea { resize: none; line-height: 1.6; }
.lf-submit {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, #2B7BE8, #1D6FE0);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(29, 111, 224, .35);
  transition: transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.lf-submit:active { transform: scale(.98); }
.lf-submit:disabled { opacity: .65; }
.lf-note {
  margin: 2px 0 8px;
  font-size: 11px;
  color: rgba(34, 51, 74, .55);
  text-align: left;
}
.lf-tip {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(34, 51, 74, .60);
  text-align: center;
}
.lf-tip a { color: #1D6FE0; font-weight: 700; }
.lf-result {
  display: none;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.lf-result.show { display: block; animation: chipShake .35s ease; }
.lf-result.ok { background: rgba(46, 160, 105, .12); border: 1px solid rgba(46, 160, 105, .45); color: #1E7A4E; }
.lf-result.err { background: rgba(228, 87, 61, .10); border: 1px solid rgba(228, 87, 61, .45); color: #C0392B; }

/* ---------- 内容页底部转化带 ---------- */
.cta-band {
  margin: 22px 16px 0;
  border-radius: 16px;
  padding: 20px 18px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(ellipse 100% 80% at 85% 0%, rgba(228, 193, 133, .28), transparent 55%),
    linear-gradient(160deg, #082C4B, var(--blue));
  box-shadow: 0 8px 22px rgba(8, 44, 75, .25);
}
.cta-band b { display: block; font-size: 17px; margin-bottom: 6px; }
.cta-band p { font-size: 13px; color: rgba(255, 255, 255, .75); margin-bottom: 14px; }
.cta-band .ph-cta { margin-top: 0; }

/* ---------- 表单区标题紧凑化（小屏一屏显示） ---------- */
#lead-form {
  padding: 18px 16px 8px;
  background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(29, 111, 224, .08), transparent 70%);
}
/* v1031e 参考图头版：胶囊徽章 + 两行特大粗标题 + 一行副标题 */
.lf-title { margin-bottom: 12px; text-align: left; }
.lf-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: #1D6FE0;
  border: 1px solid #1D6FE0;
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
/* v1032b 老板指定：两行大标题放大，首行至少占 3/4 屏宽（9.6vw≈8字×75%+，clamp 防小屏折行） */
.lf-title h3 { font-size: clamp(28px, 9.6vw, 40px); line-height: 1.24; font-weight: 800; letter-spacing: .5px; color: #0B3557; }
.lf-title h3 em { font-style: normal; color: #0B3557; }
.lf-title p { margin: 6px 0 0; font-size: 13.5px; color: rgba(34, 51, 74, .72); }
.lf-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
}
.lf-perks i {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: rgba(11, 53, 87, .85);
  display: inline-flex;
  align-items: center;
}
.lf-perks i::before {
  content: "✓";
  width: 16px;
  height: 16px;
  margin-right: 5px;
  border: 1.5px solid rgba(11, 53, 87, .40);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #1D6FE0;
}
.lf-title h3::after { content: none; }

/* ---------- v1032b 老板效果图定版：浅蓝卡 + 宝蓝主按钮 ---------- */
#lead-form .lead-form {
  border: 1.5px solid rgba(125, 165, 215, .55);
  box-shadow: 0 16px 36px rgba(30, 80, 140, .14);
}
.lf-submit {
  animation: lfPulse 2.6s ease-in-out infinite;
}
@keyframes lfPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(29, 111, 224, .32); }
  50% { box-shadow: 0 6px 28px rgba(43, 123, 232, .55); }
}
.lf-submit:disabled { animation: none; }

/* ---------- v1032e 自研模组·全链路差异化板块 ---------- */
.diff-vs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dv-col { border-radius: 14px; padding: 14px 12px 10px; }
.dv-them { background: rgba(255,255,255,.6); border: 1px solid rgba(11,53,87,.14); }
.dv-them .dv-head { color: rgba(28,43,58,.62); }
.dv-them li { color: rgba(28,43,58,.6); }
.dv-them li::before { content: "\00d7"; color: #C0392B; }
.dv-us { background: linear-gradient(160deg, var(--blue-deep), #082C4B); border: 1px solid rgba(228,193,133,.45); box-shadow: 0 10px 24px rgba(10,52,89,.22); }
.dv-us .dv-head { color: #fff; }
.dv-us li { color: rgba(255,255,255,.92); }
.dv-us li::before { content: "\2713"; color: var(--gold-bright); }
.dv-head { font-size: 15px; font-weight: 800; margin-bottom: 9px; letter-spacing: .5px; }
.dv-head em { font-style: normal; font-size: 10.5px; color: var(--gold-bright); border: 1px solid rgba(228,193,133,.5); border-radius: 999px; padding: 1px 7px; margin-left: 5px; vertical-align: 1px; }
.dv-col ul { list-style: none; margin: 0; padding: 0; }
.dv-col li { font-size: 12.5px; line-height: 1.5; margin-bottom: 8px; display: flex; gap: 6px; }
.dv-col li::before { font-weight: 800; flex: none; }
.dv-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #3A2A00; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(201,160,92,.55); border: 2px solid #fff; }
.diff-chain { display: flex; align-items: center; gap: 4px; margin: 18px 0 6px; }
.diff-chain span { flex: none; font-size: 13px; font-weight: 800; color: var(--blue-deep); background: rgba(29,111,224,.09); border: 1px solid rgba(29,111,224,.3); border-radius: 999px; padding: 6px 13px; }
.diff-chain i { flex: 1; height: 2px; background: linear-gradient(90deg, rgba(29,111,224,.45), rgba(29,111,224,.14)); border-radius: 1px; }
.diff-chain-cap { font-size: 12px; color: var(--gray); text-align: center; margin: 0 0 14px; }
.diff-grid { margin-top: 2px; }
.diff-card { background: #fff; border: 1px solid rgba(11,53,87,.12); border-radius: 14px; padding: 14px; box-shadow: 0 6px 16px rgba(10,52,89,.07); }
.diff-card b { display: block; font-size: 14.5px; color: var(--blue-deep); margin-bottom: 5px; }
.diff-card p { margin: 0; font-size: 12.5px; line-height: 1.55; color: rgba(34,51,74,.75); }
.diff-grid .diff-card:last-child { grid-column: 1 / -1; }
.diff-ease { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.diff-ease span { font-size: 13px; font-weight: 800; color: #A8781C; background: rgba(228,193,133,.16); border: 1px solid rgba(216,168,83,.45); border-radius: 999px; padding: 6px 14px; }

/* ---------- 滚动淡入（仅 JS 可用时启用，防白屏） ---------- */
body.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
body.js .reveal.in { opacity: 1; transform: none; }

/* 动效减弱偏好：尊重系统设置 */
@media (prefers-reduced-motion: reduce) {
  .g-lamp::before, .g-lamp::after, .g-car, .g-road i, .radar::after { animation: none; }
  body.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* 小屏导航压缩：v1104a 导航加入「案例视频」后共四项，390px 宽度下收紧行距与字号 */
@media (max-width: 430px) {
  .topbar { padding: 8px 10px; }
  .topbar .brand .logo-img { height: 30px; }
  .nav { gap: 4px; }
  .nav a { padding: 6px 8px; font-size: 12.5px; }
}


/* ================= v1111a 关于我们页：公司简介/资质证书墙/行业活动 ================= */
.about-img-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.about-fig { margin: 0; }
.about-fig img {
  width: 100%; display: block; border-radius: 10px;
  border: 1px solid var(--line, #e3e8f0); box-shadow: 0 2px 8px rgba(30,60,120,.08);
}
.about-fig figcaption { font-size: 12px; color: var(--sub, #6b7a90); text-align: center; padding: 6px 2px 0; }
.about-motto {
  margin: 16px 0 2px; text-align: center; font-size: 15px; font-weight: 600;
  color: var(--brand, #2456a6); letter-spacing: .5px;
}
.about-sub { margin: -6px 0 12px; font-size: 13px; color: var(--sub, #6b7a90); }
.cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cert-item {
  margin: 0; background: #fff; border: 1px solid var(--line, #e3e8f0);
  border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(30,60,120,.07);
  display: flex; flex-direction: column;
}
.cert-item img {
  width: auto; max-width: 100%; height: 190px; margin: 0 auto;
  object-fit: contain; background: #f8fafc; padding: 8px; flex: 1;
}
.cert-item figcaption {
  flex-shrink: 0;
  padding: 8px 10px 10px; font-size: 13px; font-weight: 600;
  text-align: center; color: var(--ink, #22334d); border-top: 1px solid var(--line, #eef2f7);
}
.cert-item figcaption i { display: block; word-break: break-all; font-style: normal; font-weight: 400; font-size: 11px; color: var(--sub, #6b7a90); margin-top: 3px; }
.forum-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.forum-item {
  margin: 0; background: #fff; border: 1px solid var(--line, #e3e8f0);
  border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(30,60,120,.07);
}
.forum-item img {
  width: 100%; height: 230px; object-fit: contain; background: #f8fafc; padding: 6px; display: block;
}
.forum-item figcaption { padding: 8px 10px 10px; font-size: 12px; color: var(--sub, #6b7a90); text-align: center; }
/* 图片放大查看层 */
.about-lightbox {
  position: fixed; inset: 0; background: rgba(10,20,40,.84); z-index: 999;
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.about-lightbox.on { display: flex; }
.about-lightbox img {
  max-width: 94vw; max-height: 86vh; border-radius: 8px; background: #fff; padding: 6px;
}
.about-lb-close {
  position: absolute; top: 14px; right: 18px; width: 36px; height: 36px;
  border-radius: 50%; border: 1.5px solid rgba(255,255,255,.8); background: transparent;
  color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}
@media (max-width: 430px) {
  .cert-item img { height: 150px; }
  .forum-item img { height: 180px; }
}