/* ============================================================
   内页共用样式 · Inner Page
   ------------------------------------------------------------------
   与首屏共用 tokens.css，视觉语言完全一致：
     同一套色板、同一套字阶、同一套间距、同一套圆角与动效曲线。
   后续填入真实内容时只需替换文案，不需要再调样式。
   ============================================================ */

/* 兜底：任何带 padding + max-width 的块都不应因缺 box-sizing 而溢出 */
*, *::before, *::after { box-sizing: border-box; }

/* ---------- 页面骨架 ---------- */
.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  position: relative;
  isolation: isolate;
}
/* 与首屏一致的极轻中心提亮 */
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%,
      rgba(172, 206, 34, .04) 0%, transparent 60%);
}

/* ---------- 顶栏：与首屏完全相同 ---------- */
.page__bar {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* 只剩导航一项，用 flex-end 右对齐。
     原来左侧有 logo 链接（回首页），现已移除。 */
  justify-content: flex-end;
  gap: var(--s-2);
  padding: 0 var(--gutter);
  height: clamp(56px, 9vh, 84px);
  border-bottom: 1px solid var(--line);
}

/* 导航：与首屏同一套样式（类名沿用 .hero__nav 以避免重复定义） */
.page__bar .hero__nav { border-radius: var(--r-pill); }

/* ---------- 内容区 ---------- */
.page__main {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  /* 关键：max-width + padding 必须配 border-box，
     否则实际宽度 = max-width + padding*2，窄屏必然横向溢出（本项目踩过）。 */
  box-sizing: border-box;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) var(--gutter) clamp(64px, 10vh, 120px);
}

/* 页标题：字号与首屏主张同一量级，保持节奏一致 */
.page__title {
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--c-text);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
.page__title em {
  font-style: normal;
  color: var(--c-brand-hi);
}

.page__lead {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.95;
  color: var(--c-text-2);
  max-width: 62ch;
  margin: 0 0 var(--s-8);
}

/* ---------- 通用区块 ---------- */
.sec { margin: 0 0 var(--s-12); }
.sec:last-child { margin-bottom: 0; }

.sec__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.sec__title {
  font-size: var(--t-h2);
  font-weight: 500;
  color: var(--c-text);
  margin: 0;
  letter-spacing: .01em;
}
.sec__note {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-text-3);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-left: auto;
}

.sec__body {
  font-size: var(--t-body);
  line-height: 1.9;
  color: var(--c-text-2);
}
.sec__body p { margin: 0 0 var(--s-2); }
.sec__body h3 {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--c-text);
  margin: var(--s-4) 0 var(--s-1);
}

/* ---------- 网格：资源/案例卡位 ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
}

/* 卡片：极简描边，不用阴影、不用大圆角 —— 与首屏的克制调性一致 */
.card {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  background: var(--c-raise);
  transition: border-color var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease);
}
.card:hover {
  border-color: rgba(172, 206, 34, .42);
  transform: translateY(-2px);
}
.card__t {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--c-text);
  margin: 0 0 var(--s-1);
}
.card__d {
  font-size: var(--t-sm);
  line-height: 1.75;
  color: var(--c-text-2);
  margin: 0;
}

/* ---------- FAQ：手风琴 ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  position: relative;      /* 加号的定位参照系，缺这行会定位到页面根 */
  width: 100%;
  display: flex;
  align-items: center;
  /* ★ 原来是 space-between，配合「编号 span + 问题文字」两个子元素时，
     会把编号推到最左、问题推到最右，中间留一大片空白（本次实测踩到）。
     改成 flex-start：编号与问题紧贴左对齐，读起来是一行完整的话。
     加号是 ::after 绝对定位在 right，不受这里的 justify 影响。 */
  justify-content: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) 34px var(--s-3) 0;   /* 右侧留出加号位置 */
  background: none;
  border: 0;
  color: var(--c-text);
  font: inherit;
  font-size: var(--t-body);
  text-align: left;
  cursor: pointer;
  transition: color var(--d-fast) var(--ease);
  list-style: none;        /* 去掉 details 默认三角，避免与自定义加号重复 */
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--c-brand-hi); }

/* 展开指示：CSS 画的加号，展开时竖线消失 → 变成减号 */
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute;
  right: 6px;
  background: currentColor;
  transition: transform var(--d-base) var(--ease);
}
.faq__q::before { width: 12px; height: 1.5px; top: 50%; margin-top: -.75px; }
.faq__q::after  { width: 1.5px; height: 12px; top: 50%; margin-top: -6px; }
.faq__item[open] .faq__q::after { transform: scaleY(0); }

.faq__a {
  padding: 0 0 var(--s-3);
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.85;
  color: var(--c-text-2);
  max-width: 72ch;
}

/* ---------- 底部 CTA：与首屏同一套按钮 ---------- */
.page__cta {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.page__cta p {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--c-text-2);
}

/* ---------- 页脚 ---------- */
.page__foot {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: var(--s-3) var(--gutter);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.page__foot a { color: var(--c-text-3); text-decoration: none; }
.page__foot a:hover { color: var(--c-brand); }

/* ---------- 表单：与整体同一套克制的视觉语言 ---------- */
.form { max-width: 560px; }

.field { margin-bottom: var(--s-3); }

.field__label {
  display: block;
  font-size: var(--t-sm);
  color: var(--c-text);
  margin-bottom: var(--s-1);
}
.req { color: var(--c-brand); }

.field__input {
  width: 100%;
  padding: 12px 14px;
  background: var(--c-raise);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font: inherit;
  font-size: var(--t-sm);
  transition: border-color var(--d-fast) var(--ease),
              background var(--d-fast) var(--ease);
}
.field__input::placeholder { color: var(--c-text-3); }
.field__input:hover { border-color: rgba(255, 255, 255, .16); }
.field__input:focus {
  outline: none;
  border-color: var(--c-brand);
  background: var(--c-surface);
}
/* 键盘聚焦必须有明显可见的焦点环（无障碍要求） */
.field__input:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 1px;
}
.field__input--area { resize: vertical; min-height: 96px; }

select.field__input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-text-3) 50%),
    linear-gradient(135deg, var(--c-text-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.field__hint {
  font-size: var(--t-xs);
  color: var(--c-text-3);
  margin: var(--s-1) 0 0;
  line-height: 1.6;
}

.form__submit {
  margin-top: var(--s-2);
  cursor: pointer;
  border: 0;
  font: inherit;
  font-size: var(--t-sm);
}

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  .page__main { padding-top: var(--s-6); }
  .page__logo { height: 26px; }
  .page__lead { margin-bottom: var(--s-6); }
  .sec { margin-bottom: var(--s-8); }
}

/* ---------- 备案信息（工信部要求展示在页脚）---------- */
.page__beian {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-text-3);
}
.page__beian a {
  color: var(--c-text-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
/* 悬停加下划线：让访客看得出这是可点的外链，同时保持克制 */
.page__beian a:hover {
  color: var(--c-text-2);
  border-bottom-color: currentColor;
}
/* 焦点必须可见 —— 无障碍要求，键盘用户要能看到焦点框 */
.page__beian a:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: 2px;
}