/* ==========================================================================
   页面层 Pages：首页 Home
   依赖：tokens.css, base.css, layout.css, components.css
   ========================================================================== */

/* ---------- 首屏 ---------- */
.hero {
  padding: var(--space-9) 0 var(--space-8);
  text-align: center;
}

.hero h1 {
  font-size: var(--font-size-h1);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.hero p {
  margin: 24px auto 0;
  max-width: 820px;
  color: var(--color-text-2);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.hero .cta {
  margin-top: var(--space-6);
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/*
 * 首屏 CTA 按钮：默认统一为「白底 + 蓝字 + 描边」，
 * 悬停才填充主色。配色由 components.css 的 .btn-outline 提供，
 * 此处只保留页面级排版，避免与其他页面的按钮样式重复定义。
 */

/* ---------- 产品区 ---------- */
.products {
  padding: var(--space-7) 0 80px;
}

.products .section-title,
.products .section-sub {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.product-grid {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.product-card {
  position: relative;
  display: block;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px var(--space-6);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

/*
 * 悬停抬升用 ::before 承载，而不是移动卡片本体：
 * 卡片本体上移会让指针落到卡片外，触发 hover 反复开关造成抖动。
 */
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(0);
  transition: opacity var(--transition-base), transform var(--transition-base);
  pointer-events: none;
}

.product-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
}

.product-card:hover::before {
  opacity: 1;
  transform: translateY(-3px);
}

.product-card:active {
  border-color: color-mix(in srgb, var(--color-primary) 65%, var(--color-border));
}

.product-card:active::before {
  transform: translateY(-1px);
}

.product-card .tag {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
}

.product-card h3 {
  margin-top: 20px;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.product-card p {
  margin-top: 14px;
  color: var(--color-text-2);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.product-card .go {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.product-card .go svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-base);
}

.product-card:hover .go svg {
  transform: translateX(3px);
}

/* ---------- 信任区块 ---------- */
.trust {
  margin: 20px 0 60px;
  padding: var(--space-7);
  background: var(--color-bg-soft);
  border-radius: var(--radius-xl);
}

.trust h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.trust p {
  margin-top: 14px;
  max-width: 860px;
  color: var(--color-text-2);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

.trust-list {
  margin-top: 20px;
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  color: var(--color-text-2);
  font-size: var(--font-size-base);
}

.trust-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trust-list svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

/* ---------- 联系我们 ---------- */
.contact {
  margin: 20px 0 60px;
  padding: var(--space-7) var(--space-6);
  background: var(--color-bg-soft);
  border-radius: var(--radius-xl);
  /* 锚点跳转时为固定头部留出空间，标题不会被压住 */
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.contact .section-title,
.contact .section-sub {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.contact-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.contact-card {
  padding: var(--space-5);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  /* 三张卡片等高，避免内容多的卡片把整体拉得参差不齐 */
  display: flex;
  flex-direction: column;
}

.contact-card h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.contact-card p {
  margin-top: 10px;
  color: var(--color-text-2);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  /* 邮箱、地址等长串在窄屏可安全断行，避免撑破卡片 */
  overflow-wrap: anywhere;
}

/* 联系方式用 <a>，常态即用主色区分可点击，悬停才加下划线 */
.contact-card p a,
.contact-card .contact-label a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast);
}

.contact-card p a:hover,
.contact-card .contact-label a:hover {
  text-decoration-color: currentColor;
}

/* 卡片内的辅助说明（如工作时间标注） */
.contact-card .contact-label {
  display: block;
  margin-top: 14px;
  color: var(--color-text-3);
  font-size: var(--font-size-xs);
}

/* 卡片高度被拉齐后，把最后一条信息压到卡片底部，留白更均匀 */
.contact-card > .contact-label:last-child {
  margin-top: auto;
  padding-top: 14px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  /* 三张联系卡片在中等屏改为单列，避免长邮箱/地址被挤成多行碎字 */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

@media (max-width: 768px) {
  .contact {
    margin: 16px 0 var(--space-7);
    padding: var(--space-6) var(--space-5);
  }

  /* 窄屏副标题略收字号，避免「欢迎咨询产品、方案与合作事宜」折出单字行 */
  .contact .section-sub {
    font-size: var(--font-size-base);
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: var(--space-8) 0 var(--space-7);
  }

  /* 小屏收紧主标题：避免「硬件安全，简单可信」出现单字孤行 */
  .hero h1 {
    font-size: clamp(28px, 8vw, 36px);
  }
}

@media (max-width: 480px) {
  /* 极窄屏按钮改为等宽铺满：点击区域更大，也避免两个按钮挤成一行参差不齐 */
  .hero .cta {
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero .cta .btn {
    width: 100%;
    justify-content: center;
  }
}