/* Homepage 四项核心服务逐层支撑 (2026-10-25), placed directly below the hero. Four animated service cards;
   every class and keyframe is prefixed hz- so nothing collides with the Webflow template.
   Assets: /assets/hz-features/ (animations and the HOLDZHU mark); animations play through /vendor/dotlottie/ (loaded with the hero). */
.hz-features {
  padding: 100px 0;
  /* Plain black, continuing the hero's black fade; the bottom edge leads into the landscape module (#050a14). */
  background-color: #000;
  background-image: linear-gradient(to top, #050a14, rgba(5,10,20,0) 180px);
  color: #fff;
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hz-features, .hz-features *, .hz-features *::before, .hz-features *::after { box-sizing: border-box; }
.hz-features__inner { width: 100%; max-width: 1650px; margin: 0 auto; padding: 0 15px; }
.hz-features__heading { display: flex; width: 100%; max-width: 570px; flex-direction: column; align-items: center; gap: 16px; margin: 0 auto 60px; text-align: center; }
.hz-features__eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 99px; color: rgba(255,255,255,.8); font-size: 12px; line-height: 1.4; }
/* The template gives headings a gradient text fill; these headings are plain white. */
.hz-features__title,
.hz-fcard__title { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; -webkit-text-fill-color: currentColor; font-family: inherit; text-transform: none; }
.hz-features__title { margin: 0; font-size: 42px; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }

.hz-features__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-columns: 1fr; gap: 16px; }
.hz-fcard { width: 100%; height: 100%; padding: 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 30px; background: #1b1a1a; }
.hz-fcard--insight,
.hz-fcard--dashboard { grid-column: span 2; }
.hz-fcard__visual { position: relative; width: 100%; height: 265px; padding: 1px; overflow: hidden; border-radius: 25px; background-image: linear-gradient(90deg, rgba(255,255,255,.32), rgba(255,255,255,.1)); }
.hz-fcard__visual-inner { width: 100%; height: 100%; overflow: hidden; border-radius: 24px; background: #212121; }
.hz-fcard__visual dotlottie-player { display: block; width: 100%; height: 100%; }
/* 素材替换位：动画中心的 HOLDZHU 标识，替换 /assets/hz-features/holdzhu-icon-brand.png 即可。 */
.hz-fcard__mark {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: block;
  width: clamp(58px, 9%, 88px);
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 9px rgba(143,114,255,.36));
  animation: hz-feature-logo-breathe 4.8s ease-in-out infinite;
}
.hz-fcard__mark--workflow { left: 51.3%; }
.hz-fcard__mark--integrations { top: 53%; left: 49%; }
.hz-fcard__steps {
  position: absolute;
  z-index: 3;
  top: 64%;
  right: 3%;
  left: 3%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 2px;
  color: #fff;
  font-size: clamp(10px, 1.15vw, 15px);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0,0,0,.85), 0 0 10px rgba(143,114,255,.2);
  transform: translateY(-50%);
  pointer-events: none;
}
.hz-fcard__steps span { min-width: 0; white-space: nowrap; }
/* Copy sits 24px from the card's outer edge: 11px card padding + 1px border + 12px margin. */
.hz-fcard__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; margin: 23px 12px; }
.hz-fcard__title { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: 0; }
.hz-fcard__text { margin: 0; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.6; }

@keyframes hz-feature-logo-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(.94); } 50% { transform: translate(-50%, -50%) scale(1.04); } }

@media (min-width: 1280px) {
  .hz-features { padding-top: 120px; padding-bottom: 120px; }
  .hz-features__grid { gap: 20px; }
  .hz-fcard__visual { height: 290px; }
  .hz-fcard__copy { margin: 28px 12px; }
}
@media (min-width: 1440px) {
  .hz-features { padding-top: 140px; padding-bottom: 140px; }
  .hz-features__grid { gap: 25px; }
  .hz-fcard__visual { height: 320px; }
  .hz-fcard__copy { margin: 33px 12px; }
}
@media (min-width: 1920px) {
  .hz-features__grid { gap: 30px; }
  .hz-fcard__visual { height: 333px; }
}
@media (max-width: 991px) {
  .hz-features { padding-top: 80px; padding-bottom: 80px; }
  .hz-features__grid { gap: 12px; }
  .hz-fcard { padding: 7px; border-radius: 20px; }
  .hz-fcard__visual,
  .hz-fcard__visual-inner { border-radius: 20px; }
  /* 7px card padding + 1px border + 16px margin keeps the copy 24px from the card edge. */
  .hz-fcard__copy { margin: 23px 16px 17px; }
}
/* 移动端瀑布流：四个服务卡片单列、按顺序自上而下排列。 */
@media (max-width: 767px) {
  .hz-features { padding-top: 60px; padding-bottom: 60px; }
  .hz-features__grid { grid-template-columns: 1fr; }
  .hz-fcard--insight,
  .hz-fcard--dashboard { grid-column: auto; }
  .hz-fcard { border-radius: 16px; }
  .hz-fcard__visual,
  .hz-fcard__visual-inner { border-radius: 16px; }
  .hz-fcard__visual { height: 190px; }
  /* Zoom the wide chart to its centre so the 42% / 28% tooltip stays legible on phones. */
  .hz-fcard--dashboard .hz-fcard__visual { height: 240px; }
  .hz-fcard--dashboard dotlottie-player { width: 260%; margin-left: -80%; }
  .hz-fcard__copy { gap: 10px; }
  .hz-features__heading { max-width: 450px; }
  .hz-features__title { font-size: clamp(30px, 5vw, 42px); }
}
@media (max-width: 479px) {
  .hz-features { padding-top: 50px; padding-bottom: 50px; }
  .hz-fcard,
  .hz-fcard__visual,
  .hz-fcard__visual-inner { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hz-fcard__mark { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}