/**
 * 文件描述：ZStack Cloud 聚合页（zcf_cloud）专属样式
 */

.hero{
  padding: 0;
  margin: 0;
}
.hero-btns{
  margin-bottom: 20px;
}
.hero-p-sm{
   font-size: 13px;
   color: var(--primary-dec);
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, calc(100vw * 10 / 1440), 10px);
}
.hero-slide-inner{ gap: 0 50px;}
.hero-chips{ margin-top: 30px;}
.hero-p-dec{color: var(--primary); font-size: var(--fs-18);}
.hero-chip-icon {
  flex-shrink: 0;
  width: clamp(18px, calc(100vw * 20 / 1440), 20px);
  height: auto;
  object-fit: contain;
}

.hero-btns-right{
   width: clamp(280px, calc(100vw * 460 / 1440), 460px);
   flex-shrink: 0;
   margin-left: auto;
   display: flex;
   flex-direction: column;
   gap: clamp(8px, calc(100vw * 12 / 1440), 12px);
}
/* 版本快捷入口：左图标+标题，右描述 */
.hero-btns-right a{
   display: flex;
   align-items: center;
   gap: clamp(10px, calc(100vw * 14 / 1440), 14px);
   width: 100%;
   box-sizing: border-box;
   padding: 2px clamp(14px, calc(100vw * 20 / 1440), 20px) 2px 2px;
   background: #F4F9FF;
   border: 1px solid #FFFFFF;
   border-radius: 12px;
   text-decoration: none;
   color: inherit;
   transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
               background 0.25s ease,
               box-shadow 0.3s ease;
}
.hero-btns-right .icon_div{
   flex-shrink: 0;
   width: clamp(36px, calc(100vw * 64 / 1440), 64px);
   height: clamp(36px, calc(100vw * 64 / 1440), 64px);
   line-height: 0;
}
.hero-btns-right .icon_div img{
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: 4px;
}
.hero-btns-right .text_div{
   flex-shrink: 0;
   font-size: clamp(15px, calc(100vw * 18 / 1440), 18px);
   font-weight: 700;
   line-height: 1.3;
   color: var(--on-surface, #1a1a1a);
   white-space: nowrap;
}
.hero-btns-right .text_small{
   margin-left: auto;
   font-size: clamp(12px, calc(100vw * 14 / 1440), 14px);
   font-weight: 400;
   line-height: 1.4;
   color: var(--on-surface-variant);
   text-align: right;
}
.hero-btns-right a:hover{
   transform: translateX(-4px);
   background: #e8f2fc;
   box-shadow: 0 8px 20px rgba(17, 83, 145, 0.08);
}
.hero-btns-right a:hover .text_div{
   color: var(--primary);
}

@media (max-width: 768px) {
  .hero-slide-bg {
    overflow: hidden;
    background: linear-gradient(91deg, #eef5fb 7%, #f3f7fb 100%);
  }

  .hero-slide-bg img {
    object-fit: cover;
    object-position: 72% bottom;
    height: 115%;
    transform: translateY(5%);
  }

  .hero-slide-inner{
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .hero-btns-right{
    width: min(100%, 450px);
    margin-left: 0;
    margin-inline: auto;
  }

  .hero-btns-right .text_small{
    max-width: 48%;
  }
}
/* 滚动 fadeInUp：IntersectionObserver 触发 .in */
.zcf_cloud-page .sds-fade,
.hero .sds-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.zcf_cloud-page .sds-fade.in,
.hero .sds-fade.in {
  opacity: 1;
  transform: none;
}

.zcf_cloud-page .sds-rise {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.zcf_cloud-page .sds-rise.in {
  opacity: 1;
  transform: none;
}

.zcf_cloud-page .zcf-panel-card.sds-rise.in:hover,
.zcf_cloud-page .zcf-module-card.sds-rise.in:hover,
.zcf_cloud-page .zcf-case-card.sds-rise.in:hover {
  transform: translateY(-8px);
}

@media (prefers-reduced-motion: reduce) {
  .zcf_cloud-page .sds-fade,
  .zcf_cloud-page .sds-rise,
  .hero .sds-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-btns-right a,
  .hero-btns-right a:hover,
  .zcf-panel-card:hover,
  .zcf-module-card:hover,
  .zcf-case-card:hover {
    transition: none;
    transform: none;
    filter: none;
    box-shadow: none;
  }
}

/* ── 正文通用 ── */
.zcf_cloud-page {
  color: var(--on-surface, #1a1a1a);
  line-height: 1.5;
}

.zcf-sec-head {
  text-align: center;
  margin-bottom: clamp(28px, calc(100vw * 40 / 1440), 40px);
}

.zcf-sec-title {
  margin: 0 0 12px;
  font-size: clamp(22px, calc(100vw * 32 / 1440), 32px);
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}

.zcf-sec-title--left {
  text-align: left;
}

.zcf-sec-desc {
  margin: 0 auto;
  font-size: clamp(13px, calc(100vw * 15 / 1440), 15px);
  color: var(--primary-dec);
  line-height: 1.7;
}

.zcf-sec-desc--left {
  margin: 0;
  max-width: none;
  text-align: left;
}

.zcf-panel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 8px 14px;
  border: none;
  border-radius: var(--r8, 8px);
  background: var(--primary, #00579c);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}

.zcf-panel-btn svg {
  flex-shrink: 0;
}

/* ── 五个版本 ── */
.zcf-versions {
  background-image: linear-gradient(180deg, #639ce133 0%, #639ce113 60%, #639ce100 100%), linear-gradient(#F8FAFC, #F8FAFC);
  background-repeat: no-repeat;
  background-position: top center, center;
  background-size: 100% 148px, cover;
}

.zcf-versions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, calc(100vw * 20 / 1440), 20px);
}

.zcf-panel-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
  padding: clamp(22px, calc(100vw * 28 / 1440), 28px);
  background: linear-gradient(136deg, #e2edfa66 14%, #e2edfa00 89%), #FFFFFF;
  border-radius: var(--r8, 8px);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.zcf-panel-tag {
  font-size: var(--fs-12);
  color: var(--primary-dec);
  margin-bottom: 10px;
}

.zcf-panel-title {
  margin: 0 0 8px;
  font-size: clamp(20px, calc(100vw * 24 / 1440), 24px);
  font-weight: 700;
  color: var(--primary, #00579c);
}

.zcf-panel-sub {
  margin: 0 0 12px;
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--primary, #00579c);
}

.zcf-panel-desc {
  margin: 0 0 50px;
  font-size: 13px;
  color: var(--primary-dec);
  line-height: 1.7;
}

.zcf-panel-card:hover {
  background: linear-gradient(225deg, #023d73 2%, #02569b 66%, #014a86 98%);
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(0, 78, 130, 0.22);
}


.zcf-panel-card:hover .zcf-panel-title,
.zcf-panel-card:hover .zcf-panel-sub
 {
  color: #fff;
}
.zcf-panel-card:hover .zcf-panel-desc, .zcf-panel-card:hover .zcf-panel-tag {
  color: rgba(255, 255, 255, 0.6);
}

.zcf-panel-card:hover .zcf-panel-btn {
  background: #fff;
  color: #004e82;
}

/* ── 产品换新 ── */
.zcf-refresh {
  padding: 0;
  background: url(/static/skin/images/product/zcf_cloud/block-3-bg.webp) no-repeat center center;
  background-size: 100% 100%;
}

.zcf-refresh-banner {
  position: relative;
  overflow: hidden;
  min-height: clamp(220px, calc(100vw * 320 / 1440), 320px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.zcf-refresh-title {
  margin: 0;
  padding: clamp(40px, calc(100vw * 56 / 1440), 56px) clamp(24px, calc(100vw * 40 / 1440), 40px) clamp(80px, calc(100vw * 100 / 1440), 100px);
  text-align: center;
  font-size: clamp(22px, calc(100vw * 34 / 1440), 34px);
  font-weight: 700;
  color: #1a2332;
  letter-spacing: 0.02em;
}

.zcf-refresh-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 16px clamp(16px, calc(100vw * 28 / 1440), 28px);

  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.zcf-refresh-bar ul{
  display: flex;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  max-width: min(var(--container-max), 100%);
  margin: 0 auto;
}

.zcf-refresh-bar li {
  flex: 1;
  text-align: center;
  font-size: clamp(11px, calc(100vw * 13 / 1440), 13px);
  color: var(--primary, #00579c);
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s, transform 0.2s;
}

.zcf-refresh-bar li:hover {
  color: #003d6e;
  transform: translateY(-2px);
}

/* ── 版本对比 ── */
.zcf-compare-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(20px, calc(100vw * 28 / 1440), 28px);
}

.zcf-compare-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: var(--r8, 8px);
  background: var(--primary, #00579c);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}

.zcf-compare-cta:hover {
  background: #004882;
  transform: translateY(-2px);
}

.zcf-compare-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r12, 12px);
}

.zcf-compare-table img {
  display: block;
  width: 100%;
  min-width: 760px;
  height: auto;
}

/* ── 九个增值模块 ── */
.zcf-modules {
  background: #f7f9fc;
}

.zcf-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, calc(100vw * 20 / 1440), 20px);
}

.zcf-module-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(22px, calc(100vw * 28 / 1440), 28px);
  background: linear-gradient(134deg, #e2edfa66 14%, #e2edfa00 89%), #FFFFFF;
  border-radius: var(--r8);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.zcf-module-no {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 10px;
}

.zcf-module-title {
  margin: 0 0 10px;
  font-size: clamp(16px, calc(100vw * 18 / 1440), 18px);
  font-weight: 700;
  color: var(--primary, #00579c);
}

.zcf-module-desc {
  margin: 0 0 20px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
  flex: 1;
}

.zcf-module-card:hover {
  background: #004e82;
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(0, 78, 130, 0.22);
}


.zcf-module-card:hover .zcf-module-title
 {
  color: #fff;
}
.zcf-module-card:hover .zcf-module-no,.zcf-module-card:hover .zcf-module-desc{
  color: rgba(255, 255, 255, 0.6);
}

.zcf-module-card:hover .zcf-panel-btn {
  background: #fff;
  color: #004e82;
}

/* ── 服务千行百业 ── */
.zcf-industries-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, calc(100vw * 20 / 1440), 20px);
}

.zcf-case-card {
  overflow: hidden;
  background: #fff;
  border-radius: var(--r12, 12px);
  border: 1px solid rgba(0, 87, 156, 0.08);
  box-shadow: 0 2px 12px rgba(17, 83, 145, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.zcf-case-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 24px rgba(17, 83, 145, 0.12);
}

.zcf-case-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.zcf-case-title {
  margin: 14px 16px 8px;
  font-size: clamp(15px, calc(100vw * 16 / 1440), 16px);
  font-weight: 700;
  color: var(--primary, #00579c);
}

.zcf-case-desc {
  margin: 0 16px 16px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.65;
}

/* ── CTA ── */
.zcf-cta {
  background: linear-gradient(180deg, #639ce11f 0%, #639ce10b 60%, #639ce100 100%), #fff;
}

.zcf-cta-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, calc(100vw * 56 / 1440), 56px);
  align-items: start;
}

.zcf-cta-title {
  margin: 0 0 16px;
  font-size: clamp(24px, calc(100vw * 36 / 1440), 36px);
  font-weight: 700;
  color: #181c22;
  line-height: 1.35;
}

.zcf-cta-desc {
  margin: 0 0 clamp(24px, calc(100vw * 32 / 1440), 32px);
  font-size: clamp(13px, calc(100vw * 15 / 1440), 15px);
  color: #64748b;
  line-height: 1.7;
}

.zcf-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.zcf-cta-btn {
  padding: 10px 20px;
  border-radius: var(--r8, 8px);
  background: rgba(0, 87, 156, 0.05);
  border: 1px solid rgba(0, 87, 156, 0.1);
  color: var(--primary, #00579c);
  font-size: var(--fs-14, 14px);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.zcf-cta-btn:hover {
  background: var(--primary, #00579c);
  color: #fff;
  transform: translateY(-2px);
}

.zcf-cta-form {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8edf3;
  padding: clamp(20px, calc(100vw * 28 / 1440), 28px);
  box-shadow: 0 4px 20px rgba(17, 83, 145, 0.06);
}

.zcf-cta-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.zcf-cta-field--full {
  grid-column: 1 / -1;
}

.zcf-cta-input,
.zcf-cta-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: var(--fs-16, 16px);
  color: #00579c;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.zcf-cta-input::placeholder {
  color: #94a3b8;
}

.zcf-cta-select {
  color: #64748b;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.zcf-cta-input:focus,
.zcf-cta-select:focus {
  outline: none;
  border-color: #00579c;
}

.zcf-cta-form-note {
  margin: 0 0 16px;
  font-size: var(--fs-12, 12px);
  color: #94a3b8;
  line-height: 1.5;
}

.zcf-cta-submit {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 8px;
  background: #00579c;
  color: #fff;
  font-size: var(--fs-16, 16px);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.zcf-cta-submit:hover {
  background: #004882;
  transform: translateY(-1px);
}

/* ── 响应式 ── */
@media (max-width: 1024px) {
  .zcf-versions-grid,
  .zcf-modules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zcf-industries-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zcf-cta-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .zcf-versions-grid,
  .zcf-modules-grid,
  .zcf-industries-grid {
    grid-template-columns: 1fr;
  }

  .zcf-compare-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .zcf-refresh-banner {
    min-height: 0;
  }

  .zcf-refresh-title {
    padding-bottom: 24px;
  }

  .zcf-refresh-bar {
    position: static;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 18px;
  }

  .zcf-refresh-bar li {
    text-align: left;
    white-space: normal;
  }

  .zcf-cta-form-grid {
    grid-template-columns: 1fr;
  }

  .zcf-cta-btns {
    flex-direction: column;
  }

  .zcf-cta-btn {
    text-align: center;
    justify-content: center;
  }
}