/* ==========================================================================
   千问 - 题跋块风 (COLOPHON & INSCRIPTION BLOCK / 画后题跋风格)
   核心美学规范：
   - 风格：画后题跋 (POSTSCRIPT INSCRIPTION / COLOPHON)
   - 场景：能力介绍 & 品牌主视觉
   - 布局：主文靠上，题跋放在左下，题跋字小两号，两者之间留出大片空
   - 风格说明：画后题跋：主文像标题，跋像注释；但没有画，只有字！不要山水背景！
   - 质感：素纸如玉，素雅宣纸墨韵（#fcfbf8 / #ffffff），墨黑端庄线条（#22211f）
   - 字体体系：主文用楷体（KaiTi），题跋用较小宋体（SongTi / SimSun），正文与功能标用黑体
   - 核心文墨：主文「通义千问」，左下题跋深入阐释「千问网页版」、「千问办公」、「qwen AI」
   ========================================================================== */

:root {
  --color-paper: #fcfbf8;
  --color-paper-card: #ffffff;
  --color-paper-accent: #f5f3ec;
  --color-ink-deep: #161513;
  --color-ink-text: #2c2a26;
  --color-ink-muted: #5e5a52;
  --color-ink-light: #8e897e;
  --color-seal-vermilion: #b93a2b; /* 印泥朱砂色 */
  
  --color-border-ink: #22211f;
  --color-border-subtle: #dedad0;
  
  --font-kaiti: "Kaiti SC", "KaiTi", "STKaiti", "楷体", serif;
  --font-songti: "SimSun", "STSong", "Songti SC", "Noto Serif SC", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  --container-max: 1200px;
}

/* 基础重置 - 纯文字纸白，无山水背景，无阴影 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  box-shadow: none !important;
  text-shadow: none !important;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--color-paper);
  color: var(--color-ink-text);
}

body {
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-paper);
  color: var(--color-ink-text);
  overflow-x: hidden;
}

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

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font: inherit;
}

.layout-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ==========================================================================
   1. 顶栏：标志、七个锚点、登录、开始使用
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(252, 251, 248, 0.98);
  border-bottom: 1px solid var(--color-border-ink);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 16px;
}

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

.brand-logo-frame {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.brand-logo {
  display: block;
  object-fit: contain;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-family: var(--font-kaiti);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--color-ink-deep);
}

.brand-sub {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--color-ink-muted);
  text-transform: uppercase;
  font-family: var(--font-mono);
}

/* 七个锚点导航 */
.nav-anchors {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

.nav-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink-text);
  letter-spacing: 0.06em;
  padding: 4px 0;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.nav-link:hover {
  text-decoration: underline;
}

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

.btn-header-login {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 16px;
  border: 1px solid var(--color-border-ink);
  background: transparent;
  color: var(--color-ink-deep);
  letter-spacing: 0.08em;
  transition: all 0.2s ease;
}

.btn-header-login:hover {
  background: #f0eee8;
}

.btn-header-primary {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 18px;
  background: var(--color-border-ink);
  color: #ffffff;
  border: 1px solid var(--color-border-ink);
  letter-spacing: 0.08em;
  transition: all 0.2s ease;
}

.btn-header-primary:hover {
  background: #3a3834;
}

/* ==========================================================================
   2. 首屏：状态标签、标题、一句说明、一条提问框 +【画后题跋核心舞台】
   ========================================================================== */
.hero-section {
  padding: 48px 0 64px 0;
  border-bottom: 1px solid var(--color-border-ink);
  background: var(--color-paper);
}

.hero-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--color-border-subtle);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.hero-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-ink-deep);
}

.hero-spec-tag {
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-title-box {
  margin-bottom: 16px;
}

.hero-h1 {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-ink-deep);
  word-break: break-word;
}

.hero-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-ink-muted);
  max-width: 980px;
  margin-bottom: 28px;
}

/* 一条提问框 */
.hero-search-box {
  border: 1px solid var(--color-border-ink);
  background: #ffffff;
  padding: 6px;
  margin-bottom: 48px;
}

.hero-search-form {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-search-input {
  flex: 1;
  border: none;
  padding: 10px 16px;
  font-size: 0.95rem;
  color: var(--color-ink-deep);
  outline: none;
  background: transparent;
}

.hero-search-input::placeholder {
  color: #99958d;
}

.hero-search-btn {
  background: var(--color-border-ink);
  color: #ffffff;
  border: 1px solid var(--color-border-ink);
  padding: 10px 24px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: background 0.2s ease;
}

.hero-search-btn:hover {
  background: #3a3834;
}

/* ==========================================================================
   【斗方角落 · 品牌主视觉核心舞台】
   - 风格：斗方
   - 场景：品牌主视觉
   - 布局：画面中心完全空白，只在右下斗方里放四字，斗方边长是画幅的六分之一
   - 风格说明：斗方：朱文细线，框内不铺底
   - 提示词：
     风格种「斗方」。做千问的斗方主视觉。布局：中心完全空白，只在右下角放一个边长为画幅六分之一的斗方。
     风格：朱文细线，框内不铺红底。字体：斗方内楷书。四字为「千问」，斗方外极小的英文是 qwen，
     再下方一行写通义千问与 qianwen。不要巨印。
   ========================================================================== */
.doufang-stage-wrapper {
  margin-top: 32px;
  border: 1px solid var(--color-border-ink);
  background: #ffffff;
  position: relative;
}

.doufang-stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-paper-accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--color-ink-muted);
  text-transform: uppercase;
}

/* 画面画幅：高度 480px，中心完全空白！ */
.doufang-canvas-box {
  position: relative;
  height: 480px;
  width: 100%;
  background: #fdfcf9;
  overflow: hidden;
  /* 中心纯然空白，无山水、无底纹、无巨字，纯纸白素意 */
}

/* 右下角斗方容器 */
.doufang-corner-unit {
  position: absolute;
  right: 40px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  z-index: 10;
}

/* 斗方外极小的英文是 qwen */
.doufang-tiny-latin {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #8c8275;
  text-transform: lowercase;
  margin-bottom: 6px;
  line-height: 1;
}

/* 斗方：边长是画幅的六分之一（480px / 6 = 80px）
   朱文细线，框内不铺红底，不要巨印 */
.doufang-seal-frame {
  width: 80px;
  height: 80px;
  border: 1.5px solid #a32e2e; /* 朱文细线 */
  background: transparent;     /* 框内不铺红底 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 4px;
  box-sizing: border-box;
}

/* 斗方内楷书 */
.doufang-seal-frame .df-char {
  font-family: var(--font-kaiti);
  font-size: 1.35rem;
  color: #a32e2e;
  line-height: 1;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 再下方一行写通义千问与 qianwen */
.doufang-sub-annotation {
  margin-top: 8px;
  font-family: var(--font-songti);
  font-size: 0.74rem;
  color: #554f46;
  letter-spacing: 0.08em;
  white-space: nowrap;
  line-height: 1.4;
}

.doufang-stage-footer {
  border-top: 1px dashed var(--color-border-subtle);
  padding: 10px 20px;
  background: var(--color-paper-accent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-ink-light);
}

/* ==========================================================================
   【右起长卷 · 绢本横卷核心视觉舞台】
   - 风格：绢本横卷 (HORIZONTAL SILK HANDSCROLL)
   - 场景：发布会主KV (PRESS CONFERENCE KEY VISUAL)
   - 布局：横卷从右向左展开，只展示中间一段，两端卷起成轴
   - 风格说明：绢本横卷：轴头深木色，画面几乎留白
   - 提示词：
     风格种「绢本横卷」。为通义千问发布会做一段横卷主视觉。布局：横卷从右向左读，只展示中间打开的一段，两端卷成轴。
     风格：绢本，轴头深木色，画面大部分留白。字体：卷上只有一行小楷。那一行是「千问 / qwen / 千问官网」。不要云纹和龙纹。
   ========================================================================== */
.silk-scroll-stage-wrapper {
  margin-top: 32px;
  border: 1px solid var(--color-border-ink);
  background: #ffffff;
  position: relative;
}

.silk-scroll-stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-paper-accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--color-ink-muted);
  text-transform: uppercase;
}

/* 展台展陈空间：背景素净，将横卷托衬于中央 */
.silk-scroll-exhibit-area {
  padding: 30px 16px;
  background: #fbf9f4;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* 横卷装裱组件：左右卷轴 + 中间展开绢面 */
.silk-scroll-assembly {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

/* 两端卷成轴：深木色轴身与突出轴头 */
.silk-scroll-roller {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  z-index: 5;
  width: 32px;
}

/* 深木色上下轴头 (Finial) */
.dark-wood-finial {
  width: 20px;
  height: 15px;
  background: #2a190f; /* 深木色 */
  border: 1px solid #160c07;
  border-radius: 3px;
}

.dark-wood-finial.top {
  margin-bottom: 2px;
}

.dark-wood-finial.bottom {
  margin-top: 2px;
}

/* 卷轴主体筒身（两端卷起厚实卷芯） */
.dark-wood-rod-core {
  width: 26px;
  height: 240px;
  background: linear-gradient(90deg, #2a190f 0%, #462c1d 40%, #5c3b28 65%, #2a190f 100%);
  border: 1px solid #160c07;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 卷层外裹绢布微边线 */
.dark-wood-rod-core::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 2px;
  right: 2px;
  border-left: 2px solid #8e6d4c;
  border-right: 2px solid #331e12;
  opacity: 0.6;
}

/* 中间打开的一段：绢本材质，大部分完全留白，绝无云纹和龙纹！ */
.silk-scroll-open-section {
  flex: 1;
  height: 216px;
  background-color: #f7f1e3; /* 绢本温润原色 */
  background-image: 
    linear-gradient(rgba(215, 203, 185, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 203, 185, 0.15) 1px, transparent 1px);
  background-size: 8px 8px; /* 极细微绢素织物肌理，绝非纹饰 */
  border-top: 2px solid #c9bda7; /* 装裱牙白小绫边 */
  border-bottom: 2px solid #c9bda7;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  box-sizing: border-box;
  overflow: hidden;
}

/* 右向左展开指引标线 */
.silk-scroll-flow-hint {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: #9c917f;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}

.silk-scroll-flow-hint::after {
  content: "← 右起展卷";
  font-family: var(--font-kaiti);
  color: #857864;
  font-size: 0.72rem;
}

/* 卷上只有一行小楷。那一行是「千问 / qwen / 千问官网」 */
.silk-scroll-text-line {
  font-family: var(--font-kaiti);
  font-size: clamp(0.95rem, 2.2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #1e1b18; /* 沉静墨色 */
  white-space: nowrap;
  line-height: 1;
  text-align: center;
}

.silk-scroll-stage-footer {
  border-top: 1px dashed var(--color-border-subtle);
  padding: 10px 20px;
  background: var(--color-paper-accent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-ink-light);
}
   - 布局：主文在上，题跋在左下，字小两号，两者之间留出大片空
   - 风格：画后题跋，但没有画，只有字！不要山水背景！
   - 字体：主文楷体，跋用较小宋体
   - 主文「通义千问」，跋里解释千问网页版、千问办公、qwen AI
   ========================================================================== */
.colophon-stage-wrapper {
  margin-top: 32px;
  border: 1px solid var(--color-border-ink);
  background: #ffffff;
  position: relative;
}

.colophon-stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-paper-accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--color-ink-muted);
  text-transform: uppercase;
}

.colophon-canvas-box {
  position: relative;
  min-height: 440px;
  padding: 48px 48px 40px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 主文在上，题跋在左下，拉开巨大空间 */
  background: #ffffff;
}

/* 主文在上：楷体大字，如画作宏阔主题，苍劲端庄 */
.colophon-primary-title-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 900px;
}

.colophon-main-headline {
  font-family: var(--font-kaiti);
  font-size: 3.4rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--color-ink-deep);
  line-height: 1.15;
  margin-bottom: 12px;
}

.colophon-main-subtext {
  font-family: var(--font-kaiti);
  font-size: 1.25rem;
  color: var(--color-ink-muted);
  letter-spacing: 0.08em;
  line-height: 1.5;
}

/* 两者之间留出大片空（大片白纸留白） */
.colophon-massive-void {
  flex: 1;
  min-height: 80px;
  /* 纯净纸白，绝无山水图象，仅留墨香空间 */
}

/* 题跋在左下：字体宋体，字小两号，如卷轴后所落考据题识 */
.colophon-postscript-block {
  align-self: flex-start;
  max-width: 620px;
  border-left: 2px solid var(--color-border-ink);
  padding-left: 20px;
  margin-top: 24px;
  background: transparent;
}

.colophon-seal-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-seal-vermilion);
  color: var(--color-seal-vermilion);
  padding: 1px 8px;
  font-size: 0.72rem;
  font-family: var(--font-kaiti);
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: 10px;
}

.colophon-postscript-text {
  font-family: var(--font-songti);
  font-size: 0.95rem; /* 比主文小两号 */
  line-height: 1.85;
  color: var(--color-ink-text);
  letter-spacing: 0.04em;
}

.colophon-postscript-text strong {
  color: var(--color-ink-deep);
  font-weight: 800;
}

.colophon-postscript-meta {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-ink-light);
  letter-spacing: 0.06em;
}

.colophon-stage-footer {
  border-top: 1px dashed var(--color-border-subtle);
  padding: 12px 24px;
  background: var(--color-paper-accent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-ink-light);
}

/* ==========================================================================
   3. 信任：客户名和四个数字
   ========================================================================== */
.trust-section {
  padding: 48px 0;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border-ink);
}

.trust-clients-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ink-light);
  margin-bottom: 16px;
}

.trust-clients-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 36px;
}

.trust-client-item {
  border: 1px solid var(--color-border-subtle);
  padding: 12px 8px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--color-paper);
  color: var(--color-ink-text);
}

.trust-numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.trust-number-card {
  border: 1px solid var(--color-border-ink);
  padding: 20px;
  background: var(--color-paper);
}

.trust-number-val {
  font-size: 2.2rem;
  font-weight: 900;
  font-family: var(--font-mono);
  line-height: 1.1;
  margin-bottom: 4px;
  color: var(--color-ink-deep);
}

.trust-number-label {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-ink-deep);
  margin-bottom: 4px;
}

.trust-number-desc {
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  line-height: 1.4;
}

/* ==========================================================================
   4. 能力：4 列 × 2 行，只有图标、标题和两行字
   ========================================================================== */
.capabilities-section {
  padding: 64px 0;
  background: var(--color-paper-accent);
  border-bottom: 1px solid var(--color-border-ink);
}

.section-head-box {
  margin-bottom: 36px;
}

.section-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ink-light);
  margin-bottom: 8px;
}

.section-h2 {
  font-family: var(--font-kaiti);
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--color-ink-deep);
}

.cap-grid-4x2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.cap-card-item {
  border: 1px solid var(--color-border-ink);
  background: #ffffff;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.cap-icon-box {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 16px;
  background: var(--color-paper);
  font-family: var(--font-mono);
}

.cap-card-title {
  font-family: var(--font-kaiti);
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--color-ink-deep);
}

.cap-line-1, .cap-line-2 {
  font-family: var(--font-songti);
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  line-height: 1.45;
}

/* ==========================================================================
   5. 目录：两组，每组 3 张卡，带状态和「试用 / 文档」
   ========================================================================== */
.catalog-section {
  padding: 64px 0;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border-ink);
}

.catalog-group-wrapper {
  margin-bottom: 40px;
}

.catalog-group-wrapper:last-child {
  margin-bottom: 0;
}

.catalog-group-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border-ink);
}

.catalog-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.catalog-card {
  border: 1px solid var(--color-border-ink);
  padding: 24px;
  background: var(--color-paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.catalog-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.catalog-card-h3 {
  font-family: var(--font-kaiti);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-ink-deep);
}

.catalog-status-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border: 1px solid var(--color-border-ink);
  background: #ffffff;
  text-transform: uppercase;
}

.catalog-card-desc {
  font-family: var(--font-songti);
  font-size: 0.86rem;
  color: var(--color-ink-muted);
  line-height: 1.6;
  margin-bottom: 20px;
  min-height: 48px;
}

.catalog-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px dashed var(--color-border-subtle);
  padding-top: 16px;
}

.btn-catalog-try {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 16px;
  background: var(--color-border-ink);
  color: #ffffff;
  border: 1px solid var(--color-border-ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-catalog-try:hover {
  background: #3a3834;
}

.btn-catalog-doc {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 16px;
  background: #ffffff;
  color: var(--color-ink-deep);
  border: 1px solid var(--color-border-ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-catalog-doc:hover {
  background: #f0eee8;
}

/* ==========================================================================
   6. 场景：3 列 × 2 行（合理插入 1.webp-4.webp）
   ========================================================================== */
.scenes-section {
  padding: 64px 0;
  background: var(--color-paper-accent);
  border-bottom: 1px solid var(--color-border-ink);
}

.scenes-grid-3x2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.scene-card {
  border: 1px solid var(--color-border-ink);
  background: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.scene-image-wrapper {
  width: 100%;
  height: 180px;
  border-bottom: 1px solid var(--color-border-ink);
  background: #000000;
  position: relative;
  overflow: hidden;
}

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

.scene-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.scene-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--color-ink-light);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.scene-title {
  font-family: var(--font-kaiti);
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--color-ink-deep);
}

.scene-desc {
  font-family: var(--font-songti);
  font-size: 0.86rem;
  color: var(--color-ink-muted);
  line-height: 1.55;
}

/* ==========================================================================
   7. 演示：左边任务，右边结果
   ========================================================================== */
.demo-section {
  padding: 64px 0;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border-ink);
}

.demo-split-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--color-border-ink);
  background: #ffffff;
}

.demo-col-task {
  padding: 32px;
  border-right: 1px solid var(--color-border-ink);
  background: var(--color-paper);
}

.demo-col-result {
  padding: 32px;
  background: #ffffff;
}

.demo-pane-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--color-border-ink);
}

.demo-pane-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.demo-pane-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 2px 8px;
  border: 1px solid var(--color-border-ink);
  background: #ffffff;
  text-transform: uppercase;
}

.demo-task-prompt {
  background: #ffffff;
  border: 1px solid var(--color-border-subtle);
  padding: 20px;
  font-family: var(--font-songti);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-ink-text);
  margin-bottom: 20px;
}

.demo-task-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  line-height: 1.6;
}

.demo-result-content {
  background: var(--color-paper);
  border: 1px solid var(--color-border-subtle);
  padding: 20px;
  font-size: 0.88rem;
  line-height: 1.65;
}

.demo-result-content h4 {
  font-family: var(--font-kaiti);
  font-size: 1.05rem;
  font-weight: 800;
  margin: 12px 0 6px 0;
  color: var(--color-ink-deep);
}

.demo-result-content h4:first-child {
  margin-top: 0;
}

.demo-result-content ul {
  padding-left: 20px;
  list-style: square;
  margin-bottom: 12px;
}

.demo-result-content li {
  margin-bottom: 4px;
}

/* ==========================================================================
   8. 开发者：左边卖点，右边可切换的代码
   ========================================================================== */
.dev-section {
  padding: 64px 0;
  background: var(--color-paper-accent);
  border-bottom: 1px solid var(--color-border-ink);
}

.dev-split-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--color-border-ink);
  background: #ffffff;
}

.dev-left-selling {
  padding: 36px;
  border-right: 1px solid var(--color-border-ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dev-sell-item {
  margin-bottom: 24px;
}

.dev-sell-item:last-child {
  margin-bottom: 0;
}

.dev-sell-title {
  font-family: var(--font-kaiti);
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--color-ink-deep);
}

.dev-sell-desc {
  font-family: var(--font-songti);
  font-size: 0.86rem;
  color: var(--color-ink-muted);
  line-height: 1.55;
}

.dev-right-code {
  padding: 36px;
  background: #111110;
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.dev-code-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid #333333;
  padding-bottom: 12px;
}

.btn-code-tab {
  background: transparent;
  color: #888888;
  border: 1px solid #333333;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
}

.btn-code-tab.active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.code-display-block {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.55;
  background: #1a1a18;
  border: 1px solid #282824;
  padding: 16px;
  overflow-x: auto;
  color: #e0e0e0;
  flex: 1;
}

/* ==========================================================================
   9. 企业：3 列 × 2 行
   ========================================================================== */
.enterprise-section {
  padding: 64px 0;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border-ink);
}

.ent-grid-3x2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ent-card {
  border: 1px solid var(--color-border-ink);
  padding: 24px;
  background: var(--color-paper);
}

.ent-card-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--color-ink-light);
  margin-bottom: 12px;
}

.ent-card-title {
  font-family: var(--font-kaiti);
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--color-ink-deep);
}

.ent-card-desc {
  font-family: var(--font-songti);
  font-size: 0.86rem;
  color: var(--color-ink-muted);
  line-height: 1.6;
}

/* ==========================================================================
   10. 下载和帮助：各 5 列
   ========================================================================== */
.download-help-section {
  padding: 64px 0;
  background: var(--color-paper-accent);
  border-bottom: 1px solid var(--color-border-ink);
}

.grid-5-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.dl-card, .help-guide-card {
  border: 1px solid var(--color-border-ink);
  background: #ffffff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dl-platform-name, .help-guide-title {
  font-family: var(--font-kaiti);
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--color-ink-deep);
}

.dl-platform-spec, .help-guide-spec {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-ink-light);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.dl-platform-desc, .help-guide-desc {
  font-family: var(--font-songti);
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  line-height: 1.45;
  margin-bottom: 16px;
  min-height: 48px;
}

.btn-card-action {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 12px;
  border: 1px solid var(--color-border-ink);
  background: var(--color-paper);
  color: var(--color-ink-deep);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}

.btn-card-action:hover {
  background: var(--color-border-ink);
  color: #ffffff;
}

/* ==========================================================================
   11. 问答：默认折叠，点开才看步骤
   ========================================================================== */
.faq-section {
  padding: 64px 0;
  background: #ffffff;
  border-bottom: 1px solid var(--color-border-ink);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  border: 1px solid var(--color-border-ink);
  background: var(--color-paper);
}

.faq-summary {
  padding: 18px 24px;
  font-family: var(--font-kaiti);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  outline: none;
  color: var(--color-ink-deep);
}

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

.faq-summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 800;
}

.faq-item[open] .faq-summary::after {
  content: "—";
}

.faq-item[open] .faq-summary {
  border-bottom: 1px dashed var(--color-border-ink);
  background: #ffffff;
}

.faq-steps-body {
  padding: 24px;
  background: #ffffff;
  font-family: var(--font-songti);
  font-size: 0.9rem;
  line-height: 1.7;
}

.faq-steps-list {
  padding-left: 20px;
  list-style: decimal;
  margin-top: 12px;
}

.faq-steps-list li {
  margin-bottom: 8px;
}

/* ==========================================================================
   12. 页脚：品牌说明加四列链接
   ========================================================================== */
.site-footer {
  background: #141312;
  color: #ffffff;
  padding: 64px 0 48px 0;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
  gap: 32px;
  margin-bottom: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid #262422;
}

.footer-brand-col {
  padding-right: 24px;
}

.footer-brand-title {
  font-family: var(--font-kaiti);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #ffffff;
  margin-bottom: 12px;
}

.footer-brand-desc {
  font-family: var(--font-songti);
  font-size: 0.82rem;
  color: #8c8880;
  line-height: 1.7;
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 16px;
  border-bottom: 1px dashed #3a3834;
  padding-bottom: 6px;
}

.footer-links-list li {
  margin-bottom: 10px;
}

.footer-links-list a {
  font-family: var(--font-songti);
  font-size: 0.82rem;
  color: #a8a49c;
  transition: color 0.2s ease;
}

.footer-links-list a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #66635c;
  letter-spacing: 0.05em;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .cap-grid-4x2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-5-cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
  }
  .colophon-main-headline {
    font-size: 2.6rem;
  }
}

@media (max-width: 960px) {
  .header-inner {
    flex-wrap: wrap;
    min-height: auto;
    padding: 12px 0;
  }
  .nav-anchors {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding: 8px 0 4px 0;
    gap: 16px;
    border-top: 1px dashed var(--color-border-subtle);
  }
}

@media (max-width: 768px) {
  .catalog-cards-grid,
  .scenes-grid-3x2,
  .ent-grid-3x2,
  .demo-split-box,
  .dev-split-box {
    grid-template-columns: 1fr;
  }
  .trust-clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .trust-numbers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-5-cols {
    grid-template-columns: 1fr;
  }
  .colophon-canvas-box {
    padding: 32px 20px 24px 20px;
    min-height: auto;
  }
  .colophon-main-headline {
    font-size: 2.1rem;
  }
  .footer-top-grid {
    grid-template-columns: 1fr;
  }
}