/* ============================================================
   NovoOne (Self-hosted) Document Center home page
   Design: 【A】新增 NovoOne 英文网页设计 (Lanhu, 1440px / @2x)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Manrope';
  src: url('./fonts/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --novo-navy: #101f3a;
  --novo-text: #303c42;
  --novo-blue: #006ee1;
  --novo-light-bar: #eef4fb;
}

.novo-container {
  width: 900px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ---------- Header Download App 按钮（按设计稿：蓝底白字 + 下载图标） ---------- */
/* Oxygen 黑色 header 条（.wh_header）在首页被 header-menu 完全遮挡、无可见内容，
   且窄屏下会挤入文档流露出黑色横条，本页直接隐藏 */
.wh_main_page .wh_header {
  display: none !important;
}

/* ---------- Header 按设计稿：高60px、内容宽度与内容区(900px)对齐 ---------- */
.wh_main_page .header-menu .header-menu-inner {
  width: 900px;
  max-width: 100%;
  height: 60px;
  padding: 0;
  box-sizing: border-box;
}

.wh_main_page .header-menu .logo {
  margin: 0;
}

.wh_main_page .header-menu .logo a {
  margin: 0;
  width: 100px;
  height: 30px;
  background-size: 100px auto;
}

.wh_main_page .header-menu .logo::after {
  right: -12px;
  bottom: 4px;
  height: 22px;
}

.wh_main_page .header-menu .content-left .title {
  /* 设计稿：logo 右缘留 11px 到分隔线，分隔线再留 12px 到文字 */
  margin: 0 0 0 24px;
  font-size: 15px;
}

.wh_search_input{
  background: url(../images/search-bg.png) center no-repeat !important;
}

.header-menu .btn-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 137px;
  height: 32px;
  line-height: 1;
  padding: 0 13px 0 17px;
  box-sizing: border-box;
  background-color: var(--novo-blue);
  border-radius: 6px;
  font-size: 13px;
  color: #fff;
  transition: background-color 0.2s;
}

.header-menu .btn-link a::after {
  content: "";
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background: url('../images/novoone-home/icon-download.png') center no-repeat;
  background-size: contain;
}

.header-menu .btn-link a:hover {
  background-color: #005cbf;
  color: #fff;
}

.novo-home-content {
  padding: 0 !important;
  background: #fff !important;
}

/* ============================================================
   Hero
   ============================================================ */
.wh_main_page .wh_search_input.novo-hero-wrap,
.wh_main_page .wh_search_input {
  padding: 0 !important;
  /* header-menu 按设计稿高60px，绝对定位悬浮，hero 预留其高度 */
  margin: 60px 0 0 !important;
  background: none !important;
  background-image: none !important;
  background-size: auto !important;
}

.novo-hero {
  /* 高度跟随底图比例（1440:403），避免 cover 横向裁切显得被放大；
     窄屏内容更高时由内容撑开，底图右锚定保证主体（N logo）可见。
     文字块垂直居中，banner 比内容高时文字不偏上 */
  aspect-ratio: 1440 / 403;
  display: flex;
  align-items: center;
  background: url('../images/novoone-home/hero-bg.jpg') right center / cover no-repeat;
  box-sizing: border-box;
}

.novo-hero .novo-container {
  width: 900px;
}

.novo-hero-title {
  font-family: 'Manrope', 'Open Sans', Arial, sans-serif;
  font-size: 38px;
  line-height: 50px;
  font-weight: 500;
  color: var(--novo-navy);
  margin: 0 0 30px;
  text-align: left;
}

/* 设计稿："NovoOne" 为 SemiBold(600)，其余 Medium(500) */
.novo-hero-brand {
  font-weight: 600;
}

/* ---------- Search bar ---------- */
/* 高于旧规则 .wh_main_page .wh_search_input > #searchForm div 的特异性，全面接管 */
.wh_main_page .wh_search_input #searchForm {
  margin: 0;
}

.wh_main_page .wh_search_input #searchForm div.novo-search-bar {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: 450px !important;
  max-width: 100%;
  height: 50px;
  margin: 0 !important;
  background-color: #fff !important;
  background-image: none !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 2px 10px 0 rgba(16, 31, 58, 0.06);
  padding: 0 8px 0 18px !important;
  box-sizing: border-box;
  overflow: hidden;
}

.novo-search-icon {
  flex-shrink: 0;
  margin-right: 10px;
}

.wh_main_page .wh_search_input #textToSearch.wh_search_textfield,
.wh_main_page .wh_search_input .wh_search_textfield {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12px;
  font-family: 'Open Sans', Arial, sans-serif;
  color: var(--novo-text);
  outline: none;
}

.wh_main_page .wh_search_input .wh_search_textfield::placeholder {
  color: #7a8288;
  opacity: 1;
  /* 覆盖 word-feedback-en.css 的全局 input::placeholder（16px Roboto !important） */
  font-size: 12px !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
}

/* 覆盖 wh-search.css（requirejs 运行时注入）的按钮默认样式 */
.wh_main_page .wh_search_input .wh_search_button {
  position: static !important;
  float: none !important;
  flex-shrink: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 107px !important;
  height: 34px;
  border: none !important;
  border-radius: 8px !important;
  background-color: var(--novo-blue) !important;
  color: #fff !important;
  font-family: 'Open Sans', Arial, sans-serif;
  cursor: pointer;
  transition: background-color 0.2s;
}

.wh_main_page .wh_search_input .wh_search_button:hover {
  background-color: #005cbf !important;
}

/* 恢复按钮文字，去掉图标字体的放大镜 */
.wh_main_page .wh_search_input .wh_search_button > span {
  display: inline !important;
}

.wh_main_page .wh_search_input .wh_search_button:after {
  content: none !important;
}

.wh_main_page .wh_search_input .wh_search_button svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.wh_main_page .wh_search_input .wh_search_button .search_input_text {
  color: #fff;
  font-size: 13.5px;
  line-height: 1;
}

/* ---------- Ask AI bar ---------- */
.novo-ask-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 450px;
  max-width: 100%;
  min-height: 40px;
  margin-top: 16px;
  padding: 6px 16px 6px 18px;
  box-sizing: border-box;
  border-radius: 10px;
  /* 设计稿：左浅右深的浅蓝渐变 */
  background: linear-gradient(90deg, #cfe1f7 0%, #c3d9f6 100%);
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.2s;
}

.novo-ask-bar:hover {
  filter: brightness(0.97);
}

.novo-ask-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: novo-pulse 2s ease-in-out infinite;
}

@keyframes novo-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.3); }
}

.novo-ask-text {
  flex: 1;
  min-width: 0;
  /* 设计稿：11.5px / 行高17 / 字距0.02em */
  font-size: 11.5px;
  line-height: 17px;
  letter-spacing: 0.02em;
  color: var(--novo-navy);
  font-family: 'Open Sans', Arial, sans-serif;
}

.novo-ask-arrow {
  flex-shrink: 0;
}

/* ============================================================
   What's New
   ============================================================ */
.novo-whatsnew {
  display: flex;
  /* 设计稿中 label 与 bar 底边对齐（label 高73、bar 高55） */
  align-items: flex-end;
  margin-top: 28px;
}

.novo-whatsnew-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 280px;
  height: 73px;
  background: url('../images/novoone-home/whats-new-bg.png') center / cover no-repeat;
  text-decoration: none;
}

.novo-whatsnew-label span {
  display: block;
  margin-left: 33px;
  /* 背景图胶囊本体位于画布下半部（上半是钟形图标辉光），
     文字需相对胶囊本体垂直居中，整体下移约 30% 行高 */
  transform: translateY(30%);
  font-family: 'Manrope', 'Open Sans', Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #fff;
  /* text-transform: uppercase; */
}

.novo-whatsnew-bar {
  flex: 1;
  min-width: 0;
  height: 55px;
  margin-left: 0;
  background: var(--novo-light-bar);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  box-sizing: border-box;
}

.novo-whatsnew-bar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-family: 'Open Sans', Arial, sans-serif;
  color: var(--novo-blue);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.novo-whatsnew-bar a:hover {
  text-decoration: underline;
}

.novo-whatsnew-arrow {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  background: url('../images/arrow-right-blue.svg') center no-repeat;
  background-size: contain;
  transform: rotate(-45deg);
}

/* ============================================================
   Sections
   ============================================================ */
.novo-section {
  margin-top: 80px;
}

/* More Resources 为最后一个区块，底部预留 120px */
.novo-container .novo-section:last-child {
  margin-bottom: 120px;
}

.novo-whatsnew + .novo-section {
  margin-top: 64px;
}

.novo-section-title {
  font-family: 'Manrope', 'Open Sans', Arial, sans-serif;
  font-size: 30px;
  line-height: 40px;
  font-weight: 500;
  color: var(--novo-navy);
  text-align: center;
  margin: 0 0 30px;
}

/* ---------- Get Started cards ---------- */
.novo-gs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.novo-gs-card {
  background: #fff;
  border: 1px solid #dfe7f2;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}

.novo-gs-card:hover {
  border-color: #fff;
  box-shadow: 0 10px 28px 0 rgba(16, 31, 58, 0.12);
  transform: translateY(-3px);
}

.novo-gs-img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.novo-gs-body {
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.novo-gs-title {
  font-family: 'Manrope', 'Open Sans', Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--novo-navy);
  margin: 0;
}

.novo-gs-num {
  font-weight: 600;
  /* 设计稿：-36° 线性渐变 蓝→绿 */
  color: #0079f2;
  background: linear-gradient(54deg, #0079f2 15%, #3bd1a6 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.novo-gs-desc {
  font-size: 12px;
  line-height: 20px;
  color: var(--novo-text);
  margin: 12px 0 0;
  font-family: 'Open Sans', Arial, sans-serif;
}

/* ---------- Learn More link ---------- */
.novo-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 13px;
  font-family: 'Open Sans', Arial, sans-serif;
  color: var(--novo-blue);
  text-decoration: none;
  align-self: flex-start;
}

.novo-learn-more::after {
  content: "";
  width: 9px;
  height: 9px;
  background: url('../images/arrow-right-blue.svg') center no-repeat;
  background-size: contain;
  transform: rotate(-45deg);
  transition: transform 0.2s;
}

.novo-learn-more:hover {
  color: #005cbf;
}

.novo-learn-more:hover::after {
  transform: rotate(-45deg) translate(2px, -2px);
}

/* ---------- Administrator Guide cards ---------- */
.novo-admin-card {
  height: 310px;
  border-radius: 16px;
  overflow: hidden;
  padding: 162px 24px 0;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  transition: transform 0.25s;
}

.novo-admin-card:hover {
  transform: scale(1.02);
}

.novo-admin-card--platform {
  background-image: url('../images/novoone-home/admin-card-platform.png');
}

.novo-admin-card--tenant {
  background-image: url('../images/novoone-home/admin-card-tenant.png');
}

.novo-admin-card--api {
  background-image: url('../images/novoone-home/admin-card-api.png');
}

.novo-admin-title {
  font-family: 'Manrope', 'Open Sans', Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--novo-navy);
  margin: 0;
}

.novo-admin-desc {
  font-size: 12px;
  line-height: 20px;
  color: var(--novo-text);
  margin: 10px 0 0;
  font-family: 'Open Sans', Arial, sans-serif;
}

.novo-admin-card .novo-learn-more {
  margin-top: 16px;
}

/* ---------- Client Guide cards ---------- */
.novo-client-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.novo-client-card {
  position: relative;
  height: 412px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--novo-light-bar);
  text-align: center;
  padding-top: 31px;
  box-sizing: border-box;
}

.novo-client-pill {
  display: inline-block;
  height: 38px;
  line-height: 38px;
  padding: 0 25px;
  background: #fff;
  border-radius: 19px;
  font-family: 'Manrope', 'Open Sans', Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--novo-navy);
}

.novo-client-desc {
  font-size: 12px;
  line-height: 20px;
  color: var(--novo-text);
  max-width: 380px;
  margin: 13px auto 0;
  font-family: 'Open Sans', Arial, sans-serif;
}

.novo-client-shot {
  /* 设计稿：配图贴卡片底部（手机图居中、笔记本图贴左），由链接浮层压在图上 */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.novo-client-img--mobile {
  display: block;
  width: 222px;
  max-width: 80%;
  margin: 0 auto;
}

.novo-client-img--web {
  display: block;
  width: 385px;
  max-width: 92%;
  margin: 0;
}

.novo-client-links {
  position: absolute;
  left: 21px;
  right: 21px;
  bottom: 29px;
  /* 设计稿磨砂层带蓝灰调：压在纯底色上约为 #e1e9f3 */
  background: rgba(222, 232, 243, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 13px 24px 13px 26px;
}

.novo-client-link,
.novo-client-link:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  font-family: 'Manrope', 'Open Sans', Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--novo-navy);
  text-decoration: none;
}

.novo-client-link:hover {
  color: var(--novo-blue);
}

.novo-client-link span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.novo-client-divider {
  height: 1px;
  /* 设计稿为纯白分割线 */
  background: #ffffff;
  margin: 9px 0;
}

.novo-circle-btn {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--novo-blue);
  background: transparent url('../images/novoone-home/arrow-blue.png') center no-repeat;
  background-size: 9px 9px;
  box-sizing: border-box;
  transition: background-color 0.2s, background-image 0.2s;
}

.novo-client-link:hover .novo-circle-btn {
  border-color: var(--novo-blue);
  background-color: var(--novo-blue);
  background-image: url('../images/novoone-home/arrow-white.png');
}

/* ---------- More Resources ---------- */
.novo-res-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  align-items: start;
  margin-top: 56px;
}

.novo-res-item {
  text-align: center;
  text-decoration: none;
  padding: 0 16px;
}

.novo-res-icon {
  display: block;
  width: 85px;
  height: 65px;
  margin: 0 auto;
}

.novo-res-title {
  font-family: 'Manrope', 'Open Sans', Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--novo-navy);
  margin-top: 13px;
  transition: color 0.2s;
}

.novo-res-desc {
  font-size: 12px;
  line-height: 18px;
  color: var(--novo-text);
  margin-top: 8px;
  font-family: 'Open Sans', Arial, sans-serif;
}

.novo-res-item:hover .novo-res-title {
  color: var(--novo-blue);
}

.novo-res-divider {
  width: 1px;
  height: 118px;
  background: #e2e9f2;
  justify-self: center;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .novo-container {
    width: auto;
    padding: 0 20px;
  }

  .novo-hero {
    padding: 32px 0;
  }

  .novo-gs-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .novo-res-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 36px;
  }

  .novo-res-divider {
    width: 160px;
    height: 1px;
  }
}

@media (max-width: 768px) {
  /* 覆盖 novoone.css 窄屏下 body{width:fit-content} 导致的横向溢出 */
  body.wh_main_page {
    width: auto;
    min-width: 100%;
    overflow-x: hidden;
  }

  /* 窄屏下 header 两行换行：高度放开，hero 让位按实际高度 */
  .wh_main_page .header-menu .header-menu-inner {
    height: auto;
    padding: 8px 0;
  }

  .wh_main_page .wh_search_input {
    margin-top: 90px !important;
  }

  .novo-client-grid {
    grid-template-columns: 1fr;
  }

  .novo-client-card {
    max-width: 440px;
    margin: 0 auto;
    width: 100%;
  }

  .novo-whatsnew {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .novo-whatsnew-label {
    width: 220px;
    height: 58px;
  }

  .novo-whatsnew-label span {
    margin-left: 24px;
    font-size: 15px;
  }

  .novo-whatsnew-bar {
    height: 48px;
    border-radius: 24px;
  }

  .novo-whatsnew-bar a {
    white-space: normal;
    text-align: center;
    font-size: 13px;
    line-height: 18px;
  }
}

@media (max-width: 560px) {
  .novo-hero {
    padding: 22px 0;
  }

  .novo-hero-title {
    font-size: 26px;
    line-height: 36px;
    margin-bottom: 22px;
  }

  .novo-search-bar {
    height: 46px;
    padding-left: 14px !important;
    border-radius: 9px !important;
  }

  .wh_main_page .wh_search_input .wh_search_button {
    width: 92px !important;
  }

  .wh_main_page .wh_search_input .wh_search_button .search_input_text {
    font-size: 12.5px;
  }

  .novo-ask-bar {
    margin-top: 12px;
  }

  .novo-ask-text {
    font-size: 11px;
    line-height: 16px;
  }

  .novo-section {
    margin-top: 56px;
  }

  .novo-section-title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 22px;
  }

  .novo-admin-card {
    height: auto;
    min-height: 280px;
    padding: 150px 20px 20px;
  }

  .novo-client-card {
    height: auto;
    padding-bottom: 20px;
  }

  .novo-client-links {
    position: static;
    margin: 18px 16px 0;
  }

  .novo-client-shot {
    position: static;
    margin-top: 20px;
  }

  .novo-client-img--web {
    margin: 0 auto;
  }

  .novo-gs-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   分辨率整体等比缩放（设计稿 1440 为 1x）
   1440–1849 : 1 倍（设计原稿）
   1850–2479 : ×4/3（即 1920 设计，Header 80px、描述 16px、卡片 373px…）
   2480 以上 : ×16/9（即 2560 设计）
   断点预留了滚动条宽度；zoom 由现代浏览器在布局阶段应用，文字清晰
   ============================================================ */
@media (min-width: 1850px) {
  body.wh_main_page {
    zoom: 1.3334;
  }
}

@media (min-width: 2480px) {
  body.wh_main_page {
    zoom: 1.7778;
  }
}