/* ============================================================
   桢知科技首页（已确认设计稿 V1 正式实现）
   依据：DESIGN_SYSTEM.md；Token 全部读取 design-tokens.css
   说明：本文件仅在首页加载，类名带 hm- 前缀。
   ============================================================ */

.hm-container { width: min(var(--zk-container), calc(100% - 48px)); margin: 0 auto; }
.hm-section { padding: 88px 0; position: relative; }

/* 通用 section 头 */
.hm-section-head { max-width: 800px; margin: 0 auto 44px; text-align: center; }
.hm-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--zk-primary-hover); font-size: 13px; font-weight: 820; letter-spacing: 0.06em; }
.hm-eyebrow::before, .hm-eyebrow::after { content: ""; width: 20px; height: 1px; background: rgba(22, 90, 180, 0.28); }
.hm-section-head h2 { margin: 14px 0 12px; color: var(--zk-ink); font-size: var(--zk-text-h2); line-height: 1.14; letter-spacing: -0.045em; font-weight: 850; }
.hm-section-head p { margin: 0; color: var(--zk-muted); font-size: 17px; line-height: 1.8; }

/* ---------- 01 首屏：定位 + 双产品 ---------- */
.hm-hero {
  position: relative; overflow: hidden; padding: 64px 0 72px;
  background:
    radial-gradient(circle at 9% 8%, rgba(89, 166, 255, 0.15), transparent 29%),
    radial-gradient(circle at 94% 12%, rgba(39, 179, 106, 0.07), transparent 25%),
    linear-gradient(180deg, #fbfdff 0%, #f5f9ff 70%, #fff 100%);
}
.hm-hero::before {
  content: ""; position: absolute; inset: -10% -5% auto -5%; height: 72%; pointer-events: none;
  background:
    radial-gradient(ellipse at 25% 28%, rgba(169, 207, 255, 0.18), transparent 49%),
    radial-gradient(ellipse at 76% 8%, rgba(220, 205, 255, 0.12), transparent 46%);
}
.hm-hero .hm-container { position: relative; z-index: 1; }
.hm-hero-intro { max-width: none; margin-bottom: 38px; text-align: left; }
.hm-hero-chip {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px;
  border-radius: var(--zk-radius-pill); border: 1px solid rgba(25, 103, 218, 0.18);
  background: rgba(237, 246, 255, 0.92); color: #1763c7; font-size: 13px; font-weight: 800;
}
.hm-hero-title { margin: 18px 0 12px; color: var(--zk-ink); font-weight: 860; letter-spacing: -0.055em; }
.hm-hero-kicker { display: block; font-size: clamp(16px, 1.6vw, 20px); font-weight: 780; letter-spacing: 0.02em; color: var(--zk-muted); }
.hm-hero-slogan { display: block; margin-top: 8px; font-size: clamp(44px, 4.75vw, 68px); line-height: 1.08; }
.hm-hero-line { display: inline-block; }
.hm-hero-line--accent { color: var(--zk-primary-hover); }
.hm-hero-lead { margin: 0; max-width: 760px; color: #60718a; font-size: 19px; line-height: 1.75; }
.hm-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hm-facts span {
  padding: 7px 11px; border-radius: var(--zk-radius-pill); font-size: 12px; font-weight: 800;
  border: 1px solid rgba(25, 99, 199, 0.13); background: rgba(255, 255, 255, 0.8); color: #48627e;
}
.hm-facts .hm-facts--free { background: var(--zk-success-soft); border-color: transparent; color: #16855a; }

.hm-hero-products { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 22px; }
.hm-product-card {
  min-width: 0; min-height: 280px; display: grid; grid-template-columns: 43% 57%;
  overflow: hidden; border-radius: 30px; border: 1px solid rgba(28, 76, 139, 0.12);
  background: rgba(255, 255, 255, 0.94); box-shadow: 0 20px 55px rgba(33, 73, 128, 0.12);
  transition: transform var(--zk-motion-slow), box-shadow var(--zk-motion-slow);
}
.hm-product-card:hover { transform: translateY(-4px); box-shadow: 0 26px 68px rgba(33, 73, 128, 0.16); }
.hm-product-card--picpeek { grid-template-columns: 42% 58%; background: linear-gradient(135deg, #fff 0%, #f7fbff 100%); }
.hm-product-copy { padding: 26px 24px 24px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hm-product-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; min-width: 0; }
.hm-product-icon { width: 56px; height: 56px; flex: none; border-radius: 17px; box-shadow: 0 9px 22px rgba(30, 91, 190, 0.18); }
.hm-product-type { margin-bottom: 4px; color: #71839a; font-size: 13px; font-weight: 720; }
.hm-product-name { color: #0a1b34; font-size: 25px; font-weight: 850; line-height: 1.1; white-space: nowrap; }
.hm-product-name small { color: #7289a4; font-size: 15px; font-weight: 760; }
.hm-product-copy h2 { margin: 0 0 14px; color: #0b1d39; font-size: 22px; line-height: 1.35; letter-spacing: -0.03em; font-weight: 840; }
.hm-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.hm-tag { padding: 7px 10px; border: 1px solid rgba(25, 99, 199, 0.13); border-radius: var(--zk-radius-pill); background: #f6f9ff; color: #60738d; font-size: 12px; font-weight: 720; }
.hm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hm-action {
  min-height: 44px; padding: 0 16px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 15px; font-weight: 800; border: 1px solid transparent; text-decoration: none;
  transition: transform var(--zk-motion-base), background var(--zk-motion-base), box-shadow var(--zk-motion-base);
}
.hm-action:hover { transform: translateY(-2px); }
.hm-action:focus-visible { outline: 2px solid var(--zk-primary); outline-offset: 2px; }
.hm-action--primary { color: var(--zk-white); background: linear-gradient(135deg, var(--zk-primary), var(--zk-primary-hover)); box-shadow: 0 12px 25px rgba(23, 105, 222, 0.22); }
.hm-action--secondary { color: #1d5fc5; background: var(--zk-white); border-color: rgba(29, 95, 197, 0.18); }
.hm-art { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; background: linear-gradient(135deg, #f9fbff, #eef5ff); }
.hm-art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }

/* ---------- 02 核心体验（代码化：文字全部正文） ---------- */
.hm-core { background: var(--zk-white); }
.hm-core-grid { display: grid; grid-template-columns: 1fr minmax(300px, 430px) 1fr; gap: 28px; align-items: center; }
.hm-core-col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.hm-orbit { position: relative; width: min(100%, 430px); aspect-ratio: 1; margin: 0 auto; }
.hm-orbit-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.hm-orbit-ring--outer { inset: 0; border: 1px solid rgba(46, 103, 248, 0.14); }
.hm-orbit-ring--inner { inset: 14%; border: 1px solid rgba(46, 103, 248, 0.10); background: radial-gradient(circle, rgba(237, 244, 255, 0.9), rgba(237, 244, 255, 0) 72%); }
.hm-orbit-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%;
  background: var(--zk-white); border: 1px solid rgba(46, 103, 248, 0.12);
  box-shadow: 0 18px 44px rgba(25, 52, 96, 0.14);
}
.hm-orbit-center img { width: 72px; height: 72px; }
.hm-orbit-photo {
  position: absolute; width: 86px; height: 64px; object-fit: cover;
  border-radius: 13px; border: 3px solid var(--zk-white);
  box-shadow: 0 12px 28px rgba(25, 52, 96, 0.18);
}
.hm-orbit-photo--a { left: 12%; top: 15%; transform: rotate(-5deg); }
.hm-orbit-photo--b { right: 13%; bottom: 15%; transform: rotate(4deg); }
.hm-orbit-chip {
  position: absolute; display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 15px; background: var(--zk-white); border: 1px solid rgba(46, 103, 248, 0.12);
  color: var(--zk-primary); box-shadow: 0 10px 24px rgba(25, 52, 96, 0.12);
}
.hm-orbit-chip svg { width: 26px; height: 26px; }
.hm-orbit-chip--a { right: 14%; top: 14%; }
.hm-orbit-chip--b { left: 5%; top: 46%; color: #3d6f9f; }
.hm-orbit-chip--c { right: 5%; top: 46%; color: #3d6f9f; }
.hm-orbit-chip--d { left: 17%; bottom: 13%; color: var(--zk-success); }
.hm-core-card {
  padding: 24px 24px 22px; border-radius: var(--zk-radius-lg); border: 1px solid var(--zk-line);
  background: rgba(255, 255, 255, 0.94); box-shadow: var(--zk-shadow-sm);
}
.hm-core-top { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.hm-core-num { color: var(--zk-primary); font-size: 12px; font-weight: 850; letter-spacing: 0.08em; }
.hm-core-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--zk-primary-soft); color: var(--zk-primary); }
.hm-core-icon svg { width: 22px; height: 22px; }
.hm-core-card h3 { margin: 0 0 8px; color: var(--zk-ink); font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; }
.hm-core-card > p { margin: 0; color: var(--zk-muted); font-size: 14px; line-height: 1.75; }
.hm-core-product { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 10px; border-radius: var(--zk-radius-pill); background: var(--zk-primary-soft); color: var(--zk-primary); font-size: 12px; font-weight: 800; text-decoration: none; }
a.hm-core-product:hover { text-decoration: underline; }
.hm-core-product--future { background: var(--zk-success-soft); color: #16855a; }

/* ---------- 03/04 产品重点 ---------- */
.hm-focus { background: var(--zk-white); }
.hm-focus--alt { background: linear-gradient(180deg, #f8fbff 0%, #fff 100%); }
.hm-focus-head { text-align: center; max-width: 900px; margin: 0 auto 40px; }
.hm-brand-chip {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 7px 13px 7px 8px;
  border-radius: var(--zk-radius-pill); background: #f4f8ff; border: 1px solid rgba(23, 104, 219, 0.12);
  color: #315f9d; font-size: 13px; font-weight: 780;
}
.hm-brand-chip img { width: 34px; height: 34px; border-radius: 10px; }
.hm-brand-chip--green { background: #f1fbf5; border-color: rgba(39, 179, 106, 0.14); color: #267a51; }
.hm-focus-head h2 { margin: 0; color: var(--zk-ink); font-size: clamp(38px, 4.1vw, 56px); line-height: 1.12; letter-spacing: -0.045em; font-weight: 850; }
.hm-focus-head > p { max-width: 760px; margin: 18px auto 0; color: var(--zk-muted); font-size: 18px; line-height: 1.8; }
.hm-focus-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hm-focus-visual { width: min(calc(100% - 40px), 1440px); margin: 0 auto; border-radius: 34px; overflow: hidden; border: 1px solid var(--zk-line); background: #f4f8ff; box-shadow: 0 26px 74px rgba(31, 69, 118, 0.12); }
.hm-focus-visual img { display: block; width: 100%; height: auto; }
.hm-focus-points { width: min(calc(100% - 48px), var(--zk-container)); margin: 26px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hm-focus-point { padding: 24px 24px 22px; border-radius: 22px; border: 1px solid var(--zk-line); background: rgba(255, 255, 255, 0.92); box-shadow: 0 14px 40px rgba(38, 76, 126, 0.07); }
.hm-focus-point .hm-num { display: block; margin-bottom: 13px; color: var(--zk-primary); font-size: 12px; font-weight: 850; letter-spacing: 0.08em; }
.hm-focus-point--green .hm-num { color: var(--zk-success); }
.hm-focus-point h3 { margin: 0 0 9px; color: var(--zk-ink); font-size: 21px; line-height: 1.35; letter-spacing: -0.025em; }
.hm-focus-point p { margin: 0; color: var(--zk-muted); font-size: 14px; line-height: 1.75; }

/* ---------- 05 快速下载 ---------- */
.hm-download { padding: 92px 0 96px; background: linear-gradient(180deg, #f4f9ff 0%, #eef7ff 58%, #fff 100%); }
.hm-download-head { text-align: center; max-width: 780px; margin: 0 auto 44px; }
.hm-detect-pill {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 8px 13px;
  border: 1px solid rgba(23, 104, 219, 0.14); border-radius: var(--zk-radius-pill);
  background: rgba(255, 255, 255, 0.82); color: #245caa; font-size: 13px; font-weight: 760;
}
.hm-detect-pill .hm-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--zk-success); box-shadow: 0 0 0 6px rgba(39, 179, 106, 0.10); }
.hm-download-head h2 { margin: 0; color: var(--zk-ink); font-size: clamp(38px, 4vw, 54px); letter-spacing: -0.045em; line-height: 1.14; font-weight: 850; }
.hm-download-head p { margin: 16px 0 0; color: var(--zk-muted); font-size: 17px; line-height: 1.8; }
.hm-download-board { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: min(calc(100% - 48px), var(--zk-container)); margin: 0 auto; }
.hm-dl-card { border-radius: 28px; border: 1px solid var(--zk-line); background: rgba(255, 255, 255, 0.94); box-shadow: 0 22px 62px rgba(31, 70, 120, 0.10); padding: 30px; }
.hm-dl-top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.hm-dl-top img { width: 54px; height: 54px; border-radius: 16px; box-shadow: 0 9px 21px rgba(30, 91, 190, 0.16); }
.hm-dl-top strong { display: block; color: var(--zk-ink); font-size: 24px; line-height: 1.15; }
.hm-dl-top small { display: block; margin-top: 5px; color: var(--zk-muted); font-size: 13px; }
.hm-recommend { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; border-radius: 19px; background: #f3f8ff; border: 1px solid rgba(23, 104, 219, 0.10); }
.hm-recommend--green { background: #f2fbf6; border-color: rgba(39, 179, 106, 0.12); }
.hm-recommend span { display: block; }
.hm-recommend-label { color: #718199; font-size: 12px; font-weight: 720; margin-bottom: 4px; }
.hm-recommend-value { color: var(--zk-ink); font-size: 17px; font-weight: 820; }
.hm-dl-cta { flex: none; min-height: 43px; padding: 0 16px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: var(--zk-white); background: var(--zk-primary); font-size: 14px; font-weight: 820; text-decoration: none; }
.hm-dl-cta:hover { background: var(--zk-primary-hover); }
.hm-platform-title { margin: 24px 0 12px; color: #50647e; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; }
.hm-platform-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-platform-link { min-height: 38px; padding: 0 13px; border-radius: 12px; border: 1px solid rgba(23, 104, 219, 0.12); background: var(--zk-white); color: #3f5878; display: inline-flex; align-items: center; font-size: 13px; font-weight: 730; text-decoration: none; transition: transform var(--zk-motion-base), border-color var(--zk-motion-base), color var(--zk-motion-base); }
a.hm-platform-link:hover { color: var(--zk-primary); border-color: rgba(23, 104, 219, 0.32); transform: translateY(-1px); }
.hm-platform-link--disabled { color: #9aa7b7; background: #f7f8fa; }
.hm-download-note { margin: 22px auto 0; width: min(calc(100% - 48px), var(--zk-container)); color: #75859a; font-size: 13px; line-height: 1.75; text-align: center; }

/* ---------- 06 公司 ---------- */
.hm-company { padding: 88px 0 0; background: var(--zk-white); }
.hm-company-panel { width: min(calc(100% - 48px), var(--zk-container)); margin: 0 auto 64px; padding: 54px; border-radius: 34px; background: linear-gradient(135deg, #f5faff 0%, #edf8f3 100%); border: 1px solid var(--zk-line); box-shadow: 0 24px 70px rgba(32, 73, 124, 0.10); }
.hm-company-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.hm-company-copy h2 { margin: 0; color: var(--zk-ink); font-size: clamp(38px, 4vw, 54px); line-height: 1.15; letter-spacing: -0.045em; font-weight: 850; }
.hm-company-copy h2 span { display: inline-block; }
.hm-company-copy p { margin: 20px 0 0; color: #5f7188; font-size: 17px; line-height: 1.9; }
.hm-company-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hm-company-link { min-height: 92px; padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.84); border: 1px solid rgba(22, 66, 125, 0.10); display: flex; align-items: center; justify-content: space-between; gap: 16px; text-decoration: none; transition: transform var(--zk-motion-base), box-shadow var(--zk-motion-base); }
.hm-company-link:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(31, 70, 120, 0.08); }
.hm-company-link:focus-visible { outline: 2px solid var(--zk-primary); outline-offset: 2px; }
.hm-company-link strong { display: block; color: var(--zk-ink); font-size: 17px; }
.hm-company-link small { display: block; margin-top: 5px; color: #74849a; font-size: 12px; line-height: 1.5; }
.hm-company-link .hm-arrow { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--zk-primary); background: #eef5ff; }

/* ---------- 平板 ---------- */
@media (max-width: 1080px) {
  .hm-hero-products { grid-template-columns: 1fr; }
  .hm-product-card, .hm-product-card--picpeek { grid-template-columns: 42% 58%; }
  .hm-core-grid { grid-template-columns: 1fr; gap: 24px; }
  .hm-orbit { max-width: 400px; }
  .hm-core-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .hm-focus-points { grid-template-columns: 1fr; }
  .hm-download-board { grid-template-columns: 1fr; }
  .hm-company-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- 手机 ---------- */
@media (max-width: 720px) {
  .hm-container { width: min(100% - 30px, var(--zk-container)); }
  .hm-section { padding: 64px 0; }
  .hm-hero { padding: 44px 0 56px; }
  .hm-hero-intro { margin-bottom: 28px; }
  .hm-hero-slogan { font-size: 40px; line-height: 1.18; }
  .hm-hero-line { display: inline-block; }
  .hm-hero-lead { font-size: 16px; }
  .hm-product-card, .hm-product-card--picpeek { grid-template-columns: 1fr; min-height: 0; border-radius: 25px; }
  .hm-product-copy { padding: 22px 20px 18px; }
  .hm-art { min-height: 225px; }
  .hm-product-name { font-size: 23px; }
  .hm-product-copy h2 { font-size: 20px; }
  .hm-core-col { grid-template-columns: 1fr; }
  .hm-focus-head { margin-bottom: 32px; padding: 0 4px; }
  .hm-focus-visual { width: min(100% - 24px, 1440px); border-radius: 20px; }
  .hm-download { padding: 76px 0 84px; }
  .hm-dl-card { padding: 22px; border-radius: 23px; }
  .hm-recommend { align-items: flex-start; flex-direction: column; }
  .hm-company { padding: 76px 0 0; }
  .hm-company-panel { padding: 36px 28px; border-radius: 27px; width: min(100% - 32px, var(--zk-container)); }
  .hm-company-links { grid-template-columns: 1fr; }
}

/* ---------- 桌面端标题单行（AGENTS.md 标题换行约束） ---------- */
@media (min-width: 1080px) {
  .hm-hero-slogan { white-space: nowrap; }
}
/* 英文口号字符更多：同档收窄字号保证单行不溢出 */
html[lang="en"] .hm-hero-slogan { font-size: clamp(38px, 4vw, 56px); }

@media (prefers-reduced-motion: reduce) {
  .hm-product-card, .hm-action, .hm-company-link, .hm-platform-link { transition: none; }
  .hm-product-card:hover, .hm-action:hover, .hm-company-link:hover { transform: none; }
}