/* =============================================================
 * components.css — 可复用组件：按钮 / 卡片 / 统计 / 图占位 / 表单
 * ============================================================= */

/* ---------------- 按钮（苹果风：扁平纯色 + 极简）---------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 980px;
  overflow: hidden;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(0.5px) scale(0.99); }
.btn--primary {
  color: #fff;
  background: var(--brand);
  border: none;
}
.btn--primary:hover { background: var(--brand-ink); }
.btn--ghost {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover { background: var(--bg-soft); border-color: var(--ink-3); }
.btn--light { color: var(--ink); background: #fff; border: 1px solid var(--line); }
.btn--light:hover { background: var(--bg-soft); border-color: var(--line-strong); }
.btn--on-dark { color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; }
.btn--on-dark:hover { background: rgba(255, 255, 255, 0.1); }
.btn--lg { padding: 15px 28px; font-size: var(--fs-body); }
.btn__arrow { transition: transform var(--t) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------------- 图像占位框（产品实拍图上线前用）---------------- */
/* 上线后把 .figure 替换为 <img class="figure__img"> 即可，版式不动 */
.figure {
  position: relative;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(0, 102, 204, 0.1), transparent 60%),
    radial-gradient(120% 90% at 10% 100%, rgba(0, 102, 204, 0.1), transparent 60%),
    var(--bg-soft);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.figure[data-ratio="4/5"] { aspect-ratio: 4 / 5; }
.figure[data-ratio="4/3"] { aspect-ratio: 4 / 3; }
.figure[data-ratio="16/10"] { aspect-ratio: 16 / 10; }
.figure[data-ratio="1/1"] { aspect-ratio: 1 / 1; }
.figure__device { width: 56%; max-width: 280px; opacity: 0.9; }
.figure__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}
.figure__hint {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--ink-3);
}
.figure__img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* 等比缩放，完整显示，不裁切 */
  object-position: center;
  background: #fff;
  display: block;
}
/* 真实产品图：白底，防止透明 PNG 透出渐变背景 */
.figure--hasimg { background: #fff; }

/* ---------------- 统计带 ---------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--sh-1);
}
.stats__item {
  position: relative;
  padding: var(--sp-4);
  border-right: 1px solid var(--line);
  transition: background var(--t) var(--ease);
}
.stats__item:hover { background: var(--bg-soft); }
.stats__item:last-child { border-right: none; }
.stats__num {
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.stats__num span { font-size: 0.55em; }
.stats__label { margin-top: 8px; font-size: var(--fs-sm); color: var(--ink-3); }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__item:nth-child(2) { border-right: none; }
  .stats__item:nth-child(1),
  .stats__item:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* ---------------- 卡片 ---------------- */
.card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
  border-color: var(--line-strong);
}
.card__ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--brand-grad-soft);
  color: var(--brand);
  margin-bottom: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.card__title { font-size: var(--fs-h3); margin-bottom: 8px; letter-spacing: -0.02em; }

/* ---------------- 解决方案卡片（可点击）---------------- */
a.card.solution-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
a.card.solution-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
  border-color: var(--brand);
}
.card__desc {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.solution-card__points {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.solution-card__points li {
  font-size: 0.78rem;
  color: var(--ink-2);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 980px;
  padding: 4px 11px;
}
.solution-card__link {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.solution-card__more {
  display: inline-block;
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand);
}
a.card.solution-card:hover .solution-card__more { gap: 4px; }
.solutions-grid .solution-card .solution-card__points { margin-top: auto; }

/* ---------------- 产品文字列表（破卡片网格）---------------- */
.plist { border-top: 1px solid var(--line); }
.plist__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 8px;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--t) var(--ease), background var(--t) var(--ease);
}
.plist__row:hover { padding-left: 18px; background: var(--bg-soft); }
.plist__no { font-family: var(--font-mono); color: var(--brand); font-size: 0.85rem; }
.plist__name { font-size: var(--fs-h3); font-weight: 600; }
.plist__cat { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); }
.plist__desc { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 4px; }
.plist__arrow { color: var(--ink-3); transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.plist__row:hover .plist__arrow { transform: translateX(4px); color: var(--brand); }
@media (max-width: 640px) {
  .plist__row { grid-template-columns: auto 1fr; }
  .plist__arrow { display: none; }
}

/* ---------------- 标签 chip（极简：浅灰底 + 深色字）---------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 4px 11px;
  border-radius: 980px;
}

/* ---------------- 表单 ---------------- */
.form { display: grid; gap: var(--sp-3); max-width: 560px; }
.form__row { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.field__label .req { color: var(--brand); margin-left: 2px; }
.field__input,
.field__textarea {
  width: 100%;
  padding: 13px 15px;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.field__input:hover,
.field__textarea:hover { border-color: var(--ink-3); }
.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.12);
  background: #fff;
}
.field__textarea { resize: vertical; min-height: 120px; }
.field.is-invalid .field__input,
.field.is-invalid .field__textarea { border-color: #e5484d; }
.field__error {
  font-size: var(--fs-xs);
  color: #e5484d;
  min-height: 1em;
}
.form__note { font-size: var(--fs-xs); color: var(--ink-3); }
.form__status {
  font-size: var(--fs-sm);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  display: none;
}
.form__status.is-visible { display: block; }
.form__status--ok { background: rgba(0, 102, 204, 0.12); color: #2a4a75; border: 1px solid rgba(0, 102, 204, 0.3); }
.form__status--err { background: rgba(229, 72, 77, 0.1); color: #b3343a; border: 1px solid rgba(229, 72, 77, 0.3); }

/* ---------------- 服务网络地图（深色段）---------------- */
.network { position: relative; }
.network__map {
  position: relative;
  height: clamp(260px, 34vw, 380px);
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 80% at 50% 40%, rgba(0, 102, 204, 0.18), transparent 70%),
    var(--bg-dark-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.network__map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: 0.5;
}
.network__pin {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--brand-2);
  box-shadow: 0 0 0 5px rgba(0, 102, 204, 0.18);
}
.network__pin::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(0, 102, 204, 0.5);
  animation: pin-pulse 2.6s var(--ease) infinite;
}
@keyframes pin-pulse {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ---------------- 区块标题 ---------------- */
.section-head { max-width: 60ch; margin-bottom: var(--sp-5); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: 14px; }
.section-head p { margin-top: 14px; }

/* ---------------- CTA 横幅 ---------------- */
.cta {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(40px, 6vw, 72px);
  background: var(--brand-grad);
  color: #fff;
  overflow: hidden;
  text-align: center;
  box-shadow: var(--sh-glow);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.4px);
  background-size: 22px 22px;
  opacity: 0.35;
  pointer-events: none;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 120% at 80% 0%, rgba(255, 255, 255, 0.26), transparent 60%);
  pointer-events: none;
}
.cta h2 { color: #fff; position: relative; letter-spacing: -0.02em; }
.cta p { color: rgba(255, 255, 255, 0.92); position: relative; margin-top: 12px; }
.cta .btn { position: relative; margin-top: var(--sp-4); }