@charset "UTF-8";
/* ====================================================================
   96IDCtx 前台主题 · 首页区块
   文件：assets/css/i9-home.css
   --------------------------------------------------------------------
   版面纪律（对标主流云厂商官网）：白底为主、区块用浅灰/浅蓝交替分隔、
   卡片 6px 圆角 + 1px 浅边、近乎无投影、信息密度高、红橙只用于价格与角标。
   ==================================================================== */

/* ====================================================================
   1. 首屏横幅（灵动科技层）
   ==================================================================== */
.i9-banner {
  position: relative;
  overflow: hidden;
  padding-block: 40px 44px;
  background: linear-gradient(180deg, #F7F9FF 0%, #FFFFFF 62%);
  border-bottom: 1px solid var(--i9-border-soft);
}
/* 背景网格 + 两团柔和光晕（纯 CSS，无图片） */
.i9-live::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 82, 217, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 82, 217, .045) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(120% 90% at 12% 0%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 12% 0%, #000 20%, transparent 72%);
  pointer-events: none;
}
.i9-live::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  top: -300px;
  right: -140px;
  background: radial-gradient(closest-side, rgba(18, 194, 233, .22), transparent 70%);
  pointer-events: none;
  animation: i9-breathe 9s ease-in-out infinite;
}
@keyframes i9-breathe {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.12); opacity: 1; }
}

.i9-banner__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: 36px;
}
.i9-banner__main {
  min-width: 0;
  /* 原先这里是「产品检索条」，已移除；标题与副标题整体下移，
     上方留出呼吸空间（移动端在 i9-mobile.css 里另有覆盖） */
  padding-top: 44px;
}

/* 文案逐级浮现 */
.i9-banner__main > * {
  animation: i9-rise .55s cubic-bezier(.38, 0, .24, 1) both;
}
.i9-banner__main > *:nth-child(1) { animation-delay: .02s; }
.i9-banner__main > *:nth-child(2) { animation-delay: .10s; }
.i9-banner__main > *:nth-child(3) { animation-delay: .18s; }
.i9-banner__main > *:nth-child(4) { animation-delay: .26s; }
.i9-banner__main > *:nth-child(5) { animation-delay: .34s; }
@keyframes i9-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.i9-banner__title {
  font-size: var(--i9-fs-hero);
  line-height: var(--i9-lh-hero);
  font-weight: var(--i9-fw-bold);
  color: var(--i9-text-1);
  letter-spacing: -.6px;
  background: linear-gradient(100deg, #0A1F44 0%, #0052D9 62%, #12C2E9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.i9-banner__sub {
  margin-top: 14px;
  font-size: 15px;
  color: var(--i9-text-3);
}
.i9-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
/* 主按钮流光扫过 */
.i9-banner__actions .i9-btn:not(.i9-btn--default) { position: relative; overflow: hidden; }
.i9-banner__actions .i9-btn:not(.i9-btn--default)::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  animation: i9-sheen 3.6s ease-in-out infinite;
}
@keyframes i9-sheen {
  0% { left: -120%; }
  55%, 100% { left: 160%; }
}

/* 检索条：聚焦时主色描边 + 光晕 */
.i9-banner__finder {
  display: flex;
  align-items: center;
  margin-top: 28px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--i9-border);
  border-radius: var(--i9-radius-md);
  box-shadow: var(--i9-sh-1);
  max-width: 640px;
  transition: border-color var(--i9-dur) var(--i9-ease), box-shadow var(--i9-dur) var(--i9-ease);
}
.i9-banner__finder:focus-within {
  border-color: var(--i9-brand);
  box-shadow: 0 0 0 3px var(--i9-brand-ring), var(--i9-sh-2);
}
.i9-finder__cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  min-width: 0;
}
.i9-finder__cell--grow { flex: 1 1 auto; }
.i9-finder__label {
  flex: none;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-4);
  white-space: nowrap;
}
.i9-finder__select,
.i9-finder__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding: 0;
  font-size: var(--i9-fs-body);
  color: var(--i9-text-2);
  background: none;
  border: 0;
}
.i9-finder__select { padding-right: 18px; cursor: pointer; }
.i9-finder__input:focus, .i9-finder__select:focus { outline: none; }
.i9-finder__input::placeholder { color: var(--i9-text-5); }
.i9-finder__divider { flex: none; width: 1px; height: 18px; background: var(--i9-border-soft); }
.i9-banner__finder .i9-btn { flex: none; }

.i9-banner__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.i9-banner__tags a.i9-tag { height: 26px; padding: 0 12px; color: var(--i9-text-3); background: #fff; border: 1px solid var(--i9-border-soft); }
.i9-banner__tags a.i9-tag:hover { color: var(--i9-brand); border-color: var(--i9-brand); }

/* 右侧主视觉：插画 + 呼吸光晕 + 缓慢浮动 */
.i9-banner__art {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.i9-banner__glow {
  position: absolute;
  inset: 4% 2%;
  background: radial-gradient(closest-side, rgba(0, 82, 217, .16), transparent 72%);
  filter: blur(4px);
  animation: i9-breathe 8s ease-in-out infinite;
  pointer-events: none;
}
.i9-banner__img {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: auto;
  animation: i9-float 7s ease-in-out infinite;
}
@keyframes i9-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
.i9-banner__ph { aspect-ratio: 14 / 9; width: 100%; }

/* ====================================================================
   2. 四栏功能入口
   ==================================================================== */
.i9-feat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  transition: border-color var(--i9-dur) var(--i9-ease), box-shadow var(--i9-dur) var(--i9-ease);
}
.i9-feat:hover { border-color: var(--i9-brand-3); box-shadow: var(--i9-sh-1); }
.i9-feat__ico {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: var(--i9-brand);
  background: var(--i9-brand-1);
  border-radius: var(--i9-radius-sm);
}
.i9-feat__title { font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-medium); color: var(--i9-text-2); }
.i9-feat:hover .i9-feat__title { color: var(--i9-brand); }
.i9-feat__desc { margin-top: 4px; font-size: var(--i9-fs-sm); color: var(--i9-text-3); }

/* ====================================================================
   3. 活动横幅（左大右两小）
   ==================================================================== */
.i9-banners { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 16px; }
.i9-banners__side { display: grid; gap: 16px; }

.i9-banner-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  overflow: hidden;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  transition: border-color var(--i9-dur) var(--i9-ease), box-shadow var(--i9-dur) var(--i9-ease);
}
.i9-banner-card:hover { border-color: var(--i9-brand-3); box-shadow: var(--i9-sh-1); }
.i9-banner-card--main { background: linear-gradient(105deg, #F2F3FF 0%, #FFFFFF 62%); min-height: 148px; }
.i9-banner-card__body { min-width: 0; }
.i9-banner-card__tag {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px; margin-bottom: 8px;
  font-size: var(--i9-fs-xs); color: #fff;
  background: var(--i9-accent-grad);
  border-radius: var(--i9-radius-xs);
}
.i9-banner-card__title {
  font-size: var(--i9-fs-h3);
  font-weight: var(--i9-fw-semibold);
  color: var(--i9-text-2);
  line-height: 1.4;
}
.i9-banner-card__title--sm { font-size: var(--i9-fs-h4); }
.i9-banner-card__desc { margin-top: 6px; font-size: var(--i9-fs-sm); color: var(--i9-text-3); }
.i9-banner-card__btn {
  display: inline-flex; align-items: center;
  margin-top: 14px; padding: 5px 14px;
  font-size: var(--i9-fs-sm); color: var(--i9-brand);
  background: #fff;
  border: 1px solid var(--i9-brand);
  border-radius: var(--i9-radius-sm);
}
.i9-banner-card:hover .i9-banner-card__btn { color: #fff; background: var(--i9-brand); }
.i9-banner-card__art { flex: none; width: 200px; height: 104px; }
.i9-banner-card--side { min-height: 66px; padding: 14px 16px; }
.i9-banner-card__arrow { flex: none; display: inline-flex; color: var(--i9-text-4); }
.i9-banner-card:hover .i9-banner-card__arrow { color: var(--i9-brand); }

/* ====================================================================
   4. 左右双栏
   ==================================================================== */
.i9-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: stretch; }
.i9-duo--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 免费试用中心 */
.i9-trial {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  background: linear-gradient(105deg, #F2F3FF 0%, #FFFFFF 70%);
  border-color: var(--i9-brand-2);
}
.i9-trial__main { min-width: 0; }
.i9-trial__badge {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px; margin-bottom: 10px;
  font-size: var(--i9-fs-xs); color: var(--i9-brand);
  background: #fff;
  border: 1px solid var(--i9-brand-2);
  border-radius: var(--i9-radius-xs);
}
.i9-trial__title { font-size: var(--i9-fs-h2); line-height: var(--i9-lh-h2); font-weight: var(--i9-fw-semibold); color: var(--i9-text-2); }
.i9-trial__desc { margin-top: 8px; max-width: 460px; font-size: var(--i9-fs-sm); color: var(--i9-text-3); }
.i9-trial__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.i9-trial__art { flex: none; width: 200px; height: 120px; }

/* 特色产品卡（试用中心右侧，同款设计语言） */
.i9-featcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  background: linear-gradient(105deg, #F2F3FF 0%, #FFFFFF 70%);
  border-color: var(--i9-brand-2);
}
.i9-featcard__badge {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px; margin-bottom: 10px;
  font-size: var(--i9-fs-xs); color: var(--i9-brand);
  background: #fff;
  border: 1px solid var(--i9-brand-2);
  border-radius: var(--i9-radius-xs);
}
.i9-featcard__title { font-size: var(--i9-fs-h2); line-height: var(--i9-lh-h2); font-weight: var(--i9-fw-semibold); color: var(--i9-text-2); }
.i9-featcard__desc { margin: 8px 0 0; max-width: 520px; font-size: var(--i9-fs-sm); color: var(--i9-text-3); }
.i9-featcard__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; width: 100%; }
.i9-featcard__item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; min-width: 0;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-lg);
}
.i9-featcard__ico {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--i9-radius-md);
  background: var(--i9-brand-1); color: var(--i9-brand);
}
.i9-featcard__txt { min-width: 0; }
.i9-featcard__k { font-size: var(--i9-fs-sm); font-weight: var(--i9-fw-semibold); color: var(--i9-text-2); }
.i9-featcard__v { margin-top: 2px; font-size: var(--i9-fs-xs); line-height: 1.5; color: var(--i9-text-3); }
.i9-featcard__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.i9-featcard__note { margin: 10px 0 0; font-size: var(--i9-fs-xs); color: var(--i9-text-4); }

/* ====================================================================
   5. 解决方案卡
   ==================================================================== */
.i9-sol {
  display: block;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
  transition: border-color var(--i9-dur) var(--i9-ease), box-shadow var(--i9-dur) var(--i9-ease), transform var(--i9-dur) var(--i9-ease);
}
.i9-sol:hover { border-color: var(--i9-brand-3); box-shadow: var(--i9-sh-1); transform: translateY(-2px); }
.i9-sol__title { margin-top: 14px; font-size: var(--i9-fs-h4); font-weight: var(--i9-fw-medium); color: var(--i9-text-2); }
.i9-sol:hover .i9-sol__title { color: var(--i9-brand); }
.i9-sol__desc { margin-top: 4px; font-size: var(--i9-fs-sm); color: var(--i9-text-3); }

/* ====================================================================
   6. 客户 logo 墙 + 数据
   ==================================================================== */



/* 数据条下方的一行补充说明（图标 + 文字，克制使用） */
.i9-notes {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 14px;
  font-size: var(--i9-fs-sm);
  line-height: 1.7;
  color: var(--i9-text-4);
}
.i9-notes .i9-ico { flex: none; margin-top: 3px; color: var(--i9-brand-4); }
.i9-notes a { color: var(--i9-brand); }

.i9-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--i9-border-soft);
  border-radius: var(--i9-radius-md);
}
.i9-stats__item { text-align: center; }
.i9-stats__item + .i9-stats__item { border-left: 1px solid var(--i9-border-soft); }
.i9-stats__num {
  font-family: var(--i9-font-num);
  font-size: 32px;
  font-weight: var(--i9-fw-semibold);
  line-height: 1.1;
  color: var(--i9-brand);
}
.i9-stats__label { margin-top: 6px; font-size: var(--i9-fs-sm); color: var(--i9-text-3); }

/* ====================================================================
   7. 帮助入口列表
   ==================================================================== */
.i9-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
.i9-help a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  margin-inline: -10px;
  font-size: var(--i9-fs-body);
  color: var(--i9-text-2);
  border-radius: var(--i9-radius-sm);
}
.i9-help a:hover { color: var(--i9-brand); background: var(--i9-brand-1); }
.i9-help .i9-ico { color: var(--i9-text-4); }
.i9-help a:hover .i9-ico { color: var(--i9-brand); }

/* ====================================================================
   8. 联系 CTA
   ==================================================================== */
.i9-cta {
  padding-block: 32px;
  background: var(--i9-bg-blue);
  border-top: 1px solid var(--i9-border-soft);
}
.i9-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.i9-cta__title { font-size: var(--i9-fs-h3); font-weight: var(--i9-fw-semibold); color: var(--i9-text-2); }
.i9-cta__desc { margin-top: 6px; font-size: var(--i9-fs-sm); color: var(--i9-text-3); }
.i9-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }

/* ====================================================================
   9. 响应式
   ==================================================================== */
@media (max-width: 1200px) {
  .i9-banner__art { max-width: 420px; justify-self: end; }

}

@media (max-width: 992px) {
  :root { --i9-sec-py: 40px; }
  .i9-banner { padding-block: 28px 32px; }
  .i9-banner__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .i9-banner__art { max-width: none; }
  .i9-banner__ph { aspect-ratio: 16 / 9; }
  .i9-banners { grid-template-columns: minmax(0, 1fr); }
  .i9-banners__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i9-duo, .i9-duo--even { grid-template-columns: minmax(0, 1fr); }
  .i9-trial { flex-direction: column; align-items: flex-start; }
  .i9-trial__art { width: 100%; height: 96px; }
  .i9-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .i9-banner__title { font-size: 30px; letter-spacing: -.3px; }
  .i9-banner__finder { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; box-shadow: none; }
  .i9-finder__cell { padding: 0; }
  .i9-finder__divider { display: none; }
  .i9-finder__select, .i9-finder__input { height: 32px; }
  .i9-banner__actions .i9-btn { flex: 1 1 100%; }
  .i9-banner__actions { width: 100%; }
  .i9-grid--3, .i9-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .i9-banners__side { grid-template-columns: minmax(0, 1fr); }
  .i9-banner-card__art { display: none; }
  .i9-banner-card--main { min-height: 0; }

  .i9-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i9-stats__item:nth-child(odd) { border-left: 0; }
  .i9-stats__item:nth-child(n+3) { padding-top: 16px; border-top: 1px solid var(--i9-border-soft); }
  .i9-stats__num { font-size: 24px; }
  .i9-help { grid-template-columns: minmax(0, 1fr); }
  .i9-cta__inner { flex-direction: column; align-items: flex-start; }
  .i9-cta__actions { width: 100%; }
  .i9-cta__actions .i9-btn { flex: 1 1 auto; }
}

@media (max-width: 480px) {
  .i9-banner__title { font-size: 26px; }
  .i9-banner__sub { font-size: var(--i9-fs-body); }
  .i9-grid--4 { grid-template-columns: minmax(0, 1fr); }

  .i9-stats { grid-template-columns: minmax(0, 1fr); }
  .i9-stats__item + .i9-stats__item { border-left: 0; border-top: 1px solid var(--i9-border-soft); padding-top: 16px; }
  .i9-trial, .i9-card--pad, .i9-sol, .i9-feat, .i9-featcard { padding: 16px; }
  .i9-featcard__grid { grid-template-columns: minmax(0, 1fr); }
}

/* 大屏 */
@media (min-width: 1441px) {
  .i9-banner__title { font-size: 48px; }
}

/* CTA 左栏容器（解决方案页与内容页复用已有 .i9-cta__title/__desc/__actions） */
.i9-cta__text { min-width: 0; flex: 1 1 auto; }


/* ====================================================================
   首页动态区块与页面级补充
   --------------------------------------------------------------------
   「产品动态 / 平台公告」由平台 tagdata 注入数据，栏目为空时需要占位，
   此处为占位样式（原先写在 index.html 的内联 style 里，现集中到本文件）。
   ==================================================================== */
.i9-news__empty {
  padding: 26px 4px;
  font-size: var(--i9-fs-sm);
  color: var(--i9-text-4);
  text-align: center;
}

/* 首屏副标题里的分隔点（article_content.html 用于分隔发布时间与阅读量） */
.i9-phero__dot {
  margin: 0 6px;
  color: var(--i9-text-5);
}