a:hover {
  color: #9747ff;
}

::-webkit-scrollbar {
  width: 10px;
  background-color: #fff;
}

::-webkit-scrollbar-thumb {
  height: 3rem;
  background-color: gray;
}

.carousel-dark .carousel-indicators [data-bs-target] {
  background-color: #fff !important;
}

.carousel-dark .carousel-control-next-icon,
.carousel-dark .carousel-control-prev-icon {
  filter: invert(0) grayscale(100) !important;
}

.underline-current {
  color: rgba(255, 255, 255, 1) !important;
  font-weight: 600 !important;
}

.linkit {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
}

.carousel-caption h5 {
  font-size: 0.8rem;
  font-weight: bold;
  color: #ffffff;
}

.under-current a {
  font-weight: 600 !important;
}

.header-menu {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
}

/* 导航内容宽度上限 1440px：窄屏时铺满视口（含响应式内边距）；当视口宽度超过 1440px 后，
   容器居中、不再向左右两侧扩展。外层 <nav> 仍是全宽，背景与高斯模糊继续铺满整个视口。 */
nav > .container {
  width: 100% !important;
  max-width: 1440px !important;
  height: 100%;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-left: clamp(16px, 4vw, 64px) !important;
  padding-right: clamp(16px, 4vw, 64px) !important;
}

.header-menu nav {
  height: 84px;
}

nav {
  background-color: #1d1d1f;
}

nav .container .row {
  height: 100%;
  min-height: 0;
  justify-content: space-between;
  color: #fff;
}

nav .container .row .col-md-3 {
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}

nav .container .row .col-md-3 img {
  height: 48px;
  width: 48px;
}

nav .container .row .col-md-3 span {
  font-size: 1.06666667rem;
  /* 品牌字样作为整页标题，加粗到 700，避免过瘦（与页脚品牌字重一致）。 */
  font-weight: 700;
  margin-left: 15px;
}

nav .container .row .col-md-3 .return-home:hover {
  color: #fff !important;
}

nav .container .row .col-md-8 {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

nav .container .row .col-md-8 > ul.underline {
  padding: 0 !important;
  margin: 0 !important;
  width: auto;
  display: inline-flex;
  height: 100%;
  flex: 0 0 auto;
  gap: 14px;
  justify-content: flex-end;
  align-items: center;
}

nav .container .row .col-md-8 ul .dropbtn {
  position: relative;
}

nav .container .row .col-md-8 ul .dropbtn .linkit:hover {
  cursor: pointer;
}

nav .container .row .col-md-8 ul .dropbtn .linkit::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

nav .container .row .col-md-8 ul li {
  font-size: 0.55rem;
  margin-left: 0.4rem;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}

nav .container .row .col-md-8 > ul.underline > li {
  margin-left: 0;
}

/* TranslatePress serves RTL languages from the same English-site templates.
   Keep the markup shared and mirror only directional layout details. */
html[dir="rtl"] nav .container .row .col-md-3 {
  justify-content: right;
}

html[dir="rtl"] nav .container .row .col-md-3 span {
  margin-right: 15px;
  margin-left: 0;
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="rtl"] nav .container .nav-ico .offcanvas-title span {
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="rtl"] nav .container .row .col-md-8 {
  justify-content: flex-start;
}

html[dir="rtl"] nav .container .row .col-md-8 ul .dropbtn .linkit::after,
html[dir="rtl"] nav .container .row .col-md-8 ul .menu-lang-container li.menu-item-2984 .current::after {
  margin-right: 0.255em;
  margin-left: 0;
}

html[dir="rtl"] nav .container .row .col-md-8 .drop-menu .drop-title,
html[dir="rtl"] nav .container .row .col-md-8 .drop-menu .dropdown-item,
html[dir="rtl"] nav .container .row .col-md-8 ul ul.sub-menu li,
html[dir="rtl"] nav .container .row .col-md-8 ul ul.sub-menu li a {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] nav .container .row .col-md-8 .drop-menu .drop-catgory,
html[dir="rtl"] nav .container .row .col-md-8 .drop-menu .dropdown-items {
  align-items: stretch;
}

html[dir="rtl"] nav .container .row .col-md-8 .drop-menu .sub-item-box {
  padding-right: 24px;
  padding-left: 0;
}

html[dir="rtl"] nav .container .row .col-md-8 .drop-menu .sub-item-box::before {
  right: 8px;
  left: auto;
}

nav .container .row .col-md-8 ul li:nth-child(2) {
  min-width: 70px;
}

nav .container .row .col-md-8 ul li a {
  font-weight: 400;
  width: fit-content;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

nav .container .row .col-md-8 .drop-menu ul li a {
  font-weight: 400;
  width: 100%;
  text-align: left;
  color: rgba(255, 255, 255, 0.7);
}

nav .container .row .col-md-8 ul li a:hover {
  color: #fff;
  font-weight: 600;
}

nav .container .row .col-md-8 ul li a .log-box {
  border-radius: 20px 20px 20px 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  height: auto;
  padding: 2px;
  min-width: 4rem;
  justify-content: center;
  align-items: center;
}

nav .container .row .col-md-8 ul li a .log-box div {
  padding: 5px;
}

nav .container .row .col-md-8 ul .menu-lang-container {
  position: relative;
}

/* wp_nav_menu adds a nested list for the language switcher. Reset its
   browser-default indentation so it aligns with the top-level navigation. */
nav .container .row .col-md-8 > ul.underline > li:last-child .menu-lang-container > ul {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

nav .container .row .col-md-8 ul .menu-lang-container li.menu-item-2984 {
  margin-left: 0;
}

nav
  .container
  .row
  .col-md-8
  ul
  .menu-lang-container
  li.menu-item-2984
  .current {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  background: #343436;
  border-radius: 20px 20px 20px 20px;
  width: 5.5rem;
  /* width: 5rem; */
  padding: 5.14px 0;
  height: auto;
  line-height: 1rem;
  text-align: center;
  /* display: inline-block; */
  color: rgba(255, 255, 255, 0.7) !important;
}

nav
  .container
  .row
  .col-md-8
  ul
  .menu-lang-container
  li.menu-item-2984
  .current::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

nav .container .row .col-md-8 ul ul.sub-menu {
  position: absolute;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-direction: column;
  background-color: #1d1d1f;
  width: max-content !important;
  min-width: 5.5rem;
  max-width: calc(100vw - 2rem);
  display: none;
  z-index: 1000;
  overflow-y: auto;
  height: auto;
  max-height: 20rem;
  top: 1.35rem;
}

nav .container .row .col-md-8 ul ul.sub-menu li {
  margin-left: 0;
  line-height: 40px;
  min-height: 40px;
  width: 100%;
  margin-top: 5px;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
}

nav .container .row .col-md-8 ul ul.sub-menu li:hover {
  cursor: none;
}

nav .container .row .col-md-8 ul ul.sub-menu li a {
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  text-align: left;
  white-space: nowrap;
}

nav .container .row .col-md-8 ul ul.sub-menu li:hover {
  background-color: #4c5cf0;
}

/* Match the desktop language dropdown surface and row rhythm to the
   Products / Features dropdowns while keeping its content-driven width. */
nav .container .row .col-md-8 ul .menu-lang-container ul#menu-lang > li.menu-item-2984 > ul.sub-menu {
  display: block;
  width: 200px !important;
  min-width: 0;
  padding: 16px 20px 24px;
  max-height: 17rem;
  top: calc(100% - 1px);
  right: 0;
  left: auto;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-6px) !important;
  pointer-events: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #7a62f0 transparent;
  overscroll-behavior: contain;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

nav .container .row .col-md-8 ul .menu-lang-container ul#menu-lang > li.menu-item-2984.menu-open > ul.sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto;
}

nav .container .row .col-md-8 ul .menu-lang-container ul.sub-menu::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

nav .container .row .col-md-8 ul .menu-lang-container ul.sub-menu::-webkit-scrollbar-track {
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

nav .container .row .col-md-8 ul .menu-lang-container ul.sub-menu::-webkit-scrollbar-thumb {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: #7a62f0;
}

nav .container .row .col-md-8 ul .menu-lang-container ul.sub-menu li {
  margin-top: 20px;
  min-height: auto;
  line-height: 20px;
}

nav .container .row .col-md-8 ul .menu-lang-container ul.sub-menu li:first-child {
  margin-top: 0;
}

nav .container .row .col-md-8 .drop-menu {
  border-radius: 4px;
  position: absolute;
  background-color: #1d1d1f;
  width: fit-content;
  /* 作为独立浮层与导航栏拉开 10px 间距（四角小圆角 + 四周阴影见下方视觉规则）。 */
  top: calc(100%);
  left: 50%;
  z-index: 1000;
  padding: 0;
  /* 展开/收起过渡（参考 pigeoncast）：默认隐藏态，用 opacity + 位移 + visibility 过渡，
     不再用 display 瞬间切换（JS 改为切换 .menu-open 类）。水平居中的 translateX(-50%)
     与下拉位移 translateY 合并写入同一个 transform，避免相互覆盖。 */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

nav .container .row .col-md-8 .dropbtn.menu-open > .drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

nav .container .row .col-md-8 .drop-menu .menu-group {
  display: table-cell;
  position: relative;
  vertical-align: top;
  margin: 0;
  padding: 0 24px 0 0;
}

nav .container .row .col-md-8 .drop-menu .menu-group:last-child {
  padding-right: 0;
}

/* Feature-only footer action from Figma dropdown component 401:14102. */
nav .container .row .col-md-8 .feature-drop-menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto 38px;
  gap: 20px 24px;
  width: min(960px, calc(100vw - 32px)) !important;
  padding: 16px 24px 24px;
}

nav .container .row .col-md-8 .feature-drop-menu > .menu-group {
  display: block;
  width: 100%;
  min-width: 0;
  padding-right: 0;
}

nav .container .row .col-md-8 .feature-drop-menu .dropdown-item {
  white-space: normal;
  overflow-wrap: break-word;
}

nav .container .row .col-md-8 .feature-drop-menu > .nav-full-feature-row {
  grid-column: 1 / -1;
}

.nav-full-feature-row {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-full-feature-link {
  display: flex;
  width: 100%;
  height: 38px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 20px;
  border-radius: 20px;
  color: #181818 !important;
  background: #f8f7fe;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease;
}

.nav-full-feature-link:hover {
  color: #6f58ea !important;
  background: #f1eefc;
}

.nav-full-feature-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  background-color: currentColor;
  -webkit-mask: url("../images/Home/header/full-feature-arrow.svg") center / 15px 14.1px no-repeat;
  mask: url("../images/Home/header/full-feature-arrow.svg") center / 15px 14.1px no-repeat;
}

.nav-full-feature-icon img {
  display: none;
}

/* Product, Feature and Language items use color alone for hover feedback. */
nav .container .row .col-md-8 .drop-menu .item-box,
nav .container .row .col-md-8 .drop-menu .sub-item-box,
nav .container .row .col-md-8 ul ul.sub-menu li,
nav .container .row .col-md-8 ul ul.sub-menu li a {
  transition: color 160ms ease;
}

nav .container .row .col-md-8 .drop-menu .item-box:not(.inactivate-item-box):hover,
nav .container .row .col-md-8 .drop-menu .sub-item-box:hover,
nav .container .row .col-md-8 ul ul.sub-menu li:hover {
  background: transparent !important;
  --item-color: #6f58ea;
}

nav .container .row .col-md-8 .drop-menu .item-box:not(.inactivate-item-box):hover > a,
nav .container .row .col-md-8 .drop-menu .sub-item-box:hover > a,
nav .container .row .col-md-8 ul ul.sub-menu li:hover > a {
  color: #6f58ea !important;
  background: transparent !important;
}

nav .container .row .col-md-8 .drop-menu .sub-item-box:hover::before {
  color: #6f58ea;
}

nav .container .nav-ico .navbar-nav .feature-dropdown-menu > .nav-full-feature-row {
  margin-top: 20px;
}

nav .container .nav-ico .navbar-nav .feature-dropdown-menu .nav-full-feature-link {
  height: 38px;
  padding: 8px 20px;
  border-radius: 20px;
  color: #181818;
  background: #f8f7fe;
  font-size: 16px;
  line-height: 22px;
}

nav .container .nav-ico .navbar-nav .dropdown-menu li:hover,
nav .container .nav-ico .navbar-nav .dropdown-menu .dropdown-item:hover,
nav .container .nav-ico .navbar-nav #lang-drop-menu li:hover,
nav .container .nav-ico .navbar-nav #lang-drop-menu a:hover {
  color: #6f58ea;
  background: transparent;
}

nav .container .row .col-md-8 .drop-menu .menu-divider::after {
  content: "";
  position: absolute;
  top: 15%;
  right: 0;
  width: 1px;
  height: 70%;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

nav .container .row .col-md-8 .drop-menu .drop-catgory {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0;
}

nav .container .row .col-md-8 .drop-menu .drop-title {
  /* 字号与导航栏选项（约 14px）协调：标题作为分组头略大于条目。 */
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: #181818;
  margin-bottom: 20px;
  white-space: nowrap;
}

nav .container .row .col-md-8 .drop-menu .dropdown-items {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 20px;
}

nav .container .row .col-md-8 .drop-menu .item-box {
  --item-color: #393642;
  --item-fontWeight: 400;
  font-size: 0.45rem;
  margin: 0;
  width: 100%;
  min-width: 5.5rem;
  justify-content: start;
  line-height: 1.2rem;
  text-indent: 0;
}

nav .container .row .col-md-8 .drop-menu .sub-item-box {
  --item-color: #666;
  --item-fontWeight: 400;
  font-size: 0.45rem;
  margin: 0;
  width: 100%;
  justify-content: start;
  line-height: 1.2rem;
  /* 二级项缩进并留出项目符号位置（对齐设计稿的「• From Phone」样式） */
  padding-left: 24px;
  position: relative;
  display: flex;
  list-style: none;
}

nav .container .row .col-md-8 .drop-menu .sub-item-box::before {
  content: "\2022";
  position: absolute;
  left: 8px;
  color: #666;
}

nav .container .row .col-md-8 .drop-menu .inactivate-item-box {
  background-color: transparent !important;
  --item-color: #181818 !important;
  cursor: not-allowed;
}

/* The unavailable "Send Files to TV" entry is a span rather than a link.
   Give it the same logical alignment as the surrounding menu links in both
   LTR and RTL languages instead of inheriting the centered nav-item style. */
nav .container .row .col-md-8 .drop-menu .inactivate-item-box > .dropdown-item {
  text-align: start;
}

nav .container .row .col-md-8 .drop-menu .item-box:hover,
nav .container .row .col-md-8 .drop-menu .sub-item-box:hover {
  background-color: #9747ff;
  /* --item-fontWeight: 600; */
}

nav .container .row .col-md-8 .drop-menu .item-box:active,
nav .container .row .col-md-8 .drop-menu .sub-item-box:active {
  --item-color: #9747ff;
  background-color: transparent;
}

nav .container .row .col-md-8 .drop-menu .item-box a,
nav .container .row .col-md-8 .drop-menu .sub-item-box a,
nav .container .row .col-md-8 .drop-menu .item-box > .dropdown-item {
  color: var(--item-color);
  font-weight: var(--item-fontWeight);
  padding-left: 0;
  padding-right: 0;
}

nav .container .row .col-md-8 .drop-menu .item-box {
  list-style: none;
}

nav .container .row .col-md-8 .drop-menu .item-box .notPublished-item {
  color: #878787;
  display: flex;
  align-items: center;
}

nav .container .nav-ico {
  display: flex;
  display: none;
  align-items: center;
  justify-content: center;
}

/* Keep the mobile menu control independent from the Bootstrap icon font.
   Older iOS Safari may skip the asynchronously loaded icon stylesheet. */
nav .container .nav-ico .navbar-toggler {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 0;
  color: #181818;
}

nav .container .nav-ico .navbar-menu-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 18px;
  flex: 0 0 24px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

nav .container .nav-ico .navbar-menu-icon::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  content: "";
  transform: translateY(-50%);
}

/* ========================================================================
   窄屏（<768px）汉堡菜单 —— 浅色主题，对齐 Figma 设计稿 (node 401-14062)。
   白底深色文字；Products / Features 展开为浅灰圆角「内联手风琴」面板。
   原深色配色（面板 #000、子菜单 #333、行内白字）已从 header.php 一并移除。
   ======================================================================== */

/* 面板整体白底（Bootstrap 默认即 #fff，此处显式声明以防回归） */
nav .container .nav-ico .offcanvas {
  background-color: #fff;
}

/* 顶部 Logo 栏 */
nav .container .nav-ico .offcanvas-header {
  padding: 20px 25px;
}

nav .container .nav-ico .offcanvas-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  color: #181818;
  font-size: 24px;
  font-weight: 600;
}

nav .container .nav-ico .offcanvas-title img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* 主体：纵向排列，一级条目间距 24px，可滚动 */
nav .container .nav-ico .offcanvas-body {
  padding: 30px 25px 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #7a62f0 transparent;
}

/* FAQ surfaces are shared across Home, Products and Feature templates. Keep
   page-specific typography and spacing, but use the approved pale surface for
   both the question and the expanded answer. */
html body section.faq-container[data-faq-page] .faq-question {
  background-color: #fbfafe;
}

html body section.faq-container[data-faq-page] .faq-answer {
  background-color: #fbfafe;
}

nav .container .nav-ico .offcanvas-body::-webkit-scrollbar {
  width: 5px;
}

nav .container .nav-ico .offcanvas-body::-webkit-scrollbar-track {
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

nav .container .nav-ico .offcanvas-body::-webkit-scrollbar-thumb {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: #7a62f0;
}

nav .container .nav-ico .offcanvas-body .navbar-nav {
  width: 100%;
  gap: 24px;
  justify-content: flex-start !important;
}

/* 一级导航条目：深色 18px（替换旧的 50px 深色行样式） */
nav .container .nav-ico .navbar-nav .nav-item {
  height: auto;
  padding-left: 0;
  color: #181818;
  font-size: 18px;
  line-height: 26px;
  text-align: left;
}

nav .container .nav-ico .navbar-nav .nav-item > a,
nav .container .nav-ico .navbar-nav .nav-item > .nav-link {
  display: flex;
  width: 100%;
  min-height: 44px;
  height: auto;
  align-items: center;
  padding: 9px 12px;
  border-radius: 8px;
  box-sizing: border-box;
  color: #181818;
  font-size: 18px;
  transition: color 150ms ease, background-color 150ms ease;
}

/* 首字母大写与同级的 Home / Products / Download 保持一致。这里用 text-transform
   而不是把 header.php 里的字面量改成 "Language"：该字面量是 TranslatePress 的
   翻译键，已存有 fr=langue、ja=言語、th=ภาษา 等译文，改动字面量会让这些语言退回
   英文原文。text-transform 只影响呈现，键不变，且对中日韩/泰文是空操作。 */
nav .container .nav-ico .navbar-nav #lang-drop-btn {
  display: flex !important;
  width: 100%;
  min-height: 44px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 8px;
  box-sizing: border-box;
  text-transform: capitalize;
}

nav .container .nav-ico .navbar-nav #lang-drop-btn::after {
  transform-origin: center;
  transition: transform 180ms ease;
}

nav .container .nav-ico .navbar-nav #lang-drop-btn.menu-open::after {
  transform: rotate(180deg);
}

/* Products / Features 展开面板：浅灰圆角内联手风琴。
   position:static 让面板进入文档流、把后续条目往下推（符合设计稿手风琴形态）；
   !important 用于覆盖 Bootstrap Popper 写入行内的 position/transform/inset。 */
nav .container .nav-ico .navbar-nav .dropdown-menu {
  position: static !important;
  display: block !important;
  inset: auto !important;
  transform: translateY(-6px) !important;
  float: none;
  width: 100%;
  max-height: 0;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 240ms ease, margin 180ms ease, padding 180ms ease,
    opacity 180ms ease, transform 180ms ease, visibility 180ms ease, background-color 180ms ease;
}

nav .container .nav-ico .navbar-nav .dropdown-menu.show {
  max-height: var(--mobile-menu-height, 2400px);
  margin-top: 8px;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.05);
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
  pointer-events: auto;
}

nav .container .nav-ico .navbar-nav .nav-link.dropdown-toggle::after {
  transform-origin: center;
  transition: transform 180ms ease;
}

nav .container .nav-ico .navbar-nav .nav-link.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* 面板内分组标题（header.php 中带行内 font-weight:bold 的 div）：加粗 20px */
nav .container .nav-ico .navbar-nav .dropdown-menu > div[style*="bold"] {
  margin: 30px 0 16px !important;
  padding-left: 0 !important;
  color: #181818;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

nav .container .nav-ico .navbar-nav .dropdown-menu > div[style*="bold"]:first-child {
  margin-top: 0 !important;
}

/* 面板内条目：常规 16px 深色，去掉旧的 50px 行高与深色浮层配色 */
nav .container .nav-ico .navbar-nav .dropdown-menu li {
  height: auto;
  margin-top: 12px;
  line-height: 22px;
}

nav .container .nav-ico .navbar-nav .dropdown-menu .dropdown-item {
  height: auto;
  padding: 0;
  color: #181818;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  white-space: normal;
  background: transparent;
}

nav .container .nav-ico .navbar-nav .dropdown-menu li:hover,
nav .container .nav-ico .navbar-nav .dropdown-menu .dropdown-item:hover {
  color: #9747ff;
  background: transparent;
}

/* Keep keyboard focus visible, and retain a clear selected state while a
   collapsible section is expanded on touch. */
nav .container .nav-ico .offcanvas .navbar-nav .nav-item > a:focus-visible,
nav .container .nav-ico .offcanvas .navbar-nav .nav-item > .nav-link:focus-visible,
nav .container .nav-ico .offcanvas .navbar-nav #lang-drop-btn:focus-visible,
nav .container .nav-ico .offcanvas .navbar-nav .dropdown-item:focus-visible {
  border-radius: 8px;
  outline: 2px solid #7a62f0;
  outline-offset: 4px;
  color: #7a62f0;
  background: #f7f6ff;
}

nav .container .nav-ico .offcanvas .navbar-nav .nav-link[aria-expanded="true"],
nav .container .nav-ico .offcanvas .navbar-nav #lang-drop-btn.menu-open {
  border-radius: 8px;
  color: #7a62f0;
  background: #f7f6ff;
}

/* Products 图标项：图标尺寸与文字对齐 */
/* Mobile same-tab navigation behaves like an async router button: retain the
   chosen row and show activity until the destination document takes over. */
@keyframes mobile-nav-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

nav .container .nav-ico .offcanvas .navbar-nav a.is-nav-loading {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  color: #7a62f0 !important;
  background: #f7f6ff !important;
  border-radius: 8px;
  cursor: wait;
  pointer-events: none;
}

nav .container .nav-ico .offcanvas .navbar-nav a.is-nav-loading::after {
  position: absolute;
  right: 20px;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-left: 0;
  border: 2px solid rgba(122, 98, 240, 0.28);
  border-top-color: #7a62f0;
  border-radius: 50%;
  content: "";
  animation: mobile-nav-loading-spin 650ms linear infinite;
}

nav .container .nav-ico .offcanvas .navbar-nav .dropdown-menu a.is-nav-loading {
  min-height: 36px;
  padding: 7px 0;
}

@media (prefers-reduced-motion: reduce) {
  nav .container .nav-ico .offcanvas .navbar-nav a.is-nav-loading::after {
    animation-duration: 1.4s;
  }
}

nav .container .nav-ico .navbar-nav .dropdown-menu .dropdown-item img {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

/* “Share Files”下的二级项（From Phone / From PC/Mac）：次级灰 #666，带项目符号缩进 */
nav .container .nav-ico .navbar-nav .dropdown-menu > div[style*="flex"] {
  position: relative;
  margin-top: 10px;
  padding-left: 24px;
}

nav .container .nav-ico .navbar-nav .dropdown-menu > div[style*="flex"]::before {
  content: "\2022";
  position: absolute;
  left: 8px;
  color: #666;
}

nav .container .nav-ico .navbar-nav .dropdown-menu > div[style*="flex"] .dropdown-item {
  color: #666;
}

/* Language uses the same inline, light-gray dropdown panel as Products / Features. */
nav .container .nav-ico .navbar-nav #lang-drop-menu {
  position: static !important;
  display: block !important;
  width: 100%;
  max-height: 0;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 20px;
  color: #181818;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  overflow: hidden;
  pointer-events: none;
  transition: max-height 240ms ease, margin 180ms ease, padding 180ms ease,
    opacity 180ms ease, transform 180ms ease, visibility 180ms ease, background-color 180ms ease;
}

nav .container .nav-ico .navbar-nav #lang-drop-btn.menu-open + #lang-drop-menu {
  max-height: calc(100vh - 220px);
  max-height: min(var(--lang-menu-height, 1200px), calc(100dvh - 220px));
  margin-top: 8px;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.05);
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #7a62f0 transparent;
  pointer-events: auto;
}

nav .container .nav-ico .navbar-nav #lang-drop-menu::-webkit-scrollbar {
  width: 5px;
}

nav .container .nav-ico .navbar-nav #lang-drop-menu::-webkit-scrollbar-track {
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

nav .container .nav-ico .navbar-nav #lang-drop-menu::-webkit-scrollbar-thumb {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: #7a62f0;
}

nav .container .nav-ico .navbar-nav #lang-drop-menu .menu-lang-mo-container,
nav .container .nav-ico .navbar-nav #lang-drop-menu ul {
  width: 100%;
  margin: 0;
  padding: 0 !important;
  list-style: none;
}

nav .container .nav-ico .navbar-nav #lang-drop-menu .menu-lang-mo-container {
  min-height: 0;
  overflow: hidden;
}

/* The mobile trigger already labels this section, so expose the same submenu
   entries shown on desktop and hide the duplicated current-language row. */
nav .container .nav-ico .navbar-nav #lang-drop-menu > div > ul.menu > li > a {
  display: none;
}

nav .container .nav-ico .navbar-nav #lang-drop-menu ul.sub-menu {
  position: static;
  display: block !important;
  width: 100% !important;
  min-width: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
  background: transparent;
}

nav .container .nav-ico .navbar-nav .resource-dropdown-menu li:first-child {
  margin-top: 0;
}

nav .container .nav-ico .navbar-nav #lang-drop-menu li {
  height: auto;
  margin-top: 12px;
  line-height: 22px;
}

nav .container .nav-ico .navbar-nav #lang-drop-menu li:first-child {
  margin-top: 0;
}

nav .container .nav-ico .navbar-nav #lang-drop-menu a {
  display: block;
  height: auto;
  padding: 0;
  color: #181818;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  white-space: normal;
  background: transparent;
}

nav .container .nav-ico .navbar-nav #lang-drop-menu li:hover,
nav .container .nav-ico .navbar-nav #lang-drop-menu a:hover {
  color: #9747ff;
  background: transparent;
}

/* 旧版语言浮层：当前 nav-ico 未使用，保留选择器并改为浅色以防回归 */
nav .container .nav-ico .drop-list {
  position: absolute;
  background-color: #fff;
  width: 150px;
  margin-top: 44px !important;
  margin-left: -30px !important;
  text-align: center;
  display: none;
}

nav .container .nav-ico .drop-list li {
  margin-left: 0 !important;
  margin-top: 12px;
}

nav .container .nav-ico .drop-list li:hover {
  color: #9747ff;
}

banner .banner-state {
  height: 14rem;
  background: linear-gradient(180deg, #ffffff 0%, #e4e4e6 100%);
  opacity: 1;
  filter: blur(undefinedpx);
}

banner .banner-state .container {
  height: 100%;
}

banner .banner-state .container .row {
  flex-direction: row-reverse;
}

banner .banner-state .container div {
  height: 100%;
}

banner .banner-state .container .col-md-7 {
  padding-top: 2.5rem;
  padding-bottom: 3.33333333rem;
  z-index: 10;
}

@media screen and (min-width: 768px) {
  banner .banner-state .container .col-md-7 h1 {
    max-width: 24rem;
  }
}

banner .banner-state .container .col-md-7 button {
  width: 14.33333333rem;
  height: 3.3rem;
  font-size: 0.9rem;
  background: linear-gradient(90deg, #d125a8 0%, #4c5cf0 51%, #d125a8 100%);
  border-radius: 1.66666667rem;
  opacity: 1;
  border: none;
  background-size: 200% 100%;
  cursor: pointer;
  transition: 0.5s;
  background-size: 200% auto;
}

banner .banner-state .container .col-md-7 button:hover {
  background-position: right center;
}

banner .banner-state .container .col-md-7 button a:hover {
  color: #fff;
}

banner .banner-state .container .col-md-5 {
  position: relative;
}

banner .banner-state .banner-state-img {
  position: absolute;
  right: 0;
  top: -1rem;
  width: 25.2rem;
  height: 16.2rem;
}

.banner-icons {
  height: 8.33333333rem;
  background: #f1f1f2;
}

.banner-icons .container {
  height: 100%;
}

.banner-icons .container .row {
  height: 100%;
}

.banner-icons .container .row ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}

.banner-icons .container .row ul li {
  width: 4.66666667rem;
  height: 4.66666667rem;
  border-radius: 10px;
  margin-right: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-icons .container .row ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.banner-icons .container .row ul li span {
  font-size: 0.66666667rem;
  font-weight: 400;
  color: #181818;
}

.banner-icons .container .row ul li:hover {
  background-color: #fff;
  cursor: pointer;
}

.banner-icons .container .row .context {
  width: 100% !important;
  display: none;
}

.device {
  height: auto;
  background-color: #000;
}

.device .container {
  height: fit-content;
}

.device .container .row {
  height: fit-content;
  color: #fff;
}

.device .container .row .col-md-12 {
  height: 9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 1.96666667rem 5.66666667rem 2.73333333rem;
}

.device .container .row .col-md-12 span {
  font-size: 1.4rem;
  line-height: 2rem;
  text-align: center;
}

.device .container .row .col-md-7,
.device .container .row .col-md-5 {
  height: fit-content;
}

.device .container .row .col-md-7 img,
.device .container .row .col-md-5 img {
  width: 100%;
  height: auto;
}

.device .container .row .col-md-7 p,
.device .container .row .col-md-5 p {
  font-size: 1.4rem;
  font-weight: bold;
  color: #ffffff;
  line-height: 60px;
}

.device .container .row .col-md-7 span,
.device .container .row .col-md-5 span {
  font-size: 0.66666667rem;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.06666667rem;
}

.device .container .row .col-md-5 {
  padding-left: 1.83333333rem;
}

.device .container .row .col-md-4 {
  height: 15rem;
  display: flex;
  align-items: center;
}

.device .container .row .col-md-4 div {
  width: 100%;
  height: 10rem;
  background: #202020;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.66666667rem;
}

.device .container .row .col-md-4 div p {
  font-size: 0.8rem;
  font-weight: bold;
}

.device .container .row .col-md-4 div span {
  font-size: 0.53333333rem;
}

.device .container .row .col-md-4 div img {
  width: 4.26666667rem;
  height: 4.26666667rem;
}

.features {
  height: 40rem;
  background: #f5f5f5;
}

.features .container .row {
  height: 100%;
}

.features .container .row .col-md-12 {
  height: 10rem;
  text-align: center;
  padding: 2.33333333rem 6.83333333rem;
}

.features .container .row .col-md-12 p {
  font-size: 1.4rem;
  font-weight: bold;
  color: #181818;
  line-height: 2rem;
}

.features .container .row .col-md-12 span {
  font-size: 0.8rem;
  font-weight: 40;
  color: #181818;
  line-height: 1.33333333rem;
}

.features .container .row .col-md-6 {
  height: auto;
  margin-bottom: 1.16666667rem;
  text-align: center;
}

.features .container .row .col-md-6 div {
  background-color: #fff;
  height: 100%;
  border-radius: 10px;
}

.features .container .row .col-md-6 img {
  height: auto;
  width: 100%;
}

.features .container .row .col-md-6 p {
  font-size: 0.8rem;
  font-weight: bold;
  color: #181818;
  line-height: 1.33333333rem;
  margin-bottom: 0 !important;
}

.features .container .row .col-md-6 span {
  font-size: 0.66666667rem;
  font-weight: 400;
  width: 100%;
  color: #666666;
  line-height: 0.8rem;
  display: block;
  padding: 0 0.5rem 1.11rem;
}

.user {
  height: fit-content;
  background-color: #000;
}

.user .container .row {
  height: 100%;
}

.user .container .row div {
  height: 100%;
}

.user .container .row .guideline {
  height: fit-content;
  text-align: center;
  color: #fff;
  padding: 3.76666667rem 6.86666667rem 0;
}

.user .container .row .guideline p {
  font-size: 1.4rem;
  font-weight: bold;
  color: #ffffff;
  line-height: 2rem;
}

.user .container .row .guideline span {
  font-size: 0.8rem;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.33333333rem;
}

.user .container .row .content .col-md-12 {
  height: fit-content;
  margin-top: 4.33333333rem;
  justify-content: center;
  align-items: center;
}

.user .container .row .content .col-md-12:last-child {
  margin-bottom: 4.3333333rem;
}

.user .container .row .content .col-md-12:nth-child(odd) {
  flex-direction: row-reverse;
}

.user .container .row .content .col-md-12 .text {
  flex-direction: column;
  justify-content: left;
  color: #fff;
  padding: 1rem 3.33333333rem;
}

.user .container .row .content .col-md-12 .text p {
  font-size: 1.16666667rem;
  font-weight: bold;
}

.user .container .row .content .col-md-12 .text span {
  font-size: 0.66666667rem;
  font-weight: 300;
  opacity: 0.6;
  color: #ffffff;
  line-height: 1.06666667rem;
}

.user .container .row .content .col-md-12 .img {
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}

.user .container .row .content .col-md-12 .img img {
  height: 100%;
  width: 100%;
}

.user .container .row .content .col-md-12 .show1 {
  border-top: 20px solid transparent;
  border-left: 20px solid transparent;
  background-image: linear-gradient(to right, #222, #222),
    linear-gradient(180deg, #e93f80 0%, #7e3fcd 100%);
}

.user .container .row .content .col-md-12 .show2 {
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  background-image: linear-gradient(to right, #222, #222),
    linear-gradient(180deg, #6b41e3 0%, #01e3fb 100%);
}

.user .container .row .content .col-md-12 .show3 {
  border-top: 20px solid transparent;
  border-left: 20px solid transparent;
  background-image: linear-gradient(to right, #222, #222),
    linear-gradient(180deg, #841cec 0%, #d82aa1 100%);
}

.user .container .row .content .col-md-12 .show4 {
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  background-image: linear-gradient(to right, #222, #222),
    linear-gradient(180deg, #04b5d2 0%, #5a41ee 100%);
}

.user .container .row .content .col-md-12 .show5 {
  border-top: 20px solid transparent;
  border-left: 20px solid transparent;
  background-image: linear-gradient(to right, #222, #222),
    linear-gradient(180deg, #fc8a4c 0%, #f23f78 100%);
}

.user .container .row .content div {
  display: flex;
}

.footer-bar {
  height: 13.33333333rem;
  background: linear-gradient(271deg, #680dfc 0%, #e202fd 100%);
}

.footer-bar .container {
  height: 100%;
}

.footer-bar .container .row {
  height: 100%;
  padding: 1.8rem 0;
}

.footer-bar .container .row div {
  height: 100%;
}

.footer-bar .container .row .col-md-5 {
  display: flex;
  flex-direction: row-reverse;
}

@media screen and (min-width: 1740px) {
  .footer-bar .footer-bar-icon {
    width: 109px;
    height: 109px;
  }
}

@media screen and (max-width: 1740px) {
  .footer-bar .footer-bar-icon {
    width: 86.5px;
    height: 86.5px;
  }
}

@media screen and (max-width: 1200px) {
  .footer-bar .footer-bar-icon {
    width: 66px;
    height: 66px;
  }
}

@media screen and (max-width: 992px) {
  .footer-bar .footer-bar-icon {
    width: 51px;
    height: 51px;
  }
  footer .copyright .container .row .col-md-3 img {
    width: 36px !important;
    height: 36px !important;
  }
}

@media screen and (max-width: 768px) {
  .footer-bar .footer-bar-icon {
    width: 96px;
    height: 96px;
  }
}

.footer-bar .container .row .col-md-5,
.footer-bar .container .row .col-md-7 {
  height: 3.33333333rem;
  color: #ffffff;
}

.footer-bar .container .row .col-md-5 p,
.footer-bar .container .row .col-md-7 p {
  font-size: 1.35rem;
  font-weight: bold;
  margin-bottom: 0 !important;
}

.footer-bar .container .row .col-md-5 span,
.footer-bar .container .row .col-md-7 span {
  font-size: 0.8rem;
  font-weight: 400;
}

.footer-bar .container .row .col-md-12 {
  height: 2.66666667rem;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffffff;
  line-height: 2.66666667rem;
}

.footer-bar .container .row .col-md-6 {
  height: 4rem;
}

.footer-bar .container .row .col-md-6 a {
  width: 10rem;
  height: 2.66666667rem;
}

.footer-bar .container .row .col-md-6 button {
  width: 10rem;
  height: 2.66666667rem;
  background: #ffffff;
  border-radius: 1.33333333rem;
  font-size: 0.66666667rem;
  border: none;
}

.footer-bar .container .row .col-md-6 button:hover {
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
}

.footer-bar .container .row .left {
  display: flex;
  flex-direction: row-reverse;
}

footer {
  /* height: 14.66666667rem; */
  width: 100%;
  background: #1d1d1f;
}

footer .about {
  min-height: 11rem;
}

footer .about .container {
  height: 100%;
}

footer .about .container .row {
  height: 100%;
}

footer .about .container .row .col-md-4 {
  height: 100%;
  padding-top: 3rem;
  display: flex;
  justify-content: center;
  color: #fff;
}

footer .about .container .row .col-md-4 ul {
  width: 12rem;
}

footer .about .container .row .col-md-4 ul sapn {
  font-size: 0.66666667rem;
  font-weight: bold;
  color: #ffffff;
}

footer .about .container .row .col-md-4 ul li {
  font-size: 0.53333333rem;
  margin-top: 0.5rem;
}

footer .about .container .row .col-md-3 {
  height: 100%;
  padding-top: 3rem;
  display: flex;
  justify-content: center;
  color: #fff;
}
footer .about .container .row .col-md-3 ul {
  width: 12rem;
}

footer .about .container .row .col-md-3 ul sapn {
  font-size: 0.66666667rem;
  font-weight: bold;
  color: #ffffff;
}

footer .about .container .row .col-md-3 ul li {
  font-size: 0.53333333rem;
  margin-top: 0.5rem;
}
footer .copyright {
  height: 3.06666667rem;
  line-height: 3.06666667rem;
  border: 1px solid transparent;
  border-top-color: #ccc;
  border-bottom-color: #ccc;
}

footer .copyright .container {
  height: 100%;
}

footer .copyright .container .row {
  height: 100%;
  justify-content: space-between;
}

footer .copyright .container .row div {
  height: 100%;
}

footer .copyright .container .row .col-md-3 img {
  width: 48px;
  height: 48px;
}

footer .copyright .container .row .col-md-3 span {
  font-size: 1.06666667rem;
  font-weight: bold;
  color: #ffffff;
}

footer .copyright .container .row .media {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer .copyright .container .row .media span {
  font-size: 0.53333333rem;
  padding-right: 0.5rem;
  font-weight: 400;
  line-height: initial;
  color: rgba(255, 255, 255, 0.8);
}

footer .copyright .container .row .media ul {
  width: fit-content;
  display: flex;
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  align-items: center;
}

footer .copyright .container .row .media ul li {
  width: 1rem;
  height: 1rem;
  float: left;
  margin-right: 0.5rem;
  color: #fff;
  display: flex;
  align-items: center;
}

footer .copyright .container .row .col-md-5 p {
  font-size: 0.46666667rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
}

@media screen and (max-width: 576px) {
  .row > * {
    width: unset !important;
    max-width: 100%;
  }

  .user .container .row .content .col-md-12 .text {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 0;
  }

  .container {
    width: 100% !important;
  }

  .banner-state .row .col-md-5 img,
  .banner-state .row .col-md-7 img {
    position: unset !important;
  }

  banner .banner-state .banner-state-img {
    height: 250px;
    width: 383px;
  }

  .banner-icons .container .row ul {
    display: none !important;
  }

  .banner-icons .container .row .context {
    display: block !important;
    display: flex !important;
  }

  .banner-icons .container .row .context .app {
    width: 40% !important;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .banner-icons .container .row .context .app li {
    width: 4.66666667rem;
    height: 4.66666667rem;
    border-radius: 10px;
    margin-right: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .banner-icons .container .row .context .app li a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .banner-icons .container .row .context .app li span {
    font-size: 0.66666667rem;
    font-weight: 400;
    color: #181818;
  }

  .banner-icons .container .row .context .app li:hover {
    background-color: #fff;
    cursor: pointer;
  }

  .banner-icons .container .row .context .googleplay {
    width: 60% !important;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
  }

  .banner-icons .container .row .context .googleplay span {
    width: 15.667rem;
    border-radius: 10px;
    opacity: 1;
  }

  .features .container .row .col-md-6 {
    width: 100% !important;
  }

  .footer-bar .row div {
    width: 100% !important;
  }

  .footer-bar .row .col-md-6 {
    width: 100% !important;
    display: flex;
    padding: 0 !important;
    justify-content: center;
    align-items: center;
  }

  .footer-bar .row .col-md-6 button {
    width: 100% !important;
  }

  .footer-bar .row .left {
    margin-bottom: 22px;
  }

  footer {
    height: fit-content !important;
  }

  footer .about {
    height: fit-content !important;
  }

  footer .about .row .col-md-4 {
    width: 50% !important;
    justify-content: left !important;
  }
  footer .about .row .col-md-4:nth-child(1),
  footer .about .row .col-md-4:nth-child(2) {
    width: 50% !important;
  }

  footer .about .row .contact {
    width: 50% !important;
    justify-content: left !important;
  }

  footer .about .row .contact ul {
    width: 100% !important;
  }

  footer .copyright div {
    width: 100% !important;
  }

  footer .copyright div .media {
    padding: 0 !important;
  }

  footer .copyright p {
    text-align: center !important;
    line-height: 3;
  }

  footer .copyright li {
    margin-right: 3px !important;
  }

  footer .copyright .media ul li {
    height: unset !important;
  }
}

@media screen and (max-width: 450px) {
  banner .banner-state .banner-state-img {
    height: 180px;
    width: 275px;
  }
}

@media screen and (max-width: 768px) {
  .video .container .button {
    width: 90% !important;
    transform: translateX(-158px) !important;
  }

  .banner-state {
    height: fit-content !important;
  }

  .banner-state .row div {
    width: 100% !important;
  }

  .banner-state .row .col-md-5 {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .banner-state .row .col-md-5 img {
    position: unset !important;
  }

  .banner-state .row .col-md-7 {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
    width: 100% !important;
  }

  .banner-state .row button {
    width: 100% !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  .device {
    height: auto !important;
  }

  .device .row .col-md-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .device .row .col-md-7 {
    height: fit-content !important;
  }

  .device .row .col-md-7 img {
    width: 100% !important;
    height: auto !important;
  }

  .device .row .col-md-5 p {
    text-align: center;
  }

  .device .row .col-md-4 {
    width: 100% !important;
  }

  .device .row .col-md-4 div {
    width: 100% !important;
    height: 90% !important;
  }

  .features {
    height: fit-content !important;
  }

  .features .col-md-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    height: auto;
  }

  .user {
    height: fit-content !important;
  }

  .user .content .col-md-12 .col-md-6 {
    width: 100%;
  }

  .user .guideline {
    padding-left: 15px !important;
    padding-right: 15px !important;
    height: auto !important;
  }

  .user .content .col-md-12 {
    height: auto !important;
    flex-direction: column-reverse !important;
    margin-top: 20px !important;
  }

  .user .content .col-md-12 .text {
    padding-left: 0 !important;
    padding-top: 10px;
  }

  .user .content .col-md-12 .img img {
    width: 100% !important;
    height: auto !important;
  }

  .user .content .col-md-12:nth-child(5) {
    margin-bottom: 30px;
  }

  .footer-bar {
    height: auto !important;
  }

  .footer-bar .container .row div {
    text-align: center;
    height: fit-content !important;
  }

  .footer-bar .container .row .col-md-5 {
    justify-content: center;
  }

  .footer-bar .container .row .left {
    flex-direction: row !important;
    justify-content: center;
    margin-bottom: 22px;
  }

  .footer-bar .container .row .col-md-6 a {
    width: 90% !important;
  }

  footer {
    height: fit-content !important;
  }

  footer .about .col-md-4 {
    width: 33.3% !important;
  }
  /* footer .about .col-md-3 {
    width: 25% !important;
  } */
  footer .about .row .col-md-3 {
    width: 100% !important;
    justify-content: left !important;
  }
  footer .about .row .col-md-3:nth-child(1),
  footer .about .row .col-md-3:nth-child(2),
  footer .about .row .col-md-3:nth-child(3) {
    width: 100% !important;
  }
  footer .about .col-md-4 ul {
    padding-left: 1rem !important;
  }

  footer .copyright {
    height: fit-content;
  }

  footer .copyright div {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  footer .copyright .col-md-3 {
    width: 100% !important;
  }

  footer .copyright .col-md-6 {
    width: 100% !important;
  }

  footer .copyright .bottom-line {
    height: 30px;
    border-top: 1px solid #ccc;
  }
}
/* 页脚 .about 双列区间下界从 768.1px 下调到 768px：设计稿 768 帧即为双列（node 8:1850），
   而上面 max-width:768px 的单列规则会把 768px 整数点吃成单列。本块声明在后、特异性相同，
   768px 处双列规则胜出，使经典平板宽度（iPad 768）对齐设计稿的双列页脚。 */
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  footer .about .row .col-md-3 {
    width: 50% !important;
    justify-content: left !important;
  }
  footer .about .row .col-md-3:nth-child(1),
  footer .about .row .col-md-3:nth-child(2),
  footer .about .row .col-md-3:nth-child(3) {
    width: 50% !important;
  }
  footer .copyright .col-md-3 {
    width: 50% !important;
  }
}

/* Header A and the footer only tint at the page edges; the reading surface stays white. */
body {
  background: #fff;
}

nav {
  position: relative;
  background: transparent;
  border-bottom: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

/* 通用导航栏高斯模糊（仿 pigeoncast.com：白色半透明 + backdrop-blur(10px)）。
   ⚠ backdrop-filter 不能直接放在 <nav>/.header-menu 上——它会让该元素成为其内部
   fixed 定位后代的包含块，把 Bootstrap offcanvas（窄屏汉堡菜单 #offcanvasDarkNavbar，
   在 <nav> 内）困在 header 盒子里而无法覆盖整屏（正是上一次修复的移动端汉堡菜单 Bug）。
   故把半透明底 + 模糊放到 nav::before 伪元素上：伪元素不是 offcanvas 的祖先，不会成为其
   包含块；z-index:-1 让它落在导航内容之下，而 .header-menu 的 sticky 层叠上下文
   (z-index:999) 保证它盖在页面内容之上，滚动时透出模糊。 */
nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

nav .container .row {
  color: #26242d;
}

nav .container .row .col-md-3 .return-home,
nav .container .row .col-md-8 ul li a,
.linkit {
  color: #4f4c59;
}

nav .container .row .col-md-3 .return-home:hover,
nav .container .row .col-md-8 ul li a:hover,
.linkit:hover,
.underline-current {
  color: #6f58ea !important;
}

nav .container .row .col-md-8 .log-box {
  background: rgba(247, 245, 255, 0.9);
  border-color: rgba(155, 145, 211, 0.5);
}

/* Figma keeps the desktop controls inside a 48px-high row, leaving visible
   space above and below it within the navbar. */
nav .container .row .col-md-8 > ul.underline > li {
  height: 48px;
  margin: 0;
}

nav .container .row .col-md-8 > ul.underline > li > a,
nav .container .row .col-md-8 > ul.underline > li.dropbtn > .linkit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 10px;
  border-radius: 5px;
  color: #181818;
  background: transparent;
  font-weight: 400 !important;
  transition: background-color 180ms ease, border-radius 180ms ease;
}

nav .container .row .col-md-8 > ul.underline > li > a:hover,
nav .container .row .col-md-8 > ul.underline > li.dropbtn > .linkit:hover,
nav .container .row .col-md-8 > ul.underline > li.dropbtn.menu-open > .linkit {
  border-radius: 10px;
  color: #181818 !important;
  font-weight: 400;
  background-color: rgba(0, 0, 0, 0.1);
}

nav .container .row .col-md-8 > ul.underline > li.dropbtn > .linkit::after {
  transition: transform 180ms ease;
  transform-origin: center;
}

nav .container .row .col-md-8 > ul.underline > li.dropbtn.menu-open > .linkit::after {
  transform: rotate(180deg);
}

nav .container .row .col-md-8 ul .menu-lang-container li.menu-item-2984 .current::after {
  transition: transform 180ms ease;
  transform-origin: center;
}

nav .container .row .col-md-8 ul .menu-lang-container li.menu-item-2984.menu-open .current::after {
  transform: rotate(180deg);
}

nav .container .row .col-md-8 > ul.underline > li > .menu-lang-container,
nav .container .row .col-md-8 > ul.underline > li > .menu-lang-container > ul,
nav .container .row .col-md-8 > ul.underline > li > .menu-lang-container li.menu-item-2984 {
  height: 100%;
}

nav .container .row .col-md-8 ul .menu-lang-container li.menu-item-2984 .current {
  width: auto;
  height: 100%;
  min-height: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  color: #4f4c59 !important;
  background: transparent;
  transition: background-color 180ms ease, color 180ms ease;
}

nav .container .row .col-md-8 ul .menu-lang-container li.menu-item-2984 .current:hover {
  color: #393642 !important;
  background-color: rgba(101, 86, 157, 0.12);
}

/* Download is the primary CTA in Header A, so it intentionally uses the
   shared purple-blue pill component instead of a neutral navigation slice. */
nav .container .row .col-md-8 > ul.underline > li > a.nav-download {
  min-height: 32px;
  height: auto;
  margin: 0;
  padding: 8px 20px;
  border-radius: 999px;
  color: #fff !important;
  background: linear-gradient(100deg, #ad55ed 0%, #8a6bf5 52%, #75a0f4 100%);
  box-shadow: 0 5px 12px rgba(121, 91, 235, 0.18);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

nav .container .row .col-md-8 > ul.underline > li > a.nav-download:hover {
  color: #fff !important;
  font-weight: 400;
  background: linear-gradient(100deg, #a348df 0%, #7959e9 52%, #648dec 100%);
  box-shadow: 0 7px 16px rgba(98, 70, 203, 0.26);
  transform: translateY(-1px);
}

nav .container .row .col-md-8 > ul.underline > li > a.nav-download:active {
  background: linear-gradient(100deg, #8537c3 0%, #6246ca 52%, #5279ce 100%);
  box-shadow: inset 0 2px 5px rgba(55, 32, 111, 0.24);
  transform: translateY(0);
}

/* Language remains a separate compact control in Header A. */
nav .container .row .col-md-8 ul .menu-lang-container li.menu-item-2984 .current {
  width: auto;
  min-width: 104px;
  height: auto;
  min-height: 32px;
  margin: 0;
  padding: 8px 20px;
  border: 1px solid rgba(203, 198, 231, 0.72);
  border-radius: 999px;
  color: #4f4c59 !important;
  background: rgba(247, 245, 255, 0.92);
  font-weight: 400 !important;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

nav .container .row .col-md-8 ul .menu-lang-container li.menu-item-2984 .current:hover {
  color: #393642 !important;
  background: #e9e5f7;
  border-color: #d7cfee;
}

nav .container .row .col-md-8 ul .menu-lang-container li.menu-item-2984.menu-open .current {
  color: #393642 !important;
  background: #ded7ef;
  border-color: #cbc0e2;
  box-shadow: inset 0 1px 3px rgba(71, 53, 128, 0.12);
}

nav .container .row .col-md-8 > ul.underline .underline-current {
  font-weight: 400 !important;
}

nav .container .row .col-md-8 ul .menu-lang-container li.menu-item-2984 .current {
  color: #4f4c59 !important;
  background: rgba(247, 245, 255, 0.9);
  border: 1px solid rgba(203, 198, 231, 0.66);
}

/* Keep the primary controls visibly separated. The shared 14px list gap is
   supplemented before Download and the language control on wide desktops. */
nav .container .row .col-md-8 > ul.underline > li:nth-last-child(2),
nav .container .row .col-md-8 > ul.underline > li:last-child {
  margin-left: 20px;
}

nav .container .row .col-md-8 ul ul.sub-menu,
nav .container .row .col-md-8 .drop-menu {
  background: #fff;
  border: 0;
  /* 独立浮层：四角统一小圆角（不明显）+ 四周阴影（含顶部），与导航栏边缘分离。 */
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(76, 68, 141, 0.16), 0 -2px 12px rgba(76, 68, 141, 0.06);
  padding: 16px 42px 24px;
}

nav .container .row .col-md-8 .drop-menu {
  padding-right: 24px;
  padding-left: 24px;
}

nav .container .row .col-md-8 ul ul.sub-menu li a,
nav .container .row .col-md-8 .drop-menu .item-box,
nav .container .row .col-md-8 .drop-menu .sub-item-box,
nav .container .row .col-md-8 .drop-menu .item-box a,
nav .container .row .col-md-8 .drop-menu .sub-item-box a {
  color: #181818;
  /* 与上方导航栏选项（约 14px）字号一致，原 16px 偏大。 */
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  --item-color: #181818;
}

/* “Share Files”下的二级项（From Phone / From PC/Mac）用次级灰 #666（对齐设计稿） */
nav .container .row .col-md-8 .drop-menu .sub-item-box,
nav .container .row .col-md-8 .drop-menu .sub-item-box a {
  color: #666;
  --item-color: #666;
}

nav .container .row .col-md-8 ul ul.sub-menu li:hover,
nav .container .row .col-md-8 .drop-menu .item-box:hover,
nav .container .row .col-md-8 .drop-menu .sub-item-box:hover {
  background: #f5f3ff;
}

/* Final dropdown-state overrides: retain the Figma footer width and use
   color-only hover feedback after the shared theme rules above. */
nav .container .row .col-md-8 .feature-drop-menu {
  padding: 16px 24px 24px;
}

nav .container .row .col-md-8 .feature-drop-menu > .nav-full-feature-row {
  width: auto !important;
  margin: 0 !important;
  justify-self: stretch;
}

nav .container .row .col-md-8 .feature-drop-menu > .nav-full-feature-row > .nav-full-feature-link,
nav .container .nav-ico .feature-dropdown-menu > .nav-full-feature-row > .nav-full-feature-link {
  width: 100% !important;
}

nav .container .row .col-md-8 .drop-menu .item-box:not(.inactivate-item-box):hover,
nav .container .row .col-md-8 .drop-menu .sub-item-box:hover,
nav .container .row .col-md-8 ul ul.sub-menu li:hover {
  background: transparent !important;
  --item-color: #6f58ea;
}

nav .container .row .col-md-8 .drop-menu .item-box:not(.inactivate-item-box):hover > a,
nav .container .row .col-md-8 .drop-menu .sub-item-box:hover > a,
nav .container .row .col-md-8 ul ul.sub-menu li:hover > a {
  color: #6f58ea !important;
  background: transparent !important;
}

/* 设计稿无列间分割线，隐藏旧版 divider */
nav .container .row .col-md-8 .drop-menu .menu-divider::after {
  display: none;
}

/* Resource keeps its compact layout while sharing the same four-corner
   radius, shadow, opacity and translate animation as Products / Features. */
nav .container .row .col-md-8 > ul.underline > li.dropbtn > .resource-drop-menu {
  display: flex;
  width: 228px !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 24px 24px;
  border-radius: 10px;
}

nav .container .row .col-md-8 > ul.underline > li.dropbtn > .resource-drop-menu > .item-box,
nav .container .row .col-md-8 > ul.underline > li.dropbtn > .resource-drop-menu > .item-box > a {
  width: 180px;
  margin: 0;
  justify-content: flex-start;
  text-align: left;
}

nav .container .row .col-md-8 > ul.underline > li.dropbtn.menu-open > .resource-drop-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto;
}

footer {
  background: linear-gradient(180deg, #fff 0%, #f7f6ff 127.28%);
  border-top: 0;
}

footer .about .container .row .col-md-3,
footer .about .container .row .col-md-4,
footer .about .container .row .col-md-3 ul sapn,
footer .about .container .row .col-md-4 ul sapn,
footer .copyright .container .row .col-md-3 span,
footer .copyright .container .row .media span,
footer .copyright .container .row .col-md-5 p,
footer .contact-mailto,
footer a {
  color: #4f4c59 !important;
}

/* The Nero corporate mark remains black on the light Footer surface. */
footer .about .about-icon {
  filter: brightness(0);
}

footer .contact-mailto img {
  filter: brightness(0) opacity(0.8);
}

footer .copyright .media ul:first-child li a {
  color: #4f4c59;
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

footer .copyright .media ul:first-child li a:hover {
  color: #7e5eed !important;
}

footer .copyright .media ul:first-child li a i {
  font-size: 1rem;
  line-height: 1;
}

footer .copyright {
  border-color: transparent;
  background: transparent;
}

footer .about ul > a,
footer .contact-mailto,
footer .copyright a {
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

footer .about ul > a:hover,
footer .about ul > a:hover li,
footer .contact-mailto:hover {
  color: #7e5eed !important;
}

footer .about ul > a:hover {
  transform: translateX(3px);
}

footer .about ul > a:first-child:hover,
footer .copyright a:hover {
  opacity: 0.82;
  transform: translateY(-2px);
}

footer .copyright .media ul li a:hover {
  opacity: 1;
  transform: translateY(-2px) scale(1.08);
}

footer .about ul > a:focus-visible,
footer .contact-mailto:focus-visible,
footer .copyright a:focus-visible {
  outline: 2px solid #7e5eed;
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  footer .about ul > a,
  footer .contact-mailto,
  footer .copyright a {
    transition: none;
  }

  footer .about ul > a:hover,
  footer .about ul > a:first-child:hover,
  footer .copyright a:hover,
  footer .copyright .media ul li a:hover {
    transform: none;
  }
}

/* Shared responsive shell type scale. Page styles may refine content type,
   but navigation and footer use the same Figma breakpoints site-wide. */
nav .container .row .col-md-3 span {
  font-size: 24px;
  line-height: normal;
}

nav .container .row .col-md-8 > ul.underline > li > a,
nav .container .row .col-md-8 > ul.underline > li.dropbtn > .linkit,
nav .container .row .col-md-8 ul .menu-lang-container li.menu-item-2984 .current {
  font-size: 18px;
  line-height: 26px;
}

footer .about ul > span {
  font-size: 20px;
  line-height: 28px;
}

footer .about li,
footer .contact-mailto {
  font-size: 16px;
  line-height: 22px;
}

footer .copyright .col-md-3 > span {
  font-size: 24px;
  line-height: normal;
}

footer .copyright .media > span {
  font-size: 18px;
  line-height: 24px;
}

footer .copyright .col-md-5 p {
  font-size: 14px;
  line-height: 20px;
}

@media screen and (min-width: 768px) and (max-width: 1319.9px) {
  nav .container .row .col-md-8 > ul.underline {
    gap: 14px;
  }

  nav .container .row .col-md-8 > ul.underline > li > a,
  nav .container .row .col-md-8 > ul.underline > li.dropbtn > .linkit {
    padding-right: 0;
    padding-left: 0;
  }

  nav .container .row .col-md-8 > ul.underline > li:nth-last-child(2),
  nav .container .row .col-md-8 > ul.underline > li:last-child {
    margin-left: 0;
  }

  .header-menu nav {
    height: 74px;
  }

  nav .container .row .col-md-3 img {
    width: 32px;
    height: 32px;
  }

  nav .container .row .col-md-3 span {
    font-size: 20px;
  }

  nav .container .row .col-md-8 > ul.underline > li > a,
  nav .container .row .col-md-8 > ul.underline > li.dropbtn > .linkit,
  nav .container .row .col-md-8 ul .menu-lang-container li.menu-item-2984 .current {
    font-size: 16px;
    line-height: 22px;
  }
}

@media screen and (max-width: 767.9px) {
  .header-menu nav {
    height: 56px;
  }

  /* Bootstrap applies .col-sm-4 from 576px upward, which briefly makes the
     brand column too narrow for the logo and title. Size both mobile header
     controls from their content so the brand stays on one line throughout
     the whole narrow-screen range. */
  nav .container .row > .col-md-3.col-sm-4,
  nav .container .row > .nav-ico {
    width: auto;
    flex: 0 0 auto;
  }

  nav .container .row .return-home span {
    white-space: nowrap;
  }

  nav .container .row > .nav-ico {
    margin-left: auto;
  }

  footer .copyright .media > span {
    font-size: 10px;
    line-height: normal;
  }

  footer .copyright .col-md-5 p {
    font-size: 8px;
    line-height: normal;
  }
}