/* ============================================================
   速博学 SuperStudying · 主页样式
   ============================================================ */

/* ── 站点唯一字体：OPPO Sans 4.0（OPPO 出品，免费商用） ──
   2026-10-04 用户要求：全项目统一 OPPO Sans、删去其余字体 ——
   原「柳宋 LiuSong」与「Fallback CJK」两套 @font-face 及其字体文件已一并移除。
   官方即可变字体，wght 轴 100–700：标语取 150、正文取 300（见 :root）。
   子集已覆盖页面全部用字；万一缺字，由系统字体链兜底（见 --sys-fonts）。 */
@font-face {
  font-family: 'OPPOSans';
  src: url('fonts/oppo-sans.woff2') format('woff2');
  font-weight: 100 700;
  font-display: swap;
}

/* ── 微信内置浏览器的字号锁定 ──
   微信内核会在网页之上再叠一层「字体放大」：iOS 给 <body> 写内联的
   `-webkit-text-size-adjust: N%`，安卓调 WebView 的 setTextZoom(N%)。
   两者效果相同 —— 只把每个元素的 font-size 乘以 N%，width / height /
   padding / margin 一律不动。于是固定高度的导航（72px）、按钮（40/44/48px）、
   胶囊（22/24px）会被文字撑爆，看起来又大又挤，而 Safari 没有这层机制。
   这里两件事一起做：
     ① 用 !important 压住 text-size-adjust —— iOS 微信写的是**内联样式**，
        普通声明压不住（作者 origin 的 !important 优先于内联的普通声明）；
     ② 把 rem 基准钉死在 16px —— 页面 35 处字号用 rem，基准一旦被改就整体漂移。
   锁定后的渲染与 iOS Safari（根字号 16px、无 text-size-adjust）一致：
   正文 18px / 最小 12px，仍高于 HIG《Typography》给出的下限（iOS 最小 11pt）。 */
html {
  font-size: 16px;
}
body {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

:root {
  color-scheme: dark;
  --bg: #000;
  --fg: #fff;
  /* 次级文字：在黑底上对比度 ≥7:1（HIG Dark Mode 建议小字号尽量做到 7:1） */
  --muted: #959595;
  --muted-2: #ffffff99;
  --muted-3: #ffffff96;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.42);
  --card: #121212;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad-x: 80px;
  /* 系统回退链 */
  --sys-fonts: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  /* 主字体：OPPO Sans；缺字退到系统中文/无衬线（见 --sys-fonts） */
  --font: 'OPPOSans', var(--sys-fonts);
  /* 已定稿：标语 150、正文 300。
     正文那套是"正文基准 + 0/100/200"（--fw-medium / --fw-strong），
     所以是 300 / 400 / 500，保留"标题 > 卡片标题 > 正文"的层级。 */
  --tagline-weight: 150;
  --fw-body: 300;
  --fw-medium: 400;
  --fw-strong: 500;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  /* 正文默认字重：段落、页脚链接、示意卡标签等都靠继承拿到它（见 :root 的 --fw-*） */
  font-weight: var(--fw-body);
  /* OPPO Sans 是可变字体，字重由 wght 轴提供；禁用合成加粗，避免字形被算法糊掉 */
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  /* 仅作最后防线：横向溢出应当被修掉，而不是靠这里藏起来。
     任何被裁切的元素都是 bug —— 打开 ?debug=clip 可列出它们。 */
  overflow-x: hidden;
}

/* 键盘焦点必须可见（自定义光标隐藏了系统指针，键盘用户全靠它定位） */
:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 3px;
}

/* 全页背景光场（固定层，位于所有内容之下） */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  /* 模糊滤镜：让烟雾更柔、更接近体积雾（已降至原来的 60%） */
  filter: blur(18px);
  opacity: 0;
  transition: opacity 0.9s ease-out;
}
.page-bg.is-visible {
  opacity: 1;
}

/* 群鸟粒子层：在模糊烟雾之上、页面内容之下 */
.bird-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease-out;
}
.bird-field.is-visible {
  opacity: 1;
}

/* 内容层压在背景之上 */
.site {
  position: relative;
  z-index: 2;
}

/* ── 环形自定义光标（iPadOS 风格） ── */
.cursor-custom,
.cursor-custom * {
  cursor: none !important;
}
.cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cursor-ring.is-on {
  opacity: 1;
}
.cursor-ring i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.16), inset 0 0 8px rgba(255, 255, 255, 0.07);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.cursor-ring.is-hover i {
  transform: scale(1.8);
  border-color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.08);
}

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

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

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 max(var(--pad-x), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

/* ── 入场动效 ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-rotate {
  opacity: 0;
  transform: translateY(24px) rotate(1.5deg);
  transform-origin: 0 100%;
  transition: opacity 1.05s var(--ease), transform 1.05s var(--ease);
}
.reveal-rotate.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(0);
}
.stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger > .reveal:nth-child(2) { transition-delay: 0.12s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.24s; }

/* ── 通用 CTA（胶囊描边按钮） ── */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted-2);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s, padding 0.2s;
}
.cta .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  margin-inline-start: 0;
  opacity: 0;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.2s ease, opacity 0.2s ease, margin-inline-start 0.2s ease;
}
.cta .arrow img {
  width: 24px;
}
.cta:hover {
  border-color: #fff;
  background: #ffffff0d;
  color: #fff;
  padding: 12px 12px 12px 20px;
}
.cta:hover .arrow {
  width: 24px;
  margin-inline-start: 6px;
  opacity: 1;
}

/* ── 导航 ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #0006;
  backdrop-filter: blur(16.75px);
  -webkit-backdrop-filter: blur(16.75px);
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  position: relative;
}
.nav-logo,
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* HIG《Layout》：点击区至少 44×44pt。logo 视觉高度不足 44，用伪元素把命中区补到 44 */
  position: relative;
}
.nav-logo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.nav-logo img {
  height: 45px;
  width: auto;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}
.nav-menu a,
.nav-menu button {
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--muted-2);
  font-weight: var(--fw-body);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s;
  font-family: inherit;
}
.nav-menu a:hover,
.nav-menu button:hover {
  color: #ffffffd6;
}
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  /* HIG《Layout》：点击区至少 44×44pt（原 40×40） */
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
}
/* 两条横线：展开时向中间收拢并交叉成叉（仿 Apple 官网的丝滑过渡） */
.nav-burger-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 12px;
}
.nav-burger-bars i {
  position: absolute;
  left: 0;
  width: 100%;
  /* ⚠️ 高度取整（2px）+ 整数 top：原来写 1.5px，两条线落在不同的设备像素相位上，
     浏览器吸附后一条变 2px、另一条变 1px → 看起来"一粗一细"。取 2px 后两条完全一致。 */
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: top 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-burger-bars i:nth-child(1) {
  top: 0;
}
.nav-burger-bars i:nth-child(2) {
  top: calc(100% - 2px);
}
/* 展开态：两条横线先收拢到中线，再各自旋转 45° 交叉 */
.nav-burger.is-open .nav-burger-bars i {
  top: calc(50% - 1px);
}
.nav-burger.is-open .nav-burger-bars i:nth-child(1) {
  transform: rotate(45deg);
}
.nav-burger.is-open .nav-burger-bars i:nth-child(2) {
  transform: rotate(-45deg);
}
/* 无障碍：尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  .nav-burger-bars i {
    transition: none;
  }
}
/* 移动端菜单：苹果 globalnav 式展开 ——
   面板自上而下「长」出来（max-height 过渡），条目再自上而下逐个渐显（translateY + 阶梯延迟）。
   收起态用 max-height:0 + visibility:hidden（而非 display:none）——display 无法参与过渡。 */
.nav-drawer {
  display: flex;
  flex-direction: column;
  padding: 0 24px 16px;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.46s cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s linear 0.46s;
}
.nav-drawer.is-open {
  max-height: 320px;
  visibility: visible;
  transition: max-height 0.46s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
}
.nav-drawer a,
.nav-drawer button {
  display: block;
  padding: 12px 0;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #fff9;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  text-align: right;
  font-family: inherit;
  /* 条目：收起时上移淡出；展开时逐个落下渐显 */
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-drawer.is-open a,
.nav-drawer.is-open button {
  opacity: 1;
  transform: none;
}
/* 阶梯延迟：越靠下的条目越晚出现（苹果式「自上而下依次浮现」） */
.nav-drawer.is-open > *:nth-child(1) {
  transition-delay: 0.06s;
}
.nav-drawer.is-open > *:nth-child(2) {
  transition-delay: 0.13s;
}
.nav-drawer.is-open > *:nth-child(3) {
  transition-delay: 0.2s;
}
.nav-drawer.is-open > *:nth-child(4) {
  transition-delay: 0.27s;
}
.nav-drawer a:hover,
.nav-drawer button:hover {
  color: #fff;
}
/* 无障碍：尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  .nav-drawer,
  .nav-drawer a,
  .nav-drawer button {
    transition: none;
  }
  .nav-drawer a,
  .nav-drawer button {
    opacity: 1;
    transform: none;
  }
}

/* ── Hero ── */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(100vh - 72px);
  min-height: calc(100dvh - 72px);
  padding: 40px 0;
}
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 20px;
  margin: 0 auto;
}
/* 满屏标语 + 打字机效果 */
.tagline {
  margin: 0;
  /* 父级 .hero-content 是 align-items:center 的弹性列，默认会让 h1 按 max-content
     收缩。显式撑满，窄屏下每行 .type-wrap 才有正确的宽度基准。 */
  width: 100%;
  /* 字体沿用站点主字体（OPPO Sans）。
     单行时 8 个字 + 7 处 0.336em 字距 ≈ 10.9em，故用 (100vw−40px)/10.9 兜底，
     保证任何宽度都不溢出。下限取 4rem（64px）：窄屏拆成三行后标语本就该是
     64px 量级，单行这里必须跟上，否则 730–1400px 区间标语（4.6vw 只有 33–64px）
     会小于 32px 的小节标题、层级倒挂。 */
  font-size: min(clamp(4rem, 4.6vw, 5.2rem), calc((100vw - 40px) / 10.9));
  /* 字重由气泡的可变轴滑杆控制（见 --tagline-weight） */
  font-weight: var(--tagline-weight);
  line-height: 1.16;
  color: #fff;
  /* 纯白：不用 opacity 压暗，否则会偏灰 */
  opacity: 1;
  /* 自发光（emissive）：**不用红蓝色散** —— 色散会在细笔画上产生彩边，与「自发光」相悖。
     改为同色系多层辉光：近层紧而亮（勾出灯管轮廓）→ 中层柔和扩散（bloom）→ 远层极淡光晕。 */
  text-shadow: 0 0 0.055em rgba(255, 255, 255, 0.95), 0 0 0.16em rgba(255, 255, 255, 0.7),
    0 0 0.42em rgba(226, 238, 255, 0.5), 0 0 0.95em rgba(176, 208, 255, 0.34),
    0 0 1.9em rgba(124, 172, 255, 0.22);
  text-align: center;
  letter-spacing: 0.336em;
  white-space: nowrap;
}
/* 首屏下滑引导（文字 + 简约下箭头） */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  color: var(--muted-2);
  transition: color 0.2s, opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}
.scroll-cue:hover {
  color: #fff;
}
/* 下滑后渐隐：visibility 一并切换，避免留下不可见的可聚焦链接 */
.scroll-cue.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
}
.scroll-cue svg {
  width: 22px;
  height: 22px;
  animation: cueBob 1.8s var(--ease) infinite;
}
@keyframes cueBob {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}
/* 下划线：横贯整条标语。
   此前它挂在最后一个 .type-wrap（"最优解"）内部 → 宽度只有那 3 个字 ≈ 4em，
   且末字之后的 0.336em 字距让右端多出一截，视觉上就是「长度不够且偏右」。
   标语固定 8 个字（寻求学习的最优解），汉字字身 1em、字距 0.336em，
   故墨迹总宽 = 8em + 7×0.336em = 10.352em（末字后的字距不计入视觉长度）。
   用 margin: … auto 在居中容器里与居中文字对齐。 */
.tagline-underline {
  display: block;
  height: 1px;
  margin: 0.34em auto 0;
  width: 10.352em;
  background: currentColor;
  opacity: 0.35;
}
.type-wrap {
  position: relative;
  display: inline-block;
}
/* 单字：承载 Dock 式磁性放大（锚点取 75%，上移程度介于"底边"与"中心"之间） */
.ch {
  display: inline-block;
  transform-origin: 50% 75%;
  will-change: transform;
}
html.js .type-text {
  visibility: hidden;
}
.type-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.84em;
  margin-left: 0.06em;
  background: currentColor;
  vertical-align: -0.08em;
  animation: caretBlink 1.05s steps(2, start) infinite;
}
@keyframes caretBlink {
  to {
    opacity: 0;
  }
}
.hero-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── 最新研究 ── */
.research {
  padding: 80px 0;
}
.research-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.research-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.research-title-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 134px;
}
.research-title {
  font-size: 2rem;
  font-weight: var(--fw-strong);
  line-height: 2.5rem;
  margin: 0;
}
.research-desc {
  font-size: 1.125rem;
  line-height: 1.52;
  color: var(--muted);
  max-width: 1000px;
  margin: 0;
}
.research-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.rcard {
  position: relative;
  aspect-ratio: 154 / 117;
  border-radius: 16px;
  overflow: clip;
  background: var(--card);
  border: 1px solid var(--line);
  transition: transform 0.2s;
}
.rcard:hover {
  transform: translateY(-4px);
}
.rcard-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform 0.3s ease, filter 0.4s ease;
}
.rcard:hover .rcard-cover {
  transform: scale(1.05);
  filter: grayscale(0);
}
.rcard-shade {
  position: absolute;
  inset: 0;
  background: #0006;
  transition: background 0.4s ease;
  pointer-events: none;
}
.rcard:hover .rcard-shade {
  background: transparent;
}
.rcard-grad {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 37%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 62.5%, transparent);
  pointer-events: none;
}
/* ── 子品牌标（IconPark 能源与生命：词林=christmas-tree-one、知海=ripple） ──
   两处底都是深色（产品卡是照片 + 40% 黑罩；示意卡是 #3333334d + blur），
   故图标用白色（HIG《Icons》：图标与底色须有足够对比）。 */
.rcard-mark {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  /* 半透明深色托底：hover 时黑罩淡出、照片变亮，图标仍然可读 */
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* 子品牌标：现在引用 brand/sub-brands/ 下的 SVG 文件（不再是内联 svg），
   颜色已由 -on-dark / -on-light 变体固定，这里只控尺寸 */
.rcard-mark img {
  width: 21px;
  height: 21px;
}
/* 示意卡顶栏的品牌标样式已移除（主页「轻松解决学习难题」下的两张卡片不放子品牌 logo） */

.rcard-info {
  position: absolute;
  left: 19px;
  right: 76px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* 右下角箭头按钮（沿用「试试立即体验」的旋转特效） */
.rcard-go {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 150px;
  background: #ffffff2e;
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.rcard-go img {
  width: 17px;
  opacity: 0.56;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s,
    filter 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.rcard:hover .rcard-go {
  background: #ffffffe6;
}
.rcard:hover .rcard-go img {
  opacity: 1;
  transform: rotate(90deg) scale(1.1);
  filter: brightness(0);
}
.rcard-date {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--muted-2);
}
.rcard-title {
  font-size: 1rem;
  font-weight: var(--fw-strong);
  line-height: 1.5rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 展示（原站为视频背景，此处以动态渐变占位） ── */
.showcase {
  position: relative;
}
.showcase-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
}
.showcase-media {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1440 / 700;
  background: radial-gradient(80% 120% at 70% 20%, #1c1c1c, #0a0a0a 60%, #000);
}
.showcase-overlay {
  grid-area: 1 / 1;
  z-index: 1;
  position: relative; /* 供右上角"暂停自动轮播"按钮定位 */
  padding: 80px;
  display: flex;
  flex-direction: column;
}
.showcase-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.showcase-title {
  font-size: 2rem;
  font-weight: var(--fw-strong);
  line-height: 1.28;
  text-align: center;
  margin: 0;
}
.showcase-desc {
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--muted-3);
  text-align: center;
  max-width: 1000px;
  letter-spacing: -0.88px;
  margin: 0;
}
/* 暂停 / 继续自动轮播（自动更新的内容必须可暂停） */
.showcase-toggle {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #ffffff14;
  color: var(--muted-2);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.showcase-toggle:hover {
  background: #ffffff26;
  color: #fff;
  border-color: var(--line-strong);
}
.showcase-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.showcase-toggle .ico-play {
  display: none;
  fill: currentColor;
  stroke: none;
}
.showcase-toggle.is-paused .ico-pause {
  display: none;
}
.showcase-toggle.is-paused .ico-play {
  display: block;
}

.showcase-left {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin-top: auto;
  margin-bottom: auto;
}
.showcase-bars {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 留出足够的垂直间距，让相邻切换条的命中区不重叠 */
  width: 8px;
  padding-top: 12px;
  flex-shrink: 0;
}
.showcase-bar {
  position: relative;
  width: 100%;
  height: 24px;
  border-radius: 4px;
  background: #323232;
  cursor: pointer;
  transition: height 0.3s ease;
}
/* 命中区外扩到 44×44（HIG：iOS 建议 44×44pt，最小 28×28pt）。
   视觉仍是 8×24 的细条；用伪元素扩命中区，不改变外观。 */
.showcase-bar::before {
  content: '';
  position: absolute;
  inset: -8px -18px;
}
.showcase-bar.is-active {
  height: 50px;
}
.showcase-bar i {
  display: block;
  width: 100%;
  height: 0;
  background: #6d6d6d;
  border-radius: 4px;
}
.showcase-bar.is-active i {
  animation: barFill 6s linear forwards;
}
@keyframes barFill {
  from { height: 0; }
  to { height: 100%; }
}
.showcase-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  justify-content: flex-end;
  width: 454px;
}
.showcase-titles {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 400px;
}
.showcase-h {
  /* 产品名是小节内的 h3，必须低于 2rem 的小节标题 —— 原 3.5rem 压过了全部 h2。
     1.5rem 与上下两级各差 1.33 倍（18 → 24 → 32），层级均匀。 */
  font-size: 1.5rem;
  font-weight: var(--fw-strong);
  line-height: 1.2;
  margin: 0;
  max-width: 400px;
}
.showcase-slogan {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* 展示区右侧动画（原站为产品视频，此处以 CSS 动画的产品示意替代） */
.showcase-visual {
  position: relative;
  margin-left: auto;
  width: 420px;
  height: 300px;
  flex-shrink: 0;
}
.mock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: 20px;
  background: #3333334d;
  backdrop-filter: blur(23px) brightness(0.72);
  -webkit-backdrop-filter: blur(23px) brightness(0.72);
  border: 1px solid var(--line);
  box-shadow: 0 0 40px #ffffff14, inset 0 0 11px #ffffff0a;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
.mock.is-active {
  opacity: 1;
  transform: none;
}

/* ── 面板类液态玻璃 · 真折射（移植自 cilin LiquidGlass.tsx / liquidGlass.ts） ──
   结构：.liquid-glass（材质外层）> .liquid-glass__warp（只装背景的折射层）。
   为什么要单独一层装背景：位移会把「被作用那一层的像素」整体挪位，若直接作用在外层，
   面板里的文字也会被拧歪。故拆两层 —— 折射只作用在「只装了背景」的 warp 上，内容留在外层保持锐利。
   本层由 glass-refraction.js 注入：给面板类元素（当前为 .mock）挂上 .liquid-glass 并插入 warp。
   ⚠️ 范围：.nav（顶栏）、.rcard-mark（38×38 图标按钮）、.try（按钮）按约定不做折射，见 JS 白名单。 */
/* position 用 :where()（零优先级）兜底：仅当宿主自身没有定位时补 relative，
   不覆盖宿主已有的定位 —— .mock 本就是 position:absolute（两个面板叠放），
   若这里写死 relative 会把它打回文档流、变成上下堆叠（已踩）。 */
:where(.liquid-glass) {
  position: relative;
}
.liquid-glass {
  /* 建栈：让 z-index:-1 的折射层落在「本层背景之上、内容之下」；
     没有它，负 z-index 子层会跑到祖先背景之后 → 折射层直接看不见 */
  isolation: isolate;
  /* 把位移出界的像素裁回圆角矩形，否则圆角外会露出一圈被弯折的内容 */
  overflow: hidden;
  /* 采样交给折射层，避免同一个面上叠两次模糊 */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* 填色也搬到折射层（原 .mock 的 background 与 backdrop-filter 见下） */
  background-color: transparent;
}
.liquid-glass__warp {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  /* ① 把背景抓成这一层的背景：原 .mock 的填色与模糊搬到这里 */
  background-color: #3333334d;
  -webkit-backdrop-filter: blur(23px) brightness(0.72);
  backdrop-filter: blur(23px) brightness(0.72);
  /* ② 再对整层做 SVG 位移 —— 真折射就在这一步。
        filter 不写死在这里，由 glass-refraction.js 用行内 style 指向 per-element 滤镜（url(#…)）。 */
}

.mock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--muted-2);
}
.mock-pill {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: #fff;
  font-size: 0.75rem;
}
.mock-word {
  /* 示意卡内部的"重点信息"层级：24px，与产品名同级，
     不与 32px 的小节标题抢层级（原 2.125rem/34px 与 30px 的 mock-score 近乎重复） */
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  color: #fff;
  margin-top: 4px;
}
.mock-bar {
  height: 6px;
  border-radius: 999px;
  background: #ffffff1f;
  overflow: hidden;
}
.mock-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #ffffffcc;
  animation: mockBar 6s var(--ease) infinite;
}
@keyframes mockBar {
  0% { width: 12%; }
  55% { width: 88%; }
  100% { width: 12%; }
}
.mock-chips {
  display: flex;
  gap: 8px;
}
.mock-chips span {
  padding: 6px 14px;
  border-radius: 999px;
  background: #ffffff14;
  color: var(--muted-2);
  font-size: 0.875rem;
  animation: mockChip 6s linear infinite;
}
.mock-chips span:nth-child(1) { animation-delay: 0s; }
.mock-chips span:nth-child(2) { animation-delay: -2s; }
.mock-chips span:nth-child(3) { animation-delay: -4s; }
@keyframes mockChip {
  0%, 33% { background: #ffffffcc; color: #0a0a0b; }
  34%, 100% { background: #ffffff14; color: #8a8f98; }
}
.mock-foot {
  margin-top: auto;
  font-size: 0.875rem;
  color: var(--muted-2);
}
.mock-q {
  font-size: 1rem;
  line-height: 1.5;
  color: #ffffffd6;
}
.mock-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mock-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #ffffff0f;
  color: var(--muted-2);
  font-size: 0.875rem;
  animation: mockOpt 6s linear infinite;
}
.mock-opt:nth-child(1) { animation-delay: 0s; }
.mock-opt:nth-child(2) { animation-delay: -1.5s; }
.mock-opt:nth-child(3) { animation-delay: -3s; }
.mock-opt:nth-child(4) { animation-delay: -4.5s; }
.mock-opt i {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.3;
}
@keyframes mockOpt {
  0%, 25% { background: #ffffffcc; color: #0a0a0b; }
  26%, 100% { background: #ffffff0f; color: #8a8f98; }
}
.mock-score {
  margin-top: auto;
  align-self: flex-end;
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  color: #fff;
  line-height: 1;
}
.mock-score span {
  font-size: 0.875rem;
  color: var(--muted-2);
  margin-left: 5px;
}

/* 减弱动效偏好：停掉循环动画 */
@media (prefers-reduced-motion: reduce) {
  .mock-bar i,
  .mock-chips span,
  .mock-opt,
  .showcase-bar.is-active i {
    animation: none;
  }
  /* 轴向位移改为纯淡入（HIG：replacing axis transitions with fades） */
  .reveal,
  .reveal-rotate {
    transform: none;
    transition: opacity 0.4s linear;
  }
  /* 下滑引导不再上下浮动 */
  .scroll-cue svg {
    animation: none;
    opacity: 0.85;
  }
  /* 下滑引导只用淡入淡出，不做位移 */
  .scroll-cue.is-hidden {
    transform: translateX(-50%);
  }
}

/* 展示区滚出视口时暂停循环动画（JS 用 IntersectionObserver 切换该类） */
.showcase.is-offscreen .mock-bar i,
.showcase.is-offscreen .mock-chips span,
.showcase.is-offscreen .mock-opt,
.showcase.is-offscreen .showcase-bar.is-active i {
  animation-play-state: paused;
}

/* ── Doodle ── */
.doodle {
  padding: 80px 0;
}
.doodle-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 96px;
}
.doodle-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.doodle-title {
  font-size: 2rem;
  font-weight: var(--fw-strong);
  line-height: 1.28;
  text-align: center;
  margin: 0;
}
.doodle-desc {
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--muted-3);
  text-align: center;
  max-width: 1068px;
  margin: 0;
}
.doodle-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}
.dcard {
  aspect-ratio: 7 / 6;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(0deg, #0003, #0003), var(--card);
  border: 0.5px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s;
}
.dcard:hover {
  transform: translateY(-4px);
}
.dcard-img {
  flex: 1;
  min-height: 0;
  background: #141414;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dcard-img svg {
  width: 62%;
  height: auto;
  opacity: 0.92;
}
.dcard-img.g1 { background: radial-gradient(70% 90% at 30% 20%, #2a2a2a, #101010); }
.dcard-img.g2 { background: radial-gradient(70% 90% at 70% 30%, #262626, #0e0e0e); }
.dcard-img.g3 { background: radial-gradient(70% 90% at 40% 70%, #232323, #0d0d0d); }
.dcard-info {
  flex-shrink: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dcard-title {
  font-size: 1rem;
  font-weight: var(--fw-strong);
  line-height: 1.5rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dcard-desc {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--muted-3);
  margin: 0;
}

/* ── 下载 ── */
.download {
  position: relative;
  padding: 200px 0;
  /* 上下分隔线：界定网格浮动区域的边界 */
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* 下载区 3D 网格地面（canvas 逐瓦片绘制：中央震源起伏 + 鼠标鼓包）
   跟随区块高度铺满；canvas 是替换元素，必须显式给 width/height:100%，
   只写 inset:0 会回退到固有尺寸（canvas 属性宽高） */
.download-sbg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.download-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
.download-group {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
.download-icon {
  width: 162px;
  height: 162px;
  object-fit: contain;
}
.download-title {
  /* 与其它小节标题同为 h2，统一 2rem（原 2.5rem 与它们不一致） */
  font-size: 2rem;
  font-weight: var(--fw-strong);
  line-height: 2.5rem;
  text-align: center;
  margin: 0;
}
.platforms {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* 立即体验 Kimi */
.try {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 395px;
  padding: 16px 16px 16px 24px;
  border-radius: 100px;
  overflow: hidden;
  background: #33333380;
  backdrop-filter: blur(23px);
  -webkit-backdrop-filter: blur(23px);
  border: 0.5px solid var(--line);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.1s;
}
.try:hover {
  background: #3d3d3d99;
  border-color: #ffffff3d;
  box-shadow: 0 0 8px #ffffff0f, 0 0 16px #ffffff0a;
}
.try:active {
  transform: scale(0.98);
}
.try-text {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 36px;
}
.try-label,
.try-hover-label {
  font-size: 1.125rem;
  line-height: 2.25rem;
  white-space: nowrap;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}
.try-label {
  color: var(--muted-2);
  font-weight: var(--fw-body);
}
.try-hover-label {
  position: absolute;
  top: 0;
  left: 0;
  color: #ffffffe6;
  font-weight: var(--fw-medium);
  opacity: 0;
  transform: translateY(4px);
}
.try:hover .try-label {
  opacity: 0;
  transform: translateY(-4px);
}
.try:hover .try-hover-label {
  opacity: 1;
  transform: translateY(0);
}
.try-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 150px;
  background: #ffffff2e;
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.try-icon img {
  width: 17px;
  opacity: 0.56;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s;
}
.try:hover .try-icon {
  background: #ffffffe6;
}
.try:hover .try-icon img {
  opacity: 1;
  transform: rotate(90deg) scale(1.1);
  filter: brightness(0);
}

/* ── 页脚 ── */
.footer {
  padding: 48px 0;
  position: relative;
}
.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 max(var(--pad-x), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}
.footer-top {
  display: flex;
  gap: 96px;
  padding: 56px 0;
}
.footer-brand {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}
.footer-brand-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.footer-brand-info img {
  width: 239px;
  height: 39px;
}
.footer-logo {
  width: 214px !important;
  height: auto !important;
}
.footer-copy {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--muted-2);
}
.footer-copy p {
  margin: 0;
}
.footer-socials {
  display: flex;
  gap: 15px;
}
.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  /* HIG《Layout》：点击区至少 44×44pt（原 40×40） */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff26;
  transition: background 0.2s;
}
.footer-social:hover {
  background: #ffffff50;
}
.footer-social img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}
.footer-cols {
  display: flex;
  gap: 64px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 130px;
}
.footer-col h3 {
  /* 栏目标题要比下面 14px 的链接高一级，否则只剩字重差异、看不出是标题 */
  font-size: 1rem;
  font-weight: var(--fw-strong);
  line-height: 1.5rem;
  margin: 0;
  padding-bottom: 16px;
}
.footer-col a {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #ffffffd6;
  transition: color 0.2s;
}
.footer-col a:hover {
  color: #fff;
}
.footer-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 8px max(var(--pad-x), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))
    calc(8px + env(safe-area-inset-bottom, 0px));
}
.footer-icp {
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: #ffffff99;
  text-align: center;
}
.footer-icp a {
  color: inherit;
}
.footer-icp a:hover {
  color: #fff9;
}
.footer-icp .sep {
  margin: 0 8px;
}

/* ── 响应式 ── */
@media (max-width: 1024px) {
  :root {
    --pad-x: 24px;
  }
  .nav-menu {
    display: none;
  }
  .nav-burger {
    display: flex;
  }
  .hero {
    min-height: calc(100vh - 72px);
    min-height: calc(100dvh - 72px);
    padding: 30px 0;
  }
  .hero-content {
    padding: 0 12px;
  }
  .research-cards,
  .doodle-cards {
    grid-template-columns: 1fr;
  }
  .showcase-overlay {
    padding: 40px 24px;
  }
  .download {
    padding: 120px 0;
  }
  .footer-top {
    flex-direction: column;
    gap: 40px;
  }
  .footer-bottom {
    position: static;
    padding: 24px;
    height: auto;
  }
}

/* ── 展示区：窄屏由「左字右动画」改为「文字在上、动画在下」 ── */
@media (max-width: 1120px) {
  /* 背景不再套用 1440/700 的横屏比例，高度改由内容决定。
     否则窄屏下这一整块会被压成一条矮横条，内容溢出。 */
  .showcase-media {
    aspect-ratio: auto;
  }
  /* 第一行放「指示条 + 文字」，动画用 grid-column 另起一行铺到下方 */
  .showcase-left {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px 24px;
  }
  .showcase-body {
    width: 100%;
  }
  .showcase-visual {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 420 / 300;
    min-height: 260px;
    margin: 32px auto 0;
  }
}

/* ── 降低透明度：玻璃退化为实色，保证可读性 ── */
@media (prefers-reduced-transparency: reduce) {
  .nav,
  .mock,
  .try {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #0b0b0b;
  }
  /* 折射层一并关掉：模糊与位移都退化为无，面板退回外层实色底（同 .mock 的 #0b0b0b）。
     filter 由 JS 写成行内 style，故这里必须用 !important 才能压过它。 */
  .liquid-glass__warp {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none !important;
    background: transparent;
  }
}

/* ── 增强对比度 ── */
@media (prefers-contrast: more) {
  :root {
    --muted: #b8b8b8;
    --muted-2: #ffffffdb;
    --muted-3: #ffffffcf;
    --line: rgba(255, 255, 255, 0.32);
    --line-strong: rgba(255, 255, 255, 0.75);
  }
  .footer-icp {
    color: #ffffffcf;
  }
}

/* ── 平板：能力卡两列，页脚三栏换行 ── */
@media (min-width: 601px) and (max-width: 1024px) {
  .doodle-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-cols {
    flex-wrap: wrap;
    gap: 40px;
  }
  .footer-col {
    min-width: 116px;
  }
}

/* ── 窄屏标语：三行两端对齐 ──
   拆成"寻求 / 学习的 / 最优解"三行。汉字字身正好 1em，三行统一取 4em 宽：
     三字行 = 3×1em + 2×0.5em 字距
     两字行 = 2×1em + 2em  字距
   两者都等于 4em —— 首字贴左、末字贴右，"寻求"的寻/求 便分别与三字行的首字、末字对齐。
   行内字距交给 flex 的 space-between 分配，故 letter-spacing 归零；行距放宽到 2 倍。
   字号：一行最多 3 个字，上限约 (100vw−24px)/4，远大于单行时的 (100vw−40px)/10.9。
   取 15vw、封顶 4rem（64px）：320px 屏约 48px、427px 起 64px，
   相对 32px 的小节标题是 1.5–2.0 倍（1440px 宽屏是 2.07 倍），层级一致。
   断点 730px：再宽单行也能放下 64px（10.9em × 64px ≈ 698px < 100vw−24px），
   于是 730/731px 处字号连续、不跳变。 */
@media (max-width: 730px) {
  .tagline {
    font-size: clamp(2.75rem, 15vw, 4rem);
    letter-spacing: normal;
    line-height: 2;
  }
  .type-wrap {
    display: block;
    width: 4em;
    margin: 0 auto;
  }
  .type-text {
    display: flex;
    justify-content: space-between;
  }
  /* 光标是行内元素，会成为 flex 子项、破坏 space-between 的两端对齐，窄屏隐藏 */
  .type-caret {
    display: none;
  }
  /* 窄屏三行：每行 4em，下划线跟随整行宽 */
  .tagline-underline {
    width: 4em;
  }
}

/* ── 手机 ── */
@media (max-width: 600px) {
  .research-cards,
  .doodle-cards {
    grid-template-columns: 1fr;
  }
  .scroll-cue {
    /* 字号与基础样式一致（14px），只改位置 */
    bottom: 24px;
  }
  /* 手机端减小模糊半径，控制 GPU 开销（原 18px 的 60%） */
  .page-bg {
    filter: blur(10.8px);
  }
  .showcase-overlay {
    padding: 32px 24px;
  }
  /* 动画卡片随屏宽收窄，内边距与字号同步缩小，避免局促 */
  .mock {
    padding: 18px;
    gap: 12px;
  }
  .showcase-visual {
    margin-top: 24px;
  }
  .download {
    padding: 88px 0;
  }
  .footer-top {
    padding: 40px 0;
    gap: 32px;
  }
  .footer-cols {
    /* 3 列在窄屏放不下：原 min-width 130px×3 + gap 28px×2 = 446px，
       超过容器后被 body 的 overflow-x:hidden 静默裁掉。改为允许换行 + 放宽下限 */
    flex-wrap: wrap;
    gap: 24px 32px;
  }
  .footer-col {
    min-width: 88px;
  }
  .footer-socials {
    flex-wrap: wrap;
  }
  .footer-bottom {
    position: static;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 超窄屏 ── */
@media (max-width: 400px) {
  .nav-logo img {
    height: 34px;
  }
  .footer-brand-info img,
  .footer-logo {
    width: 176px !important;
  }
}

/* ── 宽屏 ── */
@media (min-width: 1600px) {
  .research-inner,
  .doodle-inner,
  .download-inner {
    max-width: 1440px;
  }
}

/* ── 超宽屏 ── */
@media (min-width: 1920px) {
  .wrap,
  .footer-inner {
    max-width: 1600px;
  }
}

/* 门户接入 push 即部署（2026-10-04）：改动 portal/** 会触发 .github/workflows/deploy-portal.yml
   → 备份回滚点 + rsync 到 /home/deploy/english/portal/dist + 核验远端/本地 index.html 一致。
   本地手动兜底：./infra/deploy_portal.sh（--rollback 回滚）。 */