/* =====================================================
   简效科技官网 - 视觉系统 v2
   品牌：深墨蓝 #16324F × 琥珀橙 #E8590C
   调性：专业可信、务实有力、有温度
   ===================================================== */

/* ---------- 设计变量 ---------- */
:root {
  /* 品牌色 */
  --primary: #16324F;          /* 深墨蓝：标题/导航/深色场景 */
  --primary-deep: #0E2439;     /* 墨蓝更深一档：hover/Footer */
  --accent: #E8590C;           /* 琥珀橙：CTA/关键数字/强调 */
  --accent-deep: #C94E0A;      /* 橙 hover 加深 */
  --accent-strong: #C9450A;    /* 橙实底加深（白字 AA） */
  --accent-strong-hover: #A83A05; /* 橙实底 hover 更深 */
  --accent-text: #C2410A;      /* 橙正文小字（AA） */
  --accent-soft: #FDF1EA;      /* 橙浅底 */
  --ink-soft: #EEF2F6;         /* 墨蓝浅底 */

  /* 背景 */
  --bg: #FAFAF8;               /* 暖白主背景 */
  --bg-alt: #F3F1EC;           /* 辅助区块背景 */
  --card-bg: #FFFFFF;

  /* 文字 */
  --text: #243B53;             /* 深灰蓝正文 */
  --text-secondary: #5C6B7A;   /* 次要文字 */
  --text-muted: #667585;       /* 弱化文字（AA 对比增强） */
  --text-invert: #FFFFFF;

  /* 功能色 */
  --success: #2F9E44;
  --border: #E6E0D6;           /* 暖灰细边 */

  /* 圆角/投影/动效 */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(22, 50, 79, 0.06), 0 8px 24px rgba(22, 50, 79, 0.06);
  --shadow-md: 0 2px 4px rgba(22, 50, 79, 0.06), 0 12px 32px rgba(22, 50, 79, 0.10);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* 字体 */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }  /* v2.4：补 ol，消除列表默认序号（原仅 ul 重置） */
button { font-family: inherit; }

.container {
  width: min(1160px, 92%);
  margin: 0 auto;
}

/* ---------- 焦点可见（可访问性） ---------- */
a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(232, 89, 12, 0.45);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- 通用区块节奏 ---------- */
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
/* 原 .section-tight 已移除：与全站 .section 留白节奏统一 */
.section-alt { background: var(--bg-alt); }
/* 深墨蓝区块（背书/CTA 深色场景） */
.section-dark {
  background:
    radial-gradient(circle at 85% 15%, rgba(232, 89, 12, 0.12), transparent 45%),
    var(--primary);
  color: var(--text-invert);
}
.section-dark .section-title h2 { color: #fff; }
.section-dark .section-title p { color: rgba(255, 255, 255, 0.72); }

.section-title { text-align: center; max-width: 720px; margin: 0 auto 16px; }
.section-title h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
}
.section-title p {
  margin-top: 12px;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  color: var(--text-secondary);
}
.section-divider {
  width: 56px; height: 4px;
  border-radius: 4px;
  background: var(--accent);
  margin: 24px auto 40px;
}
.section-title + .section-divider { margin-top: 20px; }

/* ---------- 按钮（五态齐全） ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 28px;
  font-size: 15px; font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
              transform 0.3s var(--ease);
  user-select: none;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled, .btn.disabled {
  opacity: 0.5; cursor: not-allowed;
  transform: none;
}

/* 主按钮：琥珀橙实底白字 */
.btn-primary {
  background: var(--accent-strong); color: var(--text-invert);
  box-shadow: 0 4px 14px rgba(232, 89, 12, 0.28);
}
.btn-primary:hover {
  background: var(--accent-strong-hover);
  box-shadow: 0 6px 20px rgba(232, 89, 12, 0.34);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(1px) scale(0.99); }

/* 次按钮：墨蓝描边 */
.btn-outline {
  background: transparent; color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover {
  background: var(--primary); color: var(--text-invert);
  transform: translateY(-1px);
}
.btn-outline:active { transform: translateY(1px) scale(0.99); }

/* 浅色场景下的描边按钮 */
.btn-outline-light {
  background: transparent; color: var(--text-invert);
  border-color: rgba(255, 255, 255, 0.65);
}
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.14); border-color: #fff;
  transform: translateY(-1px);
}

.btn-lg { min-height: 52px; padding: 14px 36px; font-size: 16px; }
.btn-sm { min-height: 38px; padding: 6px 18px; font-size: 13px; }

/* ---------- 导航栏（墨蓝底） ---------- */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--primary);
  transition: box-shadow 0.3s var(--ease);
}
.navbar.scrolled { box-shadow: 0 4px 24px rgba(14, 36, 57, 0.35); }

.navbar .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}

.nav-logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-invert);
  font-size: 19px; font-weight: 800; letter-spacing: 0.01em;
}
.cube-icon { width: 32px; height: 32px; flex-shrink: 0; }

.nav-links { display: flex; align-items: center; gap: 5px; }
.nav-links a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 13px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px; font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.10); }
.nav-links a.active { color: #fff; font-weight: 700; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px;
  height: 3px; border-radius: 3px; background: var(--accent);
}

/* 汉堡按钮 */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px;
  background: transparent; border: 0; cursor: pointer;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  margin: 0 auto;
  background: #fff; border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 首页 Hero（非对称） ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(circle at 85% 20%, rgba(232, 89, 12, 0.10), transparent 42%),
    radial-gradient(circle at 12% 85%, rgba(22, 50, 79, 0.12), transparent 40%),
    var(--primary);
  color: var(--text-invert);
  overflow: hidden;
  /* v2.3：与内页 .hero-compact 同规格，三档 h1 距导航统一为 88 / 63 / 56 */
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 78% 30%, black 0%, transparent 60%);
          mask-image: radial-gradient(circle at 78% 30%, black 0%, transparent 60%);
  pointer-events: none;
}
.hero .container {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
/* v2.3：原桔红色标签层（.hero .eyebrow）已整体移除；首屏信任信息改为无底色弱化文本行 */
.hero .hero-meta {
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
  margin: 16px 0 0;
}
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800; line-height: 1.16; letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.hero h1 .highlight {
  color: #FF9E63;
  position: relative;
  white-space: nowrap;
}
.hero .subtitle {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(255, 255, 255, 0.78);
  max-width: 540px; margin-bottom: 22px;
}
.hero .hero-lead {
  font-size: clamp(0.92rem, 1.2vw, 1.02rem);
  color: rgba(255, 255, 255, 0.62);
  max-width: 560px; line-height: 1.8;
  margin: 0 0 32px;
}
.hero-text { min-width: 0; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
/* 移动端 hero 双按钮：微缩内边距使其并排一行（v2.21） */
@media (max-width: 768px) {
  .hero-buttons .btn-lg,
  .page-hero-cta .btn-lg { padding: 13px 20px; font-size: 15px; }
  .hero-buttons { gap: 10px; }
}

/* 内页 Hero（紧凑单列版，复用 hero 深色底） */
.hero-compact { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.hero-compact .container { grid-template-columns: 1fr; }
.hero-compact .subtitle { max-width: 720px; margin-bottom: 0; }

/* 首页 Hero 右侧：手机几何示意 */
.hero-visual { position: relative; display: flex; justify-content: center; }
.phone-mockup {
  width: 260px;
  background: #fff; color: var(--text);
  border-radius: 32px;
  padding: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  transform: rotate(2deg);
  animation: floaty 6s ease-in-out infinite;
  position: relative; z-index: 2;
}
@keyframes floaty {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-10px); }
}
.phone-notch {
  width: 86px; height: 6px; border-radius: 6px;
  background: var(--primary);
  margin: 0 auto 12px;
}
.phone-screen { background: #F7F5F0; border-radius: 20px; padding: 16px; }
.phone-header { font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 12px; }
.phone-search {
  font-size: 12px; color: var(--text-muted);
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 12px;
}
.phone-customer {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px;
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.phone-customer .name { font-size: 13px; font-weight: 700; }
.phone-customer .card { font-size: 11px; color: var(--text-secondary); }
.phone-actions { display: flex; gap: 8px; margin-top: 12px; }
.phone-action {
  flex: 1; min-height: 36px;
  font-size: 12px; font-weight: 700;
  border-radius: 8px; border: 0; cursor: pointer;
  /* P0-3：样机内按钮改为装饰性 span，靠此让其保持与原生 button 一致的居中观感 */
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
}
.phone-action.consume { background: var(--accent-strong); color: #fff; }
.phone-action.secondary {
  background: var(--ink-soft); color: var(--primary);
}
.phone-badge {
  position: absolute; top: -14px; right: -18px; z-index: 3;
  background: var(--accent-strong); color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: 20px;
  box-shadow: 0 6px 16px rgba(232, 89, 12, 0.4);
}
/* 几何装饰圆环 */
.hero-visual::after {
  content: "";
  position: absolute; width: 320px; height: 320px;
  border: 2px dashed rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1;
  animation: spinSlow 26s linear infinite;
}
@keyframes spinSlow { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ---------- 内页 Hero（统一非对称） ---------- */
.page-hero {
  position: relative;
  background:
    radial-gradient(circle at 88% 30%, rgba(232, 89, 12, 0.14), transparent 40%),
    var(--primary);
  color: var(--text-invert);
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(circle at 80% 40%, black 0%, transparent 55%);
          mask-image: radial-gradient(circle at 80% 40%, black 0%, transparent 55%);
  pointer-events: none;
}
.page-hero .container {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr auto;
  gap: 32px; align-items: center;
}
.page-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.18;
  margin-bottom: 14px;
}
.page-hero p {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: rgba(255, 255, 255, 0.78);
  max-width: 640px;
}
.page-hero-cta {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px;
}
.page-hero .hero-index {
  font-size: clamp(4rem, 9vw, 7rem);
  font-weight: 900; line-height: 1;
  color: rgba(255, 255, 255, 0.14);
  letter-spacing: 0.02em;
  align-self: center;
  user-select: none;
}

/* ---------- 网格 ---------- */
.card-grid {
  display: grid; gap: 24px;
}
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }

/* ---------- 卡片基础（精简细投影、无重边框） ---------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* ---------- 首页业务板块：序号卡片 ---------- */
.biz-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 34px 26px 26px;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
  overflow: hidden;
}
.biz-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.biz-num {
  display: block;
  font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 900; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(22, 50, 79, 0.22);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
  transition: color 0.35s var(--ease), -webkit-text-stroke-color 0.35s var(--ease);
}
.biz-card:hover .biz-num {
  color: var(--accent);
  -webkit-text-stroke-color: transparent;
}
.biz-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--accent-soft);
  border-radius: 12px;
  font-size: 24px; margin-bottom: 16px;
}
.biz-card h3 { font-size: 20px; font-weight: 800; color: var(--primary); margin-bottom: 8px; }
.biz-sub { font-size: 13px; font-weight: 700; color: var(--accent-text); margin-bottom: 8px; }
.biz-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 22px; }
.biz-badge {
  display: inline-block;
  margin: 4px 0 16px;
  font-size: 12px; font-weight: 700;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid rgba(232, 89, 12, 0.18);
  border-radius: 16px; padding: 4px 12px;
}
.biz-card .btn { width: 100%; }

/* 首页底部：记次宝精简入口 */
.mini-product {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 32px 36px;
  max-width: 960px; margin: 0 auto;
}
.mini-product .mp-icon { font-size: 40px; flex-shrink: 0; }
.mini-product h3 { font-size: 19px; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
.mini-product p { font-size: 14px; color: var(--text-secondary); margin-bottom: 0; }

/* ---------- 信任区（三点，去公司名） ---------- */
.trust-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 880px; margin: 0 auto;
}
.trust-stat {
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 36px 20px;
}
.ts-number {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 900; color: var(--primary);
  letter-spacing: -0.02em; line-height: 1.2;
  margin-bottom: 6px;
}
.ts-number .accent { color: var(--accent); }
.ts-label { font-size: 14px; color: var(--text-secondary); }

/* ---------- 业务卡（通用服务卡） ---------- */
.service-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 30px 24px;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.service-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: var(--ink-soft);
  border-radius: 12px;
  font-size: 22px; margin-bottom: 14px;
}
.service-card h3 { font-size: 17px; font-weight: 800; color: var(--primary); margin-bottom: 8px; }
.service-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }

/* 卖点卡（浅橙顶线） */
.why-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 30px 24px;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.why-card::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px;
  height: 3px; border-radius: 0 0 3px 3px;
  background: var(--accent);
  opacity: 0.75;
}
.why-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.why-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: var(--accent-soft);
  border-radius: 12px;
  font-size: 22px; margin-bottom: 14px;
}
.why-card h3 { font-size: 17px; font-weight: 800; color: var(--primary); margin-bottom: 8px; }
.why-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }

/* ---------- 产品亮点卡 ---------- */
.feature-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 28px 22px;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--accent-soft);
  border-radius: 12px;
  font-size: 22px; margin-bottom: 14px;
}
.feature-card h3 { font-size: 16px; font-weight: 800; color: var(--primary); margin-bottom: 6px; }
.feature-card p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; }

/* ---------- 行业卡 ---------- */
.industry-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 12px;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.industry-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.industry-icon { font-size: 26px; }
.industry-name { font-size: 13px; font-weight: 600; color: var(--text); }

/* ---------- 定价卡片 ---------- */
.pricing-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 32px 24px;
  text-align: center;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.pricing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.pricing-card.featured { background: var(--accent-soft); }
.pricing-card .popular-badge {
  position: absolute; top: -12px; right: 16px;
  background: var(--accent-strong); color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 4px 16px; border-radius: 20px;
}
.pricing-card .plan-name { font-size: 18px; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
.pricing-card .plan-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.pricing-card .plan-price {
  font-size: 36px; font-weight: 900; color: var(--primary);
  margin-bottom: 4px; letter-spacing: -0.02em;
}
.pricing-card .plan-price span { font-size: 16px; font-weight: 500; color: var(--text-secondary); }
.pricing-card .plan-price-original { font-size: 14px; color: var(--text-muted); margin-bottom: 4px; }
.pricing-card .plan-price-original del { text-decoration: line-through; }
.pricing-card .plan-features { text-align: left; margin: 20px 0; }
.pricing-card .plan-features li {
  position: relative; padding-left: 22px;
  font-size: 13.5px; color: var(--text-secondary);
  margin-bottom: 10px; line-height: 1.5;
}
.pricing-card .plan-features li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--success); font-weight: 800;
}
.pricing-card .btn { width: 100%; }

.pricing-link { text-align: center; margin-top: 32px; }
.pricing-link a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-text); font-weight: 700;
  border-bottom: 2px solid rgba(232, 89, 12, 0.3);
  padding-bottom: 2px;
  transition: border-color 0.25s var(--ease);
}
.pricing-link a:hover { border-color: var(--accent); }

/* 完整定价表 */
.pricing-full-table {
  width: 100%; border-collapse: collapse;
  font-size: 14px; margin-top: 24px;
  background: var(--card-bg);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pricing-full-table th, .pricing-full-table td {
  padding: 14px 16px; text-align: center;
  border-bottom: 1px solid var(--border);
}
.pricing-full-table thead th {
  background: var(--primary); color: #fff; font-weight: 700;
  font-size: 13px; white-space: nowrap;
}
.pricing-full-table thead th:first-child { text-align: left; }
.pricing-full-table tbody td:first-child { font-weight: 700; text-align: left; color: var(--primary); }
.pricing-full-table tbody tr:nth-child(even) { background: #FAF9F6; }
.pricing-full-table tbody tr:hover { background: var(--accent-soft); }
.pricing-full-table .price-cell { font-size: 20px; font-weight: 900; color: var(--primary); }
.pricing-full-table .price-original { font-size: 14px; color: var(--text-muted); }
.pricing-full-table .price-original del { text-decoration: line-through; }
.pricing-full-table .cta-cell .btn { padding: 8px 18px; font-size: 13px; min-height: 40px; }

/* ---------- 软件页：三类客户（背景色差，非卡片） ---------- */
.client-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.client-card {
  position: relative;
  border-radius: var(--radius);
  padding: 36px 28px;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.client-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.client-card:nth-child(1) { background: var(--ink-soft); }
.client-card:nth-child(2) { background: var(--accent-soft); }
.client-card:nth-child(3) { background: var(--bg-alt); }
.client-card:nth-child(4) { background: var(--ink-soft); }
.client-tag {
  display: inline-block; font-size: 12px; font-weight: 700;
  background: rgba(255, 255, 255, 0.75);
  color: var(--primary);
  padding: 4px 12px; border-radius: 16px; margin-bottom: 16px;
}
.client-card h3 { font-size: 19px; font-weight: 800; color: var(--primary); margin-bottom: 10px; }
.client-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.check-list { margin-top: 18px; }
.check-list li {
  position: relative; padding-left: 22px;
  font-size: 13.5px; color: var(--text); margin-bottom: 8px;
}
.check-list li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--success); font-weight: 800;
}

/* 技术能力标签 */
.tech-tags { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.tech-tag {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 24px; padding: 10px 20px;
  font-size: 14px; font-weight: 500; color: var(--text);
  box-shadow: var(--shadow-sm);
}
.tech-tag strong { color: var(--accent-text); font-weight: 800; }

/* 合作方式 */
.coop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.coop-card {
  text-align: center; padding: 36px 26px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.coop-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.coop-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: var(--accent-soft);
  border-radius: 50%;
  font-size: 24px; margin-bottom: 14px;
}
.coop-card h3 { font-size: 17px; font-weight: 800; color: var(--primary); margin-bottom: 8px; }
.coop-card p { font-size: 14px; color: var(--text-secondary); }

/* ---------- 卖点大字 ---------- */
.big-claim { text-align: center; padding: 24px 0 8px; }
.big-claim .claim-text {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  font-weight: 800; color: var(--primary);
  line-height: 1.4; letter-spacing: -0.01em;
}
.big-claim .claim-text .highlight { color: var(--accent); }
.big-claim .claim-sub {
  font-size: 16px; color: var(--text-secondary); margin-top: 14px;
}

/* ---------- 维护页：四步时间线 ---------- */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; position: relative;
}
.step {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--card-pad-y) var(--card-pad-x); /* v2.3：纳入卡片内边距基线 */
  text-align: center;
}
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--flow-num-size); height: var(--flow-num-size);
  background: var(--primary); color: #fff;
  font-size: var(--flow-num-fs); font-weight: 800;
  border-radius: 50%;
  margin-bottom: var(--flow-num-mb);
}
.step h3 { font-size: 16px; font-weight: 800; color: var(--primary); margin-bottom: 8px; }
.step p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; min-height: calc(1.7em * 2); }

/* ---------- 产品展示区 ---------- */
.product-showcase {
  display: flex; align-items: center; gap: 48px;
}
.product-showcase .ps-text { flex: 1.1; }
.product-showcase .ps-visual {
  flex: 0.9; text-align: center; font-size: 110px; line-height: 1;
}
.product-showcase h2 { font-size: 28px; font-weight: 800; color: var(--primary); margin-bottom: 12px; letter-spacing: -0.01em; }
.product-showcase p { font-size: 15px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 16px; }
.product-showcase .ps-visual {
  position: relative;
  background: var(--accent-soft);
  border-radius: 50%;
  width: 240px; height: 240px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.life-feature-tag {
  display: inline-block;
  background: var(--ink-soft); color: var(--primary);
  font-size: 12.5px; font-weight: 600;
  border-radius: 16px; padding: 5px 14px; margin: 0 6px 8px 0;
}

/* ---------- 实体店信息卡（深墨蓝底） ---------- */
.shop-info-card {
  background:
    radial-gradient(circle at 90% 10%, rgba(232, 89, 12, 0.25), transparent 45%),
    var(--primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  max-width: 860px; margin: 0 auto;
  box-shadow: 0 20px 50px rgba(22, 50, 79, 0.3);
  position: relative; overflow: hidden;
}
.shop-info-card::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.shop-info-card h3 {
  position: relative; z-index: 1;
  font-size: 22px; font-weight: 800; margin-bottom: 24px;
}
.shop-info-item {
  position: relative; z-index: 1;
  display: flex; gap: 16px; align-items: flex-start;
  margin-bottom: 18px;
}
.si-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px; font-size: 20px;
}
.si-label { font-size: 12px; color: rgba(255, 255, 255, 0.65); margin-bottom: 2px; }
.shop-info-item > div:last-child { font-size: 15px; font-weight: 500; }
.shop-info-card .btn { position: relative; z-index: 1; }

/* ---------- 联系方式 ---------- */
.contact-grid { display: grid; grid-template-columns: 1.75fr 1fr; gap: 40px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 24px; }
.contact-item {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
}
.contact-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  border-radius: 10px; font-size: 20px;
}
.contact-item h4 { font-size: 15px; font-weight: 800; color: var(--primary); margin-bottom: 6px; }
.contact-item p { font-size: 14px; color: var(--text-secondary); line-height: 1.8; }
.contact-item a { color: var(--accent-text); font-weight: 600; transition: color 0.2s var(--ease); }
.contact-item a:hover { color: var(--accent-text); }

.contact-qr {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 32px; text-align: center;
}
.contact-qr h4 { font-size: 18px; font-weight: 800; color: var(--primary); margin-bottom: 20px; }
.contact-qr img {
  width: 180px; height: 180px; margin: 0 auto;
  border-radius: 8px; object-fit: contain;
  border: 1px solid var(--border);
  padding: 8px; /* 视觉微调：二维码与边框留白，避免贴边 */
}
.contact-qr p { font-size: 13px; color: var(--text-muted); margin-top: 16px; }

.map-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  min-height: 300px;
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  padding: 40px 20px;
}
.map-placeholder > span { font-size: 44px; }
.map-placeholder p { color: var(--text-secondary); font-size: 14px; }

/* ---------- 关于页 ---------- */
.about-content {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start;
}
.about-text p { font-size: 15px; line-height: 1.9; color: var(--text-secondary); margin-bottom: 16px; }
.about-text h3 { color: var(--primary); }
.product-matrix {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin-top: 20px;
}
.product-matrix-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 20px;
}
.product-matrix-item h4 { font-size: 15px; font-weight: 800; color: var(--primary); margin: 8px 0 6px; }
.product-matrix-item p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 8px; }
.product-matrix-item a { color: var(--accent); font-weight: 700; font-size: 13.5px; }
.tag {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  border-radius: 12px; padding: 3px 10px;
}
.tag-primary { background: var(--ink-soft); color: var(--primary); }
.tag-accent { background: var(--accent-soft); color: var(--accent-deep); }

.about-sidebar {
  background: var(--primary); color: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  position: sticky; top: 96px;
  box-shadow: 0 20px 50px rgba(22, 50, 79, 0.3);
}
.about-sidebar h4 { font-size: 18px; font-weight: 800; margin-bottom: 18px; }
.about-sidebar .stat {
  font-size: 48px; font-weight: 900; color: #FF9E63; line-height: 1;
}
.about-sidebar .stat-label { font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-top: 6px; }
.about-sidebar .sb-block { margin-top: 22px; }
.about-sidebar .sb-block strong {
  display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px;
  color: #FFB27D;
}
.about-sidebar .sb-block p { font-size: 13.5px; color: rgba(255, 255, 255, 0.82); line-height: 1.8; }

/* 业务版图时间线 */
.timeline {
  position: relative; margin: 20px 0 0;
  padding-left: 28px;
}
.timeline::before {
  content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(var(--accent), var(--primary));
}
.timeline-item { position: relative; padding: 0 0 30px 8px; }
.timeline-item::before {
  content: ""; position: absolute; left: -27px; top: 4px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--accent);
}
.timeline-item h4 { font-size: 16px; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
.timeline-item p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; }

/* ---------- CTA 横幅 ---------- */
.cta-banner {
  text-align: center;
  background: var(--bg-alt);
  color: var(--primary);
  border-radius: var(--radius-lg);
  padding: clamp(3rem, 6vw, 4.5rem) 2rem;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 24px rgba(22, 50, 79, 0.06);
}
.cta-banner h2 {
  position: relative; z-index: 1;
  color: var(--primary);
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 800; letter-spacing: -0.01em; margin-bottom: 12px;
}
.cta-banner p {
  position: relative; z-index: 1;
  font-size: 15px; color: var(--text-secondary); margin-bottom: 26px;
}
.cta-banner .btn { position: relative; z-index: 1; }
/* 深色背景内嵌的透明 CTA（computer.html 实体门店背书）豁免浅色化 */
.cta-banner.cta-plain {
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.cta-banner.cta-plain h2 { color: #fff; }
.cta-banner.cta-plain p { color: rgba(255, 255, 255, 0.78); }

/* ---------- Footer（墨蓝底） ---------- */
.footer {
  background: var(--primary-deep);
  color: rgba(255, 255, 255, 0.72);
  padding: 64px 0 0;
}
.footer .container {
  display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 40px;
  padding-bottom: 44px;
}
.footer-col h4 {
  font-size: 15px; font-weight: 800; color: #fff;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.footer-col p { font-size: 13.5px; line-height: 1.9; }
.footer-col a { color: rgba(255, 255, 255, 0.72); transition: color 0.2s var(--ease); }
.footer-col a:hover { color: #FF9E63; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px 0;
  text-align: center;
  font-size: 13px; color: rgba(255, 255, 255, 0.65);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.65); }
.footer-bottom a:hover { color: #FF9E63; }

/* ---------- QR 弹窗 ---------- */
.qr-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.qr-modal.active { visibility: visible; opacity: 1; }
.qr-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(14, 36, 57, 0.65);
  backdrop-filter: blur(3px);
}
.qr-modal-content {
  position: relative; z-index: 1;
  width: min(360px, 90%);
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  text-align: center;
  transform: translateY(16px) scale(0.96);
  transition: transform 0.35s var(--ease);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.qr-modal.active .qr-modal-content { transform: translateY(0) scale(1); }
.qr-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: var(--bg-alt); color: var(--text-secondary);
  font-size: 20px; cursor: pointer; line-height: 1;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.qr-modal-close:hover { background: var(--accent); color: #fff; }
.qr-modal-content h3 { font-size: 19px; font-weight: 800; color: var(--primary); margin-bottom: 8px; }
.qr-modal-content p { font-size: 13.5px; color: var(--text-secondary); margin-bottom: 20px; }
.qr-modal-img {
  width: 200px; height: 200px; margin: 0 auto 16px;
  border: 1px solid var(--border); border-radius: 8px; object-fit: contain;
}
.qr-modal-tip { font-size: 12px; color: var(--text-muted); margin-bottom: 0; }

/* ---------- 滚动出现动画 ---------- */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-5 { grid-template-columns: repeat(3, 1fr); }
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { margin-top: 40px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .about-content { grid-template-columns: 1fr; }
  .about-sidebar { position: static; }
}

@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav-links {
    position: fixed; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--primary-deep);
    padding: 12px 16px 20px;
    display: none;
    box-shadow: 0 16px 32px rgba(14, 36, 57, 0.35);
  }
  .nav-links.open { display: flex; }
  .nav-links a { justify-content: center; min-height: 48px; }
  .nav-links a.active::after { left: 40%; right: 40%; bottom: 8px; }

  .cols-2, .cols-3, .cols-5 { grid-template-columns: 1fr; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .card-grid.cols-4 { grid-template-columns: 1fr; }

  .client-grid, .coop-grid, .trust-stats, .contact-grid { grid-template-columns: 1fr; }
  .product-showcase { flex-direction: column; text-align: center; }
  .big-claim .claim-text { font-size: 24px; }
  .footer .container { grid-template-columns: 1fr; gap: 28px; }
  .page-hero .container { grid-template-columns: 1fr; }
  .page-hero .hero-index { display: none; }
  .steps { grid-template-columns: 1fr; }
  .product-matrix { grid-template-columns: 1fr; }
  .shop-info-card { padding: 32px 24px; }
  .contact-qr img { width: 140px; height: 140px; }
  .product-showcase .ps-visual { width: 180px; height: 180px; font-size: 72px; }
}

/* ---------- 尊重减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .phone-mockup { animation: none; }
}

/* ---------- 深化文案补充样式 ---------- */
.biz-desc { font-size: 14px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 8px; }
.biz-more { font-size: 14px; line-height: 1.7; color: var(--text-secondary); border-left: 3px solid var(--accent); padding-left: 14px; margin-bottom: 20px; }
.trust-summary { max-width: 720px; margin: 1.5rem auto 0; text-align: center; font-size: 1.05rem; color: var(--primary); font-weight: 600; }
.about-intro p { max-width: 860px; margin: 0 auto 0.875rem; font-size: 1rem; line-height: 1.9; color: var(--text); }
.about-intro p:last-child { margin-bottom: 0; }

/* ---------- 审查修复补充（A/B/C 级） ---------- */
.cta-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
.cta-banner .biz-badge { margin: 0 0 0.75rem; }

/* 色差卡图标（software 技术能力/合作方式、about 业务版图） */
.client-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 12px; font-size: 24px; margin-bottom: 14px;
}


/* maintenance 痛点区：浅底无卡分组 */
.pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.pain-card { padding: var(--card-pad-y) var(--card-pad-x); } /* v2.3：纳入卡片内边距基线 */
.pain-card h3 { font-size: 18px; font-weight: 800; color: var(--primary); margin-bottom: 8px; }
.pain-card .biz-icon { background: var(--ink-soft); }

/* about 业务版图：2 列色差 */
.about-map-grid { grid-template-columns: repeat(2, 1fr); }
.about-map-grid .card-head .biz-num { margin-bottom: 0; }

@media (max-width: 768px) {
  .about-intro p { font-size: .95rem; }
}

/* ---------- 移动端专项修复（2026-09 布局审查） ---------- */
@media (max-width: 768px) {
  /* 定价表：窄屏横向滚动，避免 5 列挤压溢出 */
  .pricing-full-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .pricing-full-table th, .pricing-full-table td { padding: 12px 14px; }
  .pricing-full-table .cta-cell .btn { min-height: 44px; }

  /* 弹窗关闭按钮：触达区提升到 44px */
  .qr-modal-close { width: 44px; height: 44px; }

  /* 正文最小可读字号提级到 14px（移动端） */
  .feature-card p,
  .step p,
  .pricing-card .plan-desc,
  .pricing-card .plan-features li,
  .check-list li,
  .product-matrix-item p,
  .timeline-item p,
  .about-sidebar .sb-block p,
  .qr-modal-content p,
  .footer-col p,
  .footer-bottom { font-size: 14px; }
}

/* ---------- B-1 去卡片化响应式（审查修复） ---------- */
@media (max-width: 768px) {
  .pain-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* =====================================================
   视觉一致性统一 v2.1（审查清单 A–E 落地）
   仅样式层调整：不改营销文案、不改章节顺序与条目数量
   ===================================================== */
:root {
  /* 卡片族内边距基线（A6） */
  --card-pad-y: 32px;
  --card-pad-x: 26px;
  /* 同类卡最小高度基线（A2/A3/A4/A5） */
  --biz-card-min-h: 286px;   /* 按 maintenance「服务范围」实测最高一组对齐 */
  --client-card-min-h: 270px;
  --contact-item-min-h: 154px;
  /* 并排 CTA 最小宽度基线（B3） */
  --btn-min-w: 176px;
}

/* ---------- A6 卡片内边距基线统一 ---------- */
.biz-card,
.client-card,
.feature-card,
.pricing-card { padding: var(--card-pad-y) var(--card-pad-x); }

/* ---------- B1/A7 卡内垂直流：按钮与徽标贴卡底对齐 ---------- */
.biz-card,
.client-card,
.pricing-card { display: flex; flex-direction: column; }
.biz-card > .biz-num,
.biz-card > .biz-icon,
.biz-card > .biz-badge,
.client-card > .biz-num,
.client-card > .client-icon,
.client-card > .client-tag,
.client-card > .biz-badge { align-self: flex-start; }
.biz-badge { margin-top: auto; }
.biz-card > .btn,
.pricing-card > .btn { margin-top: auto; }

/* ---------- A1 product 两组定价卡等高：功能位统一按 4 条基准留白 ---------- */
/* 4 ×（13.5px × 1.5 行高 + 10px 行距） */
.pricing-card .plan-features { min-height: 121px; }

/* ---------- C1/C3/C4/C5 文本节奏槽位 ---------- */
.biz-desc { min-height: calc(1.7em * 2); }                     /* 描述统一 2 行位 */
.cols-3 .biz-card:has(> .btn) > .biz-desc { min-height: calc(1.7em * 3); } /* 首页三卡（带按钮）3 行位 */
.trust-stat .ts-number { min-height: calc(1.2em * 2); }        /* C2 数字统一 2 行位 */

/* ---------- A2/A3/A4/A5 卡片最小高度基线（v2.3：扩展到全部断点，含 769–992 与 ≤768） ---------- */
.biz-card { min-height: var(--biz-card-min-h); }
.client-grid .client-card { min-height: var(--client-card-min-h); }
.contact-item { min-height: var(--contact-item-min-h); align-items: center; }
/* computer 门店信息：末行说明贴底；卡高不再设基线，由内容决定（见 v2.5 收口块） */
.section-store .biz-card > .biz-more { margin-top: auto; }

/* ---------- B3 同排 CTA 等宽 ---------- */
@media (min-width: 768px) {
  .hero-buttons .btn,
  .page-hero-cta .btn,
  .cta-actions .btn { min-width: var(--btn-min-w); }
}

/* ---------- B2 地图卡按钮回到全站 btn-lg 规格 ---------- */
.map-placeholder .btn { margin-top: 8px; }


/* ---------- D2/D3/D4 maintenance 服务流程：圆形步骤号 + 顶部流程标记 ---------- */
.section-flow .biz-card::before {
  content: "";
  position: absolute; top: 0;
  left: var(--card-pad-x); right: var(--card-pad-x);
  height: 3px; border-radius: 0 0 3px 3px;
  background: var(--accent); opacity: 0.8;
}
.section-flow .card-head .biz-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
  -webkit-text-stroke: 0;
  font-size: 16px; font-weight: 800; letter-spacing: 0;
  margin-bottom: 12px;
}

/* ---------- E1 product 堆叠标题（替代内联 margin-top:64px） ---------- */
.section-title--stack { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

/* ---------- E2 CTA 区块与相邻区块反色，保持区块边界可见 ---------- */
.section-alt .cta-banner { background: var(--card-bg); }

/* ---------- E3 内页首屏统一：hero-compact 与 page-hero 同规格 ---------- */
.hero-compact h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 14px; }
.hero-compact .subtitle { font-size: clamp(1rem, 1.4vw, 1.12rem); color: rgba(255, 255, 255, 0.78); max-width: 640px; }

/* ---------- E5 色差卡色序：第二排整体轮转，避免两排同色重复 ---------- */
.client-grid .client-card { box-shadow: var(--shadow-sm); }
.client-grid .client-card:nth-child(1) { background: var(--ink-soft); }
.client-grid .client-card:nth-child(2) { background: var(--accent-soft); }
.client-grid .client-card:nth-child(3) { background: var(--card-bg); }
.client-grid .client-card:nth-child(4) { background: var(--ink-soft); }
.client-grid--offset .client-card:nth-child(1) { background: var(--accent-soft); }
.client-grid--offset .client-card:nth-child(2) { background: var(--card-bg); }
.client-grid--offset .client-card:nth-child(3) { background: var(--ink-soft); }

/* =====================================================
   收口修改 v2.3（首屏桔红层移除 / 顶部留白统一 / 卡片基线全断点 / 流程语言收敛）
   仅样式与装饰层调整：不改营销文案、不增删章节与条目
   ===================================================== */
:root {
  /* ⑤ 流程编号统一规格（三套流程共用：尺寸 / 字号 / 下距） */
  --flow-num-size: 44px;
  --flow-num-fs: 16px;
  --flow-num-mb: 14px;
  /* ⑥ computer 门店卡基线已移除（v2.5）：改用内容自适应高度，见文末收口块 */
}

/* ---------- ③⑥ 卡片行等高：≤992 起同类卡按同组最高者对齐 ---------- */
@media (max-width: 992px) {
  .card-grid,
  .client-grid { grid-auto-rows: 1fr; }
  .pain-grid { grid-auto-rows: 1fr; }              /* 痛点卡：同行/同列等高 */
  .card-grid.cols-3 > .pricing-card { min-height: 448px; } /* 定价卡：补齐高度基线，消除 3～22px 参差 */
}
@media (max-width: 768px) {
  :root { --contact-item-min-h: 178px; } /* contact 项：按该档最高项对齐 */
}

/* ---------- ⑤ 流程区（maintenance）编号节点与步骤条节点统一为一套规格 ---------- */
.section-flow .card-head .biz-num {
  width: var(--flow-num-size); height: var(--flow-num-size);
  background-color: var(--card-bg);
  background-image: linear-gradient(158deg, #FFFFFF 0%, var(--accent-soft) 62%, #FBE4D6 100%);
  color: var(--accent-text);
  -webkit-text-stroke: 0;
  font-size: var(--flow-num-fs); font-variant-numeric: tabular-nums;
  font-weight: 800; letter-spacing: 0;
  margin-bottom: var(--flow-num-mb);
  box-shadow:
    0 0 0 1px rgba(232, 89, 12, 0.22),
    0 6px 14px -8px rgba(232, 89, 12, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---------- ① 流程区顶部标记与步骤条连线共用同一配色语言（保留流程可辨识度，不再用独立桔红实色） ---------- */
.section-flow .biz-card::before {
  opacity: 1;
  background: linear-gradient(90deg,
    rgba(232, 89, 12, 0.16) 0%,
    rgba(232, 89, 12, 0.34) 48%,
    rgba(232, 89, 12, 0.58) 100%);
}

/* ---------- ③ 卡内末行贴底：等高后多出的空间落在描述与末行之间，而非卡片底部 ---------- */
.biz-card > .biz-more { margin-top: auto; }

/* ---------- ②⑦ 首页首屏：769–992 保留左右两栏；≤768 压缩视觉模型，避免首屏超一屏 ---------- */
@media (min-width: 769px) and (max-width: 992px) {
  /* 仅首页 hero 用左右两栏；内页 .hero-compact 保持单列，避免 h1 与副标题同行错位 */
  .hero:not(.hero-compact) .container { grid-template-columns: 1.2fr 0.8fr; }
  .hero:not(.hero-compact) .hero-text { align-self: start; } /* h1 顶边与内页对齐（消除垂直居中 4px 偏移） */
  .hero-visual { margin-top: 0; }
}
@media (max-width: 768px) {
  .hero { padding-bottom: 2.5rem; }
  .hero-visual { margin-top: 26px; }
  .phone-mockup, .hero-visual::after { zoom: 0.8; }
}

/* =====================================================
   收口修改 v2.4（内页首屏规格统一）
   1) about 首屏移除多余 CTA 块后，四内页 hero 内容槽位统一：
      副标题按 2 行槽位预留（≤768 为 3 行），使 hero 高度只随断点变化、
      不随各页文案长短参差；
   2) ≤768 标题预留 2 行槽位（computer 标题在该档折行），四内页首屏等高。
   仅调整留白槽位，不改任何文案与信息结构。
   ===================================================== */
.hero-compact .subtitle { min-height: calc(1.7em * 2); }

@media (max-width: 768px) {
  .hero-compact h1 { min-height: calc(1.16em * 2); }
  .hero-compact .subtitle { min-height: calc(1.7em * 3); }
}

/* =====================================================
   收口修改 v2.5（computer 门店卡：高度贴合内容，消除卡内大块空白）
   1) 取消 .section-store .biz-card 的强制最小高度（旧 v2.3 基线：
      ≥993 为 384px、769–992 为 424px、≤768 回落 --biz-card-min-h 286px），
      门店卡恢复"图标 + 标题 + 说明 + 末行"的自然内容高度；
   2) 两卡彼此等高改由布局层保证，不再依赖人为基线：
      ≥769 两列同排由 grid 行拉伸（align-items: stretch 默认）取高者；
      ≤768 单列由既有的 .card-grid { grid-auto-rows: 1fr } 行等高对齐；
   3) 卡内末行仍贴卡底（.biz-more { margin-top: auto }），
      等高后余量仅落在"说明与末行之间"的常规间距，不再出现上百 px 空隙。
   仅调整高度约束，不改文案、条目、配色与卡片装饰。
   ===================================================== */
.section-store .biz-card { min-height: auto; }

/* =====================================================
   收口修改 v2.6（卡片编号悬停反馈统一）
   1) .client-card 内的 .biz-num 此前未绑定任何悬停规则（全站唯一悬停变色规则
      为 442 行 .biz-card:hover .biz-num），导致 about「业务版图」4 张卡 /
      software 同类卡的数字悬停无任何变化。此处补齐为与 .biz-card 完全一致的
      反馈：填充色 → var(--accent)，描边 → 透明（即"空心描边数字 → 实心品牌橙"）。
   2) .section-flow 圆底徽章编号：上游 1249/1302 行的形态覆盖（0,3,0）排在
      442 行 .biz-card:hover .biz-num（0,3,0）之后，同特异度后者胜，其
      color / -webkit-text-stroke 覆盖了悬停值 → 悬停完全无反馈。
      此处按徽章形态给出等价反馈：悬停时圆底填充为品牌橙实底（白字，AA），
      即"编号变色"在徽章形态下的同义表达。
      实现用 inset 阴影 spread 由 0 → 44px 生长填充（box-shadow 可平滑过渡，
      且 inset 阴影绘制在背景之上、文字之下），因此常态外观与上游逐值一致，
      仅新增一条 0 尺寸的空阴影层用于过渡对齐。
   仅补悬停反馈，不改文案、卡片结构、配色变量与其它已验收基线。
   ===================================================== */
.client-card:hover .biz-num {
  color: var(--accent);
  -webkit-text-stroke-color: transparent;
}

/* 常态：形态与上游 1302 行逐值一致 + 一条 0 尺寸空 inset 阴影层（不产生任何绘制） */
.section-flow .card-head .biz-num {
  box-shadow:
    0 0 0 1px rgba(232, 89, 12, 0.22),
    0 6px 14px -8px rgba(232, 89, 12, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 0 var(--accent-strong);
  transition:
    color 0.35s var(--ease),
    -webkit-text-stroke-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

/* 悬停：圆底橙实底 + 白字（等同"编号变色"），描边保持 0 */
.section-flow .biz-card:hover .card-head .biz-num {
  color: #FFFFFF;
  -webkit-text-stroke-color: transparent;
  box-shadow:
    0 0 0 1px rgba(201, 69, 10, 0.30),
    0 10px 20px -9px rgba(201, 69, 10, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 44px var(--accent-strong);
}

/* =====================================================
   v2.7 收口块：computer.html「门店信息」新增到店指引
   1) .store-guide —— 全宽卡，完全沿用 .biz-card 视觉语言
   2) .store-map-placeholder —— 地图截图位占位（纯 CSS，不引用图片）
      .store-map / .store-map img —— 截图替换后的样式，已预置
   3) 导航按钮：桌面并排等宽、移动端整宽
   覆盖范围仅限本区块新类，不改动既有 2 列卡与其它页面
   ===================================================== */

/* 与上方 2 列卡对齐同一 24px 网格间距 */
.store-guide { margin-top: 24px; }
.store-guide .biz-desc { margin-bottom: 20px; }

/* 地图截图位：占位块（虚线底盒，无任何图片请求） */
.store-map-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 220px;
  margin-bottom: 20px;
  padding: 28px 20px;
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.store-map-placeholder > span { font-size: 40px; }
.store-map-placeholder p { font-size: 14px; color: var(--text-secondary); }
.store-map-placeholder .store-map-hint { font-size: 12px; color: var(--text-muted); }

/* 地图截图位：换成 <figure class="store-map"><img …></figure> 后即生效 */
.store-map { margin: 0 0 20px; }
.store-map img {
  width: 100%; height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
}
.store-map figcaption { margin-top: 8px; font-size: 12px; color: var(--text-muted); }

/* 导航按钮：桌面并排（不被 .biz-card .btn{width:100%} 拉满），移动端整宽便于点按 */
.store-guide .store-guide-actions { justify-content: flex-start; }

@media (min-width: 768px) {
  .store-guide .store-guide-actions .btn { width: auto; min-width: 200px; }
}

@media (max-width: 768px) {
  .store-guide .store-guide-actions .btn { width: 100%; }
  .store-map-placeholder { min-height: 180px; }
}

/* ============================================================
   v2.7-b 收口块 —— contact 页「到店指引」与 computer 页统一
   1) 复用上方 v2.7 块的 .store-map / .store-map img / .store-map figcaption
      （图片宽度 100%、等比、1px 边框 + 圆角、图注 12px 灰字）
   2) .contact-store-guide —— contact 页该区块的包裹层（非卡片、定宽容器内居中排布）
   3) 原 .map-placeholder 虚线占位：contact 页自本版起不再引用，
      规则保留以兼容历史页面/回滚，无副作用
   ============================================================ */
.contact-store-guide .store-map { margin: 0 0 16px; }
.contact-store-guide .guide-note {
  margin: 0 0 20px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.contact-store-guide .store-guide-actions { justify-content: center; }

/* 导航按钮断点：桌面并排（不被拉满），移动端整宽便于点按 —— 与 computer 页一致 */
@media (min-width: 768px) {
  .contact-store-guide .store-guide-actions .btn { width: auto; min-width: 200px; }
}

@media (max-width: 768px) {
  .contact-store-guide .store-guide-actions .btn { width: 100%; }
}

/* ============================================================
   v2.8 收口块 —— 图标卡片头部"一行式"统一
   1) 带数字卡（.biz-card / .client-card 含 .biz-num）：
      数字(正常字号) + 图标 + 标题合并为同一行，数字最左、图标居中、
      标题右侧，垂直居中；悬停变橙沿用既有 .biz-card:hover .biz-num /
      .client-card:hover .biz-num 规则，效果保留
   2) 不带数字卡：图标 + 标题合并为同一行（图标左、标题右、垂直居中）
   3) 例外：product.html 的 4 列 .feature-card 保持图标上标题下居中，不受影响
   4) 窄屏 ≤768px：数字允许独立一行；图标+标题保持同行（图标左标题右），不溢出
   ============================================================ */
.card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 14px;
  min-width: 0;
}
.card-head .biz-num {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  margin-bottom: 0;
  -webkit-text-stroke: 1.5px rgba(22, 50, 79, 0.35);
}
.card-head .biz-icon,
.card-head .client-icon { margin-bottom: 0; }
.card-head h3 { margin-bottom: 0; min-width: 0; }

/* contact 联系卡：图标 + 标题同一行（图标左、标题右、垂直居中） */
.contact-item { align-items: center; }

/* 窄屏：数字、图标、标题保持同行（数字不再独占一行），字号微缩防溢出 */
@media (max-width: 768px) {
  .card-head .biz-num { font-size: 20px; }
}


/* ============================================================
   v2.8.2 —— 图标卡片 emoji → SVG 统一
   1) .icon-svg 统一 24px 视觉尺寸，flex 容器内不收缩
   2) mp-icon(记次宝大图标)/ai-float(AI浮动按钮)/phone-search(搜索提示) 按场景微调
   3) 颜色继承 currentColor：业务卡主题色与悬停变色自动生效
   ============================================================ */
.icon-svg {
  width: 24px; height: 24px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.mp-icon .icon-svg { width: 36px; height: 36px; }
.ai-float-ico .icon-svg { width: 20px; height: 20px; }
.phone-search .icon-svg {
  width: 13px; height: 13px;
  vertical-align: -1px;
  margin-right: 3px;
}

/* ============================================================
   v2.9 收口块 —— 业务页卡片等高 + 消除卡内大块空白
   1) .card-grid 全局 grid-auto-rows: 1fr：同模块所有行等高，
      多行模块（如 maintenance「服务范围」2×2）各卡高度一致；
   2) maintenance / software 两页 .biz-card 取消 286px 强制最小
      高度（旧 v2.3 基线），高度改由内容 + 行等高决定，消除内容
      短卡片（服务流程 / 合作流程等）的底部大块空白；
   3) .section-flow 流程卡描述不再预留 2 行槽位、底部距归零，
      流程短句卡更紧凑，同模块仍由 1) 保证等高。
   仅调整高度约束，不改文案、条目、配色与卡片装饰。
   ============================================================ */
.card-grid { grid-auto-rows: 1fr; }
.page-maintenance .biz-card,
.page-software .biz-card { min-height: auto; }
.page-software .client-card { min-height: auto; }
.section-flow .biz-desc { min-height: 0; margin-bottom: 0; }

/* ============================================================
   v2.10 收口块 —— 首页业务卡电话分线按钮组
   1) .biz-actions：首页三大板块卡按钮区（电话咨询 + 了解详情）
      并排等宽，随卡片 flex 贴底；移动端换列整宽
   2) 覆盖上游 .biz-card .btn { width: 100% }（同特异度，本块靠后胜出）
   仅新增按钮组布局，不改文案、配色与卡片装饰。
   ============================================================ */
.biz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}
.biz-actions .btn { width: auto; flex: 1 1 150px; }
@media (max-width: 768px) {
  .biz-actions .btn { flex: 1 1 100%; }
}


/* ---------- v2.11 产品配图与案例实拍（computer.html） ---------- */
.card-media { margin: 0 0 18px; border-radius: 12px; overflow: hidden; }
.card-media img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.showcase-item { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); }
.showcase-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; transition: transform 0.25s var(--ease); }
.showcase-item:hover img { transform: scale(1.03); }
.showcase-item figcaption { padding: 10px 12px; font-size: 13px; color: var(--text-secondary); }
@media (max-width: 768px) { .showcase-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 480px) { .showcase-grid { grid-template-columns: 1fr; } }
.lightbox { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(22, 50, 79, 0.86); visibility: hidden; opacity: 0; transition: opacity 0.25s var(--ease), visibility 0.25s; }
.lightbox.open { visibility: visible; opacity: 1; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); }

/* ===== H5 移动端底部导航 ===== */
.bottom-nav { display: none; }
@media (max-width: 768px) {
  body { padding-bottom: 58px; }
  .bottom-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(14, 36, 57, 0.10);
    box-shadow: 0 -4px 16px rgba(14, 36, 57, 0.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bottom-nav a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    padding: 7px 2px 6px;
    color: var(--text-secondary);
    font-size: 11px; font-weight: 600;
    text-decoration: none;
    transition: color 0.2s var(--ease);
  }
  .bottom-nav a .bn-icon { width: 20px; height: 20px; }
  .bottom-nav a.active { color: var(--accent-strong); font-weight: 700; }
}

/* ===== 移动端定价表格卡片化 ===== */
@media (max-width: 768px) {
  .pricing-full-table { display: block; border-radius: 12px; }
  .pricing-full-table thead { display: none; }
  .pricing-full-table tbody { display: block; }
  .pricing-full-table tbody tr {
    display: block; padding: 16px;
    border-bottom: 1px solid var(--border);
  }
  .pricing-full-table tbody tr:last-child { border-bottom: none; }
  .pricing-full-table tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 7px 0; border-bottom: 1px dashed var(--border);
    text-align: right; font-size: 14px;
  }
  .pricing-full-table tbody td:last-child { border-bottom: none; }
  .pricing-full-table tbody td::before {
    content: attr(data-label);
    font-weight: 700; color: var(--text-secondary);
    font-size: 12.5px; flex-shrink: 0;
  }
  .pricing-full-table tbody td:first-child {
    justify-content: flex-start;
    font-weight: 800; color: var(--primary);
    font-size: 15px; padding: 2px 0 10px;
    border-bottom: none;
  }
  .pricing-full-table tbody td:first-child::before { content: none; }
  .pricing-full-table .price-cell { font-size: 18px; }
  .pricing-full-table .cta-cell .btn { min-height: 40px; }
}


/* ===== 移动端换行专项修复（2026-09 审查 #1-#7） ===== */
@media (max-width: 768px) {
  /* #1 contact 业务版图：2 列改 1 列，避免卡片文字竖排挤压 */
  .about-map-grid { grid-template-columns: 1fr; }
  /* #2 index 记次宝入口：纵向排列，标题/按钮不再挤换行 */
  .mini-product { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 20px; }
  .mini-product .btn { white-space: nowrap; }
  /* #7 software 技术栈标签：缩字号防孤行 */
  .client-tag { font-size: 11px; padding: 4px 10px; }
}
@media (max-width: 480px) {
  /* #3 maintenance H1 单行显示 */
  .hero-compact .maint-hero-h1 { font-size: 21px; white-space: nowrap; letter-spacing: 0; }
}

/* 移动端隐藏footer快速导航 (v2.19) */
@media (max-width: 768px) {
  .footer-nav-col { display: none !important; }
}