/* =====================================================================
   NoteBurner — Shared / Global styles
   Tech: Bootstrap 5 + jQuery (responsive)
   Contains only common styles (variables, base, header, footer, reveal).
   Page-specific styles live in separate files: home.css, about.css, ...
===================================================================== */

:root {
  --nb-blue: #26a7fe;
  --nb-green: #02cb64;
  --nb-orange: #ff8026;
  --nb-navy: #132a3f;
  --nb-footer: #10324f;

  --nb-t-1: rgba(0, 0, 0, 0.9);   /* #000000e5 */
  --nb-t-2: rgba(0, 0, 0, 0.7);   /* #000000b2 */
  --nb-t-3: rgba(0, 0, 0, 0.5);   /* #00000080 */
  --nb-t-4: rgba(0, 0, 0, 0.6);   /* #00000099 */

  --nb-card-bg: rgba(38, 167, 254, 0.08);     /* #26a7fe14 */
  --nb-card-border: rgba(38, 167, 254, 0.16); /* #26a7fe29 */

  --nb-gradient: linear-gradient(180deg, #26a7fe 0%, #02cb64 100%);
  --nb-gradient-102: linear-gradient(102.67deg, #26a7fe 0%, #02cb64 100%);

  --nb-font: 'Figtree', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimHei, Arial, Helvetica, sans-serif;
  --nb-logo-font: Verdana, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimHei, Arial, Helvetica, sans-serif;

  --nb-gutter: 20px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--nb-font);
  color: var(--nb-t-1);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Generic gradient text */
.text-accent {
  background: var(--nb-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------------
   Container
--------------------------------------------------------------------- */
.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--nb-gutter);
}
@media (min-width: 576px) {
  .brand-since {
    display: inline-flex !important;
  }
}
@media (min-width: 1200px) {
  :root { --nb-gutter: 40px; }
}

/* =====================================================================
   HEADER
===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  transition: box-shadow .3s ease;
}

/* Shadow appears once the header sticks to the top (scrolled) */
.site-header.is-stuck {
  box-shadow: 0 4px 24px rgba(19, 42, 63, 0.12);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px var(--nb-gutter);
  overflow: hidden;
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  column-gap: 12px;
  padding: 8px 0;
  flex-shrink: 0;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--nb-gradient);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  font-style: italic;
  font-family: var(--nb-logo-font);
  overflow: hidden;
}

.brand-name {
  font-family: var(--nb-logo-font);
  font-size: 24px;
  font-style: italic;
  color: var(--nb-blue);
  white-space: nowrap;
}

.brand-name .note { font-weight: 700; }

/* Since 2006 (header, shows below xl) */
.brand-since {
  display: none;
  align-items: center;
  column-gap: 12px;
}

.since-divider {
  background: #bbcddc;
  width: 1px;
  height: 24px;
}

.since-text {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}

.since-label {
  font-size: 10px;
  color: var(--nb-t-3);
  line-height: 12px;
}

.since-year {
  font-family: var(--nb-logo-font);
  font-size: 16px;
  color: var(--nb-t-3);
  line-height: 19px;
}

/* Nav (desktop >= xxl) */
.main-nav {
  display: none;
  align-items: center;
  gap: 28px;
}

.nav-link {
  font-size: 18px;
  color: var(--nb-t-2);
  padding: 4px 0;
}

.nav-link i { font-size: 14px; margin-left: 2px; }

/* Nav hover dropdown (desktop >= 1440) */
.nav-drop {
  position: relative;
  /* widen the hover hot zone so moving between For Windows / For Mac
     doesn't pass through a dead gap (which causes flicker) */
  padding: 0 18px;
  margin: 0 -18px;
}

/* Hover bridge: transparent strip under the link that keeps :hover while the
   pointer travels from the link down to the dropdown panel.
   Height stops right at the panel top (112px) so hovering inside an open
   panel never triggers the neighbour's menu. */
.nav-drop::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 44px;
}

.nav-drop-menu {
  display: none;
  position: fixed;
  top: 112px; /* header 100px + 12px gap */
  /* Keep the hover zone the same width as the visible card so moving the
     pointer horizontally off the menu closes it. A full-width (left:0/right:0)
     panel previously kept the menu open across the whole horizontal band. */
  left: 50%;
  width: calc(1440px - 2 * var(--nb-gutter));
  transform: translateX(-50%);
  z-index: 60;
}

.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu { display: block; }

.nav-drop-card {
  max-width: calc(1440px - 2 * var(--nb-gutter));
  margin: 0 auto;
  display: flex;
  column-gap: 40px;
  padding: 40px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(38, 167, 254, 0.08);
}

.nav-drop-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 24px;
}

.nav-drop-col-stack { row-gap: 60px; }

.nav-drop-group {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 24px;
}

.nav-drop-col-title {
  margin: 0;
  line-height: 28px;
  font-size: 20px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
}

.nav-drop-col-divider {
  align-self: stretch;
  height: 1px;
  background: #e0e0e0;
}

.nav-drop-list {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}

.nav-drop-item {
  display: flex;
  align-items: center;
  column-gap: 8px;
}

.nav-drop-item-name {
  line-height: 22px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  transition: color .15s;
}

.nav-drop-item:hover .nav-drop-item-name { color: var(--nb-blue); }

.nav-drop-badge {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
  height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  font-style: italic;
  line-height: 17px;
}

.nav-drop-badge img { width: 9px; height: 10px; }

.nav-drop-badge-hot { background: linear-gradient(180deg, #fa6d18 0%, #ff985b 100%); }
.nav-drop-badge-new { background: linear-gradient(180deg, #f93845 0%, #fd708a 100%); }

/* Recommended promo card */
.nav-drop-promo {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 20px;
  padding: 24px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(38, 167, 254, 0.16) 0%, rgba(2, 203, 100, 0.16) 100%);
}

.nav-drop-promo-title {
  margin: 0;
  background: linear-gradient(180deg, #26a7fe 0%, #02cb64 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 28px;
  font-size: 20px;
  font-weight: 700;
}

.nav-drop-promo-desc {
  margin: 0;
  max-width: 339px;
  line-height: 20px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.9);
}

.nav-drop-promo-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.nav-drop-promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  height: 40px;
  padding: 10px 20px;
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
  min-width: max-content;
}

.nav-drop-promo-btn img { width: 18px; height: 18px; }
.nav-drop-promo-btn i { font-size: 14px; }

.nav-drop-promo-btn-buy { background: var(--nb-orange); }
.nav-drop-promo-btn-buy:hover { color: #fff; filter: brightness(1.05); }
.nav-drop-promo-btn-trial { background: var(--nb-gradient-102); }
.nav-drop-promo-btn-trial:hover { color: #fff; filter: brightness(1.05); }

/* Header actions */
.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--nb-t-3);
  background: transparent;
  color: var(--nb-t-1);
  font-size: 22px;
  line-height: 1;
}

/* Buy Now — circular on small, pill on xxl */
.btn-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--nb-orange);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.btn-buy:hover { background: #ff9951; color: #fff; }
.btn-buy:active { background: #cc661e; }
.btn-buy.is-disabled { opacity: 0.3; pointer-events: none; }

.btn-buy .buy-text { display: none; }
.btn-buy .buy-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Login Out dropdown
   Markup: templates/header.ejs — #btn-login-out + .login-out-menu.
   JS（js/js-script/user-login.js）只写 .is-logged-in 状态类，不写内联样式、
   不碰文案；样式全部在这里。面板用 position: fixed（同 .nav-drop-menu），
   因为 .header-inner 在 1440px 以下会裁剪子元素。
   .open（展开菜单）由 JS 接线：点 #btn-login-out 开合，点别处 / Esc 收起
   （js/js-script/user-login.js bindAccountMenu）。
--------------------------------------------------------------------- */
/* 未登录（默认）只显示 Login；已登录只显示 Login Out。
   状态类由 js/js-script/user-login.js 写在这两个按钮共同的父元素
   （.header-actions）上。JS 出结果前保持未登录态，不会有双按钮同现。 */
.login-out { display: none; }

.is-logged-in .login-out { display: flex; }
.is-logged-in #btn-login { display: none; }

/* #btn-login 的布局（就近写在这里，不用页面级的 .btn-pill —— 那是
   home.css:63 / products.css:511 各自的定义，共用模板取不到）。
   尺寸和形状对齐旁边的 .btn-buy：<1440 圆形 48×48 只留图标，
   >=1440 拉成 pill 并显示文字。配色/三态由 .nb-state-outline 负责。 */
#btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

#btn-login .nb-btn__text { display: none; }
#btn-login img { width: 20px; height: 20px; flex-shrink: 0; }

/* #btn-login-out（.login-out 的触发器）：头像 + 昵称 + 箭头的小胶囊，
   和 #btn-login 占同一个位置，所以高度也取 48px。它不再是描边按钮、
   没有 .nb-state-* 皮肤。
   头像/昵称/箭头都由 js/js-script/user-login.js 填，模板里的 "MJ" 只是占位。

   尺寸也跟 .btn-buy / #btn-login 一致：小屏收起昵称只留 48px 头像圆
   （.user-name-box 在下面 display:none），>=1440 才展开成胶囊。
   flex-shrink: 0 是必须的 —— .header-inner 是 flex 且 overflow:hidden，
   .user-name 带 overflow:hidden 时自动最小尺寸是 0，一旦行内空间不够，
   它会是第一个被压扁的：昵称被 .header-inner 硬裁掉，连省略号都出不来。 */
#btn-login-out {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  flex-shrink: 0;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  color: var(--nb-t-1);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, background-image .2s ease, color .2s ease;
}


#btn-login-out .user-img {
  height: 48px;
  width: 48px;
  border-radius: 999px;
  object-fit: cover;
}

/* 小屏收起（同 .btn-buy 收起 Buy Now 的 .buy-text），>=1440 由下面那条展开。
   flex-shrink: 0：展开后昵称区按自身宽度（<=120px + 箭头）占位，
   不再被 .header-actions 的横向空间挤掉。 */
#btn-login-out .user-name-box {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}

/* 昵称超出 120px 才出现省略号；不挤、不换行，超长由这里收口 */
#btn-login-out .user-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

#btn-login-out .user-name-box img { width: 24px; height: 24px; transition: transform .2s ease; }

.login-out.open #btn-login-out .user-name-box img { transform: rotate(180deg); }

.login-out-menu {
  display: none;
  position: fixed;
  top: 101px; /* header 100px + 12px gap */
  /* right gutter of the 1440px-centred .header-inner, so the panel lines up
     with the trigger button's right edge at every viewport width */
  right: max(var(--nb-gutter), calc((100vw - 1440px) / 2 + var(--nb-gutter)));
  z-index: 60;
  min-width: 184px;
  padding: 8px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(19, 42, 63, 0.12);
}
.login-out-menu  .login-out-img{
  width: 24px;
  height: 24px;
}
.login-out.open .login-out-menu { display: block; }

.login-out-item {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--nb-t-1);
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease, background-image .2s ease;
}

/* 悬停：整行铺品牌渐变，文字和图标一起转白。
   图标是黑色描边的 SVG，刷白用共享组件那套 filter（.nb-state-outline:hover img）。 */
.login-out-item:hover {
  color: #fff;
  background-image: linear-gradient(180deg, #26a7fe 0%, #02cb64 100%);
}

.login-out-item:hover img { filter: brightness(0) invert(1); }

/* =====================================================================
   BUTTONS — 通用按钮四态效果（设计稿四态组件）
   四态：默认 / 悬停(:hover) / 按下(:active) / 禁用(.is-disabled)
   用法：在按钮原有布局类上叠加状态类即可，
         如 <a class="btn-pill nb-state-primary"> / <a class="btn-sm nb-state-ghost">
===================================================================== */

/* 渐变主按钮（primary）
   btn-try-it-free / btn-download / btn-view-all-products /
   btn-more-comments-here / btn-download-now
   默认 #26a7fe→#02cb64（90deg） / 悬停 #51b9fd→#35d584 / 按下 #1e86ca→#02a251 */
.nb-state-primary {
  color: #fff !important;
  background-image: linear-gradient(90deg, #26a7fe 0%, #02cb64 100%) !important;
  transition: background-color .2s ease, background-image .2s ease, color .2s ease, opacity .2s ease !important;
}
.nb-state-primary:hover {
  background-image: linear-gradient(90deg, #51b9fd 0%, #35d584 100%) !important;
}
.nb-state-primary:active {
  background-image: linear-gradient(90deg, #1e86ca 0%, #02a251 100%) !important;
}

/* 渐变主按钮 180deg（btn-try-it-free 组件四态，与设计导出一致）
   默认 #26a7fe→#02cb64 / 悬停 #51b9fd→#35d584 / 按下 #1e86ca→#02a251 / 禁用 opacity .3
   用法同 nb-state-primary：在布局类上叠加，如 <a class="btn-pill nb-state-gradient"> */
.nb-state-gradient {
  color: #fff !important;
  background-image: linear-gradient(180deg, #26a7fe 0%, #02cb64 100%) !important;
  transition: background-color .2s ease, background-image .2s ease, color .2s ease, opacity .2s ease !important;
}
.nb-state-gradient:hover {
  background-image: linear-gradient(180deg, #51b9fd 0%, #35d584 100%) !important;
}
.nb-state-gradient:active {
  background-image: linear-gradient(180deg, #1e86ca 0%, #02a251 100%) !important;
}

/* 渐变描边按钮（outline）
   常态：渐变边框(2px) + 渐变文字 + 绿色图标；
   悬停(:hover)/按下(:active)：渐变背景 + 白色文字/图标（禁用态不实现）
   用法：在布局类上叠加，文本包在 <span class="nb-btn__text"> 中才能实现渐变文字，
        如 <a class="btn-pill nb-state-outline"><span class="nb-btn__text">Download</span> <img src="绿色图标.svg"></a>
   注意：常态图标请使用绿色/品牌色 SVG，悬停时由滤镜自动变白 */
.nb-state-outline {
  border: 2px solid transparent !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(180deg, #26a7fe 0%, #02cb64 100%) border-box !important;
  transition: background-color .2s ease, background-image .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease !important;
}
.nb-state-outline .nb-btn__text {
  background-image: linear-gradient(180deg, #26a7fe 0%, #02cb64 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.nb-state-outline:hover {
  color: #fff !important;
  background: linear-gradient(180deg, #51b9fd 0%, #35d584 100%) border-box !important;
}
.nb-state-outline:hover .nb-btn__text {
  background: none;
  color: #fff;
}
.nb-state-outline:hover img {
  filter: brightness(0) invert(1);
}
.nb-state-outline:active {
  color: #fff !important;
  background: linear-gradient(180deg, #1e86ca 0%, #02a251 100%) border-box !important;
}
.nb-state-outline:active .nb-btn__text {
  background: none;
  color: #fff;
}
.nb-state-outline:active img {
  filter: brightness(0) invert(1);
}

/* 橙色购买按钮（orange / btn-support）
   默认 #ff8026 / 悬停 #ff9951 / 按下 #cc661e */
.nb-state-orange {
  color: #fff;
  background: #ff8026;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.nb-state-orange:hover { background: #ff9951; }
.nb-state-orange:active { background: #cc661e; }

/* 幽灵按钮（ghost）
   btn-learn-more / btn-text-watch-the-new-ui-demonstration-video
   默认透明底+渐变文字；悬停/按下填充渐变、文字/图标变白
   （按钮文字需包在 <span class="nb-btn__text"> 中以便渐变裁剪） */
.nb-state-ghost {
  background: transparent;
  color: transparent;
  transition: background-color .2s ease, background-image .2s ease, color .2s ease, opacity .2s ease;
}
.nb-state-ghost .nb-btn__text {
  background-image: linear-gradient(180deg, #26a7fe 0%, #02cb64 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.nb-state-ghost:hover {
  background-image: linear-gradient(180deg, #51b9fd 0%, #35d584 100%);
  color: #fff;
}
.nb-state-ghost:hover .nb-btn__text { background: none; color: #fff; }
.nb-state-ghost:hover img { filter: brightness(0) invert(1); }
.nb-state-ghost:active {
  background-image: linear-gradient(180deg, #1e86ca 0%, #02a251 100%);
  color: #fff;
}
.nb-state-ghost:active .nb-btn__text { background: none; color: #fff; }
.nb-state-ghost:active img { filter: brightness(0) invert(1); }

/* 禁用态 */
.nb-state-primary.is-disabled,
.nb-state-primary:disabled,
.nb-state-primary[disabled],
.nb-state-gradient.is-disabled,
.nb-state-gradient:disabled,
.nb-state-gradient[disabled],
.nb-state-orange.is-disabled,
.nb-state-orange:disabled,
.nb-state-orange[disabled],
.nb-state-ghost.is-disabled,
.nb-state-ghost:disabled,
.nb-state-ghost[disabled] {
  opacity: 0.3;
  pointer-events: none;
}

.nb-btn-blue{
  color: #fff;
  background: #26a7fe;
}
.nb-btn-blue:hover{
  background: #51B9FD
}
.nb-btn-blue:active{
  background: #1E86CA;
}

.nb-btn-green{
  color: #fff;
  background: #02cb64;
}
.nb-btn-green:hover{
  background: #35D584;
}
.nb-btn-green:active{
  background: #02A251;
}

/* Mobile menu dropdown panel (< 1440) */
.mobile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: var(--nb-gutter);
  right: var(--nb-gutter);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(19, 42, 63, 0.12);
}

.mobile-menu.open { display: block; }

.mobile-menu-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px var(--nb-gutter) 28px;
}

.mobile-nav > a,
.mobile-nav-group > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 8px;
  font-size: 18px;
  color: var(--nb-t-1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mobile-nav > a:last-child { border-bottom: none; }

.btn-buy-mobile {
  display: flex;
  width: 100%;
  height: 52px;
  margin-top: 20px;
  border-radius: 999px;
  font-size: 18px;
}

.btn-buy-mobile .buy-text { display: inline; }
.btn-buy-mobile .buy-icon { display: none; }

/* Mobile menu expandable groups (For Windows / For Mac) */
.mobile-nav-group > a i {
  font-size: 14px;
  transition: transform .2s;
}

.mobile-nav-group.open > a i { transform: rotate(180deg); }

.mobile-sub {
  display: none;
  padding: 12px 0 4px;
}

/* The submenu is shown only by the accordion .open state (toggled on click).
   A :hover rule was intentionally removed: after a tap/click the trigger
   keeps :hover (sticky touch hover), which stopped the submenu from closing
   when the entry was clicked a second time. */
.mobile-nav-group.open .mobile-sub { display: block; }

/* 1440 mega content stacked vertically inside the mobile menu */
.mobile-sub .nav-drop-card {
  flex-direction: column;
  row-gap: 24px;
  margin: 0;
  max-width: none;
  max-height: 500px;
  overflow-y: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.mobile-sub .nav-drop-col-stack { row-gap: 32px; }
.mobile-sub .nav-drop-list { row-gap: 12px; }

/* ---------------------------------------------------------------------
   Header responsive
--------------------------------------------------------------------- */
/* < 1440: logo + "Since 2006" + [menu circle] [buy circle]
   >= 1440: logo + nav links + pill "Buy Now" (no "Since", no menu circle) */
@media (min-width: 1440px) {
  .header-inner { overflow: visible; }
  .main-nav { display: flex; }
  .btn-menu { display: none; }
  .mobile-menu.open { display: none; }
  .btn-buy {
    width: auto;
    height: 48px;
    padding: 10px 24px;
    border-radius: 999px;
    font-size: 20px;
  }
  .btn-buy .buy-text { display: inline; }
  .btn-buy .buy-icon { display: inline; width: 24px; height: 24px; }

  /* 同 .btn-buy：拉成 pill 并显示文字 */
  #btn-login {
    width: auto;
    padding: 10px 24px;
    font-size: 20px;
  }
  #btn-login .nb-btn__text { display: inline; }
  #btn-login img { display: inline; width: 24px; height: 24px; }

  /* 同 .btn-buy / #btn-login：>=1440 展开昵称，并补回头像右侧的留白 */
  #btn-login-out { padding-right: 12px; }
  #btn-login-out .user-name-box { display: flex; }
}

/* =====================================================================
   FOOTER
===================================================================== */
.site-footer {
  background: var(--nb-footer);
  color: #fff;
  padding: 80px var(--nb-gutter) 0;
}

.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
}

/* Top row: brand + social */
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-brand .brand-logo {
  width: 40px;
  height: 40px;
}

.footer-brand .brand-name {
  font-size: 28px;
  line-height: 39px;
  color: #fff;
}

.footer-brand .since-divider {
  background: rgba(255, 255, 255, 0.06);
  height: 28px;
}

.footer-brand .since-label,
.footer-brand .since-year { color: rgba(255, 255, 255, 0.5); }

.footer-social {
  display: flex;
  gap: 20px;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(38, 167, 254, 0.16) 0%, rgba(2, 203, 100, 0.16) 100%);
  color: #fff;
  font-size: 18px;
  transition: background .2s;
}

.social-icon:hover {
  background: linear-gradient(180deg, #26a7fe 0%, #02cb64 100%);
  color: #fff;
}

/* Link columns */
.footer-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 60px 0 40px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-subcols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.footer-heading {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  line-height: 28px;
}

.footer-col a {
  font-size: 16px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.7);
  transition: color .2s;
}

/* 文本 hover 效果：渐变文字（Frame 427323769） */
.footer-col a:hover {
  background: linear-gradient(180deg, #26a7fe 0%, #02cb64 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lang-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lang-item img{
  width: 30px;
}

.flag {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* Promo block (an <a> wrapping an <img>, no background image) */
.footer-promo {
  display: block;
  width: 100%;
  max-width: 330px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
}

.footer-promo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Footer bottom */
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 39px 0 40px;
  text-align: center;
}

.copyright {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.footer-bottom-links a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  padding: 4px 6px;
}

.footer-bottom-links .sep {
  background: rgba(255, 255, 255, 0.08);
  width: 1px;
  height: 16px;
}

/* Footer responsive */
@media (min-width: 992px) {
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .footer-col-wide { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
  .footer-links { grid-template-columns: 1fr 1fr 1.5fr; }
  .footer-col-wide { grid-column: auto; }
}

@media (max-width: 767px) {
  .footer-top { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   Back to top floating button
===================================================================== */
.go-top {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 999;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, box-shadow .3s ease;
}

.go-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.go-top:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.go-top:active {
  transform: translateY(1px);
}

.go-top img {
  width: 24px;
  height: 24px;
  display: block;
}

@media (max-width: 767px) {
  .go-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}

/* =====================================================================
   Scroll reveal
===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
.flexRowStart {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
}

.flexRowCenter {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}

.flexRowEnd {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
}

.flexRowBetween {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}

.flexColCenter {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
}

.flexColStart {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
}

.flexColEnd {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-end;
	align-items: center;
}

.flexColBetween {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: center;
}

/* =====================================================================
   TRUST BADGES (shared)
===================================================================== */
.trust-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 100px;
  row-gap: 20px;
}
.trust-badges__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
}
.trust-badges__icon {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
}
.trust-badges__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
}
.trust-badges__title {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--nb-t-1);
}
.trust-badges__desc {
  margin: 0;
  max-width: 440px;
  text-align: center;
  font-size: 18px;
  line-height: 29px;
  color: var(--nb-t-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ≥ 768px: 2x2 grid */
@media (min-width: 768px) {
  .trust-badges {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 20px;
    padding: 0 40px 100px;
  }
  .trust-badges__item { flex: 0 0 calc(50% - 10px); }
}

/* ≥ 1200px: 4 in a row */
@media (min-width: 1200px) {
  .trust-badges {
    flex-wrap: nowrap;
    column-gap: 40px;
    padding: 0 40px 100px;
  }
  .trust-badges__item { flex: 1; }
}

@media (min-width: 1440px) { .trust-badges { padding: 0 60px 100px; } }
@media (min-width: 1600px) { .trust-badges { padding: 0 240px 100px; } }
@media (min-width: 1920px) { .trust-badges { padding: 0 320px 100px; } }

/* 特殊处理小屏顶部问题 */
@media (max-width: 420px) {
  .header-inner{
    padding: 24px 10px;
  }
  .header-inner .header-actions {
    gap: 10px;
  }
  .header-inner .header-actions .btn-icon,
  .header-inner .header-actions .btn-buy,
  .header-inner .header-actions .user-img,
  .header-inner .header-actions .nb-state-outline{
    width: 36px !important;
    height: 36px !important;
  }
}

/* =====================================================================
   PAGE NAV — 通用页面导航条（templates/page-nav.ejs）
   左侧页签（当前页高亮块 + 兄弟页链接），右侧 Windows 下载/购买按钮。
   固定顶栏：常态不显示（<992px 整条 display:none），页面前部 hero 滚出
   视口后由 js 加 .is-visible，从顶部滑入；同一帧里站点头部向上滑出。
   行为：js/page-nav.js
===================================================================== */
.page-nav {
  display: none;
}

/* 深色条收窄到与 .header-inner 同宽（最大 1440px）并居中 */
.page-nav__container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  background: var(--nb-footer);
  border-radius: 0 0 20px 20px;
}

.page-nav.is-visible .page-nav__container {
  box-shadow: 0 8px 24px rgba(16, 35, 55, 0.18);
}

.page-nav__bar {
  display: flex;
  align-items: center;
  padding: 0 var(--nb-gutter);
  background: var(--nb-footer);
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}

/* 当前页页签：渐变高亮块 */
.page-nav__tab--active {
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  padding: 0 10px;
  row-gap: 10px;
  background-image: linear-gradient(132.27deg, rgba(38, 167, 254, 0.5) 0%, rgba(2, 203, 100, 0.5) 100%);
}

.page-nav__label--active {
  text-align: center;
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
}

.page-nav__tab {
  display: flex;
  flex-grow: 1;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  column-gap: 10px;
  padding: 0 10px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.page-nav__label {
  flex-grow: 1;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
}

.page-nav__tab:hover .page-nav__label {
  color: #ffffff;
}

/* 右侧按钮：pill 布局，配色/三态交给通用 .nb-state-* */
.page-nav__tab-btn {
  display: flex;
  align-items: center;
  column-gap: 20px;
}

.page-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  border-radius: 999px;
  height: 44px;
  padding: 8px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.page-nav__btn img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* 站点头部随 bar 吸附滑出/滑回，两个方向都要过渡；HEADER 区块只过渡了
   box-shadow，这里补上 transform */
.site-header {
  transition: box-shadow .3s ease, transform .3s ease;
}

.site-header.is-hidden-by-nav {
  transform: translateY(-100%);
}

/* ---------- lg: >= 992px ---------- */
@media (min-width: 992px) {
  /* 顶栏进入固定态：常态停在视口上方（translateY(-100%)），滚过 hero
     后加 .is-visible 滑入吸顶；<992px 时基础规则 display:none 已隐藏。 */
  .page-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    transform: translateY(-100%);
    transition: transform .3s ease;
  }

  .page-nav.is-visible {
    transform: translateY(0);
  }
}