/* ============================================================================
   ovation-cn.css — 中文版覆盖样式 / Chinese-edition overrides.

   Loaded AFTER ovation.css, only by the pages under /cn/. The brief was that
   the English edition follows the NexiUni US template while the Chinese edition
   reads like a normal Chinese corporate site — so this file is where the two
   deliberately part company. Everything structural stays in ovation.css; only
   the conventions change here.

   What a Chinese corporate site does differently, and what each rule below is for:

     · 顶部信息条 — a thin utility bar above the nav carrying the phone number,
       the email and the 中文/English switch. Chinese business sites put contact
       details at the very top, not buried in the footer.
     · 栏目标题 — section headings are the Chinese title with a small English
       word underneath, centred. This is close to universal, and the current
       ovbox.cn site already does it.
     · 更多 >> — an explicit "more" link at the right of a section heading,
       rather than the English site's inline text link.
     · Denser type — Chinese text carries more meaning per character, so the
       same paragraph wants a slightly smaller size and tighter measure than the
       English one, or it reads as shouting.
     · 备案号 — the ICP and 公安备案 filings belong in the footer, centred, and
       are a legal requirement for a site served in mainland China.
   ============================================================================ */

body{font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Segoe UI",system-ui,sans-serif;
  font-size:15px;line-height:1.85;}
p{margin:0 0 14px;}

/* ── 顶部信息条 ──────────────────────────────────────────────────────────── */
.topbar{background:var(--mark-deep);color:#d2d2d0;font-size:13px;}
.topbar .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  justify-content:space-between;padding-top:7px;padding-bottom:7px;max-width:none;}
.topbar a{color:#e8e8e6;}
.topbar a:hover{color:#fff;}
.topbar .tel{font-weight:600;color:#fff;letter-spacing:.02em;}

/* 中文导航：字距略紧，选中项用蓝色下划线而不是背景色。 */
.nav .wrap{height:64px;}
.brand .name{letter-spacing:.06em;font-size:19px;}
.brand .sub{letter-spacing:.24em;}
.navmenu a.navlink{font-size:15px;padding:8px 12px;border-radius:0;}
.navmenu a.navlink:hover{background:transparent;color:var(--mark);}
.navmenu a.navlink.active{color:var(--mark);box-shadow:inset 0 -2px 0 var(--mark);}
.crumbs{font-size:13px;letter-spacing:.02em;}

/* ── 栏目标题 ────────────────────────────────────────────────────────────── */
.cn-head{text-align:center;margin-bottom:34px;}
.cn-head h2{font-size:27px;letter-spacing:.06em;margin-bottom:6px;}
.cn-head .en{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#9a9a9e;}
.cn-head .rule{width:46px;height:3px;background:var(--red);margin:14px auto 0;border-radius:2px;}
.cn-head.v .rule{background:var(--mark);}
/* 左对齐的栏目标题（带“更多”） */
.cn-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:26px;}
.cn-bar h2{font-size:22px;letter-spacing:.04em;}
.cn-bar .en{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#9a9a9e;margin-left:10px;}
.cn-bar .more{font-size:14px;color:var(--muted);white-space:nowrap;}
.cn-bar .more:hover{color:var(--red);}

.hero h1{font-size:38px;letter-spacing:.04em;}
.hero .subtitle{font-size:20px;letter-spacing:.2em;}
.hero p{font-size:16px;}
.section h2{letter-spacing:.04em;}
.lead{font-size:15.5px;}
.card p,.segment p{font-size:14.5px;}

/* 中文版页脚：栏目居中，备案号单独一行。 */
.footer{font-size:14px;}
.footer .legal{justify-content:center;text-align:center;line-height:2;}
.footer .beian{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

@media (max-width:860px){
  .topbar .wrap{gap:10px;font-size:12px;}
  .hero h1{font-size:27px;}
  .cn-head h2{font-size:22px;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Chinese-site conventions
   ───────────────────────────────────────────────────────────────────────────
   The Chinese edition had the English site's shape with Chinese words in it.
   These are the things a Chinese corporate site of this kind actually does,
   taken from the genre — the company's own ovbox.cn and its peers (sdmctech,
   the listed one, is the same grammar at a larger scale):

     · the page opens on a full-width photographic banner with a slogan over
       it, not on a flat coloured band of prose;
     · every section heading carries a one-line Chinese slogan under it — this
       is near-universal and its absence is most of why the page read as a
       translation;
     · the company's numbers get a dark full-width band of their own;
     · products lead with the photograph, not the paragraph;
     · a floating contact rail sits at the right edge of every page.

   None of it needs JavaScript. The back-to-top link is an anchor, which the
   stylesheet's own scroll-behavior:smooth already animates.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 首页banner ──────────────────────────────────────────────────────────── */
.cn-banner{position:relative;padding:0;background:var(--mark-deep);}
/* 底图是画出来的，不是照片：暗底、渐变、中间压暗都已经画进图里了，
   所以这里不再叠半透明——叠了只会把它糊掉。见 _build/source/artwork.py。 */
.cn-banner .bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.cn-banner .wrap{position:relative;padding-top:96px;padding-bottom:96px;text-align:center;}
.cn-banner h1{font-size:42px;letter-spacing:.08em;margin-bottom:14px;color:#fff;}
.cn-banner .slogan{font-size:19px;color:#e6e6e4;letter-spacing:.22em;margin-bottom:26px;}
.cn-banner .en{font-size:12.5px;letter-spacing:.34em;text-transform:uppercase;color:#b8b8bd;}
.cn-banner p{color:#d6d6d3;max-width:60ch;margin:0 auto 24px;}
.cn-banner .cta{justify-content:center;}

/* ── 栏目标题：中文标题 + 中文副标 + 英文 ──────────────────────────────── */
.cn-head .tag{font-size:15px;color:var(--muted);margin-top:8px;letter-spacing:.02em;}
.cn-bar .tag{font-size:13.5px;color:var(--muted);margin-left:12px;letter-spacing:.02em;}

/* ── 企业实力：深色数字带 ────────────────────────────────────────────────── */
.cn-stats{background:var(--grad-mark);color:#fff;padding:54px 0;}
.cn-stats .grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  text-align:center;}
.cn-stats .n{font-size:38px;font-weight:700;line-height:1.1;letter-spacing:.02em;}
.cn-stats .l{font-size:14px;color:rgba(255,255,255,.82);margin-top:8px;}

/* ── 产品中心：图片优先 ──────────────────────────────────────────────────── */
.cn-products{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}
.cn-products a{display:block;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:box-shadow .15s,transform .15s;color:inherit;}
.cn-products a:hover{box-shadow:var(--shadow-l);transform:translateY(-2px);color:inherit;}
.cn-products img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--soft);}
.cn-products .cap{padding:14px 16px;border-top:1px solid var(--line);}
.cn-products h3{font-size:16px;margin-bottom:4px;}
.cn-products p{font-size:13.5px;color:var(--muted);margin:0;}

/* ── 侧边悬浮客服栏 ──────────────────────────────────────────────────────── */
.cn-side{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:6px;}
.cn-side a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;width:62px;height:62px;background:var(--mark);color:#fff;border-radius:10px;
  font-size:11.5px;line-height:1.2;text-align:center;box-shadow:var(--shadow-l);
  transition:background .12s;}
.cn-side a:hover{background:var(--red);color:#fff;}
.cn-side svg{display:block;opacity:.95;}
.cn-side .label{letter-spacing:.04em;}
@media (max-width:980px){ .cn-side{display:none;} }

/* ── 页脚二维码 ──────────────────────────────────────────────────────────── */
.footer .qr{text-align:center;}
.footer .qr .ph-img{width:104px;margin:0 auto;border-radius:8px;}
.footer .qr .cap{font-size:12.5px;color:#9a9a9e;margin-top:8px;}

@media (max-width:860px){
  .cn-banner .wrap{padding-top:58px;padding-bottom:58px;}
  .cn-banner h1{font-size:27px;}
  .cn-banner .slogan{font-size:15px;letter-spacing:.14em;}
  .cn-stats{padding:38px 0;}
  .cn-stats .n{font-size:30px;}
}