/* NOBLESONIC 名门之声 — turntable OEM / ODM
   方向：暗场画廊。产品图自带白底棚拍背景，所以产品一律放进白色卡片里，
   深色只做「墙」。品牌色取自 logo：深红 #8F1C21 / 金 #F3B514。
   双语机制：html[data-lang] 控制 .en / .zh 两组内联双写内容的显隐。 */

:root{
  /* 暗场 */
  --canvas:#0e0d0d;
  --surface-1:#171515;
  --surface-2:#1f1c1c;
  --line:#302b2b;
  --line-soft:#241f1f;

  --ink:#f2eeea;
  --ink-2:#b0a8a4;
  --ink-3:#7c7370;

  /* 品牌色（取自 logo） */
  --brand:#8f1c21;
  --brand-lt:#b52936;
  --gold:#f3b514;
  --gold-dk:#c8901a;
  --gold-soft:rgba(243,181,20,.14);

  /* 产品卡片 */
  --tile:#f7f5f2;      /* 展签米白，非纯白：纯白在深色画布上发蓝发冷、像截图 */
  --tile-2:#f1ece7;
  --tile-line:#ded6cd;
  --tile-ink:#161514;
  --tile-ink-2:#5c5651;
  --tile-ink-3:#8b847d;

  --font-sans:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,"Courier New",monospace;
  --font-zh:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC",sans-serif;

  --u:4px;
  --r-sm:2px;
  --r-md:5px;

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:128px;
  --maxw:1260px;
  --hdr:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* height:auto 很关键：img 的 height 属性会成为 CSS 提示值，压过 aspect-ratio */
img{max-width:100%; height:auto; display:block; border:0}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-weight:500; letter-spacing:-0.02em; line-height:1.16}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
table{border-collapse:collapse}
button{font:inherit}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s3)}
.mono{font-family:var(--font-mono); font-size:13px}

/* ============ 双语切换 ============
   .en / .zh 成对书写，靠 html[data-lang] 决定谁显示。
   两个选择器的特异度都高于组件类，组件里的 display 不会被覆盖。 */
html[data-lang="zh"] .en{display:none !important}
html[data-lang="en"] .zh{display:none !important}

/* 中文排版：不缩字距、放宽行高 */
html[data-lang="zh"] body{font-family:var(--font-zh); letter-spacing:0}
html[data-lang="zh"] h1,html[data-lang="zh"] h2,html[data-lang="zh"] h3,html[data-lang="zh"] h4{letter-spacing:0; line-height:1.35}
html[data-lang="zh"] .d1{line-height:1.2}
html[data-lang="zh"] .eyebrow,html[data-lang="zh"] .mono{letter-spacing:.02em}
html[data-lang="zh"] .spec{font-size:13.5px}

/* ---------- 字号阶梯 ---------- */
.d1{font-size:clamp(34px,4.6vw,58px); letter-spacing:-0.028em; line-height:1.08}
.d2{font-size:clamp(26px,3.1vw,38px); letter-spacing:-0.022em}
.d3{font-size:clamp(19px,1.6vw,23px); letter-spacing:-0.014em}
.eyebrow{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase}
.eyebrow--red{color:var(--brand-lt)}
html[data-lang="zh"] .eyebrow{text-transform:none}
.lead{font-size:17px; color:var(--ink-2); max-width:64ch}
.muted{color:var(--ink-2)}
/* .nl = 保留文案里的换行（表格里按行写、页面上按行显示）；空格仍照常折叠 */
.nl{white-space:pre-line}
.dim{color:var(--ink-3)}

/* ---------- 页头 ---------- */
.hdr{position:sticky; top:0; z-index:60; background:rgba(14,13,13,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.hdr__in{display:flex; align-items:center; gap:var(--s3); height:var(--hdr)}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0}
.brand__mark{width:38px; height:38px; flex-shrink:0}
.brand__txt{display:flex; flex-direction:column; line-height:1.05}
.brand__en{font-size:15px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink)}
.brand__zh{font-size:11px; letter-spacing:.32em; color:var(--ink-3); font-family:var(--font-zh); margin-top:2px}
html[data-lang="zh"] .brand__txt{flex-direction:column-reverse}
html[data-lang="zh"] .brand__en{font-size:10.5px; letter-spacing:.26em; font-weight:500; color:var(--ink-3); margin-top:3px}
html[data-lang="zh"] .brand__zh{font-size:15px; font-weight:600; letter-spacing:.2em; color:var(--ink); margin-top:0}

.nav{display:flex; gap:var(--s3); margin-left:auto; align-items:center}
/* 一级导航项用独立类名，不用 .nav a —— 后代选择器会连带命中下拉里的 .dd a，
   且 .nav a:not(.btn) 特异性(0,2,1)高于 .dd a(0,1,1)，会把菜单的内边距压掉。 */
.nav__a{position:relative; font-size:14px; color:var(--ink-2); padding:6px 0; white-space:nowrap; transition:color .15s}
.nav__a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--brand-lt); transform:scaleX(0); transform-origin:left center; transition:transform .2s cubic-bezier(.4,0,.2,1)}
.nav__a:hover,.nav__a[aria-current]{color:var(--ink)}
.nav__a:hover::after,.nav__a[aria-current]::after{transform:scaleX(1)}
.nav .btn{margin-left:var(--s1)}

/* ---------- 下拉菜单 ---------- */
.hasdd{position:relative}
.nav__a--dd{display:inline-flex; align-items:center; gap:7px}
/* caret 已由 CSS 拼的三角换成 tt-ui-caret 图标（sprite 内联），悬停旋转 180° 指向上 */
.caret{width:12px; height:12px; flex:none; opacity:.75; transition:transform .2s cubic-bezier(.4,0,.2,1), opacity .15s}
.caret .ico{width:12px; height:12px; display:block; vertical-align:0}
.hasdd:hover .caret,.hasdd.open .caret{transform:rotate(180deg); opacity:1}
.hasdd:hover .nav__a--dd,.hasdd.open .nav__a--dd{color:var(--ink)}

.dd{position:absolute; top:calc(100% + 11px); left:-18px; width:294px; z-index:70;
  background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:6px;
  box-shadow:0 26px 60px rgba(0,0,0,.62), 0 2px 10px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(-7px); pointer-events:none;
  transition:opacity .17s ease, transform .17s cubic-bezier(.4,0,.2,1), visibility .17s}
/* 透明桥：补上触发器底边到菜单顶边那 11px 空隙，否则鼠标移过去途中菜单就消失 */
.dd::before{content:""; position:absolute; top:-11px; left:0; right:0; height:11px}
.hasdd:hover .dd,.hasdd:focus-within .dd,.hasdd.open .dd{
  opacity:1; visibility:visible; transform:none; pointer-events:auto}

.dd a{display:block; position:relative; padding:10px 14px; border-radius:4px; font-size:14px;
  color:var(--ink-2); transition:background .14s, color .14s}
.dd a::before{content:""; position:absolute; left:0; top:7px; bottom:7px; width:2px; border-radius:0 2px 2px 0;
  background:var(--brand-lt); transform:scaleY(0); transform-origin:center; transition:transform .16s ease}
.dd a:hover,.dd a:focus-visible{background:var(--surface-1); color:var(--ink)}
.dd a:hover::before,.dd a:focus-visible::before{transform:scaleY(1)}
.dd__t{display:block; font-size:14px; line-height:1.45; color:var(--ink)}
.dd__s{display:block; font-size:12px; line-height:1.5; color:var(--ink-3); margin-top:2px}
html[data-lang="zh"] .dd__t{font-family:var(--font-zh)}
html[data-lang="zh"] .dd__s{font-family:var(--font-zh)}

.dd__sep{height:1px; background:var(--line); margin:6px 8px}
.dd__cta{display:flex !important; align-items:center; justify-content:space-between; gap:var(--s2)}
.dd__cta,.dd__cta:hover .dd__cta-t{color:var(--gold)}
.dd__cta:hover{background:var(--gold-soft)}
.dd__cta-t{font-size:13px; font-weight:500}
.dd__cta .btn__arw{transition:transform .18s ease}
.dd__cta:hover .btn__arw{transform:translateX(3px)}
html[data-lang="zh"] .dd__cta-t{font-family:var(--font-zh)}

/* 语言开关 */
.lang{display:flex; border:1px solid var(--line); border-radius:100px; overflow:hidden; flex-shrink:0}
.lang button{background:none; border:0; color:var(--ink-3); font-size:12.5px; padding:5px 13px; cursor:pointer; letter-spacing:.04em}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--ink); color:#14100e; font-weight:600}
html[data-lang="zh"] .lang button[aria-pressed="true"]{font-family:var(--font-zh)}
/* 移动端克隆版语言开关：默认隐藏，720px 断点内显示（见响应式） */
.lang--m{display:none}

/* burger 已由文字 Menu/菜单 换成 tt-ui-menu 图标（aria-label 保留在按钮上） */
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--line); color:var(--ink); border-radius:var(--r-sm); padding:8px 10px; cursor:pointer; line-height:0}
.burger .ico{width:17px; height:17px}

/* ---------- 图标系统（tt-* line · 主色 currentColor · sprite 内联于页首） ---------- */
/* 深色画布上主色跟随文字（--ink / --ink-2）；品牌深红 #8f1c21 在暗场对比度仅 2.2:1，禁作图标色，
   需要品牌强调时用 .hico（金 --gold，10.7:1）或 --brand-lt。图标一律 aria-hidden 装饰，绝不替代文字。 */
.ico{display:inline-block; width:1em; height:1em; flex:none; vertical-align:-.125em}
.btn__arw .ico{width:15px; height:15px; vertical-align:-2px}
.chip .ico{width:15px; height:15px; margin-right:4px; vertical-align:-3px}
.chip.on .ico{opacity:.9}
.vtoggle .ico{width:14px; height:14px; margin-right:5px; vertical-align:-2px}
.spec th .ico{width:15px; height:15px; margin-right:7px; vertical-align:-2px}
.hico{width:20px; height:20px; color:var(--gold); vertical-align:-3px}
h3 .hico{margin-right:8px}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; font-size:14px; padding:11px 20px; border-radius:var(--r-sm); border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; font-family:inherit; transition:background .16s,border-color .16s,color .16s,transform .16s,box-shadow .16s}
.btn:hover{border-color:var(--ink-3); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn__arw{opacity:.6; transition:transform .18s ease}
.btn:hover .btn__arw{transform:translateX(3px)}
.btn.btn--gold{background:var(--gold); border-color:var(--gold); color:#1a1206; font-weight:600}
.btn.btn--gold:hover{background:#ffc933; border-color:#ffc933; color:#1a1206; transform:translateY(-1px); box-shadow:0 10px 26px rgba(243,181,20,.24)}
.nav .btn--gold{font-weight:600}
.nav .btn:hover{transform:none}   /* 页头里的按钮不跟着浮动，避免导航条看着在抖 */
.nav .btn.btn--gold:hover{box-shadow:none}
.btn--sm{font-size:13px; padding:8px 15px}
.btn--wide{width:100%; justify-content:center}

/* ---------- 首屏 ---------- */
.hero{padding:var(--s7) 0 var(--s6); border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; right:-14%; top:-24%; width:52vw; height:52vw; background:radial-gradient(circle,rgba(143,28,33,.24),transparent 62%); pointer-events:none}
.hero__grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center; position:relative; z-index:1}
.hero h1{margin:var(--s3) 0 var(--s2)}
.hero__cta{display:flex; gap:var(--s2); margin-top:var(--s4); flex-wrap:wrap}
.hero__fig{margin:0; background:var(--tile-2); border-radius:var(--r-md); padding:var(--s3); box-shadow:0 32px 70px rgba(0,0,0,.55)}
.hero__fig img{width:100%; aspect-ratio:4/3; height:auto; object-fit:contain}
.hero__cap{display:flex; justify-content:space-between; gap:var(--s2); margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid var(--tile-line); font-family:var(--font-mono); font-size:11.5px; color:var(--tile-ink-3); letter-spacing:.04em}

/* 主图可点：整张图是链接，右下角一枚「查看详情」胶囊（浅底深字，压在米白展签上）
   overflow:hidden 配合 img 的轻微放大，做成「能点」的视觉反馈 */
.hero__link{display:block; position:relative; border-radius:var(--r-md); overflow:hidden}
.hero__link img{transition:transform .4s ease}
.hero__link:hover img{transform:scale(1.02)}
.hero__link:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.hero__go{position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; background:rgba(255,255,255,.94); border:1px solid var(--tile-line); color:var(--tile-ink); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.05em; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.18); transition:transform .25s ease, background .25s ease}
.hero__link:hover .hero__go{transform:translateY(-2px); background:#fff}
@media (prefers-reduced-motion:reduce){.hero__link img,.hero__go{transition:none}.hero__link:hover img{transform:none}}

/* 事实条 */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.fact{background:var(--canvas); padding:var(--s3) var(--s2); text-align:center}
.fact b{display:block; font-size:clamp(22px,2.4vw,30px); font-weight:500; letter-spacing:-.02em}
.fact span{display:block; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; margin-top:4px}
html[data-lang="zh"] .fact span{text-transform:none; letter-spacing:.04em}
.fact b em{color:var(--gold); font-style:normal}

/* ---------- 区块 ---------- */
.sec{padding:var(--s6) 0; border-bottom:1px solid var(--line)}
.sec--tight{padding:var(--s5) 0}
.sec--alt{background:var(--surface-1)}
.sec__head{margin-bottom:var(--s5); max-width:70ch}
.sec__head h2{margin:var(--s2) 0 var(--s2)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2)}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2)}

/* ---------- 产品线分叉 ---------- */
.split2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
.ln{background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); transition:border-color .16s, background .16s}
.ln:hover{border-color:#544a4a; background:var(--surface-2)}
.ln h3{margin-bottom:4px}
.ln ul{margin-top:var(--s1); display:grid; gap:7px}
.ln li{font-size:14px; color:var(--ink-2); padding-left:16px; position:relative}
.ln li::before{content:""; position:absolute; left:0; top:11px; width:6px; height:1px; background:var(--line); transition:background .16s, width .16s}
.ln:hover li::before{background:var(--brand-lt); width:10px}
.ln__go{margin-top:auto; padding-top:var(--s2); font-size:14px; color:var(--brand-lt); transition:color .15s}
.ln__go .btn__arw{display:inline-block; transition:transform .18s ease}
.ln:hover .ln__go{color:#ffc933}
.ln:hover .ln__go .btn__arw{transform:translateX(4px)}
/* 卡片内的二级入口（整机类 → 一体式 / 分体式） */
.ln__sub{margin-top:auto; padding-top:var(--s2); display:grid}
.ln__sub a{display:flex; justify-content:space-between; align-items:center; gap:var(--s1); font-size:14px; color:var(--brand-lt); padding:7px 0; transition:color .15s}
.ln__sub a + a{border-top:1px solid var(--line-soft)}
.ln__sub a .btn__arw{display:inline-block; transition:transform .18s ease}
.ln__sub a:hover{color:#ffc933}
.ln__sub a:hover .btn__arw{transform:translateX(4px)}

/* ---------- 价值观 ---------- */
.vgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3)}
.vitem{border-top:2px solid var(--brand); padding-top:var(--s2)}
.vitem h4{font-size:15px; margin-bottom:6px}
.vitem p{color:var(--ink-3); font-size:13.5px}

/* ---------- 组件图卡（组件页「组件产品」区，数据来自 data/components.json） ---------- */
.cgal{margin-top:var(--s5)}
.cgal + .cgal{margin-top:var(--s6)}
.cgal__head{display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s3)}
.cgal__head h3{font-size:20px; margin:0}
.cgal__head p{margin:0; font-size:13.5px; color:var(--ink-2)}
/* 列数由生成器按该类件数给（--cn），保证每类放满一行；移动端在媒体查询里覆盖 */
.ccards{display:grid; grid-template-columns:repeat(var(--cn,4),minmax(0,1fr)); gap:var(--s3)}
.ccard{background:var(--tile); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column}
/* 图区固定像素高（不是 aspect-ratio）：一排里只要有一张卡的图区高一点点，
   整行的文字基线就会各走各的。固定高度 + contain，各行严格对齐。 */
.ccard__shot{position:relative; background:#fff; height:150px; display:flex; align-items:center; justify-content:center; padding:10px}
.ccard__shot img{max-width:100%; max-height:100%; width:auto; height:auto; display:block}
.ccard__body{padding:var(--s3); display:flex; flex-direction:column}
.ccard__id{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; color:var(--brand); font-weight:600}
.ccard h3{font-size:15px; margin:6px 0 0; color:var(--tile-ink); line-height:1.4; min-height:2.8em}
.ccard__specs{margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid var(--tile-line); display:grid; gap:4px}
.ccard__specs div{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s2); align-items:baseline; font-family:var(--font-mono); font-size:11.5px; color:var(--tile-ink-2)}
.ccard__specs div span{white-space:nowrap}
.ccard__specs div b{font-weight:500; color:var(--tile-ink); text-align:right}

/* ---------- 产品卡（白底橱窗） ---------- */
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
.pcard{background:var(--tile); border-radius:var(--r-md); overflow:hidden; display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s; box-shadow:0 2px 0 rgba(0,0,0,.35)}
.pcard:hover{transform:translateY(-3px); box-shadow:0 22px 44px rgba(0,0,0,.5)}
.pcard__shot{position:relative; background:var(--tile-2); aspect-ratio:16/10; overflow:hidden}
.pcard__shot img{width:100%; height:100%; object-fit:contain; aspect-ratio:auto; transition:transform .38s cubic-bezier(.4,0,.2,1)}
.pcard:hover .pcard__shot img{transform:scale(1.05)}
.pcard__form{position:absolute; top:12px; left:12px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; background:rgba(22,21,20,.86); color:#f2eeea; padding:3px 9px; border-radius:100px}
html[data-lang="zh"] .pcard__form{font-family:var(--font-zh); text-transform:none; letter-spacing:.04em}
.pcard__noimg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--tile-ink-3); font-family:var(--font-mono); font-size:12px; letter-spacing:.06em}
.pcard__body{padding:var(--s3); display:flex; flex-direction:column; flex:1; color:var(--tile-ink)}
.pcard__id{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; color:var(--brand); font-weight:600; transition:color .15s}
.pcard:hover .pcard__id{color:var(--brand-lt)}
.pcard h3{font-size:17px; margin:6px 0 8px; color:var(--tile-ink); line-height:1.35}
.pcard__sum{font-size:13.5px; color:var(--tile-ink-2); flex:1}
.pcard__specs{margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid var(--tile-line); display:grid; gap:4px}
.pcard__specs div{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s2); align-items:baseline; font-family:var(--font-mono); font-size:11.5px; color:var(--tile-ink-2)}
.pcard__specs div span{white-space:nowrap}
.pcard__specs div b{font-weight:500; color:var(--tile-ink); text-align:right}
.pcard__foot{margin-top:var(--s2); display:flex; gap:var(--s1); flex-wrap:wrap}
.tagi{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; border:1px solid var(--tile-line); border-radius:100px; padding:2px 8px; color:var(--tile-ink-3)}
html[data-lang="zh"] .tagi{font-family:var(--font-zh)}

/* ---------- 筛选 ---------- */
.filters{display:flex; flex-wrap:wrap; gap:var(--s1); row-gap:10px; margin-bottom:var(--s2); align-items:center}
.filters__lb{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; margin-right:6px}
html[data-lang="zh"] .filters__lb{font-family:var(--font-zh); text-transform:none}
.chip{font-size:13px; padding:6px 15px; border:1px solid var(--line); border-radius:100px; background:transparent; color:var(--ink-2); cursor:pointer; font-family:inherit; transition:.15s}
.chip:hover{border-color:var(--ink-3); color:var(--ink)}
.chip.on{background:var(--ink); color:#14100e; border-color:var(--ink); font-weight:600}
.chip i{font-style:normal; opacity:.55; margin-left:5px; font-family:var(--font-mono); font-size:11px}
.nores{padding:var(--s5) 0; text-align:center; color:var(--ink-3); font-size:14px; display:none}

/* ---------- 规格表（等宽） ---------- */
.specwrap{border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--surface-1)}
.spec{width:100%; font-family:var(--font-mono); font-size:13px}
.spec th,.spec td{text-align:left; padding:11px 16px; border-bottom:1px solid var(--line-soft); vertical-align:top}
.spec th{color:var(--ink-3); font-weight:400; width:38%; letter-spacing:.02em}
.spec td{color:var(--ink)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:none}
.spec ul{display:grid; gap:3px}
.spec li{position:relative; padding-left:12px}
.spec li::before{content:""; position:absolute; left:0; top:9px; width:4px; height:1px; background:var(--line)}
.spec--light{background:var(--tile)}
.spec--light th{color:var(--tile-ink-3)}
.spec--light td{color:var(--tile-ink)}
.spec--light th,.spec--light td{border-bottom-color:var(--tile-line)}
.spec--3 th{width:auto; white-space:nowrap}
.spec--3 td,.spec--3 th{color:var(--ink-2)}

/* ---------- 详情页 ---------- */
.pdp{padding:var(--s5) 0 var(--s6)}
.crumb{font-family:var(--font-mono); font-size:12px; color:var(--ink-3); margin-bottom:var(--s3); display:flex; gap:8px; flex-wrap:wrap}
.crumb a:hover{color:var(--ink)}
.crumb span{color:var(--ink-3); opacity:.5}

.pdp__grid{display:grid; grid-template-columns:1.15fr 1fr; gap:var(--s5); align-items:start}
.gal{margin:0}
.gal__stage{background:var(--tile-2); border-radius:var(--r-md); aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:var(--s3)}
.gal__stage img{width:100%; height:100%; object-fit:contain; aspect-ratio:auto}
.gal__stage .noimg{font-family:var(--font-mono); font-size:13px; color:var(--tile-ink-3); text-align:center; line-height:1.8; letter-spacing:.04em}
.gal__thumbs{display:grid; grid-template-columns:repeat(var(--n,6),minmax(0,1fr)); gap:var(--s1); margin-top:var(--s1)}
.gal__thumbs button{background:var(--tile-2); border:1px solid transparent; border-radius:var(--r-sm); padding:4px; cursor:pointer; aspect-ratio:16/10; overflow:hidden; transition:border-color .15s}
.gal__thumbs button img{width:100%; height:100%; object-fit:contain; aspect-ratio:auto}
.gal__thumbs button:hover{border-color:var(--ink-3)}
.gal__thumbs button img{transition:transform .3s ease}
.gal__thumbs button:hover img{transform:scale(1.06)}
.gal__thumbs button[aria-current="true"]{border-color:var(--brand-lt)}
.gal__note{font-family:var(--font-mono); font-size:11px; color:var(--ink-3); margin-top:var(--s2); letter-spacing:.03em}
html[data-lang="zh"] .gal__note{font-family:var(--font-zh)}

.pdp__id{font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; color:var(--ink-2); font-weight:600}
.pdp h1{margin:var(--s1) 0 var(--s2)}
.pdp__tl{font-size:18px; color:var(--ink-2); margin-bottom:var(--s3)}
.pdp__badges{display:flex; gap:var(--s1); flex-wrap:wrap; margin:var(--s3) 0}
.hl{margin:var(--s4) 0 0; display:grid; gap:10px}
.hl li{font-size:15px; color:var(--ink-2); padding-left:22px; position:relative}
.hl li::before{content:""; position:absolute; left:0; top:9px; width:10px; height:1px; background:var(--brand-lt)}
.pdp__cta{display:flex; gap:var(--s1); margin-top:var(--s4); flex-wrap:wrap}

/* ---------- 流程条 ---------- */
.proc{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.proc__s{background:var(--canvas); padding:var(--s3); display:flex; flex-direction:column; gap:6px}
.proc__n{font-family:var(--font-mono); font-size:12px; color:var(--brand-lt)}
.proc__t{font-size:15px; font-weight:500}
.proc__d{font-size:13px; color:var(--ink-2); flex:1}
.proc__w{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); padding-top:6px; border-top:1px solid var(--line-soft)}

/* ---------- 提示块 ---------- */
.callout{background:var(--surface-1); border:1px solid var(--line); border-left:2px solid var(--brand); border-radius:var(--r-md); padding:var(--s4)}
.callout--red{border-left-color:var(--brand-lt)}
.callout h3{margin-bottom:var(--s1)}
.callout p{color:var(--ink-2); font-size:15px}
.callout p+p{margin-top:var(--s2)}

/* ---------- KV ---------- */
.kv{display:grid; grid-template-columns:230px 1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-md); overflow:hidden}
.kv dt{background:var(--surface-1); padding:13px 18px; font-size:14px; color:var(--ink-2)}
.kv dd{background:var(--surface-1); padding:13px 18px; margin:0; font-size:14px}

/* ---------- 表单 ---------- */
.form{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
.field{display:flex; flex-direction:column; gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:13px; color:var(--ink-2)}
.field input,.field select,.field textarea{background:var(--surface-2); border:1px solid var(--line); color:var(--ink); border-radius:var(--r-sm); padding:11px 13px; font-size:14px; font-family:inherit; width:100%}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{outline:1px solid var(--ink-2); border-color:var(--ink-2)}
.field textarea{min-height:112px; resize:vertical}
.req::after{content:" *"; color:var(--brand-lt)}
.formnote{font-size:13px; color:var(--ink-3); margin-top:var(--s2)}
.formok{border:1px solid var(--brand); background:var(--surface-1); border-radius:var(--r-md); padding:var(--s3); font-size:14px; display:none; margin-top:var(--s3)}
.formerr{border:1px solid #7a5c1e; background:rgba(243,181,20,.08); border-radius:var(--r-md); padding:var(--s3); font-size:14px; color:var(--ink); margin-top:var(--s3); grid-column:1/-1}
.formerr a{color:var(--gold); text-decoration:underline; word-break:break-all}
/* 蜜罐：真人不可见，对屏幕阅读器也隐藏，但机器人会填 */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none}
.btn.is-busy{opacity:.6; cursor:progress}
/* Cloudflare Turnstile：占满一行，预留高度避免加载时表单跳动 */
.cf-turnstile{grid-column:1/-1; margin-top:var(--s1); min-height:65px}

/* ---------- 页脚 ---------- */
.ftr{padding:var(--s5) 0 var(--s4); font-size:13px; color:var(--ink-3)}
.ftr__in{display:flex; gap:var(--s4); justify-content:space-between; flex-wrap:wrap; align-items:flex-start}
.ftr a{transition:color .15s}
.ftr a:hover{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--brand-lt)}
.ftr__cols{display:grid; grid-template-columns:repeat(3,minmax(130px,auto)); gap:var(--s4)}
.ftr h4{font-size:11.5px; font-family:var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--s1)}
html[data-lang="zh"] .ftr h4{font-family:var(--font-zh); text-transform:none; letter-spacing:.06em}
.ftr__legal{margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line); display:grid; gap:5px}
.ftr__brand{display:flex; align-items:center; gap:10px; margin-bottom:var(--s2)}
.ftr__brand img{width:38px}

/* ---------- 预留位（认证/客户案例上线前占位） ---------- */
.reserved{border:1px dashed var(--line); border-radius:var(--r-md); padding:var(--s4); text-align:center; color:var(--ink-3); font-size:13.5px}

/* ---------- 键盘焦点：键盘用户看得到，鼠标点击不出现描边 ---------- */
a:focus-visible,button:focus-visible,select:focus-visible,textarea:focus-visible,
input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
}
.hasdd .nav__a:focus-visible{outline-offset:2px}

/* ---------- 尊重系统「减弱动态效果」设置 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important; transition-delay:0ms !important;
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  .btn:hover,.pcard:hover{transform:none}
}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .pgrid{grid-template-columns:1fr 1fr}
  .pdp__grid{grid-template-columns:1fr}
}
/* ---------- 顶部公告条（Symbol Audio 做法：把最想让人做的一件事钉在最高位） ---------- */
.banner{background:var(--brand); border-bottom:1px solid var(--brand-lt)}
.banner__in{display:flex; align-items:center; justify-content:center; gap:var(--s3);
  min-height:40px; padding:9px var(--s3); text-align:center; flex-wrap:wrap}
.banner__t{font-size:13.5px; color:#fff; letter-spacing:.01em; line-height:1.6}
.banner__t b{color:var(--gold); font-weight:600}
.banner__a{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold); border-radius:var(--r-sm); padding:6px 14px;
  white-space:nowrap; text-decoration:none; transition:background .15s, color .15s}
.banner__a:hover{background:var(--gold); color:#1a1206}
html[data-lang="zh"] .banner__t{font-family:var(--font-zh)}
html[data-lang="zh"] .banner__a{font-family:var(--font-zh); letter-spacing:.08em}

/* ---------- 目录视图 / 卡片视图切换（Elektron Catalog 做法） ---------- */
.vtoggle{display:flex; gap:2px; margin-left:auto; border:1px solid var(--line);
  border-radius:var(--r-sm); padding:2px; flex:none}
.vtoggle button{background:none; border:0; color:var(--ink-3); cursor:pointer; padding:5px 12px;
  border-radius:1px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; line-height:1.6}
.vtoggle button:hover{color:var(--ink)}
.vtoggle button[aria-pressed="true"]{background:var(--surface-2); color:var(--ink)}
html[data-lang="zh"] .vtoggle button{font-family:var(--font-zh); letter-spacing:.06em}

.plist{display:none; border-top:1px solid var(--line)}
html[data-view="list"] .pgrid{display:none}
html[data-view="list"] .plist{display:block}
.prow{display:grid; grid-template-columns:96px minmax(0,1fr) 260px 96px; gap:var(--s3);
  align-items:center; padding:13px var(--s3); border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit; transition:background .14s, box-shadow .14s}
.prow:hover{background:var(--surface-1); box-shadow:inset 2px 0 0 var(--brand-lt)}
.prow:hover .prow__id{color:var(--brand-lt)}
.prow:hover .prow__go{transform:translateX(3px)}
.prow__id{font-family:var(--font-mono); font-size:15px; font-weight:600; color:var(--ink); letter-spacing:.06em; transition:color .15s}
.prow__id span{display:block; font-size:10px; letter-spacing:.12em; color:var(--ink-3); margin-top:3px}
.prow__t{font-size:14.5px; color:var(--ink); line-height:1.5}
.prow__t em{display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:3px}
html[data-lang="zh"] .prow__t{font-family:var(--font-zh)}
.prow__kv{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.03em; line-height:1.7}
.prow__go{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap; text-align:right; transition:transform .18s ease, color .15s}
html[data-lang="zh"] .prow__go{font-family:var(--font-zh); letter-spacing:.06em}

@media (max-width:960px){
  /* 平板宽度下导航项+语言+CTA 已经很满，收窄间距防止溢出 */
  .hdr__in{gap:var(--s2)}
  .nav{gap:var(--s2)}
  .hero__grid,.grid2,.grid3,.split2,.form{grid-template-columns:1fr}
  .grid4,.proc{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr}
  .hero{padding:var(--s5) 0}
  .sec{padding:var(--s5) 0}
  .hero::after{display:none}
}
@media (max-width:720px){
  /* 手机：brand + 语言 + 汉堡必须同屏放下，再小就会把按钮挤出屏幕 */
  .hdr__in{gap:10px}
  .brand__mark{width:32px; height:32px}
  .brand__en{letter-spacing:.1em}
  html[data-lang="zh"] .brand__zh{letter-spacing:.12em}
  .brand{gap:8px}
  .lang button{padding:5px 10px; font-size:12px}
  .burger{padding:6px 10px; font-size:12px}
  .banner__in{padding:8px var(--s2); gap:10px}
  .banner__t{font-size:12.5px}
  .banner__a{padding:5px 12px; font-size:10px}
  .nav{display:none; position:absolute; top:var(--hdr); left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--surface-2); border-bottom:1px solid var(--line); padding:var(--s1) 0; margin-left:0}
  .nav.open{display:flex}
  .nav__a,.nav > .hasdd{padding:11px var(--s3)}
  .nav__a::after{display:none}
  .nav > .hasdd{border-bottom:1px solid var(--line-soft)}
  .nav__a--dd{display:flex; justify-content:space-between; color:var(--ink-3)}
  .hasdd.open .nav__a--dd{color:var(--ink)}
  .caret{width:6px; height:6px; border-color:var(--ink-3); transform:rotate(45deg) translate(-1px,-1px)}
  .hasdd.open .caret{border-color:var(--ink); transform:rotate(225deg) translate(-1px,-2px)}
  .dd{position:static; display:none; opacity:1; visibility:visible; transform:none; pointer-events:auto;
    width:auto; min-width:0; border:0; border-radius:0; background:transparent; box-shadow:none;
    padding:2px 0 10px}
  .hasdd:hover .dd{display:none}
  .hasdd.open .dd{display:block}
  .dd::before{display:none}
  /* 子项整体缩进一级，靠缩进而非颜色表达层级 */
  .dd a{padding:8px 24px 8px 46px; border-radius:0}
  .dd__t{font-size:13.5px}
  .dd__s{font-size:11.5px; margin-top:1px}
  .dd a::before{left:30px; top:6px; bottom:6px}
  .dd__sep{margin:6px 24px}
  .dd__cta{padding:11px 24px 11px 46px}
  .burger{display:block; order:2}
  .lang--m{display:flex; order:1; margin-left:auto}
  /* 展开的菜单里不再重复出现语言开关（页头已有 lang--m） */
  .nav .lang{display:none}
  .pgrid{grid-template-columns:1fr}
  .ccards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .ccard__shot{padding:6px; height:110px}
  .cgal__head h3{font-size:17px}
  .ccard h3{font-size:13.5px; min-height:2.8em}
  .ccard__specs div{font-size:10.5px}
  .prow{grid-template-columns:88px minmax(0,1fr) 92px}
  .prow__kv{display:none}
  .grid4,.proc{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .ftr__cols{grid-template-columns:1fr 1fr}
  .gal__thumbs{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}
}
@media print{
  .hdr,.ftr,.pdp__cta,.hero__cta,.filters{display:none}
  body{background:#fff; color:#000}
}