/* ============================================================
 * PICASSOS 首页 · 材质与动效层（2026-11-01 新增）
 * ------------------------------------------------------------
 * 老大反馈："界面干净了，但死板、不灵动，要高级又有技术含量。"
 * 诊断：整站 52 个 transition、只有 2 个 keyframes、零滚动揭示、
 *       零材质纹理 —— 全是一块块纯色平面，没有任何东西会回应人。
 *
 * 本文件只补「感知层」，不改布局、不改配色语义，四层递进：
 *   ① 材质  —— 噪点肌理 / 金属多段渐变 / 卡片受光斜面
 *                （把"纯色块"变成"有厚度的实体"）
 *   ② 光    —— 鼠标跟随柔光 / 卡片 3D 倾斜 / 金线扫光 / 光泽循环
 *                （让页面知道人的位置）
 *   ③ 秩序  —— 滚动揭示编排 / 顶部进度金线 / 遮罩揭幕标题
 *                （节奏是被导演过的）
 *   ④ 手感  —— 按钮回弹 / 导航下划线 / 箭头位移
 *
 * 工程约束（硬）：
 *   · 只用 transform / opacity / filter 做动画，绝不碰 layout 属性；
 *   · 揭示动画默认「完全可见」，JS 加上 .luxe-ready 后才隐藏 ——
 *     JS 挂了页面照常完整可读，不会白屏；
 *   · prefers-reduced-motion / 触屏 / 老设备 全量降级；
 *   · 回退：删本文件 + header.php 两行引用即可，main.css 一行未动。
 * ============================================================ */

/* ---------- 令牌：金属色阶（亮色偏沉稳，暗色偏反光） ---------- */
:root{
    --lx-gold-1:#8A6B32;
    --lx-gold-2:#B4924A;
    --lx-gold-3:#D9BE84;
    --lx-gold-4:#F0E0BC;
    --lx-metal: linear-gradient(100deg,#8A6B32 0%,#B4924A 16%,#E8D5A6 30%,#C9A55E 44%,#9C7A3C 58%,#D3B87C 74%,#8A6B32 100%);
    --lx-noise-op:.05;
    --lx-ease:cubic-bezier(.22,1,.36,1);
    --lx-ease-out:cubic-bezier(.16,1,.3,1);
    --lx-spring:cubic-bezier(.34,1.56,.64,1);
}

html.dark{
    --lx-gold-1:#8B6B36;
    --lx-gold-2:#C9A55E;
    --lx-gold-3:#E4CE9B;
    --lx-gold-4:#F6EBD0;
    --lx-metal: linear-gradient(100deg,#7A5C2A 0%,#C9A55E 15%,#F4E7C6 28%,#D5B77A 40%,#A6833F 54%,#E4CE9B 70%,#B08F4E 84%,#7A5C2A 100%);
    --lx-noise-op:.035;
}

/* ============================================================
 * ① 材质层
 * ============================================================ */

/* 细颗粒噪点：全站叠一层 3~5% 的胶片颗粒。
   这是"高级感"最便宜也最有效的一招 —— 纯数字纯色会显得塑料，
   有了颗粒立刻像印刷品 / 相纸。用 SVG feTurbulence 内联，0 请求。 */
body::after{
    content:'';
    position:fixed; inset:0; z-index:9;
    pointer-events:none;
    opacity:var(--lx-noise-op);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat:repeat;
    mix-blend-mode:soft-light;
}

/* 金属渐变标题：只给「装饰性」文字用，正文一律纯色，保证可读性 */
.luxe-metal-text{
    background:var(--lx-metal);
    background-size:220% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    animation:lx-metal-slide 9s ease-in-out infinite alternate;
}
@keyframes lx-metal-slide{
    from{ background-position:0% 50%; }
    to{ background-position:100% 50%; }
}

/* 分区小标签（COLLECTIONS · 藏品系列）走金属，起"目录页"的高级感 */
.section-label{
    background:var(--lx-metal);
    background-size:200% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:lx-metal-slide 12s ease-in-out infinite alternate;
}

/* 卡片受光斜面：顶部一道内高光 + 底部重阴影，
   让卡片从"贴纸"变成"有厚度的板子"。 */
/* 注意：这几条必须 !important ——
   ① main.css 里 `.series-grid .series-card` 之类双类选择器特异性高于单类；
   ② dark.css 用的是 `html.dark .series-card{...!important}`。
   不加重就不生效（第一版就栽在这）。 */
.series-card,
.painting-card,
.scene-card,
.faq-item,
.pcs-form{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 2px 4px rgba(0,0,0,.10),
        0 18px 44px rgba(0,0,0,.10) !important;
    transition:transform .5s var(--lx-ease), box-shadow .5s var(--lx-ease), border-color .4s ease;
}
html.dark .series-card,
html.dark .painting-card,
html.dark .scene-card,
html.dark .faq-item,
html.dark .pcs-form{
    box-shadow:
        inset 0 1px 0 rgba(255,248,232,.09),
        0 2px 6px rgba(0,0,0,.5),
        0 20px 50px rgba(0,0,0,.55) !important;
}
html.dark .series-card:hover,
html.dark .painting-card:hover,
html.dark .scene-card:hover{
    box-shadow:
        inset 0 1px 0 rgba(255,248,232,.16),
        0 4px 10px rgba(0,0,0,.55),
        0 30px 70px rgba(0,0,0,.68),
        0 0 46px -18px rgba(201,165,94,.55) !important;
}

/* ============================================================
 * ② 光层
 * ============================================================ */

/* --- 鼠标跟随柔光：一团金色雾跟着指针走 ---
   用 transform 移动一个固定尺寸的 div（合成层，不重绘），
   绝不改 background-position（那会每帧重绘一大片）。 */
.luxe-glow{
    position:fixed; top:0; left:0;
    width:520px; height:520px;
    margin:-260px 0 0 -260px;
    border-radius:50%;
    pointer-events:none;
    z-index:8;
    opacity:0;
    transform:translate3d(-999px,-999px,0);
    background:radial-gradient(circle at center, rgba(201,165,94,.13), rgba(201,165,94,.05) 42%, transparent 68%);
    transition:opacity .6s ease;
    will-change:transform;
    mix-blend-mode:screen;
}
html.luxe-pointer .luxe-glow{ opacity:1; }
body:not(.luxe-pointer-ready) .luxe-glow{ display:none; }

/* --- 卡片金线扫光：hover 时一道高光斜着扫过整张卡 --- */
.series-card,
.scene-card,
.painting-card{ position:relative; overflow:hidden; }
.series-card::before,
.scene-card::before,
.painting-card::before{
    content:'';
    position:absolute; top:-20%; left:-70%;
    width:52%; height:140%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
    transform:skewX(-14deg) translateX(0);
    opacity:0;
    pointer-events:none;
    z-index:3;
    transition:opacity .2s ease;
}
.series-card:hover::before,
.scene-card:hover::before,
.painting-card:hover::before{
    opacity:1;
    animation:lx-sheen .95s var(--lx-ease-out) forwards;
}
@keyframes lx-sheen{
    from{ transform:skewX(-14deg) translateX(0); }
    to{ transform:skewX(-14deg) translateX(440%); }
}
html.dark .series-card::before,
html.dark .scene-card::before,
html.dark .painting-card::before{
    background:linear-gradient(100deg,transparent,rgba(228,206,155,.15),transparent);
}

/* --- 主 CTA 光泽循环：每 6s 一道光掠过金色按钮，像金属在灯下转头 --- */
.btn-primary,
.pcs-submit,
.biz-btn{ position:relative; overflow:hidden; }
.btn-primary::after,
.pcs-submit::after,
.biz-btn::after{
    content:'';
    position:absolute; top:-30%; left:-60%;
    width:40%; height:160%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
    transform:skewX(-16deg);
    pointer-events:none;
    animation:lx-cta-sheen 6.5s ease-in-out infinite;
}
.btn-primary.btn-outline::after{ display:none; }
@keyframes lx-cta-sheen{
    0%,68%{ transform:skewX(-16deg) translateX(-40%); opacity:0; }
    72%{ opacity:1; }
    90%,100%{ transform:skewX(-16deg) translateX(520%); opacity:0; }
}

/* --- 首屏光雾：模拟美术馆轨道灯 ---
   老大原话"死板"，首屏左侧一大片死黑是主因：黑要黑得下去，
   但必须有光把它"撑开"。这里三束光：
     ① 左上主射灯（打在标题区，锥形散开）
     ② 中部暖调散光（填充过渡，避免光斑边界）
     ③ 右下补光（平衡画面重量）
   全部 42s 极慢漂移 —— 肉眼几乎看不出在动，但页面因此不是死图。 */
.hero-section{ position:relative; overflow:hidden; }
.hero-section::before{
    content:'';
    position:absolute; inset:-20% -10%;
    pointer-events:none;
    z-index:0;
    background:
        radial-gradient(760px 480px at 6% -8%, rgba(233,213,168,.19), transparent 64%),
        radial-gradient(660px 400px at 26% 30%, rgba(201,165,94,.11), transparent 66%),
        radial-gradient(540px 340px at 84% 82%, rgba(180,146,74,.09), transparent 68%);
    animation:lx-drift 42s ease-in-out infinite alternate;
}
@keyframes lx-drift{
    0%{ transform:translate3d(0,0,0) scale(1); }
    50%{ transform:translate3d(2.5%,-1.8%,0) scale(1.06); }
    100%{ transform:translate3d(-2%,1.5%,0) scale(1.02); }
}
.hero-wrap{ position:relative; z-index:2; }

/* --- 首屏强调字：金属流动渐变 ---
   原文 .hero-headline .highlight 是 #b02e24 红，暗色下被压成米色，
   没有层次。改成真正会流动的金属 —— 这是全页最贵的一处质感。 */
html.dark .hero-headline .highlight{
    background:var(--lx-metal);
    background-size:200% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent !important;
    animation:lx-metal-slide 7s ease-in-out infinite alternate;
}

/* --- 首屏影像：装裱成一幅「挂在墙上的作品」---
   老大反馈"视频挤在右上角，缺点什么"。根因不是位置，是两件事：
     ① video 是 object-fit:contain + height:auto → 高度按 16:9 算出来
        比容器矮，下面留一条黑边，视觉上就"缩在右上角"；
     ② 它没被当成一件作品摆 —— 没有框、没有投影，飘在那儿。
   修法：填满容器（cover）+ 装裱（外框线 + 大投影）+ 左缘融进黑底。 */
html.dark .hero-media{
    background:var(--bg-base) !important;
    box-shadow:0 60px 120px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(201,165,94,.16);
}
.hero-media video.hero-video,
.hero-media .hero-poster-img{
    height:100% !important;
    width:100% !important;
    object-fit:cover !important;
}
/* 左缘融进黑底：不用 mask（mask 会把金边和投影一起吃掉），
   改用一层渐变盖在影像上，边界同样柔，但框还完整。 */
html.dark .hero-media::after{
    content:'';
    position:absolute; inset:0; z-index:2;
    pointer-events:none;
    background:linear-gradient(90deg,
        rgba(10,10,12,.98) 0%,
        rgba(10,10,12,.82) 3%,
        rgba(10,10,12,.38) 9%,
        rgba(10,10,12,.10) 16%,
        transparent 26%);
}

/* ============================================================
 * v3 · 国际水准改版（2026-11-01 老大二次反馈）
 *   "六大珍藏系列一行六个不大气" / "名画滚动加框" /
 *   "全站不要圆角"（直角在 sharp.css，全站生效）
 * ============================================================ */

/* ---------- 一、六大系列：横向滚动 → 三列两行大卡 ----------
   原来 6 张挤在一条 320px 宽的横向轨道里自动滚动，每张只有 320px，
   图片和 10px 的描述字挤在一起，读起来像商品列表。
   6 个系列是并列关系，三列两行才是"藏品陈列"的正确结构：
   每张约 430px，图能看清、字能读，页面也短了。 */
.series-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:46px 30px;
    margin-top:6px;
}
.series-grid .series-card{
    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;
    display:flex;
    flex-direction:column;
}
.series-grid .series-image{
    height:auto !important;
    aspect-ratio:4 / 3;
}
.series-grid .series-info{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
}
.series-grid .series-desc{
    flex:1 1 auto;
    font-size:13.5px !important;
    line-height:1.75 !important;
}
@media (max-width:1199px){
    .series-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 24px; }
}
@media (max-width:767px){
    .series-grid{ grid-template-columns:1fr; gap:30px; }
    .series-grid .series-image{ aspect-ratio:16 / 10; }
}

/* ---------- 二、名画装裱 ----------
   老大问"名画滚动加框会不会好看"。会 —— 而且这才是本职：
   我们卖的就是装裱，画没框等于没上墙。
   但绝不能加粗金框（那是土豪金）。真实美术馆的做法是三层：
     框（深色/米白，14px）→ 卡纸内衬（金细线 1px）→ 画芯
   靠这三层的明度差出"厚度"，不是靠金色堆。 */
.series-grid,
.paintings-track{ --lx-frame-line: rgba(138,107,50,.34); }
html.dark .series-grid,
html.dark .paintings-track{ --lx-frame-line: rgba(201,165,94,.42); }
:root{ --lx-frame:#EFEAE0; }
html.dark{ --lx-frame:#15151B; }

/* 注意：main.css 4415/4444 行是 `.paintings-track .painting-card{...!important}`
   （双类 + !important），单类选择器压不住，必须用同等特异性 + 后加载。 */
.paintings-track .painting-card,
html.dark .paintings-track .painting-card{
    flex:0 0 252px !important;
    width:252px !important;
    height:352px !important;
    aspect-ratio:auto !important;
    box-sizing:border-box !important;
    border:14px solid var(--lx-frame) !important;
    background:var(--lx-frame) !important;
    box-shadow:
        0 18px 40px -18px rgba(0,0,0,.35),
        0 3px 8px rgba(0,0,0,.12) !important;
    transition:box-shadow .5s var(--lx-ease), border-color .5s var(--lx-ease) !important;
}
html.dark .paintings-track .painting-card{
    box-shadow:
        0 26px 60px -24px rgba(0,0,0,.9),
        0 4px 12px rgba(0,0,0,.6) !important;
}
.paintings-track .painting-card:hover{
    box-shadow:
        0 34px 74px -26px rgba(0,0,0,.5),
        0 6px 16px rgba(0,0,0,.16) !important;
}
html.dark .paintings-track .painting-card:hover{
    box-shadow:
        0 40px 90px -28px rgba(0,0,0,1),
        0 8px 20px rgba(0,0,0,.7),
        0 0 34px -14px rgba(201,165,94,.5) !important;
}
/* 卡纸内衬的那圈金线：画在画芯边缘内侧 */
.painting-card::after{
    content:'';
    position:absolute; inset:0; z-index:4;
    pointer-events:none;
    box-shadow:inset 0 0 0 1px var(--lx-frame-line);
}
/* 加框后画芯变窄，编号与说明的字距收紧一点更像展签 */
.painting-overlay h4{ letter-spacing:.01em; }

/* ---------- 三、字距：国际水准的隐形门槛 ----------
   英文小标签拉字距是印刷品的传统做法，一眼就显得"排版过"。 */
.section-label{ letter-spacing:.18em !important; }
.series-en,
.painting-en{ letter-spacing:.14em !important; }
.series-size{ letter-spacing:.04em; }
/* 所有编号用等宽数字，滚动/切换时不左右跳动 */
.series-num,
.painting-year,
.biz-stats b{ font-variant-numeric:tabular-nums; }

/* ============================================================
 * v5 · 首轮实看后的修正（2026-11-01）
 * ============================================================ */

/* ① 名画框太暗：原来 #15151B 跟背景 #0D0D11 只差 4 级亮度，
      站在三米外根本看不出"有框"。提亮一档，并把内衬金线提到可读。 */
html.dark{ --lx-frame:#1E1E28; }
/* 变量在 .paintings-track 上定义过，特异性更高，必须同级覆盖才生效 */
.paintings-track,
html.dark .paintings-track{ --lx-frame-line:rgba(201,165,94,.55); }
/* 画与画之间拉开，别挤成一条 */
.paintings-track{ gap:26px !important; }

/* ② 系列编号：产品图大多是白底，`01 / 06` 白字浮在白底上直接消失。
      改成深色实底 + 亮金，任何底色上都读得到。 */
html.dark .series-num{
    background:rgba(8,8,10,.86) !important;
    border-color:rgba(201,165,94,.45) !important;
    color:#E8D3A0 !important;
    backdrop-filter:none !important;
}

/* ③ 场景卡：副标一行两行不一致，导致「申请体验」上下错位。
      用 flex 把链接钉在底部，整排对齐。 */
.scenes-grid .scene-card{ display:flex; flex-direction:column; }
.scenes-grid .scene-info{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
}
.scenes-grid .scene-link{ margin-top:auto; padding-top:8px; }

/* ④ 首屏标题：48px 在 1440 宽下压不住画面，高级感来自大胆的字号对比。
      上限 66px + 收紧字距，左侧的黑就变成了"留白"而不是"空"。 */
@media (min-width:1200px){
    .hero-headline{
        font-size:clamp(48px,4.6vw,66px) !important;
        line-height:1.12 !important;
        letter-spacing:-.022em !important;
    }
}

/* ⑤ 所见即所得：左文右图中间空出 240px，两栏没咬住。
      调成 42% / 52%，让文字块撑开、图片略收，中间留 48px 呼吸。 */
.preview-promo-inner{ gap:48px !important; }
.preview-promo-inner .promo-copy{
    flex:0 0 42% !important;
    max-width:560px !important;
}
.preview-promo-inner .promo-visual{
    flex:0 0 52% !important;
    max-width:none !important;
}

/* ⑥ 场景大图也用同一套装裱语言（框 + 金线 + 投影）。
      三处呼应：首屏影像 / 名画 / 场景 —— 这就是"照应"。 */
.promo-visual-main{
    box-sizing:border-box !important;
    border:12px solid var(--lx-frame) !important;
    box-shadow:
        0 30px 70px -30px rgba(0,0,0,.55),
        0 4px 12px rgba(0,0,0,.12) !important;
}
html.dark .promo-visual-main{
    box-shadow:
        0 40px 90px -34px rgba(0,0,0,.95),
        0 6px 18px rgba(0,0,0,.6) !important;
}
/* 浮层也用方角 + 金线，与画框同族 */
html.dark .promo-visual-top{
    background:var(--bg-raise) !important;
    border:6px solid var(--bg-raise) !important;
    border-radius:0 !important;
}
/* 居中后 40% 宽会压住主图主体（床和墙上的画），收到 34% */
.promo-visual-top{ width:34% !important; }
/* 落位前不显形（.luxe-ready 只在 JS 成功时挂上，JS 挂了浮层照常可见） */
.luxe-ready .promo-visual-top:not(.lx-placed){ opacity:0; }
.promo-visual-top.lx-placed{ transition:opacity .5s ease; }

/* --- 首屏取景角标：四角金线，呼应"预览挂画"这个本职 ---
   顶部必须让开固定导航（约 68px），否则上两个角会被压在导航底下看不见。 */
.luxe-viewfinder{
    position:absolute; z-index:3; pointer-events:none;
    inset:78px 34px 30px 34px;
    opacity:.75;
}
.luxe-viewfinder i{
    position:absolute; width:26px; height:26px;
    border:0 solid rgba(201,165,94,.75);
    animation:lx-vf 5.5s ease-in-out infinite;
}
.luxe-viewfinder i:nth-child(1){ top:0; left:0; border-top-width:1px; border-left-width:1px; }
.luxe-viewfinder i:nth-child(2){ top:0; right:0; border-top-width:1px; border-right-width:1px; animation-delay:.35s; }
.luxe-viewfinder i:nth-child(3){ bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; animation-delay:.7s; }
.luxe-viewfinder i:nth-child(4){ bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; animation-delay:1.05s; }
@keyframes lx-vf{
    0%,100%{ opacity:.5; }
    50%{ opacity:1; }
}
@media (max-width:768px){ .luxe-viewfinder{ inset:66px 16px 16px 16px; } .luxe-viewfinder i{ width:18px; height:18px; } }

/* ============================================================
 * ③ 秩序层：滚动揭示
 * ------------------------------------------------------------
 * 关键健壮性设计：默认完全可见。只有 JS 成功执行、
 * 且浏览器支持 IO 且用户没开减弱动效时，html 才加 .luxe-ready，
 * 此时才隐藏待揭示元素。JS 一旦失败 → 页面仍是完整的。
 * ============================================================ */
.luxe-ready .rv{
    opacity:0;
    transform:translateY(22px);
    transition:
        opacity .78s var(--lx-ease-out),
        transform .78s var(--lx-ease-out);
    transition-delay:calc(var(--rv-i, 0) * 70ms);
    will-change:opacity, transform;
}
.luxe-ready .rv.in{
    opacity:1;
    transform:none;
    will-change:auto;
}
/* 卡片从略下方 + 微缩进入，比纯位移更有"落定感" */
.luxe-ready .rv-card{
    transform:translateY(28px) scale(.985);
}
.luxe-ready .rv-card.in{ transform:none; }

@media (prefers-reduced-motion: reduce){
    .luxe-ready .rv,
    .luxe-ready .rv-card{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* --- 区块标题前的「生长金线」---
   滚动到该区块时，一条 76px 的金线从左展开。成本极低，
   但它给了每个区块一个"开场动作"，这是节奏感的来源。 */
.section-header{ position:relative; }
.section-header::before{
    content:'';
    position:absolute; left:0; top:-14px;
    width:76px; height:1px;
    background:linear-gradient(90deg,var(--lx-gold-3),rgba(201,165,94,.05));
    transform-origin:0 50%;
    transition:transform 1.05s var(--lx-ease-out) .06s;
}
/* 反向写：默认是展开态，只有真正挂了 reveal 且还没进入时才收起 ——
   这样 JS 失败时金线照常显示，不会消失。 */
.luxe-ready .section-header:not(.in)::before{ transform:scaleX(0); }

/* --- 区块顶部微光：让区块之间"亮进来"，而不是硬切一道黑边 --- */
html.dark .scenes-section,
html.dark .paintings-section,
html.dark .series-section,
html.dark .apply-preview{ position:relative; }
html.dark .scenes-section::before,
html.dark .paintings-section::before,
html.dark .series-section::before,
html.dark .apply-preview::before{
    content:'';
    position:absolute; top:0; left:0; right:0; height:140px;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(201,165,94,.045),transparent);
}

/* ============================================================
 * v4 · 板块版式统一（老大："各自为战，没意思，不高级"）
 * ------------------------------------------------------------
 * 诊断（实测值）：七个区块的上下留白是
 *   series 100 / paintings 100 / scenes 100 / preview 56 / apply 96
 *   / faq 56·72 / biz 74
 * —— 七套节奏。眼睛读到的是"七个人各写一段"，不是"一本书"。
 *
 * 三件事让它变成一本书：
 *   ① 一个留白节拍（桌面 108 / 平板 88 / 手机 56）；
 *   ② 一套标题结构（label → 14px → title → 52px → 内容）；
 *   ③ 每个区块顶部同一条起跑金线（章节分隔，位置一致）。
 * 不改 HTML，全部 CSS 覆盖。
 * ============================================================ */
@media (min-width: 1200px){
    .series-section,
    .paintings-section,
    .scenes-section,
    .preview-promo,
    .apply-preview,
    .faq-section,
    .biz-banner{
        padding-top:108px !important;
        padding-bottom:108px !important;
    }
}
@media (min-width: 769px) and (max-width: 1199px){
    .series-section,
    .paintings-section,
    .scenes-section,
    .preview-promo,
    .apply-preview,
    .faq-section,
    .biz-banner{
        padding-top:88px !important;
        padding-bottom:88px !important;
    }
}
@media (max-width: 768px){
    .series-section,
    .paintings-section,
    .scenes-section,
    .preview-promo,
    .apply-preview,
    .faq-section,
    .biz-banner{
        padding-top:56px !important;
        padding-bottom:56px !important;
    }
}

/* 统一标题结构：label → 14 → title → 52 → 内容。
   原来 .section-title 自带 40px 下边距、.section-header-row 又 40px、
   .section-header 60px 再叠一次，实际间距每个区块都不一样。 */
.section-header{ margin-bottom:52px !important; }
.section-label{ margin-bottom:14px !important; }
.section-header-row{ margin-bottom:0 !important; align-items:flex-end !important; }
.section-title{ margin-bottom:0 !important; }

/* 单元内的两栏一律垂直居中（原 preview-promo 只在中段对齐，
   右图比文案高，底部空一大块，看着"没落位"） */
.preview-promo-inner,
.biz-banner .biz-inner{ align-items:center !important; }

/* 起跑金线：每节顶部一条同起点、同长度的金线 + 一片渐隐微光，
   这是"章节分隔"的统一语言。亮色下也需要，只是更淡。 */
.series-section,
.paintings-section,
.scenes-section,
.preview-promo,
.apply-preview,
.faq-section,
.biz-banner{ position:relative; }
.series-section::after,
.paintings-section::after,
.scenes-section::after,
.preview-promo::after,
.apply-preview::after,
.faq-section::after,
.biz-banner::after{
    content:'';
    position:absolute; top:0; left:0; right:0; height:1px;
    pointer-events:none;
    background:linear-gradient(90deg,
        rgba(138,107,50,.32) 0%,
        rgba(138,107,50,.12) 38%,
        transparent 72%);
}
html.dark .series-section::after,
html.dark .paintings-section::after,
html.dark .scenes-section::after,
html.dark .preview-promo::after,
html.dark .apply-preview::after,
html.dark .faq-section::after,
html.dark .biz-banner::after{
    background:linear-gradient(90deg,
        rgba(201,165,94,.42) 0%,
        rgba(201,165,94,.14) 38%,
        transparent 72%);
}

/* --- 暗色可读性修正 ---
   上一版描述文字 #8E8880 / 10~11px 挤在 #131318 上，读着累。
   "高级"的第一要素是从容，不是小而灰。这里只提亮不改字号，避免破版。 */
html.dark .series-desc,
html.dark .scene-desc,
html.dark .painting-desc{ color:#9E978D !important; }
html.dark .section-note{ color:#9A948B !important; }
html.dark .pcs-note{ color:#8C867F !important; }
html.dark .scene-link{ color:#C4AC79 !important; }

/* --- 网格呼吸：桌面把间距从 24 放到 30，卡片不再挤成一排表格 --- */
@media (min-width:1200px){
    .scenes-grid{ gap:30px !important; }
}

/* --- 顶部滚动进度金线 --- */.luxe-progress{
    position:fixed; top:0; left:0; right:0; height:2px;
    z-index:400; pointer-events:none;
    background:linear-gradient(90deg,var(--lx-gold-1),var(--lx-gold-3) 55%,var(--lx-gold-4));
    transform:scaleX(0);
    transform-origin:0 50%;
    opacity:0;
    transition:opacity .3s ease;
    box-shadow:0 0 12px rgba(201,165,94,.55);
}
.luxe-progress.on{ opacity:1; }

/* --- 导航滚动后加深 + 收薄（"沉下去"的感觉） --- */
.site-header{
    transition:background-color .4s ease, box-shadow .4s ease, padding .4s var(--lx-ease);
}
body.luxe-scrolled .site-header{
    box-shadow:0 12px 34px rgba(0,0,0,.10);
}
html.dark body.luxe-scrolled .site-header{
    background:rgba(8,8,10,.92) !important;
    box-shadow:0 14px 40px rgba(0,0,0,.65), 0 1px 0 rgba(201,165,94,.18);
}

/* ============================================================
 * ④ 手感层
 * ============================================================ */

/* --- 首屏入场：标题用"遮罩揭幕"（从下被擦出），比单纯淡入高一档 --- */
@keyframes lx-reveal-mask{
    from{ clip-path:inset(0 0 105% 0); transform:translateY(14px); opacity:0; }
    to{ clip-path:inset(0 0 -5% 0); transform:none; opacity:1; }
}
@keyframes lx-up{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:none; }
}
@keyframes lx-media-in{
    from{ opacity:0; transform:translateY(26px) scale(.97); }
    to{ opacity:1; transform:none; }
}
.hero-kicker{ animation:lx-up .7s var(--lx-ease-out) .05s both; }
.hero-headline{ animation:lx-reveal-mask .95s var(--lx-ease-out) .16s both; }
.hero-lead{ animation:lx-up .8s var(--lx-ease-out) .42s both; }
.hero-actions{ animation:lx-up .8s var(--lx-ease-out) .54s both; }
.hero-media{ animation:lx-media-in 1s var(--lx-ease-out) .3s both; }

/* --- 按钮：按下回弹（过冲曲线，手感像按到实体） --- */
.btn-primary,
.btn-outline,
.pcs-submit,
.biz-btn{
    transition:transform .34s var(--lx-spring), box-shadow .34s ease, background-color .3s ease, border-color .3s ease, color .3s ease;
    will-change:transform;
}
.btn-primary:active,
.btn-outline:active,
.pcs-submit:active,
.biz-btn:active{ transform:scale(.965); }
@media (hover:hover){
    .btn-primary:hover,
    .pcs-submit:hover,
    .biz-btn:hover{ transform:translateY(-2px); }
    .btn-outline:hover{ transform:translateY(-2px); }
}

/* --- 导航：下划线从左侧生长 --- */
.main-nav a,
.nav-link{ position:relative; }
.main-nav a::after,
.nav-link::after{
    content:'';
    position:absolute; left:0; bottom:-6px;
    width:100%; height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:0 50%;
    transition:transform .42s var(--lx-ease-out);
    opacity:.75;
}
.main-nav a:hover::after,
.nav-link:hover::after,
.main-nav a.active::after,
.main-nav a.current-menu-item::after{ transform:scaleX(1); }

/* --- 卡片内文字微升：hover 时标题与箭头一起"往前一步" --- */
.series-name,
.scene-name,
.painting-name{ transition:color .3s ease, transform .45s var(--lx-ease); }
.series-card:hover .series-name,
.scene-card:hover .scene-name,
.painting-card:hover .painting-name{ transform:translateX(3px); }

/* --- 链接箭头右移 --- */
.series-link,
.scene-link,
.painting-link,
.paintings-more{
    display:inline-block;
    transition:color .3s ease, transform .4s var(--lx-ease);
}
.series-card:hover .series-link,
.scene-card:hover .scene-link,
.painting-card:hover .painting-link{ transform:translateX(4px); }

/* --- 图片微缩放：hover 时内容轻微推近，制造纵深 --- */
.series-image img,
.scene-image img,
.painting-card > img{
    transition:transform 1.1s var(--lx-ease-out), filter .6s ease;
    will-change:transform;
}
@media (hover:hover){
    .series-card:hover .series-image img,
    .scene-card:hover .scene-image img,
    .painting-card:hover > img{ transform:scale(1.045); }
}

/* ============================================================
 * 降级：触屏 / 减弱动效 / 小屏
 * ============================================================ */
@media (hover:none){
    .luxe-glow{ display:none !important; }
    .series-card::before,
    .scene-card::before,
    .painting-card::before{ display:none; }
}
@media (prefers-reduced-motion: reduce){
    .luxe-glow,
    .hero-section::before{ display:none !important; }
    .luxe-metal-text,
    .section-label,
    .btn-primary::after,
    .pcs-submit::after,
    .biz-btn::after,
    .luxe-viewfinder i,
    .hero-kicker,
    .hero-headline,
    .hero-lead,
    .hero-actions,
    .hero-media{
        animation:none !important;
    }
    .luxe-metal-text,
    .section-label{
        -webkit-text-fill-color:currentColor;
        color:inherit;
        background:none;
    }
    *{ transition-duration:.001ms !important; }
}
@media (max-width:768px){
    body::after{ opacity:.03; }
    .luxe-progress{ height:2px; }
}

/* ============================================================
 * v6 · 2026-11-01 老大第四轮四件事
 *   ① 名画用真·立体框（素材 H:\毕加索产品\框\胡桃木纹.png）
 *   ② 家居场景 一行四个
 *   ③ 首屏视频下移，露出左右上方金线直角
 *   ④ 两个板块加背景 + 视差；城市授权板块重排（中间太空）
 * ============================================================ */

/* ---------- ① 名画：真·立体画框 ----------
 * 上一版是 CSS 画的 14px 素框 + 1px 金线 —— 平的，只是"加了条边"。
 * 本次直接用实拍画框 PNG（透明画芯 + 木纹倒角 + 自带高光阴影）：
 *   卡片背景铺满画框（stretch 到卡片尺寸），画芯按画框开口比例内缩。
 * 开口实测（640×958 源图）：左 8.281% 右 7.969% 上/下 5.532%
 * 卡片 282×392 → 画框厚 23/22px、开口 236×349，与 2:3 画框拉伸 7% 后的
 * 视觉厚度一致，不会出现"框边忽粗忽细"。
 * 性能：PNG 230KB 太肥，同时出 WebP 19KB，image-set 优先 WebP，老浏览器回退 PNG。 */
.paintings-track .painting-card,
html.dark .paintings-track .painting-card{
    flex:0 0 282px !important;
    width:282px !important;
    height:392px !important;
    aspect-ratio:auto !important;
    box-sizing:border-box !important;
    border:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:transparent url('../images/frames/frame-walnut.png') center / 100% 100% no-repeat !important;
    background-image:image-set(
        url('../images/frames/frame-walnut.webp') type('image/webp'),
        url('../images/frames/frame-walnut.png') type('image/png')
    ) !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:100% 100% !important;
    box-shadow:0 26px 46px -22px rgba(0,0,0,.42), 0 6px 16px rgba(0,0,0,.16) !important;
}
html.dark .paintings-track .painting-card{
    box-shadow:0 30px 58px -24px rgba(0,0,0,.92), 0 6px 18px rgba(0,0,0,.6) !important;
}
.paintings-track .painting-card:hover,
html.dark .paintings-track .painting-card:hover{
    box-shadow:0 34px 66px -26px rgba(0,0,0,.58), 0 8px 22px rgba(0,0,0,.24) !important;
}
html.dark .paintings-track .painting-card:hover{
    box-shadow:0 38px 76px -26px rgba(0,0,0,1), 0 8px 22px rgba(0,0,0,.7),
               0 0 40px -16px rgba(201,165,94,.5) !important;
}
/* 旧的金线内衬退场（画框自带内倒角金线） */
.paintings-track .painting-card::after{ content:none !important; }

/* 画芯：严格贴在画框开口里 */
.paintings-track .painting-card > img,
html.dark .paintings-track .painting-card > img{
    position:absolute !important;
    left:8.281% !important;
    top:5.532% !important;
    width:83.75% !important;
    height:88.936% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center !important;
    transform:none !important;
    transition:none !important;
}
/* hover 时不再放大画芯 —— 一放就会盖住画框内倒角，立体感当场消失。
   改为整幅轻微上浮 + 画框受光（由 luxe.js 的 3D 倾斜与投影负责）。 */
.paintings-track .painting-card:hover > img{ transform:none !important; }

/* 展签也收进开口里，不然会被下框边切掉 */
.paintings-track .painting-card .painting-overlay{
    left:8.281% !important;
    right:7.969% !important;
    top:5.532% !important;
    bottom:5.532% !important;
    padding:14px 12px !important;
}
.paintings-track .painting-card .painting-overlay h4{ font-size:15px !important; }
.paintings-track .painting-card .painting-en{ font-size:9px !important; }
.paintings-track .painting-card .painting-year{ font-size:10.5px !important; }

/* 顺手修一处旧账：轨道间距从 14px 改到 26px 后，
   循环动画的位移还按旧间距算（-50% - 10px），每圈会跳 3px。
   无缝循环的正确位移是 -(半宽 + 半个 gap) → gap 26 时是 -13px。 */
@keyframes scroll-left{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(calc(-50% - 13px)); }
}

/* 画框边缘渐隐：一眼看出"右边还有"，比硬切一条整齐得多 */
@media (min-width:769px){
    .paintings-scroll{
        -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 34px), transparent 100%);
        mask-image:linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 34px), transparent 100%);
    }
}

/* 取景角标加重：26px/0.75 的白金细线在黑底上几乎看不见，
   下移之后必须"看得见"才有意义 —— 加到 32px、提亮、加一层柔光。 */
.luxe-viewfinder i{
    width:32px !important;
    height:32px !important;
    border-color:rgba(176,143,78,.92) !important;
    filter:drop-shadow(0 0 7px rgba(201,165,94,.22));
}
html.dark .luxe-viewfinder i{
    border-color:rgba(228,206,155,.86) !important;
    filter:drop-shadow(0 0 8px rgba(201,165,94,.30));
}

/* ---------- ② 家居场景：一行四个 ----------
 * 桌面 4 列 × 2 行 = 8 张（原来 5 列 10 张，单张只有 258px，图和字都挤）。
 * 断点同步收：1199↓ 3 列 6 张 / 899↓ 2 列 4 张；PHP 的 is-extra 阈值同步改 8。
 * 「查看更多」按钮上的数字由 JS 按 offsetParent 实时算，不用改。 */
.scenes-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:28px 28px !important;
}
.scenes-grid:not(.expanded) .scene-card:nth-child(n+9){ display:none; }
@media (max-width:1199px){
    .scenes-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:22px !important; }
    .scenes-grid:not(.expanded) .scene-card:nth-child(n+7){ display:none; }
}
@media (max-width:899px){
    .scenes-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:16px !important; }
    .scenes-grid:not(.expanded) .scene-card:nth-child(n+5){ display:none; }
}
@media (max-width:599px){
    .scenes-grid{ gap:12px !important; }
}

/* ---------- ③ 首屏视频下移，露出金线直角 ----------
 * 老大："顶部视频挤在右上角，向下移动，露出左右上面那个金线直角"。
 * 根因测量：视频盒顶 y=56px，固定导航高 83px —— 视频顶边钻到导航底下，
 * 取景角标的顶边在 y=78（同样被导航压住），四个角只剩下面两个看得见。
 * 修法：整段内容下移到 132px（导航下方留 49px 空气），
 * 角标顶边提到 96px —— 左右两个上角完整露在视频上方，
 * 视频成了"被取景框框住的一件作品"，而不是贴在天花板上的一块。 */
@media (min-width:901px){
    .hero-wrap{ padding-top:136px !important; }
    .luxe-viewfinder{ inset:96px 15px 28px 15px; }
}
/* 手机上顶部固定导航是 display:none（改用底部 Tab），
   所以不用给 83px 让位，只留出取景框自身的呼吸即可。 */
@media (max-width:900px){
    .hero-wrap{ padding-top:84px !important; }
    .luxe-viewfinder{ inset:32px 16px 18px 16px; }
}

/* ---------- ④ 背景 + 视差 ----------
 * 选两个位置：名画区（空墙等画的地方）+ 城市授权区（走进你城市的那家店）。
 * 三层叠出纵深，两层动速不同 —— 这才是"视差"，不是一张图钉死：
 *   层1 摄影底：糊到只剩光影，慢速（rate .075）
 *   层2 金点阵：清晰，双倍速（rate .17）—— 快慢差产生透视错觉
 *   层3 暗角/渐隐：把内容压在上面，保证文字对比度不受背景影响
 * 图片不进首屏：JS 在距视口 800px 时才挂 background-image。 */
.luxe-par-host{ position:relative !important; overflow:hidden !important; }
.luxe-par-host > .container{ position:relative; z-index:2; }

.luxe-par{
    position:absolute; inset:-18% -8%; z-index:0;
    pointer-events:none;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    filter:blur(20px) saturate(.88) brightness(.66);
    opacity:0;
    transition:opacity 1.4s ease;
    will-change:transform;
}
.luxe-par.on{ opacity:1; }
.luxe-par::after{
    content:'';
    position:absolute; inset:0;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(10,10,12,.24), rgba(10,10,12,.78) 62%, #0A0A0C 100%),
        linear-gradient(180deg, #0A0A0C 0%, transparent 20%, transparent 80%, #0A0A0C 100%);
}
html:not(.dark) .luxe-par{
    filter:blur(28px) saturate(.72) brightness(1.22);
    opacity:0;
}
html:not(.dark) .luxe-par.on{ opacity:.42; }
html:not(.dark) .luxe-par::after{
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.55), rgba(255,255,255,.86) 58%, #fff 100%),
        linear-gradient(180deg, #fff 0%, transparent 20%, transparent 80%, #fff 100%);
}

/* 层2：金点阵（快层） */
.luxe-par-grid{
    position:absolute; inset:-12% -5%; z-index:1;
    pointer-events:none;
    background-image:radial-gradient(rgba(201,165,94,.62) 1px, transparent 1.6px);
    background-size:26px 26px;
    background-position:center;
    opacity:0;
    transition:opacity 1.4s ease;
    will-change:transform;
    -webkit-mask-image:radial-gradient(96% 84% at 50% 44%, #000 0%, rgba(0,0,0,.45) 56%, transparent 84%);
    mask-image:radial-gradient(96% 84% at 50% 44%, #000 0%, rgba(0,0,0,.45) 56%, transparent 84%);
}
.luxe-par-grid.on{ opacity:.15; }

/* 名画区：背景压得更狠一点，别跟画抢 */
.paintings-section .luxe-par::after{
    background:
        radial-gradient(120% 100% at 50% 18%, rgba(10,10,12,.30), rgba(10,10,12,.80) 64%, #0D0D11 100%),
        linear-gradient(180deg, #0D0D11 0%, rgba(13,13,17,.35) 20%, rgba(13,13,17,.35) 82%, #0D0D11 100%);
}
html:not(.dark) .paintings-section .luxe-par::after{
    background:
        radial-gradient(120% 100% at 50% 20%, rgba(255,255,255,.66), rgba(255,255,255,.9) 62%, #fff 100%),
        linear-gradient(180deg, #fff 0%, transparent 22%, transparent 80%, #fff 100%);
}

/* 城市授权区：背景要"看得见"才叫背景。
   上一版把整层压到 brightness .46 + 0.84 暗角，等于黑底加噪点 ——
   老大说的"中间太空"依然空。
   改法：只把中间那条留亮（左右两边是文案和数据，必须压暗保可读），
   于是"空"的地方变成一张被打亮的内景，其余仍是墨色。 */
.biz-banner .luxe-par{
    filter:blur(16px) saturate(.95) brightness(.86);
}
.biz-banner .luxe-par::after{
    background:
        linear-gradient(90deg,
            rgba(7,7,9,.97) 0%,
            rgba(7,7,9,.88) 16%,
            rgba(7,7,9,.46) 34%,
            rgba(7,7,9,.14) 50%,
            rgba(7,7,9,.40) 66%,
            rgba(7,7,9,.90) 86%,
            rgba(7,7,9,.98) 100%),
        linear-gradient(180deg, #070709 0%, rgba(7,7,9,.35) 14%, rgba(7,7,9,.35) 84%, #070709 100%);
}
html:not(.dark) .biz-banner .luxe-par{
    filter:blur(16px) saturate(.88) brightness(1.12);
}
html:not(.dark) .biz-banner .luxe-par::after{
    background:
        linear-gradient(90deg,
            rgba(27,26,23,.94) 0%,
            rgba(27,26,23,.80) 18%,
            rgba(27,26,23,.38) 40%,
            rgba(27,26,23,.16) 52%,
            rgba(27,26,23,.44) 70%,
            rgba(27,26,23,.90) 90%,
            rgba(27,26,23,.95) 100%),
        linear-gradient(180deg, #1B1A17 0%, rgba(27,26,23,.4) 14%, rgba(27,26,23,.4) 84%, #1B1A17 100%);
}

/* 降级：减弱动效 / 省流模式一律不要背景层（省下载也省 GPU） */
@media (prefers-reduced-motion: reduce){
    .luxe-par, .luxe-par-grid{ display:none !important; }
}

/* ============================================================
 * ⑤ 城市授权板块重排（老大："中间太空"）
 * ------------------------------------------------------------
 * 实测病灶：biz-inner 是 flex，左文案到 x≈400 就结束，右数据块从
 * x≈810 才开始 —— 中间 410px 纯空；数据三格横排只占 200px 高，
 * 整段 471px 高，底部再空 140px。两块内容各站一边，中间是"洞"。
 *
 * 两版都没救活的原因：文案只有 ~540px 宽，数据只有 ~260px 宽，
 * 而容器有 1410px —— 任何"左一块右一块"的排法，中间必然留洞。
 *
 * 所以换成"整幅"排法（国际杂志长用的 editorial 结构）：
 *   上排：标题/说明贴左，CTA 钉右下（同一行，横向铺满）
 *   下排：三格数据条横贯全宽，一条金线压顶，格间竖细线
 * 于是没有"中间"可以空 —— 内容自己把宽度用满了。
 * 数据也顺手改成「数值在上、标签在下」，比原来左值右标更像价目表。 */
@media (min-width:901px){
    .biz-banner{ position:relative; overflow:hidden; }
    .biz-banner .biz-inner{
        display:grid !important;
        grid-template-columns:minmax(0, 1fr) !important;
        row-gap:44px !important;
        flex-wrap:nowrap !important;
        position:relative;
    }
    /* 上排：文案 + CTA 同排 */
    .biz-banner .biz-copy{
        grid-column:1; grid-row:1;
        display:grid !important;
        grid-template-columns:minmax(0, 1fr) auto;
        column-gap:54px;
        align-items:end;
        max-width:none !important;
        flex:none !important;
        position:relative; z-index:2;
    }
    .biz-banner .biz-copy > .biz-tag{
        grid-column:1; grid-row:1;
        justify-self:start;
        margin-bottom:18px;
    }
    .biz-banner .biz-copy > h2{ grid-column:1; grid-row:2; }
    .biz-banner .biz-copy > p{ grid-column:1; grid-row:3; }
    .biz-banner .biz-copy > .biz-acts{
        grid-column:2; grid-row:2 / span 2;
        align-self:end;
        justify-self:end;
        margin-top:0 !important;
        flex-wrap:nowrap !important;
    }
    .biz-banner h2{
        font-size:clamp(32px, 3.6vw, 50px) !important;
        line-height:1.22 !important;
        letter-spacing:.005em !important;
    }
    .biz-banner p{ max-width:34em; }

    /* 下排：三格数据条横贯全宽 */
    .biz-banner .biz-stats{
        grid-column:1; grid-row:2;
        display:grid !important;
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
        gap:0 !important;
        width:100% !important;
        background:none !important;
        border:0 !important;
        border-top:1px solid rgba(201,165,94,.22) !important;
        position:relative; z-index:2;
    }
    .biz-banner .biz-stats div,
    html.dark .biz-banner .biz-stats div{
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        justify-content:flex-start !important;
        gap:9px !important;
        padding:26px 0 0 0 !important;
        border:0 !important;
        border-left:1px solid rgba(201,165,94,.14) !important;
        background:transparent !important;
        text-align:left !important;
    }
    .biz-banner .biz-stats div:first-child{ border-left:0 !important; }
    .biz-banner .biz-stats div:nth-child(2),
    .biz-banner .biz-stats div:nth-child(3){ padding-left:36px !important; }
    .biz-banner .biz-stats b{
        font-size:clamp(24px, 2.4vw, 34px) !important;
        line-height:1.05 !important;
        letter-spacing:.01em !important;
    }
    .biz-banner .biz-stats span{
        margin:0 !important;
        text-align:left !important;
        white-space:nowrap;
        letter-spacing:.12em;
    }
}
/* 背景照片压在极暗的墨上，保证正文对比度不掉（正文仍在 #A9A091 一档） */
.biz-banner .biz-copy,
.biz-banner .biz-stats{ text-shadow:0 1px 24px rgba(0,0,0,.55); }