/* site/assets/css/r3b.css —— R3b 视觉与互动：基础件 + 插画 + 各新区块（只用逻辑属性） */
/* [T1] 显现：.rv 由 site.js 显现段开头加上；site.js 没跑到这里（中途抛错 / 被拦）时内容保持可见 */
.rv [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i,0)*90ms)}
.rv [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv [data-reveal]{opacity:1;transform:none;transition:none}}
/* [T1] 标签；深链（#cz-pack、#strength-team 等）落点让出吸顶顶栏 */
[role=tabpanel]{scroll-margin-block-start:96px}
.tablist{display:flex;gap:var(--sp-2);overflow-x:auto;scrollbar-width:thin;border-block-end:1px solid var(--line);margin-block-end:var(--sp-4)}
.tablist [role=tab]{flex:0 0 auto;font:inherit;font-weight:600;color:#5E646B;background:none;border:0;border-block-end:3px solid transparent;padding:12px 16px;cursor:pointer;white-space:nowrap}
.tablist [role=tab][aria-selected=true]{color:var(--navy);border-block-end-color:var(--gold)}
.tablist [role=tab]:hover{color:var(--navy)}
/* [T1] 插画 */
.ill{direction:ltr;margin:0;position:relative}
.ill svg{display:block;width:100%;height:auto}
.ill :is(path,rect,circle,ellipse,polygon,line){fill:none;stroke:#2B3036;stroke-width:1;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ill .fa{fill:#E7E7E5}.ill .fb{fill:#CBCED2}.ill .fc{fill:#F9F9F8}.ill .fd{fill:#3A4048}.ill .fg{fill:#B5774A}.ill .sg{stroke:#8F5D39}.ill .nos{stroke:none}
.ill text{font:600 12px var(--font);fill:#1B1E22;stroke:none}
/* [T2] 插画补充色：深金侧面 / 半透明膜面 / 浅色细线 */
.ill .fh{fill:#8F5D39}.ill .ft{fill:#F9F9F8;fill-opacity:.55}.ill .sl{stroke:#A9AFB6}
/* [T1] 滚动叙事：.sc-on 由 site.js scrolly 段初始化后加在 [data-scrolly] 上，之前媒体不隐藏 */
.js [data-scrolly].sc-on [data-media]{opacity:0;transition:opacity .4s ease}
.js [data-scrolly].sc-on [data-media].on{opacity:1}
/* [T4] OEM 定制演示器：左模型（固定 LTR）+ 右 6 个标签；无 JS 时标签栏隐藏、6 个面板依次展开 */
.czgrid{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:auto 1fr;grid-template-areas:"stage tabs" "stage side";column-gap:var(--sp-5);align-items:start}
.czgrid>.tablist{grid-area:tabs}.czstage{grid-area:stage}.czside{grid-area:side}
.czstage{position:relative;direction:ltr;background:linear-gradient(180deg,#FAFAF9 0%,var(--sky) 100%);border:1px solid var(--line);border-radius:var(--r-3);padding:var(--sp-3);overflow:hidden}
.czswitch{display:inline-flex;gap:4px;padding:4px;background:#fff;border:1px solid var(--line);border-radius:999px;position:absolute;z-index:1;inset-block-start:var(--sp-3);inset-inline-end:var(--sp-3)}
.czswitch .btn{border-radius:999px;border-color:transparent}
.czswitch .btn[aria-pressed=false],.czseg .btn[aria-pressed=false]{background:transparent;color:var(--navy)}
.czswitch .btn[aria-pressed=true],.czseg .btn[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.czmodel{position:relative;direction:ltr}
.czmodel .cz-mi{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.czmodel[data-product=micro] .cz-mi{opacity:1;visibility:visible;transition:opacity .45s ease .1s,visibility 0s}
.czmodel[data-product=micro] .cz-pb .m-tower{opacity:0}
/* 外壳着色：--case 由色块设置；明暗面按 data-tone 混色（不支持 color-mix 的浏览器三面同色） */
.czmodel{--ca:var(--case);--cb:var(--case);--cc:var(--case);--cs:#16181B;--ce:#1B1E22;--lt:#F9F9F8}
@supports (color:color-mix(in srgb,red,blue)){
.czmodel[data-tone=dark]{--ca:color-mix(in srgb,var(--case) 86%,#fff);--cc:color-mix(in srgb,var(--case) 70%,#fff);--ce:color-mix(in srgb,var(--case) 42%,#fff);--cs:color-mix(in srgb,var(--case) 60%,#000)}
.czmodel[data-tone=light]{--cb:color-mix(in srgb,var(--case) 80%,#1B1E22);--cc:color-mix(in srgb,var(--case) 50%,#fff);--cs:color-mix(in srgb,var(--case) 72%,#1B1E22)}}
.czmodel[data-tone=light]{--lt:#1B1E22}
.czmodel .cz-case{stroke:var(--ce);transition:fill .45s ease,stroke .45s ease}
.czmodel .cz-case.ca{fill:var(--ca)}.czmodel .cz-case.cb{fill:var(--cb)}.czmodel .cz-case.cc{fill:var(--cc)}
.czmodel .cz-brand{fill:var(--case);transition:fill .45s ease}.czmodel .cz-brand.czb{fill:var(--cb)}
.czmodel .czseam{fill:var(--cs);transition:fill .45s ease}
.czmodel .czfin{fill:none;stroke:var(--ce);stroke-opacity:.75}
.czmodel .czwin{fill:#1A1D21;stroke:#1A1D21}
.czmodel .czpl{fill:#2A2E33}.czmodel .czpl2{fill:#141619}
.czmodel .czmi{fill:#34383E}.czmodel .czmi2{fill:#212428}.czmodel .czmi3{fill:#43484F}
.czmodel .czsh{fill:#1B1E22;fill-opacity:.08}
.czmodel .czglare{fill-opacity:.14}
.czmodel .czin{fill-opacity:.85}
.czmodel .czcable{fill:none;stroke:#1F2226;stroke-width:3}
.czmodel .czbar{stroke:#1B1E22}
.czmodel .czring{fill:none;stroke:#DCDDDE;stroke-width:4}
.czmodel .czarc{fill:none;stroke:#B5774A;stroke-width:4}
.czmodel .czw{stroke-width:2}
.czmodel .czhl{stroke-dasharray:4 3}
.czmodel .cz-stamp{stroke:#8F5D39;stroke-width:1.5}
.czmodel .cztag rect{fill:#fff}.czmodel .czgold rect{fill:#B5774A;stroke:#8F5D39}.czmodel .czsub{font-weight:600;fill:#5E646B}
.czmodel .czslot{fill:#25292E}.czmodel .czfin2{fill:none;stroke:#6B7178}
.czmodel .cztag text,.czmodel .czbig{font:700 10px var(--font);fill:#1B1E22}
.czmodel .czbig{font-size:12px}
.czmodel .czink{font:800 10px var(--font);fill:#1B1E22;letter-spacing:.04em}
.czmodel .czlt{fill:var(--lt);font-weight:800;letter-spacing:.04em;transition:fill .45s ease}
.czmodel .czsm{font-size:8px}
/* logo：丝印 = 实色字；激光 = 与外壳同色调的蚀刻字 */
.czmodel .m-logo text{font:800 15px var(--font);letter-spacing:.08em;fill:var(--lt);stroke:none;transition:fill .35s ease,stroke .35s ease}
.czmodel[data-finish=laser] .m-logo text{fill:none;stroke:#8E949B;stroke-width:.6}
@supports (color:color-mix(in srgb,red,blue)){.czmodel[data-finish=laser] .m-logo text{fill:color-mix(in srgb,var(--case) 72%,#8E949B)}}
/* 状态组：按当前标签淡入；塔在非 Logo 态左移让出右侧，套装态淡出 */
.czmodel [data-st]{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s ease,transform .5s cubic-bezier(.2,.8,.2,1),visibility 0s linear .5s}
.czmodel[data-active=cz-logo] [data-st~=cz-logo],.czmodel[data-active=cz-pack] [data-st~=cz-pack],.czmodel[data-active=cz-app] [data-st~=cz-app],.czmodel[data-active=cz-elec] [data-st~=cz-elec],.czmodel[data-active=cz-kit] [data-st~=cz-kit],.czmodel[data-active=cz-docs] [data-st~=cz-docs]{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .2s,transform .6s cubic-bezier(.2,.8,.2,1) .15s,visibility 0s}
.czmodel .m-tower{transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.czmodel[data-active]:not([data-active=cz-logo]) .m-tower{transform:translateX(-156px)}.czmodel[data-active]:not([data-active=cz-logo]) .cz-mi .m-tower{transform:translateX(-132px)}
.czmodel[data-active=cz-kit] .m-tower{opacity:0}
/* 电池层：高于当前层数的层隐藏，主机随层数下移 */
.ill-oem-powerbox [data-layer]{transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.ill-oem-powerbox .m-head{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.czmodel[data-layers="1"] [data-layer="2"],.czmodel[data-layers="1"] [data-layer="3"],.czmodel[data-layers="1"] [data-layer="4"],.czmodel[data-layers="1"] [data-layer="5"],.czmodel[data-layers="2"] [data-layer="3"],.czmodel[data-layers="2"] [data-layer="4"],.czmodel[data-layers="2"] [data-layer="5"],.czmodel[data-layers="3"] [data-layer="4"],.czmodel[data-layers="3"] [data-layer="5"],.czmodel[data-layers="4"] [data-layer="5"]{opacity:0;transform:translateY(-14px)}
.czmodel[data-layers="1"] .m-head{transform:translateY(152px)}.czmodel[data-layers="2"] .m-head{transform:translateY(114px)}.czmodel[data-layers="3"] .m-head{transform:translateY(76px)}.czmodel[data-layers="4"] .m-head{transform:translateY(38px)}
/* 套装：未勾选的物件变淡 */
.czmodel [data-item]{transition:opacity .3s ease}
.czmodel[data-kit] [data-item]{opacity:.15}
.czmodel[data-kit~=panel] [data-item=panel],.czmodel[data-kit~=micro] [data-item=micro],.czmodel[data-kit~=battery] [data-item=battery],.czmodel[data-kit~=mount] [data-item=mount]{opacity:1}
/* 文档：印章落下、印迹随后出现 */
.czmodel .cz-tool{opacity:0;transform:translateY(-28px);transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.4,.5,1)}
.czmodel .cz-mark{opacity:0;transition:opacity .3s ease}
.czmodel[data-active=cz-docs] .cz-tool{opacity:1;transform:none;transition-delay:.35s}
.czmodel[data-active=cz-docs] .cz-mark{opacity:1;transition-delay:.75s}
@media (prefers-reduced-motion:reduce){.czmodel,.czmodel *{transition-delay:0s!important}}
/* 右侧：标签做成 3 列卡片 */
.cz .tablist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border:0;overflow:visible;margin-block-end:var(--sp-4);counter-reset:cz}
.cz .tablist [role=tab]{display:flex;flex-direction:column;align-items:flex-start;gap:4px;white-space:normal;overflow-wrap:anywhere;hyphens:auto;text-align:start;line-height:1.25;font-size:var(--fs-0);padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-2);transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.cz .tablist [role=tab]::before{counter-increment:cz;content:"0" counter(cz);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--mist)}
.cz .tablist [role=tab]:hover{border-color:var(--navy)}
.cz .tablist [role=tab][aria-selected=true]{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:var(--shadow)}
.cz .tablist [role=tab][aria-selected=true]::before{color:var(--gold)}
html:not(.js) .cz .tablist{display:none}
.czpanel h3{margin:0 0 6px;font-size:var(--fs-3);color:var(--navy)}
.czpanel>p{margin:0 0 var(--sp-3);color:#5E646B}
.js .czpanel{animation:czin .4s ease}
@keyframes czin{from{opacity:0;transform:translateY(6px)}}
html:not(.js) .czpanel+.czpanel{border-block-start:1px solid var(--line);padding-block-start:var(--sp-4);margin-block-start:var(--sp-4)}
.czrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 var(--sp-3)}
.czrow>span,label.czrow{font-weight:600;font-size:var(--fs-0);color:var(--navy)}
.czrow small{flex-basis:100%;color:#5E646B;font-size:var(--fs-0)}
.czrow select{font:inherit;font-weight:600;color:var(--ink);padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-1);background:#fff;min-inline-size:120px}
.swatch{inline-size:32px;block-size:32px;padding:0;border-radius:50%;background:var(--sw);border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .2s,transform .2s}
.swatch:hover{transform:scale(1.08)}
.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--gold)}
.czstep b{min-inline-size:5.5em;text-align:center;font-size:var(--fs-2);color:var(--navy);unicode-bidi:plaintext}
.czstep .btn{inline-size:38px;justify-content:center;font-size:var(--fs-2);padding:4px 0}
.czstep .btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.czlimit{unicode-bidi:plaintext;margin:0 0 4px;font-size:var(--fs-2);font-weight:700;color:var(--navy)}
.cznote{color:#5E646B}
.czsku{font-weight:600;color:var(--navy);margin:0}
.chk{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:var(--fs-0);font-weight:600;color:var(--navy);cursor:pointer;transition:border-color .2s,background .2s}
.chk:has(input:checked){border-color:var(--navy);background:#F2F1EE}
.chk input{accent-color:var(--navy);margin:0}
.czcta{margin-block-start:var(--sp-4)}
@media (max-width:900px){.czgrid{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"tabs" "stage" "side";row-gap:var(--sp-3)}.cz .tablist{margin-block-end:0}.czstage{padding:var(--sp-2)}.czswitch{position:relative;inset:auto}}
/* 手机：模型上的小标签（约 6 px）隐藏，数值在面板里；2–3 层时把画布空白的上沿裁掉（4–5 层与套装态不裁） */
@media (max-width:600px){.czmodel .czlabel{display:none}.czmodel:not([data-active=cz-kit]):not([data-active=cz-logo]):is([data-layers="1"],[data-layers="2"],[data-layers="3"]) .ill svg{margin-block-start:-12%}.czmodel .ill svg{transform-origin:50% 95%;transition:margin .5s ease,transform .5s ease}.czmodel[data-active=cz-logo]:is([data-layers="1"],[data-layers="2"],[data-layers="3"]) .ill svg{transform:scale(1.3)}.czstage{padding-block-end:0}}
/* 无 JS：只靠脚本才有用的控件不显示；各国限功率改为静态列表（演示器初始化成功、html 有 .cz-on 后才收起） */
html:not(.js) .jsonly{display:none}
.czlims{list-style:none;margin:0 0 var(--sp-2);padding:0;display:grid;gap:4px;color:var(--navy);font-weight:600}.czlims b{display:inline-block;min-inline-size:2.5em}
.cz-on .czlims{display:none}
/* [T5→R7 T3] 交期与付款改为生产旅程（样式在 oem-journey.css）；旅程初始化成功（html.lt-on）后原表格视觉隐藏（仍在可访问性树里） */
/* 视觉隐藏作用在表格外层 div 上：表格不认 1px 宽，直接隐藏表格会把手机页面横向撑开 */
html.lt-on .lt-fallback{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
/* [T6] 滚动叙事（OEM 项目流程）：左列步骤、右列粘性媒体；手机与无 JS 时每步自带图，右列不显示 */
.scgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--sp-6);align-items:start}
.sctext h2{margin-block-end:var(--sp-3)}
.scsteps{list-style:none;margin:0;padding:0}
/* 非当前步只淡化圆号（白底浅边 + 次级色数字，对白底 ≥ 4.5:1），文字保持正常色 */
.scsteps li{display:grid;grid-template-columns:44px 1fr;column-gap:var(--sp-3);padding-block:var(--sp-6);border-block-end:1px solid var(--line)}
.scsteps li:last-child{border-block-end:0}
.scsteps .n{grid-row:1 / span 2;inline-size:44px;block-size:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:var(--fs-2);background:#fff;color:#5E646B;border:2px solid var(--line);transition:background .3s ease,border-color .3s ease,color .3s ease}
.scsteps li.on .n{background:var(--navy);border-color:var(--navy);color:#fff}
.scsteps b{font-size:var(--fs-3);color:var(--navy);align-self:end}
.scsteps small{font-size:var(--fs-1);color:#5E646B;line-height:1.55}
.stepfig{display:none;grid-column:1 / -1}
.stepfig img{display:block;inline-size:100%;block-size:auto;border-radius:var(--r-2)}
.stepfig .ill{background:var(--sky);border-radius:var(--r-2)}
.scmedia{position:sticky;inset-block-start:max(96px, calc(50vh - 220px));align-self:start;aspect-ratio:4/3;border-radius:var(--r-3);overflow:hidden;background:var(--sky);border:1px solid var(--line)}
.scmedia>div{position:absolute;inset:0;display:grid;place-items:center}
.scmedia .ill{inline-size:86%}
.scmedia video{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.js .sc-on .scmedia [data-media]{visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.js .sc-on .scmedia [data-media].on{visibility:visible;transition:opacity .4s ease,visibility 0s}
html:not(.js) .scmedia{display:none}
html:not(.js) .stepfig{display:block;margin-block-start:var(--sp-3)}
@media (min-width:901px){html:not(.js) .scgrid{grid-template-columns:1fr}html:not(.js) .scsteps li{grid-template-columns:44px minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;align-items:start;padding-block:var(--sp-4)}html:not(.js) .stepfig{grid-column:3;grid-row:1 / span 2;margin:0}}
@media (max-width:900px){.scgrid{grid-template-columns:1fr;gap:0}.scmedia{display:none}.stepfig{display:block;margin-block-start:var(--sp-3)}.scsteps li{padding-block:var(--sp-4)}.scsteps li .n{background:var(--navy);border-color:var(--navy);color:#fff}}
/* [T8] 关于大菜单：三张图卡 + 一列文字链接；面板靠 summary 的行末边展开（RTL 自动镜像），手机上退化为纯链接列表 */
/* 「关于」在顶栏中段：若相对 summary 定位，LTR 会冲出左边、RTL 会冲出右边。桌面宽度下改为相对 .wrap，贴内容区行末边展开（LTR 靠右、RTL 靠左） */
@media (min-width:1181px){.nav .wrap{position:relative}.aboutmega{position:static}}
.aboutmega .ampanel{grid-template-columns:auto 200px;inset-inline:auto var(--sp-4);align-items:start}
.amcards{display:grid;grid-template-columns:repeat(3,200px);gap:var(--sp-3)}
.megapanel a.amcard{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:var(--r-2)}
.amcard img,.amcard .ill{inline-size:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-1);background:var(--sky)}
.amcard .ill{display:flex;justify-content:center;overflow:hidden}
.amcard .ill svg{inline-size:auto;block-size:100%}
.amcard b{color:var(--navy)}
.amcard small{color:#5E646B;line-height:1.4}
.amlinks{display:flex;flex-direction:column;border-inline-start:1px solid var(--line);padding-inline-start:var(--sp-3)}
@media (max-width:1180px){
  .aboutmega .ampanel{grid-template-columns:1fr}
  .amcards{grid-template-columns:1fr;gap:0}
  .amcard img,.amcard .ill,.amcard small{display:none}
  .megapanel a.amcard{padding:10px 12px}
  .amlinks{border:0;padding:0}
}
/* [T7] 实力背书：首页四个标签（工厂 / 资质 / 团队 / 案例）；浅色底（插画脚下的浅色阴影菱形在深底上会变成底板）；无 JS 时标签栏隐藏、四个面板依次展开并显示 h3 标签名 */
.strength{background:linear-gradient(180deg,var(--bg-2),#fff)}
.strength .tablist{margin-block-end:0}
.strpanel{padding-block:var(--sp-4)}
.strpanel.grid2{align-items:center}
.strength .vbox{border-radius:var(--r-2);overflow:hidden;box-shadow:var(--shadow);background:var(--navy)}
.strength .vbox video{display:block;inline-size:100%;block-size:auto;aspect-ratio:16/9;object-fit:cover}
.strength .numbers.homenums{grid-template-columns:repeat(3,minmax(0,1fr));margin-block:var(--sp-4)}
.strength .certwall li{background:#fff}
.strteam li{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:var(--r-2);padding:var(--sp-3) var(--sp-2)}
.strteam .ill{max-inline-size:220px;inline-size:100%;margin-inline:auto;margin-block-end:var(--sp-2)}
.strteam b{color:var(--navy);font-size:var(--fs-2)}
.strteam small{color:#5E646B;font-size:var(--fs-0)}
.strteam{list-style:none;margin:0;padding:0}
.strfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-3);margin-block-start:var(--sp-4)}
.strfoot p{margin:0;font-weight:600;color:var(--navy)}
.strpanel .strh+.strfoot,.strpanel .grid3+.strfoot{justify-content:flex-end}
.strh{margin:0 0 var(--sp-3);font-size:var(--fs-3);color:var(--navy)}
html.js .strh{display:none}
html:not(.js) .strength .tablist{display:none}
html:not(.js) .strpanel+.strpanel{border-block-start:1px solid var(--line)}
html:not(.js) .strpanel.grid2>.strh{grid-column:1/-1;margin:0}
@media (max-width:900px){.strength .numbers.homenums{grid-template-columns:repeat(3,minmax(0,1fr))}.grid4.strteam{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 手机：四个标签排成 2×2 胶囊，长译文换行而不横向滚出 */
@media (max-width:600px){.strength .tablist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:0;overflow:visible}.strength .tablist [role=tab]{white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.25;font-size:var(--fs-0);padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:999px}.strength .tablist [role=tab][aria-selected=true]{background:var(--navy);border-color:var(--navy);color:#fff}.strpanel.grid2{gap:var(--sp-3)}.strength .numbers.homenums{gap:var(--sp-3) var(--sp-2)}.strength .numbers b{font-size:var(--fs-4)}.strteam .ill{max-inline-size:150px}.strteam li{padding:var(--sp-2)}.strfoot .btn{inline-size:100%;justify-content:center}}
/* [T9] 关于页：吸顶小导航 + 图标卡 + 插画流程依次点亮 + 项目实拍 */
.subnav{position:sticky;inset-block-start:68px;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-block:1px solid var(--line)}
.subnav .wrap{display:flex;gap:var(--sp-4);overflow-x:auto;padding-block:10px;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{white-space:nowrap;font-weight:600;color:#5E646B;padding-block:4px;border-block-end:2px solid transparent;transition:color .2s,border-color .2s}
.subnav a:hover,.subnav a:focus-visible{color:var(--navy);border-block-end-color:var(--gold)}
.about section[id]{scroll-margin-block-start:140px}
.ccard .ill{inline-size:56px;margin-block-end:var(--sp-2)}
.about .icards .ccard{background:#fff;transition:opacity .5s ease,transform .5s ease,box-shadow .2s,border-color .2s;transition-delay:calc(var(--i,0)*90ms),calc(var(--i,0)*90ms),0s,0s}  /* 优先级高于 .rv [data-reveal]：显现过渡与错落要在这里一并写上 */
@media (prefers-reduced-motion:reduce){.about .icards .ccard{transition:box-shadow .2s,border-color .2s}}
.about .icards .ccard:hover{border-color:#A9AFB6;box-shadow:var(--shadow)}
.about .flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--sp-3);counter-reset:flow}
.about .flow li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;border:1px solid var(--line);border-radius:var(--r-2);padding:var(--sp-3);background:#fff;color:var(--navy);font-weight:600;line-height:1.3}
.about .flow li::before{content:"0" counter(flow);order:-1;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--gold-2)}
.about .flow li:not(:last-child)::after{content:"";position:absolute;inset-block-start:calc(var(--sp-3) + 34px);inset-inline-start:calc(100% + 1px);inline-size:calc(var(--sp-3) - 2px);border-block-start:2px dashed var(--gold)}
.flow li .ill{inline-size:40px}
.about .flow li>span{overflow-wrap:anywhere}
/* 依次点亮：未进入视口时图标灰、边框淡；.in 后图标上色、金边，延迟随 --i 递增 */
.rv .about .flow li[data-reveal]{transition:opacity .5s ease,transform .5s ease,border-color .4s ease,box-shadow .4s ease;transition-delay:calc(var(--i,0)*180ms)}
.rv .about .flow li[data-reveal] .ill{filter:grayscale(1);opacity:.5;transition:filter .5s ease,opacity .5s ease;transition-delay:calc(var(--i,0)*180ms + .25s)}
.rv .about .flow li[data-reveal].in{border-color:var(--gold);box-shadow:0 0 0 3px rgba(181,119,74,.14)}
.rv .about .flow li[data-reveal].in .ill{filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){.rv .about .flow li[data-reveal],.rv .about .flow li[data-reveal] .ill{transition:none;filter:none;opacity:1}}
.projphotos{margin-block-end:var(--sp-4)}
.projphotos img{inline-size:100%;block-size:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-2)}
.projphotos img[src*="install-stack"]{object-position:50% 75%}
@media (max-width:1180px){.subnav{inset-block-start:60px}}  /* 贴住顶栏：顶栏 68 / 60 高 + 1px 底边，与小导航上边重叠，不留缝 */
@media (max-width:900px){.about .flow li:not(:last-child)::after{display:none}}
@media (max-width:600px){.about .flow{grid-template-columns:repeat(2,minmax(0,1fr))}.subnav .wrap{gap:var(--sp-3)}
  .about .icards .ccard{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:var(--sp-3);align-items:start}.about .icards .ccard .ill{inline-size:44px;grid-row:span 3;margin:0}.about .icards .ccard>:not(.ill){grid-column:2}}