/* ==========================================================================
   门户站点样式 —— 复刻 zaai.world 首页结构与视觉
   ========================================================================== */

/* ------------------------------ 导航栏 ---------------------------------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* 【导航栏】原来写死 rgba(5,5,8,0.8) —— 一个接近纯黑的浮层，
     之前的批量替换按 rgba(17,24,39) / #0c101b 这些写法扫，
     漏掉了这种「五分制」的写死值，结果整站变浅了但导航条还是黑的，
     截图上像给页面扣了顶黑帽子。
     浅色方案改用「白色 + 高模糊」的毛玻璃：滚动时 hero 图从下面透上来是
     极淡的冷色，既保持浮层的分离感，又不会在浅底上砸出一块黑。 */
  /* 【踩坑记录：这里的白色浮层被批量脚本误改过】
     我写了个脚本把全站的 rgba(255,255,255,α) 统一换成深色，
     因为绝大多数"白色半透明"确实是深色方案遗留的白上加白。
     但这个导航栏是例外 —— 它本来就该是白的。
     结果脚本把它改成了 rgba(15,23,42,0.3)，白导航条变成灰黑条。
     已改回白色，并把不透明度从 0.82 提到 0.92：
     0.82 时背景图透上来把实际底色压到 rgb(176,181,189)，
     导航文字的对比度掉到 4.14 / 2.54，不达标。 */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-color);
}
.navbar__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px) { .navbar__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .navbar__inner { padding: 0 2rem; } }

.navbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4rem;
}

/* 8 个中文导航项 + 登录按钮在 1024px 以下挤不下（实测 768px 会把品牌名压成竖排、
   按钮挤出右边界），因此桌面导航从 1024px 才展开，之前一律走汉堡菜单 */
.navbar__links {
  display: none;
  align-items: center;
  gap: 0.25rem;
}
@media (min-width: 1024px) { .navbar__links { display: flex; } }

.nav-link {
  position: relative;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-link:hover,
.nav-link.active { color: var(--text-primary); }
.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background: var(--accent-gradient);
  border-radius: 1px;
}

/* 站外链接：带外链小箭头 */
.nav-link--ext { display: inline-flex; align-items: center; gap: 0.25rem; }
.nav-link__ext {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.nav-link--ext:hover .nav-link__ext,
.nav-link--ext.active .nav-link__ext { opacity: 1; }

/* 1024–1279px 宽度仍偏紧，收紧间距与字号给登录按钮留余量 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .navbar__links { gap: 0; }
  .nav-link { padding: 0.5rem 0.5rem; font-size: 0.8125rem; }
  .nav-link.active::after { left: 0.5rem; right: 0.5rem; }
  .navbar__actions .btn { padding-left: 0.75rem; padding-right: 0.75rem; }
}

.navbar__actions { display: none; align-items: center; gap: 0.75rem; flex-shrink: 0; }
@media (min-width: 1024px) { .navbar__actions { display: flex; } }

/* ---------------------------- 返回上一页按钮 -----------------------------
   只在「移动导航模式」出现（< 1024px，正是桌面导航项收起、改走汉堡菜单的
   同一断点）。桌面端有完整导航条，不需要这个按钮，因此一律 display:none。

   按钮由 site.js 注入，默认带 hidden 属性，由 JS 在挂载后移除 ——
   这样做的好处是：即使 JS 未执行（或被拦截），按钮也不会变成一个
   没有点击响应的死图标。 */
.navbar__lead {
  display: flex;
  align-items: center;
  /* 返回按钮自身有 44px 宽的热区，图标只占中间 20px，
     右侧天然留白约 12px；这里再加 2px 让图标与 logo 的间距看起来均匀 */
  gap: 2px;
  min-width: 0;
}

.navbar__back {
  display: none;
  align-items: center;
  justify-content: center;
  /* 44×44 触摸热区（iOS 人机界面指南建议值）；图标本身仍是 20px */
  width: 44px;
  height: 44px;
  /* 负左边距让图标视觉上与品牌 logo 左边缘对齐，不让顶栏整体右移 */
  margin-left: -12px;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  transition: color 0.18s, background 0.18s;
  flex: none;
  -webkit-tap-highlight-color: transparent;
}
.navbar__back:active {
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.075);
}
@media (hover: hover) {
  .navbar__back:hover { color: var(--text-primary); background: rgba(15, 23, 42, 0.05); }
}
@media (max-width: 1023px) {
  .navbar__back:not([hidden]) { display: flex; }
}

.navbar__toggle {
  padding: 0.5rem;
  color: var(--text-secondary);
  transition: color 0.2s;
  display: block;
}
.navbar__toggle:hover { color: var(--text-primary); }
@media (min-width: 1024px) { .navbar__toggle { display: none; } }

.navbar__mobile {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  /* 【存量 bug 修复】这里原本是 rgba(10,14,26,0.97) —— 深色方案遗留的近黑底。
     浅色改造时文字色统一换成了 --text-primary #0d1526（深墨蓝），
     但菜单底色漏改，于是深字压深底，实测对比度只有 1.06（门槛 4.5）。
     表现：手机上展开汉堡菜单，7 个导航项全部看不见，只剩「立即登录」按钮。
     改法与 .navbar 保持一致（白色 + 高模糊），这样展开菜单像是导航条
     向下延伸，而不是凭空多出一块黑面板。 */
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 32px -20px rgba(15, 23, 42, 0.25);
  /* 导航栏是 fixed，菜单高度超过视口时无法靠页面滚动看到底部，
     因此菜单自身可滚动（登录后展开个人资料卡时尤其需要） */
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.navbar__mobile-inner { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.navbar__mobile-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-primary);
  transition: all 0.2s;
}
.navbar__mobile-link:hover { background: rgba(15, 23, 42, 0.04); color: var(--text-primary); }
.navbar__mobile-link .nav-link__ext { width: 0.8125rem; height: 0.8125rem; }
.navbar__mobile-cta { padding-top: 1rem; }

/* -------------------------------- 首屏 ---------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-h);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/hero-bg.jpg');
  background-size: cover;
  /* 【浅色图裁切 + 干掉背景里的招牌字】
     hero 容器很扁（1440×382，比例 3.77），图片是 1.79。
     cover 会先把宽度撑满（缩放 0.75，绘制成 1440×805），
     再裁掉 423px 的高度 —— 垂直方向有超过一半被裁掉，所以
     background-position 的 Y 值很关键。

     实测（1440 宽视口）：Y=32% 时顶部裁 135px，原图里建筑招牌上的
     "AI Inauction" 落在视口 y≈19px，正好卡在导航栏下沿，怎么加白雾
     都留一层残影。Y=40% 时顶部裁到 169px，那行字整体被裁出画外，
     同时画面主体（地形光带）上移，展示反而更完整。
     => 定 40%，这样连"要不要用白雾去糊招牌字"这个难题都不存在了。 */
  background-position: center 40%;
  background-repeat: no-repeat;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  /* 【深色→浅色，遮罩要反过来用】
     深色方案里这层是「压暗」，好让白字浮起来；
     浅色方案里必须改成「提亮」，让深色标题在图上读得清。
     两个部分缺一不可：

     ① 一层椭圆白雾，集中在标题文字所在的高度带（约 40%）。
        它同时解决两个问题：把建筑上原有的 "AI Inauction" 字样糊掉
        （否则会和我们的 hero 标题抢注意力），以及给标题铺一块干净底板。
     ② 一条向下到底色的融合渐变，末端必须等于 --bg-primary，
        否则 hero 和下面的正文区之间会露出一条能看出来的色差。

     白雾用椭圆而不是整片，是为了让上下两侧仍能看到背景图的
     天空和霓虹光带 —— 全糊掉的话图就白换了。 */
  background:
    /* 【白雾浓度的调参过程】
       第一版给了 0.90 中心浓度 + 78%×62% 的大椭圆，结果整块 hero 被
       洗成纯白（实测天空带亮度 241、底部 236，而底色 #f5f8fc 才 244）——
       图片基本看不见了，用户换的图等于白换。
       这一版把椭圆收紧到 74%×40%（高度上只罩住标题那一带），
       中心浓度降到 0.72，并在 68% 就开始快速衰减。
       目标：标题背后够白能压住字，标题上下两侧仍能看见天空和霓虹光带。 */
    radial-gradient(ellipse 74% 46% at 50% 38%,
      rgba(245, 248, 252, 0.80) 0%,
      rgba(245, 248, 252, 0.66) 40%,
      rgba(245, 248, 252, 0.20) 70%,
      transparent 92%),
    /* 底部融合：只在最后 45% 才开始往底色走，
       上半段几乎不加白，把图留给 hero 自己。 */
    /* 顶部这一段只做轻微的白色过渡，不需要再靠它去盖招牌字了
       （招牌字已经通过裁切解决）。保持 0.30 → 0 的柔和收口，
       让 hero 顶部和白色导航栏衔接自然、不出硬边。 */
    linear-gradient(180deg,
      rgba(245, 248, 252, 0.30) 0%,
      rgba(245, 248, 252, 0) 18%,
      rgba(245, 248, 252, 0.06) 40%,
      rgba(245, 248, 252, 0.34) 70%,
      var(--bg-primary) 100%);
}
.hero__dots {
  position: absolute;
  inset: 0;
  /* 网点纹理：深色方案里是白色微点（在黑底上才看得见），
     浅色方案必须换成深色低透明度，否则白点叠白雾 = 完全消失。 */
  background-image: radial-gradient(rgba(15, 23, 42, 0.055) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.5;
}
.hero__glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  /* 蓝紫光晕在深色底上是「氛围」，在浅色底上大面积铺开就是「脏」——
     浅灰底被染成灰蓝色，像蒙了层雾。
     而且新背景图本身已经带了青/紫霓虹光带，这层光晕属于重复。
     所以强度砍到原来的四分之一，只保留一点极淡的冷色倾向。 */
  background: radial-gradient(circle, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.03) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

/* 参考站 hero 为紧凑横幅（约 388px），仅标题 + 副标题 */
.hero__inner {
  position: relative;
  max-width: 80rem;
  margin: 0 auto;
  padding: 3rem 1rem 3.5rem;
  text-align: center;
}
@media (min-width: 640px) {
  .hero__inner { padding: 4rem 1.5rem 4.5rem; }
}
@media (min-width: 1024px) {
  .hero__inner { padding: 5rem 2rem 4.5rem; }
}

.hero__content { max-width: 56rem; margin: 0 auto; }

.hero__title {
  font-size: 1.875rem;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
  /* 标题用深墨色，不用白 —— 浅色 hero 上白字等于没有。
     字体粗细 900 + 6rem 大字，配合下面那层白雾，
     在背景图上是能读的（实测见 audit-contrast）。 */
  color: var(--text-primary);
}
@media (min-width: 640px) { .hero__title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero__title { font-size: 6rem; white-space: nowrap; } }

.hero__title .gradient-text {
  /* 【渐变字在浅色方案里要重做】
     深色方案：蓝紫青渐变 + 紫色外发光，在黑底上像霓虹。
     浅色方案下有两个问题：
       1) 青色端 #0891b2 在浅蓝白天空上对比度只有 3.5，半句标题会糊掉；
       2) 外发光 drop-shadow 的紫色在黑底上是「光」，在白底上是「污渍」。
     处理办法：渐变收窄到「深蓝 → 靛紫」这两档（都在 5.0 以上），
     发光去掉，换成一圈极淡的白描边提升与背景的分离度。 */
  background: linear-gradient(100deg, #1e40af 0%, #4c1d95 52%, #1e40af 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 这里原本是白色描边（在浅底上给渐变字一点分离度），
     被批量脚本当成"白上加白"误改成了深色，
     结果渐变字外圈有一道灰边，像描边画歪了。改回白色。 */
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.85));
}

.hero__subtitle {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 40rem;
  margin: 0 auto;
}
@media (min-width: 640px) { .hero__subtitle { font-size: 1.25rem; } }

/* ------------------------------ 区块容器 -------------------------------- */
.sec { position: relative; padding: 4rem 0; }
@media (min-width: 640px) { .sec { padding: 6rem 0; } }
.sec__inner { position: relative; max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .sec__inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .sec__inner { padding: 0 2rem; } }

.sec__head { text-align: center; margin-bottom: 3.5rem; }
.sec__head--tight { margin-bottom: 2.5rem; }
.sec__head--mt { margin-top: 4rem; }
.sec__head .section-subtitle { margin: 0 auto; }

.sec--partners { position: relative; overflow: hidden; }
.sec__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(30, 58, 138, 0.14) 50%, transparent 100%);
  pointer-events: none;
}

/* ---------------------------- 五大服务卡片 ------------------------------ */
.plaza-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 64rem;
  margin: 0 auto;
}
@media (min-width: 768px) { .plaza-grid { grid-template-columns: repeat(6, 1fr); } }

.plaza-card {
  display: block;
  border-radius: var(--radius);
  padding: 1.5rem;
  grid-column: span 1;
}
@media (min-width: 768px) {
  .plaza-card--wide { grid-column: span 3; }
  .plaza-card--narrow { grid-column: span 2; }
}

.plaza-card__icon { font-size: 1.875rem; line-height: 1; margin-bottom: 1rem; display: block; }
.plaza-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.plaza-card__desc { font-size: 0.875rem; line-height: 1.7; color: var(--text-secondary); }

/* 站内卡片改走外链时，标题右侧标一个外链箭头，避免用户以为还在本站 */
.plaza-card__title--ext {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.plaza-card__title-ext {
  width: 0.8125rem;
  height: 0.8125rem;
  flex-shrink: 0;
  color: #a78bfa;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.plaza-card:hover .plaza-card__title-ext { opacity: 1; }

/* -------- 站外入口卡（AI智能办公）：横贯通栏，与站内卡片作视觉区分 -------- */
.plaza-card--ext {
  grid-column: span 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border: 1px solid rgba(139, 92, 246, 0.32);
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.14), rgba(147, 51, 234, 0.14)),
    var(--bg-card);
}
@media (min-width: 768px) { .plaza-card--ext { grid-column: span 6; } }

.plaza-card__icon--lead {
  margin-bottom: 0;
  font-size: 2rem;
  flex-shrink: 0;
}
.plaza-card__body { flex: 1 1 auto; min-width: 0; }
.plaza-card--ext .plaza-card__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.plaza-card__badge {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  color: var(--purple-ink);
  background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.plaza-card__arrow {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: var(--purple-ink);
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.28);
  transition: transform 0.2s, background 0.2s;
}
.plaza-card__arrow svg { width: 1.125rem; height: 1.125rem; }
.plaza-card--ext:hover .plaza-card__arrow {
  transform: translateX(3px);
  background: rgba(139, 92, 246, 0.22);
}
@media (max-width: 639px) {
  /* 窄屏不换行：图标 + 文字 + 箭头保持同一行，箭头不能掉到左下角 */
  .plaza-card--ext { gap: 0.875rem; }
  .plaza-card__icon--lead { font-size: 1.625rem; }
  .plaza-card--ext .plaza-card__desc { font-size: 0.8125rem; }
  .plaza-card__arrow { width: 2rem; height: 2rem; }
  .plaza-card__arrow svg { width: 1rem; height: 1rem; }
}

/* ---------------------------- 合作伙伴 logo ----------------------------- */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* 参考站：白底卡片，logo 图最大高 3rem / 宽 10rem */
.logo-card {
  border-radius: var(--radius);
  height: 5rem;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 【白底卡片在浅色页面上的问题】
     深色方案里这块是"白卡浮在深底上"，靠重阴影就能立住。
     改成浅色后底色是 #f5f8fc、卡片是 #fff，两者亮度差只有 1.07 ——
     卡片会糊进背景，看上去像没有边界的一块污渍。
     解法不是加重阴影（白底上的黑阴影会发灰），而是：
       ① 补一条极淡的描边，把边界交代清楚；
       ② 阴影换成冷色、扩散拉大、浓度压低。 */
  background: #fff;
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 26px -14px rgba(15, 23, 42, 0.16);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.logo-card:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.22);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 18px 34px -16px rgba(37, 99, 235, 0.22);
}
.logo-card img {
  max-height: 3rem;
  max-width: 10rem;
  width: auto;
  object-fit: contain;
}
.logo-card__text {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-faint);
  white-space: nowrap;
}

/* 窄屏：卡片宽度原本随 logo 内容浮动，两列并排时参差不齐，
   改为等宽两列栅格让边缘对齐 */
@media (max-width: 639px) {
  .logo-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .logo-card { height: 4.5rem; padding: 0 0.75rem; }
  .logo-card img { max-height: 2.5rem; max-width: 100%; }
  .logo-card__text { font-size: 1rem; }
  /* 双列布局下若某项数，让最后一项居中占满整行，避免边缘留空突兀。
     合作伙伴 9 个（点学科技为文字卡）、园区 3 个，均为奇数，都会命中此规则。 */
  .logo-row .logo-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    min-width: calc(50% - 0.375rem);
  }
}

/* -------------------------------- 页脚 ---------------------------------- */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}
.footer__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 4rem 1rem;
}
@media (min-width: 640px) { .footer__inner { padding: 4rem 1.5rem; } }
@media (min-width: 1024px) { .footer__inner { padding: 4rem 2rem; } }

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } }

.footer__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.8;
}
.footer__text {
  font-size: 0.875rem;
  line-height: 1.8;
  /* 原来写死 var(--text-secondary)，改主题时不会跟着走。统一用变量，
     页脚正文的对比度就能和全站一起受控。 */
  color: var(--text-secondary);
}

.footer__bottom {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--text-faint);
}
@media (min-width: 640px) { .footer__bottom { flex-direction: row; } }
.footer__company { color: var(--text-faint); }

/* 占位页（广场页暂未开发） */
.placeholder {
  min-height: 100vh;
  padding-top: calc(var(--nav-h) + 6rem);
  padding-bottom: 6rem;
  text-align: center;
}
.placeholder__title { font-size: 2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; }
.placeholder__desc { color: var(--text-secondary); margin-bottom: 2rem; }