/* ══════════════════════════════════════════════════════════════
   ClawBench — 项目主页样式
   参考 coding.btelo.com 的版式节奏（近黑底、超大紧排标题、
   克制的卡片网格、大留白），但配色取自产品自身：gruvbox 橙。
   ══════════════════════════════════════════════════════════════ */

/* ── 设计 token ─────────────────────────────────────────────── */
:root {
  /* 底色：带一点暖的炭黑，纯 #000 会显脏 */
  --bg: #0a0806;
  --bg-raise: #12100d;
  --bg-card: #15120e;
  --bg-card-hover: #1b1712;

  /* 文字 */
  --fg: #fbf1c7;
  --fg-dim: #d5c4a1;
  --fg-muted: #9d9188;
  /* gruvbox 原值是 #7c6f64，在 #0a0806 上只有 4.11:1——本页大量小号字
     （11–12px 的元信息、页脚）都用它，达不到 AA 的 4.5。提亮到 5.0:1。 */
  --fg-faint: #8b7d70;

  /* 品牌橙（与 gruvbox-dark 主题同一枚） */
  --accent: #fe8019;
  --accent-soft: #fabd2f;
  --accent-ink: #1d1206;

  --line: rgba(251, 241, 199, 0.08);
  --line-strong: rgba(251, 241, 199, 0.14);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --shadow-float: 0 30px 70px -30px rgba(0, 0, 0, 0.95);

  --font: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;

  --pad: 20px;
  --maxw: 1280px;
  --maxw-wide: 1440px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 基础重置 ───────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

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

/* `img { display: block }` 是作者样式，会盖掉 UA 的 `[hidden] { display:none }`
   —— 于是 hidden 的架构图照样渲染出来（中英两份同时出现）。必须显式声明。 */
[hidden] {
  display: none !important;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

::selection {
  background: rgba(254, 128, 25, 0.3);
  color: var(--fg);
}

/* 键盘焦点：只在键盘操作时出现，鼠标点击不留框 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 16px;
}

/* ── 环境光（固定层，不随页面滚动）─────────────────────────── */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 1100px 760px at 78% -6%, rgba(254, 128, 25, 0.16), transparent 62%),
    radial-gradient(ellipse 780px 620px at 6% 4%, rgba(131, 165, 152, 0.06), transparent 66%),
    radial-gradient(ellipse 1300px 900px at 50% 116%, rgba(254, 128, 25, 0.07), transparent 68%);
}

/* 极淡的网格，给暗部一点结构，不至于是一块死黑 */
.ambient-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(251, 241, 199, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(251, 241, 199, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 78%);
}

.ambient-grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 导航 ───────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
    backdrop-filter 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav.is-stuck {
  background: rgba(10, 8, 6, 0.78);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

/* 与 .section 用同一个 maxw + pad，导航文字才能和正文左边缘对齐 */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--maxw);
  height: 64px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(254, 128, 25, 0.35), 0 0 22px rgba(254, 128, 25, 0.18);
  transition: transform 0.4s var(--ease);
}

.brand:hover .brand-logo {
  transform: rotate(-8deg) scale(1.06);
}

.brand-name {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.brand-tag {
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* 导航链接在宽屏居中，与参考站一致 */
.nav-links {
  display: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  transition: border-color 0.25s, color 0.25s;
}

.lang-toggle:hover {
  border-color: var(--line-strong);
}

.lang-opt {
  transition: color 0.25s;
}

.lang-opt.is-active {
  color: var(--accent);
  font-weight: 600;
}

.lang-sep {
  color: var(--fg-faint);
  opacity: 0.45;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--fg-muted);
  transition: color 0.25s, background 0.25s;
}

.icon-btn:hover {
  color: var(--fg);
  background: rgba(251, 241, 199, 0.06);
}

.nav-cta {
  display: none;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 650;
  transition: background 0.25s, transform 0.25s var(--ease);
}

.nav-cta:hover {
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  padding: 0 7px;
  border-radius: 50%;
}

.burger span {
  display: block;
  height: 1.5px;
  background: var(--fg-dim);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}

.burger[aria-expanded="true"] span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

.burger[aria-expanded="true"] span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* ── 移动端全屏菜单 ─────────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 88px var(--pad) 32px;
  background: rgba(10, 8, 6, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu.is-open {
  opacity: 1;
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
}

.mobile-menu-inner a {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg-dim);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: color 0.2s, padding-left 0.25s var(--ease);
}

.mobile-menu-inner a:active {
  color: var(--accent);
  padding-left: 6px;
}

.mobile-menu-foot {
  display: flex;
  gap: 10px;
}

.mobile-menu-foot .btn {
  flex: 1;
  justify-content: center;
}

/* ── 按钮 ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background 0.25s, border-color 0.25s, color 0.25s,
    transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.btn-lg {
  height: 50px;
  padding: 0 24px;
  font-size: 15px;
}

.btn-solid {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 30px -12px rgba(254, 128, 25, 0.6);
}

.btn-solid:hover {
  background: var(--accent-soft);
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -12px rgba(254, 128, 25, 0.7);
}

.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--fg-dim);
}

.btn-ghost:hover {
  border-color: rgba(254, 128, 25, 0.45);
  color: var(--fg);
  background: rgba(254, 128, 25, 0.06);
  transform: translateY(-2px);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 28px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}

.link-arrow svg {
  transition: transform 0.3s var(--ease);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* ── 通用区块 ───────────────────────────────────────────────── */
main {
  position: relative;
  z-index: 1;
}

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 72px var(--pad);
}

.section-wide {
  max-width: var(--maxw-wide);
}

.section-head {
  max-width: 760px;
  margin-bottom: 40px;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.section h2 {
  font-size: clamp(28px, 6.2vw, 44px);
  font-weight: 600;
}

.section h2 em {
  font-style: normal;
  color: var(--accent);
}

.lede {
  max-width: 620px;
  margin-top: 18px;
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1.75;
}

.lede strong {
  color: var(--fg-dim);
  font-weight: 600;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 108px var(--pad) 8px;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: var(--maxw);
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.eyebrow .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(254, 128, 25, 0.16);
  animation: pulse 2.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.hero-title {
  margin: 18px 0 0;
  font-size: clamp(38px, 9.4vw, 78px);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

/* 英文标题词更长、字母间距不能像中文那样压得那么紧，否则会粘连 */
.lang-en .hero-title {
  font-size: clamp(34px, 7.4vw, 68px);
  letter-spacing: -0.035em;
  line-height: 1.06;
}

.hero-title em {
  font-style: normal;
  color: var(--accent);
}

.hero-sub {
  max-width: 560px;
  margin-top: 22px;
  color: var(--fg-muted);
  font-size: 16px;
  line-height: 1.7;
}

.hero-sub strong {
  color: var(--fg-dim);
  font-weight: 600;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 44px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.hero-stats > div {
  padding-right: 12px;
}

.hero-stats dt {
  color: var(--fg-faint);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.hero-stats dd {
  margin: 4px 0 0;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── 设备舞台 ───────────────────────────────────────────────── */
.stage {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  /* 底部留白必须 ≥ 手机 bottom 的绝对值，否则探出的那一截
     会被下一节盖住（手机是绝对定位，不参与 stage 的高度计算）。 */
  padding: 20px 0 64px;
}

.stage-glow {
  position: absolute;
  inset: 4% -6% 10%;
  background: radial-gradient(ellipse at 50% 46%, rgba(254, 128, 25, 0.17), transparent 66%);
  filter: blur(38px);
  pointer-events: none;
}

.device-desktop {
  position: relative;
  z-index: 1;
}

.device-frame {
  position: relative;
  padding: 7px;
  border-radius: 11px;
  background: linear-gradient(158deg, #322a21 0%, #1a1611 34%, #0d0b09 100%);
  /* 外描边一律用 inset：`0 0 0 1px` 按矩形画边，圆角外会露出直角小块 */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 24px 50px -18px rgba(0, 0, 0, 0.95),
    0 0 70px -24px rgba(254, 128, 25, 0.3);
}

.device-screen {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  background: #0b0907;
  /* 与截图实际比例一致（1920×1040）。原值 1600/845（0.5281）比截图
     的 0.5417 略扁，cover 会上下各裁掉 4px —— 顶部标题栏和底部状态栏
     都会被切掉一条。 */
  aspect-ratio: 1920 / 1040;
  container-type: inline-size;
}

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

/* ── 屏幕反光 ─────────────────────────────────────────────────
   沿用项目 Hero 稿（docs/screenshots/product_hero.en.html）的 .glass 做法：
   一条左上角边缘高光 + 一条暖色斜带，不模糊、不加光斑。
   峰值 7% 白，刚好暗示这是一块玻璃，不抢界面内容。
   用容器伪元素实现，不需要额外的 DOM 节点。 */
.device-screen::after,
.phone-screen::after,
.shot-zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(114deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.024) 8%,
      transparent 21%,
      transparent 76%,
      rgba(255, 255, 255, 0.016) 100%),
    linear-gradient(120deg, transparent 0%, rgba(254, 128, 25, 0.045) 48%, transparent 64%);
}

/* 手机展示外框有 9px 内边距，反光要内缩到图片范围内。
   注意圆角必须跟着内缩后的实际半径走（26px），写死或 inherit 都会
   在弧线外露出一块 —— 外层是 34px、内层是 26px，半径不匹配就会溢出。 */
.showcase-shell::after {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 4;
  pointer-events: none;
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(114deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.024) 8%,
      transparent 21%,
      transparent 76%,
      rgba(255, 255, 255, 0.016) 100%),
    linear-gradient(120deg, transparent 0%, rgba(254, 128, 25, 0.045) 48%, transparent 64%);
}

/* 显示器下巴 + 支架（颈 + 底座）。这三块在上一轮被误删，
   这里按原设计恢复：窄颈直接接机身下沿，再落到椭圆底座上。 */
.device-chin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 20px;
  color: rgba(163, 148, 128, 0.42);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.chin-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(254, 128, 25, 0.6);
  box-shadow: 0 0 7px rgba(254, 128, 25, 0.8);
}

.device-stand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -1px;
}

.stand-neck {
  width: 54px;
  height: 34px;
  background: linear-gradient(100deg, #57493c 0%, #3a3128 26%, #241e18 68%, #100d0a 100%);
  clip-path: polygon(0% 0%, 100% 0%, 78% 100%, 22% 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.stand-base {
  width: 158px;
  height: 11px;
  margin-top: -1px;
  border-radius: 50%;
  background: linear-gradient(180deg, #4d4237 0%, #2b241c 48%, #100d0a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 10px 22px -6px rgba(0, 0, 0, 0.9);
}

/* 手机：压在显示器右下角，并且下半截探出机身下沿——
   完全落在屏幕内会像"贴了张图"，探出去才有前后关系。 */
.device-phone {
  position: absolute;
  right: -10px;
  /* 轻微探出显示器下沿即可：再往下就会比支架还低一大截，
     视觉上像手机悬在桌外。收到与支架底边大致齐平。 */
  bottom: -8px;
  z-index: 3;
  width: 25%;
  max-width: 128px;
  /* 两层投影：一层近距贴合的接触阴影（把手机"按"在桌面上），
     一层远距柔和投影（交代它悬在显示器前方的高度差）。
     只有远距投影时手机会显得在飘。 */
  filter:
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6))
    drop-shadow(-10px 22px 30px rgba(0, 0, 0, 0.7));
}

/* 窄屏：显示器 + 手机的叠放会缩到文字全糊（桌面稿 1.62cqw 在 350px 容器
   里只有 5.7px）。此时只留手机稿并放大——它才是"揣在口袋里"这个主张
   本身，桌面形态交给后面的分栏章节用真实截图讲。 */
@media (max-width: 1179px) {
  .device-desktop {
    display: none;
  }

  .stage {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 0;
  }

  .device-phone {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 236px;
  }
}

.phone-shell {
  position: relative;
  padding: 4px;
  border-radius: 20px;
  background: linear-gradient(158deg, #352c23 0%, #1b1611 40%, #0b0908 100%);
  /* 外描边用 inset：`0 0 0 1px` 会在圆角外侧按矩形画边，
     在深色背景上就是角外多出来的那一小块。 */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 18px 40px -12px rgba(0, 0, 0, 0.95),
    0 0 46px -14px rgba(254, 128, 25, 0.34);
}

/* 机身圆角 20px、屏幕圆角 16px，内层在弧线外会露出尖角 ——
   必须裁掉。同样的问题在 .showcase-shell（34px / 26px）也有。 */
.phone-shell,
.showcase-shell {
  overflow: hidden;
}

.phone-island {
  position: absolute;
  top: 7px;
  left: 50%;
  z-index: 4;
  width: 34%;
  height: 9px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #040302;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.phone-screen {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #0b0907;
  /* 必须与截图实际比例一致（900×1980）。原来是 560/1111（1.984），
     截图是 2.2 —— cover 按宽度铺满后高度多出 30px，被从底部裁掉，
     正好切掉底部 dock 栏。 */
  aspect-ratio: 900 / 1980;
  container-type: inline-size;
}

.phone-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ── 后端横条 ───────────────────────────────────────────────── */
.strip {
  position: relative;
  z-index: 1;
  /* 20 个条目比原来 12 个高不少，上边距收一档，
     否则 hero 和横条之间会出现一条空得过分的暗带。 */
  margin-top: 40px;
  padding: 28px 0 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(254, 128, 25, 0.02), transparent);
  overflow: hidden;
}

.strip-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* 标题独立成行、字号提到正文级别：它是一句主张，不是图标的注释。
   和图标之间只靠间距分开 —— 加分隔线会让这条横条里出现两条平行线
   （标题下一条、区块上下各一条），视觉上过碎。 */
.strip-label {
  margin: 0 0 20px;
  color: var(--fg-dim);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

@media (min-width: 900px) {
  .strip-label {
    font-size: 19px;
  }
}

.strip-list {
  /* 固定列数在 19 这个条数下总会留空（2/3/4 列都除不尽）。
     用 auto-fill + 最小列宽：列数跟着容器宽度走，条目从左到右
     自然填满，尾行不会出现大块空白。 */
  display: grid;
  /* auto-fill + 最小列宽，列数跟着容器走：
     390px → 2 列，640px → 3 列，810px → 4 列，宽屏 → 5 列。
     上限 5 列靠 max-width 压住，否则 1440 会挤成 7 列。 */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  max-width: 900px;
  gap: 12px 20px;
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 500;
}

.strip-list li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: color 0.25s;
}

.strip-list li:hover {
  color: var(--fg);
}

/* logo 平时走 currentColor（单色品牌标在深底上比彩色版干净，
   也不会出现某个 logo 比别的亮一截）。
   亮度单独给一档：跟着 --fg-muted 会太暗 —— 18px 的实心形状在
   深色底上需要比 13px 的文字更高的对比才看得出轮廓。

   悬停切到原始彩色版：两层叠在同一格，靠 opacity 交叉淡入，
   单色版和彩色版尺寸一致，切换时不会有位移。没有彩色版的品牌
   （Cursor / Pi / OpenCode / Grok / Hermes / MiMo / VeCLI /
   Command Code）只保留单色层，悬停时轻微提亮即可。 */
.strip-logo {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--fg-dim);
  opacity: 0.9;
  transition: color 0.25s, opacity 0.25s;
}

.strip-list li {
  position: relative;
}

/* 彩色层压在单色层之上，默认完全透明 */
.strip-logo-color {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.22s;
}

.strip-list li:hover .strip-logo-color {
  opacity: 1;
}

.strip-list li:hover .strip-logo-mono {
  color: var(--fg);
  opacity: 1;
}

/* ── 多端卡片 ───────────────────────────────────────────────── */
.plat-grid {
  display: grid;
  gap: 12px;
}

.plat-card {
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-card), rgba(21, 18, 14, 0.4));
  box-shadow: var(--shadow-card);
  transition: border-color 0.35s, background 0.35s, transform 0.4s var(--ease);
}

.plat-card:hover {
  border-color: rgba(254, 128, 25, 0.28);
  background: var(--bg-card-hover);
  transform: translateY(-3px);
}

.plat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
  border: 1px solid rgba(254, 128, 25, 0.24);
  border-radius: 11px;
  background: rgba(254, 128, 25, 0.07);
  color: var(--accent);
}

.plat-icon svg {
  width: 20px;
  height: 20px;
}

.plat-card h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.plat-card p {
  margin-top: 9px;
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.7;
}

.plat-meta {
  margin-top: 16px !important;
  color: var(--fg-faint) !important;
  font-family: var(--font-mono);
  font-size: 11px !important;
  letter-spacing: 0.02em;
}

/* ── 分栏（手机 / 桌面）─────────────────────────────────────── */
.split {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.split-copy h2 {
  margin-top: 0;
}

.ticks {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 26px;
}

.ticks li {
  position: relative;
  padding-left: 24px;
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.65;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 11px;
  height: 6px;
  border-left: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg);
  opacity: 0.85;
}

/* 手机截图比文案高，左栏底部补一条"截图说明"把高度补齐，
   否则整节会被撑出大片空白。 */
.mob-note {
  display: flex;
  gap: 11px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.mob-note-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.8;
}

.mob-note p {
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.7;
}

.mob-note code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-raise);
  color: var(--fg-dim);
  font-size: 11.5px;
}

/* 手机展示：一台真机外框 + 图注 + 点击放大。
   截图信息密度极高，缩到 320px 后正文只剩几个像素——所以不指望它
   在这里被读清，而是靠"原尺寸放大"让想看细节的人自己点开。 */
.phone-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.phone-zoom {
  cursor: zoom-in;
  display: block;
  width: 100%;
  max-width: 300px;
}

.showcase-shell {
  position: relative;
  display: block;
  padding: 9px;
  border-radius: 34px;
  background: linear-gradient(158deg, #3a3128 0%, #1c1712 38%, #0b0908 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 30px 60px -20px rgba(0, 0, 0, 0.95),
    0 0 70px -26px rgba(254, 128, 25, 0.34);
}

.showcase-island {
  position: absolute;
  top: 15px;
  left: 50%;
  z-index: 2;
  width: 26%;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #040302;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.showcase-shell img {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 26px;
  background: #000;
}

.phone-showcase figcaption {
  max-width: 320px;
  margin-top: 16px;
  color: var(--fg-faint);
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
}

/* 桌面截图：带一点斜切透视 */
/* 桌面章节：标题与说明分列两侧，截图整幅铺开在下。
   截图信息密度高，半栏宽会把每个面板都压到读不出字。 */
.desk-head {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.desk-side .lede {
  margin-top: 0;
}

.desk-side .link-arrow {
  margin-top: 18px;
}

.ticks-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.desk-shot {
  position: relative;
  margin: 36px 0 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #000;
  box-shadow: var(--shadow-float);
}

.desk-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), transparent 38%);
}

/* 宽截图在手机上会缩成一条几十像素的细带，必须能点开看原尺寸 */
.shot-zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  cursor: zoom-in;
}

.shot-zoom img {
  width: 100%;
  height: auto;
}

.zoom-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(10, 8, 6, 0.82);
  color: var(--fg-dim);
  font-size: 11px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.25s, transform 0.25s var(--ease);
}

.shot-zoom:hover .zoom-hint {
  transform: translateY(-1px);
}

/* 宽屏上截图已经够大，提示可以退场 */
@media (min-width: 900px) {
  .zoom-hint {
    opacity: 0;
  }

  .shot-zoom:hover .zoom-hint,
  .shot-zoom:focus-visible .zoom-hint {
    opacity: 1;
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: block;
  overflow: auto;
  padding: 16px;
  background: rgba(4, 3, 2, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 关键：不把图缩到屏宽。1920px 的桌面截图压到 390px 后每个面板只剩
   几像素，等于没放大。这里保持自然尺寸、让容器双向滚动——用户能拖到
   任意角落看清细节，这才是"放大"的意义。 */
.lightbox img {
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
}

/* 小图（手机截图）本来就能整幅放下，居中即可 */
@media (min-width: 900px) {
  .lightbox img {
    max-width: 100%;
  }
}

.lightbox-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(21, 18, 14, 0.9);
  color: var(--fg-dim);
}

.desk-shot figcaption {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.desk-shot figcaption::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--accent);
  opacity: 0.7;
}

/* ── 功能网格 ───────────────────────────────────────────────── */
.feat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--line);
}

.feat {
  position: relative;
  padding: 24px 22px;
  background: var(--bg);
  transition: background 0.35s;
}

.feat:hover {
  background: var(--bg-raise);
}

.feat-icon {
  color: var(--accent);
  opacity: 0.9;
}

.feat-icon svg {
  width: 22px;
  height: 22px;
}

.feat h3 {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.feat p {
  margin-top: 7px;
  color: var(--fg-muted);
  font-size: 13.5px;
  line-height: 1.7;
}

/* ── 部署 ───────────────────────────────────────────────────── */
.deploy-wrap {
  max-width: 820px;
}

.tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raise);
}

.tab {
  padding: 7px 16px;
  border-radius: 999px;
  color: var(--fg-faint);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.25s, background 0.25s;
}

.tab:hover {
  color: var(--fg-dim);
}

.tab.is-active {
  background: rgba(254, 128, 25, 0.13);
  color: var(--accent);
}

.code-panels {
  position: relative;
}

.code-panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0d0b09;
  overflow: hidden;
}

.code-panel[hidden] {
  display: none;
}

.code-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 241, 199, 0.02);
}

.code-dots {
  display: inline-flex;
  gap: 5px;
}

.code-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(251, 241, 199, 0.14);
}

.code-title {
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.code-panel pre {
  margin: 0;
  padding: 16px 18px 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.code-panel code {
  display: block;
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.85;
  white-space: pre;
  tab-size: 2;
}

.c-cmt {
  color: var(--fg-faint);
}

.copy-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(21, 18, 14, 0.9);
  color: var(--fg-faint);
  font-size: 11px;
  transition: color 0.25s, border-color 0.25s;
}

.copy-btn:hover {
  border-color: var(--line-strong);
  color: var(--fg-dim);
}

.copy-btn.is-done {
  border-color: rgba(184, 187, 38, 0.4);
  color: #b8bb26;
}

.deploy-note {
  margin-top: 16px;
  color: var(--fg-faint);
  font-size: 13px;
}

.deploy-note code {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg-raise);
  color: var(--fg-dim);
  font-size: 12px;
}

.arch {
  margin-top: 32px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
}

.arch img {
  width: 100%;
  height: auto;
  opacity: 0.92;
}

/* ── 界面画廊 ───────────────────────────────────────────────── */
.gal-wrap {
  position: relative;
  margin: 0 calc(var(--pad) * -1);
}

.gal {
  display: flex;
  gap: 12px;
  padding: 4px var(--pad) 18px;
  overflow-x: auto;
  /* 自动滚动由 JS 逐帧推进 scrollLeft，mandatory snap 会每帧把位置吸回
     最近的格子 → 画面一顿一顿地跳。停手（悬停）时才恢复吸附，
     此时手动拖动仍然是一格一格的手感。 */
  scroll-snap-type: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gal.is-paused {
  scroll-snap-type: x proximity;
}

.gal::-webkit-scrollbar {
  display: none;
}

.gal-item {
  flex: 0 0 auto;
  width: 176px;
  scroll-snap-align: start;
}

/* 截图来自不同机型（1031 / 1127 / 1144 高），统一裁到同一比例，
   否则每张卡片高度不同、figcaption 基线对不齐。 */
.gal-item img {
  width: 100%;
  aspect-ratio: 9 / 19;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #000;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease), border-color 0.35s;
}

.gal-item:hover img {
  transform: translateY(-4px);
  border-color: rgba(254, 128, 25, 0.32);
}

.gal-item figcaption {
  margin-top: 10px;
  color: var(--fg-faint);
  font-size: 11.5px;
  line-height: 1.5;
}

.gal-hint {
  margin-top: 4px;
  padding: 0 var(--pad);
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-list {
  max-width: 860px;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 2px;
  color: var(--fg-dim);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  transition: color 0.25s;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--fg);
}

.faq-item summary svg {
  flex-shrink: 0;
  color: var(--fg-faint);
  transition: transform 0.3s var(--ease), color 0.25s;
}

.faq-item[open] summary {
  color: var(--fg);
}

.faq-item[open] summary svg {
  transform: rotate(180deg);
  color: var(--accent);
}

.faq-body {
  padding: 0 2px 22px;
  max-width: 720px;
}

.faq-body p {
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.8;
}

.faq-body code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-raise);
  color: var(--fg-dim);
  font-size: 12.5px;
}

/* ── 结尾 CTA ───────────────────────────────────────────────── */
.outro {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  padding: 80px var(--pad) 88px;
  border-top: 1px solid var(--line);
  text-align: center;
  background: radial-gradient(ellipse 780px 380px at 50% 100%, rgba(254, 128, 25, 0.1), transparent 70%);
}

.outro-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(254, 128, 25, 0.35), 0 0 50px rgba(254, 128, 25, 0.22);
}

.outro h2 {
  font-size: clamp(28px, 6.6vw, 48px);
  letter-spacing: -0.04em;
}

.outro p {
  margin: 16px auto 0;
  max-width: 460px;
  color: var(--fg-muted);
  font-size: 14.5px;
}

.outro-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

/* ── 页脚 ───────────────────────────────────────────────────── */
.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding: 26px var(--pad) 34px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--fg-dim);
  font-size: 13px;
  font-weight: 600;
}

.footer-brand img {
  border-radius: 50%;
}

.footer-year {
  color: var(--fg-faint);
  font-weight: 400;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  color: var(--fg-faint);
  font-size: 12.5px;
}

.footer-links a {
  transition: color 0.25s;
}

.footer-links a:hover {
  color: var(--accent);
}

/* ── Toast ──────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 300;
  padding: 9px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(21, 18, 14, 0.96);
  color: var(--fg-dim);
  font-size: 12.5px;
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── 滚动进场 ───────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ── 平板及以上 ─────────────────────────────────────────────── */
@media (min-width: 640px) {
  :root {
    --pad: 32px;
  }

  .section {
    padding: 96px var(--pad);
  }

  .section-head {
    margin-bottom: 52px;
  }

  .hero {
    padding-top: 132px;
  }

  .hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .plat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plat-grid .plat-card:first-child {
    grid-column: span 2;
  }

  .feat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gal-item {
    width: 208px;
  }

  .footer-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ── 宽屏：Hero 双栏 ────────────────────────────────────────── */
@media (min-width: 900px) {
  :root {
    --pad: 48px;
  }

  .nav-inner {
    height: 72px;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 40px;
  }

  .nav-links a {
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--fg-muted);
    font-size: 13.5px;
    transition: color 0.25s, background 0.25s;
  }

  .nav-links a:hover {
    color: var(--fg);
    background: rgba(251, 241, 199, 0.05);
  }

  .nav-actions {
    margin-left: 0;
  }

  .nav-cta {
    display: inline-flex;
  }

  .burger {
    display: none;
  }

  .hero {
    padding-top: 148px;
    padding-bottom: 0;
  }

  .hero-inner {
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }

  .hero-copy {
    flex: 1 1 52%;
    min-width: 0;
  }

  .stage {
    flex: 1 1 48%;
    max-width: 620px;
    margin: 0;
    /* 设备图整体下沉，视觉重心比文本块低；往上提一档让两栏光学居中 */
    margin-top: -28px;
  }

  .strip {
    margin-top: 96px;
  }

  /* 标题已经独立成行，这里不再需要把标签和列表并排。
     保留 flex 会让 ul 作为 flex item 收缩到内容宽度，
     auto-fill 网格只能算出一列。
     同理，原先为了并排而写的 `margin-bottom: 0` 也要去掉 ——
     留着会把标题和图标之间的间距清零。 */

  .plat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .plat-grid .plat-card:first-child {
    grid-column: span 1;
  }

  .split {
    flex-direction: row;
    align-items: center;
    gap: 56px;
  }

  .desk-head {
    flex-direction: row;
    align-items: flex-end;
    gap: 56px;
  }

  .desk-head > * {
    flex: 1 1 50%;
    min-width: 0;
  }

  .desk-side {
    padding-bottom: 6px;
  }

  /* 四条分两列：两行等长，右侧不留空槽 */
  .ticks-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 40px;
  }

  .split > * {
    flex: 1 1 50%;
    min-width: 0;
  }

  .split-reverse .split-copy {
    order: 2;
  }

  .split-reverse .split-visual {
    order: 1;
  }

  .feat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .feat {
    padding: 28px 24px;
  }

  /* 顶部对齐：居中会让手机顶边越过标题，读起来像两个不相干的块 */
  .split {
    align-items: flex-start;
  }

  .phone-showcase {
    width: 100%;
    align-items: flex-end;
  }

  .phone-zoom {
    max-width: 340px;
  }

  .phone-showcase figcaption {
    max-width: 340px;
    text-align: right;
  }

  .gal-item {
    width: 232px;
  }

  .gal-wrap {
    margin: 0;
  }

  .gal {
    padding-left: 0;
    padding-right: 0;
  }

  .gal-hint {
    padding: 0;
  }

  .outro {
    padding: 104px var(--pad) 112px;
  }
}

@media (min-width: 1180px) {
  .hero-title {
    font-size: 82px;
  }

  .section h2 {
    font-size: 48px;
  }

  .stage {
    max-width: 660px;
  }

  .device-phone {
    width: 26%;
    max-width: 150px;
    bottom: -10px;
  }
}

/* ── 平板竖屏：宽度已够双栏，但不够三栏 ─────────────────────── */
@media (min-width: 768px) and (max-width: 899px) {
  .hero-inner {
    flex-direction: row;
    align-items: center;
    gap: 28px;
  }

  .hero-copy {
    flex: 1 1 56%;
    min-width: 0;
  }

  .stage {
    flex: 1 1 44%;
    max-width: 260px;
    margin: 0;
  }

  .plat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .plat-grid .plat-card:first-child {
    grid-column: span 1;
  }
}

/* ── 平板横屏：Hero 已经放得下双栏，但显示器稿还太小（见上面的
   1179px 断点），所以右边只放手机稿，宽度也相应收窄。 */
@media (min-width: 768px) and (max-width: 1179px) {
  .plat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .plat-grid .plat-card:first-child {
    grid-column: span 1;
  }
}

/* ── 动效降级 ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

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