/* ============================================================================
   粤票务官网 · 共享样式（全站唯一样式来源）
   ----------------------------------------------------------------------------
   六个页面共用这一份 css：index / features / apps / solutions / pricing / contact
   改样式只改这里；页面里只写「这页独有的」少数组内联样式。
   图标：全站唯一来源 Reicon（assets/reicon-icons.js 由 tools/reicon-builder 生成）
   ========================================================================== */

:root {
  --primary: #FF5D44;
  --primary-dark: #E8452B;
  --primary-light: #FFF1EE;
  --secondary: #1B2B4B;
  --accent: #FFD166;
  --dark: #0F172A;
  --gray-900: #1E293B;
  --gray-700: #475569;
  --gray-500: #64748B;
  --gray-300: #CBD5E1;
  --gray-200: #E2E8F0;
  --gray-100: #F1F5F9;
  --white: #FFFFFF;
  --success: #10B981;
  --info: #3B82F6;
  --purple: #7C3AED;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.15);
  --radius: 12px;
  --radius-lg: 20px;
  --nav-h: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  /* 手机横竖屏切换 / 小屏字体自适应：不让 iOS 自动放大正文字号 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: 'Noto Sans SC', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* 兜底：任何一段超宽内容都不该让整页左右晃 */
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
/* 触控友好：可点元素最小 44×44（苹果 HIG / 安卓 Material 的共同建议） */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .nav-links a { padding: 8px 0; }
  .group-nav a { min-height: 40px; display: inline-flex; align-items: center; }
  .footer-links a { display: inline-block; padding: 4px 0; }
}

/* ============ 图标 ============ */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; fill: currentColor; flex-shrink: 0; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }
.icon-2xl { width: 48px; height: 48px; }

/* ============ 按钮 ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 24px; border-radius: 8px; font-weight: 600; font-size: 15px;
  cursor: pointer; transition: all 0.2s; text-decoration: none; border: none; font-family: inherit;
}
.btn-ghost { background: transparent; color: var(--gray-700); }
.btn-ghost:hover { background: var(--gray-100); }
.btn-primary { background: var(--primary); color: var(--white); box-shadow: 0 2px 8px rgba(255,93,68,0.3); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,93,68,0.4); }
.btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-outline:hover { background: var(--primary); color: var(--white); }
.btn-lg { padding: 14px 32px; font-size: 16px; }
.btn-xl { padding: 18px 40px; font-size: 17px; border-radius: 12px; }
.btn-white { background: var(--white); color: var(--secondary); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.btn-ghost-white { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.3); }
.btn-ghost-white:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }

/* ============ 导航 ============ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease;
}
.navbar.scrolled { box-shadow: var(--shadow); }
.nav-container {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; height: var(--nav-h);
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; font-weight: 800; font-size: 20px; color: var(--secondary);
}
.nav-logo .logo-box {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
}
.nav-logo .logo-mark { height: 15px; width: auto; fill: var(--white); display: block; }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a { text-decoration: none; color: var(--gray-700); font-weight: 500; font-size: 15px; transition: color 0.2s; }
.nav-links a:hover { color: var(--primary); }
.nav-links a.active { color: var(--primary); font-weight: 600; }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
.mobile-menu-btn span { display: block; width: 24px; height: 2px; background: var(--gray-700); border-radius: 2px; }

/* ============ 区块 ============ */
.section-header { text-align: center; max-width: 760px; margin: 0 auto 60px; padding: 0 24px; }
.section-tag {
  display: inline-block; padding: 6px 16px; background: var(--primary-light);
  color: var(--primary-dark); border-radius: 20px; font-size: 14px; font-weight: 600; margin-bottom: 16px;
}
.section-title { font-size: 40px; font-weight: 800; color: var(--secondary); margin-bottom: 16px; line-height: 1.3; }
.section-desc { font-size: 18px; color: var(--gray-500); }
.section-header.left { text-align: left; margin-left: 0; padding-left: 0; }
.section { padding: 100px 0; }
.section-white { background: var(--white); }
.section-gray { background: var(--gray-100); }
.section-alt { background: linear-gradient(180deg, var(--gray-100) 0%, var(--white) 100%); }
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 900px; margin: 0 auto; padding: 0 24px; }

/* 页面头（内页统一） */
.page-hero {
  padding: calc(var(--nav-h) + 72px) 0 64px;
  background: linear-gradient(135deg, #FFF8F3 0%, #FFF 55%, #F0F7FF 100%);
  text-align: center; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; top: -60%; right: -10%; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(255,93,68,0.07) 0%, transparent 70%); border-radius: 50%;
}
.page-hero .container { position: relative; }
.page-hero h1 { font-size: 46px; font-weight: 900; color: var(--secondary); line-height: 1.2; margin-bottom: 18px; }
.page-hero p { font-size: 19px; color: var(--gray-700); max-width: 800px; margin: 0 auto; line-height: 1.7; }
.crumbs { font-size: 14px; color: var(--gray-500); margin-bottom: 20px; }
.crumbs a { color: var(--gray-500); text-decoration: none; }
.crumbs a:hover { color: var(--primary); }

/* ============ Hero（首页） ============ */
.hero {
  padding-top: var(--nav-h);
  background: linear-gradient(135deg, #FFF8F3 0%, #FFF 50%, #F0F7FF 100%);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -50%; right: -20%; width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(255,93,68,0.06) 0%, transparent 70%); border-radius: 50%;
}
.hero-container {
  max-width: 1280px; margin: 0 auto; padding: 80px 24px 72px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; background: var(--primary-light); color: var(--primary-dark);
  border-radius: 20px; font-size: 14px; font-weight: 600; margin-bottom: 24px;
}
.hero-badge .dot { width: 8px; height: 8px; background: var(--success); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.hero h1 { font-size: 54px; font-weight: 900; line-height: 1.15; color: var(--secondary); margin-bottom: 24px; }
.hero h1 .highlight { color: var(--primary); }
.hero-subtitle { font-size: 19px; color: var(--gray-700); margin-bottom: 32px; line-height: 1.75; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 44px; margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--gray-300); flex-wrap: wrap; }
.hero-stat-value { font-size: 34px; font-weight: 800; color: var(--secondary); }
.hero-stat-label { font-size: 14px; color: var(--gray-500); margin-top: 4px; }
.hero-visual { position: relative; }
.hero-card-stack { display: flex; flex-direction: column; gap: 20px; }
.hero-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 24px;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(0,0,0,0.04);
}
.hero-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.hero-card-icon {
  width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary);
}
.hero-card-title { font-weight: 700; color: var(--secondary); }
.hero-card-desc { font-size: 14px; color: var(--gray-500); }
.seat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.seat { height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #F5F5F5; }
.seat.sold { background: var(--primary); }
.seat .seat-icon { width: 24px; height: 24px; color: var(--gray-300); }
.seat.sold .seat-icon { color: var(--white); }
.floating-badge {
  position: absolute; background: var(--white); border-radius: var(--radius);
  padding: 14px 20px; box-shadow: var(--shadow-xl); display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 14px; z-index: 2;
}
.floating-badge.top-right { top: -20px; right: -20px; }
.floating-badge.bottom-left { bottom: 110px; right: -30px; }
.floating-badge-icon {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white;
}
.metric-row { display: flex; gap: 32px; }
.metric-value { font-size: 28px; font-weight: 800; color: var(--secondary); }
.metric-value.accent { color: var(--primary); }
.metric-label { font-size: 13px; color: var(--gray-500); }

/* 规格数字条 */
.spec-strip { border-top: 1px solid var(--gray-200); background: rgba(255,255,255,0.7); }
.spec-strip-inner {
  max-width: 1280px; margin: 0 auto; padding: 28px 24px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; text-align: center;
}
.spec-item .spec-num { font-size: 26px; font-weight: 800; color: var(--primary); line-height: 1.2; }
.spec-item .spec-label { font-size: 13px; color: var(--gray-500); margin-top: 2px; }

/* ============ 对比（线上 vs 线下） ============ */
.compare-grid { max-width: 980px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.compare-col { background: var(--white); border-radius: var(--radius-lg); padding: 32px; border: 1px solid var(--gray-200); }
.compare-col.online { border-color: var(--success); box-shadow: 0 0 0 2px rgba(16,185,129,0.2); }
.compare-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.compare-header h4 { font-size: 20px; font-weight: 700; color: var(--secondary); margin-bottom: 4px; }
.compare-header p { font-size: 14px; color: var(--gray-500); }
.compare-list { list-style: none; }
.compare-list li {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
  font-size: 15px; color: var(--gray-700); border-bottom: 1px solid var(--gray-100);
}
.compare-list li:last-child { border-bottom: none; }
.compare-list .check { color: var(--success); margin-top: 3px; }
.compare-list .cross { color: #EF4444; margin-top: 3px; }

/* ============ 卡片网格 ============ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }

.feature-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 32px;
  transition: all 0.3s ease; border: 1px solid transparent;
}
/* 只有真能点的卡片才做"抬起来"的位移（位移=可点的视觉承诺）；
   纯展示卡片改成描边+阴影反馈，不再假装自己能点 */
.feature-card:hover { box-shadow: var(--shadow-lg); border-color: var(--gray-300); }
.feature-card.linked { text-decoration: none; display: block; }
.feature-card.linked:hover { transform: translateY(-4px); border-color: var(--primary); }
.feature-card.linked .card-more { transition: gap 0.2s ease; }
.feature-card.linked:hover .card-more { gap: 10px; }
.feature-icon {
  width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; background: var(--primary-light); color: var(--primary);
}
.feature-card h4 { font-size: 20px; font-weight: 700; color: var(--secondary); margin-bottom: 10px; }
.feature-card p { font-size: 15px; color: var(--gray-500); line-height: 1.65; }
.feature-card .card-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-size: 14px; font-weight: 600; color: var(--primary);
}
.icon-warn { background: #FEF3C7; color: #D97706; }
.icon-info { background: #DBEAFE; color: var(--info); }
.icon-ok { background: #D1FAE5; color: var(--success); }
.icon-purple { background: #EDE9FE; color: var(--purple); }
.icon-pink { background: #FCE7F3; color: #DB2777; }
.icon-teal { background: #CCFBF1; color: #0D9488; }
.icon-rose { background: #FFE4E6; color: #E11D48; }
.icon-sky { background: #E0F2FE; color: #0284C7; }

/* ============ 产品 / 部署形态卡 ============ */
.product-grid { max-width: 1120px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.product-card {
  background: var(--white); border-radius: var(--radius-lg); border: 2px solid var(--gray-100);
  overflow: hidden; transition: all 0.3s ease; position: relative;
}
.product-card:hover { border-color: var(--primary); box-shadow: var(--shadow-xl); }
.product-card.saas:hover { border-color: var(--info); }
.product-card-header { padding: 32px 32px 24px; }
.product-card.enterprise .product-card-header { background: linear-gradient(135deg, #FFF8F3 0%, #FFF 100%); }
.product-card.saas .product-card-header { background: linear-gradient(135deg, #EFF6FF 0%, #FFF 100%); }
.product-card-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; margin-bottom: 16px; }
.product-card.enterprise .product-card-badge { background: var(--primary-light); color: var(--primary-dark); }
.product-card.saas .product-card-badge { background: #DBEAFE; color: #1D4ED8; }
.product-card h3 { font-size: 28px; font-weight: 800; color: var(--secondary); margin-bottom: 12px; }
.product-card-subtitle { font-size: 16px; color: var(--gray-500); margin-bottom: 20px; }
.product-card-price { margin-bottom: 24px; }
.product-card-price .amount { font-size: 36px; font-weight: 800; color: var(--secondary); }
.product-card-price .unit { font-size: 16px; color: var(--gray-500); }
.product-card-body { padding: 0 32px 32px; }
.product-mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.mini-stat { text-align: center; padding: 12px 8px; background: var(--gray-100); border-radius: var(--radius); }
.mini-stat-value { font-size: 18px; font-weight: 800; color: var(--secondary); }
.mini-stat-label { font-size: 11px; color: var(--gray-500); }
.feature-list { list-style: none; margin-bottom: 28px; }
.feature-list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 15px; color: var(--gray-700); }
.feature-list .check {
  flex-shrink: 0; width: 20px; height: 20px; background: var(--primary-light); color: var(--primary);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.product-card.saas .feature-list .check { background: #DBEAFE; color: #1D4ED8; }

/* ============ 多端协同 ============ */
.terminal-grid { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.terminal-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 36px 32px; text-align: center;
  transition: all 0.3s; border: 1px solid var(--gray-200);
}
.terminal-card:hover { box-shadow: var(--shadow-xl); border-color: var(--primary); }
.terminal-icon {
  width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; background: var(--primary-light); color: var(--primary);
}
.terminal-card h4 { font-size: 22px; font-weight: 700; color: var(--secondary); margin-bottom: 6px; }
.terminal-role { font-size: 14px; color: var(--primary); font-weight: 600; margin-bottom: 12px; }
.terminal-desc { font-size: 15px; color: var(--gray-500); line-height: 1.7; }
.terminal-meta { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gray-100); font-size: 13px; color: var(--gray-500); }

/* ============ 功能全景（features 页） ============ */
.group-nav { position: sticky; top: var(--nav-h); z-index: 900; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-200); }
.group-nav-inner { max-width: 1280px; margin: 0 auto; padding: 12px 24px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.group-nav-inner::-webkit-scrollbar { display: none; }
.group-nav a {
  flex-shrink: 0; padding: 8px 16px; border-radius: 20px; text-decoration: none; font-size: 14px; font-weight: 500;
  color: var(--gray-700); background: var(--gray-100); transition: all 0.2s; white-space: nowrap;
}
.group-nav a:hover { background: var(--primary-light); color: var(--primary-dark); }
/* 当前正在看的分组（滚动高亮，由 site.js 的 initGroupNav 维护） */
.group-nav a.active { background: var(--primary); color: #fff; }
.group-nav a.active:hover { background: var(--primary-dark); color: #fff; }
/* 点锚点跳过去时，标题别被吸顶的两层导航盖住 */
.cap-group { scroll-margin-top: calc(var(--nav-h) + 76px); }

.cap-group { padding: 72px 0; border-bottom: 1px solid var(--gray-100); }
.cap-group:last-of-type { border-bottom: none; }
.cap-group:nth-of-type(even) { background: var(--gray-100); }
.cap-head { max-width: 1280px; margin: 0 auto 40px; padding: 0 24px; display: flex; align-items: flex-start; gap: 20px; }
.cap-head-icon {
  width: 60px; height: 60px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary);
}
.cap-head h2 { font-size: 30px; font-weight: 800; color: var(--secondary); margin-bottom: 8px; line-height: 1.3; }
.cap-head p { font-size: 16px; color: var(--gray-500); max-width: 900px; }
.cap-head .cap-count { font-size: 13px; color: var(--primary); font-weight: 600; }
.cap-body { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cap-item {
  background: var(--white); border-radius: var(--radius-lg); padding: 28px 30px; border: 1px solid var(--gray-200);
  transition: all 0.25s ease;
}
.cap-item:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); }
.cap-item h3 { font-size: 19px; font-weight: 700; color: var(--secondary); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.cap-item h3 .icon { color: var(--primary); }
.cap-item > p { font-size: 15px; color: var(--gray-500); line-height: 1.7; margin-bottom: 14px; }
.cap-item .cap-points { list-style: none; }
.cap-item .cap-points li {
  position: relative; padding: 5px 0 5px 20px; font-size: 14.5px; color: var(--gray-700); line-height: 1.65;
}
.cap-item .cap-points li::before {
  content: ''; position: absolute; left: 4px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
}
.cap-item .cap-points li strong { color: var(--secondary); font-weight: 600; }
.cap-badge {
  display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 700;
  background: var(--primary-light); color: var(--primary-dark); vertical-align: middle;
}
.cap-badge.new { background: #D1FAE5; color: #059669; }
.cap-badge.hot { background: #FFE4E6; color: #E11D48; }

/* ============ 上新 / 版本亮点 ============ */
.release-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.release-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 28px; border: 1px solid var(--gray-200);
  position: relative; transition: all 0.25s ease;
}
.release-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); }
.release-ver {
  display: inline-block; padding: 3px 10px; border-radius: 8px; font-size: 12px; font-weight: 700;
  background: var(--secondary); color: var(--accent); margin-bottom: 14px; font-family: 'Inter', monospace;
}
.release-card h4 { font-size: 18px; font-weight: 700; color: var(--secondary); margin-bottom: 10px; line-height: 1.4; }
.release-card p { font-size: 14.5px; color: var(--gray-500); line-height: 1.7; }
.release-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; background: var(--primary-light); color: var(--primary); }

/* ============ 上线流程 ============ */
.workflow-grid { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.workflow-grid::before {
  content: ''; position: absolute; top: 40px; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent)); z-index: 0;
}
.workflow-step { text-align: center; position: relative; z-index: 1; }
.workflow-number {
  width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; margin: 0 auto 20px; box-shadow: 0 4px 12px rgba(255,93,68,0.3);
}
.workflow-step h4 { font-size: 18px; font-weight: 700; color: var(--secondary); margin-bottom: 8px; }
.workflow-step p { font-size: 14px; color: var(--gray-500); }

/* ============ 定价 ============ */
.pricing-grid { max-width: 1120px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
.pricing-card {
  background: var(--white); border-radius: var(--radius-lg); border: 2px solid var(--gray-100);
  padding: 36px 32px; text-align: center; transition: all 0.3s ease; position: relative;
}
.pricing-card:hover { border-color: var(--primary); box-shadow: var(--shadow-xl); }
.pricing-card.popular { border-color: var(--primary); background: linear-gradient(180deg, var(--primary-light) 0%, var(--white) 30%); }
.pricing-card.popular::before {
  content: '最受欢迎'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: white; padding: 4px 16px; border-radius: 12px; font-size: 13px; font-weight: 700;
}
.pricing-card h4 { font-size: 20px; font-weight: 700; color: var(--secondary); margin-bottom: 8px; }
.pricing-card .pricing-desc { font-size: 14px; color: var(--gray-500); margin-bottom: 24px; }
.pricing-amount { margin-bottom: 28px; }
.pricing-amount .price { font-size: 48px; font-weight: 800; color: var(--secondary); }
.pricing-amount .currency { font-size: 24px; vertical-align: top; margin-right: 4px; }
.pricing-amount .period { font-size: 16px; color: var(--gray-500); }
.pricing-features { list-style: none; text-align: left; margin-bottom: 28px; }
.pricing-features li {
  padding: 10px 0; font-size: 15px; color: var(--gray-700);
  display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--gray-100);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features .check { color: var(--success); margin-top: 3px; }

/* ============ 对比表 ============ */
.comparison-table-wrapper { max-width: 1000px; margin: 0 auto; padding: 0 24px; overflow-x: auto; }
.comparison-table {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 40px;
}
.comparison-table th, .comparison-table td { padding: 16px 20px; text-align: center; border-bottom: 1px solid var(--gray-100); font-size: 15px; }
.comparison-table th { background: var(--secondary); color: var(--primary); font-weight: 600; font-size: 16px; }
.comparison-table th:first-child { text-align: left; background: var(--gray-900); color: var(--white); }
.comparison-table td:first-child { text-align: left; font-weight: 500; color: var(--gray-700); }
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table .col-enterprise { background: var(--primary-light); }
.comparison-table .col-saas { background: #EFF6FF; }
.check-icon { color: var(--success); }
.cross-icon { color: var(--gray-300); }

/* ============ 场景方案 ============ */
.scene-card {
  background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--gray-200);
  padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; transition: all 0.25s ease;
}
.scene-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); }
.scene-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.scene-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--primary-light); color: var(--primary); flex-shrink: 0; }
.scene-head h3 { font-size: 22px; font-weight: 800; color: var(--secondary); }
.scene-head .scene-sub { font-size: 13px; color: var(--gray-500); font-weight: 400; }
.scene-pain { font-size: 15px; color: var(--gray-700); line-height: 1.75; }
.scene-pain .label, .scene-fix .label {
  display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 8px; margin-bottom: 10px;
}
.scene-pain .label { background: #FFE4E6; color: #E11D48; }
.scene-fix .label { background: #D1FAE5; color: #059669; }
.scene-fix { font-size: 15px; color: var(--gray-700); line-height: 1.75; }
.scene-fix ul { list-style: none; margin-top: 8px; }
.scene-fix li { position: relative; padding: 4px 0 4px 20px; }
.scene-fix li::before { content: ''; position: absolute; left: 4px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

/* ============ 案例 / 评价 ============ */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.case-card {
  background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--gray-200);
  overflow: hidden; transition: all 0.3s ease; box-shadow: var(--shadow-lg);
}
.case-card:hover { box-shadow: var(--shadow-xl); border-color: var(--primary); }
.case-cover {
  height: 160px; background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.case-cover.blue { background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%); }
.case-cover.green { background: linear-gradient(135deg, #10B981 0%, #059669 100%); }
.case-cover.purple { background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%); }
.case-cover-inner { text-align: center; color: var(--white); }
.case-cover-route { font-size: 22px; font-weight: 800; }
.case-cover-company { font-size: 14px; opacity: 0.85; margin-top: 4px; }
.case-body { padding: 24px; }
.case-tags { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.case-tag { padding: 4px 12px; background: var(--primary-light); color: var(--primary-dark); border-radius: 20px; font-size: 12px; font-weight: 600; }
.case-tag.green { background: #D1FAE5; color: #059669; }
.case-tag.blue { background: #DBEAFE; color: #1D4ED8; }
.case-tag.purple { background: #EDE9FE; color: #6D28D9; }
.case-title { font-size: 18px; font-weight: 700; color: var(--secondary); margin-bottom: 12px; line-height: 1.4; }
.case-desc { font-size: 14px; color: var(--gray-500); line-height: 1.7; margin-bottom: 20px; }
.case-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 16px; border-top: 1px solid var(--gray-100); }
.case-result { text-align: center; }
.case-result-value { font-size: 22px; font-weight: 800; color: var(--primary); }
.case-result-label { font-size: 11px; color: var(--gray-500); }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.testimonial-card { background: var(--white); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.testimonial-quote { font-size: 16px; color: var(--gray-700); line-height: 1.7; margin-bottom: 24px; padding-left: 20px; border-left: 3px solid var(--primary); }
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.testimonial-avatar {
  width: 48px; height: 48px; border-radius: 50%; background: var(--primary-light);
  display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--primary-dark); font-size: 18px;
}
.testimonial-name { font-weight: 600; color: var(--secondary); }
.testimonial-role { font-size: 14px; color: var(--gray-500); }

/* ============ 表单 ============ */
.form-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 40px; border: 1px solid var(--gray-200); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-size: 14px; font-weight: 600; color: var(--secondary); margin-bottom: 8px; }
.form-field label .req { color: #EF4444; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--gray-200); border-radius: 10px;
  /* 16px 是硬要求：小于 16px 时 iOS Safari 聚焦会自动把整页放大，用户要手动缩回去 */
  font-size: 16px; font-family: inherit; color: var(--gray-900); background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  /* 手机上避免系统给输入框加内阴影/圆角 */
  -webkit-appearance: none;
  appearance: none;
}
.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748B'%3E%3Cpath d='M12 15.5a1 1 0 0 1-.7-.3l-5-5a1 1 0 1 1 1.4-1.4l4.3 4.29 4.3-4.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-.7.29Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  padding-right: 42px;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,93,68,0.12);
}
.form-field textarea { resize: vertical; min-height: 96px; }
/* 勾选框必须单独覆盖：上面的 input 规则带着 padding:12px 16px 和 width:100%，
   会把 18px 的方框撑成 34×26 的怪形状（2026-10-08 线上被发现）。 */
.form-field input[type="checkbox"] {
  width: 18px; height: 18px; padding: 0; margin: 3px 0 0;
  flex: 0 0 auto; accent-color: var(--primary); cursor: pointer;
}
.form-field .hint { font-size: 13px; color: var(--gray-500); margin-top: 6px; }
.form-field.invalid input, .form-field.invalid select, .form-field.invalid textarea { border-color: #EF4444; }.form-field .err { font-size: 13px; color: #EF4444; margin-top: 6px; display: none; }

/* 「留下联系方式」左右两栏等高（2026-10-08 修）
   右栏是三张信息卡（合计比表单高 159px），左栏只到表单就结束，底部会参差。
   让两栏拉伸等高，多出来的高度交给「还有什么想说的」输入框吸收——顺便写起来更宽敞。 */
#demo .grid-2 { align-items: stretch; }
#demo .form-card { display: flex; flex-direction: column; }
#demoForm { display: flex; flex-direction: column; flex: 1; }
.form-field.grow { flex: 1; display: flex; flex-direction: column; }
.form-field.grow textarea { flex: 1; min-height: 96px; }
.form-field.invalid .err { display: block; }
.form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.form-note { font-size: 13px; color: var(--gray-500); margin-top: 16px; line-height: 1.7; }
.form-result {
  display: none; margin-top: 24px; padding: 20px; border-radius: var(--radius);
  background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; font-size: 14.5px; line-height: 1.7;
}
.form-result.show { display: block; }
.form-result pre {
  margin-top: 12px; padding: 16px; background: var(--white); border: 1px solid #A7F3D0; border-radius: 10px;
  font-size: 13px; white-space: pre-wrap; word-break: break-all; font-family: 'Inter', -apple-system, monospace;
  color: var(--gray-700); max-height: 260px; overflow: auto;
}

/* ============ FAQ ============ */
.faq-list { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.faq-item { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.faq-item summary {
  padding: 20px 24px; font-size: 16px; font-weight: 600; color: var(--secondary); cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 22px; color: var(--primary); font-weight: 400; flex-shrink: 0; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item[open] summary { color: var(--primary-dark); }
.faq-body { padding: 0 24px 22px; font-size: 15px; color: var(--gray-700); line-height: 1.8; }
.faq-body ul { margin: 10px 0 0 20px; }
.faq-body li { margin-bottom: 6px; }

/* ============ 通用块 ============ */
.notice {
  background: var(--primary-light); border-left: 4px solid var(--primary); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px; font-size: 15px; color: var(--gray-700); line-height: 1.75;
}
.notice strong { color: var(--secondary); }
.prose { font-size: 16px; color: var(--gray-700); line-height: 1.85; }
.prose h2 { font-size: 26px; font-weight: 800; color: var(--secondary); margin: 40px 0 16px; }
.prose h3 { font-size: 19px; font-weight: 700; color: var(--secondary); margin: 28px 0 12px; }
.prose p { margin-bottom: 14px; }
.prose ul { margin: 0 0 16px 22px; }
.prose li { margin-bottom: 8px; }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 15px; }
.prose th, .prose td { padding: 12px 14px; border: 1px solid var(--gray-200); text-align: left; }
.prose th { background: var(--gray-100); font-weight: 600; color: var(--secondary); }
.tag-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.tag-pill { padding: 6px 14px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 20px; font-size: 14px; color: var(--gray-700); }

/* ============ CTA / Footer ============ */
.cta-section { padding: 100px 0; background: linear-gradient(135deg, var(--secondary) 0%, #2D3A5C 100%); color: var(--white); text-align: center; }
.cta-container { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.cta-section h2 { font-size: 44px; font-weight: 800; margin-bottom: 20px; }
.cta-section p { font-size: 20px; opacity: 0.85; margin-bottom: 40px; }
.cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cta-contact { margin-top: 32px; font-size: 15px; opacity: 0.75; line-height: 1.9; }
.footer { background: var(--dark); color: var(--white); padding: 60px 0 32px; }
.footer-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 48px; margin-bottom: 48px;
}
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 15px; margin-top: 16px; line-height: 1.7; }
.footer-col h5 { font-size: 16px; font-weight: 600; margin-bottom: 20px; color: var(--white); }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.footer-links a:hover { color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  max-width: 1280px; margin: 0 auto; padding: 32px 24px 0;
}
.footer-copyright { color: rgba(255,255,255,0.5); font-size: 14px; }
.footer-social { display: flex; gap: 16px; color: rgba(255,255,255,0.6); font-size: 14px; flex-wrap: wrap; }

/* ============ 动效 ============
   ⚠️ 初始隐藏态必须挂在 .js 下（<head> 里那行内联脚本打的标记）。
   否则一旦 site.js 被拦截/加载失败/JS 被禁用，「等 JS 点亮」的卡片就永久停在 opacity:0
   —— 页面看着就是大片空白（2026-10-08 实测：5 个页面共 90 个元素会消失）。 */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
}

/* ============ 响应式 ============ */
@media (max-width: 1200px) {
  .spec-strip-inner { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (max-width: 1024px) {
  .hero h1 { font-size: 42px; }
  .hero-container { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .hero-visual { order: -1; }
  .hero-stats { justify-content: center; }
  .hero-actions { justify-content: center; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .cases-grid, .testimonials-grid, .release-grid { grid-template-columns: repeat(2, 1fr); }
  .cap-body { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; max-width: 600px; }
  .compare-grid { grid-template-columns: 1fr; }
  .workflow-grid { grid-template-columns: repeat(2, 1fr); }
  .workflow-grid::before { display: none; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; }
  .cases-grid, .testimonials-grid { max-width: 640px; margin-left: auto; margin-right: auto; }
  .terminal-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .scene-card { grid-template-columns: 1fr; gap: 20px; }
  .page-hero h1 { font-size: 36px; }
  /* 769–1024 区间 Hero 是单列居中，装饰徽标别往外戳（会顶破视口） */
  .floating-badge.top-right { right: 0; }
  .floating-badge.bottom-left { right: 0; }
}
@media (max-width: 768px) {
  /* 有 JS 才收起菜单靠汉堡展开；没有 JS 就常驻展开（否则手机上完全没法导航） */
  .js .nav-links { display: none; }
  .js .nav-links.open { display: flex; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--white); padding: 24px; box-shadow: var(--shadow-lg); gap: 18px; align-items: flex-start; }
  html:not(.js) .nav-links { display: flex; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--white); padding: 20px 16px; box-shadow: var(--shadow-lg); gap: 14px; align-items: flex-start; }
  html:not(.js) .mobile-menu-btn { display: none; }
  .nav-cta .btn-ghost { display: none; }
  .mobile-menu-btn { display: flex; }
  .hero h1 { font-size: 32px; }
  .hero-subtitle { font-size: 17px; }
  .section-title { font-size: 28px; }
  .section { padding: 64px 0; }
  .cap-group { padding: 48px 0; }
  .grid-2, .grid-3, .grid-4, .release-grid, .cases-grid, .testimonials-grid, .workflow-grid, .form-row { grid-template-columns: 1fr; }
  .spec-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .cta-section h2 { font-size: 30px; }
  .cta-section p { font-size: 17px; }
  .page-hero { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 40px; }
  .page-hero h1 { font-size: 28px; }
  .page-hero p { font-size: 16px; }
  .form-card { padding: 24px; }
  .cap-head { flex-direction: column; gap: 14px; }
  .hero-stats { gap: 28px; }
  .floating-badge.top-right { top: -12px; right: 0; }
  .floating-badge.bottom-left { bottom: 60px; right: 0; }
}
@media (max-width: 480px) {
  .metric-row { gap: 20px; }
  .btn-xl { padding: 15px 26px; font-size: 16px; width: 100%; }
  .hero-actions { flex-direction: column; }
  .cta-actions { flex-direction: column; }
}

/* ============ 后台入口弹回提示条 ============
   只在「从租户域名根路径被闸门弹回官网」时出现（?from=<域名>），平时完全不存在。
   高度由 JS 实测后写进 --arrival-h，手机上文字换行也不会错位。 */
:root { --arrival-h: 0px; }
.arrival-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  background: linear-gradient(90deg, var(--secondary) 0%, #2D3A5C 100%);
  color: var(--white); font-size: 14.5px; line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.arrival-bar .arrival-text { flex: 1; min-width: 0; }
.arrival-bar strong { color: var(--accent); font-weight: 700; }
.arrival-bar code {
  background: rgba(255,255,255,0.16); padding: 1px 6px; border-radius: 4px;
  font-family: 'Inter', monospace; font-size: 13px;
}
.arrival-bar .btn { flex-shrink: 0; padding: 8px 18px; font-size: 14px; }
.arrival-close {
  flex-shrink: 0; background: transparent; border: none; color: rgba(255,255,255,0.65);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 6px 4px; font-family: inherit;
}
.arrival-close:hover { color: var(--white); }

/* 有提示条时，把固定导航与吸顶分组导航整体下移 */
body.has-arrival .navbar { top: var(--arrival-h); }
body.has-arrival .hero,
body.has-arrival .page-hero { padding-top: calc(var(--nav-h) + var(--arrival-h)); }
body.has-arrival .group-nav { top: calc(var(--nav-h) + var(--arrival-h)); }

@media (max-width: 768px) {
  .arrival-bar { flex-wrap: wrap; gap: 10px; padding: 12px 16px; font-size: 14px; }
  /* 关闭按钮是绝对定位，文字要给它让位，否则最后一行会被压住 */
  .arrival-bar .arrival-text { flex: 1 1 100%; padding-right: 26px; }
  .arrival-bar .btn { flex: 1; }
  .arrival-close { position: absolute; top: 10px; right: 8px; padding: 6px 8px; }
}

/* ============================================================================
   手机端专项加固
   ----------------------------------------------------------------------------
   事实前提：官网的访客**大部分是拿手机点进来的**（微信里点开链接、抖音主页跳转）。
   所以手机不是"顺带兼容"，而是主战场：
     · 导航收成汉堡菜单，主 CTA 常驻右上角
     · 屏幕底部常驻「预约演示 / 电话」悬浮条，拇指够得到（带刘海屏安全区）
     · 所有多列网格在 768 以下单列，卡片不留横向溢出
     · 表格横向滚动并给出"可左右滑动"提示，不压缩到看不清
     · 悬浮徽标、绝对定位装饰在小屏一律收起，避免压字
   ========================================================================== */

/* 底部常驻操作条：只在小屏出现，JS 里给 body 加 has-mobile-bar 才预留内边距 */
.mobile-bar { display: none; }
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
}
.mobile-bar .btn { flex: 1; padding: 12px 10px; font-size: 15px; white-space: nowrap; }
.mobile-bar .btn-icon-only { flex: 0 0 52px; padding: 12px 0; }

/* 表格滚动提示：只在能滚的时候由 JS 加 class 显示 */
.scroll-hint {
  display: none; text-align: center; font-size: 13px; color: var(--gray-500); margin: -28px 0 28px;
}
.scroll-hint.show { display: block; }
.scroll-hint .icon { vertical-align: -3px; margin-right: 4px; }

@media (max-width: 768px) {
  /* 有底部操作条时，给页面留出空间，别让页脚被压住 */
  body.has-mobile-bar { padding-bottom: 68px; }
  .mobile-bar { display: flex; }

  /* 导航：logo 别太大，主 CTA 缩小但仍可点 */
  .nav-container { padding: 0 16px; }
  .nav-logo { font-size: 17px; gap: 8px; }
  .nav-logo .logo-box { width: 34px; height: 34px; border-radius: 9px; }
  .nav-logo .logo-mark { height: 13px; width: auto; }
  .nav-cta .btn { padding: 9px 16px; font-size: 14px; }
  .nav-links.open { padding: 18px 16px; }
  .nav-links.open a { font-size: 16px; }

  /* 容器内边距统一收窄，手机上一屏能看更多 */
  .container, .container-narrow, .hero-container, .section-header, .cap-head, .cap-body,
  .compare-grid, .product-grid, .terminal-grid, .pricing-grid, .cases-grid, .testimonials-grid,
  .workflow-grid, .faq-list, .comparison-table-wrapper, .release-grid, .scene-card { padding-left: 16px; padding-right: 16px; }

  /* 卡片内边距收窄 */
  .feature-card, .cap-item, .release-card, .terminal-card, .pricing-card,
  .testimonial-card, .compare-col, .scene-card, .case-body { padding: 22px; }
  .form-card { padding: 20px 16px; }
  .cap-item h3 { font-size: 17px; }
  .feature-card h4 { font-size: 18px; }

  /* 悬浮装饰在手机上会压到文字，一律收起 */
  .floating-badge { display: none; }
  .hero { padding-top: var(--nav-h); }
  /* 手机上先给文字再给示意图：1024 断点为了平板把示意图提到前面，
     但手机屏幕小，第一屏应该是"这是什么"，不是一张看不懂的仪表盘 */
  .hero-visual { order: 0; }
  .hero-container { padding: 32px 16px 40px; gap: 28px; }
  .hero h1 { font-size: 30px; }
  .hero-stats { gap: 20px 28px; margin-top: 32px; padding-top: 24px; }
  .hero-stat-value { font-size: 26px; }
  .hero-card { padding: 18px; }
  .metric-value { font-size: 24px; }
  .seat-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .seat { height: 38px; }

  /* 表格：横向滚动 + 提示，不用小到看不清 */
  .comparison-table { min-width: 620px; }
  .comparison-table th, .comparison-table td { padding: 12px 14px; font-size: 14px; }

  /* 分组导航吸顶时把下方内容顶开 */
  .group-nav { top: var(--nav-h); }
  .group-nav-inner { padding: 10px 16px; }
  .cap-group { padding: 40px 0; }
  .cap-head { margin-bottom: 24px; }
  .cap-head h2 { font-size: 22px; }
  .cap-head p { font-size: 15px; }
  .cap-body { gap: 16px; }

  /* 流程步骤：竖排后去掉连接线，改成"序号在左、文字在右"的一行
     ⚠️ 必须显式指定 grid-column/grid-row（2026-10-08 手机实测踩坑）：
        .workflow-step 里有三个子元素（序号 / 标题 / 正文），而这里是两列网格，
        不指定位置就会蛇形自动排布 —— 序号→第1列、标题→第2列、**正文又回到第1列**，
        正文被塞进 44px 宽的格子里，挤成每行一两个字，整块区域大片留白。 */
  .workflow-step { display: grid; grid-template-columns: 44px 1fr; gap: 6px 14px; text-align: left; align-items: start; }
  .workflow-number { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; font-size: 18px; margin: 0; }
  .workflow-step h4 { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .workflow-step p { grid-column: 2; grid-row: 2; }

  /* 案例/评价里的三列小数据在窄屏保留一行三列（数字短，压得下） */
  .case-results { gap: 8px; }
  .case-result-value { font-size: 19px; }

  /* 表单按钮占满整行，拇指好点 */
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }

  /* 页脚 */
  .footer { padding: 44px 0 24px; }
  .footer-grid { gap: 28px; margin-bottom: 28px; }
  .footer-social { justify-content: center; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 26px; }
  .spec-item .spec-num { font-size: 22px; }
  .mobile-bar .btn { font-size: 14px; padding: 12px 6px; }
}

/* 触摸设备：hover 效果常驻会显得"卡住"，改成按下反馈 */
@media (hover: none) {
  .feature-card:hover, .terminal-card:hover, .pricing-card:hover, .case-card:hover,
  .cap-item:hover, .release-card:hover, .product-card:hover, .scene-card:hover { transform: none; }
  .btn-primary:active { background: var(--primary-dark); transform: none; }
  .feature-card:active, .cap-item:active { border-color: var(--primary); }
}

/* ============ 打印 ============ */
@media print {
  .navbar, .mobile-menu-btn, .cta-section, .group-nav, .mobile-bar { display: none; }
  .reveal { opacity: 1; transform: none; }
}

/* 微信二维码（2026-10-08）：国内客户习惯扫码，比邮箱和长微信号好用得多 */
.qr-box { text-align: center; padding: 14px; margin-bottom: 18px; background: var(--gray-100); border-radius: var(--radius-lg); }
.qr-img { display: block; width: 176px; height: 176px; margin: 0 auto; border-radius: 10px; background: #fff; }
.qr-cap { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--gray-700); }
@media (max-width: 560px) { .qr-img { width: 150px; height: 150px; } }

/* 蜜罐字段（2026-10-08）：只有机器人会填的隐藏输入框。
   不用 display:none（部分爬虫会跳过不可见元素），也不用 left:-9999px
   （负坐标在部分移动端浏览器上会产生横向滚动），改用标准的"视觉隐藏"写法：
   留在原位、裁成不可见，对布局零影响。 */
.hp-field {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  opacity: 0; pointer-events: none;
}
/* 提交成功态：不再需要"复制发给我们"，只留一句确认 */
.form-result.done { background: #ECFDF5; }