/* ============================================================
   OPC Studio — 主题样式
   设计来源：Next.js 原站设计系统（oklch → hex 精确还原）
   基调：暖白底 + 深墨文字 + 暖铜强调色，克制的编辑部排版
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 亮色：暖灰底 + 纯白卡片 + 深墨文字。
     页底刻意压灰一档，白色卡片才有块面感（页底/白卡 1.10:1） */
  --opc-bg: #F6F4F0;
  --opc-fg: #111419;

  --opc-card: #FFFFFF;
  --opc-card-fg: #111419;

  --opc-primary: #1C293D;
  --opc-primary-fg: #FCFCFC;

  --opc-secondary: #EBE7E0;
  --opc-secondary-fg: #1B2026;

  --opc-muted: #EBE7E0;
  /* 需要同时满足页底 / 白卡 / 次表面 / 强调底四种背景上的 4.5:1 */
  --opc-muted-fg: #61656C;

  --opc-accent: #F8E4D4;
  --opc-accent-fg: #5A2800;

  --opc-destructive: #DB2C2B;

  --opc-border: #DEDCD7;
  --opc-hair: #DEDCD7;

  /* 品牌强调色（可被主题设置覆盖）：用于填充、描边、底纹 */
  --opc-brand: #B75F2C;
  /* 品牌色当文字用时压深一档，达到 4.5:1；从 --opc-brand 派生，
     所以后台换品牌色时文字色会一起走 */
  --opc-brand-ink: color-mix(in srgb, var(--opc-brand) 85%, #000);
  --opc-brand-soft: #FEEADB;

  /* 发丝线毛玻璃顶栏 */
  --opc-header-bg: rgb(246 244 240 / 0.82);

  /* 尺度 */
  --opc-content-max: 1140px;
  --opc-pad-x: 1.5rem;
  --opc-radius: 0.625rem;

  --opc-r-sm: calc(var(--opc-radius) - 4px);
  --opc-r-md: calc(var(--opc-radius) - 2px);
  --opc-r-lg: var(--opc-radius);
  --opc-r-xl: calc(var(--opc-radius) + 4px);

  /* 动效曲线 */
  --opc-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* 字体：Inter 优先，回退到系统中英文字体 */
  --opc-font-sans: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", system-ui, sans-serif;
  --opc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  /* 标题字体：无衬线中等字重。汉字满格字身，大字号配 500 才有呼吸，
     700 会糊成一整块 */
  --opc-font-display: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", system-ui, sans-serif;

  color-scheme: light;
}

@media (min-width: 768px) {
  :root {
    --opc-pad-x: 2.5rem;
  }
}

/* ---------- 2. 深色模式 ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --opc-bg: #0A0C11;
    --opc-fg: #ECEBE8;
    --opc-card: #171B22;
    --opc-card-fg: #ECEBE8;
    --opc-primary: #ECEBE8;
    --opc-primary-fg: #101419;
    --opc-secondary: #242A33;
    --opc-secondary-fg: #ECEBE8;
    --opc-muted: #242A33;
    --opc-muted-fg: #94999F;
    --opc-accent: #3D281A;
    --opc-accent-fg: #F4E0D1;
    --opc-brand-soft: #3D281A;
    /* 深色底上品牌色要提亮才够 4.5:1 */
    --opc-brand-ink: color-mix(in srgb, var(--opc-brand) 74%, #fff);
    --opc-destructive: #E24947;
    --opc-border: #2A3038;
    --opc-hair: #2A3038;
    --opc-header-bg: rgb(10 12 17 / 0.82);
    color-scheme: dark;
  }
}

:root[data-scheme="dark"] {
  --opc-bg: #0A0C11;
  --opc-fg: #ECEBE8;
  --opc-card: #171B22;
  --opc-card-fg: #ECEBE8;
  --opc-primary: #ECEBE8;
  --opc-primary-fg: #101419;
  --opc-secondary: #242A33;
  --opc-secondary-fg: #ECEBE8;
  --opc-muted: #242A33;
  --opc-muted-fg: #94999F;
  --opc-accent: #3D281A;
  --opc-accent-fg: #F4E0D1;
  --opc-brand-soft: #3D281A;
  --opc-brand-ink: color-mix(in srgb, var(--opc-brand) 74%, #fff);
  --opc-destructive: #E24947;
  --opc-border: #2A3038;
  --opc-hair: #2A3038;
  --opc-header-bg: rgb(10 12 17 / 0.82);
  color-scheme: dark;
}

/* ---------- 3. 基础 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* 始终给滚动条留位，避免页面长短不同时内容左右跳一下 */
  scrollbar-gutter: stable;
}

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

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

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
}

::selection {
  background: var(--opc-brand-soft);
  color: var(--opc-fg);
}

:focus-visible {
  outline: 2px solid var(--opc-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.opc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.opc-skip {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1.1rem;
  background: var(--opc-fg);
  color: var(--opc-bg);
  border-radius: 0 0 var(--opc-r-lg) var(--opc-r-lg);
  font-size: 0.875rem;
  transition: top 0.16s var(--opc-ease);
}
.opc-skip:focus {
  top: 0;
}

/* ---------- 4. 布局 ---------- */
.opc-shell {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.opc-main {
  flex: 1;
}

/* 文章/独立页面：阅读栏收窄居中，避免正文只占版心左半边 */
.opc-narrow {
  max-width: 50rem;
}

.opc-container {
  width: 100%;
  max-width: var(--opc-content-max);
  margin-inline: auto;
  padding-inline: var(--opc-pad-x);
}

/* ---------- 5. 顶栏 ---------- */
.opc-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--opc-header-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.8);
  backdrop-filter: blur(12px) saturate(1.8);
  border-bottom: 1px solid var(--opc-hair);
}

.opc-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}

.opc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 0.9375rem;
  flex-shrink: 0;
}

.opc-brand-mark {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: var(--opc-r-sm);
  background: var(--opc-brand);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.opc-header-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.opc-nav {
  display: none;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .opc-nav {
    display: flex;
  }
}

.opc-nav-link {
  position: relative;
  /* 文字链接的可点区域只有行高那么高，补点内边距到 30px */
  padding-block: 0.25rem;
  font-size: 0.875rem;
  color: var(--opc-muted-fg);
  transition: color 0.16s var(--opc-ease);
}

.opc-nav-link:hover {
  color: var(--opc-fg);
}

.opc-nav-link.is-active {
  color: var(--opc-fg);
  font-weight: 500;
}

.opc-nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* 抵消上面补的 padding-block，让下划线和文字的距离保持不变 */
  bottom: -0.65rem;
  height: 2px;
  border-radius: 2px;
  background: var(--opc-brand);
}

.opc-divider-v {
  display: none;
  width: 1px;
  height: 1rem;
  margin-inline: 0.5rem;
  background: var(--opc-border);
}

@media (min-width: 768px) {
  .opc-divider-v {
    display: block;
  }
}

.opc-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--opc-r-md);
  color: var(--opc-muted-fg);
  transition: background-color 0.16s var(--opc-ease), color 0.16s var(--opc-ease);
}

.opc-icon-btn:hover {
  background: var(--opc-secondary);
  color: var(--opc-fg);
}

.opc-icon-btn svg {
  width: 1rem;
  height: 1rem;
}

/* 顶栏 CTA */
.opc-header-cta {
  display: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--opc-r-lg);
  background: var(--opc-fg);
  color: var(--opc-bg);
  font-size: 0.75rem;
  font-weight: 500;
  transition: opacity 0.16s var(--opc-ease);
}

@media (min-width: 768px) {
  .opc-header-cta {
    display: inline-flex;
  }
}

.opc-header-cta:hover {
  opacity: 0.85;
}

.opc-header-cta svg {
  width: 0.875rem;
  height: 0.875rem;
}

.opc-burger {
  display: inline-grid;
}

@media (min-width: 768px) {
  .opc-burger {
    display: none;
  }
}

/* 汉堡图标：三条杠，展开时变形成叉 */
.opc-burger-bars {
  position: relative;
  display: block;
  width: 1rem;
  height: 0.6875rem;
}

.opc-burger-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: top 0.24s var(--opc-ease), transform 0.24s var(--opc-ease),
    opacity 0.16s var(--opc-ease);
}

.opc-burger-bars span:nth-child(1) { top: 0; }
.opc-burger-bars span:nth-child(2) { top: 50%; margin-top: -1px; }
.opc-burger-bars span:nth-child(3) { top: 100%; margin-top: -2px; }

.opc-burger[aria-expanded="true"] .opc-burger-bars span:nth-child(1) {
  top: 50%;
  margin-top: -1px;
  transform: rotate(45deg);
}

.opc-burger[aria-expanded="true"] .opc-burger-bars span:nth-child(2) {
  opacity: 0;
}

.opc-burger[aria-expanded="true"] .opc-burger-bars span:nth-child(3) {
  top: 50%;
  margin-top: -1px;
  transform: rotate(-45deg);
}

/* 移动端菜单：开与关都用同一条过渡（原来只有打开有动画） */
.opc-mobile-nav {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  border-top: 1px solid var(--opc-border);
  background: var(--opc-bg);
  transform: translateY(-6px);
  transition: max-height 0.26s var(--opc-ease), opacity 0.2s var(--opc-ease),
    transform 0.26s var(--opc-ease);
}

.opc-mobile-nav.is-open {
  max-height: 26rem;
  opacity: 1;
  transform: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .opc-mobile-nav {
    transition: none;
    transform: none;
  }
}

@media (min-width: 768px) {
  .opc-mobile-nav {
    display: none !important;
  }
}

.opc-mobile-nav-inner {
  display: flex;
  flex-direction: column;
  padding-block: 0.25rem;
}

.opc-mobile-nav-link {
  padding-block: 0.875rem;
  font-size: 1rem;
  border-bottom: 1px solid var(--opc-border);
}

.opc-mobile-nav-link:last-child {
  border-bottom: 0;
}

.opc-mobile-nav-link:hover {
  color: var(--opc-brand-ink);
}

/* 主题切换按钮的日/月图标：两个都先隐藏，再按 html 上的 data-scheme 二选一显示 */
[data-opc-theme-toggle] .opc-icon-sun,
[data-opc-theme-toggle] .opc-icon-moon {
  display: none;
}
:root[data-scheme="light"] [data-opc-theme-toggle] .opc-icon-sun {
  display: block;
}
:root[data-scheme="dark"] [data-opc-theme-toggle] .opc-icon-moon {
  display: block;
}

/* 返回顶部 */
.opc-top-btn {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--opc-border);
  border-radius: 999px;
  background: var(--opc-card);
  color: var(--opc-fg);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.12);
  transition: background-color 0.16s var(--opc-ease), transform 0.16s var(--opc-ease);
}

.opc-top-btn:hover {
  background: var(--opc-secondary);
  transform: translateY(-2px);
}

.opc-top-btn[hidden] {
  display: none;
}

.opc-top-btn svg {
  width: 1rem;
  height: 1rem;
}

/* ---------- 6. 按钮 ---------- */
.opc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.6875rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--opc-r-lg);
  background: var(--opc-fg);
  color: var(--opc-bg);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: opacity 0.16s var(--opc-ease), background-color 0.16s var(--opc-ease),
    border-color 0.16s var(--opc-ease), transform 0.16s var(--opc-ease);
}

.opc-btn:hover {
  opacity: 0.85;
}

.opc-btn:active {
  transform: translateY(1px);
}

.opc-btn svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

/* 次级按钮给足面，别只是一圈细描边（对齐优质落地页的做法）。
   页底是浅暖灰，按钮用卡片白面才立得住 */
.opc-btn--outline {
  background: var(--opc-card);
  color: var(--opc-fg);
  border-color: var(--opc-border);
}

.opc-btn--outline:hover {
  background: var(--opc-accent);
  border-color: color-mix(in srgb, var(--opc-fg) 14%, transparent);
  opacity: 1;
}

.opc-btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

.opc-btn--lg {
  padding: 0.75rem 1.5rem;
}

/* ---------- 7. 首屏 ---------- */
/* 封面式：眉标 / 标题 / 说明 / 按钮竖排居中，短标题两侧留白对称。
   首屏不放左右分栏——没有配图时，左右分栏会在一侧空出一大块。 */
.opc-hero {
  padding-block: 3rem 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .opc-hero {
    padding-block: 5rem 4.5rem;
  }
}

.opc-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--opc-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--opc-muted-fg);
  /* 与主标题拉开距离：12px 的小字紧贴 84px 的大字会显得挤 */
  margin-bottom: 2.5rem;
}

/* 眉标前的小圆点，给首屏顶部一个品牌色的落点 */
.opc-hero-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--opc-brand);
}

.opc-hero-title {
  font-family: var(--opc-font-display);
  /* 中文按字断行，字号跟着屏宽走，尽量让配置里的一行文案整行放下 */
  font-size: clamp(2rem, 8vw, 2.5rem);
  /* 宋体笔画本身有对比，用 Medium 就够，700 会糊成一块 */
  font-weight: 500;
  line-height: 1.2;
  /* 汉字是满格字身，收得比西文克制些，-0.03em 会让字挤在一起 */
  letter-spacing: -0.01em;
  /* 避免最后一行只剩一两个字 */
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .opc-hero-title {
    font-size: 3.5rem;
  }
}

/* 单栏首屏之后标题不再受栏宽挤压，宽屏可以给足分量 */
@media (min-width: 1024px) {
  .opc-hero-title {
    font-size: 5.25rem;
  }
}

.opc-hero-lead {
  margin-top: 1.75rem;
  margin-inline: auto;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--opc-muted-fg);
}

@media (min-width: 768px) {
  .opc-hero-lead {
    font-size: 1.125rem;
  }
}

/* 说明窄于标题，宽度取到刚好两行、两行长度接近 */
@media (min-width: 1024px) {
  .opc-hero-lead {
    max-width: 42rem;
  }
}

.opc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* 数据条：紧贴首屏下方的一条通栏，上发丝线与下方区块的线围出一条带子 */
.opc-hero-stats {
  padding-block: 2.5rem;
  border-top: 1px solid var(--opc-border);
}

.opc-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 2rem;
}

/* 数据带内容与居中首屏同轴 */
.opc-stats-grid > div {
  text-align: center;
}

.opc-stat-value {
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.opc-stat-label {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--opc-muted-fg);
}

/* 宽屏铺成四栏，栏间用竖发丝线分隔 */
@media (min-width: 1024px) {
  .opc-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
  }

  .opc-stats-grid > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 6rem;
    padding-inline: 1.5rem;
    border-left: 1px solid var(--opc-border);
  }

  .opc-stats-grid > div:first-child {
    border-left: 0;
  }

  .opc-stat-value {
    font-size: 2.25rem;
  }
}

/* ---------- 8. 区块 ---------- */
.opc-section {
  border-top: 1px solid var(--opc-border);
  padding-block: 4rem;
}

@media (min-width: 768px) {
  .opc-section {
    padding-block: 5rem;
  }
}

.opc-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.opc-eyebrow {
  margin-bottom: 0.5rem;
  font-family: var(--opc-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--opc-muted-fg);
}

.opc-eyebrow--brand {
  color: var(--opc-brand-ink);
}

.opc-section-title {
  font-family: var(--opc-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .opc-section-title {
    font-size: 1.875rem;
  }
}

.opc-section-link {
  display: none;
  align-items: center;
  gap: 0.25rem;
  padding-block: 0.25rem;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--opc-muted-fg);
  transition: color 0.16s var(--opc-ease);
}

@media (min-width: 768px) {
  .opc-section-link {
    display: inline-flex;
  }
}

.opc-section-link:hover {
  color: var(--opc-fg);
}

.opc-section-link svg {
  width: 1rem;
  height: 1rem;
}

/* ---------- 9. 卡片 ---------- */
.opc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--opc-border);
  border-radius: var(--opc-r-xl);
  background: var(--opc-card);
  transition: border-color 0.2s var(--opc-ease), box-shadow 0.2s var(--opc-ease),
    transform 0.2s var(--opc-ease);
}

/* 只有整张卡可点（服务卡是 <a>）时才做悬浮反馈；
   案例卡本体不是链接，改为「悬浮标题链接时卡片抬起」，避免给了假的可点暗示 */
a.opc-card:hover,
.opc-card:has(.opc-case-title a:hover) {
  border-color: color-mix(in srgb, var(--opc-fg) 25%, transparent);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 12px -4px rgb(0 0 0 / 0.08);
}

a.opc-card:active {
  transform: translateY(1px);
}

/* 显式给字号，别让 H3 落到浏览器默认的 1.17em（18.72px），
   否则和案例标题的 18px 差出 0.72px 这种说不清的不一致 */
.opc-card-title {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.opc-card-text {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--opc-muted-fg);
  /* 末行只剩两三个字时让浏览器自己调 */
  text-wrap: pretty;
}

/* 案例卡的指标分隔线靠 margin-top:auto 顶下去，空间不够时 auto 会解析成 0，
   线就贴到描述文字上了；这里给一个下限间距 */
.opc-cases-grid .opc-card-text {
  margin-bottom: 1.25rem;
}

/* 服务卡片 */
/* 图标与价格标签同一行，价格靠右；间距交给这一行统一控制 */
.opc-service-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.opc-service-icon {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0;
  border-radius: var(--opc-r-lg);
  background: var(--opc-accent);
  color: var(--opc-accent-fg);
}

.opc-service-icon svg {
  width: 1rem;
  height: 1rem;
}

/* 价格标签：与标签芯片同一套视觉，放在卡片右上角 */
.opc-service-pricing {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  border-radius: var(--opc-r-sm);
  background: var(--opc-secondary);
  color: var(--opc-secondary-fg);
  font-size: 0.75rem;
  white-space: nowrap;
}

.opc-services-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .opc-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 案例卡片 */
.opc-cases-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .opc-cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.opc-case-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  color: var(--opc-muted-fg);
}

.opc-case-meta svg {
  width: 0.875em;
  height: 0.875em;
}

.opc-case-title {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.opc-case-metrics {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--opc-border);
}

.opc-metric-value {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.opc-metric-label {
  font-size: 0.75rem;
  color: var(--opc-muted-fg);
}

.opc-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 1rem;
  padding-top: 1rem;
}

.opc-chip {
  padding: 0.125rem 0.5rem;
  border-radius: var(--opc-r-sm);
  background: var(--opc-secondary);
  color: var(--opc-secondary-fg);
  font-size: 0.75rem;
}

.opc-chip--sm {
  font-size: 0.6875rem;
  padding-block: 0.1rem;
}

/* ---------- 10. 流程 ---------- */
.opc-process {
  display: grid;
  gap: 1.5rem;
  list-style: none;
  counter-reset: opc-step;
}

@media (min-width: 640px) {
  .opc-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .opc-process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.opc-step-num {
  margin-bottom: 0.75rem;
  font-family: var(--opc-font-mono);
  font-size: 0.75rem;
  color: var(--opc-muted-fg);
}

.opc-step-title {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.opc-step-text {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--opc-muted-fg);
}

/* 关于页流程 / 联系页流程：带上边线 */
.opc-process--ruled {
  column-gap: 2rem;
  row-gap: 2rem;
}

.opc-process--ruled .opc-step {
  padding-top: 1.25rem;
  border-top: 1px solid var(--opc-border);
}

.opc-step-brand-num {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--opc-brand-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- 11. 行动区（CTA） ---------- */
.opc-cta {
  border-top: 1px solid var(--opc-border);
  padding-block: 4rem;
}

@media (min-width: 768px) {
  .opc-cta {
    padding-block: 6rem;
  }
}

.opc-cta-box {
  padding: 3rem 2rem;
  border: 1px solid var(--opc-border);
  border-radius: calc(var(--opc-r-xl) + 6px);
  background: var(--opc-card);
  text-align: center;
}

@media (min-width: 768px) {
  .opc-cta-box {
    padding: 4rem 3rem;
  }
}

.opc-cta-title {
  margin-inline: auto;
  max-width: 42rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .opc-cta-title {
    font-size: 1.875rem;
  }
}

.opc-cta-text {
  margin: 1rem auto 0;
  max-width: 36rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--opc-muted-fg);
}

@media (min-width: 768px) {
  .opc-cta-text {
    font-size: 1rem;
  }
}

.opc-cta-actions {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* 底部横向行动条 */
.opc-cta-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding-block: 4rem;
  border-top: 1px solid var(--opc-border);
}

@media (min-width: 768px) {
  .opc-cta-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.opc-cta-bar-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.opc-cta-bar-text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--opc-muted-fg);
}

/* ---------- 12. 页面头 ---------- */
.opc-page-head {
  border-bottom: 1px solid var(--opc-border);
  padding-block: 4rem;
}

@media (min-width: 768px) {
  .opc-page-head {
    padding-block: 5rem;
  }
}

.opc-page-title {
  font-family: var(--opc-font-display);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: pretty;
  max-width: 48rem;
}

@media (min-width: 768px) {
  .opc-page-title {
    font-size: 3rem;
  }
}

.opc-page-lead {
  margin-top: 1.25rem;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--opc-muted-fg);
}

@media (min-width: 768px) {
  .opc-page-lead {
    font-size: 1.125rem;
  }
}

.opc-page-meta {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--opc-muted-fg);
}

/* 面包屑 */
.opc-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: var(--opc-muted-fg);
}

.opc-crumbs a:hover {
  color: var(--opc-fg);
}

/* 返回链接 */
.opc-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 2rem;
  font-size: 0.875rem;
  color: var(--opc-muted-fg);
  transition: color 0.16s var(--opc-ease);
}

.opc-back:hover {
  color: var(--opc-fg);
}

.opc-back svg {
  width: 1rem;
  height: 1rem;
}

/* ---------- 13. 标签筛选 ---------- */
.opc-tag-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-block: 2rem;
}

.opc-tag-btn {
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--opc-border);
  border-radius: 999px;
  background: transparent;
  color: var(--opc-muted-fg);
  font-size: 0.75rem;
  transition: border-color 0.16s var(--opc-ease), color 0.16s var(--opc-ease),
    background-color 0.16s var(--opc-ease);
}

.opc-tag-btn:hover {
  border-color: color-mix(in srgb, var(--opc-fg) 30%, transparent);
  color: var(--opc-fg);
}

.opc-tag-btn[aria-pressed="true"] {
  border-color: var(--opc-fg);
  background: var(--opc-fg);
  color: var(--opc-bg);
}

/* ---------- 14. 服务详情列表 ---------- */
.opc-service-detail {
  display: grid;
  gap: 2rem;
  padding-block: 3rem;
  border-bottom: 1px solid var(--opc-border);
}

@media (min-width: 768px) {
  .opc-service-detail {
    grid-template-columns: 1fr 1.2fr;
    gap: 3.5rem;
    padding-block: 3.5rem;
  }
}

.opc-service-detail:last-of-type {
  border-bottom: 0;
}

.opc-service-detail-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.opc-service-detail-index {
  font-family: var(--opc-font-mono);
  font-size: 0.75rem;
  color: var(--opc-muted-fg);
}

.opc-service-detail-title {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .opc-service-detail-title {
    font-size: 1.5rem;
  }
}

.opc-service-detail-text {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--opc-muted-fg);
}

@media (min-width: 768px) {
  .opc-service-detail-text {
    font-size: 1rem;
  }
}

.opc-service-badge {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--opc-border);
  border-radius: var(--opc-r-sm);
  font-size: 0.75rem;
  color: var(--opc-muted-fg);
}

.opc-points {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
}

@media (min-width: 768px) {
  .opc-points {
    padding-top: 3.5rem;
  }
}

.opc-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.opc-points svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--opc-brand-ink);
}

.opc-points span {
  line-height: 1.7;
}

/* ---------- 15. 文章列表 ---------- */
.opc-post-list {
  list-style: none;
  border-top: 1px solid var(--opc-border);
}

.opc-post-item {
  border-bottom: 1px solid var(--opc-border);
}

.opc-post-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 2rem;
}

@media (min-width: 768px) {
  .opc-post-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
  }
}

.opc-post-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--opc-muted-fg);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .opc-post-date {
    width: 8rem;
    padding-top: 0.25rem;
  }
}

.opc-post-date svg {
  width: 0.875rem;
  height: 0.875rem;
}

.opc-post-body {
  min-width: 0;
  flex: 1;
}

.opc-post-title {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.16s var(--opc-ease);
}

@media (min-width: 768px) {
  .opc-post-title {
    font-size: 1.25rem;
  }
}

.opc-post-row:hover .opc-post-title {
  color: var(--opc-brand-ink);
}

.opc-post-title svg {
  width: 1rem;
  height: 1rem;
  margin-top: 0.25rem;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.16s var(--opc-ease), transform 0.16s var(--opc-ease);
}

.opc-post-row:hover .opc-post-title svg {
  opacity: 1;
  transform: translate(2px, -2px);
}

.opc-post-excerpt {
  margin-top: 0.5rem;
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--opc-muted-fg);
}

.opc-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* ---------- 16. 正文排版 ---------- */
.opc-prose {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--opc-fg);
}

.opc-prose h2 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 2.2em;
  margin-bottom: 0.7em;
  scroll-margin-top: 6rem;
}

.opc-prose h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1.8em;
  margin-bottom: 0.55em;
  scroll-margin-top: 6rem;
}

.opc-prose h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

.opc-prose p {
  margin-block: 1.05em;
}

.opc-prose ul,
.opc-prose ol {
  margin-block: 1.05em;
  padding-left: 1.35em;
}

.opc-prose ul {
  list-style: disc;
}

.opc-prose ol {
  list-style: decimal;
}

.opc-prose li {
  margin-block: 0.4em;
}

.opc-prose li::marker {
  color: var(--opc-muted-fg);
}

.opc-prose a {
  color: var(--opc-brand-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.opc-prose strong {
  font-weight: 600;
}

.opc-prose code {
  font-family: var(--opc-font-mono);
  font-size: 0.875em;
  background: var(--opc-secondary);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  word-break: break-word;
}

.opc-prose pre {
  background: var(--opc-secondary);
  border: 1px solid var(--opc-border);
  border-radius: var(--opc-r-lg);
  padding: 1rem 1.1rem;
  overflow-x: auto;
  margin-block: 1.3em;
  font-size: 0.875rem;
  line-height: 1.65;
}

.opc-prose pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

.opc-prose blockquote {
  border-left: 3px solid var(--opc-brand);
  padding-left: 1.1em;
  margin-block: 1.3em;
  color: var(--opc-muted-fg);
}

.opc-prose blockquote > *:first-child {
  margin-top: 0;
}

.opc-prose blockquote > *:last-child {
  margin-bottom: 0;
}

.opc-prose hr {
  border: 0;
  border-top: 1px solid var(--opc-hair);
  margin-block: 2.2em;
}

.opc-prose img {
  border-radius: var(--opc-r-lg);
  margin-block: 1.4em;
  max-width: 100%;
}

.opc-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1.3em;
  font-size: 0.875rem;
  display: block;
  overflow-x: auto;
}

.opc-prose th,
.opc-prose td {
  border: 1px solid var(--opc-border);
  padding: 0.55em 0.75em;
  text-align: left;
}

.opc-prose th {
  background: var(--opc-secondary);
  font-weight: 600;
}

.opc-prose input[type="checkbox"] {
  margin-right: 0.4em;
  accent-color: var(--opc-brand);
}

/* 代码块复制按钮（main.js 注入） */
.opc-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--opc-border);
  border-radius: var(--opc-r-sm);
  background: var(--opc-card);
  color: var(--opc-muted-fg);
  font-size: 0.6875rem;
  line-height: 1.7;
  opacity: 0;
  transition: opacity 0.16s var(--opc-ease), color 0.16s var(--opc-ease);
}

.opc-prose pre:hover .opc-copy-btn,
.opc-copy-btn:focus-visible {
  opacity: 1;
}

.opc-copy-btn:hover {
  color: var(--opc-brand-ink);
}

@media (hover: none) {
  .opc-copy-btn {
    opacity: 1;
  }
}

/* 标题锚点（main.js 注入） */
.opc-anchor {
  margin-left: 0.4em;
  color: var(--opc-muted-fg);
  opacity: 0;
  font-weight: 400;
  text-decoration: none;
  transition: opacity 0.16s var(--opc-ease), color 0.16s var(--opc-ease);
}

.opc-prose h2:hover .opc-anchor,
.opc-prose h3:hover .opc-anchor,
.opc-anchor:focus-visible {
  opacity: 1;
}

.opc-anchor:hover {
  color: var(--opc-brand-ink);
}

/* ---------- 17. 详情页头部 ---------- */
.opc-article-head {
  border-bottom: 1px solid var(--opc-border);
  padding-block: 3.5rem;
}

@media (min-width: 768px) {
  .opc-article-head {
    padding-block: 4.5rem;
  }
}

.opc-article-title {
  font-family: var(--opc-font-display);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .opc-article-title {
    font-size: 3rem;
  }
}

.opc-article-lead {
  margin-top: 1.25rem;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--opc-muted-fg);
}

@media (min-width: 768px) {
  .opc-article-lead {
    font-size: 1.125rem;
  }
}

.opc-metrics-row {
  display: grid;
  gap: 2rem 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .opc-metrics-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.opc-metric-block {
  padding-top: 1rem;
  border-top: 1px solid var(--opc-border);
}

.opc-metric-block .opc-metric-value {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.opc-metric-block .opc-metric-label {
  margin-top: 0.25rem;
}

.opc-article-body {
  padding-block: 3rem;
}

@media (min-width: 768px) {
  .opc-article-body {
    padding-block: 4rem;
  }
}

.opc-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}

/* 更多内容 */
.opc-more {
  border-top: 1px solid var(--opc-border);
  padding-block: 3.5rem;
}

.opc-more-title {
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--opc-muted-fg);
}

.opc-more-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .opc-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.opc-more-card {
  display: block;
  padding: 1.25rem;
  border: 1px solid var(--opc-border);
  border-radius: var(--opc-r-xl);
  background: var(--opc-card);
  transition: border-color 0.2s var(--opc-ease), box-shadow 0.2s var(--opc-ease);
}

.opc-more-card:hover {
  border-color: color-mix(in srgb, var(--opc-fg) 25%, transparent);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

.opc-more-card h3 {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.opc-more-card p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--opc-muted-fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 18. 关于页 ---------- */
.opc-about-head {
  display: grid;
  gap: 2.5rem;
  border-bottom: 1px solid var(--opc-border);
  padding-block: 4rem;
}

@media (min-width: 768px) {
  .opc-about-head {
    grid-template-columns: 1fr 1.4fr;
    gap: 4rem;
    padding-block: 5rem;
  }
}

.opc-avatar {
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--opc-border);
  border-radius: var(--opc-r-xl);
  background: var(--opc-secondary);
}

.opc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.opc-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--opc-fg) 20%, transparent);
}

.opc-owner {
  margin-top: 1.25rem;
}

.opc-owner-name {
  font-weight: 600;
}

.opc-owner-role {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--opc-muted-fg);
}

.opc-owner-bio {
  margin-top: 0.75rem;
  max-width: 260px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--opc-muted-fg);
}

.opc-stats-4 {
  display: grid;
  gap: 2rem 2rem;
}

@media (min-width: 640px) {
  .opc-stats-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .opc-stats-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.opc-stat-block {
  padding-top: 1.25rem;
  border-top: 1px solid var(--opc-border);
}

.opc-stat-block .opc-stat-value {
  font-size: 1.875rem;
  letter-spacing: -0.03em;
}

@media (min-width: 768px) {
  .opc-stat-block .opc-stat-value {
    font-size: 2.25rem;
  }
}

.opc-stat-block .opc-stat-label {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.opc-principles {
  display: grid;
  gap: 2rem 2.5rem;
}

@media (min-width: 768px) {
  .opc-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.opc-principle {
  display: flex;
  gap: 1rem;
}

.opc-principle-num {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--opc-brand-ink);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.opc-principle h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.opc-principle p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--opc-muted-fg);
}

.opc-service-mini-grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .opc-service-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .opc-service-mini-grid {
    /* 版心 1060px 下四栏每栏正文只剩 ~217px，会折成三行；保持两栏 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.opc-service-mini {
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--opc-border);
  border-radius: var(--opc-r-xl);
  background: var(--opc-card);
  transition: border-color 0.2s var(--opc-ease);
}

.opc-service-mini:hover {
  border-color: color-mix(in srgb, var(--opc-fg) 25%, transparent);
}

.opc-service-mini svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-bottom: 1rem;
  color: var(--opc-brand-ink);
}

.opc-service-mini h3 {
  font-size: 0.875rem;
  font-weight: 600;
}

.opc-service-mini p {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--opc-muted-fg);
}

.opc-section-label {
  margin-bottom: 2.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--opc-muted-fg);
}

/* ---------- 19. 联系页 ---------- */
.opc-channels {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .opc-channels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .opc-channels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.opc-channel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--opc-border);
  border-radius: var(--opc-r-xl);
  background: var(--opc-card);
  transition: border-color 0.2s var(--opc-ease);
}

.opc-channel:hover {
  border-color: color-mix(in srgb, var(--opc-fg) 25%, transparent);
}

.opc-channel-label {
  font-size: 0.75rem;
  color: var(--opc-muted-fg);
}

.opc-channel-value {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  word-break: break-all;
}

.opc-channel-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.opc-channel-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.75rem;
  color: var(--opc-muted-fg);
  transition: color 0.16s var(--opc-ease);
}

.opc-channel-btn:hover {
  color: var(--opc-fg);
}

.opc-channel-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

.opc-contact-note {
  margin-top: 2.5rem;
  max-width: 42rem;
  padding-left: 1.25rem;
  border-left: 2px solid color-mix(in srgb, var(--opc-brand) 40%, transparent);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--opc-muted-fg);
}

/* ---------- 20. 归档 ---------- */
.opc-archive {
  padding-block: 1rem 4rem;
}

.opc-archive-year {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.opc-archive-rule {
  flex: 1;
  height: 1px;
  background: var(--opc-border);
}

.opc-archive-month {
  margin-bottom: 1rem;
}

.opc-archive-month-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-family: var(--opc-font-mono);
  font-size: 0.75rem;
  color: var(--opc-muted-fg);
}

.opc-archive-list {
  list-style: none;
}

.opc-archive-item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--opc-border);
}

.opc-archive-item:last-child {
  border-bottom: 0;
}

.opc-archive-link {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--opc-muted-fg);
  transition: color 0.16s var(--opc-ease);
}

.opc-archive-link:hover {
  color: var(--opc-brand-ink);
}

.opc-archive-date {
  font-size: 0.75rem;
  color: var(--opc-muted-fg);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ---------- 21. 分页 ---------- */
.opc-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-block: 3rem;
}

.opc-pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--opc-border);
  border-radius: var(--opc-r-lg);
  background: var(--opc-card);
  font-size: 0.875rem;
  color: var(--opc-muted-fg);
  transition: border-color 0.16s var(--opc-ease), color 0.16s var(--opc-ease);
}

.opc-pager-btn:hover {
  border-color: var(--opc-brand);
  color: var(--opc-brand-ink);
}

.opc-pager-btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.opc-pager-btn svg {
  width: 1rem;
  height: 1rem;
}

.opc-pager-info {
  font-size: 0.8125rem;
  color: var(--opc-muted-fg);
  font-variant-numeric: tabular-nums;
}

.opc-pager-info b {
  color: var(--opc-fg);
  font-weight: 600;
}

/* ---------- 22. 空状态与错误页 ---------- */
.opc-empty {
  padding-block: 5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--opc-muted-fg);
}

.opc-error {
  max-width: 36rem;
  margin-inline: auto;
  padding: 6rem var(--opc-pad-x) 7rem;
  text-align: center;
}

.opc-error-code {
  font-family: var(--opc-font-mono);
  font-size: clamp(3.5rem, 12vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: color-mix(in srgb, var(--opc-brand) 35%, transparent);
}

.opc-error-title {
  margin-top: 1.25rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.opc-error-text {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--opc-muted-fg);
}

.opc-error-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.opc-error-detail {
  margin-top: 2rem;
  padding: 0.75rem 1rem;
  border-radius: var(--opc-r-lg);
  background: var(--opc-secondary);
  font-family: var(--opc-font-mono);
  font-size: 0.75rem;
  color: var(--opc-muted-fg);
  word-break: break-word;
}

/* ---------- 23. 页脚 ---------- */
.opc-footer {
  margin-top: auto;
  border-top: 1px solid var(--opc-border);
}

.opc-footer-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-block: 3rem;
}

@media (min-width: 768px) {
  .opc-footer-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.opc-footer-brand {
  max-width: 20rem;
}

.opc-footer-brand-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.opc-footer-brand-name {
  font-weight: 600;
}

.opc-footer-tagline {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--opc-muted-fg);
}

.opc-footer-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
}

.opc-footer-nav a {
  padding-block: 0.25rem;
  font-size: 0.875rem;
  color: var(--opc-muted-fg);
  transition: color 0.16s var(--opc-ease);
}

.opc-footer-nav a:hover {
  color: var(--opc-fg);
}

.opc-footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--opc-border);
  font-size: 0.75rem;
  color: var(--opc-muted-fg);
}

@media (min-width: 768px) {
  .opc-footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.opc-footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.25rem;
}

.opc-footer-meta a {
  transition: color 0.16s var(--opc-ease);
}

.opc-footer-meta a:hover {
  color: var(--opc-fg);
}

/* 备案号：公安备案用官方徽标图片 */
.opc-beian {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.opc-beian-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ---------- 24. 动效 ---------- */
@keyframes opc-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes opc-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.opc-rise {
  animation: opc-rise 0.7s var(--opc-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.opc-fade {
  animation: opc-fade-in 0.8s var(--opc-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

/* 高亮词：直接用品牌铜色标出，不画任何线条。
   汉字字身满格，贴着字底的线无论粗细都会显脏，改颜色最干净 */
.opc-hero-hl {
  color: var(--opc-brand);
  white-space: nowrap;
}

/* 逐行遮罩升起 */
.opc-line-mask {
  display: block;
  overflow: hidden;
  /* overflow 裁的是 padding box：给下划线留出裁剪空间，
     再用负 margin 把多出来的高度还回去，行距不变 */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.opc-line-mask > span {
  display: block;
  animation: opc-rise 0.85s var(--opc-ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* 滚动进入视图 */
.opc-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--opc-ease), transform 0.7s var(--opc-ease);
}

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

/* ---------- 进入页面：正文轻微右滑淡入 ---------- */
/* 不用跨文档 View Transitions：它要等新页整页就绪才开播，反而更慢；
   这里只用一条无延迟的纯 CSS 入场动画（所有浏览器一视同仁） */
@keyframes opc-page-in {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.opc-main {
  animation: opc-page-in 0.26s var(--opc-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .opc-main {
    animation: none;
  }
}

/* 关闭动效（主题设置） */
html[data-opc-reveal="off"] .opc-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .opc-reveal {
    opacity: 1;
    transform: none;
  }
  .opc-line-mask > span,
  .opc-rise,
  .opc-fade {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- 25. 打印 ---------- */
@media print {
  .opc-header,
  .opc-footer,
  .opc-cta,
  .opc-tag-filter,
  .opc-copy-btn,
  .opc-anchor {
    display: none !important;
  }
  .opc-reveal {
    opacity: 1;
    transform: none;
  }
  body {
    background: #fff;
    color: #000;
  }
}
/* ---------- 26. 内联元素补齐（模板中为语义使用了 span） ---------- */
.opc-post-body,
.opc-post-excerpt {
  display: block;
}

/* ---------- 27. 分类树 ---------- */
.opc-cat-tree {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
  align-items: start;
}

.opc-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--opc-border);
  border-radius: var(--opc-r-lg);
  background: var(--opc-card);
  font-size: 0.9375rem;
  transition: border-color 0.16s var(--opc-ease), color 0.16s var(--opc-ease);
}

.opc-cat-link:hover {
  border-color: var(--opc-brand);
  color: var(--opc-brand-ink);
}

.opc-cat-link b {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--opc-muted-fg);
  font-variant-numeric: tabular-nums;
}

.opc-cat-tree--sub {
  margin-top: 0.5rem;
  margin-left: 1rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--opc-border);
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.opc-cat-tree--sub .opc-cat-link {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: var(--opc-bg);
}

/* ---------- 28. 标签云 ---------- */
.opc-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.opc-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--opc-border);
  border-radius: 999px;
  background: var(--opc-card);
  color: var(--opc-muted-fg);
  transition: border-color 0.16s var(--opc-ease), color 0.16s var(--opc-ease),
    transform 0.16s var(--opc-ease);
}

.opc-tag:hover {
  border-color: var(--opc-brand);
  color: var(--opc-brand-ink);
  transform: translateY(-1px);
}

.opc-tag sup {
  font-size: 0.6875rem;
  color: var(--opc-muted-fg);
  font-variant-numeric: tabular-nums;
}

.opc-tag-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  flex-shrink: 0;
}