/* ==========================================================================
   商圈信息科技 · 公司官网 — assets/style.css
   全站唯一样式表：零依赖、零构建、不含任何外部 CDN 引用
   目录：
     1. 设计变量
     2. 基础重置
     3. 通用布局工具
     4. 按钮
     5. 顶部导航（含移动端汉堡菜单）
     6. 首屏 Hero
     7. 内容区块
     8. 卡片
     9. 底部 CTA
    10. 页脚
    11. 响应式断点
    12. 动效偏好 / 打印
    13. 产品详情页（products/*.html）
    14. 系统产品列表页（products.html）
    15. 关于我们 / 联系我们
   ========================================================================== */

/* 1. 设计变量 ------------------------------------------------------------- */
:root {
  /* 配色（取自 SPEC 第五节） */
  --brand:        #1D4ED8;   /* 主色：深蓝 */
  --brand-dark:   #1A44BD;   /* 主色 hover */
  --brand-soft:   rgba(29, 78, 216, 0.08);
  --accent:       #06B6D4;   /* 强调色：青 */
  --text:         #1F2937;   /* 正文 */
  --muted:        #6B7280;   /* 次要文字 */
  --bg:           #FFFFFF;   /* 背景 */
  --bg-soft:      #F9FAFB;   /* 浅背景 */
  --line:         #E5E7EB;   /* 分隔线 */

  /* 形状与阴影 */
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow:    0 10px 30px rgba(17, 24, 39, 0.08);

  /* 尺寸节奏 */
  --container: 1120px;
  --gutter:    20px;
  --header-h:  64px;
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. 基础重置 ------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 锚点跳转时给吸顶导航留出空间 */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;                 /* 双保险：手机端绝不横向溢出 */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0 0 12px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 6.4vw, 3.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 4.4vw, 2.05rem); }
h3 { font-size: 1.075rem; }
p  { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

ul { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 3. 通用布局工具 --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 微信分享缩略图（微信未接 JS-SDK 时的兜底抓图）：
   必须留在 <body> 之后的第一个元素位置 —— 不能用 display:none / visibility:hidden / 0 尺寸，
   微信会直接跳过；移出视口即可。图由 tools/make-share-thumb.py 生成。 */
.share-thumb {
  position: absolute;
  left: -9999px; top: 0;
  width: 300px; height: 300px;
  pointer-events: none;
}

.skip-link {
  position: absolute;
  left: 50%; top: 8px;
  transform: translate(-50%, -200%);
  z-index: 100;
  background: var(--brand);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

.eyebrow {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand);
  text-transform: uppercase;
}

/* 待补充文案的占位样式 —— 文案到位后直接删掉 .placeholder 类即可 */
.placeholder {
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 0.9rem;
  padding: 10px 14px;
}

/* 4. 按钮 ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;                   /* 触屏友好高度 */
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 16px rgba(29, 78, 216, 0.22);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--brand-dark);
  color: #fff;
  transform: translateY(-1px);
}
.btn-ghost {
  background: var(--bg);
  color: var(--text);
  border-color: var(--line);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: var(--brand);
  border-color: var(--brand);
  transform: translateY(-1px);
}
.btn-light {
  background: #fff;
  color: var(--brand);
}
.btn-light:hover,
.btn-light:focus-visible {
  background: #EFF6FF;
  color: var(--brand-dark);
  transform: translateY(-1px);
}
.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.btn-outline-light:hover,
.btn-outline-light:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: #fff;
}

/* 5. 顶部导航 ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

/* 品牌区 */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--text);
  min-width: 0;
}
.brand:hover { color: var(--text); }
/* 品牌标志：S 图形（透明 PNG），高度定尺寸、宽度按比例，2x 图保证高清屏锐利 */
.brand-mark {
  flex: none;
  display: block;
  width: auto;
  height: 40px;
}
/* 横向组合标里的那道蓝色分隔线，用 CSS 画，文字部分保持真实文本 */
.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 2px solid var(--brand);
  padding-left: 12px;
}
.brand-text strong {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand-text small {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

/* 桌面端导航 */
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.nav-list a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  color: var(--text);
  font-size: 0.975rem;
  font-weight: 500;
  transition: color 0.2s var(--ease);
}
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.22s var(--ease);
}
.nav-list a:hover { color: var(--brand); }
.nav-list a:hover::after { transform: scaleX(1); }

.nav-cta { min-height: 42px; padding: 0 18px; font-size: 0.95rem; }

/* 汉堡开关：用 :target 而非 checkbox —— 点菜单项后 URL 片段一变，菜单就自动收起，
   不会像 checkbox 那样一直盖在内容上（手机端点「交付案例」看不到案例就是这个原因） */
.nav-toggle-label { display: none; }
.nav-close, .nav-backdrop { display: none; }

/* 6. 首屏 Hero ----------------------------------------------------------- */
.hero {
  background:
    radial-gradient(900px 400px at 88% -12%, rgba(6, 182, 212, 0.13), transparent 62%),
    radial-gradient(720px 360px at 4% 0%, rgba(29, 78, 216, 0.10), transparent 64%),
    var(--bg);
  border-bottom: 1px solid var(--line);
  padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 8vw, 92px);
}
.hero-inner { max-width: 780px; }
.hero h1 { margin-bottom: 16px; }
.hero-sub {
  margin: 0 0 32px;
  font-size: clamp(1.0625rem, 2.8vw, 1.3rem);
  font-weight: 600;
  color: var(--brand);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* 7. 内容区块 ------------------------------------------------------------ */
.section { padding: clamp(56px, 8.5vw, 96px) 0; }
.section--soft {
  background: var(--bg-soft);
  border-block: 1px solid var(--line);
}
.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 { margin-bottom: 12px; }
.section-lead { color: var(--muted); font-size: 1.0625rem; }

/* 8. 卡片 ---------------------------------------------------------------- */
.grid-cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.grid-cards--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
              border-color 0.22s var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(29, 78, 216, 0.35);
  box-shadow: var(--shadow);
}
.card-title { margin: 0; }
.card-text { margin: 0; color: var(--muted); font-size: 0.95rem; }
.card--link .card-link {
  margin-top: auto;
  padding-top: 6px;
  font-weight: 600;
  font-size: 0.95rem;
}

/* 9. 底部 CTA ------------------------------------------------------------ */
.cta-band {
  background: var(--brand);
  color: #fff;
  padding: clamp(40px, 6vw, 64px) 0;
}
.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-text p { margin: 0; color: rgba(255, 255, 255, 0.88); }
.cta-tel {
  color: #fff;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.cta-tel:hover { color: #fff; border-bottom-color: #fff; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* 10. 页脚 --------------------------------------------------------------- */
.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  color: var(--muted);
  padding: clamp(40px, 6vw, 64px) 0 28px;
  font-size: 0.95rem;
}
.footer-inner {
  display: grid;
  gap: 32px;
  grid-template-columns: 1.6fr 1fr 1fr;
}
.footer-brand .brand-mark { height: 48px; margin-bottom: 14px; }
.footer-name { margin: 0 0 8px; color: var(--text); font-weight: 700; }
.footer-desc { margin: 0; max-width: 34ch; }
.footer-col h3 {
  margin: 0 0 14px;
  font-size: 0.95rem;
  color: var(--text);
}
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { color: var(--muted); }
.footer-col a:hover { color: var(--brand); }
.footer-bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  font-size: 0.875rem;
}
.footer-bottom p { margin: 0; }

/* 11. 响应式断点 --------------------------------------------------------- */

/* 平板 / 手机：切换为汉堡菜单 */
@media (max-width: 900px) {
  :root { --header-h: 60px; }

  /* 手机端点菜单项用瞬时跳转：平滑动画会被"菜单收起"打断，
     导致看起来"点了没反应、看不到内容" */
  html { scroll-behavior: auto; }

  .nav-toggle-label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s var(--ease);
  }
  .nav-toggle-label:hover { background: var(--brand-soft); }
  .nav-toggle-bar {
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
  }
  .nav-toggle-label:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  /* 菜单展开时汉堡变叉（:has() 渐进增强，不支持也不影响功能） */
  .site-header:has(#nav:target) .nav-toggle-label .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .site-header:has(#nav:target) .nav-toggle-label .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .site-header:has(#nav:target) .nav-toggle-label .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  /* 展开时铺一层透明遮罩，点空白处即可收起 */
  body:has(#nav:target) .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 5;
  }
  /* 面板内显式的「收起菜单」，任何时候都能关掉 */
  #nav:target .nav-close {
    display: block;
    margin: 10px 0 2px;
    padding: 6px 2px;
    font-size: 0.9rem;
    color: var(--muted);
    text-align: right;
  }
  #nav:target .nav-close:hover { color: var(--brand); }

  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: block;
    padding: 0 var(--gutter);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    transition: max-height 0.28s var(--ease), visibility 0.28s var(--ease);
  }
  #nav:target {
    max-height: 78vh;                /* 展开：URL 片段为 #nav 时 */
    overflow-y: auto;
    visibility: visible;
    z-index: 6;
  }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
  }
  .nav-list li + li { border-top: 1px solid var(--line); }
  .nav-list a {
    display: block;
    padding: 15px 2px;
    font-size: 1.0625rem;
  }
  .nav-list a::after { display: none; }
  .nav-cta {
    width: 100%;
    min-height: 48px;
    margin: 12px 0 20px;
  }

  .brand-text small { display: none; }   /* 小屏只留公司简称，避免拥挤 */
  .brand-mark { height: 34px; }          /* 手机上标志略小，给导航留空间 */
  .brand-text { padding-left: 10px; }
}

/* 手机：一列排布 */
@media (max-width: 620px) {
  :root { --gutter: 18px; }

  .hero-actions .btn { width: 100%; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { width: 100%; }

  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .card { padding: 22px 20px; }
}

/* 12. 动效偏好 / 打印 ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .site-header, .cta-band, .skip-link, .breadcrumb { display: none; }
  body { color: #000; }
}

/* 13. 产品详情页（products/*.html） --------------------------------------- */

/* 面包屑 */
.breadcrumb { background: var(--bg-soft); border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.breadcrumb ol {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0; padding: 12px 0;
}
.breadcrumb li { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; color: #D1D5DB; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }

/* 产品首屏 */
.product-hero {
  padding: clamp(32px, 5vw, 64px) 0 clamp(36px, 5vw, 60px);
  background:
    radial-gradient(760px 340px at 92% 0%, rgba(6, 182, 212, 0.10), transparent 62%),
    radial-gradient(640px 320px at 2% 0%, rgba(29, 78, 216, 0.09), transparent 64%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.product-hero-grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.product-hero h1 { font-size: clamp(1.75rem, 5vw, 2.6rem); }
.product-hero .lead { margin-bottom: 24px; color: var(--muted); font-size: 1.0625rem; }
.product-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.product-note { margin: 18px 0 0; font-size: 0.9rem; color: var(--muted); }

/* 截图框：深色系统界面 */
.shot {
  margin: 0;
  background: #0B1020;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption {
  padding: 12px 16px;
  background: #0B1020;
  color: #C7D2E0;
  font-size: 0.875rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.shot--light { background: var(--bg); }
.shot--light figcaption { background: var(--bg-soft); color: var(--muted); border-top-color: var(--line); }

/* 关键指标 */
.section--tight { padding: clamp(32px, 4.5vw, 52px) 0; }
.metrics { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric {
  padding: 22px 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.metric-value { font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 700; color: var(--brand); line-height: 1.1; }
.metric-value span { font-size: 0.5em; font-weight: 600; color: var(--muted); }
.metric-label { margin-top: 6px; font-size: 0.875rem; color: var(--muted); }

/* 小标签 */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.tags li { padding: 4px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 0.8125rem; font-weight: 500; }

/* 数据表（手机端在容器内横向滚动，不撑破页面） */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.table-wrap table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.95rem; }
.table-wrap th,
.table-wrap td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.table-wrap thead th { background: var(--bg-soft); color: var(--text); font-weight: 600; white-space: nowrap; }
.table-wrap tbody th { font-weight: 600; }
.table-wrap tbody tr:last-child th,
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.mul { font-weight: 700; color: var(--brand); white-space: nowrap; }
.mul--down { color: var(--muted); }
.table-hint { margin: 14px 0 0; font-size: 0.9rem; color: var(--muted); }

/* 三个事实块 */
.fact-row { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }
.fact { padding: 16px 18px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.fact-k { display: block; font-size: 0.8125rem; color: var(--muted); }
.fact b { font-size: 1.0625rem; }

/* 手机截图条 */
.phone-strip { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0; }
.phone-shot {
  display: flex; flex-direction: column;
  margin: 0;
  background: #0B1020;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.phone-shot img { width: 100%; height: auto; display: block; }
.phone-shot figcaption {
  margin-top: auto;
  padding: 12px 14px;
  background: #0B1020;
  color: #C7D2E0;
  font-size: 0.8125rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 步骤卡 */
.sub-head { margin: clamp(40px, 5vw, 56px) 0 18px; font-size: clamp(1.15rem, 3vw, 1.35rem); }
.step-list { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.step-list li {
  padding: 20px 20px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.step-num { display: inline-block; margin-bottom: 8px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); }
.step-list h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.step-list p { margin: 0; font-size: 0.9rem; color: var(--muted); }

/* 部署方式对比 */
.compare-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.compare-card {
  padding: 26px 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.compare-card--pick { border-color: rgba(29, 78, 216, 0.4); box-shadow: var(--shadow); }
.compare-card h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.badge { padding: 3px 10px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 0.75rem; font-weight: 600; }
.check-list { list-style: none; display: grid; gap: 12px; margin-top: 8px; }
.check-list li { position: relative; padding-left: 26px; font-size: 0.95rem; color: var(--muted); }
.check-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--brand); font-weight: 700; }
.check-list code {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.85em;
  word-break: break-all;
}
.note {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: var(--muted);
}
.note p { margin: 0; }
.note b { color: var(--text); }

/* 产品页响应式 */
@media (min-width: 901px) {
  .product-hero-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}
@media (max-width: 760px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .phone-strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 64%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
  }
  .phone-strip > * { scroll-snap-align: start; }
}
@media (max-width: 620px) {
  .fact-row { grid-template-columns: 1fr; }
  .compare-card, .metric { padding: 20px 18px; }
  .product-actions .btn { width: 100%; }
  .table-wrap table { font-size: 0.9rem; }
  .table-wrap th, .table-wrap td { padding: 11px 13px; }
}

/* 14. 系统产品列表页（products.html） ------------------------------------ */
.page-hero {
  padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px);
  background:
    radial-gradient(760px 340px at 92% 0%, rgba(6, 182, 212, 0.10), transparent 62%),
    radial-gradient(640px 320px at 2% 0%, rgba(29, 78, 216, 0.09), transparent 64%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { margin-bottom: 14px; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.page-hero .section-lead { max-width: 760px; margin: 0; }

.product-list { display: grid; gap: clamp(24px, 3.5vw, 40px); }

.product-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.product-card:hover { box-shadow: var(--shadow); border-color: rgba(29, 78, 216, 0.28); }

.product-card-media { display: flex; flex-direction: column; background: #0B1020; }
.product-card-media img { width: 100%; height: auto; display: block; }
.product-card-caption {
  margin: auto 0 0;
  padding: 12px 18px;
  background: #0B1020;
  color: #C7D2E0;
  font-size: 0.8125rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.product-card-body { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 36px); }
.product-card-body .eyebrow { margin: 0; }
.product-card-body h2 { margin: 0; font-size: clamp(1.25rem, 3.4vw, 1.6rem); }
.product-card-lead { margin: 0; color: var(--muted); }

.feature-list { list-style: none; display: grid; gap: 10px; margin: 4px 0 0; }
.feature-list li { position: relative; padding-left: 18px; font-size: 0.95rem; }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.product-card-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 10px; }

/* 真实截图未到位时的占位（不使用任何替代图片） */
.media-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 240px;
  padding: 30px 22px;
  text-align: center;
  background: var(--bg-soft);   /* 父级是深色截图底板，这里必须显式给浅色 */
  color: var(--muted);
  font-size: 0.9rem;
  border-bottom: 1px dashed var(--line);
}
.media-placeholder b { color: var(--text); font-size: 0.95rem; }
.media-placeholder code {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.85em;
}

@media (min-width: 861px) {
  .product-card { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .product-card--flip .product-card-media { order: 2; }
  .media-placeholder { border-bottom: 0; border-right: 1px dashed var(--line); }
  .product-card--flip .media-placeholder { border-right: 0; border-left: 1px dashed var(--line); }
}
@media (max-width: 620px) {
  .product-card-body { padding: 22px 20px; }
  .product-card-actions .btn { width: 100%; }
}

/* 15. 关于我们 / 联系我们 ------------------------------------------------ */

/* 完整横向组合标（含标语与英文名），只用在「关于我们」页 */
.brand-lockup { margin: 26px 0 0; max-width: 300px; }
.brand-lockup img { width: 100%; height: auto; display: block; }
@media (max-width: 620px) {
  .brand-lockup { max-width: 240px; }
}

/* 当前所在页的导航高亮 */
.nav-list a[aria-current="page"] { color: var(--brand); font-weight: 600; }
.nav-list a[aria-current="page"]::after { transform: scaleX(1); }

/* 公司简介正文 */
.prose { display: grid; gap: 16px; max-width: 780px; }
.prose p { margin: 0; }
.prose strong { font-weight: 700; }

/* 我们做什么 / 不做什么 */
.about-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.about-card {
  padding: clamp(22px, 3vw, 30px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.about-card h3 { margin: 0 0 14px; }
.check-list--no li::before { content: "×"; color: var(--muted); }

/* 技术标签 */
.tech-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tech-tags li {
  padding: 8px 15px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.95rem;
}

/* 联系页：左信息 + 右表单 */
.contact-grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.contact-card {
  padding: clamp(24px, 3vw, 34px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.contact-card h2 { margin-bottom: 20px; font-size: clamp(1.2rem, 3vw, 1.45rem); }

.contact-list { list-style: none; display: grid; gap: 18px; }
.contact-list li { display: grid; gap: 4px; }
.contact-list li + li { padding-top: 18px; border-top: 1px solid var(--line); }
.contact-k { font-size: 0.8125rem; color: var(--muted); }
.contact-v { font-size: 1.25rem; font-weight: 700; color: var(--text); }
a.contact-v:hover { color: var(--brand); }
.contact-note { font-size: 0.9rem; color: var(--muted); }

/* 预约演示表单 */
.form-grid { display: grid; gap: 16px; }
.form-field { display: grid; gap: 6px; }
.form-field label { font-size: 0.9rem; font-weight: 600; }
.form-field .req { color: var(--brand); }
.form-field input,
.form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--muted); opacity: 0.75; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.form-hint { margin: 0; font-size: 0.85rem; color: var(--muted); }
.form-grid .btn { justify-self: start; }

/* 提交成功提示：靠 URL 上的 #received 触发，无需 JS */
.form-success {
  display: none;
  margin-bottom: 20px;
  padding: 16px 18px;
  background: var(--brand-soft);
  border: 1px solid rgba(29, 78, 216, 0.25);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
}
.form-success:target { display: block; }
.form-success b { display: block; margin-bottom: 4px; }
.form-success p { margin: 0; font-size: 0.9rem; color: var(--muted); }

@media (min-width: 861px) {
  .contact-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
@media (max-width: 620px) {
  .form-grid .btn { justify-self: stretch; }
  .tech-tags li { font-size: 0.9rem; padding: 7px 13px; }
}

/* 16. 客户案例页补充（products/ink.html 等） ----------------------------- */
.shot-row {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin: 24px 0;
}
@media (min-width: 761px) {
  .shot-row { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
.shot-row .shot + .shot { margin-top: 0; }
.shot + .shot { margin-top: 24px; }

/* 四项数据条：宽屏排成一行（与 .metrics 同一套写法） */
@media (min-width: 861px) {
  .fact-row--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 两列并排的功能卡（宽屏 2×2，比 3+1 更整齐） */
@media (min-width: 861px) {
  .about-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 17. 网站建设页（websites.html） ---------------------------------------- */

/* 样板库网格：宽屏两列，窄屏自动落成单列（min() 兜住 320px 小屏不横向溢出） */
.template-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

/* 样板卡：缩略图通栏，文字区内缩；边框 / 圆角 / 悬停沿用 .card */
.template-card { padding: 0; gap: 0; overflow: hidden; }
.template-media {
  display: block;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.template-media img { width: 100%; height: auto; display: block; }
.template-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; }

/* 行业标签：与 .tags li 同一套胶囊写法，单独用时不占满整行 */
.template-tag {
  align-self: flex-start;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.8125rem;
  font-weight: 500;
}
.template-body .card-title { font-size: 1.15rem; }

/* 按钮单独包一层，避免 .card 的 flex 列把 .btn 拉满整行 */
.template-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2px; }
.template-includes { margin: 0; font-size: 0.875rem; color: var(--muted); }
.template-more { margin: 22px 0 0; color: var(--muted); }

/* 样板卡缩略图（桌面 + 手机并排）见第 18 节，放在文件末尾以确保层叠生效 */

/* 手机端：本节各网格一律单列，按钮满宽 */
@media (max-width: 620px) {
  #capability .grid-cards,
  #process .step-list,
  .template-grid { grid-template-columns: minmax(0, 1fr); }
  .template-body { padding: 20px; }
  .template-actions .btn { width: 100%; }
  .template-media { padding: 12px 12px 0; gap: 10px; }
}

/* 18. 样板卡缩略图：桌面 + 手机 并排（放在文件末尾，确保覆盖前面所有同名规则） */
.template-card .template-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(76px, 17%, 112px);
  align-items: start;
  gap: 12px;
  padding: 16px 16px 0;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.template-card .template-media img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}
.template-card .template-media .template-phone { border-radius: 10px; }
@media (max-width: 620px) {
  .template-card .template-media { padding: 12px 12px 0; gap: 10px; }
}

/* 19. 首页「网站建设」宣传带 --------------------------------------------- */
.promo-site {
  background: var(--brand-soft);
  border-block: 1px solid var(--line);
}
.promo-site-grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.promo-site .section-lead { margin-bottom: 18px; }
.promo-site-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.promo-site-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.promo-site-shots img {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.promo-site-shots > :nth-child(2) img { margin-top: 30px; }
.promo-site-note {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}
@media (min-width: 861px) {
  .promo-site-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .promo-site-actions .btn { width: 100%; }
  .promo-site-shots > :nth-child(2) img { margin-top: 18px; }
}

/* 20. 样板库：版式骨架标签 ----------------------------------------------- */
.template-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.template-tags .template-tag { align-self: auto; }
.template-arch {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}

/* 21. 样板库：手机端仿真预览（浮窗 + 手机框）------------------------------
   交互全部用 :target 实现，零 JS。
   入口只在 PC 显示：手机访问本页不需要"看手机版"这个动作。 */

/* 卡片上的文字入口 */
.pv-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--brand);
  white-space: nowrap;
}
.pv-trigger:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.pv-icon { flex: none; }

/* 浮窗骨架 */
.pv-modal { display: none; }
.pv-modal:target { display: block; position: fixed; inset: 0; z-index: 90; }
.pv-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.pv-panel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);   /* 左列宽度 = 缩放后的机身宽度 */
  gap: clamp(22px, 3.5vw, 48px);
  align-items: center;               /* 整台机器一屏可见，居中更好看 */
  width: min(100% - 32px, 1000px);
  max-height: calc(100vh - 24px);    /* 面板内部滚动查看完整机身 */
  margin: 12px auto;
  padding: clamp(18px, 2.2vw, 28px);
  overflow: auto;
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -32px rgba(15, 23, 42, 0.55);
}

/* 手机框：故意保留深色边框，让"这是手机"一眼可辨 */
/* 机身舞台：占位尺寸 = 机身 × 缩放系数，缩放后既不占多余高度也不被裁切 */
.pv-stage {
  --pv-s: 0.66;                     /* 缩放系数：按视口高度分段放大（见下方 min-height 阶梯） */
  --pv-w: 458px;                    /* 机身宽 = 屏幕 440 + 边框 9×2 */
  --pv-h: 974px;                    /* 机身高 = 屏幕 956 + 边框 9×2 */
  position: relative;
  width: calc(var(--pv-w) * var(--pv-s));
  height: calc(var(--pv-h) * var(--pv-s));
  margin-inline: auto;
}

/* 手机框：内部仍按 iPhone 17 Pro Max 的 1:1 尺寸渲染（iframe = 440 × 956），整体等比缩放显示
   —— 与 Chrome「响应式设计模式」同一做法：渲染按真机，显示按窗口 */
.pv-phone {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pv-w);
  height: var(--pv-h);
  transform: scale(var(--pv-s));
  transform-origin: top left;
  padding: 9px;                     /* 17 Pro Max 是窄边框 */
  background: #0B1220;
  border-radius: 46px;
  box-shadow:
    0 30px 60px -24px rgba(15, 23, 42, 0.62),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.12),
    inset 0 0 0 4px #05080F;
}
.pv-phone::before {                 /* 留海屏：顶部居中的黑色刘海 */
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 46%;
  height: 26px;
  background: #05080F;
  border-radius: 0 0 16px 16px;
  z-index: 2;
}
.pv-phone::after {                  /* 底部 Home 横条（替代原来的滚动提示） */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: 34%;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18);
  z-index: 2;
}
.pv-phone iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 38px;
  background: #fff;
}

/* 缩放阶梯：屏幕越高显示越大，最高到 1:1（保证整台机器始终一屏看得完）
   —— 窗口越矮越要往下缩：机身 974px × 缩放 + 面板内边距(≈56) + 外边距(24) 必须 ≤ 视口高度，
      否则面板自己会出现滚动条，鼠标在弹窗外一滚，右侧说明和二维码就被顶走。 */
@media (max-height: 760px) { .pv-stage { --pv-s: 0.63; } }
@media (max-height: 700px) { .pv-stage { --pv-s: 0.58; } }
@media (max-height: 640px) { .pv-stage { --pv-s: 0.53; } }
@media (max-height: 580px) { .pv-stage { --pv-s: 0.47; } }
@media (max-height: 520px) { .pv-stage { --pv-s: 0.41; } }
@media (max-height: 460px) { .pv-stage { --pv-s: 0.35; } }
@media (max-height: 400px) { .pv-stage { --pv-s: 0.29; } }
@media (min-height: 820px)  { .pv-stage { --pv-s: 0.70; } }
@media (min-height: 900px)  { .pv-stage { --pv-s: 0.78; } }
@media (min-height: 980px)  { .pv-stage { --pv-s: 0.86; } }
@media (min-height: 1060px) { .pv-stage { --pv-s: 0.94; } }
@media (min-height: 1120px) { .pv-stage { --pv-s: 1; } }

/* 右侧说明 + 二维码 */
.pv-side {
  position: sticky;                 /* 面板万一要滚动，说明与二维码也停在原位 */
  top: 0;
  align-self: start;                /* 关键：不再跟随 align-items:center 居中。
                                       居中的网格项 sticky 行程更短，容器一滚它就整体上移 */

  display: grid;
  gap: 14px;
  align-content: start;
  padding-top: 4px;
}
.pv-eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--brand);
}
.pv-side h3 { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
.pv-side p { margin: 0; font-size: 0.95rem; color: var(--muted); }
.pv-qr {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.pv-qr img {
  width: 108px;
  height: 108px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.pv-qr span { font-size: 0.85rem; line-height: 1.55; }
.pv-close { justify-self: start; }

/* 窗口很矮时：收紧面板内边距、二维码略缩小 —— 让"说明 + 二维码"这一列本身也放得下，
   否则右列会成为最高的那一项，面板还是要滚，sticky 也失去行程可用 */
@media (max-height: 560px) {
  .pv-panel { padding-block: 14px; }
  .pv-qr { padding: 10px; }
  .pv-qr img { width: 88px; height: 88px; }
  .pv-side p { font-size: 0.9rem; }
}

/* 桌面窗口不够宽时改为上下排布，避免右侧说明被挤成一条 */
@media (max-width: 1080px) {
  .pv-panel { grid-template-columns: minmax(0, 1fr); }
  .pv-side { position: static; max-width: 560px; }
}

/* ⚠️ 手机端不提供这个入口（也不需要这个浮窗） */
@media (max-width: 860px) {
  .pv-trigger { display: none !important; }
  .pv-modal:target { display: none !important; }
}

/* ==========================================================================
   22. 首页交付案例卡（带真实截图）
   PC 与手机同一套结构：有图、有说明、有入口；窄屏单列，图片满宽
   ========================================================================== */
.case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-card { display: flex; flex-direction: column; gap: 14px; }
.case-media {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.case-media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s var(--ease);
}
.case-media:hover img { transform: scale(1.03); }
.case-caption {
  margin: -6px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
@media (max-width: 760px) {
  .case-grid { grid-template-columns: minmax(0, 1fr); }
}