/* ============ Apple 风设计系统 ============ */
:root{
  --blue:#2997ff;                      /* 品牌蓝：只用于实心块 / 强调描边 / 光效 */
  --blue-txt:#8ec8ff;                  /* 蓝色文字（暗底） */
  --blue-txt-hi:#d9ecff;               /* 蓝色文字（压在影像上 / 正文级链接），保证可读 */
  --chip-bg:rgba(6,12,24,.80);         /* 蓝色小标签的统一深底 */
  --chip-line:rgba(126,195,255,.46);   /* 蓝色小标签的统一描边 */
  --ink:#f7f8fa;
  --ink-2:rgba(247,248,250,.72);      /* 正文次级：整体提亮一档 */
  --ink-3:rgba(247,248,250,.60);
  --line:rgba(247,248,250,.13);
  --glass:rgba(255,255,255,.075);
  --bg:#05070d;                        /* 全站基底：深蓝黑，比纯黑更透气 */
  --ease:cubic-bezier(.28,.11,.32,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 微信适配之前的老架构：文档本身不滚，滚动交给内层 #feed。
   文档不滚就不会被 iOS / 微信记住"上次那一屏"，进站永远从主页开始。 */
html{overflow:hidden;height:100%}
html::-webkit-scrollbar{display:none;width:0;height:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",
              "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow:hidden;height:100%;letter-spacing:-.01em;
}

/* ---------- 滚动容器：scroll-snap ---------- */
#feed{
  height:100vh;height:100dvh;
  overflow-y:scroll;overflow-x:hidden;
  scroll-snap-type:y mandatory;overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
#feed::-webkit-scrollbar{display:none;width:0;height:0}
section{
  position:relative;
  /* 用容器百分比而不是 vh：保证"一屏 = 一个吸附点"，不会被地址栏高度差拖偏 */
  height:100%;
  scroll-snap-align:start;scroll-snap-stop:always;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
/* 过场占位屏：不产生吸附点，只负责提供"手指推多少演多少"的滚动行程。
   它自己是空的 —— 画面全在 fixed 的 #dj 上画，这里露出的是 #feed 的纸底和网点。
   160% 是行程预算：推入吃掉 1 屏，三级跳摊到 1.3 屏，手机上约莫滑两次走完。 */
.sepSec{scroll-snap-align:none;scroll-snap-stop:normal;height:160%}
/* 过场期间临时放掉吸附：mandatory 会把中间态一口吸走，进度就没得读了。
   滑到两端（q≈0 或 q≈1）时 JS 会摘掉这个类，十屏"一下一屏"的手感原样保留。 */
#feed.nosnap{scroll-snap-type:none}
/* 溢出屏底部渐隐提示：内容还没滑到底时亮起（dense / calm / fac / 末屏，由 JS 挂 .wf），
   暗示下面还有、顺便把被联系条切一半的字柔化掉；滑到底自动消失，不遮内容 */
#feed section .wfade{position:absolute;left:0;right:0;bottom:0;height:88px;pointer-events:none;
  opacity:0;transition:opacity .35s var(--ease);z-index:2;
  background:linear-gradient(rgba(251,244,230,0),rgba(251,244,230,.94) 72%)}
#feed section.wf .wfade{opacity:1}

/* ---------- 视差图层 ---------- */
.p-layer{position:absolute;inset:-14% -8%;z-index:0;will-change:transform;
  transform:translate3d(calc(var(--gx,0px) * 1.25),calc(var(--py,0px) + var(--gy,0px) * 1.25),0)}
/* 体感深度层：--d 为景深系数，跟随陀螺仪/鼠标做多层次偏移 */
[data-d]{transform:translate3d(calc(var(--gx,0px) * var(--d,0)),calc(var(--gy,0px) * var(--d,0)),0);
  will-change:transform}
.bgfill{position:absolute;inset:0}
.bgfill video{width:100%;height:100%;object-fit:cover;filter:saturate(.76) contrast(1.02) brightness(.96)}
.vidwrap{position:absolute;inset:0;overflow:hidden}
.vidwrap video.bg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;
  filter:blur(56px) saturate(.92) brightness(.56);transform:scale(1.2)}
.vidwrap video.main{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:brightness(.97)}
.aura{position:absolute;inset:0;background:
  radial-gradient(120% 80% at 50% 8%,rgba(52,158,255,.30),transparent 64%),
  radial-gradient(90% 60% at 88% 92%,rgba(110,190,255,.20),transparent 62%),
  #060a12;}
.fade{position:absolute;left:0;right:0;height:18%;z-index:1;pointer-events:none}
.fade.t{top:0;background:linear-gradient(#05070d,transparent)}
.fade.b{bottom:0;background:linear-gradient(transparent,#05070d)}
.scrim{position:absolute;inset:-6%;z-index:2;pointer-events:none;
  transform:translate3d(calc(var(--gx,0px) * -.45),calc(var(--gy,0px) * -.45),0);
  background:
    radial-gradient(58% 42% at 50% 52%,rgba(0,0,0,.46),transparent 74%),
    radial-gradient(90% 70% at 50% 50%,rgba(0,0,0,.20),rgba(0,0,0,.62))}
.grid{position:absolute;inset:-6%;z-index:3;pointer-events:none;opacity:.19;
  transform:translate3d(calc(var(--gx,0px) * .7),calc(var(--gy,0px) * .7),0);
  background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 78%)}

/* ---------- 内容层 ---------- */
.wrap{position:relative;z-index:6;width:100%;max-width:1120px;padding:0 40px;text-align:center}
/* 文字压在动态画面上：统一加深色投影 + 半透明黑底衬，保证任何画面下都读得清 */
.wrap{text-shadow:0 2px 18px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.7)}
.eyebrow{display:inline-block;font-size:clamp(12.5px,1.15vw,13.5px);letter-spacing:.22em;
  text-transform:uppercase;font-weight:700;margin-bottom:22px;
  color:var(--blue-txt-hi);background:var(--chip-bg);border:1px solid var(--chip-line);
  padding:8px 18px;border-radius:100px;
  backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);
  text-shadow:0 1px 6px rgba(0,0,0,.95),0 0 18px rgba(41,151,255,.35);
  box-shadow:0 6px 22px rgba(0,0,0,.28);
  opacity:0;transform:translateY(18px);transition:1s var(--ease)}
.h1{font-size:clamp(46px,10.5vw,132px);line-height:.98;font-weight:700;letter-spacing:-.045em;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.88),0 1px 4px rgba(0,0,0,.75);
  opacity:0;transform:translateY(34px);transition:1.1s var(--ease)}
.h2{font-size:clamp(19px,2.6vw,34px);line-height:1.34;font-weight:600;letter-spacing:-.015em;
  color:#eef2f8;margin-top:20px;
  text-shadow:0 2px 16px rgba(0,0,0,.9),0 1px 4px rgba(0,0,0,.75);
  opacity:0;transform:translateY(26px);transition:1.1s var(--ease)}
.hair{width:56px;height:3px;margin:30px auto 0;border-radius:3px;
  background:linear-gradient(90deg,transparent,#4da3ff,transparent);
  box-shadow:0 0 14px rgba(41,151,255,.75);  opacity:0;transform:scaleX(.3);transition:1.1s var(--ease)}
section.in .eyebrow,section.in .h1,section.in .h2,section.in .hair{opacity:1;transform:none}
section.in .h1{transition-delay:.10s}
section.in .h2{transition-delay:.20s}
section.in .hair{transition-delay:.36s}

/* ---------- 媒体报道背书卡 ---------- */
.press{margin:32px auto 0;max-width:880px;display:block;text-decoration:none;
  padding:26px 30px;border-radius:22px;position:relative;
  background:linear-gradient(135deg,rgba(18,33,56,.82),rgba(9,16,29,.70));
  border:1px solid rgba(126,195,255,.36);
  backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  opacity:0;transform:translateY(30px);transition:1.1s var(--ease),box-shadow .5s var(--ease)}
section.in .press{opacity:1;transform:none;transition-delay:.3s}
.press:hover{box-shadow:0 28px 84px rgba(41,151,255,.26)}
.press .pl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.press .ptag{font-size:11.5px;letter-spacing:.14em;font-weight:700;color:var(--blue-txt-hi);
  padding:6px 14px;border-radius:100px;background:var(--chip-bg);
  border:1px solid var(--chip-line);white-space:nowrap;
  text-shadow:0 1px 5px rgba(0,0,0,.9)}
.press .psrc{font-size:11.5px;letter-spacing:.04em;color:rgba(232,240,250,.76);
  text-shadow:0 1px 6px rgba(0,0,0,.8)}
.press .ptitle{font-size:clamp(15px,1.7vw,20px);font-weight:600;color:#fff;margin-top:16px;
  line-height:1.5;letter-spacing:-.015em}
.press .pmeta{font-size:12.5px;color:rgba(232,240,250,.76);margin-top:10px;line-height:1.68}
.press .pgo{margin-top:16px;font-size:12.5px;font-weight:700;color:var(--blue-txt-hi);
  display:inline-flex;align-items:center;gap:8px;padding-bottom:3px;
  border-bottom:1px solid rgba(126,195,255,.55);
  text-shadow:0 1px 6px rgba(0,0,0,.85),0 0 16px rgba(41,151,255,.35);
  transition:color .35s var(--ease),border-color .35s var(--ease)}
.press:hover .pgo{color:#fff;border-color:rgba(200,230,255,.9)}
.press .pgo span{transition:transform .45s var(--ease)}
/* 产品视觉这一屏的出口：海外那批内容都在英文站，这里给一个轻一点的入口 */
.ebrow{display:flex;align-items:center;gap:12px}
.csmore{display:inline-flex;align-items:center;gap:5px;
  text-decoration:none;font-size:11.5px;letter-spacing:.04em;
  color:#6B5A4C;transition:.3s var(--ease);text-shadow:none;
  border-bottom:1px solid transparent}
.csmore em{margin-left:2px}
.csmore em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.12em;
  color:var(--coral)}
.csmore .arw{font-style:normal;font-size:11px;color:rgba(59,46,39,.42);transition:.3s var(--ease)}
.csmore:hover{color:#1F1A15;border-bottom-color:var(--coral)}
.csmore:hover .arw{color:var(--coral);transform:translate(2px,-2px)}

.press:hover .pgo span{transform:translateX(6px)}
/* 案例屏里的紧凑版报道卡 */
.press.pin{margin:22px auto 0;max-width:640px;padding:18px 22px;border-radius:16px;text-align:left}
.press.pin .ptitle{font-size:clamp(14px,1.5vw,16.5px);margin-top:12px;line-height:1.55;
  /* 中文每个字都是断点，不写 balance 就会出现末行只剩一个字（「…银赛效/率」） */
  text-wrap:balance}
.press.pin .pmeta{font-size:11.5px;margin-top:8px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.press.pin .pdata{display:block;margin-top:6px;color:rgba(206,230,248,.92);letter-spacing:.01em}
.press.pin .pdata b{font-weight:700;color:#fff}
.press.pin .pdata i{font-style:normal;color:rgba(190,215,240,.62);margin:0 2px}
.press.pin .pgo{margin-top:12px;font-size:12.5px}
@media(max-width:640px){
  .press.pin{margin-top:14px;padding:13px 15px;border-radius:14px}
  .press.pin .ptitle{font-size:13.5px;margin-top:9px;line-height:1.5}
  .press.pin .pmeta{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
    overflow:hidden;font-size:11px;margin-top:7px;line-height:1.55}
  .press.pin .pdata{margin-top:5px}
  .press.pin .pdata .pd{display:block}
  .press.pin .pdata i{display:none}
  .press.pin .pl{gap:8px}
  .press.pin .ptag{font-size:10.5px;padding:5px 11px}
  .press.pin .psrc{font-size:10.5px}
  .press.pin .pgo{margin-top:10px;font-size:11.5px}
}
@media(max-width:640px){.press{padding:22px 22px;text-align:left}}
/* 双卡并排（联系屏） */
.endhead{margin-top:40px;font-size:11px;letter-spacing:.3em;text-indent:.3em;
  text-transform:uppercase;font-weight:700;color:rgba(206,238,252,.74);
  text-shadow:0 2px 14px rgba(0,0,0,.95),0 1px 4px rgba(0,0,0,.85)}
.presses{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:16px;margin:20px auto 0;max-width:1000px}
.presses .press{margin:0;max-width:none;text-align:left;
  /* 底色压实一点，避免背后的光球透上来干扰文字 */
  background:linear-gradient(135deg,rgba(12,24,44,.90),rgba(10,16,28,.86))}
@media(max-width:640px){.presses{grid-template-columns:1fr}}
.presses.one{grid-template-columns:minmax(0,560px);justify-content:center}
.endhead{transition-delay:.3s;opacity:0;transform:translateY(14px)}
section.in .endhead{opacity:1;transform:none}

/* ---------- 公司档案屏 ---------- */
/* 信息量大的屏缩小标题，避免内容顶出视口 */
section.dense .h1{font-size:clamp(34px,5.4vw,68px)}
h1.h1,h2.h2{font-weight:inherit}
section.dense .h2{font-size:clamp(15px,1.7vw,21px)}
section.dense .hair{margin-top:20px}
/* 文字密集的屏：光球淡下去，不抢正文 */
section.dense .orbs{opacity:.44}
.kv{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px auto 0;max-width:1000px}
.kvi{padding:18px 14px;border-radius:16px;text-align:center;
  background:rgba(255,255,255,.075);border:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  opacity:0;transform:translateY(22px);transition:.9s var(--ease)}
section.in .kvi{opacity:1;transform:none}
section.in .kvi:nth-child(1){transition-delay:.24s}
section.in .kvi:nth-child(2){transition-delay:.30s}
section.in .kvi:nth-child(3){transition-delay:.36s}
section.in .kvi:nth-child(4){transition-delay:.42s}
.kvi .n{display:block;font-size:clamp(20px,2.4vw,30px);font-weight:700;color:#fff;
  letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.kvi .n .u{font-size:.6em;color:var(--blue-txt);margin-left:2px}
.kvi .l{display:block;font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);margin-top:8px}
/* 百余人这张卡高亮：创作者入口的引子 */
.kvi.hl{background:linear-gradient(160deg,rgba(58,196,220,.20),rgba(58,196,220,.035) 72%);
  border-color:rgba(143,230,245,.40);
  box-shadow:0 0 0 1px rgba(143,230,245,.14),0 10px 34px rgba(16,150,180,.22),
             inset 0 1px 0 rgba(255,255,255,.10)}
.kvi.hl .n{color:#a8ecf8;text-shadow:0 0 22px rgba(120,220,240,.55)}
.kvi.hl .l{color:rgba(245,245,247,.88)}
/* 百余人卡：可以点的创作者入口 */
.kvi.hl{cursor:pointer}
.kvi.hl:hover{background:linear-gradient(160deg,rgba(58,196,220,.28),rgba(58,196,220,.06) 72%);
  border-color:rgba(160,235,250,.62);
  box-shadow:0 0 0 1px rgba(160,235,250,.24),0 14px 42px rgba(16,150,180,.30),
             inset 0 1px 0 rgba(255,255,255,.14)}
.kvi.hl:focus-visible{outline:2px solid rgba(160,235,250,.8);outline-offset:3px}
.kvi.hl .hladd{display:block;margin-top:7px;font-size:10.5px;letter-spacing:.06em;
  color:#8fe6f5;opacity:.92}
.kvi.hl:hover .hladd{color:#c6f3fb}
@media(max-width:760px){.kv{grid-template-columns:repeat(2,1fr)}}

.copy{max-width:900px;margin:18px auto 0;text-align:left}
.slogan{margin-top:20px;font-size:clamp(13px,1.4vw,16px);font-weight:600;
  letter-spacing:.16em;color:var(--blue-txt);
  text-shadow:0 2px 14px rgba(0,0,0,.85);
  opacity:0;transform:translateY(12px);transition:.9s var(--ease)}
section.in .slogan{opacity:1;transform:none;transition-delay:.44s}
.copy p{font-size:clamp(12.5px,1.15vw,14.5px);line-height:1.78;color:var(--ink-2);
  letter-spacing:.01em;margin-bottom:10px}
.copy p:last-child{margin-bottom:0}
.copy b{color:#eef2f8;font-weight:600}
.copy a{color:var(--blue-txt);text-decoration:none;border-bottom:1px solid rgba(126,195,255,.55)}

/* ---------- 棚内实景：无影棚主图 + 实景幻灯片 ---------- */
.sfac{max-width:900px;margin:12px auto 0;display:grid;
  grid-template-columns:1.58fr 1fr;gap:12px;
  height:clamp(180px,24.5vh,272px);
  opacity:0;transform:translateY(22px);transition:1s var(--ease)}
section.in .sfac{opacity:1;transform:none;transition-delay:.32s}
.sfac .big{position:relative;margin:0;border-radius:14px;overflow:hidden;
  border:1px solid rgba(245,245,247,.14);background:#0b1220;
  box-shadow:0 16px 44px rgba(0,0,0,.40)}
.sfac img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.03) brightness(.95)}
.sfac .big img{object-position:50% 58%}
.sfac .slides{position:relative;border-radius:14px;overflow:hidden;touch-action:pan-y;
  border:1px solid rgba(245,245,247,.14);background:#0b1220;
  box-shadow:0 16px 44px rgba(0,0,0,.40)}
.sfac .sl{position:absolute;inset:0;opacity:0;transform:scale(1.045);
  transition:opacity .85s var(--ease),transform 1.4s var(--ease);pointer-events:none}
.sfac .sl.on{opacity:1;transform:none}
.sfac .cap{position:absolute;left:11px;top:11px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:100px;
  background:rgba(5,11,22,.74);border:1px solid rgba(126,195,255,.34);
  backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);
  font-size:11px;font-weight:600;letter-spacing:.09em;color:#dbeafc;
  text-shadow:0 1px 6px rgba(0,0,0,.92);white-space:nowrap}
.sfac .cap b{color:#a9f0fb;font-weight:700;letter-spacing:.06em}
.sfac .cap.cy{gap:6px;border-color:rgba(58,196,220,.46)}
.sfac .big::after{content:'';position:absolute;left:0;right:0;bottom:0;height:62%;
  pointer-events:none;
  background:linear-gradient(transparent,rgba(3,6,12,.30) 45%,rgba(3,6,12,.82))}
.sfac .capS{position:absolute;left:13px;right:13px;bottom:11px;z-index:2;
  font-size:11px;line-height:1.5;letter-spacing:.02em;color:rgba(245,245,247,.92);
  text-shadow:0 1px 8px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.86)}
.sfac .nav{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:7px;padding:9px 10px 8px;
  background:linear-gradient(transparent,rgba(3,6,12,.80))}
.sfac .nb{width:23px;height:23px;padding:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font:inherit;font-size:13px;line-height:1;
  color:#eaf4ff;background:rgba(8,14,26,.66);
  border:1px solid rgba(245,245,247,.24);
  transition:.24s var(--ease)}
.sfac .nb:hover{background:rgba(41,151,255,.34);border-color:rgba(126,195,255,.62)}
.sfac .nb:active{transform:scale(.92)}
.sfac .dots{display:flex;align-items:center;gap:5px;margin-left:auto}
.sfac .dt{position:relative;width:5px;height:5px;border-radius:50%;cursor:pointer;
  background:rgba(245,245,247,.34);transition:.3s var(--ease)}
.sfac .dt::after{content:'';position:absolute;left:-8px;right:-8px;top:-10px;bottom:-10px}
.sfac .dt.on{width:16px;border-radius:3px;background:#7fe4f0;
  box-shadow:0 0 10px rgba(127,228,240,.55)}
.sfac .idx{font-size:10.5px;letter-spacing:.1em;white-space:nowrap;color:rgba(245,245,247,.74);
  font-variant-numeric:tabular-nums}
.sfac .idx b{color:#eaf7ff;font-weight:600}

/* ---------- 棚内实景：点击放大（灯箱） ---------- */
.sfac .big,.sfac .slides{cursor:zoom-in}
.sfac .big:hover img,.sfac .slides:hover .sl.on img{filter:saturate(1.06) brightness(1.02)}
.sfac .zoom{position:absolute;right:11px;top:11px;z-index:4;width:26px;height:26px;
  display:grid;place-items:center;border-radius:50%;pointer-events:none;
  background:rgba(5,11,22,.66);border:1px solid rgba(245,245,247,.22);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:.3s var(--ease)}
.sfac .zoom svg{width:12px;height:12px;stroke:#eaf7ff;fill:none;stroke-width:2.1;stroke-linecap:round}
.sfac .big:hover .zoom,.sfac .slides:hover .zoom{opacity:1}
/* 常显：图小的时候得让人一眼知道能点开 */
.sfac .zoom{opacity:.62}
.sfac .slides .zoom{top:auto;right:10px;bottom:46px;background:rgba(5,11,22,.84)}

/* ---------- 全屏幻灯片：看棚内实景大图（棚内 13 张） ----------
   暖黑底不是纯黑：整站是纸底 + 墨线，冷黑蓝会像另一个程序弹出来的。
   按钮 hover 一律挂 (hover:hover) and (pointer:fine)，触屏粘住很难看。 */
#lbx{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3.4vh,44px) clamp(14px,4vw,80px);
  background:rgba(26,20,16,.982);
  backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);
  opacity:0;visibility:hidden;
  /* visibility 不能跟 opacity 用同一个时长过渡：打开那一瞬它还是 hidden，
     同一次 tick 里的 focus() 会被浏览器静默拒掉 —— 键盘用户打开后焦点还在原地。
     改成「打开即显、关闭等淡完」：0s 过渡 + 关闭方向才延迟 */
  transition:opacity .28s var(--ease),visibility 0s linear .28s}
#lbx.on{opacity:1;visibility:visible;
  transition:opacity .28s var(--ease),visibility 0s linear 0s}
#lbx .lfig{position:relative;margin:0;max-width:100%;max-height:100%;
  display:flex;flex-direction:column;align-items:center;
  transform:scale(.986);transition:transform .34s var(--ease)}
#lbx.on .lfig{transform:none}
#lbx .limg{max-width:96vw;max-height:calc(100vh - 116px);
  width:auto;height:auto;object-fit:contain;display:block;border-radius:10px;
  border:1px solid rgba(251,244,230,.14);
  box-shadow:0 30px 90px rgba(0,0,0,.62);
  background:#1A1411}
#lbx figcaption{display:flex;align-items:center;justify-content:space-between;gap:18px;
  width:100%;max-width:96vw;margin-top:13px;
  font-size:12.5px;letter-spacing:.015em;color:rgba(251,244,230,.58)}
#lbx .lcap{font-weight:600;color:#FBF4E6;letter-spacing:.03em}
#lbx .lidx{font-variant-numeric:tabular-nums;letter-spacing:.11em;font-size:11px;
  color:rgba(251,244,230,.46);white-space:nowrap}
#lbx .lx,#lbx .lnb{position:absolute;z-index:3;display:grid;place-items:center;padding:0;
  cursor:pointer;color:#FBF4E6;border-radius:50%;
  background:rgba(48,37,30,.76);border:1px solid rgba(251,244,230,.22);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .16s var(--ease)}
@media (hover:hover) and (pointer:fine){
  #lbx .lx:hover,#lbx .lnb:hover{background:rgba(255,107,107,.36);border-color:rgba(255,150,150,.72)}
}
#lbx .lx:active,#lbx .lnb:active{transform:scale(.93)}
#lbx .lx:focus-visible,#lbx .lnb:focus-visible{outline:2px solid rgba(251,244,230,.72);outline-offset:3px}
#lbx .lx{right:clamp(10px,2.2vw,26px);top:clamp(10px,2.2vh,22px);width:38px;height:38px;font-size:15px}
#lbx .lnb{top:50%;margin-top:-23px;width:46px;height:46px;font-size:21px;line-height:1}
#lbx .lnb.p{left:clamp(6px,1.4vw,20px)}
#lbx .lnb.n{right:clamp(6px,1.4vw,20px)}
html.lbxopen #feed{overflow:hidden}
html.lbxopen #nav,html.lbxopen #bar{opacity:0;pointer-events:none !important;transition:opacity .3s}
@media(prefers-reduced-motion:reduce){
  #lbx,#lbx .lfig{transition:none}
}
@media(max-width:640px){
  #lbx{padding:50px 10px 16px}
  #lbx .limg{max-width:100%;max-height:calc(100vh - 150px);border-radius:8px}
  #lbx figcaption{font-size:11.5px;margin-top:10px}
  /* 竖屏看横图，图铺满宽度后只有 250px 高，两侧必然压到图边上。
     所以这两颗不是装饰而是控件：缩到 36px、降一点不透明度，别跟画面抢注意力 */
  #lbx .lnb{width:36px;height:36px;font-size:18px;margin-top:-18px;opacity:.82}
  #lbx .lnb.p{left:4px}
  #lbx .lnb.n{right:4px}
  #lbx .lx{width:34px;height:34px;font-size:14px}
}


.studio{display:block;text-decoration:none;max-width:900px;margin:12px auto 0;text-align:left;
  padding:16px 24px 18px;border-radius:20px;
  background:linear-gradient(135deg,rgba(58,196,220,.18),rgba(255,255,255,.065));
  border:1px solid rgba(58,196,220,.38);
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:0 22px 62px rgba(0,0,0,.42);
  opacity:0;transform:translateY(26px);transition:1s var(--ease)}
section.in .studio{opacity:1;transform:none;transition-delay:.4s}
.studio .shead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.studio .stag{font-size:11.5px;letter-spacing:.12em;font-weight:700;color:#a9f0fb;
  padding:6px 13px;border-radius:100px;background:rgba(6,20,26,.78);
  border:1px solid rgba(110,220,240,.42);white-space:nowrap;
  text-shadow:0 1px 5px rgba(0,0,0,.85)}
.studio .sname{font-size:clamp(16px,1.8vw,21px);font-weight:600;color:#fff;letter-spacing:-.015em}
.studio .sgo{margin-left:auto;font-size:12px;font-weight:600;color:#7fe4f0;white-space:nowrap;
  cursor:pointer;text-decoration:none}
.studio .sgo:hover{opacity:.72}
/* 地址行 + 复制按钮 */
.studio .saddr{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:9px;
  font-size:13px;color:var(--ink-2);line-height:1.6}
.studio .saddr b{color:#eafcff;font-weight:600;letter-spacing:.01em}
.studio .cbtn{font:inherit;font-size:11px;letter-spacing:.06em;cursor:pointer;
  padding:5px 12px;border-radius:100px;color:#7fe4f0;
  background:rgba(58,196,220,.12);border:1px solid rgba(58,196,220,.34);
  transition:background .3s var(--ease),color .3s var(--ease)}
.studio .cbtn:hover{background:rgba(58,196,220,.24)}
.studio .cbtn.done{color:#0a1418;background:#7fe4f0;border-color:#7fe4f0}
/* 内嵌位置图 */
.studio .mapbox{height:226px;margin-top:12px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 0 60px rgba(0,0,0,.36)}
.studio .mapbox svg{display:block;width:100%;height:auto;aspect-ratio:960/300}
.studio .sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px 20px;margin-top:13px;padding-top:11px;border-top:1px solid rgba(245,245,247,.09)}
.studio .sk{display:block;font-size:10.5px;letter-spacing:.18em;color:var(--ink-3);margin-bottom:5px}
.studio .sv{display:block;font-size:13px;color:var(--ink);font-weight:500}
/* 摄影棚屏内容比一屏高（媒体区 + 地图 + 数据），桌面上也允许屏内滚动，
   否则标题与底部数据会被顶栏/底栏压住 */
@media(min-width:641px){
  #feed section.fac{align-items:flex-start}
  #feed section.fac .wrap{width:100%;max-height:100dvh;max-height:100svh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;padding:74px 40px 84px;scrollbar-width:none}
  #feed section.fac .wrap::-webkit-scrollbar{display:none}
}
@media(max-width:640px){
  /* 手机上把地图放大到右侧关键区域，保证园区与标签可读 */
  .studio .mapbox{position:relative;height:190px}
  .studio .mapbox svg{position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:186%;max-width:none;height:auto}
  .studio{padding:18px 16px 18px}
  .studio .shead{gap:9px}
  .studio .sgo{margin-left:0;order:3;flex-basis:100%;margin-top:4px}
  .studio .sgrid{grid-template-columns:1fr 1fr;gap:10px 12px}

  /* 棚内实景：手机上一列，主图 16:10、幻灯片 4:3 */
  .sfac{grid-template-columns:1fr;height:auto;gap:10px;margin-top:14px}
  .sfac .big{aspect-ratio:16/10;height:auto}
  .sfac .slides{aspect-ratio:4/3;height:auto}
  .sfac .slides .sl img{height:100%}
  .sfac .capS{display:none}
  .sfac .cap{font-size:10.5px;padding:5px 10px;left:9px;top:9px}
  .sfac .nav{padding:7px 8px 6px}
  .sfac .nb{width:34px;height:34px;font-size:16px;touch-action:manipulation}
  .sfac .dots{gap:7px}
  .sfac .idx{font-size:11px}
}

/* ---------- 玻璃卡片 ---------- */
.card{margin:38px auto 0;padding:30px 34px;max-width:880px;
  background:var(--glass);border:1px solid var(--line);border-radius:22px;
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  opacity:0;transform:translateY(30px) scale(.97);transition:1.1s var(--ease)}
section.in .card{opacity:1;transform:none;transition-delay:.26s}
.card .k{font-size:clamp(15px,1.6vw,19px);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.card .v{font-size:clamp(12px,1.2vw,14px);color:var(--ink-2);margin-top:8px;line-height:1.6}

/* 卡片类屏：背景光球淡下去，不压内容 */
section.calm .orbs{opacity:.34}
/* 客户分组卡：国内 / 海外 */
.grps{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px;max-width:980px;align-items:start}
.grp{padding:22px 24px 16px;border-radius:18px;text-align:left;
  background:rgba(255,255,255,.07);border:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  opacity:0;transform:translateY(26px);transition:.95s var(--ease)}
section.in .grp{opacity:1;transform:none}
section.in .grp:nth-child(1){transition-delay:.3s}
section.in .grp:nth-child(2){transition-delay:.4s}
.grp .gt{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;
  padding-bottom:12px;border-bottom:1px solid rgba(245,245,247,.12)}
.grp .gk{font-size:clamp(15px,1.7vw,19px);font-weight:700;color:#fff;letter-spacing:-.01em}
.grp .gs{margin-left:auto;font-size:10.5px;letter-spacing:.22em;color:var(--blue-txt);
  text-transform:uppercase;font-weight:700}
/* 品牌多的那组卡内自动分两列，避免一条长龙 */
.grp.two{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;align-items:start}
.grp.two .gt{grid-column:1/-1}
.grp.two .gi.wide{grid-column:1/-1}
.grp .gi{padding:9px 0}
.grp .cn{display:block;font-size:clamp(15px,1.75vw,20px);font-weight:600;color:#fff;
  letter-spacing:-.01em}
.grp .cd{display:block;font-size:12.5px;color:rgba(245,245,247,.66);margin-top:4px;letter-spacing:.02em}
@media(max-width:760px){
  .grps{grid-template-columns:1fr;gap:12px;max-width:440px}
  .grp.two{display:block}
}

.rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:30px}
.cell{padding:22px 24px;border-radius:18px;text-align:left;
  background:rgba(255,255,255,.07);border:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  opacity:0;transform:translateY(26px);transition:.95s var(--ease)}
section.in .cell{opacity:1;transform:none}
.cell .ct{font-size:11px;letter-spacing:.22em;color:var(--blue-txt);font-weight:700}
.cell .cn{font-size:clamp(16px,1.8vw,21px);font-weight:600;margin-top:11px;letter-spacing:-.02em}
.cell .cs{font-size:12.5px;color:var(--ink-3);margin-top:8px;line-height:1.62;letter-spacing:0}
section.in .cell:nth-child(1){transition-delay:.30s}
section.in .cell:nth-child(2){transition-delay:.38s}
section.in .cell:nth-child(3){transition-delay:.46s}

.tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px}
.tags.hero{margin-top:26px;gap:9px}
.tags.hero .tag{padding:7px 16px;font-size:clamp(11.5px,1.1vw,13px);color:rgba(245,245,247,.82)}
@media(max-width:640px){
  .tags.hero{gap:7px;margin-top:20px}
  .tags.hero .tag{padding:6px 12px;font-size:11px}
}
.tag{padding:9px 20px;border-radius:100px;font-size:clamp(12px,1.2vw,14px);text-decoration:none;
  background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--ink-2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transform:translateY(16px) scale(.94);transition:.8s var(--ease)}
section.in .tag{opacity:1;transform:none}
section.in .tag:nth-child(1){transition-delay:.30s}
section.in .tag:nth-child(2){transition-delay:.36s}
section.in .tag:nth-child(3){transition-delay:.42s}
.tag-cta{cursor:pointer;background:rgba(41,151,255,.14);border-color:rgba(41,151,255,.5);
  color:#cfe8ff;font-weight:600}
.tag-cta:hover{background:rgba(41,151,255,.24);color:#fff}
section.in .tag:nth-child(3){transition-delay:.42s}
section.in .tag:nth-child(4){transition-delay:.48s}
section.in .tag:nth-child(5){transition-delay:.54s}
section.in .tag:nth-child(6){transition-delay:.60s}

.stat{margin-top:30px}
.stat .n{font-size:clamp(88px,20vw,240px);font-weight:700;line-height:.86;letter-spacing:-.06em;
  background:linear-gradient(180deg,#fff 20%,var(--blue) 130%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:scale(.86);transition:1.3s var(--ease)}
.stat .l{font-size:clamp(12px,1.3vw,15px);letter-spacing:.3em;color:var(--ink-2);margin-top:16px}
section.in .stat .n{opacity:1;transform:none;transition-delay:.24s}

/* ---------- 顶栏 ---------- */
#top{position:fixed;top:0;left:0;right:0;z-index:50;
  padding:calc(14px + env(safe-area-inset-top)) 26px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:rgba(8,12,20,.40);backdrop-filter:blur(24px) saturate(170%);
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  border-bottom:1px solid rgba(245,245,247,.10);
  opacity:0;transform:translateY(-16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  /* 顶栏是 fixed 覆盖层，只有真正可点的元素接收触摸。
     以前整条都在拦手势：手指落在顶栏上往下滑，页面纹丝不动，像卡死 */
  pointer-events:none}
#logo,#nav,#staffBtn,#langBtn{pointer-events:auto}
#top.show{opacity:1;transform:none}
/* 切到 3D 粒子版 */
#ptBtn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:12.5px;font-weight:500;letter-spacing:.04em;white-space:nowrap;
  padding:9px 16px;border-radius:100px;color:rgba(245,245,247,.8);
  background:rgba(255,255,255,.06);border:1px solid rgba(245,245,247,.14);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:.35s var(--ease)}
#ptBtn:hover{color:#fff;background:rgba(41,151,255,.2);border-color:rgba(41,151,255,.45)}
#logo{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto;
  cursor:pointer;border-radius:8px;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
#logo:hover{opacity:.82}
#logo:active{opacity:1}
#logo:focus-visible{outline:1px solid var(--chip-line);outline-offset:6px}
#logo img{height:22px;width:auto;display:block;flex:0 0 auto}
/* 公司全称：空间够时显示，窄屏自动降级为短名 */
#logo .full,#logo .short{display:none;white-space:nowrap;line-height:1.15}
#logo .full{font-size:12.5px;font-weight:500;letter-spacing:.02em;color:rgba(245,245,247,.72)}
#logo .short{font-size:13px;font-weight:600;letter-spacing:.08em;color:rgba(245,245,247,.85)}
/* 竖线分隔 */
#logo .sep{width:1px;height:15px;background:rgba(245,245,247,.2);flex:0 0 auto}

@media(min-width:1240px){
  #logo .full{display:block}
  #logo .sep{display:block}
}
@media(min-width:780px) and (max-width:1239px){
  #logo .short{display:block}
  #logo .sep{display:block}
}
@media(max-width:779px){
  #logo .short{display:block}
  #logo .sep{display:none}
}
#nav{display:flex;gap:7px;justify-content:flex-end;flex:0 1 auto;min-width:0;
  overflow:hidden}
#nav button{padding:6px 13px;border-radius:100px;border:0;cursor:pointer;
  background:rgba(255,255,255,.06);color:var(--ink-2);
  font-family:inherit;font-size:11.5px;letter-spacing:.03em;
  transition:.3s var(--ease);white-space:nowrap;flex:0 0 auto}
#nav button:hover{background:rgba(255,255,255,.13);color:#fff}
#nav button.on{background:var(--blue);color:#fff}

/* 跨页导航链接：外观与 #nav button 完全一致（2026-10-30 拆分独立页） */
#nav a.nav-x{padding:6px 13px;border-radius:100px;border:0;cursor:pointer;
  background:rgba(255,255,255,.06);color:var(--ink-2);
  font-family:inherit;font-size:11.5px;letter-spacing:.03em;
  transition:.3s var(--ease);white-space:nowrap;flex:0 0 auto;
  text-decoration:none;display:inline-flex;align-items:center}
#nav a.nav-x:hover{background:rgba(255,255,255,.13);color:#fff}
/* 空间不足时隐藏次要导航项，避免换行撑高顶栏 */
@media(min-width:1121px) and (max-width:1320px){
  /* 导航从 8 项变 9 项（多了「多屏检查」），这一段窄桌面先收字号与内边距，
     否则 675px 的标签条居中后会压到左边 logo 上 */
  #nav{gap:4px}
  #nav button{padding:6px 9px;font-size:10px}
}
@media(min-width:1121px) and (max-width:1240px){#nav button:nth-child(n+10){display:none}}
/* 桌面端导航整条水平居中：logo 靠左、员工登录靠右 */
@media(min-width:1121px){
  #nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);justify-content:center}
}
/* 顶栏底部一条极细的阅读进度线 */
#topProg{position:absolute;left:0;bottom:0;width:0;height:2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(41,151,255,.9),rgba(140,205,255,.95));
  box-shadow:0 0 10px rgba(41,151,255,.45);opacity:0;
  transition:left .42s var(--ease),width .42s var(--ease),opacity .3s var(--ease)}
#top.show #topProg{opacity:1}
/* 窄屏：标签条横向可滑，两边淡出，当前页自动居中 */
@media(max-width:1120px){
  #nav{overflow-x:auto;overflow-y:hidden;justify-content:flex-start;gap:6px;margin-left:4px;
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 18px),transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 18px),transparent 100%)}
  #nav::-webkit-scrollbar{display:none;width:0;height:0}
  #nav button{font-size:10.5px;padding:5px 9px}
}

/* ---------- 员工登录：2026-10-28 入口已从首页撤下，下面这套样式当前没有元素在用 ----------
   保留原因：恢复只需把 #staffBtn 与 #jump 两段 HTML 加回 #top / #dots 之间，样式和脚本不用重写。
   原设计：只挂在 FitCheck 首屏和「首页」第二屏的右上角 ----------
   显隐由 setActive 按屏索引切 #top.staffok（i <= 1），第三屏起收掉。
   display 常驻、用 opacity + visibility 过渡：切屏时是淡出淡入，而不是"啪"一下蹦出来；
   常驻占位还有个额外好处 —— 窄屏下 nav 的可用宽度不会因为按钮来回显隐而抖动。 */
#staffBtn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  padding:8px 18px;border-radius:100px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;letter-spacing:.04em;white-space:nowrap;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);
  opacity:0;visibility:hidden;transform:translateY(-5px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s var(--ease),
             background .3s var(--ease),border-color .3s var(--ease);
}
#top.staffok #staffBtn{opacity:1;visibility:visible;transform:none;pointer-events:auto}
#staffBtn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24)}
@media (prefers-reduced-motion:reduce){
  /* 减动态：不做位移和淡入的过渡，切屏即刻到位 */
  #staffBtn{transition:none}
}
#staffBtn .ld{width:7px;height:7px;border-radius:50%;background:#A855F7;flex:0 0 auto;
  box-shadow:0 0 10px rgba(168,85,247,.95);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- 海外内容（右上角常驻）：首屏和内页顶栏都在 ---------- */
#langBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;
  height:36px;padding:0 15px;border-radius:100px;text-decoration:none;white-space:nowrap;
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.03em;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);
  transition:.35s var(--ease);cursor:pointer;
}
#langBtn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24)}
#langBtn em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  padding:2px 6px 2.5px;border-radius:4px;background:rgba(255,255,255,.14);
  color:var(--ink-2);transition:.35s var(--ease)}
#langBtn .stx,#langBtn .snx{display:none}
/* 首屏叫「海外内容」，进到里面各屏叫「海外专栏」 */
#langBtn .ltx{display:none}
#langBtn .itx{display:inline}
#top.bare #langBtn .ltx{display:inline}
#top.bare #langBtn .itx{display:none}
#langBtn i{font-style:normal;font-size:11px;color:rgba(245,245,247,.45);transition:.3s var(--ease)}
#langBtn:hover i{color:#fff;transform:translate(1px,-1px)}

/* 首屏：顶栏整体透明，左边不摆 logo，只留右上角两颗胶囊并排靠右 */
#top.bare{justify-content:flex-end;gap:9px;background:transparent;border-bottom-color:transparent;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
/* 首屏只留右边两颗胶囊；导航还在下面几屏 */
#top.bare #nav,#top.bare #topProg{display:none}
/* logo 首屏隐形：留位不占视觉，滚到第二屏随导航一起淡入，别让顶栏突然蹦出一个块 */
#top.bare #logo{opacity:0;pointer-events:none;transform:translateY(-2px)}
#top.bare #logo .full,#top.bare #logo .sep{display:none!important}
#top.bare #logo .short{display:block!important}
@media(max-width:640px){
  #top.bare #logo .short{display:none!important}   /* 窄屏只留那个圆环标记 */
}
/* 首屏顶栏：员工登录留在右上角（#top.staffok 时才显示），海外 EN 仍旧只宽屏常驻 */
#top.bare #langBtn{display:none}
/* 宽屏常驻：横向排得下公司全名的那种屏，两个入口固定在右上角——首屏和里面各屏都在，
   内容区那行收起不重复。排不下就跟左边公司名一样自然降级（窄屏 / 竖屏 / 平板只留
   .heroLinks 那行）。断点与 #logo .full 的 1240px 对齐，再加 3:2 横向判定排除方形屏 */
#langBtn.wide-only{display:none}
@media (min-width:1240px) and (min-aspect-ratio:3/2){
  #top,#top.bare{gap:12px}   /* 两颗胶囊的间距首屏与内页统一（bare 原来是 9，内页 18） */
  #top #langBtn.wide-only,#top.bare #langBtn.wide-only{display:inline-flex;pointer-events:auto;margin-left:auto}
  /* 这一行里现在还挂着「玩一局涂鸦跳跃」，整块藏掉桌面就摸不到游戏了。
     员工登录和海外 EN 右上角已经常驻，这里去掉，别重复。 */
  #feed section:first-child .heroLinks{display:flex}
  /* 「软件详细介绍」跟右上角不重复，宽屏照样留着；
     员工登录 / 海外 EN 右上角已经常驻，这里只收这两项和它们中间的点 */
  #feed section:first-child .heroLinks .hlink-en,
  #feed section:first-child .heroLinks .hdot{display:none}
}
@media(max-width:640px){
  #top.bare{padding-left:12px;padding-right:12px;gap:8px}
}
/* 玩涂鸦跳跃时（开场 / 手动局）整条顶栏先让开，别盖在球场上 */
html.dj-lock #top{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* ---------- 员工登录覆盖层：页内覆盖，不新开窗口 ---------- */
#jump{position:fixed;inset:0;z-index:250;display:none;align-items:center;justify-content:center;
  padding:22px;background:rgba(4,6,12,.62);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}
#jump.open{display:flex;animation:jfade .24s var(--ease) both}
@keyframes jfade{from{opacity:0}to{opacity:1}}
@keyframes jup{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.jg{position:relative;width:min(452px,100%);padding:34px 32px 26px;border-radius:22px;text-align:center;
  background:linear-gradient(180deg,rgba(19,23,35,.96),rgba(10,13,22,.97));
  border:1px solid rgba(255,255,255,.13);box-shadow:0 34px 96px rgba(0,0,0,.62);
  animation:jup .3s var(--ease) both}
.jk{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(168,200,255,.82);font-weight:700}
.jk i{width:6px;height:6px;border-radius:50%;background:#A855F7;box-shadow:0 0 9px rgba(168,85,247,.9)}
.jt{margin-top:14px;font-size:22px;font-weight:600;letter-spacing:-.02em;color:#f5f5f7}
.js{margin-top:10px;font-size:13.4px;line-height:1.6;color:rgba(245,245,247,.66)}
.js br{display:none}          /* 默认自然折行 */
@media(min-width:521px){.js br{display:inline}}   /* 桌面按写好的断点分行 */
.jgo{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;padding:14px 18px;
  border-radius:13px;background:var(--blue);color:#fff;font-size:15px;font-weight:600;text-decoration:none;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.jgo:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(41,151,255,.42)}
/* 次级入口：在线批注（beta）—— 不用登录，点开就能用，所以不做成实心主按钮。
   用 block 而不是 flex：flex 会把「（beta）」变成独立盒子，中间凭空多一道缝 */
.jalt{display:block;text-align:center;margin-top:10px;padding:13px 18px;
  border-radius:13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:rgba(245,245,247,.92);font-size:14.2px;font-weight:600;text-decoration:none;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.jalt:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.jalt em{font-style:normal;font-weight:500;font-size:12.6px;color:rgba(245,245,247,.52)}
.jback{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;
  padding:6px 4px;border:0;background:none;color:rgba(245,245,247,.62);
  font-family:inherit;font-size:13px;cursor:pointer;transition:color .18s}
.jback:hover{color:#fff}
.jx{position:absolute;right:13px;top:13px;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);
  color:rgba(245,245,247,.7);font-family:inherit;font-size:17px;line-height:1;font-weight:400;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s}
.jx:hover{background:rgba(255,255,255,.15);color:#fff}
.jtip{margin-top:18px;padding-top:13px;border-top:1px solid rgba(255,255,255,.09);
  font-size:11.6px;line-height:1.62;color:rgba(245,245,247,.42)}
@media(max-width:520px){
  #jump{padding:18px}
  .jg{padding:28px 21px 22px;border-radius:19px}
  .jt{font-size:19.5px}
  .js{font-size:12.8px}
  .jgo{margin-top:20px;padding:13px 16px;font-size:14.4px}
  .jalt{margin-top:8px;padding:12px 16px;font-size:13.6px}
}

/* ---------- 3D 粒子层 ---------- */
#gl{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:1;display:block;
  pointer-events:none;opacity:0;transition:opacity .8s var(--ease)}
#gl.on{opacity:1}
section .wrap,section .orbs{z-index:6}

/* ---------- 开场：开机遮罩 + 光晕 + 扫描光线 + 标题逐字浮现 ---------- */
/* 开机遮罩 */
#boot{position:fixed;inset:0;z-index:200;background:#06090f;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .9s var(--ease),visibility .9s var(--ease)}
#boot.gone{opacity:0;visibility:hidden}
#boot .bc{display:flex;gap:9px}
#boot .bp{width:9px;height:9px;border-radius:50%;background:var(--blue);opacity:.25;
  animation:bootpulse 1.05s ease-in-out infinite}
#boot .bp:nth-child(2){animation-delay:.14s}
#boot .bp:nth-child(3){animation-delay:.28s}
@keyframes bootpulse{0%,100%{opacity:.18;transform:scale(.72)}50%{opacity:1;transform:scale(1)}}
#boot .bt{font-size:12px;letter-spacing:.42em;text-indent:.42em;color:rgba(245,245,247,.34)}

/* 开场光晕：从中央炸开 */
.bloom{position:absolute;left:50%;top:48%;width:min(120vw,1400px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.1);opacity:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(41,151,255,.42),rgba(41,151,255,.12) 34%,transparent 66%)}
/* 扫描光线：向两侧对开 */
.beam{position:absolute;left:0;right:0;top:50%;height:1px;z-index:4;pointer-events:none;
  opacity:0;transform:scaleX(0);
  background:linear-gradient(90deg,transparent,rgba(41,151,255,0) 6%,#6fb6ff 50%,rgba(41,151,255,0) 94%,transparent);
  box-shadow:0 0 26px rgba(41,151,255,.75)}

/* 首屏标题「银赛传媒」：每个字装进一条竖字带，落定前在带子里滚几轮再停住。
   字带比行盒上下各高一点（负 margin 抵消），免得圆体的字形被裁掉边。 */
.sh-cell{display:inline-block;overflow:hidden;vertical-align:top;position:relative;z-index:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  /* iOS 微信：字带里的格子一旦被提升成合成层，父级的 overflow:hidden 就会失效，
     整条字带的 5 格同时露出来，看上去像几个字叠印在一起。
     mask 是同一块裁剪的第二种表达，在 WebKit 上比 overflow 靠得住，两个都留。 */
  -webkit-mask-image:-webkit-linear-gradient(top,#000,#000);
  mask-image:linear-gradient(#000,#000)}
.sh-reel{display:block}   /* 不写 will-change：常驻 will-change 本身就会把字带推成合成层 */
.sh-g{display:block;white-space:nowrap;text-align:center}
/* 字带里除第一格是真字，其余几格用伪元素画：DOM 里只留一份「银赛传媒」，
   免得标题被读成「银银银银银赛赛赛赛赛…」 */
.sh-g[data-c]::before{content:attr(data-c)}

/* 开场序列（body.intro 触发） */
body.intro .bloom{animation:bloomIn 1.6s cubic-bezier(.16,.9,.3,1) .05s forwards}
/* 开场收杆：中心那圈同心圆再亮一下，三颗水彩球就是从这圈里被拉出去的 */
body.heroout .bloom{animation:bloomOut .95s cubic-bezier(.22,.7,.28,1) forwards}
@keyframes bloomOut{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.10)}
  22%{opacity:.56;transform:translate(-50%,-50%) scale(.30)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.05)}}
@keyframes bloomIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.08)}
  42%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}
body.intro .beam{animation:beamIn 1.5s cubic-bezier(.16,.9,.3,1) .5s forwards}
@keyframes beamIn{
  0%{opacity:0;transform:scaleX(0)}
  30%{opacity:1}
  70%{opacity:1;transform:scaleX(1)}
  100%{opacity:0;transform:scaleX(1)}}
/* 标题整体轻微推近，像镜头对焦 */
body.intro #feed section:first-child .wrap{
  animation:wrapIn 1.5s cubic-bezier(.16,.9,.3,1) .55s backwards}
@keyframes wrapIn{from{transform:scale(1.07)}to{transform:none}}

/* 品牌页退到第二屏，不再由开场序列接管：eyebrow / h2 / 发丝线跟着通用的 .in 入场。
   h1 常显是给字带（.sh-reel）留的 —— 它的透明度由字带自己管，不能被外层 transition 掺一脚 */
#feed section.homeSec .h1{opacity:1;transform:none;transition:none;
  /* 全局那条 h1.h1{font-weight:inherit}（信息量大的屏缩标题用）会把所有 <h1 class="h1"> 压成 400，
     这颗标题是字带滚出来的主标，必须回到 700 —— 2026-10-28 老苗：「字体变了，之前是粗体」 */
  font-weight:700}
@keyframes elIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes elFade{from{opacity:0}to{opacity:1}}

/* 开场期间先压住滑动暗示，序列结束再出现 */
#hint.wait{opacity:0 !important;pointer-events:none !important}

/* 站内跳转回来（大陆⇄海外、从兼容页返回）：开场整段不演，首屏直接停在终态。
   三连跳 / 字带 / 水彩球由 JS 那边一刀切，这里只把首屏那三条进场动画按住 ——
   它们带 .95/1.5/1.8s 延迟，不按住的话跳转回来还会自己淡入一遍。
   刷新页面时 html 上没有 .skipintro，一切照旧。 */
html.skipintro #boot{display:none !important}
html.skipintro #feed section.homeSec .eyebrow,
html.skipintro #feed section.homeSec .h2,
html.skipintro #feed section.homeSec .hair{animation:none !important;opacity:1;transform:none}
html.skipintro .bloom,
html.skipintro .beam{animation:none !important;opacity:0}
html.skipintro section.dj-in .wrap{animation:none !important}

/* 带锚点进站（转发「关于银赛」用 /#about）：定位完成前不画 #feed。
   skipintro 已经把 #boot 抹掉了，不遮的话首屏会闪一下再跳走。 */
html.hashjump #feed{opacity:0}
html.hashjump.hashland #feed{opacity:1;transition:opacity .2s cubic-bezier(.2,.8,.3,1)}
@media (prefers-reduced-motion: reduce){ html.hashjump.hashland #feed{transition:none} }

/* 首屏内容整体上抬：不让标题块压到底部、跟"向下滑动"粘在一起（矮屏最明显） */
#feed section.homeSec{padding-bottom:clamp(64px,10.5vh,108px)}

/* 开场 2.5 秒内先显示"加载中"，避免以为卡死；提示一出现就退场 */
#hload{
  position:absolute;left:50%;bottom:calc(78px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:8;pointer-events:none;
  display:flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.26em;text-indent:.26em;
  color:rgba(245,245,247,.62);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
#hload::before{
  content:'';width:13px;height:13px;border-radius:50%;flex:0 0 auto;text-indent:0;
  border:1.5px solid rgba(245,245,247,.22);border-top-color:var(--blue);
  animation:hspin .9s linear infinite;
}
@keyframes hspin{to{transform:rotate(360deg)}}
#hload.off{opacity:0;transform:translate(-50%,6px)}
/* 首屏不再是品牌开场：没人需要等那 2.5 秒，「加载中」彻底退场 */
#hload{display:none}
@media(max-height:840px){
  #feed section.homeSec #hload{bottom:calc(48px + env(safe-area-inset-bottom))}
  #feed section.homeSec #hint{bottom:calc(44px + env(safe-area-inset-bottom))}
}

/* ---------- 景深球体层（全屏生成，滚动划走 + 体感漂移） ---------- */
.orbs{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  visibility:hidden}
.orbs.live{visibility:visible}
/* 有视频背景的屏不吃体感位移，避免画面被推移、也避免视频掉帧 */
section.no-gyro .p-layer{transform:translate3d(0,var(--py,0px),0)}
section.no-gyro .scrim,section.no-gyro .grid{transform:none}
section.no-gyro .orb{--kx:0;--ky:0;--kx2:0px;--ky2:0px}
/* 视频屏球体只做静态光晕，不做模糊和漂浮动画，省下合成开销保视频流畅 */
.orbs.nofx .orb{filter:none;animation:none;will-change:auto;opacity:.85}
.orbs:empty{display:none}
.orb{position:absolute;border-radius:50%;will-change:transform,filter;
  transform:translate3d(calc(var(--gx,0px) * var(--kx) + var(--kx2,0px)),
                       calc(var(--gy,0px) * var(--ky) + var(--ky2,0px)),0)
            scaleX(var(--osx,1)) scaleY(var(--osy,1));
  filter:blur(calc(var(--spa,0) * var(--ob,7px)))}
/* 三颗球各自不同的景深：越靠前的系数越大、滑动时横向扫得越远
   滑动瞬间横向拉伸、纵向压扁，像从镜头前快速掠过的运动模糊 */
.orb:nth-child(1){--kx:1.85;--ky:1.85;--kx2:calc(var(--sp,0) * 96px);--ky2:calc(var(--sp,0) * 26px);
  --ob:6px;--osx:calc(1 + var(--spa,0) * .62);--osy:calc(1 - var(--spa,0) * .3)}
.orb:nth-child(2){--kx:-2.35;--ky:-2.35;--kx2:calc(var(--sp,0) * -78px);--ky2:calc(var(--sp,0) * -36px);
  --ob:9px;--osx:calc(1 - var(--spa,0) * .5);--osy:calc(1 + var(--spa,0) * .26)}
.orb:nth-child(3){--kx:2.95;--ky:2.95;--kx2:calc(var(--sp,0) * 132px);--ky2:calc(var(--sp,0) * 52px);
  --ob:4px;--osx:calc(1 + var(--spa,0) * .8);--osy:calc(1 - var(--spa,0) * .38)}
.orb.s1{background:radial-gradient(circle at 32% 30%,var(--oc),transparent 68%);
  box-shadow:0 0 90px var(--ocg);
  animation:orbA 13s ease-in-out infinite}
.orb.s2{background:radial-gradient(circle at 62% 38%,var(--oc2),transparent 70%);
  box-shadow:0 0 74px var(--oc2g);
  animation:orbB 17s ease-in-out infinite}
.orb.s3{border:1px solid var(--oc3);
  background:radial-gradient(circle,rgba(255,255,255,.09),transparent 70%);
  animation:orbC 11s ease-in-out infinite}
@keyframes orbA{0%,100%{margin-top:0;margin-left:0}50%{margin-top:-26px;margin-left:18px}}
@keyframes orbB{0%,100%{margin-top:0;margin-left:0}50%{margin-top:22px;margin-left:-20px}}
@keyframes orbC{0%,100%{margin-top:0;opacity:.7}50%{margin-top:-18px;opacity:1}}
@media(max-width:700px){.orb.s3{display:none}}

/* ---------- 滑动暗示（仅第一屏） ---------- */
/* 它是颗按钮：没有滚轮的人直接点它进下一屏 */
#hint{
  position:absolute;left:50%;bottom:calc(74px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:8;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  opacity:0;transition:opacity .7s var(--ease);pointer-events:none;
  appearance:none;-webkit-appearance:none;
  border:0;background:none;padding:6px 10px;margin:0;
  font:inherit;color:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#hint.show{opacity:1;pointer-events:auto}
#hint .htxt{font-size:11px;letter-spacing:.34em;color:rgba(245,245,247,.64);
  text-transform:uppercase;text-indent:.34em}
/* 第 5 秒"AI 时刻"才浮出来的一行小字，算个小彩蛋 */
#hint .hegg{
  font-size:10.5px;line-height:1.55;letter-spacing:.1em;text-indent:.1em;
  color:rgba(245,245,247,.58);text-align:center;max-width:76vw;
  margin-top:-4px;
  opacity:0;transform:translateY(-6px);filter:blur(2px);
  transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);
}
#hint.egg .hegg{opacity:1;transform:none;filter:blur(0);transition-delay:.5s}
#hint .ring{
  width:30px;height:50px;border-radius:16px;position:relative;
  border:1.5px solid rgba(245,245,247,.44);
  background:rgba(0,0,0,.22);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
#hint .dot{
  position:absolute;left:50%;top:8px;width:4px;height:9px;border-radius:3px;
  margin-left:-2px;background:rgba(245,245,247,.9);
  box-shadow:0 0 8px rgba(41,151,255,.7);
  animation:wheel 1.9s var(--ease) infinite;
}
@keyframes wheel{
  0%{transform:translateY(0);opacity:0}
  22%{opacity:1}
  70%{transform:translateY(19px);opacity:0}
  100%{transform:translateY(0);opacity:0}
}
#hint.pulse .htxt{color:#fff;text-shadow:0 0 16px rgba(41,151,255,.85)}
#hint.pulse .ring{border-color:rgba(41,151,255,.9);
  box-shadow:0 0 26px rgba(41,151,255,.55),inset 0 0 14px rgba(41,151,255,.25);
  animation:pulseRing 1.15s var(--ease) 3}
#hint.pulse .chev{border-color:var(--blue)}
@keyframes pulseRing{
  0%,100%{transform:translateY(0) scale(1)}
  45%{transform:translateY(5px) scale(1.12)}
}
#hint .chev{
  width:14px;height:14px;opacity:0;
  border-right:1.5px solid rgba(245,245,247,.58);
  border-bottom:1.5px solid rgba(245,245,247,.58);
  transform:rotate(45deg);
  animation:chev 1.9s var(--ease) infinite;
}
@keyframes chev{
  0%{opacity:0;transform:rotate(45deg) translate(0,0)}
  45%{opacity:.85}
  100%{opacity:0;transform:rotate(45deg) translate(4px,4px)}
}

/* ---------- 影片屏 ---------- */
.tabs{display:flex;gap:8px;justify-content:center;margin-top:26px;
  opacity:0;transform:translateY(18px);transition:.9s var(--ease)}
section.in .tabs{opacity:1;transform:none;transition-delay:.3s}
.tabs button{padding:8px 20px;border-radius:100px;cursor:pointer;font-family:inherit;
  font-size:12px;letter-spacing:.08em;transition:.3s var(--ease);
  background:rgba(255,255,255,.055);border:1px solid var(--line);color:var(--ink-2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.tabs button.on{background:var(--blue);color:#fff;border-color:transparent}
.filmbox{margin:20px auto 0;width:min(100%,900px);aspect-ratio:16/9;border-radius:20px;
  overflow:hidden;background:#0b0d13;border:1px solid var(--line);
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  opacity:0;transform:translateY(26px) scale(.98);transition:1.1s var(--ease)}
section.in .filmbox{opacity:1;transform:none;transition-delay:.36s}
.filmbox video{width:100%;height:100%;object-fit:contain;display:block}
/* 没有播放器时，下载按钮单独成行居中 */
.dlwrap{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.dlwrap .dl{margin-top:0}
.dl{display:inline-block;margin:22px 7px 0;padding:10px 22px;border-radius:100px;
  font-size:12px;letter-spacing:.1em;text-decoration:none;transition:.35s var(--ease);
  background:rgba(255,255,255,.055);border:1px solid var(--line);color:var(--ink);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transform:translateY(16px)}
section.in .dl{opacity:1;transform:none;transition-delay:.48s}
.dl:hover{background:var(--blue);border-color:transparent;color:#fff}

/* ---------- 底部联系条 ---------- */
#bar{position:fixed;left:50%;
  bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(16px);z-index:55;
  display:flex;align-items:center;gap:14px;
  padding:10px 10px 10px 22px;border-radius:100px;
  background:rgba(26,30,40,.72);border:1px solid rgba(245,245,247,.16);
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  box-shadow:0 14px 44px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
#bar.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
#bar a{font-size:12.5px;letter-spacing:.02em;text-decoration:none;white-space:nowrap;
  color:rgba(245,245,247,.76);transition:color .3s var(--ease)}
#bar a:hover{color:#fff}
#bar .sp{width:1px;height:13px;background:rgba(245,245,247,.18);flex:0 0 auto}
#bar .cta{padding:9px 20px;border-radius:100px;
  background:var(--blue);color:#fff;font-weight:600;letter-spacing:.06em}
#bar .cta:hover{background:#4aa8ff;color:#fff}
#bar .cta{cursor:pointer}

.endline{width:72px;height:3px;border-radius:3px;margin:30px auto 0;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  opacity:0;transform:scaleX(.2);transition:1s var(--ease)}
section.in .endline{opacity:1;transform:none;transition-delay:.3s}
/* 联系屏一句话：把"下一步怎么办"说清楚，别让访客停在"挺好看" */
.endsub{margin:18px auto 0;max-width:660px;font-size:clamp(12px,1.15vw,14px);
  line-height:1.75;letter-spacing:.02em;color:rgba(240,245,252,.66);text-align:center;
  text-shadow:0 1px 8px rgba(0,0,0,.9);
  opacity:0;transform:translateY(14px);transition:.9s var(--ease)}
section.in .endsub{opacity:1;transform:none;transition-delay:.36s}
@media(max-width:640px){.endsub{font-size:11.5px;margin-top:14px;line-height:1.7}}

@media(max-width:640px){
  .wrap{padding:0 26px}
  .verts h1{font-size:clamp(30px,10vw,40px)}
  /* 员工登录固定在顶栏右上角，手机上收成紧凑胶囊，保证入口一直在。
     高度给到 36px（和桌面、和 #langBtn 一致）：原来纯靠 padding 撑出来只有 30px，
     手指点上去容易漏，顶栏这一条就没有更小的可点元素了。 */
  #staffBtn{height:36px;padding:0 12px;font-size:10.5px;gap:5px;letter-spacing:0;flex:0 0 auto}
  #staffBtn .ld{width:6px;height:6px}
  /* 右上角海外入口：手机上收成两字，把顶栏宽度让给导航 */
  #langBtn{height:30px;padding:0 9px;font-size:10.5px;gap:4px;flex:0 0 auto;letter-spacing:0}
  #langBtn .ltx,#langBtn .itx,#langBtn .stx{display:none}
  #langBtn .snx{display:inline}
  #top.bare #langBtn .ltx,#top.bare #langBtn .itx{display:none}
  #top.bare #langBtn .stx{display:inline}
  #top.bare #langBtn .snx{display:none}
  #langBtn em{font-size:8.5px;letter-spacing:.04em;padding:2px 4.5px 2.5px}
  #langBtn i{font-size:10px}
  #logo .short,#logo .sep{display:none}   /* 极窄屏只留标志，导航才有空间 */
  #top{gap:6px;padding-left:16px;padding-right:16px}
  #nav{gap:4px}
  #nav button{font-size:10px;padding:5px 8px}
  /* 文字密集的屏：手机上一屏放不下时，屏内可滚动（到边界会自然接力翻页） */
  section.dense,section.calm{align-items:flex-start}
  section.dense .wrap,section.calm .wrap{width:100%;max-height:100dvh;max-height:100svh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-top:78px;padding-bottom:104px}
  #feed section:last-child{align-items:flex-start}
  #feed section:last-child .wrap{width:100%;max-height:100dvh;max-height:100svh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding-top:70px;padding-bottom:96px}
  .card{padding:24px 22px;border-radius:18px}
  .rows{grid-template-columns:1fr}
  #dots{display:none}
  #bar{gap:10px;padding:9px 10px 9px 16px}
  #bar a,#bar .wx{font-size:12px}
  #bar .bava{width:18px;height:18px}

  /* ---------- 合作客户屏（手机）：锁死一屏，不在屏内滚动 ----------
     原来这屏屏内可滚，手指往上滑先滚客户列表，翻不了页；
     现在取消屏内滚动、把内容压紧到一屏内，滑一下直接翻到下一页。 */
  section.clients .wrap{max-height:none;overflow:visible;
    padding-top:62px;padding-bottom:72px}
  .clients .h1{margin-top:6px}
  .clients .h2{margin-top:7px;font-size:13px;line-height:1.45}
  .clients .grps{grid-template-columns:1fr;gap:9px;margin-top:14px;max-width:none}
  .clients .grp{padding:11px 13px 7px;border-radius:14px}
  .clients .grp .gt{margin-bottom:5px;padding-bottom:6px}
  .clients .grp .gk{font-size:14px}
  .clients .grp .gs{font-size:8.5px;letter-spacing:.16em}
  .clients .grp.two{display:grid;grid-template-columns:1fr 1fr;column-gap:11px;align-items:start}
  .clients .grp.two .gt{grid-column:1/-1}
  .clients .gi{padding:3.5px 0}
  .clients .cn{font-size:13px;line-height:1.22}
  .clients .cd{font-size:10px;margin-top:1px;line-height:1.3;letter-spacing:0}
  /* 桌面/平板不受影响：这几条只在窄屏生效 */
}
@media(max-width:380px){
  .clients .cn{font-size:12px}
  .clients .cd{font-size:9.5px}
  section.clients .wrap{padding-top:56px;padding-bottom:66px}
}
/* ---------- 合作咨询抽屉 ---------- */
#lead{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s var(--ease),visibility .45s var(--ease)}
#lead.on{opacity:1;visibility:visible;pointer-events:auto}
#lead .lmask{position:absolute;inset:0;background:rgba(2,5,10,.74);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#lead .lpanel{position:relative;width:min(560px,100%);max-height:calc(100dvh - 40px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:34px 32px 28px;border-radius:26px;
  background:linear-gradient(180deg,rgba(30,35,46,.96),rgba(13,16,24,.97));
  border:1px solid rgba(245,245,247,.13);
  box-shadow:0 34px 90px rgba(0,0,0,.7),0 0 0 1px rgba(41,151,255,.06) inset;
  transform:translateY(28px) scale(.985);
  transition:transform .55s var(--ease)}
#lead.on .lpanel{transform:none}
#lead .lclose{position:absolute;right:18px;top:16px;width:32px;height:32px;border:0;
  border-radius:50%;background:rgba(245,245,247,.07);color:rgba(245,245,247,.6);
  font-size:14px;line-height:1;cursor:pointer;transition:.3s var(--ease)}
#lead .lclose:hover{background:rgba(245,245,247,.14);color:#fff}
#lead .leyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--blue-txt);font-weight:700}
#lead .ltitle{margin-top:14px;font-size:clamp(24px,4vw,32px);font-weight:600;letter-spacing:-.02em}
#lead .lsub{margin-top:11px;font-size:13px;line-height:1.7;color:var(--ink-2)}
#lead .lsub b{color:var(--ink);font-weight:600}
#leadForm{margin-top:24px}
#lead .lrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
#lead .lf{display:block;position:relative}
#lead .lf.lfull{grid-column:1/-1;margin-bottom:14px}
#lead .lf span{display:block;font-size:11px;letter-spacing:.12em;color:var(--ink-3);
  margin-bottom:7px;text-transform:uppercase}
#lead .lf span i{color:var(--blue);font-style:normal}
#lead input,#lead textarea{width:100%;padding:12px 14px;border-radius:13px;
  background:rgba(255,255,255,.045);border:1px solid rgba(245,245,247,.11);
  color:var(--ink);font-size:14px;font-family:inherit;letter-spacing:0;
  transition:border-color .3s var(--ease),background .3s var(--ease);outline:none}
#lead input::placeholder,#lead textarea::placeholder{color:rgba(245,245,247,.24)}
#lead input:focus,#lead textarea:focus{border-color:rgba(41,151,255,.62);background:rgba(41,151,255,.07)}
#lead textarea{resize:vertical;min-height:82px;line-height:1.6}
#lead .lchips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
#lead .lchip{padding:8px 14px;border-radius:100px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(245,245,247,.11);
  color:rgba(245,245,247,.66);font-size:12.5px;font-family:inherit;
  transition:.3s var(--ease)}
#lead .lchip:hover{color:#fff;border-color:rgba(245,245,247,.22)}
#lead .lchip.on{background:rgba(41,151,255,.16);border-color:rgba(41,151,255,.55);color:#cfe8ff}
#lead .lerr{margin:0 0 12px;font-size:12.5px;line-height:1.6;color:#ff8a8a;min-height:0}
#lead .lerr a{color:#ff8a8a;text-decoration:underline}
#lead .lsub-btn{width:100%;padding:15px;border:0;border-radius:14px;cursor:pointer;
  background:var(--blue);color:#fff;font-size:14px;font-weight:600;letter-spacing:.04em;
  font-family:inherit;transition:.35s var(--ease);
  box-shadow:0 12px 30px rgba(41,151,255,.3)}
#lead .lsub-btn:hover{background:#4aa8ff;transform:translateY(-1px)}
#lead .lsub-btn[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}
#lead .lsub-btn.ghost{background:rgba(255,255,255,.07);box-shadow:none;color:var(--ink)}
#lead .lsub-btn.ghost:hover{background:rgba(255,255,255,.12)}
#lead .lok{text-align:center;padding:14px 0 4px}
#lead .lokic{width:52px;height:52px;margin:6px auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:22px;color:#7ff0c0;
  background:rgba(41,255,180,.1);border:1px solid rgba(41,255,180,.32)}
#lead .lokt{font-size:21px;font-weight:600}
#lead .loks{margin:10px 0 22px;font-size:13px;line-height:1.7;color:var(--ink-2)}
@media(max-width:640px){
  #lead{padding:14px;align-items:flex-end}
  #lead .lpanel{padding:28px 20px 22px;border-radius:22px;max-height:calc(100dvh - 28px)}
  #lead .lrow{grid-template-columns:1fr;gap:10px}
  #lead .lchip{padding:7px 12px;font-size:12px}
}

/* ---------- 竖屏内容：UX 设计稿背景（深蓝网格 + 线框标注） ---------- */
.uxbg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  transform:translate3d(calc(var(--gx,0px) * .45),calc(var(--gy,0px) * .45),0)}
/* 深蓝氛围：和前后几屏的 aura 同一套色系 */
.uxbg .uxaura{position:absolute;inset:0;
  background:
    radial-gradient(120% 78% at 50% 6%,rgba(41,151,255,.20),transparent 60%),
    radial-gradient(80% 58% at 86% 94%,rgba(96,180,255,.13),transparent 58%),
    radial-gradient(70% 60% at 14% 88%,rgba(30,110,210,.20),transparent 62%),
    #05080f}
/* 标准单位的方形格子：16px 细格（2×8pt） + 96px 主格（12×8pt），两个方向等距 = 正方格 */
.uxbg .uxgrid{position:absolute;inset:-6%;opacity:.9;
  background-image:
    linear-gradient(rgba(126,195,255,.15) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,195,255,.15) 1px,transparent 1px),
    linear-gradient(rgba(126,195,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,195,255,.06) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,16px 16px,16px 16px;
  mask-image:radial-gradient(78% 70% at 50% 50%,#000,transparent 84%);
  -webkit-mask-image:radial-gradient(78% 70% at 50% 50%,#000,transparent 84%)}
/* 主格交点上的对齐点 */
.uxbg .uxdots{position:absolute;inset:-6%;opacity:.55;
  background-image:radial-gradient(rgba(170,220,255,.95) 1.1px,transparent 1.7px);
  background-size:96px 96px;
  mask-image:radial-gradient(74% 66% at 50% 50%,#000,transparent 82%);
  -webkit-mask-image:radial-gradient(74% 66% at 50% 50%,#000,transparent 82%)}
/* 线框 / 标注层 */
.uxbg .uxwire{position:absolute;inset:0;opacity:.6}
.uxbg .uxwire svg{position:absolute;width:100%;height:100%;display:block}
.uxbg .uxwire svg .ln{fill:none;stroke:rgba(126,195,255,.42);stroke-width:1}
.uxbg .uxwire svg .ln.dim{stroke:rgba(126,195,255,.34);stroke-dasharray:6 5}
.uxbg .uxwire svg .fill{fill:rgba(41,151,255,.045);stroke:rgba(126,195,255,.30);stroke-width:1}
.uxbg .uxwire svg .hd{fill:rgba(126,195,255,.55)}
.uxbg .uxwire svg text{fill:rgba(180,220,255,.34);font:600 9px -apple-system,"SF Pro Text",sans-serif;
  letter-spacing:.12em}
@media(max-width:760px){
  .uxbg .uxgrid{background-size:64px 64px,64px 64px,16px 16px,16px 16px}
  .uxbg .uxdots{background-size:64px 64px;opacity:.42}
  .uxbg .uxwire{opacity:.42}
}

/* ---------- 竖屏内容：手机框里放竖版片子 ---------- */
.verts .wrap{padding:0 30px;text-shadow:none}   /* 本屏标题不要投影 */
.verts .eyebrow{margin-bottom:14px}
.verts .h1{font-size:clamp(32px,4.6vw,64px)}
.verts .h2{margin-top:10px}
.phones{display:flex;gap:clamp(14px,2vw,32px);justify-content:safe center;align-items:center;flex-wrap:nowrap;
  margin-top:clamp(20px,3.2vh,38px);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.phones::-webkit-scrollbar{display:none;width:0;height:0}
.phone{position:relative;flex:0 0 auto;height:clamp(260px,54vh,500px);width:auto;aspect-ratio:9 / 19.2;
  /* 圆角按机身宽度取比例，画框放大缩小它跟着走；纵轴 = 横轴 × 9/19.2，
     这样百分比两轴不相等也不会被拉成椭圆，永远是正圆角 */
  --pr:13.6%;
  border-radius:var(--pr) / calc(var(--pr) * .46875);
  padding:clamp(4px,.55vw,7px);
  background:linear-gradient(155deg,#3a3f47,#15181d 38%,#07080a);
  box-shadow:0 26px 60px rgba(0,0,0,.62),0 0 0 1px rgba(245,245,247,.10),
             inset 0 0 0 1px rgba(255,255,255,.06);
  opacity:0;transform:translateY(26px);transition:.9s var(--ease)}
section.in .phone{opacity:1;transform:none}
section.in .phone:nth-child(1){transition-delay:.28s}
section.in .phone:nth-child(2){transition-delay:.4s}
.phone::after{content:'';position:absolute;left:50%;top:calc(clamp(4px,.55vw,7px) + 5px);
  transform:translateX(-50%);width:34%;height:clamp(4px,.5vw,6px);border-radius:6px;
  background:#000;z-index:3;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pscreen{position:relative;width:100%;height:100%;border-radius:inherit;overflow:hidden;background:#000;
  container-type:inline-size}
.ui{position:absolute;inset:0;z-index:4;pointer-events:none;text-align:left}
/* 淘宝商品页 */
.tbui .tbtop{position:absolute;left:0;right:0;top:0;height:12cqw;display:flex;align-items:center;gap:2.4cqw;
  padding:0 3.4cqw;background:#fff}
.tbsearch{flex:1;height:7cqw;border-radius:4cqw;background:rgba(240,242,245,.96);
  display:flex;align-items:center;padding:0 3cqw;font-style:normal;font-size:2.9cqw;color:#9aa0a6;
  overflow:hidden;white-space:nowrap}
.tbcart{width:6.4cqw;height:6.4cqw;border-radius:2cqw;background:#ff5000;flex:0 0 auto;
  box-shadow:inset 0 0 0 1.6cqw rgba(255,255,255,.85)}
.tbp{background:#fff;display:flex;flex-direction:column;text-align:left}
.tbvid{flex:0 0 auto;width:100%;height:133.33cqw;overflow:hidden;background:#000}
.tbvid video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.tbpanel{flex:1;padding:3cqw 3.4cqw 16cqw;background:#fff;
  display:flex;flex-direction:column;gap:1.8cqw;overflow:hidden}
.tbprice{color:#ff2e00;font-size:3.4cqw;font-weight:700;display:flex;align-items:baseline;gap:1.6cqw}
.tbprice b{font-size:4.6cqw;letter-spacing:-.02em}
.tbprice s{color:#b9bec6;font-size:2.6cqw;font-weight:400}
.tbline{height:2.2cqw;border-radius:1cqw;background:#eceef1}
.tbline.short{width:62%}
.tbsold{font-style:normal;color:#9aa0a6;font-size:2.5cqw;font-weight:400;margin-left:auto;white-space:nowrap}
.tbtitle{font-size:2.9cqw;line-height:1.4;color:#1f2329;font-weight:600;letter-spacing:.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tbcoup{display:flex;gap:1.2cqw;overflow:hidden}
.tbcoup i{font-style:normal;flex:0 0 auto;font-size:2.2cqw;color:#ff2e00;white-space:nowrap;
  border:1px solid rgba(255,46,0,.5);border-radius:1cqw;padding:.7cqw 1.6cqw;background:rgba(255,46,0,.05)}
.tbshop{display:flex;align-items:center;gap:1.6cqw;margin-top:.2cqw}
.tbshopav{width:5.8cqw;height:5.8cqw;border-radius:1.4cqw;flex:0 0 auto;
  background:linear-gradient(135deg,#8fd6c0,#2f9e78)}
.tbshopav.tbav2{background:linear-gradient(135deg,#ffd9a8,#ff8a3c)}
.tbshopav.tbav3{background:linear-gradient(135deg,#cfe4ff,#7aa7e8)}
.tbshop span{flex:1;font-size:2.6cqw;color:#333;white-space:nowrap;overflow:hidden}
.tbshop b{flex:0 0 auto;font-size:2.3cqw;color:#ff5000;font-weight:500;
  border:1px solid rgba(255,80,0,.55);border-radius:4cqw;padding:.9cqw 2.6cqw}
.tbsku{display:flex;gap:1.4cqw;margin-top:.4cqw;overflow:hidden}
.tbsku i{width:auto;min-width:0;padding:0 2cqw;height:5.4cqw;border-radius:1.2cqw;
  background:#f5f6f8;border:1px solid #e8eaee;font-style:normal;font-size:2.3cqw;color:#555;
  display:flex;align-items:center;white-space:nowrap}
.tbbot{position:absolute;left:0;right:0;bottom:0;height:14cqw;display:flex;gap:2cqw;align-items:center;
  padding:0 3cqw;background:#fff;border-top:1px solid #f0f1f3}
.tbadd,.tbbuy{flex:1;height:7.6cqw;border-radius:4cqw;display:flex;align-items:center;justify-content:center;
  font-size:2.9cqw;font-weight:600;letter-spacing:.02em}
.tbadd{background:#ffe7cc;color:#ff5a00}
.tbbuy{background:linear-gradient(90deg,#ff7a18,#ff2e00);color:#fff}
/* 抖音 */
.dyui .dyside{position:absolute;right:3cqw;bottom:23cqw;display:flex;flex-direction:column;align-items:center;gap:3.6cqw}
.dyav{width:9.4cqw;height:9.4cqw;border-radius:50%;background:rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(255,255,255,.8)}
.dyit{display:flex;flex-direction:column;align-items:center;gap:.6cqw}
.dyit svg{width:7.4cqw;height:7.4cqw;fill:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.dyit span{font-size:2.8cqw;color:#fff;opacity:.94;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.dyfoot{position:absolute;left:3.2cqw;right:12cqw;bottom:7.2cqw;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.55)}
.dyfoot b{display:block;font-size:3.5cqw;font-weight:600}
.dyfoot span{display:block;font-size:3.2cqw;opacity:.95;margin-top:.9cqw;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dyfoot em{display:block;font-style:normal;font-size:2.6cqw;opacity:.82;margin-top:1.4cqw}
.dybar{position:absolute;left:0;right:0;bottom:0;height:.9cqw;background:rgba(255,255,255,.26)}
.dybar::after{content:'';position:absolute;left:0;top:0;height:100%;width:36%;background:rgba(255,255,255,.92)}
/* 小红书 */
.xhsui::before{content:'';position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(transparent,rgba(0,0,0,.52))}
.xhsui .xhstop{position:absolute;left:0;right:0;top:0;height:11cqw;display:flex;align-items:center;
  justify-content:space-between;padding:0 3.4cqw;
  background:linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,0))}
.xhsback{width:5.4cqw;height:5.4cqw;border-left:1.1cqw solid #fff;border-bottom:1.1cqw solid #fff;
  transform:rotate(45deg);opacity:.96;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.xhsmore{display:flex;gap:1.4cqw;align-items:center}
.xhsmore i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#fff;opacity:.92;
  box-shadow:0 1px 3px rgba(0,0,0,.55)}
.xhsui .xhsside{position:absolute;right:3cqw;bottom:21cqw;display:flex;flex-direction:column;
  align-items:center;gap:3.4cqw}
.xhsav{position:relative;width:9.4cqw;height:9.4cqw;border-radius:50%;background:rgba(255,255,255,.92);
  box-shadow:0 0 0 .6cqw rgba(255,255,255,.26)}
.xhsav::after{content:'+';position:absolute;left:50%;bottom:-1.8cqw;transform:translateX(-50%);
  width:4.6cqw;height:4.6cqw;border-radius:50%;background:#ff2442;color:#fff;font-size:3.6cqw;
  font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.4)}
.xhsit{display:flex;flex-direction:column;align-items:center;gap:.6cqw}
.xhsit svg{width:7cqw;height:7cqw;fill:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.xhsit span{font-size:2.7cqw;color:#fff;opacity:.96;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.xhsui .xhsfoot{position:absolute;left:3.4cqw;right:13cqw;bottom:6.6cqw;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.55)}
.xhsfoot b{display:block;font-size:3.6cqw;font-weight:600}
.xhsfoot p{font-size:3.1cqw;line-height:1.36;margin-top:1cqw;opacity:.96;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xhstag{display:flex;flex-wrap:wrap;gap:1.6cqw;margin-top:1.3cqw}
.xhstag em{font-style:normal;font-size:2.7cqw;opacity:.92;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.xhsbar{position:absolute;left:0;right:0;bottom:0;height:.9cqw;background:rgba(255,255,255,.28)}
.xhsbar::after{content:'';position:absolute;left:0;top:0;height:100%;width:32%;background:#ff2442}
/* 五台手机时压一点高度，宽屏也能一行排下 */
.phones.five .phone{height:clamp(232px,42vh,400px)}
.pscreen video{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
/* 小红书壳里的片子按封面铺满（原生 9:16，裁掉一点点上下） */
.phone.xhs video{object-fit:cover}
.pnote{margin-top:clamp(14px,2.2vh,24px);font-size:11.5px;letter-spacing:.16em;
  color:rgba(245,245,247,.56)}
.vonly{display:none}
/* 六/七台手机（桌面）：宽度按容器均分，高度跟 9:19.2 走 —— 多一台也不用缩到看不清。
   窄屏走下面的横滑模式，不要套这条宽度，否则百分比会吃到 .phones 的左右 padding。 */
@media(min-width:1121px){
  .phones.six,.phones.seven{--pg:clamp(10px,1.5vw,26px);gap:var(--pg)}
  .phones.six .phone{width:calc((100% - 5 * var(--pg)) / 6);height:auto;aspect-ratio:9 / 19.2}
  .phones.seven .phone{width:calc((100% - 6 * var(--pg)) / 7);height:auto;aspect-ratio:9 / 19.2}
}
@media(max-width:1120px){
  .phones{gap:18px;margin-top:16px;flex-wrap:nowrap;justify-content:flex-start;    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    padding:2px calc(50% - 14.1vh);scrollbar-width:none;-ms-overflow-style:none}
  .phones::-webkit-scrollbar{display:none;width:0;height:0}
  .phone{flex:0 0 auto;height:clamp(290px,60vh,580px);padding:5px;scroll-snap-align:center;
    opacity:.55;filter:saturate(.62) brightness(.82);transform:scale(.92);
    transition:opacity .55s var(--ease),filter .55s var(--ease),transform .55s var(--ease)}
  .phone.act{opacity:1;filter:none;transform:none}
  .pnote{margin-top:10px}
  .pnote{font-size:10.5px;letter-spacing:.1em;margin-top:12px}
}

/* ---------- 03.2 多屏检查：十家平台的真实样张排成一条轮播 ----------
   素材就是检查页里那十张卡（photos/fit/*.webp），统一高度、按各自画幅出宽，
   竖卡高、横卡矮，底部对齐 —— 一排看过去能直接读出「不同平台不同画幅」。
   轮播是纯 CSS 动画（两份内容 + translateX(-50%)），悬停暂停，不写 JS。 */
.fitstrip .wrap{padding:0 26px;text-shadow:none;max-width:1180px}
.fitstrip .eyebrow{margin-bottom:14px}
.fitstrip .h1{color:var(--ink);font-size:clamp(30px,4.2vw,58px)}
.fitstrip .h2{margin:10px auto 0;max-width:760px;color:var(--ink2);
  font-size:clamp(13px,1.42vw,17px);line-height:1.62;text-wrap:pretty}
.fitrail{margin-top:clamp(16px,2.6vh,28px);overflow:hidden;
  /* 铺到屏幕两边：从 wrap 内容区向外各扩 (100% - 100vw)/2，不写死 vw 偏移 */
  width:100vw;margin-inline:calc((100% - 100vw) / 2);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%)}
.fitcar{--fg:clamp(12px,1.5vw,18px);display:flex;align-items:flex-end;gap:var(--fg);
  width:max-content;animation:fitRun 54s linear infinite;will-change:transform}
@keyframes fitRun{
  from{transform:translateX(0)}
  to  {transform:translateX(calc(-50% - var(--fg) / 2))}
}
/* 2026-10-29 老苗：鼠标移上去不要停（原来 hover 就 pause）。
   只留键盘聚焦时暂停，Tab 过去能定住看某一屏，鼠标划过照旧流动 */
.fitrail:focus-within .fitcar{animation-play-state:paused}
.fcard{margin:0;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px}
.fcard .fimg{height:clamp(164px,29vh,288px);border-radius:13px;overflow:hidden;background:#fff;
  box-shadow:0 10px 24px rgba(59,46,39,.16),0 0 0 1px rgba(59,46,39,.10)}
.fcard .fimg img{display:block;height:100%;width:auto}
/* 横画幅（首图 / 播放器）压低一档，整排才不会一头重 */
.fcard.h .fimg{height:clamp(84px,13vh,124px)}
/* 名字与规格竖着放：横排会把卡片撑得比图还宽，竖卡就显得孤零零 */
.fcard figcaption{display:flex;flex-direction:column;align-items:center;gap:1px;
  font-family:var(--hand);font-size:11.5px;letter-spacing:.04em;
  color:var(--ink2);white-space:nowrap;line-height:1.35}
.fcard figcaption i{font-style:normal}
.fcard figcaption b{color:var(--ink);font-weight:700}
.fitfoot{margin-top:clamp(16px,2.4vh,26px);display:flex;flex-direction:column;align-items:center;gap:9px}
.fline{font-family:var(--hand);font-size:12.5px;letter-spacing:.03em;color:var(--ink3);text-wrap:pretty}
.fitgo{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:100px;
  background:var(--coral);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.04em;
  text-decoration:none;box-shadow:0 8px 20px rgba(255,107,107,.32);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.fitgo em{font-style:normal;font-size:11px;opacity:.9}
.fitgo:hover{transform:translateY(-2px);background:#FF5F5F;box-shadow:0 12px 26px rgba(255,107,107,.42)}
@media(max-width:760px){
  .fitstrip .wrap{padding:0 14px}
  .fitstrip .eyebrow{margin-bottom:11px}
  .fcard .fimg{height:clamp(132px,25vh,206px);border-radius:11px}
  .fcard.h .fimg{height:clamp(68px,11vh,100px)}
  .fcard figcaption{font-size:11.5px}
  .fcard figcaption i{font-size:10.5px;letter-spacing:0}
  .fline{max-width:300px;text-align:center;font-size:11.5px;line-height:1.7}
  .fitgo{font-size:12px;padding:9px 17px}
}
@media(prefers-reduced-motion:reduce){
  .fitcar{animation:none}
  .fitrail{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .fitrail::-webkit-scrollbar{display:none;width:0;height:0}
  .fcard{scroll-snap-align:center}
}

/* ---------- 案例：一屏四张，横向滑动 ---------- */
.casesec{align-items:stretch;justify-content:flex-start;background:#05070d}
.casesec .fade{z-index:7}
.cases{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;
  scrollbar-width:none;-ms-overflow-style:none}
.cases::-webkit-scrollbar{display:none;width:0;height:0}
.casesec .cases{opacity:1}
.case{position:relative;flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.case .cp{position:absolute;inset:0;overflow:hidden;background:#000}
.case .cp video{opacity:1}
.case .cp video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
  filter:brightness(.78) saturate(1.02)}
.case .scrim{inset:0;transform:none !important;
  background:
    linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.52)),
    radial-gradient(58% 42% at 50% 52%,rgba(0,0,0,.56),transparent 74%)}
/* 夜景素材（追星）：原片本身极暗，单独抬高视频亮度并放松蒙版，否则整屏发黑 */
.case.night .cp video{filter:brightness(1.17) saturate(1.07) contrast(1.02)}
.case.night .scrim{background:
  linear-gradient(rgba(0,0,0,.20),rgba(0,0,0,.46)),
  radial-gradient(64% 48% at 50% 54%,rgba(0,0,0,.42),transparent 78%)}
/* 案例屏的黑底/暗角/网格不跟随重力偏移，避免一晃就露出底 */
.casesec .scrim,.casesec .grid,.casesec .fade,.casesec [data-d]{transform:none !important}
.case .wrap{z-index:6}
.cgo{display:inline-flex;align-items:center;gap:7px;margin-top:20px;padding-bottom:3px;
  font-size:12.5px;letter-spacing:.02em;text-decoration:none;color:rgba(245,245,247,.82);
  border-bottom:1px solid rgba(245,245,247,.32);transition:.3s var(--ease)}
.cgo:hover{color:#fff;border-bottom-color:rgba(245,245,247,.6)}
.cgo span{transition:.3s var(--ease)}
.cgo:hover span{transform:translateX(3px)}
.cpager{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(96px + env(safe-area-inset-bottom));
  z-index:8;display:flex;gap:clamp(16px,2.4vw,34px);justify-content:center;
  width:max-content;padding-bottom:12px}
.cprog{position:absolute;left:0;right:0;bottom:2px;
  height:2px;border-radius:2px;
  background:rgba(245,245,247,.20);overflow:hidden;--n:3}
.cprog b{display:block;width:100%;height:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#2997ff,#7cc8ff)}
/* 整条进度条按张数等分，走完一张只推进 1/n；分割线压在最上层，读起来是一条大条 */
.cprog::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    transparent 0,transparent calc(100% / var(--n) - 3px),
    rgba(4,7,13,.92) calc(100% / var(--n) - 3px),rgba(4,7,13,.92) calc(100% / var(--n)))}
.cpager button{position:relative;padding:0 0 9px;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:12px;letter-spacing:.04em;color:rgba(245,245,247,.52);
  text-shadow:0 2px 10px rgba(0,0,0,.85);
  transition:color .3s var(--ease);white-space:nowrap}
.cpager button{color:rgba(245,245,247,.52)}
.cpager button.on{color:#fff}
.cnav{position:absolute;top:50%;transform:translateY(-50%);z-index:9;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;color:rgba(245,245,247,.85);font-family:inherit;
  background:rgba(12,16,24,.42);border:1px solid rgba(245,245,247,.16);
  backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);
  opacity:0;transition:opacity .35s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.cnav.prev{left:26px}
.cnav.next{right:26px}
.casesec:hover .cnav{opacity:1}
.cnav:hover{background:rgba(41,151,255,.9);border-color:rgba(41,151,255,.9);color:#fff}
.cnav.off{opacity:0 !important;pointer-events:none}
@media(hover:none){.cnav{display:none}}
@media(max-width:640px){
  .cpager{bottom:calc(88px + env(safe-area-inset-bottom));gap:14px}
  .cpager button{font-size:11px}
}

/* ---------- 首屏服务标签（纯文字，不做按钮形态） ---------- */
.heroTags{margin-top:24px;display:flex;flex-wrap:wrap;gap:5px 17px;justify-content:center;
  font-size:clamp(11.5px,1.12vw,13.5px);line-height:1.9;
  color:rgba(245,245,247,.60);letter-spacing:.06em;font-weight:400}
.heroTags span{position:relative}

/* ---------- 首屏卖点行（2026-10-28）：一行纯文字 + 彩色圆点，不做胶囊，别抢下面两颗按钮 ---------- */
.hPts{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 18px;
  font-size:12px;line-height:1.9;
  color:var(--ink2);letter-spacing:.06em}
.hPts span{position:relative;white-space:nowrap}
/* 2026-10-29 老苗：把每个词前面那颗彩色小圆点拿走，只留纯文字。
   要恢复就把下面 ::before 那颗 7px 圆点连同五条配色加回来。 */
/* 2026-10-30：这里原本还有一条 `.hPts + .heroBtns{margin-top:26px}`，已删 ——
   它与下面 .heroSec .heroBtns 同为 (0,2,0) 且在样式表更靠前，从来没生效过（死代码）。
   卖点行与按钮的间距只由 .heroSec .heroBtns 的 margin-top 决定，别再往这里加。 */

/* ---------- 首屏两个入口 ---------- */
.heroBtns{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:54px}
/* 小球 49px 高，坐在第一个按钮上；标签到按钮至少留 50px，别让它顶到「AIGC 影像」 */
.hbtn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:100px;
  font-size:12.5px;letter-spacing:.04em;text-decoration:none;cursor:pointer;
  color:rgba(245,245,247,.88);background:rgba(255,255,255,.055);
  border:1px solid rgba(245,245,247,.15);
  backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  /* 逐条列属性而不是 transition:all —— 目的是把 outline 排除在外：
     all 会让焦点环也跟着渐变进场，键盘用户按 Tab 后要等半拍才看到环。 */
  transition:color .35s var(--ease),background-color .35s var(--ease),
             border-color .35s var(--ease),box-shadow .35s var(--ease),
             transform .35s var(--ease),opacity .35s var(--ease);
  opacity:0;transform:translateY(14px)}
section.in .hbtn{opacity:1;transform:none}
section.in .hbtn:nth-child(1){transition-delay:.5s}
section.in .hbtn:nth-child(2){transition-delay:.56s}
/* 悬停只给真有指针的设备：iOS 的 :hover 是粘滞的，点完抬起还停在悬停态，比没有更糟 */
@media (hover:hover) and (pointer:fine){
  .hbtn:hover{background:rgba(255,255,255,.13);border-color:rgba(245,245,247,.3);color:#fff;
    transform:translateY(-1px)}
}
.hbtn .lt{width:6px;height:6px;border-radius:50%;background:#A855F7;flex:0 0 auto;
  box-shadow:0 0 8px rgba(168,85,247,.85)}
.hbtn em{font-style:normal;font-size:10px;letter-spacing:.14em;font-weight:700;
  padding:2px 6px;border-radius:5px;color:#8ec8ff;
  background:rgba(41,151,255,.16);border:1px solid rgba(41,151,255,.32)}
/* 整词英文放不下字距，收一点，跟中文标签并排才不散 */
.hbtn em.en{font-size:10.5px;letter-spacing:.02em;padding:2px 7px}
.hbtn .arw{font-style:normal;font-size:11px;color:rgba(245,245,247,.45);transition:.3s var(--ease)}
.hbtn:hover .arw{color:#fff;transform:translate(1px,-1px)}
/* 次要入口：员工登录 / 海外专栏 —— 比主按钮低一档，贴着按钮组下面一行 */
.heroLinks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;
  margin-top:20px;font-size:11.5px;letter-spacing:.04em;
  opacity:0;transform:translateY(10px);transition:.9s var(--ease)}
section.in .heroLinks{opacity:1;transform:none;transition-delay:.64s}
.heroLinks .hlink{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  white-space:nowrap;color:rgba(245,245,247,.58);transition:.3s var(--ease)}
.heroLinks .hlink:hover{color:#fff}
.heroLinks .hlink .ld{width:6px;height:6px;border-radius:50%;background:#A855F7;flex:0 0 auto;
  box-shadow:0 0 8px rgba(168,85,247,.9);animation:pulse 2.2s infinite}
.heroLinks .hlink em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  padding:2px 5px 2.5px;border-radius:4px;
  color:rgba(245,245,247,.62);background:rgba(255,255,255,.1);border:1px solid rgba(245,245,247,.14)}
.heroLinks .hlink .arw{font-style:normal;font-size:10px;color:rgba(245,245,247,.42);
  transition:.3s var(--ease)}
.heroLinks .hlink:hover .arw{color:#fff;transform:translate(1px,-1px)}
.heroLinks .hdot{width:3px;height:3px;border-radius:50%;background:rgba(245,245,247,.24);flex:0 0 auto}
@media(max-width:640px){
  .heroTags{margin-top:18px;font-size:11px;gap:4px 13px;line-height:1.85}
  .heroBtns{margin-top:42px;gap:9px}
  .hbtn{padding:9px 17px;font-size:12px}
  .heroLinks{margin-top:16px;gap:10px;font-size:11px}
}
/* ---------- 轻提示 ---------- */
#toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:400;
  transform:translate(-50%,10px);opacity:0;pointer-events:none;
  padding:10px 18px;border-radius:100px;font-size:12.5px;color:#fff;
  max-width:calc(100vw - 48px);text-align:center;line-height:1.5;
  background:rgba(18,20,26,.88);border:1px solid rgba(245,245,247,.14);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 页脚：内部版本 + 影像声明 ---------- */
.foot{max-width:900px;margin:34px auto 0;padding-top:15px;
  border-top:1px solid rgba(245,245,247,.13);
  display:flex;align-items:flex-start;gap:16px;text-align:left}
.fver{flex:0 0 auto;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  color:rgba(70,168,255,.92);white-space:nowrap;line-height:1.7}
.fnote{font-size:10.5px;line-height:1.78;color:rgba(245,245,247,.56);letter-spacing:.01em}
.fnote a{color:rgba(245,245,247,.66);text-decoration:none;border-bottom:1px solid rgba(245,245,247,.28)}
.fnote a:hover{color:rgba(245,245,247,.88)}
/* ---------- 页脚 v2（2026-10-26）：公司 / 联系 两列 + 声明 + 底行 ----------
   颜色一律用 currentColor + opacity 继承，不写死色值 —— 页脚在深色联系屏和
   浅色（手账）主题下都会出现，写死就会有一边读不清。
   第三列「关注」（二维码占位）2026-10-27 老苗划掉，连 .fqr/.fqbox 一起删干净。 */
.foot{display:grid;grid-template-columns:1.45fr 1fr;gap:24px 34px;align-items:start}
.fcol{min-width:0}
.fcoH{display:block;font-size:9.5px;font-weight:700;letter-spacing:.18em;opacity:.5}
.fcol p{margin:7px 0 0;font-size:11.5px;line-height:1.8;opacity:.8}
.fcol b{font-weight:700;opacity:1}
.fcol a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;opacity:.92}
.fcol a:hover{opacity:1}
.foot .fnote{grid-column:1/-1;margin-top:4px}
.fbot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  margin-top:2px;padding-top:12px;border-top:1px solid currentColor;
  font-size:10.5px;opacity:.55}
.fbot a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.fbot a:hover{opacity:.9}
.fbot .fdot{opacity:.5}
/* 2026-10-31 老苗：页脚下面单独一行的版权小字。
   字号/透明度跟 .fbot 完全一致（10.5px / .55），不再单独淡，跟周围备案行统一 */
.fcopy{margin:6px 0 0;font-size:10.5px;opacity:.55;letter-spacing:.01em}
@media(max-width:840px){ .foot{grid-template-columns:1fr;gap:18px} .foot .fnote{margin-top:2px} }
/* 矮屏（1366×768 / 1280×800 这类）：联系屏收紧排版，标题不顶导航、页脚不掉出视口 */
@media(max-height:960px) and (min-width:641px){
  #feed section:last-child .h1{font-size:clamp(30px,5.8vw,70px)}
  #feed section:last-child .endline{margin-top:16px}
  #feed section:last-child .endsub{margin-top:10px;font-size:12px;line-height:1.55}
  #feed section:last-child .card{margin-top:16px;padding:18px 26px}
  #feed section:last-child .tags{margin-top:16px}
  #feed section:last-child .endhead{margin-top:18px}
  #feed section:last-child .presses{margin-top:10px}
  #feed section:last-child .press{padding:14px 22px}
  #feed section:last-child .foot{margin-top:10px;padding-top:8px}
}
/* 更矮的屏（1366×768 这类）：联系屏内容比一屏还高，改成顶部对齐 + 屏内可滚，
   否则标题会被顶栏切掉 */
@media(max-height:820px) and (min-width:641px){
  #feed section:last-child{align-items:flex-start}
  #feed section:last-child .wrap{width:100%;max-height:100dvh;max-height:100svh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;padding-top:82px;padding-bottom:22px;
    scrollbar-width:none}
  #feed section:last-child .wrap::-webkit-scrollbar{display:none}
}
@media(max-width:640px){
  .foot{flex-direction:column;gap:8px;margin-top:26px}
  .fnote{font-size:10px}
}

/* ====================================================================
   护眼 / 减弱动态 / 省流
   系统开了「减弱动态效果」，或地址带 ?calm=1（手动看效果用），
   <head> 里那段脚本会给 <html> 打上 .calm。这里管的是整个界面：
   粒子、光晕、扫描线、景深球、逐字入场、呼吸点、幻灯片、所有影像，
   一起静下来 —— 不是只把某一处视频关掉。

   做法是"把所有动画压成一次、时长几乎为零"，而不是逐个 animation:none：
   带 forwards/both 的开场动画会直接落到终态（文字就在位、不用等），
   循环动画跑完最后一帧就停住，新增的动效也自动被这条覆盖，不会漏。
   ==================================================================== */
html.calm *,html.calm *::before,html.calm *::after{
  animation-duration:.001ms!important;
  animation-delay:0s!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;
  transition-delay:0s!important;
}
/* 循环动画的最后一帧是"看不见"，减弱动态时得给回一个静态样子 */
html.calm #hint .dot{opacity:.85;transform:none}
html.calm #hint .chev{opacity:.5;transform:rotate(45deg)}
html.calm #boot .bp{opacity:.5;transform:none}
html.calm #hload{display:none!important}
/* 滚动视差与体感位移关掉（JS 里也不再写内联位移），文字原地不动 */
html.calm #feed{scroll-behavior:auto}
html.calm section .wrap{transform:none!important;opacity:1!important}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
  #feed{scroll-behavior:auto}
}

/* 矮屏（360×640 这类）：首屏多了一行次要入口，把下滑提示压到最底、收掉彩蛋那行，
   不然两行会叠在一起 */
@media(max-height:700px){
  .heroBtns{margin-top:30px}
  .heroLinks{margin-top:10px}
  #feed section.homeSec #hint{bottom:calc(10px + env(safe-area-inset-bottom))}
  #hint .hegg{display:none}
}

/* ================= 手机端正文整体放大（原来小字太小） ================= */
@media(max-width:640px){
  /* 首屏 */
  .heroTags{font-size:14px;line-height:1.9;gap:7px 16px}
  .hbtn{font-size:14px;padding:11px 21px}
  /* 「海外内容 English」比原来的 Oversea EN 长一截，一行塞不下两个按钮：
     改成等宽两行居中堆叠，比一长一短错位好看 */
  /* 这里不写 gap：首屏按钮组的间距由 .heroSec .heroBtns 统一管（≤820 是 8、≤640 是 6），
     在这一条里写 gap 是死声明（(0,1,0) 压不过 (0,2,0)），别再加回来 */
  .heroBtns{flex-direction:column;align-items:stretch;
    width:min(100%,278px);margin-left:auto;margin-right:auto;margin-top:54px}
  .heroBtns .hbtn{justify-content:center}
  /* 手机上两个入口都留着，一行排得下（老苗 2026-10-23 定）；极窄屏才允许折行 */
  .heroLinks{margin-top:15px;gap:9px;font-size:12px;flex-wrap:wrap;row-gap:6px}
  .tags.hero .tag{font-size:13px;padding:7px 14px}

  /* 通用正文与说明 */
  .h2{font-size:16.5px;line-height:1.5}
  .copy p{font-size:15.5px;line-height:1.75}
  .slogan{font-size:16px}
  .kvi .l{font-size:13.5px}
  .card .k{font-size:19px}
  .card .v{font-size:15.5px;line-height:1.6}
  .cell .ct{font-size:12px}
  .cell .cs{font-size:15px;line-height:1.6}
  .endhead{font-size:12.5px}
  .js{font-size:13.5px}
  .fnote{font-size:13px;line-height:1.72}

  /* 报道卡 */
  .press .ptag,.press .psrc{font-size:12px}
  .press .ptitle{font-size:17px}
  .press .pmeta{font-size:14.5px;line-height:1.66}
  .press .pgo{font-size:14px}
  .press.pin{margin-top:16px;padding:16px 17px}
  .press.pin .ptitle{font-size:16.5px;line-height:1.5}
  .press.pin .pmeta{font-size:14px;line-height:1.6;-webkit-line-clamp:8}
  .press.pin .ptag{font-size:12px;padding:6px 12px}
  .press.pin .psrc{font-size:12px}
  .press.pin .pgo{font-size:14px;margin-top:11px}

  /* 公司档案：百余人卡上的创作者提示 */
  .kvi.hl .hladd{font-size:10px;margin-top:6px;letter-spacing:.02em}

  /* 摄影棚 */
  .studio .stag{font-size:13px}
  .studio .sgo{font-size:14px}
  .studio .sk{font-size:12px;letter-spacing:.14em}
  .studio .sv{font-size:15.5px}
  .studio .cbtn{font-size:12.5px;padding:7px 11px}

  /* 竖屏内容：画框按屏宽撑满（宽度驱动，矮屏自动收），头部压到最小给它腾地方 */
  section.verts .wrap{padding:46px 14px 6px}
  section.verts .eyebrow{display:none}
  section.verts .h1{font-size:17px;line-height:20px;letter-spacing:.08em}
  section.verts .h2{display:none}          /* 文字并进下方 pnote，少占一行 */
  section.verts .hair{display:none}
  section.verts .phones{
    --ph:calc(100dvh - 216px);
    --pk:.84;                                /* 画框整体缩放系数，改这一个数即可 */
    --pw:min(calc((100vw - 28px) * var(--pk)),calc(var(--ph) * .46875));
    margin-top:9px;padding:2px calc(50% - var(--pw) / 2)}
  /* 屏高固定按 svh（地址栏展开时）算，地址栏收起时不跟着变，避免手机框被撑高裁切 */
  @supports (height:100svh){ section.verts .phones{--ph:calc(100svh - 216px)} }
  section.verts .phones.five .phone,
  section.verts .phones.six .phone,
  section.verts .phones.seven .phone{width:var(--pw);height:auto;aspect-ratio:9 / 19.2;
    padding:6px}
  section.verts .phone::after{top:11px;height:5px}
  section.verts .pnote{font-size:10px;margin-top:8px;letter-spacing:.04em;line-height:1.5}
  .vonly{display:inline}
}
@media(max-width:380px){
  section.verts .h1{font-size:15px}
}

























/* ==== SKIN:HANDCRAFT:START ==== */
/* =========================================================
   手账皮肤 · Handcraft Skin  v2026.10.20-1101
   只覆盖视觉层：底色 / 字体 / 卡片 / 装饰 / 地图配色
   不改任何布局尺寸逻辑，不动滚动与标签跳转
   ========================================================= */

:root{
  --paper:#FBF4E6;
  --paper2:#FFFCF3;
  --paper3:#FFF7E5;
  --ink:#3B2E27;
  --ink2:#6A574B;
  --ink3:#98857A;
  --line:rgba(59,46,39,.13);
  --glass:rgba(255,252,243,.82);

  --coral:#FF6B6B;
  --lemon:#FFC94B;
  --mint:#3FBF9A;
  --sky:#4C9AFF;
  --grape:#9B7EDE;
  --pink:#FF9EC4;

  --blue:var(--coral);
  --blue-txt:#C2544C;
  --blue-txt-hi:#B24A45;
  --chip-bg:#FFF3D2;
  --chip-line:rgba(59,46,39,.18);

  --hand:"HanziPen SC","Hannotate SC","Yuanti SC","PingFang SC","Microsoft YaHei",sans-serif;
  /* 大标题的字体栈：**不要把圆体（Yuanti SC）放在前面**。
     Mac 上有 Yuanti SC、Windows 上没有，落到微软雅黑 —— 同一句话在两边一个字细长、一个字方正，
     字带（.sh-cell）的间距也跟着变（2026-10-29 老苗在 Mac 上看到的「间距变大、细长」就是它）。
     现在两边都走系统黑体：Mac 苹方 / Windows 雅黑，字重、字面率都接近。 */
  --round:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Microsoft YaHei",sans-serif;

  --bg:var(--paper);
  --ease:cubic-bezier(.28,.11,.32,1);
}

/* ---------- 纸底：奶油纸 + 点阵 ---------- */
html{background:var(--paper)}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--round);
  letter-spacing:0;
}
#feed{
  background-color:var(--paper);
  background-image:radial-gradient(rgba(59,46,39,.095) 1px,transparent 1.15px);
  background-size:22px 22px;
}
.casesec{background:transparent}

/* 所有文字去掉黑影（深色底才需要，纸面上只会糊） */
.wrap{text-shadow:none}
.h1,.h2,.copy p,.cell .cs,.kvi .n,.kvi .l,.press .ptitle,.press .pmeta{text-shadow:none}

/* ---------- 背景氛围：糖果水彩 ---------- */
.aura{background:
  radial-gradient(120% 82% at 48% 2%,rgba(255,201,75,.30),transparent 62%),
  radial-gradient(92% 64% at 94% 96%,rgba(255,158,196,.24),transparent 64%),
  radial-gradient(78% 62% at 4% 88%,rgba(76,154,255,.14),transparent 66%)}
.grid{
  opacity:.55;
  background-image:
    linear-gradient(rgba(59,46,39,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(59,46,39,.055) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(78% 70% at 50% 50%,#000,transparent 86%);
  -webkit-mask-image:radial-gradient(78% 70% at 50% 50%,#000,transparent 86%)}
.fade.t{background:linear-gradient(var(--paper),rgba(251,244,230,0))}
.fade.b{background:linear-gradient(rgba(251,244,230,0),var(--paper))}

/* 景深球体 → 糖果水彩斑点 */
.orb{filter:blur(20px);opacity:.42}
.orb.s1{background:radial-gradient(circle at 34% 30%,rgba(255,201,75,.95),transparent 68%);box-shadow:none}
.orb.s2{background:radial-gradient(circle at 62% 38%,rgba(255,158,196,.92),transparent 70%);box-shadow:none}
.orb.s3{background:radial-gradient(circle at 50% 50%,rgba(76,154,255,.55),transparent 72%);
  border:0;box-shadow:none}

/* 3D 粒子层：手账版不用，彻底不出画 */
#gl{display:none !important}

/* ---------- 标题与文字 ---------- */
.h1{
  color:var(--ink);
  font-family:var(--round);
  font-weight:700;
  letter-spacing:.005em;
  line-height:1.06;
}
.h2{color:var(--ink2);font-weight:500;letter-spacing:.01em}
.copy p{color:var(--ink2)}
.copy b{color:var(--ink);font-weight:700}
.copy a{color:var(--coral);border-bottom:1.5px dashed rgba(255,107,107,.5);text-decoration:none}
.copy a:hover{border-bottom-style:solid}
.slogan{font-family:var(--hand);color:#C2544C;letter-spacing:.1em;font-weight:600}

/* 小标签 = 手写胶带贴纸 */
.eyebrow{
  font-family:var(--hand);
  font-size:13px;
  letter-spacing:.1em;
  text-transform:none;
  color:#7A4B2A;
  background:linear-gradient(180deg,#FFEDB4,#FFDD86);
  border:1.5px dashed rgba(59,46,39,.22);
  border-radius:9px 15px 10px 16px;
  box-shadow:2px 2px 0 rgba(59,46,39,.12);
  text-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:7px 16px;
  rotate:-1.4deg;
}
section.in .eyebrow{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  section.in .eyebrow{rotate:-1.4deg}
}

/* 分隔线 → 手绘波浪 */
.hair{
  width:148px;height:11px;
  background:none;
  box-shadow:none;
  border-radius:0;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 148 11'%3E%3Cpath d='M3 6.5q12-6 24 0t24 0t24 0t24 0t24 0t22 0' fill='none' stroke='%23FF6B6B' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:100% 100%;
}

/* ---------- 首屏标签：彩色圆点 ---------- */
.heroTags{color:var(--ink2);letter-spacing:.02em}
.heroTags span::before{
  content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:6px;vertical-align:1px;background:var(--coral);
}
.heroTags span:nth-child(2)::before{background:var(--lemon)}
.heroTags span:nth-child(3)::before{background:var(--mint)}
.heroTags span:nth-child(4)::before{background:var(--sky)}
.heroTags span:nth-child(5)::before{background:var(--grape)}
.heroTags span:nth-child(6)::before{background:var(--pink)}

/* ---------- 按钮：纸片 + 硬投影 ---------- */
.hbtn{
  background:var(--paper2);
  border:2px solid var(--ink);
  color:var(--ink);
  font-weight:600;
  box-shadow:3px 3px 0 rgba(59,46,39,.78);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.hbtn:hover{background:#fff;color:var(--ink);border-color:var(--ink);
  box-shadow:4px 4px 0 rgba(59,46,39,.78)}
.hbtn .lt{background:var(--coral);box-shadow:0 0 0 3px rgba(255,107,107,.18)}
.hbtn em{color:#8A5A3B;background:#FFE9A8;border:1px solid rgba(59,46,39,.16);border-radius:4px}
.hbtn .arw{color:var(--ink3)}
.hbtn:hover .arw{color:var(--coral)}
/* 次要入口跟手账纸底走：墨色字 + 淡虚线感的 EN 小签 */
.heroLinks .hlink{color:var(--ink2)}
.heroLinks .hlink:hover{color:var(--coral)}
.heroLinks .hlink .ld{background:var(--grape);box-shadow:0 0 0 3px rgba(155,126,222,.18)}
.heroLinks .hlink em{color:#8A5A3B;background:#FFE9A8;border:1px solid rgba(59,46,39,.16)}
.heroLinks .hlink .arw{color:var(--ink3)}
.heroLinks .hlink:hover .arw{color:var(--coral)}
.heroLinks .hdot{background:rgba(59,46,39,.22)}
/* 「软件详细介绍」是普通站内入口，不是员工在线那盏灯：
   紫灯 + pulse 都收掉，换主按钮同款的珊瑚点（特异地压过 1554 行那组） */
.heroLinks .hlink.hlink-dl .ld{background:var(--coral);box-shadow:none;animation:none}

/* ---------- 首屏下滑提示：小贴纸 + 箭头 ---------- */
#hint .htxt{font-family:var(--hand);color:var(--ink2);letter-spacing:.22em;text-indent:.22em}
#hint .hegg{color:var(--ink3);font-family:var(--hand);letter-spacing:.06em}
#hint .ring{
  width:38px;height:38px;border-radius:50%;
  border:2px solid var(--ink);
  background:var(--lemon);
  box-shadow:2px 3px 0 rgba(59,46,39,.7);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  display:grid;place-items:center;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
/* 能点就得有手感：悬停抬一下，按下压进去（贴纸被按扁） */
#hint:hover .ring{transform:translateY(-2px);box-shadow:2px 5px 0 rgba(59,46,39,.7)}
#hint:active .ring{transform:translate(2px,3px);box-shadow:0 0 0 rgba(59,46,39,.7)}
#hint:focus-visible{outline:none}
#hint:focus-visible .ring{outline:3px solid var(--coral);outline-offset:3px}
#hint:focus-visible .htxt{color:var(--ink)}
#hint .dot{
  position:static;width:10px;height:10px;margin:0 0 3px 0;border-radius:0;
  background:none;box-shadow:none;
  border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
  transform:rotate(45deg);
  animation:bob 1.6s var(--ease) infinite;
}
@keyframes bob{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(2px,2px)}}
#hint .chev{display:none}
#hint.pulse .htxt{color:var(--ink);text-shadow:none}
#hint.pulse .ring{border-color:var(--ink);box-shadow:2px 3px 0 rgba(59,46,39,.7);animation:none}
#hint.pulse .chev{border-color:var(--ink)}

#hload{color:var(--ink3);font-family:var(--hand);letter-spacing:.2em}
#hload::before{border:2px solid rgba(59,46,39,.16);border-top-color:var(--coral)}

/* ---------- 开机 / 跳转遮罩 ---------- */
#boot{background:var(--paper)}
#boot .bt{color:var(--ink3);font-family:var(--hand);letter-spacing:.32em}
#boot .bp{background:var(--coral)}
#boot .bp:nth-child(2){background:var(--lemon)}
#boot .bp:nth-child(3){background:var(--mint)}

.bloom{background:radial-gradient(circle,rgba(255,201,75,.52),rgba(255,158,196,.20) 36%,transparent 66%)}
.beam{
  background:linear-gradient(90deg,transparent,rgba(255,201,75,0) 6%,#FF9EC4 50%,rgba(255,201,75,0) 94%,transparent);
  box-shadow:0 0 26px rgba(255,107,107,.5);
}

#jump{background:rgba(32,24,20,.68)}
#jump .jg{background:var(--paper);border-color:rgba(59,46,39,.18);box-shadow:0 28px 78px rgba(30,22,17,.42)}
#jump .jk{color:var(--ink3);letter-spacing:.2em}
#jump .jt{color:var(--ink);font-weight:700}
#jump .js{color:var(--ink3);font-family:var(--hand)}
#jump .jgo{background:var(--coral);box-shadow:none}
#jump .jgo:hover{box-shadow:0 14px 30px rgba(255,107,107,.34)}
#jump .jalt{background:rgba(255,255,255,.62);border-color:rgba(59,46,39,.18);color:var(--ink)}
#jump .jalt:hover{background:#fff;border-color:rgba(59,46,39,.32)}
#jump .jalt em{color:var(--ink3)}
#jump .jback{color:var(--ink3)}
#jump .jback:hover{color:var(--ink)}
#jump .jx{border-color:rgba(59,46,39,.16);background:rgba(255,255,255,.55);color:var(--ink3)}
#jump .jx:hover{background:#fff;color:var(--ink)}
#jump .jtip{color:rgba(59,46,39,.46);border-top-color:rgba(59,46,39,.1)}

/* ---------- 顶栏：一张纸 + 手写虚线 ---------- */
#top{
  background:rgba(255,252,243,.86);
  border-bottom:2px dashed rgba(59,46,39,.16);
  box-shadow:0 8px 22px rgba(59,46,39,.06);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
#logo img{filter:invert(1);opacity:.86}
#logo .full{color:var(--ink3);font-weight:500}
#logo .short{color:var(--ink);font-weight:700}
#logo .sep{background:rgba(59,46,39,.18)}
#nav button{
  background:rgba(255,255,255,.7);
  border:1.5px solid rgba(59,46,39,.16);
  color:var(--ink2);
  font-weight:600;
  box-shadow:1.5px 1.5px 0 rgba(59,46,39,.07);
}
#nav button:hover{background:#fff;color:var(--ink);border-color:rgba(59,46,39,.3)}
#nav button.on{
  background:var(--coral);color:#fff;border-color:var(--coral);
  box-shadow:2px 2px 0 rgba(59,46,39,.55);
}
#nav a.nav-x{
  background:rgba(255,255,255,.7);
  border:1.5px solid rgba(59,46,39,.16);
  color:var(--ink2);
  font-weight:600;
  box-shadow:1.5px 1.5px 0 rgba(59,46,39,.07);
  text-decoration:none;
}
#nav a.nav-x:hover{background:#fff;color:var(--ink);border-color:rgba(59,46,39,.3)}
#topProg{
  height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--coral),var(--lemon),var(--mint));
  box-shadow:none;
}
#staffBtn{
  background:var(--paper2);border:2px solid var(--ink);color:var(--ink);
  box-shadow:2px 2px 0 rgba(59,46,39,.7);
}
#staffBtn:hover{background:#fff;border-color:var(--ink)}
#staffBtn .ld{background:var(--grape);box-shadow:0 0 0 3px rgba(155,126,222,.2)}

/* 海外内容：柠檬黄小纸片，和「员工登录」并排但不抢它 */
#langBtn{
  background:#FFF3CE;border:2px solid var(--ink);color:var(--ink);font-weight:700;
  box-shadow:2px 2px 0 rgba(59,46,39,.7);
}
#langBtn:hover{background:#FFE9A8;border-color:var(--ink);box-shadow:3px 3px 0 rgba(59,46,39,.7)}
#langBtn em{background:var(--ink);color:#FFF6DC;font-weight:800;border-radius:5px}
#langBtn i{color:rgba(59,46,39,.55)}
#langBtn:hover i{color:var(--ink)}

/* ---------- 底栏 ---------- */
#bar{
  background:rgba(255,252,243,.94);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 rgba(59,46,39,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
#bar a{color:var(--ink2);font-weight:500}
#bar a:hover{color:var(--ink)}
#bar .sp{background:rgba(59,46,39,.18)}
#bar .cta{
  background:var(--coral);color:#fff;font-weight:700;
  box-shadow:2px 2px 0 rgba(59,46,39,.6);
}
#bar .cta:hover{background:#FF5252;color:#fff}
#bar a.tel{display:inline-flex;align-items:center;gap:6px}
#bar .bava{width:20px;height:20px;flex:0 0 auto;border-radius:50%;
  object-fit:cover;object-position:50% 46%;background:#EDE3D2;
  border:1.5px solid rgba(59,46,39,.66);display:block}
#bar .wx{
  appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;
  font:inherit;font-size:12.5px;letter-spacing:.02em;color:var(--ink2);
  cursor:pointer;white-space:nowrap;
}
#bar .wx:hover{color:var(--ink)}
#bar .wx.done{color:var(--grape)}

/* ---------- 便签卡（数据 / 客户 / 能力 / 联系） ---------- */
.card{
  background:var(--paper2);
  border:2px solid rgba(59,46,39,.14);
  border-radius:20px;
  box-shadow:5px 5px 0 rgba(59,46,39,.10);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  position:relative;
}
.card::before{
  content:'';position:absolute;left:50%;top:-11px;width:92px;height:20px;
  transform:translateX(-50%) rotate(-1.6deg);
  background:rgba(255,201,75,.85);border-radius:2px;
  box-shadow:0 2px 6px rgba(59,46,39,.10);
}
.card .k{color:var(--ink);font-weight:700}
.card .v{color:var(--ink2)}

.kv{gap:14px}
.kvi{
  background:var(--paper2);
  border:2px solid rgba(59,46,39,.13);
  border-radius:16px 22px 18px 20px;
  box-shadow:3px 3px 0 rgba(59,46,39,.09);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.kvi:nth-child(1){background:#FFF7DA}
.kvi:nth-child(2){background:#EAF8F1}
.kvi:nth-child(3){background:#FFEFF4}
.kvi:nth-child(4){background:#EDF4FF}
section.in .kvi:nth-child(1){rotate:-.9deg}
section.in .kvi:nth-child(2){rotate:.7deg}
section.in .kvi:nth-child(3){rotate:-.5deg}
section.in .kvi:nth-child(4){rotate:.8deg}
.kvi .n{color:var(--ink);font-weight:700;letter-spacing:-.02em}
.kvi .n .u{color:var(--coral)}
.kvi .l{color:var(--ink2)}
.kvi.hl{
  background:#FFF0C9;
  border-color:var(--coral);
  box-shadow:3px 3px 0 rgba(255,107,107,.30);
}
.kvi.hl:hover{background:#FFE8AE;border-color:var(--coral);box-shadow:4px 4px 0 rgba(255,107,107,.40)}
.kvi.hl:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.kvi.hl .n{color:#C2544C}
.kvi.hl .l{color:var(--ink)}
.kvi.hl .hladd{color:#C2544C;font-family:var(--hand);letter-spacing:.04em}

/* 客户分组 */
.grp{
  background:var(--paper2);
  border:2px solid rgba(59,46,39,.13);
  border-radius:18px 24px 18px 22px;
  box-shadow:4px 4px 0 rgba(59,46,39,.09);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.grp:nth-child(1){rotate:-.5deg}
.grp:nth-child(2){rotate:.5deg}
.grp .gt{border-bottom:2px dashed rgba(59,46,39,.16)}
.grp .gk{color:var(--ink);font-weight:700}
.grp .gs{color:var(--coral);font-family:var(--hand);letter-spacing:.14em}
.grp .cn{color:var(--ink);font-weight:700}
.grp .cd{color:var(--ink3)}
.grp .gi{padding:8px 0}

/* 能力格 */
.cell{
  background:var(--paper2);
  border:2px solid rgba(59,46,39,.13);
  border-radius:16px 22px 18px 20px;
  box-shadow:4px 4px 0 rgba(59,46,39,.09);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.cell:nth-child(odd){rotate:-.5deg}
.cell:nth-child(even){rotate:.5deg}
.cell .ct{color:var(--coral);font-family:var(--hand);letter-spacing:.16em}
.cell .cn{color:var(--ink)}
.cell .cs{color:var(--ink3)}

/* 联系页标签 */
.tags .tag{
  background:var(--paper2);
  border:2px solid var(--ink);
  color:var(--ink);
  box-shadow:3px 3px 0 rgba(59,46,39,.7);
  font-weight:600;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.tags .tag:nth-child(1){rotate:-1.2deg;background:#FFF0C9}
.tags .tag:nth-child(2){rotate:1deg;background:#EAF8F1}
.tags .tag:nth-child(3){rotate:-.8deg}
.tags .tag:hover{background:#fff;color:var(--ink)}
.tag-cta{background:var(--coral) !important;color:#fff !important;border-color:var(--ink) !important}
.tags .tag.tag-cta:hover{background:#FF5252 !important;color:#fff !important}
/* 微信同号：点了复制号码 */
.tags .tag-wx{appearance:none;-webkit-appearance:none;font-family:inherit;line-height:1.65;cursor:pointer;
  background:#EAF8F1;rotate:1deg}
.tags .tag-wx.done{background:#D9F2E4 !important}
/* 手机端换行占位：让「王经理」单独一行，两个动作按钮排第二行 */
.tags .tbrk{display:none}
.tags .tag-cta{rotate:-.8deg}
/* 联系人头像：贴在号码左边，圆片 + 手账描边（高度与其它标签对齐：28+2*7+2*2=46） */
.tags .tag-person{display:inline-flex;align-items:center;gap:9px;padding:6.5px 18px 6.5px 7px;
  text-decoration:none;text-align:left}
.tags .tag-person .ava{width:28px;height:28px;flex:0 0 auto;border-radius:50%;
  object-fit:cover;object-position:50% 50%;background:#EDE3D2;
  border:2px solid rgba(59,46,39,.86);box-shadow:1.5px 1.5px 0 rgba(59,46,39,.4);
  rotate:-3deg;display:block}
/* 手机上三颗标签要挤在一行：收窄内边距和字号 */
@media(max-width:640px){
  .tags{gap:7px}
  .tags .tag{padding:8px 11px;font-size:11.5px}
  .tags .tag-person{padding:7.5px 12px 7.5px 7px;gap:7px}
  .tags .tag-person .ava{width:20px;height:20px;border-width:1.5px}
  .tags .tbrk{display:block;flex:0 0 100%;height:0}
}

/* 报道卡 = 便签 + 胶带 */
.press{
  background:linear-gradient(180deg,#FFFDF2 0%,#FFF4CE 100%);
  border:2px solid rgba(59,46,39,.14);
  border-radius:18px 24px 20px 22px;
  box-shadow:4px 4px 0 rgba(59,46,39,.10);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.press::before{
  content:'';position:absolute;left:50%;top:-10px;width:84px;height:19px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(255,201,75,.85);border-radius:2px;
  box-shadow:0 2px 6px rgba(59,46,39,.10);
}
.press.pin::before{display:none}
.press:hover{box-shadow:5px 5px 0 rgba(255,107,107,.28)}
.press .ptag{
  background:#FFF;border:1.5px solid rgba(59,46,39,.16);
  color:#8A5A3B;text-shadow:none;font-family:var(--hand);
}
.press .psrc{color:var(--ink3);text-shadow:none}
/* 中文断行会拆词：balance 均分时把「一次 / 一百条」粘住，断点只会落在冒号后 */
.press .pnw{white-space:nowrap}
.press .ptitle{color:var(--ink);font-weight:700}
.press .pmeta{color:var(--ink2)}
.press .pgo{color:var(--coral);border-bottom-color:rgba(255,107,107,.5);text-shadow:none}
.press:hover .pgo{color:#C2544C;border-color:rgba(255,107,107,.8)}
.press.pin .pdata{color:var(--ink2)}
.press.pin .pdata b{color:var(--ink)}
.press.pin .pdata i{color:var(--ink3)}
.presses .press{background:linear-gradient(180deg,#FFFDF2 0%,#FFF4CE 100%)}

.endhead{color:var(--coral);font-family:var(--hand);letter-spacing:.24em}
.endline{background:linear-gradient(90deg,transparent,var(--coral),var(--lemon),transparent)}
.endsub{color:var(--ink2);text-shadow:none}

/* 页脚 */
.foot{border-top:2px dashed rgba(59,46,39,.16)}
.fver{color:var(--coral);font-family:var(--hand)}
.fnote{color:var(--ink3)}
.fnote a{color:var(--ink2);border-bottom:1px dashed rgba(59,46,39,.3)}

/* ---------- 摄影棚：拍立得 + 手绘地图 ---------- */
.sfac .big,.sfac .slides{
  border:8px solid #fff;
  border-radius:12px;
  background:#fff;
  box-shadow:0 12px 26px rgba(59,46,39,.16);
}
.sfac img{filter:saturate(1.06) brightness(1.02)}
.sfac .big::after{
  background:linear-gradient(transparent,rgba(59,46,39,.06) 45%,rgba(59,46,39,.55));
}
.sfac .cap{
  background:rgba(255,252,243,.92);
  border:1.5px solid rgba(59,46,39,.18);
  color:var(--ink);
  text-shadow:none;
  font-family:var(--hand);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.sfac .cap b{color:#C2544C}
.sfac .cap.cy{border-color:rgba(59,46,39,.18)}
.sfac .capS{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.sfac .nav{background:linear-gradient(transparent,rgba(255,252,243,.94))}
.sfac .nb{
  background:rgba(255,252,243,.95);border:1.5px solid var(--ink);
  color:var(--ink);box-shadow:1.5px 1.5px 0 rgba(59,46,39,.5);
}
.sfac .nb:hover{background:var(--coral);border-color:var(--ink);color:#fff}
.sfac .dt{background:rgba(59,46,39,.26)}
.sfac .dt.on{background:var(--coral);box-shadow:none}
.sfac .idx{color:var(--ink2)}
.sfac .idx b{color:var(--ink)}

.studio{
  background:var(--paper2);
  border:2px solid rgba(59,46,39,.14);
  border-radius:20px 26px 20px 24px;
  box-shadow:5px 5px 0 rgba(59,46,39,.10);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.studio .stag{
  background:#FFF0C9;border:1.5px dashed rgba(59,46,39,.22);
  color:#8A5A3B;text-shadow:none;font-family:var(--hand);
}
.studio .sname{color:var(--ink);font-weight:700}
.studio .sgo{color:var(--coral);font-family:var(--hand);font-weight:700}
.studio .saddr{color:var(--ink2)}
.studio .saddr b{color:var(--ink)}
.studio .cbtn{
  background:#fff;border:1.5px solid var(--ink);color:var(--ink);
  box-shadow:1.5px 1.5px 0 rgba(59,46,39,.5);
}
.studio .cbtn:hover{background:#FFF0C9}
.studio .cbtn.done{background:var(--mint);border-color:var(--ink);color:#fff}
.studio .sgrid{border-top:2px dashed rgba(59,46,39,.14)}
.studio .sk{color:var(--ink3);font-family:var(--hand);letter-spacing:.14em}
.studio .sv{color:var(--ink)}
.studio .mapbox{
  background:#FDF6E7;
  border:2px solid rgba(59,46,39,.16);
  border-radius:12px;
  box-shadow:inset 0 0 40px rgba(59,46,39,.05);
}
/* 地图配色：底 / 街区 / 路 / 地块 / 文字 全部改成手绘纸面 */
.studio .mapbox svg rect[fill="#0a1018"]{fill:#FDF6E7}
.studio .mapbox svg pattern path{stroke:rgba(59,46,39,.09)}
.studio .mapbox svg g[fill^="rgba(255,255,255,.05)"]{
  fill:rgba(63,191,154,.13);stroke:rgba(59,46,39,.14);
}
.studio .mapbox svg g[stroke^="rgba(255,255,255,.14)"]{stroke:rgba(59,46,39,.20)}
.studio .mapbox svg g[stroke^="rgba(255,255,255,.21)"]{stroke:rgba(59,46,39,.30)}
.studio .mapbox svg g[stroke^="rgba(58,196,220,.34)"]{stroke:rgba(255,107,107,.42)}
.studio .mapbox svg rect[fill^="rgba(58,196,220,.22)"]{
  fill:rgba(255,201,75,.55);stroke:rgba(255,107,107,.85);
}
.studio .mapbox svg circle[fill="#6fe0f0"]{fill:var(--coral);stroke:#fff}
.studio .mapbox svg circle[stroke^="rgba(58,196,220,.8)"]{stroke:rgba(255,107,107,.7)}
.studio .mapbox svg path[stroke^="rgba(58,196,220,.45)"]{stroke:rgba(59,46,39,.30)}
.studio .mapbox svg rect[fill^="rgba(6,20,26,.92)"]{
  fill:#FFFCF3;stroke:rgba(59,46,39,.22);
}
.studio .mapbox svg text{fill:#4A3A31}
.studio .mapbox svg text[fill="#c8f6fd"],
.studio .mapbox svg text[fill="#e8fbff"]{fill:#3B2E27}
.studio .mapbox svg text[fill^="rgba(180,240,250"]{fill:rgba(59,46,39,.6)}
.studio .mapbox svg text[fill^="rgba(245,245,247"]{fill:rgba(59,46,39,.55)}
.studio .mapbox svg path[stroke^="rgba(245,245,247"]{stroke:rgba(59,46,39,.5)}
.studio .mapbox svg path[fill^="rgba(245,245,247"]{fill:rgba(59,46,39,.6)}

/* ---------- 竖屏内容：浅纸 + UX 线框改铅笔稿 ---------- */
.uxbg .uxaura{background:
  radial-gradient(120% 78% at 50% 4%,rgba(255,201,75,.26),transparent 60%),
  radial-gradient(80% 58% at 88% 94%,rgba(255,158,196,.22),transparent 58%),
  radial-gradient(70% 60% at 12% 88%,rgba(76,154,255,.14),transparent 64%)}
.uxbg .uxgrid{
  opacity:.5;
  background-image:
    linear-gradient(rgba(59,46,39,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(59,46,39,.10) 1px,transparent 1px),
    linear-gradient(rgba(59,46,39,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(59,46,39,.045) 1px,transparent 1px);
}
.uxbg .uxdots{
  background-image:radial-gradient(rgba(255,107,107,.55) 1.1px,transparent 1.7px);
  opacity:.35;
}
.uxbg .uxwire{opacity:.75}
.uxbg .uxwire svg .ln{stroke:rgba(59,46,39,.24)}
.uxbg .uxwire svg .ln.dim{stroke:rgba(59,46,39,.16)}
.uxbg .uxwire svg .fill{fill:rgba(255,201,75,.16);stroke:rgba(59,46,39,.22)}
.uxbg .uxwire svg .hd{fill:rgba(255,107,107,.8)}
.uxbg .uxwire svg text{fill:rgba(59,46,39,.38)}
.verts .h1{color:var(--ink)}
.phone{
  box-shadow:0 12px 26px rgba(59,46,39,.20),0 0 0 5px #fff,0 0 0 7px rgba(59,46,39,.10);
}
.pnote{color:var(--ink3);font-family:var(--hand);letter-spacing:.1em}

/* ---------- 视频屏（作品 / 更多案例）：贴在纸上的大照片 + 便条 ---------- */
.casesec .fade{display:none}
.case .cp{
  inset:clamp(8px,1.6vw,22px);
  border-radius:26px;
  border:clamp(5px,.9vw,11px) solid #fff;
  background:#fff;
  box-shadow:0 16px 36px rgba(59,46,39,.20),0 2px 0 rgba(59,46,39,.06);
}
.case .cp video{filter:brightness(.99) saturate(1.05)}
.case.night .cp video{filter:brightness(1.14) saturate(1.06) contrast(1.02)}
.case .scrim{
  inset:clamp(8px,1.6vw,22px);
  border-radius:26px;
  background:linear-gradient(rgba(59,46,39,.10),rgba(59,46,39,.44));
}
.case.night .scrim{background:linear-gradient(rgba(59,46,39,.06),rgba(59,46,39,.38))}
.case .wrap{
  max-width:min(700px,88%);
  padding:24px 28px 22px;
  background:rgba(255,252,243,.95);
  border:2px solid rgba(59,46,39,.14);
  border-radius:20px;
  box-shadow:0 14px 30px rgba(59,46,39,.20);
}
.case .eyebrow{font-size:11.5px;padding:5px 13px;margin-bottom:14px}
.case .h1{font-size:clamp(30px,5.4vw,56px);letter-spacing:0}
.case .h2{font-size:clamp(13px,1.6vw,17px);margin-top:8px;color:var(--ink2)}
.case .hair{margin-top:14px;width:124px;height:9px}
.cgo{color:var(--ink2);border-bottom:1.5px dashed rgba(59,46,39,.3);text-shadow:none}
.cgo:hover{color:var(--coral);border-bottom-color:var(--coral)}

/* ---------- 轮播页码：手账小标签 + 糖果分段进度条 ---------- */
.cpager button{
  color:rgba(90,72,58,.45);text-shadow:none;
  font-size:11.5px;letter-spacing:.02em;
  padding:3px 7px 4px;border-radius:5px;
  transition:color .26s var(--ease),background-color .26s var(--ease),rotate .26s var(--ease);
}
/* 选中项：一小块胶带，微微歪着贴上去 */
.cpager button.on{
  color:#6E3316;font-weight:700;
  background:rgba(255,201,75,.92);
  box-shadow:1.5px 1.5px 0 rgba(59,46,39,.16);
  rotate:-1.4deg;
}
.cprog{
  background:rgba(59,46,39,.11);
  height:5px;border-radius:4px;
  /* 段与段之间留 5px 缝，露出纸底，像被压出的折痕 */
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0,#000 calc(100% / var(--n) - 5px),
    transparent calc(100% / var(--n) - 5px),transparent calc(100% / var(--n)));
  mask-image:repeating-linear-gradient(90deg,#000 0,#000 calc(100% / var(--n) - 5px),
    transparent calc(100% / var(--n) - 5px),transparent calc(100% / var(--n)));
}
.cprog b{
  background:linear-gradient(90deg,#FF8A65 0%,#FFC94B 58%,#7FD3A8 100%);
  border-radius:4px;
  transform:none;clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0);
}
/* 旧的分段竖线不要了 */
.cprog::after{display:none}
.cnav{
  background:rgba(255,252,243,.9);
  border:2px solid rgba(59,46,39,.18);
  color:var(--ink);
  box-shadow:2px 2px 0 rgba(59,46,39,.4);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.cnav:hover{background:var(--coral);border-color:var(--ink);color:#fff}

/* ---------- 完整版播放器 / 下载（备用） ---------- */
.tabs button{background:var(--paper2);border:1.5px solid rgba(59,46,39,.16);color:var(--ink2)}
.tabs button.on{background:var(--coral);color:#fff;border-color:var(--ink)}
.filmbox{background:#fff;border:8px solid #fff;box-shadow:0 14px 30px rgba(59,46,39,.18)}
.dl{background:var(--paper2);border:1.5px solid var(--ink);color:var(--ink)}
.dl:hover{background:var(--coral);color:#fff}

.stat .n{background:linear-gradient(180deg,#FF8A8A 10%,#FFC94B 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{color:var(--ink2)}

/* ---------- 合作咨询抽屉：一张纸卡 ---------- */
#lead .lmask{background:rgba(59,46,39,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#lead .lpanel{
  background:var(--paper2);
  border:2.5px solid var(--ink);
  border-radius:24px;
  box-shadow:7px 7px 0 rgba(59,46,39,.75);
  color:var(--ink);
}
#lead .lclose{background:rgba(59,46,39,.07);color:var(--ink2)}
#lead .lclose:hover{background:rgba(59,46,39,.14);color:var(--ink)}
#lead .leyebrow{color:var(--coral);font-family:var(--hand);letter-spacing:.2em}
#lead .ltitle{color:var(--ink)}
#lead .lsub{color:var(--ink2)}
#lead .lsub b{color:var(--ink)}
#lead .lf span{color:var(--ink3);letter-spacing:.08em;font-family:var(--hand)}
#lead .lf span i{color:var(--coral)}
#lead input,#lead textarea{
  background:#fff;border:1.5px solid rgba(59,46,39,.22);color:var(--ink);
  border-radius:12px;
}
#lead input::placeholder,#lead textarea::placeholder{color:rgba(59,46,39,.3)}
#lead input:focus,#lead textarea:focus{border-color:var(--coral);background:#FFFDF5;
  box-shadow:0 0 0 3px rgba(255,107,107,.14)}
#lead .lchip{
  background:#fff;border:1.5px solid rgba(59,46,39,.2);color:var(--ink2);
  border-radius:100px;
}
#lead .lchip:hover{color:var(--ink);border-color:rgba(59,46,39,.4)}
#lead .lchip.on{background:#FFE9A8;border-color:var(--ink);color:#7A4B2A;font-weight:700}
#lead .lerr{color:#E5484D}
#lead .lerr a{color:#E5484D}
#lead .lsub-btn{
  background:var(--coral);color:#fff;
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 rgba(59,46,39,.75);
  border-radius:100px;
}
#lead .lsub-btn:hover{background:#FF5252;transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 rgba(59,46,39,.75)}
#lead .lsub-btn.ghost{background:#fff;color:var(--ink);box-shadow:3px 3px 0 rgba(59,46,39,.75)}
#lead .lsub-btn.ghost:hover{background:#FFF0C9}
#lead .lokic{background:#EAF8F1;border:2px solid var(--mint);color:#24866A}
#lead .lokt{color:var(--ink);font-weight:700}
#lead .loks{color:var(--ink2)}

/* ---------- 轻提示 ---------- */
#toast{
  background:var(--paper2);color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 rgba(59,46,39,.7);
  font-weight:600;
}

/* ---------- 手机端：便条收紧，别顶出一屏 ---------- */
@media(max-width:640px){
  .case .wrap{max-width:calc(100% - 26px);padding:16px 15px 15px;border-radius:16px}
  .case .eyebrow{font-size:10.5px;padding:4px 10px;margin-bottom:10px}
  .case .h1{font-size:29px}
  .case .h2{font-size:12.5px;margin-top:6px;line-height:1.4}
  .case .hair{margin-top:10px;width:104px;height:8px}
  .case .press.pin{margin-top:10px;padding:11px 12px;border-radius:14px}
  .case .press.pin .ptitle{font-size:13px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .case .press.pin .pmeta{font-size:11px;line-height:1.5;-webkit-line-clamp:3}
  .case .press.pin .pgo{margin-top:9px;font-size:11.5px}
  .case .cp,.case .scrim{inset:8px;border-radius:20px}
  .case .cp{border-width:6px}

  #hint .ring{width:34px;height:34px}
  .grp:nth-child(1),.grp:nth-child(2),.cell:nth-child(odd),.cell:nth-child(even){rotate:0deg}
  section.in .kvi:nth-child(1),section.in .kvi:nth-child(2),
  section.in .kvi:nth-child(3),section.in .kvi:nth-child(4){rotate:0deg}
  .tag{box-shadow:2px 2px 0 rgba(59,46,39,.7)}
  .press::before{width:66px;height:16px}
  #bar{border-width:1.5px;box-shadow:3px 3px 0 rgba(59,46,39,.7)}
  #top{border-bottom-width:1.5px}
  .sfac .big,.sfac .slides{border-width:6px}
}
@media(max-width:380px){
  .case .h1{font-size:26px}
  .case .press.pin .pmeta{-webkit-line-clamp:2}
}

/* ================= 修订 1 ================= */
/* 英文也走手写体：iOS/macOS 用 Chalkboard，Windows 用 Comic Sans */
:root{
  --hand:"Chalkboard SE","Comic Sans MS","HanziPen SC","Hannotate SC","Yuanti SC","PingFang SC","Microsoft YaHei",sans-serif;
}

/* 案例屏：照片避让顶栏/底栏，便条收窄，页码做成贴在纸上的小签 */
.case .cp,.case .scrim{inset:70px clamp(10px,1.6vw,22px) 90px}
.case .wrap{max-width:min(680px,76%)}
.case .cp{border-radius:22px}
.case .scrim{border-radius:22px}
.cpager{
  bottom:calc(94px + env(safe-area-inset-bottom));
  padding:9px 14px 20px;
  gap:clamp(8px,1.2vw,16px);
  background:rgba(255,252,243,.93);
  border:1.5px solid rgba(59,46,39,.16);
  border-radius:10px;
  box-shadow:3px 3px 0 rgba(59,46,39,.10);
  max-width:calc(100% - 28px);
  rotate:-.7deg;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.cprog{bottom:8px}

/* 口号：马克笔划重点 */
.slogan{
  display:inline-block;color:#8A4A2A;rotate:-1deg;
  padding:1px 10px;
  background:linear-gradient(transparent 54%,rgba(255,201,75,.78) 54%,rgba(255,201,75,.78) 93%,transparent 93%);
}
/* 首屏小字别把字距拉太开 */
#hint .hegg{letter-spacing:.02em;line-height:1.6;max-width:84vw}
/* 品牌背书：手绘波浪下划线 */
.endhead{
  color:#C2544C;
  text-decoration:underline;text-decoration-style:wavy;
  text-decoration-color:rgba(255,201,75,.95);
  text-decoration-thickness:2px;text-underline-offset:7px;
}
/* 竖屏屏标题在浅纸上可以大一点 */
@media(max-width:640px){
  section.verts .h1{font-size:20px;line-height:26px;letter-spacing:.06em}
  section.verts .phone{box-shadow:0 12px 26px rgba(59,46,39,.20),0 0 0 6px #fff,0 0 0 8px rgba(59,46,39,.08)}
  .case .cp,.case .scrim{inset:calc(54px + env(safe-area-inset-top)) 8px calc(72px + env(safe-area-inset-bottom))}
  .case .cp{border-width:6px;border-radius:18px}
  .case .scrim{border-radius:18px}
  .case .wrap{max-width:calc(100% - 58px);padding:16px 15px 15px}
  .cpager{bottom:calc(82px + env(safe-area-inset-bottom));padding:9px 12px 22px;gap:9px;border-radius:12px}
  .cpager button{font-size:12px;padding:4px 8px 5px;letter-spacing:.01em}
}

/* ================= 修订 2：丰富度 ================= */
/* 标题收一档，纸面上更精致 */
.h1{font-size:clamp(44px,9.2vw,120px)}
section.clients .h1{font-size:clamp(40px,7.8vw,100px)}
#feed section.homeSec .h2{font-size:clamp(17px,2vw,26px)}

/* 首屏手绘涂鸦：太阳 / 星星 / 波浪 */
#feed section.homeSec::before{
  content:'';position:absolute;left:4%;top:14%;width:192px;height:192px;
  z-index:1;pointer-events:none;opacity:.92;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23FFC94B' stroke-width='6' stroke-linecap='round'%3E%3Ccircle cx='70' cy='70' r='26'/%3E%3Cpath d='M70 24v14M70 102v14M24 70h14M102 70h14M38 38l10 10M92 92l10 10M102 38l-10 10M48 92l-10 10'/%3E%3C/g%3E%3Cpath d='M152 30l6 15 15 6-15 6-6 15-6-15-15-6 15-6z' fill='%23FF9EC4'/%3E%3Ccircle cx='164' cy='112' r='7' fill='%239B7EDE'/%3E%3Cpath d='M124 152c14-16 30-16 44 0' stroke='%233FBF9A' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
#feed section.homeSec::after{
  content:'';position:absolute;right:4%;bottom:16%;width:220px;height:160px;
  z-index:1;pointer-events:none;opacity:.9;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 160'%3E%3Cpath d='M10 118q22-34 44 0t44 0t44 0' stroke='%234C9AFF' stroke-width='6' fill='none' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M172 22l5 13 13 5-13 5-5 13-5-13-13-5 13-5z' fill='%23FF6B6B'/%3E%3Ccircle cx='38' cy='40' r='8' fill='%23FFC94B'/%3E%3Ccircle cx='118' cy='58' r='5' fill='%233FBF9A'/%3E%3C/svg%3E") no-repeat center/contain;
}
@media(max-width:900px){
  #feed section.homeSec::before{width:132px;height:132px;left:-8px;top:11%;opacity:.78}
  #feed section.homeSec::after{width:150px;height:110px;right:-6px;bottom:22%;opacity:.7}
}
@media(max-width:640px){
  #feed section.homeSec::before{width:104px;height:104px;left:-10px;top:9%;opacity:.7}
  #feed section.homeSec::after{display:none}
}
/* 320 这类极窄屏标题会顶到左上角，太阳得让开，不然压在「银」字上 */
@media(max-width:380px){
  #feed section.homeSec::before{width:70px;height:70px;left:-16px;top:2.2%;opacity:.62}
}

/* 公司档案正文：像笔记条目，一条一个彩点 */
.copy p{position:relative;padding-left:18px}
.copy p::before{
  content:'';position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--lemon);
}
.copy p:nth-child(2)::before{background:var(--mint)}
.copy p:nth-child(3)::before{background:var(--pink)}
.copy p:nth-child(4)::before{background:var(--sky)}
@media(max-width:640px){.copy p{padding-left:15px}.copy p::before{width:6px;height:6px}}

/* 品牌背书：和下面卡片留够距离，别让胶带贴上来 */
.endhead{
  margin-bottom:24px;position:relative;z-index:3;
  color:#8A5A3B !important;
  text-decoration:none;
  letter-spacing:.2em;
}
.presses{margin-top:12px}

/* 案例视频亮一点，更像照片 */
.case .cp video{filter:brightness(1.04) saturate(1.06)}
.case.night .cp video{filter:brightness(1.18) saturate(1.07) contrast(1.02)}

/* 竖屏屏：线框再淡一点，别抢手机 */
.uxbg .uxwire{opacity:.5}
.uxbg .uxgrid{opacity:.38}
.uxbg .uxwire svg .fill{fill:rgba(255,201,75,.09);stroke:rgba(59,46,39,.18)}

/* 进度条：圆润一点，别贴边 */
.cprog{left:2px;right:2px;bottom:9px;height:5px;border-radius:4px}

/* 卡片轻微歪一点，像手工贴上去的 */
.card{rotate:-.6deg}
.studio{rotate:.4deg}
.presses .press:nth-child(1){rotate:-.6deg}
.presses .press:nth-child(2){rotate:.6deg}

/* ================= 修订 3 ================= */
:root{
  --hand:"Chalkboard SE","Segoe Print","Ink Free","Comic Sans MS",
         "HanziPen SC","Hannotate SC","Yuanti SC","PingFang SC","Microsoft YaHei",sans-serif;
}
/* 首屏底部小字：给它足够宽度，别把「博弈」挤到下一行 */
#hint{width:min(92vw,440px);max-width:none}
#hint .hegg{max-width:100%}

/* 首屏水彩斑：开篇演绎收杆后，三颗球从屏幕中心那圈同心圆里拉出来铺开（见 heroOrbsIn）。
   平时不占纸面，只有首页落定那一刻才冒头 */
#feed section.homeSec .orbs{opacity:0}
#feed section.homeSec .orbs.on{opacity:1;transition:opacity .5s ease-out}
@media(max-width:700px){#feed section.homeSec .orb.s3{display:block}}

/* 纸的点阵清楚一点 */
#feed{background-image:radial-gradient(rgba(59,46,39,.115) 1px,transparent 1.15px)}

/* 口号和正文之间透口气 */
.slogan{margin-top:26px}
.copy p{line-height:1.82}

/* 纸面上所有文字都不要黑影（深色底才用，浅底只会糊成一团） */
#feed section .wrap *{text-shadow:none}
.sfac .capS{text-shadow:0 1px 8px rgba(0,0,0,.9)}

/* 涂鸦轻轻浮动，页面有点生气 */
#feed section.homeSec::before{animation:sunfloat 9s ease-in-out infinite}
@keyframes sunfloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@media(prefers-reduced-motion:reduce){
  #feed section.homeSec::before{animation:none}
}






/* ================= 修订 4（v2）：案例屏杂志分栏 · 画幅完整不裁切 =================
   原来影像区是一个固定矩形 + object-fit:cover：16:9 的片塞进竖长框，左右被裁掉
   大半；竖屏片又被截成一条。现在改为按片源比例反算影像区尺寸：
   横屏 16:9 / 竖屏 9:16 / 3:4 各一档，整幅可见，靠右排，文字落在左侧纸面上。 */

/* ---------- 桌面：左文右图 ---------- */
@media(min-width:901px){
  .casesec .case{
    justify-content:flex-start;
    --g:clamp(12px,1.8vw,26px);          /* 影像与页面边缘的距离 */
    --ntop:clamp(50px,6.2vh,66px);       /* 让开顶部浮层导航 */
    --bd:clamp(6px,.9vw,12px);           /* 相纸白边 */
    --avW:calc(56vw - 2 * var(--g) - 2 * var(--bd));            /* 右侧可用宽（画面本身） */
    --avH:calc(100svh - var(--ntop) - var(--g) - 2 * var(--bd)); /* 上下可用高（画面本身） */
    --aw:16;--ah:9;                      /* 画幅，默认 16:9 */
    /* 先按宽度铺满，高度不够时再退回高度优先 —— 两个方向都不会裁到画面 */
    --h:min(var(--avH), calc(var(--avW) * var(--ah) / var(--aw)));
    --w:calc(var(--h) * var(--aw) / var(--ah));
    /* 白边在画面之外，所以盒子要另算，画面才严格按片源比例 */
    --ow:calc(var(--w) + 2 * var(--bd));
    --oh:calc(var(--h) + 2 * var(--bd));
  }
  .casesec .case.r916{--aw:9;--ah:16}
  .casesec .case.r34{--aw:3;--ah:4}

  /* 影像：按比例缩放的相纸，垂直居中、靠右，多出来的宽度自动分到两边 */
  .casesec .case .cp,
  .casesec .case .scrim{
    inset:auto;
    top:calc(var(--ntop) + (var(--avH) - var(--h)) / 2);
    right:calc(var(--g) + (var(--avW) - var(--w)) / 2);
    width:var(--ow);height:var(--oh);
    border-radius:clamp(14px,1.5vw,22px);
  }
  .casesec .case .cp{border-width:var(--bd);background:#fff}
  .casesec .case .cp video{object-fit:contain}
  /* 文字不再压在画面上，蒙版只留一层很淡的压角 */
  .casesec .case .scrim{background:linear-gradient(180deg,rgba(59,46,39,.02),rgba(59,46,39,.18))}
  .casesec .case.night .scrim{background:linear-gradient(180deg,rgba(59,46,39,0),rgba(59,46,39,.16))}

  /* 文字：直接落在纸面上，去掉卡片底、边框和投影 */
  .casesec .case .wrap{
    width:44%;max-width:calc(44% - 6px);height:auto;
    padding:0 clamp(20px,3vw,50px) 0 clamp(28px,4.6vw,84px);
    background:none;border:0;border-radius:0;box-shadow:none;
    text-align:left;
  }
  .casesec .case .eyebrow{margin-left:0}
  .casesec .case .h1{font-size:clamp(34px,4.6vw,60px)}
  .casesec .case .h2{margin-top:10px}
  .casesec .case .hair{margin:16px 0 0;width:132px}
  .casesec .case .press.pin{margin:22px 0 0;max-width:none;padding:18px 20px}

  /* 报道卡的表头压成一行，别因为来源名太长折下来把卡撑高 */
  .casesec .case .press.pin .pl{flex-wrap:nowrap;min-width:0}
  .casesec .case .press.pin .ptag{flex:0 0 auto}
  .casesec .case .press.pin .psrc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* 页码跟着文字走，别骑在影像上 */
  .casesec .cpager{
    left:clamp(28px,4.6vw,84px);transform:none;
    width:auto;max-width:calc(44% - clamp(48px,7.6vw,134px));
    justify-content:flex-start;gap:clamp(14px,2vw,28px);
  }
  /* 翻页箭头贴在影像右缘，跟着影像一起缩放 */
  .casesec .cnav.next{right:calc(clamp(12px,1.8vw,26px) + 13px)}
  .casesec .cnav.prev{right:calc(clamp(12px,1.8vw,26px) + 63px)}
}

/* ---------- 手机 / 窄屏：上图下文。结构改成竖向流式：图按片源比例排，
   空间不够时先让图收，文字始终完整可见，谁也不压谁 ---------- */
@media(max-width:900px){
  .casesec .case{
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    padding:calc(52px + env(safe-area-inset-top)) 18px calc(186px + env(safe-area-inset-bottom));
    gap:14px;
    --avW:calc(100vw - 36px);             /* 左右各让 18px */
    --avH:34svh;                          /* 图的理想高度上限 */
    --aw:16;--ah:9;
    --h:min(var(--avH), calc(var(--avW) * var(--ah) / var(--aw)));
  }
  .casesec .case.r916{--aw:9;--ah:16;--avH:40svh}
  .casesec .case.r34{--aw:3;--ah:4;--avH:38svh}

  /* 文字挪到图下方了，蒙版没用了；去掉画面反而更亮 */
  .casesec .case .scrim{display:none}

  /* 影像：宽高都由片源比例推出来，任何情况下都不裁切 */
  .casesec .case .cp{
    position:relative;inset:auto;
    flex:0 1 auto;min-height:0;
    width:auto;max-width:100%;
    height:var(--h);max-height:var(--h);
    aspect-ratio:var(--aw) / var(--ah);
    border-width:7px;border-radius:16px;background:#fff;
    transform:none !important;
  }
  .casesec .case .cp video{object-fit:contain}

  /* 文字：跟着图往下排，不写死高度；实在放不下才在本屏内滚 */
  .casesec .case .wrap{
    position:relative;inset:auto;
    flex:0 1 auto;min-height:0;
    width:100%;max-width:100%;height:auto;padding:0;
    background:none;border:0;border-radius:0;box-shadow:none;
    text-align:left;
    overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .casesec .case .wrap::-webkit-scrollbar{display:none}
  .casesec .case .eyebrow{margin:0 0 10px}
  .casesec .case .h1{font-size:29px;line-height:1.08}
  .casesec .case .h2{margin-top:7px;font-size:12.5px;line-height:1.45}
  .casesec .case .hair{margin:10px 0 0;width:104px;height:8px}
  .casesec .case .press.pin{margin:12px 0 0;padding:12px 13px;border-radius:14px}
  .casesec .case .press.pin .ptitle{font-size:13px;line-height:1.45}
  .casesec .case .press.pin .pmeta{font-size:11px;line-height:1.5;-webkit-line-clamp:2}
  .casesec .case .press.pin .pgo{margin-top:8px;font-size:11.5px}

  /* 页码居中，别斜着贴在左下角 */
  .casesec .cpager{
    left:50%;right:auto;transform:translateX(-50%);
    width:max-content;max-width:calc(100% - 36px);
    bottom:calc(112px + env(safe-area-inset-bottom));
    justify-content:center;gap:14px;overflow-x:auto;scrollbar-width:none;
  }
  .casesec .cpager::-webkit-scrollbar{display:none}
  /* 平板竖屏（641–900）没吃到 640 以下的字号补偿，这里单独给一档 */
  .casesec .cpager button{font-size:12px;padding:4px 8px 5px}
}

/* ---------- 矮屏手机（如 375×667）：图再收一档，字再紧一档 ---------- */
@media(max-width:900px) and (max-height:740px){
  .casesec .case{--avH:26svh;gap:10px;padding-bottom:calc(178px + env(safe-area-inset-bottom))}
  /* 带压条卡的那条：矮屏下可用高 = 屏高 − 52 − 178 − gap 10 − 文字区约 280 */
  .casesec .case.r916{--avH:calc(100svh - 520px)}
  /* 摘要压到 2 行，否则竖图 + 卡片在 667 高的屏上装不下 */
  .casesec .case.r916 .press.pin .pmeta{-webkit-line-clamp:2}
  .casesec .case .eyebrow{margin-bottom:8px;font-size:10px;padding:4px 10px}
  .casesec .case .h1{font-size:25px}
  .casesec .case .h2{margin-top:5px;font-size:12px}
  .casesec .case .hair{margin-top:8px;width:92px;height:7px}
  .casesec .case .press.pin{margin-top:9px;padding:10px 12px}
  .casesec .case .press.pin .ptitle{font-size:12.5px;line-height:1.4;margin-top:8px}
  .casesec .case .press.pin .pmeta{font-size:10.5px;line-height:1.45;margin-top:6px}
  .casesec .case .press.pin .pgo{margin-top:7px;font-size:11px}
  .casesec .cpager{bottom:calc(104px + env(safe-area-inset-bottom))}
}

/* ---------- 手机上的竖版案例（2.4 时尚电商）：它比前三条多一张压条卡 ----------
   40svh 那档画幅是给「只有标题、没有压条卡」的竖版留的（原来「更多案例」屏就是那样）。
   这条带了报道卡，竖图再吃 40svh 就把文字区挤出屏。
   这里不拍脑袋写 svh：可用高 = 屏高 − 上 padding 52 − 下 padding 186 − gap 14 − 文字区约 310，
   所以 `100svh − 572` 在任何屏高下都刚好把剩下的全给竖图 —— 图随屏高长，不会一边空一边挤。 */
@media(max-width:900px) and (min-height:741px){
  .casesec .case.r916{--avH:calc(100svh - 572px)}
  .casesec .case.r916 .press.pin .pmeta{-webkit-line-clamp:2}
}

/* ---------- 进度条与标签对齐 ----------
   原来 .cprog 绝对定位 left:0/right:0，会撑到面板边框上，比标签组两边各宽一截；
   现在让它跟着面板内边距走，条的首尾和第一/最后一个标签对齐。 */
.cpager{--cpd:14px}
.cprog{left:var(--cpd);right:var(--cpd);bottom:8px}
@media(max-width:640px){
  .cpager{--cpd:12px}
  .cprog{left:var(--cpd);right:var(--cpd)}
}

/* ================= 修订 5：公司档案屏的地球仪 =================
   纸面上一枚手绘地球：线描经纬 + 简化大陆，杭州位置打一个珊瑚点。
   它只是水印，不参与文字排版，所以任何屏宽下都不会挤压正文。 */
.globe{
  position:absolute;z-index:2;pointer-events:none;
  right:clamp(14px,2.6vw,44px);
  bottom:11%;top:auto;transform:none;
  width:clamp(150px,13vw,196px);aspect-ratio:1/1;
}
/* 球本体已外置成自包含的 globe.<hash>.svg（海量海岸线路径，走 immutable 缓存），
   这里只管定位和那张贴在球旁的手写便条。球内部的线描/明暗/脉冲都写在 SVG 内部。 */
.globe img{display:block;width:100%;height:100%}
/* 坐标小签，像贴在球旁的手写便条 */
.globe .gcard{
  position:absolute;left:2%;bottom:4%;
  display:flex;flex-direction:column;gap:1px;align-items:flex-start;
  padding:5px 9px 6px;
  background:rgba(255,252,243,.94);
  border:1.5px solid rgba(59,46,39,.20);border-radius:7px;
  box-shadow:2px 2px 0 rgba(59,46,39,.10);
  rotate:-1.6deg;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.globe .gcard b{font-size:12px;font-weight:700;color:#8A4A2A;letter-spacing:.06em;line-height:1.2}
.globe .gcard i{font-style:normal;font-size:9px;letter-spacing:.06em;color:rgba(90,72,58,.62);line-height:1.3}

/* 窄屏：球收到右上角当水印，别跟标题抢地方 */
@media(max-width:900px){
  .globe{
    top:calc(56px + env(safe-area-inset-top));bottom:auto;transform:none;
    right:4px;width:124px;
    opacity:.78;
  }
  .globe .gcard{display:none}
}
/* 平板 / 窄笔记本（901–1365）：正文把左右留白吃光了，右下角摆不下球。
   1366 是算出来的分界：屏宽再窄一点，右侧净空（留白 + .wrap 内边距）
   就小于球的宽度，球会被右栏的摄影棚图挡掉一半。这一段改成和手机一样的
   右上角水印 —— 那儿的标题是居中的，角上是空的。 */
@media(min-width:901px) and (max-width:1365px){
  .globe{
    top:calc(56px + env(safe-area-inset-top));bottom:auto;transform:none;
    right:6px;width:132px;opacity:.82;
  }
  .globe .gcard{display:none}
}
@media(max-width:900px) and (max-height:740px){
  /* 40 → 50：球框顶到 40 时外圈会被顶栏切掉一条，往下让 10px */
  .globe{width:104px;right:2px;top:calc(50px + env(safe-area-inset-top));opacity:.7}
}

/* ================= 修订 6：首屏涂鸦跳跃 ================= */
/* 首页那张纸上多了一个能玩的彩蛋：点「玩一局」后，纸变成一局涂鸦跳跃，
   平台就是我们的六条业务线。玩完 / 跳过都回到原来的首页排版。 */
/* canvas 固定铺满视口而不是长在首页里 —— 这样同一套渲染管线能跨两屏：
   玩「涂鸦跳跃」时首页被 dj-lock 钉在原地，fixed 和 absolute 没有区别；
   滚动过场时它要盖在 FitCheck 和首页之上，只有 fixed 做得到。
   自带纸底和网点：过场时它就是一张真的纸，推上来就盖住底下的一切，
   不用去改下面那一屏的 display —— 免得和视差脚本抢 inline style。 */
#dj{
  position:fixed;inset:0;z-index:5;display:block;
  width:100%;height:100%;
  touch-action:none;
  opacity:0;pointer-events:none;
  transition:opacity .46s var(--ease);
  background-color:var(--paper);
  background-image:radial-gradient(rgba(59,46,39,.095) 1px,transparent 1.15px);
  background-size:22px 22px;
}
/* 过场进行中：没有淡入淡出（460ms 会跟滚动脱节），位置由 JS 每帧写 transform */
html.djsep #dj{opacity:1;transition:none}
html.djsep #top,html.djsep #bar{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
section.dj-on #dj{opacity:1;pointer-events:auto}
section.dj-on .wrap{
  opacity:0!important;pointer-events:none;
  transform:translateY(-14px) !important;
  transition:opacity .42s var(--ease),transform .42s var(--ease);
}
/* 球冲天的时候，首页正好从上面被"带"下来：方向一致，才不像两段拼接的 */
section.dj-in .wrap{animation:djHomeIn .7s cubic-bezier(.16,.86,.22,1) .06s both}
@keyframes djHomeIn{
  0%{opacity:0;transform:translateY(-14vh) scale(1.012)}
  22%{opacity:1}
  100%{opacity:1;transform:none}}
section.dj-on #hint,section.dj-on #hload{display:none!important}
/* 开场那条扫描光线（粉色 1px）和背景光斑都会横穿球场，进游戏就收掉 */
section.dj-on .beam,section.dj-on .bloom,section.dj-on .aura{opacity:0!important}
section.dj-on .bloom,section.dj-on .aura{transition:opacity .35s var(--ease)}

/* 过场期间首页那一屏在纸下面：内容、水彩球、涂鸦、光斑全撤掉，纸面上只留球场。
   .wrap 的 z-index 是 6，比 canvas 高 —— 不撤的话标题和按钮会压着纸面透出来。
   和 dj-on 是两套：dj-on 是"进游戏"，这套只负责"过场时别露馅"，顺带不显示跳过按钮。 */
section.sep-on .wrap,
section.sep-on .orbs,
section.sep-on .beam,
section.sep-on .bloom,
section.sep-on .aura,
section.sep-on #hint,
section.sep-on #hload{opacity:0!important;pointer-events:none!important;transition:none!important}
section.sep-on::before,section.sep-on::after{opacity:0!important;transition:none!important}

/* 入口按钮：排在员工登录前面，用胶带黄，一眼看出是"可以玩" */
.hbtn.djplay{background:#FFF3CE;border-color:var(--ink)}
.hbtn.djplay:hover{background:#FFE9A8}
.hbtn.djplay .lt{background:var(--mint);box-shadow:0 0 0 3px rgba(63,191,154,.20)}

/* 第二个入口：影像兼容性检查（本地工具页）。薄荷纸，和涂鸦跳跃的黄区分开 */
.hbtn.fitcheck{background:#E7F6F0;border-color:var(--ink);text-decoration:none}
.hbtn.fitcheck:hover{background:#D6F1E7;color:var(--ink)}
.hbtn.fitcheck .lt{background:var(--sky);box-shadow:0 0 0 3px rgba(76,154,255,.18)}

/* 开场小球跳完之后，落在「玩一局涂鸦跳跃」那颗按钮上坐着，眼神跟着鼠标转。
   位置由 JS 按按钮实际矩形算，改按钮文案/换行都不用管。 */
#djbuddy{
  position:absolute;z-index:7;width:40px;height:49px;
  /* top 由脚本按按钮算，减掉的 18px 是让球底停在按钮上沿外侧：
     原来 translate(-100%) 会让球下沿压进按钮 16px，把「玩一局涂鸦跳跃」的字挡掉一截 */
  transform:translate(-50%,calc(-100% - 18px));
  opacity:0;visibility:hidden;pointer-events:none;
  filter:drop-shadow(2px 3px 0 rgba(59,46,39,.16));
}
#djbuddy.on{opacity:1;visibility:visible;pointer-events:auto;cursor:pointer}
#djbuddy .bb-in,#djbuddy .bb-sway{width:100%;height:100%;transform-origin:50% 100%}
#djbuddy.on .bb-in{animation:bbDrop .92s cubic-bezier(.22,1.2,.36,1) both}
#djbuddy.on .bb-sway{animation:bbSway 2.9s ease-in-out 1.02s infinite}
#djbuddy.on .bb-eye{animation:bbBlink 5.6s linear 1.5s infinite;
  transform-box:fill-box;transform-origin:center}
#djbuddy:hover .bb-sway{animation-duration:1.5s}
@keyframes bbDrop{
  0%{opacity:0;transform:translateY(-54px) rotate(-16deg)}
  38%{opacity:1}
  58%{transform:translateY(0) rotate(3deg) scale(1.02,.96)}
  67%{transform:translateY(-1px) rotate(1deg) scale(1.16,.86)}
  78%{transform:translateY(-9px) rotate(-2deg) scale(.95,1.07)}
  89%{transform:translateY(0) rotate(1deg) scale(1.05,.95)}
  100%{transform:translateY(0) rotate(0) scale(1,1)}
}
@keyframes bbSway{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-3px) rotate(2deg)}
}
@keyframes bbBlink{
  0%,95.4%,100%{transform:scaleY(1)}
  97%,98.2%{transform:scaleY(.06)}
}
@media(max-width:640px){
  #djbuddy{width:34px;height:41px}
}

/* ---------- 后面各屏里的小家伙：同一个 IP 的另外几种形态 ----------
   只做呼应，不接点击，进视口才淡入，眼神跟着鼠标。
   场记 / 举着手机拍 / 趴在地球上 / 举牌 / 拿听筒，五种身份，同一张脸。 */
.bud{
  position:absolute;z-index:8;pointer-events:none;
  opacity:0;transform:translateY(10px) scale(.92);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  filter:drop-shadow(2px 2px 0 rgba(59,46,39,.13));
}
.bud.on{opacity:1;transform:none}
.bud svg{display:block;width:100%;height:100%;overflow:visible}
.bud .b-eye{transform-box:fill-box;transform-origin:center;
  animation:bbBlink 5.4s linear 1.4s infinite}
.bud .b-in{transform-box:fill-box;transform-origin:50% 100%;
  animation:bBreathe 3.9s ease-in-out infinite}
@keyframes bBreathe{
  0%,100%{transform:translateY(0) rotate(-1.7deg)}
  50%{transform:translateY(-1.6px) rotate(1.5deg)}
}

/* 首屏那颗：站在演示画板左下方，看着画板里的界面变来变去（窄屏也保留） */
.hright{position:relative;overflow:visible}
/* 站在画板「前面」：贴着卡片左下角、压在卡片边缘上（不越出 .wrap，否则会被裁） */
.bud-watch{left:clamp(2px,0.8vw,14px);bottom:clamp(6px,1.1vh,16px);
  width:clamp(64px,5.4vw,84px);height:auto;z-index:20}
@media(max-width:1180px){
  .bud-watch{width:56px;left:2px;bottom:8px}
}

/* 作品 / 更多案例屏：左下角，站在页码条上方看着片子 */
.bud-clap{left:clamp(24px,4.4vw,62px);bottom:clamp(146px,19vh,196px);width:92px;height:92px}
/* 竖屏内容屏：桌面左下那块空地，举着手机在拍 */
.bud-filming{left:clamp(20px,6.6vw,104px);bottom:clamp(104px,17vh,178px);width:86px;height:102px}
/* 公司档案屏：扒在地球边沿，只露头和两只手（跟随 .globe） */
.bud-peek{right:1.5%;bottom:15%;width:41%;height:auto}
/* 合作客户屏：右下角空地，举块牌子 */
.bud-sign{right:clamp(26px,6.2vw,112px);bottom:clamp(92px,15vh,146px);width:104px;height:110px}
/* 公司档案屏：右侧那块空地 2026-10-30 起归地球仪（.globe）了，
   小家伙原来正好站在球心，改成站在球顶上，拿着听筒等世界那头来电。
   位置按 .globe 的 width/bottom 反算，屏宽变化时跟着球走，不会掉下来。 */
.bud-call{
  right:calc(clamp(75px,6.5vw,98px) - 2px);
  /* -18 是让脚底踩在球的外圈上：球框 187 里那圈线还往里收了 11px（viewBox 留白） */
  bottom:calc(11% + clamp(150px,13vw,196px) - 18px);
  width:92px;height:99px}
/* 1365 以下球挪到右上角当水印（见「修订 5」），右下角没球可站，小家伙一起收掉 */
@media(max-width:1365px){
  .bud-call{display:none}
}
/* 摄影棚屏：左边那块空地，举着补光灯站着 */
.bud-lamp{left:clamp(18px,3.2vw,48px);bottom:clamp(110px,20vh,200px);width:86px;height:95px}

/* 窄屏（平板 / 小笔记本）左右留白被内容吃掉了，先全部收起来，
   免得压到卡片上的字；矮屏也是同理，作品屏的卡片会往下长 */
@media(max-width:1180px){
  /* 2026-10-30 老苗：手机上也要看到 IP 小人。改成缩小并贴边，别压正文；
     只有「扒在地球上」和「举补光灯」这两种在窄屏没地方站，继续收起来 */
  .bud-clap,.bud-filming,.bud-sign{display:block}
  .bud-clap{width:56px;height:56px;left:8px;bottom:94px}
  .bud-filming{width:52px;height:62px;left:6px;bottom:86px}
  .bud-sign{width:60px;height:64px;right:8px;bottom:82px}
  .bud-call,.bud-lamp{display:none}
}
/* 竖屏屏那排手机在 1360 以下就顶到页面两侧了，给它让位 */
@media(max-width:1360px){
  .bud-filming{display:none}
}
@media(max-height:800px) and (min-width:1181px){
  .bud-clap{display:none}
}

/* 手机上有空位的那几处再放回来，尺寸小一号 */
@media(max-width:900px){
  .bud-clap{display:block;left:16px;bottom:176px;width:68px;height:68px}
  .bud-filming{display:none}          /* 这屏手机上排满了，别往手机墙上贴 */
  .bud-sign{display:block;right:14px;bottom:98px;width:76px;height:80px}
  .bud-call{display:none}
  .bud-lamp{display:none}
  .bud-peek{right:4%;bottom:11%;width:46%}

  /* 「银赛作品类型」屏（.hasv）第 4 条是竖版 + 压条卡，手机上比前三条高出一大截；
     场记小球固定在 bottom:176px，正好落在卡片正文上。球在这个位置本来就侵占内容区 58px
     （前三条只是内容短没撞上），这屏干脆不摆 —— 桌面和平板上它照样在。 */
  .casesec.hasv .bud-clap{display:none}
}

/* 底部淡出：平台沉到底边时化进纸里，别和「跳过」打架 */
.djfade{
  position:absolute;left:0;right:0;bottom:0;height:116px;z-index:6;
  display:none;pointer-events:none;
  background:linear-gradient(rgba(251,244,230,0),rgba(251,244,230,.86) 58%,#FBF4E6 100%);
}
section.dj-on .djfade{display:block}

/* HUD：右上角计分，别压住顶部导航 */
#djhud{
  position:absolute;z-index:6;right:clamp(16px,3vw,34px);
  top:calc(64px + env(safe-area-inset-top));
  display:none;flex-direction:column;align-items:flex-end;gap:2px;
  pointer-events:none;
  font-family:var(--round);
}
section.dj-on #djhud{display:flex}
/* 开场演示期间不显示层数，只留一个「跳过开场」 */
section.dj-demo #djhud{display:none!important}
/* 开场的「跳过」放右下角，别压住球场中轴和最后一块台子 */
section.dj-demo #djexit{
  left:auto;right:16px;transform:none;
  bottom:calc(20px + env(safe-area-inset-bottom));
  font-size:11px;padding:6px 13px 7px;opacity:.72;
}
section.dj-demo #djexit:hover{opacity:1}
/* 台子会从 HUD 后面划过，给个纸片底，分数才读得清 */
#djhud{padding:5px 11px 7px;border-radius:15px;background:rgba(255,252,243,.88);
  border:1.5px solid rgba(59,46,39,.14);box-shadow:2px 2px 0 rgba(59,46,39,.10);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#djhud .djscore{display:flex;align-items:baseline;gap:3px;color:var(--ink)}
#djhud .djscore b{font-size:clamp(30px,4vw,44px);line-height:1;font-weight:800;letter-spacing:-.02em}
#djhud .djscore span{font-family:var(--hand);font-size:13px;color:var(--ink3)}
#djhud .djbest{font-family:var(--hand);font-size:12.5px;color:var(--ink3);letter-spacing:.04em}
#djhud .djbest b{font-weight:700;color:#8A6A55}

/* 进游戏第一眼的操作说明：桌面给键位，手机给「点左右半屏」。
   纸条样式跟 HUD / 跳过按钮同一套纸片，压在跳过上方；6 秒自己收，
   玩家一动手也立刻收 —— 别让它一直挡着球场。 */
#djguide{
  position:absolute;z-index:9;left:50%;transform:translateX(-50%);
  bottom:calc(92px + env(safe-area-inset-bottom));
  display:flex;align-items:center;
  padding:7px 13px 8px;border-radius:100px;
  background:rgba(255,252,243,.95);border:1.5px solid rgba(59,46,39,.22);
  box-shadow:2px 2px 0 rgba(59,46,39,.13);
  font-family:var(--round);color:var(--ink);white-space:nowrap;
  pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility .3s var(--ease);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
#djguide.on{opacity:1;visibility:visible}
#djguide .dg-k,#djguide .dg-t{display:flex;align-items:center;gap:7px}
#djguide .dg-t{display:none}
#djguide i{
  font-style:normal;display:inline-flex;align-items:center;justify-content:center;
  height:21px;min-width:21px;padding:0 6px;border-radius:6px;
  background:#fff;border:1.5px solid rgba(59,46,39,.26);
  font-size:11.5px;font-weight:800;line-height:1;letter-spacing:0;color:var(--ink);
  box-shadow:0 1.5px 0 rgba(59,46,39,.14);
}
#djguide em{font-style:normal;font-size:11px;color:var(--ink3)}
#djguide span{font-family:var(--hand);font-size:12.5px;color:var(--ink2);letter-spacing:.03em}
@media(max-width:900px){
  #djguide{bottom:calc(86px + env(safe-area-inset-bottom));padding:6px 11px 7px}
  #djguide .dg-k,#djguide .dg-t{gap:6px}
  #djguide span{font-size:12px}
}
/* 触摸设备换文案。必须放在最后：底下的 width 媒体查询不能再把 .dg-t 关掉 */
@media (hover:none) and (pointer:coarse){
  #djguide .dg-k{display:none}
  #djguide .dg-t{display:flex}
}

/* 左下角：跳过 */
#djexit{
  position:absolute;z-index:8;
  left:50%;transform:translateX(-50%);
  bottom:calc(40px + env(safe-area-inset-bottom));
  display:none;
  padding:8px 18px 9px;
  font-family:var(--round);font-size:12px;font-weight:600;color:var(--ink);
  background:rgba(255,252,243,.94);
  border:1.5px solid rgba(59,46,39,.24);border-radius:100px;
  box-shadow:2px 2px 0 rgba(59,46,39,.14);
  cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
section.dj-on #djexit{display:block}
section.dj-dead #djexit{display:none}
#djexit:hover{background:#fff;box-shadow:3px 3px 0 rgba(59,46,39,.18)}

/* 结算 */
#djover{
  position:absolute;inset:0;z-index:7;display:none;
  align-items:center;justify-content:center;
  background:rgba(251,244,230,.82);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
#djover.on{display:flex}
#djover .djoc{
  text-align:center;padding:26px 30px 28px;
  background:var(--paper2);
  border:2px solid var(--ink);border-radius:16px;
  box-shadow:6px 6px 0 rgba(59,46,39,.16);
  rotate:-1.2deg;
  max-width:calc(100% - 48px);
  max-height:calc(100% - 32px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
#djover .djoeb{font-family:var(--hand);font-size:12px;letter-spacing:.2em;color:var(--ink3)}
#djover .djon{font-family:var(--round);font-size:62px;line-height:1;font-weight:800;color:var(--coral);margin:6px 0 2px}
#djover .djon small{font-size:16px;font-weight:700;color:var(--ink3);margin-left:3px}
#djover .djobest{font-family:var(--hand);font-size:12px;color:var(--ink2);margin-bottom:18px}
/* 结算：这一局摸到过哪些模型，出门前再认一遍 —— 玩完还记得住才有用 */
#djosum{display:none;text-align:left;margin:-6px 0 18px}
#djosum.on{display:block}
#djosum .dshead{text-align:center;font-family:var(--hand);font-size:12px;
  letter-spacing:.08em;color:var(--ink2);margin-bottom:10px}
#djosum .dshead b{font-family:var(--round);font-size:15px;font-weight:800;color:var(--coral);margin:0 2px}
#djosum .dslist{padding:1px 3px 1px 1px;display:flex;flex-direction:column;gap:6px}
#djosum .dsrow{display:flex;align-items:flex-start;gap:8px;
  padding:6px 9px 7px;border-radius:10px;background:rgba(255,255,255,.66);
  border:1.5px solid rgba(59,46,39,.18)}
#djosum .dsdot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:0 0 auto}
#djosum .dstx{flex:1 1 auto;min-width:0}
#djosum .dsline{display:flex;align-items:baseline;gap:6px}
#djosum .dsname{font-family:var(--round);font-size:13px;font-weight:800;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#djosum .dscat{font-size:9.5px;font-weight:700;letter-spacing:.04em;color:var(--ink3);
  flex:0 0 auto;white-space:nowrap}
#djosum .dsp{margin-left:auto;padding-left:6px;font-family:var(--round);font-size:12px;
  font-weight:800;color:var(--coral);flex:0 0 auto;white-space:nowrap}
#djosum .dsdesc{margin-top:2px;font-size:10.5px;line-height:1.45;color:var(--ink2)}
#djosum .dsfoot{margin-top:9px;text-align:center;font-family:var(--hand);
  font-size:10.5px;letter-spacing:.04em;color:var(--ink3)}
@media(max-width:640px){
  #djover .djoc{padding:20px 16px 22px;max-width:calc(100% - 30px)}
  #djover .djon{font-size:54px}
  #djover .djobest{margin-bottom:14px}
  #djosum{margin-bottom:14px}
  #djosum .dshead{margin-bottom:8px;font-size:11.5px}
  #djosum .dsname{font-size:12.5px}
  #djosum .dsdesc{font-size:10px;line-height:1.42}
  #djosum .dscat{font-size:9px}
  #djosum .dsfoot{font-size:10px}
}
#djover .djorow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#djover button{
  font-family:var(--round);font-size:13px;font-weight:700;color:var(--ink);
  padding:9px 20px 10px;border-radius:100px;cursor:pointer;
  background:#FFF3CE;border:2px solid var(--ink);
  box-shadow:2px 2px 0 rgba(59,46,39,.7);
}
#djover button:hover{background:#FFE9A8;transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(59,46,39,.7)}
#djover button.djoout{background:var(--paper2)}
#djover button.djoout:hover{background:#fff}

@media(max-width:900px){
  #djhud{top:calc(58px + env(safe-area-inset-top));right:16px}
  #djexit{bottom:calc(34px + env(safe-area-inset-bottom));font-size:11.5px;padding:7px 15px 8px}
}

/* 踩到 AI 火箭包时弹出来的科普小卡片：这一类 AI 到底强在哪、这局加多少分 */
#djfact{
  position:absolute;z-index:7;left:50%;top:18%;
  width:min(calc(100% - 48px),380px);
  transform:translate(-50%,-8px) rotate(-.6deg);
  padding:13px 16px 12px;border-radius:15px;
  background:var(--paper2);
  border:2px solid rgba(59,46,39,.86);
  box-shadow:4px 4px 0 rgba(59,46,39,.28);
  text-align:left;pointer-events:none;
  opacity:0;visibility:hidden;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  font-family:var(--round);
}
#djfact.on{opacity:1;visibility:visible;transform:translate(-50%,0) rotate(-.6deg)}
#djfact .dfrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#djfact .dfcat{
  font-size:10px;font-weight:700;letter-spacing:.1em;color:#fff;
  padding:3px 9px 4px;border-radius:100px;background:#4C9AFF;
  box-shadow:1.5px 1.5px 0 rgba(59,46,39,.5);
}
#djfact .dfname{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
#djfact .dfdesc{margin-top:7px;font-size:12.5px;line-height:1.6;color:var(--ink2)}
#djfact .dfpow{
  margin-top:8px;padding-top:7px;border-top:1.5px dashed rgba(59,46,39,.18);
  font-family:var(--hand);font-size:11.5px;letter-spacing:.06em;color:var(--ink3);
}
@media(max-width:900px){
  #djfact{top:calc(66px + env(safe-area-inset-top));width:calc(100% - 32px)}
  #djfact .dfname{font-size:15px}
  #djfact .dfdesc{font-size:12px}
}

/* ==== SKIN:HANDCRAFT:END ==== */

/* =========================================================
   HERO-DEMO：首屏换成「影像兼容性检查」的可交互演示
   —— 左边一句话说清做什么，右边就是一个能点的检查器：
   点右边任意一家平台，手机上的遮挡带 / 净区框当场跟着变。
   只动 transform 与 opacity：四条压暗带用 scale 伸缩，
   净区框用 translate+scale，切换时不会触发排版。
   ========================================================= */
.heroSec .hw{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:center;
  gap:clamp(22px,3.4vw,58px);
  max-width:1180px;
  text-align:left;
}
.hleft{min-width:0}

/* ---------- 首屏标题组：整块可点进产品介绍页 ----------
   eyebrow / 大标题 / 波浪线包进一个 <a>，点哪儿都进 app.html；
   产品标签那一行右边挂客户端版本号（2026-10-27 老苗指的红框位置）。
   只有 transform 与 opacity 动：箭头淡入 + 右滑，版本号只换描边色，不碰布局。 */
.heroSec .htitle{
  /* inline-block 而不是 block：点击区和焦点框贴着标题实际占的地方，
     block 会一路撑到 .hleft 的右边界，键盘用户会看到一圈空荡荡的虚线框 */
  display:inline-block;max-width:100%;
  color:inherit;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  border-radius:8px;
}
.heroSec .hmeta{
  display:flex;align-items:center;flex-wrap:wrap;gap:9px;
  margin-bottom:16px;
}
/* eyebrow 原本那 13–18px 下边距改由整行容器承担，这里必须归零，否则行高翻倍 */
.heroSec .hleft .hmeta .eyebrow{margin-bottom:0}
.heroSec .hver{
  font-family:var(--round);font-size:10px;font-weight:700;letter-spacing:.06em;line-height:1.5;
  padding:2px 6px;border-radius:5px;white-space:nowrap;
  color:var(--ink3);border:1px solid rgba(59,46,39,.16);
  opacity:0;
  transition:opacity .6s var(--ease) .12s,color .18s var(--ease),border-color .18s var(--ease);
}
section.in .hver{opacity:1}
/* 行尾箭头＝「这块能点」。桌面只在悬停时淡入，触屏没有悬停就一直轻显，
   否则手机上完全看不出标题是链接 */
.heroSec .harrow{
  font-style:normal;font-size:12px;line-height:1.5;color:var(--coral);
  opacity:0;transform:translateX(-3px);
  transition:opacity .18s var(--ease),transform .18s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .heroSec .htitle:hover .harrow{opacity:1;transform:none}
  .heroSec .htitle:hover .hver{color:var(--coral);border-color:rgba(255,107,107,.42)}
}
@media (hover:none){
  .heroSec .harrow{opacity:.55;transform:none}
}
.heroSec .htitle:focus-visible{outline:2px dashed var(--coral);outline-offset:10px}
@media (prefers-reduced-motion:reduce){
  .heroSec .hver{opacity:1;transition:color .18s,border-color .18s}
  .heroSec .harrow{transition:none}
}
/* 大标题的基准字号抽成变量：下行 FitCheck 用它，上行 INSIGHT 取它的一小份，
   四个断点（见下面几条 @media）只改这一个值就够，不用每处都写两遍。 */
.heroSec .hleft{--h1fs:clamp(36px,4.5vw,64px)}
.heroSec .hleft .h1{
  font-size:var(--h1fs);
  line-height:1.08;
  letter-spacing:-.012em;
}
/* 2026-10-30 老苗：上行和下行一样大，下面那块墨牌子把上面那行压住了。
   上行「INSIGHT」收成品牌行（0.64 倍）—— 小字要呼吸，字距也跟着放开一点；
   下行 FitCheck 保持原尺寸，牌子才是主体。 */
/* 试 B 方案：上行保持原尺寸，下行 FitCheck 收到 0.74 当牌子 */
.heroSec .hleft .h1b{font-size:calc(var(--h1fs) * .74)}
/* 第二行跟第一行同一个字号、同一个节奏；只有第一行进字带 */
/* 牌子（.h1b）跟上行要留一口气：原来 -.06em 是给两行同字号用的，
   下行收到 0.74 之后行盒变矮，再往上拉就贴脸了 */
.heroSec .hleft .h1b{margin-top:.25em}
section.in .hleft .h1b{transition-delay:.17s}
.heroSec .hleft .hair{width:120px;height:9px;margin:10px 0 0}
#feed section.heroSec .hleft .h2{
  margin-top:24px;
  font-size:clamp(13.5px,1.08vw,16px);
  line-height:1.68;
  font-weight:400;
  color:var(--ink2);
  max-width:27em;
}
.heroSec .heroBtns{justify-content:flex-start;margin-top:clamp(20px,2.3vw,30px);gap:10px}
.heroSec .heroLinks{justify-content:flex-start;margin-top:16px}
.heroSec .heroLinks button.hlink{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--ink2);
  cursor:pointer;letter-spacing:inherit;
}
.heroSec .heroLinks button.hlink .lt{
  display:block;width:6px;height:6px;border-radius:50%;
  background:var(--lemon);box-shadow:0 0 0 3px rgba(255,201,75,.24);
}
.heroSec .heroLinks button.hlink:hover{color:var(--coral)}
/* 太阳 / 星星 / 波浪这些手绘涂鸦只属于品牌首屏（first-child），
   FitCheck 那一屏是产品界面，背景必须干净 */
#feed section.heroSec::before,#feed section.heroSec::after{display:none}
/* FitCheck 回到第一屏：顶栏是 bare（透明放空），不用给整条顶栏让位 */
#feed section.heroSec{padding-top:0}
/* 竖屏顶部大片空白（2026-10-29 老苗：整体都上来点）：flex 居中时给底部留白，
   内容自然被顶上去；hmore 是绝对定位，不受影响，仍贴着屏底 */
@media(max-width:1080px) and (max-aspect-ratio:1/1){
  /* 只在竖屏加：1080×800 那种横脸平板本来刚好塞满，再加底部留白就顶出屏幕 */
  #feed section.heroSec{padding-bottom:clamp(48px,12vh,120px)}
  /* 竖屏不给「下载客户端 / 海外内容」留位置 —— 这一行和「向下滑动」抢地盘时前者让位
     （2026-10-29 老苗：向下滑动一定要有，宁愿不要这行）。客户端入口在产品介绍页首屏有。 */
  .heroSec .heroLinks{display:none}
}
/* 中文按字折行，窄屏会劈开词组（走一/遍、给结/论），这几个词钉住不让拆 */
.heroSec .hleft .h2 .nw{white-space:nowrap}
/* 小球回到第一屏，仍坐在「玩一局涂鸦跳跃」上 */


/* 主按钮：墨块反白，比纸片按钮重一档；投影改成柠檬硬影，跟牌子的手账语言统一 */
/* min-height 取 40 是权衡：WCAG 2.5.8 AA(24) ✓ / Apple HIG 44 ✗；
   代价可接受是因为按钮通栏 278px、每行单目标、间隔 ≥8px。
   别顺手改回 44 —— ≤640 两个按钮竖排，44 会多吃 12px，360×640 会切掉贴纸上沿。 */
.heroSec .hbtn{font-size:14.5px;padding:11px 20px;min-height:40px}
.hbtn.pri{
  background:var(--ink);color:var(--paper2);
  border-color:var(--ink);
  box-shadow:3px 3px 0 rgba(255,201,75,.72);
}
.hbtn.pri:hover{background:#241B16;color:#fff;box-shadow:4px 4px 0 rgba(255,201,75,.78)}
.hbtn.pri .lt{background:var(--lemon);box-shadow:0 0 0 3px rgba(255,201,75,.22)}
.hbtn.pri .arw{color:rgba(251,244,230,.62)}
.hbtn.pri:hover .arw{color:#fff}
.heroSec .hbtn em{font-size:9px;padding:2px 6px}

/* ---------- 首屏下滑提示：文字 + 圆贴纸箭头 ----------
   第一屏是 FitCheck 产品屏，往下才是公司主营的传媒业务，这里给一句明确的指路。
   它跟第二屏 #hint 一样是颗按钮：没滚轮的人直接点它进下一屏。
   形态也跟 #hint 对齐 —— 上一行「向下滑动」，下面一颗柠檬黄圆贴纸箭头，
   icon 里的箭头自己上下 bob；最底下一行小字写「观看银赛传媒类业务」（2026-10-29 老苗定）。
   2026-10-28 老苗：先删过中文，同晚又要「向下滑动 + 滑动的 icon」，恢复文字并补上图标。
   默认 display:none —— 只有底部真留得出空才显示（下面两条 @media）：
   1080 及以下收成单列后内容已经顶到屏底，矮屏更会溢出，那种屏整块隐藏，不跟内容抢地方。 */
.heroSec .hmore{
  display:none;
  position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:8;
  flex-direction:column;align-items:center;gap:7px;
  appearance:none;-webkit-appearance:none;border:0;background:none;
  padding:6px 14px;margin:0;font:inherit;color:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  opacity:0;transition:opacity .7s var(--ease);
}
section.in .hmore{opacity:1;transition-delay:.74s}

/* 2026-10-30：首屏底部恢复成「向下滑动」按钮。
   同日下午曾把这里改成 .hmore-icp 一行备案小字，已撤回 ——
   备案号、隐私政策、员工登录统一收在末屏「关于银赛」的页脚，首屏不放。 */
@media(min-width:1081px){.heroSec .hmore{display:flex}}
/* 竖屏一律显示。原来卡的是 min-height:820px —— 微信内置浏览器顶部栏一吃，
   实际可视高度只有 750 上下，正好被判掉，老苗那边就看不到「向下滑动」了（2026-10-29）。 */
@media(max-width:1080px) and (max-aspect-ratio:1/1){.heroSec .hmore{display:flex}}
/* 900–1080 的横屏（1024×768 / 1080×608 这类）不放这颗按钮：
   这一档 .hw 已经切成单列，文字 + 演示窗一路顶到屏底，按钮只能压在演示窗列表上
   （2026-10-30 实测 1080×608 压进去 93px、1024×768 压进去 49px）。
   这些尺寸滚一下就能走，别为了一个提示把内容盖住。 */
/* 矮屏（≤700）再压一档：icon 26、字 10.5，别让它跟画框叠在一起 */
@media(max-width:1080px) and (max-aspect-ratio:1/1) and (max-height:700px){
  .heroSec .hmore{gap:5px;bottom:calc(8px + env(safe-area-inset-bottom))}
  .hmore .hm-ic{width:26px;height:26px}
  .hmore .hm-ic i{width:7px;height:7px;border-width:2px}
  .hmore .hm-t{font-size:11px}
  .hmore .hm-s{font-size:10.5px}
}
.hmore .hm-t{
  font-family:var(--hand);font-size:12px;letter-spacing:.2em;text-indent:.2em;
  color:var(--ink2);white-space:nowrap;
}
/* 圆贴纸：38px 柠檬黄实心 + 2px 墨边 + 硬投影，跟第二屏那颗一模一样 */
.hmore .hm-ic{
  display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;
  border:2px solid var(--ink);background:var(--lemon);
  box-shadow:2px 3px 0 rgba(59,46,39,.7);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.hmore .hm-ic i{
  display:block;width:10px;height:10px;margin-bottom:3px;
  border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
  transform:rotate(45deg);
  animation:bob 1.6s var(--ease) infinite;
}
.hmore .hm-s{
  font-family:var(--hand);font-size:11.5px;letter-spacing:.06em;
  color:var(--ink3);white-space:nowrap;
}
/* 能点就得有手感：悬停抬起，按下压扁（跟 #hint 同一套） */
.hmore:hover .hm-ic{transform:translateY(-2px);box-shadow:2px 5px 0 rgba(59,46,39,.7)}
.hmore:active .hm-ic{transform:translate(2px,3px);box-shadow:0 0 0 rgba(59,46,39,.7)}
.hmore:hover .hm-t,.hmore:focus-visible .hm-t,
.hmore:hover .hm-s,.hmore:focus-visible .hm-s{color:var(--coral)}
.hmore:focus-visible{outline:none}
.hmore:focus-visible .hm-ic{outline:3px solid var(--coral);outline-offset:3px}
/* 单列那档：竖排会顶到演示窗脚上（390×844 只剩 92px），改成「文字 + icon」一行、
   业务那行小字独占第二行，整体压到 56px 高 */
@media(max-width:1080px){
  .heroSec .hmore{
    /* width:max-content 不能省：absolute + left:50% 的可用宽度只剩半屏，
       横排那行会被挤成两截（390 宽下实测换行），得按内容自己量宽度 */
    width:max-content;max-width:calc(100vw - 36px);
    flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;
    column-gap:9px;row-gap:4px;
    bottom:calc(12px + env(safe-area-inset-bottom));padding:5px 12px;
  }
  .hmore .hm-t{font-size:11.5px;letter-spacing:.16em;text-indent:.16em}
  .hmore .hm-ic{width:30px;height:30px}
  .hmore .hm-ic i{width:8px;height:8px;border-width:2.5px;margin-bottom:2px}
  .hmore .hm-s{flex-basis:100%;text-align:center;font-size:11px}
}
html.calm .hmore .hm-ic i{animation:none}
@media(prefers-reduced-motion:reduce){
  .heroSec .hmore{opacity:1;transition:none}
  .hmore .hm-ic i{animation:none}
}

/* ---------- 演示窗 ---------- */
.hdemo{
  --rx:0deg;--ry:0deg;
  position:relative;
  width:100%;
  border:2px solid rgba(59,46,39,.82);
  border-radius:18px;
  background:linear-gradient(180deg,#FFFDF7 0%,#FFF8EA 100%);
  box-shadow:7px 7px 0 rgba(59,46,39,.12),0 34px 64px -52px rgba(59,46,39,.85);
  overflow:hidden;
  transform:perspective(1300px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .34s var(--ease);
}
.hdemo::after{                      /* 跟着指针走的一层柔光，只在桌面出现 */
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .3s linear;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 70%);
}
@media (hover:hover) and (pointer:fine){
  .hdemo{cursor:pointer}        /* 整窗可点，鼠标给个手型；触屏没有这一说，不给 */
  .hdemo:hover::after{opacity:1}
}

.hd-top{
  display:flex;align-items:center;gap:7px;
  padding:8px 12px;
  border-bottom:1.5px solid rgba(59,46,39,.10);
  background:rgba(255,252,243,.86);
}
.hd-dots{display:flex;gap:4px;flex:0 0 auto}
.hd-dots i{display:block;width:7px;height:7px;border-radius:50%;background:var(--coral)}
.hd-dots i:nth-child(2){background:var(--lemon)}
.hd-dots i:nth-child(3){background:var(--mint)}
.hd-title{
  font-family:var(--round);font-size:11.5px;font-weight:700;color:var(--ink);
  letter-spacing:.02em;margin-left:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 「出品」比公司名轻一档，像片头署名 */
.hd-title em{font-style:normal;margin-left:6px;font-size:.86em;font-weight:600;
  color:var(--ink3);letter-spacing:.06em}
.hd-badge{
  margin-left:auto;flex:0 0 auto;
  font-family:var(--round);font-size:9px;font-weight:700;letter-spacing:.04em;
  color:#2C7A5C;background:rgba(63,191,154,.15);
  border:1px solid rgba(63,191,154,.36);border-radius:100px;
  padding:3px 7px;
}

.hd-body{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(11px,1.3vw,17px);
  padding:clamp(11px,1.3vw,15px) clamp(11px,1.3vw,15px) clamp(10px,1.2vw,14px);
  align-items:start;
}

/* 机身：圆角按宽度走，换个尺寸也不会变方 / 变圆 */
.hd-phone{
  --pw:clamp(120px,11.8vw,164px);
  position:relative;flex:0 0 auto;
  width:var(--pw);aspect-ratio:9/19.5;
  border-radius:calc(var(--pw) * .145);
  border:2.5px solid rgba(59,46,39,.9);
  background:#191410;
  overflow:hidden;
  box-shadow:0 16px 30px -22px rgba(59,46,39,.95);
  isolation:isolate;
}
.hd-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 四条压暗带：scale 伸缩，switch 时不排版 */
.hd-safe{position:absolute;inset:0;pointer-events:none;z-index:2}
.hd-safe b{position:absolute;display:block;background:rgba(10,7,5,.58);
  transition:transform .48s cubic-bezier(.22,.72,.2,1)}
.hd-safe .st{left:0;right:0;top:0;height:100%;transform-origin:50% 0;transform:scaleY(var(--st,.11))}
.hd-safe .sb{left:0;right:0;bottom:0;height:100%;transform-origin:50% 100%;transform:scaleY(var(--sb,.27))}
.hd-safe .sl{left:0;top:0;bottom:0;width:100%;transform-origin:0 50%;transform:scaleX(var(--sl,.04))}
.hd-safe .sr{left:0;top:0;bottom:0;width:100%;transform-origin:100% 50%;transform:scaleX(var(--sr,.23))}
/* 净区虚线框：四条独立的线，各自贴到百分比位置上。
   注意别用 translate 百分比 —— 它相对元素自身尺寸，宽 0 的线会原地不动。 */
.hd-net{position:absolute;inset:0;z-index:3;pointer-events:none}
.hd-net i{
  position:absolute;display:block;
  border:0 solid rgba(255,255,255,.97);
  filter:drop-shadow(0 0 3px rgba(0,0,0,.55));
  transition:left .46s cubic-bezier(.22,.72,.2,1),top .46s cubic-bezier(.22,.72,.2,1),
             width .46s cubic-bezier(.22,.72,.2,1),height .46s cubic-bezier(.22,.72,.2,1);
}
.hd-net .nt,.hd-net .nb{height:0;border-top-width:2px;border-top-style:dashed}
.hd-net .nl,.hd-net .nr{width:0;border-left-width:2px;border-left-style:dashed}

/* 手机上角那块平台名：跟着当前选中的平台换 */
.hd-cur{display:flex;align-items:baseline;gap:6px;margin-bottom:5px;min-height:16px}
.hd-cur b{
  font-family:var(--round);font-size:12.5px;font-weight:800;color:var(--ink);
  letter-spacing:.01em;line-height:1.1;
}
.hd-cur span{font-family:var(--round);font-size:9px;color:var(--ink3);letter-spacing:.02em}

/* 右侧结论 */
.hd-res{min-width:0;display:flex;flex-direction:column;align-self:stretch}
.hd-sum{
  display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;
  font-family:var(--round);font-size:9.5px;color:var(--ink3);letter-spacing:.02em;
  padding-bottom:7px;border-bottom:1.5px dashed rgba(59,46,39,.16);
}
.hd-sum b{font-size:14px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.01em}
.hd-sum b.c1{color:#2C7A5C}
.hd-sum b.c2{color:#B8860B}
.hd-sum b.c3{color:#C2544C}
.hd-sum em{font-style:normal;font-size:9px;color:var(--ink3);margin-right:4px}
.hd-sum .sp{flex:1 1 auto}

.hd-list{display:flex;flex-direction:column;justify-content:space-between;flex:1 1 auto;margin-top:4px;gap:1px}
.hd-row{
  display:grid;grid-template-columns:5px minmax(0,1fr) auto;
  align-items:center;gap:6px;
  padding:6px 6px;border:0;border-radius:7px;
  background:transparent;cursor:pointer;
  font-family:var(--round);font-size:10px;color:var(--ink3);
  text-align:left;line-height:1.2;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.hd-row .dot{width:5px;height:5px;border-radius:50%;background:rgba(59,46,39,.28);
  transition:background .18s var(--ease),transform .18s var(--ease)}
.hd-row .nm{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-row .tg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;font-size:9.5px;color:var(--ink2)}
.hd-row[aria-pressed="true"]{background:rgba(255,107,107,.11);color:#C2544C}
.hd-row[aria-pressed="true"] .nm{color:#C2544C}
.hd-row[aria-pressed="true"] .dot{background:var(--coral);transform:scale(1.35)}
@media (hover:hover) and (pointer:fine){
  .hd-row:hover{background:rgba(59,46,39,.055);color:var(--ink2)}
}

/* 窗底那条：一句话提示 + 进软件介绍页的出口 */
.hd-foot{
  display:flex;align-items:center;gap:8px;
  padding:7px 12px 8px;
  border-top:1.5px solid rgba(59,46,39,.09);
  background:rgba(255,252,243,.7);
}
.hd-foot .hint{
  flex:1 1 auto;min-width:0;
  font-family:var(--round);font-size:10px;font-weight:600;letter-spacing:.01em;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 整窗可点，但这个 a 才是语义出口：Tab 能到、右键能开新标签。
   整块点击由 JS 委托兜住（见首屏演示窗那段），十家那一列不参与 */
.hd-foot .hd-go{
  margin-left:auto;flex:0 0 auto;
  font-family:var(--round);font-size:10px;font-weight:600;color:var(--ink2);
  text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(59,46,39,.22);padding-bottom:1px;
  transition:color .16s var(--ease),border-bottom-color .16s var(--ease);
}
.hd-foot .hd-go em{font-style:normal;font-size:10px;opacity:.62;margin-left:2px}
@media (hover:hover) and (pointer:fine){
  .hd-foot .hd-go:hover{color:#C2544C;border-bottom-color:rgba(194,84,76,.55)}
}

/* 进场：演示窗比文字晚半拍落下 */
.hdemo{opacity:0;transform:perspective(1300px) rotateX(calc(var(--rx) + 7deg)) translateY(26px) scale(.97)}
section.in .hdemo{opacity:1;transform:perspective(1300px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0) scale(1);
  transition:opacity .8s var(--ease) .18s,transform .9s var(--ease) .18s}
section.in .hdemo.tilted{transition:transform .34s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .hdemo,section.in .hdemo{opacity:1;transform:none;transition:none}
  .hd-safe b,.hd-net{transition:none}
}

/* ---------- 演示窗的窄屏适配 ---------- */
@media (max-width:1080px){
  /* 单列：文字在上、演示窗在下。这一档最容易顶出屏幕，整体收一档。
     2026-10-28：单列之后贴纸/波浪/卖点/按钮还是桌面那套左对齐，右边空出一大条，
     老苗说「不平衡」。这里把整块改成中轴对称，跟下面的演示窗共用一条中线。 */
  .heroSec .hw{grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.4vw,22px);max-width:620px;
    text-align:center}
  .heroSec .hleft{--h1fs:clamp(32px,5.6vw,52px)}
  .heroSec .hleft .h1{line-height:1.1}
  #feed section.heroSec .hleft .h2{max-width:32em;font-size:clamp(12.5px,1.5vw,14.5px);line-height:1.70;
    margin-left:auto;margin-right:auto}
  /* 原来是整段不显示（长文案在 390 宽下要折四五行）。
     2026-10-29 文案换成短句，两行就够，单列这档恢复显示；
     字号与行高在下面 820 那条里再压一档。
     但两类屏仍然藏掉（下面两条 @media），否则加这两行就顶出屏幕：
       · 横着的单列（1024×768 / 1080×800 这类平板横屏）：宽不够放大、高度紧；
       · 极矮竖屏（375×667、360×640）：本来就贴边。 */
  .heroSec .hleft .hair{margin-left:auto;margin-right:auto}
  .heroSec .hleft .hmeta{justify-content:center}
  /* 贴纸到 INSIGHT 的间距：桌面 16，单列这档收一档，别跟着视口放大 */
  .heroSec .hmeta{margin-bottom:clamp(12px,1.5vw,16px)}
  .heroSec .hPts{justify-content:center}
  .heroSec .heroBtns{justify-content:center}
  .heroSec .heroLinks{justify-content:center}
  .heroSec .heroBtns{margin-top:15px}
  .heroSec .hbtn{font-size:13px;padding:9px 16px}
  /* 这一行在竖屏被 JS 搬到演示窗下面了，原来是贴按钮的 11px，现在跟画框留一口气 */
  .heroSec .heroLinks{margin-top:16px;margin-bottom:2px}
  .hd-phone{--pw:clamp(104px,13vw,132px)}
  .hdemo{border-radius:16px}
  .hd-row{font-size:9.5px;padding:4.5px 5px}
  .hd-row .nm{font-size:10px}
  .hd-row .tg{font-size:9px}
  #feed section.homeSec #hint,#hint{bottom:4px;gap:6px}
  #hint .ring{width:32px;height:32px}
  #hint .htxt{font-size:10px;letter-spacing:.28em}
}
/* 单列但横着的屏：1024×768、1080×800 这类，副标题一加就贴边/溢出 → 不显示。
   实测：1024×768 加了两行会顶到 -14px，1080×800 贴到 1px。 */
@media (max-width:1080px) and (min-aspect-ratio:1/1) and (max-height:820px){
  .heroSec .hleft .h2{display:none}
}
/* 极矮竖屏（老 SE 667、小屏安卓 640）：加了两行会顶出屏幕且压到「向下滑动」 */
@media (max-width:1080px) and (max-aspect-ratio:1/1) and (max-height:700px){
  .heroSec .hleft .h2{display:none}
}
@media (max-width:820px){
  .heroSec .hw{max-width:460px;padding:0 20px;gap:14px}
  .heroSec .hleft{--h1fs:clamp(30px,8.4vw,40px)}
  .heroSec .hleft .h1{line-height:1.1}
  #feed section.heroSec .hleft .h2{font-size:12.5px;line-height:1.66;margin-top:10px}
  /* 这里的 .hb 以前是藏掉的（旧长句在手机上硬断行更糟）。2026-10-29 换短句后，
     分号后的这个断点正好就是手机两行的分界，藏了就变成「客户随手圈一 / 笔」——
     所以不再隐藏，让 <br> 在手机上照样生效。 */
  .heroSec .hleft .hair{width:96px;height:8px;margin-top:10px}
  .heroSec .hPts{margin-top:12px;font-size:11.5px;letter-spacing:.03em;gap:6px 14px}
  /* 贴在手机上收到跟墨牌 1:1：字号/内距压一档（文案已删「产品 · 」）；
     影长也从 2px 收到 1.5px —— 贴纸只有这一个小面积块，1.5 才不抢墨牌 */
  .heroSec .hleft .hmeta .eyebrow{font-size:12px;padding:5px 11px;letter-spacing:.06em;
    box-shadow:1.5px 1.5px 0 rgba(59,46,39,.12)}
  .heroSec .heroBtns{margin-top:10px;gap:8px}
  .heroSec .hbtn{font-size:12.5px;padding:9px 15px}
  /* 主按钮：手机按钮 40px 高，影长按比例是 2.7，取 2 是克制下调（不是砍半）。
     影长必须与下面 ≤820 的 :active 位移相等，否则按下去会「陷过影子」 */
  .heroSec .hbtn.pri{box-shadow:2px 2px 0 rgba(255,201,75,.72)}
  /* 次按钮墨影 3 → 2：与主按钮同长，"位移=影长"这条对次按钮同样成立。
     (0,4,0) 特异性会连 hover 一起压住 —— 所以窄屏 + 指针设备上，
     主按钮 hover 影会长（2→4），次按钮 hover 影停在 2px。**这是刻意的，别补规则**：
     一次只悬停一颗，两者不会被并排比较；次按钮仍有 :hover 的 translateY(-1px) 上浮。
     真要补也只能补进 @media (hover:hover) and (pointer:fine) 那块里。 */
  .heroSec .heroBtns .hbtn:not(.pri){box-shadow:2px 2px 0 rgba(59,46,39,.78)}
  /* 上面这条 (0,4,0) 压得过 .heroSec .hbtn:active 的 (0,3,0)，所以按下时必须再抬一档，
     否则次按钮按下去位移了、影却不收，会「拖着影子一起滑」 */
  .heroSec .heroBtns .hbtn:not(.pri):active{box-shadow:0 0 0 rgba(0,0,0,0)}
  .heroSec .heroLinks{margin-top:11px;gap:9px}
  .heroSec .heroLinks .hlink{font-size:11px}
  .heroSec .heroLinks button.hlink{font-size:11px}
  .hdemo{border-radius:15px;box-shadow:5px 5px 0 rgba(59,46,39,.12)}
  .hd-top{padding:6px 10px;gap:6px}
  .hd-dots i{width:6px;height:6px}
  .hd-title{font-size:10px}
  .hd-badge{font-size:7.5px;padding:2px 6px}
  .hd-body{gap:9px;padding:9px 9px 7px;grid-template-columns:auto minmax(0,1fr)}
  .hd-phone{--pw:96px;border-width:2px}
  .hd-cur b{font-size:11px}
  .hd-cur span{font-size:8px}
  .hd-row{font-size:8.5px;padding:2.5px 4px;gap:4px}
  .hd-row .nm{font-size:9px}
  .hd-row .tg{font-size:8px}
  .hd-sum{font-size:8px;gap:3px;padding-bottom:4px}
  .hd-sum b{font-size:11px}
  .hd-sum em{font-size:8px;margin-right:3px}
  .hd-foot{padding:5px 9px 5.5px}
  .hd-foot .hint{font-size:9px}
  /* 首屏现在排得满，下滑提示要贴到最底下，别压在演示窗上 */
  #feed section.homeSec #hint,#hint{bottom:2px;gap:6px;padding:4px 8px}
  #hint .ring{width:30px;height:30px}
  #hint .htxt{font-size:9.5px;letter-spacing:.26em}
}
@media (max-width:380px){
  .hd-phone{--pw:96px}
  .hd-row .tg{display:none}
}
/* 矮屏（笔记本 768 高、横屏手机）：把间距和窗一起收 */
@media (max-height:760px) and (min-width:821px){
  .heroSec .hleft{--h1fs:clamp(32px,3.9vw,54px)}
  #feed section.heroSec .hleft .h2{font-size:13px;line-height:1.72;margin-top:11px}
  .heroSec .heroBtns{margin-top:17px}
  .heroSec .heroLinks{margin-top:11px}
  .hd-phone{--pw:clamp(96px,9vw,122px)}
  .hd-row{padding:3px 5px;font-size:9.5px}
}
/* ==== HERO-DEMO:END ==== */

/* ========== 08 公司：档案 + 摄影棚 + 联系（2026-10-27 三屏合一） ==========
   第一版为了压进一屏，把 12 张实景图全砍了。老苗看完说「一页太少了，可以带滑动的
   一页，长度再长一倍，起码摄影棚的图片要在」—— 现在它是一屏高的容器 + 内部滚动，
   内容约两屏，12 张实景图组成图集放在中间。
   **内滚不是事**：#feed section:last-child 本来就被 wfade（底部渐隐）和滚轮分流
   那两处逻辑认作「可内滚的屏」，手势滚到底会自然把剩余行程交给 #feed 翻页。
   选择器一律带 #feed section.about 前缀：#feed section:last-child .h1 特异性更高，
   光写 .about .h1 会被它压过。 */
#feed section.about .wrap{max-width:1020px;max-height:100dvh;max-height:100svh;
  padding-top:clamp(80px,9vh,100px);
  /* 底部多留一截：王经理浮窗（58px 高 + 22px 底距）从这屏开始常驻，不然滚到底会压住最后一行图集 */
  padding-bottom:clamp(96px,11vh,124px);
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-y:auto}
#feed section.about .wrap::-webkit-scrollbar{display:none}
/* 内容超一屏后 section 的 align-items:center 就没意义了（容器已经顶满），
   显式改 flex-start 免得矮视口下上半截被切掉且滚不到 */
#feed section.about{align-items:flex-start}
#feed section.about .eyebrow{margin-bottom:12px}
#feed section.about .h1{font-size:clamp(32px,4.2vw,54px)}
#feed section.about .h2{font-size:clamp(12px,1.3vw,15px);margin-top:10px;color:var(--ink2);font-weight:600}
#feed section.about .hair{margin-top:14px}

.abgrid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(16px,2.4vw,30px);
  margin-top:clamp(14px,2.2vh,24px);text-align:left;align-items:stretch}
/* 两栏等高，但左栏文字本来就比右栏短：让它在自己那格里垂直居中，
   空白上下均分，读起来是「这一栏居中」而不是「下面缺内容」。
   右栏的图 flex 吃掉左栏没占满的高度，两栏严丝合缝。 */
.abmain{display:flex;flex-direction:column;justify-content:center;min-width:0}
.abfac{display:flex;flex-direction:column;min-width:0}

/* 左：四个数 */
.abkv{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.abi{padding:9px 5px;border-radius:11px;text-align:center;
  background:var(--paper2);border:1.5px solid var(--line)}
.abi .n{display:block;font-size:clamp(16px,1.8vw,23px);font-weight:800;color:var(--ink);
  line-height:1.08;letter-spacing:-.02em}
.abi .n .u{font-size:.55em;color:var(--coral);margin-left:1px}
.abi .l{display:block;font-size:9.5px;color:var(--ink3);margin-top:3px;letter-spacing:.02em}
.abi.hl{background:linear-gradient(160deg,rgba(255,107,107,.14),rgba(255,107,107,.028));
  border-color:rgba(255,107,107,.34);cursor:pointer}
.abi.hl .n{color:#C2544C}
.abi.hl .l{color:#B1705F}
@media (hover:hover) and (pointer:fine){
  .abi.hl:hover{background:linear-gradient(160deg,rgba(255,107,107,.22),rgba(255,107,107,.06))}
}
.abi.hl:focus-visible{outline:2px solid rgba(194,84,76,.6);outline-offset:2px}

.abslogan{margin-top:13px;display:flex;align-items:center;gap:7px;
  font-size:clamp(13px,1.5vw,17px);font-weight:800;color:var(--ink)}
.abslogan::before{content:'';width:14px;height:3px;border-radius:3px;background:var(--coral);flex:0 0 auto}

.abcopy{margin-top:8px}
.abcopy p{font-size:clamp(11px,1vw,12.5px);line-height:1.72;color:var(--ink2)}
/* 全局 `*{margin:0}` 把 <p> 的默认边距也清了，段与段之间原本一点缝都没有。
   这里补一点上间距，业务条目才分得开（2026-10-29 拆「平台定制」成独立一段时加的）。 */
.abcopy p + p{margin-top:7px}
.abcopy b{color:var(--ink);font-weight:700}
.abcopy a{color:#C2544C;text-decoration:none;border-bottom:1px solid rgba(194,84,76,.4);padding-bottom:1px}

/* 品牌报道：只有一条深度案例，做成一张可点整块的卡，不是一排链接 */
.abpress{margin-top:12px}
.abpa{display:flex;flex-direction:column;gap:5px;text-decoration:none;
  padding:10px 12px 11px;border-radius:11px;border:1.5px solid rgba(59,46,39,.14);
  background:var(--paper2);box-shadow:2px 2px 0 rgba(59,46,39,.06);
  transition:border-color .18s ease,box-shadow .18s ease}
.abph{display:flex;align-items:center;justify-content:space-between;gap:10px}
.abpk{font-size:8.5px;font-weight:700;letter-spacing:.1em;line-height:1.5;
  border:1px solid var(--line);border-radius:100px;padding:1px 6px;color:var(--ink3)}
.abgo{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;color:#C2544C;white-space:nowrap}
/* 箭头位移只动 transform，且 .18s 的 transition 可被 hover 打断；减动态时整条关掉 */
.abgo i{font-style:normal;display:inline-block;transition:transform .18s ease}
.abpt{font-size:clamp(12px,1.05vw,13.5px);font-weight:800;line-height:1.4;color:var(--ink);
  text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.abpd{font-size:clamp(10px,.95vw,11.5px);line-height:1.62;color:var(--ink2);
  text-wrap:pretty}
.abps{font-size:9px;line-height:1.5;color:var(--ink3);letter-spacing:.02em}
@media (hover:hover) and (pointer:fine){
  .abpa:hover{border-color:rgba(194,84,76,.42);box-shadow:2px 2px 0 rgba(194,84,76,.13)}
  .abpa:hover .abgo i{transform:translateX(2px)}
}
@media (prefers-reduced-motion:reduce){
  .abpa,.abgo i{transition:none}
  .abpa:hover .abgo i{transform:none}
}

/* 右：摄影棚一图一地址 */
.abshot{position:relative;margin:0;border-radius:13px;overflow:hidden;
  flex:1 1 auto;min-height:200px;display:flex;flex-direction:column;cursor:pointer;
  border:1.5px solid rgba(59,46,39,.16);background:var(--paper2);
  box-shadow:3px 3px 0 rgba(59,46,39,.09)}
.abshot img{display:block;width:100%;height:100%;min-height:0;object-fit:cover}
.abshot figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 11px 7px;
  font-size:9.5px;line-height:1.45;color:#FFFDF6;text-align:left;
  background:linear-gradient(transparent,rgba(32,22,15,.74))}
.abshot figcaption b{font-weight:800;margin-right:3px}
/* 轮播封面图注：标题加大（老苗 2026-10-30 21:35「轮播图下面的标题大一点」）。
   .abcar 也带 .abshot，但这里覆盖成更大字号，只影响轮播，不影响下面图集 .gshot。 */
.abcar figcaption{font-size:12.5px;padding:18px 13px 9px;line-height:1.5}
.abcar figcaption b{font-weight:900;margin-right:4px;font-size:14px}
@media(max-width:640px){
  .abcar figcaption{font-size:11px;padding:15px 10px 8px}
  .abcar figcaption b{font-size:12.5px}
}

/* 主图作品轮播（2026-10-30 老苗：换成新片场作品封面）：整块是 <a>，直接跳对应作品页
   2026-10-30 18:00：4:3 画幅 + 左右按钮 + 切图缩放动效（WAAPI，可中断） */
.abcar-wrap{position:relative;margin:0;border-radius:13px;overflow:hidden;
  border:1.5px solid rgba(59,46,39,.16);background:var(--paper2);
  box-shadow:3px 3px 0 rgba(59,46,39,.09)}
.abcar{display:block;aspect-ratio:16/9;flex:0 0 auto;width:100%;
  text-decoration:none;color:inherit;cursor:pointer}
.abcar img{display:block;width:100%;height:100%;object-fit:cover}
/* 切图缩放动效：图片淡入 + 从 1.08 缩到 1。用 WAAPI 触发（见 carPaint），
   img 自身不再挂 transition，避免 WAAPI 与 transition 打架 */
/* 切图缩放动效：图片淡入 + 从 1.08 缩到 1。用 WAAPI 触发（见 carPaint），
   img 自身不再挂 transition，避免 WAAPI 与 transition 打架 */
/* 圆点：放右下角、图注文字条上方。图注标题加大后高度变高，圆点再抬一点（2026-10-30 21:35） */
.abcar-dots{position:absolute;right:11px;bottom:52px;display:flex;gap:5px;z-index:3}
@media(max-width:640px){.abcar-dots{bottom:46px}}
.abcar-dots i{width:5px;height:5px;border-radius:50%;background:rgba(251,244,230,.5);
  transition:background .3s var(--ease),transform .3s var(--ease)}
.abcar-dots i.on{background:#FFFDF6;transform:scale(1.35)}
/* 右上角「↗」角标：告诉人能点开新页面 */
.abcar-go{position:absolute;top:10px;right:10px;z-index:3;
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--ink);color:var(--paper);font-size:12px;font-weight:800;
  box-shadow:2px 2px 0 rgba(59,46,39,.25);transition:transform .18s var(--ease)}
.abcar:hover .abcar-go{transform:translate(1px,-1px)}
/* 左右切换按钮：半透明纸色圆钮，压在封面两侧中部。点它只切图，不触发跳转 */
.abcar-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;padding:0;margin:0;
  border:1.5px solid var(--ink);background:rgba(251,244,230,.94);color:var(--ink);
  font-size:17px;line-height:1;font-weight:800;cursor:pointer;
  box-shadow:2px 2px 0 rgba(59,46,39,.3);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
  -webkit-tap-highlight-color:transparent}
.abcar-btn.prev{left:9px}
.abcar-btn.next{right:9px}
@media (hover:hover) and (pointer:fine){
  .abcar-btn:hover{transform:translateY(-50%) scale(1.08);background:#FFFDF6}
}
.abcar-btn:active{transform:translateY(-50%) scale(.94);box-shadow:0 0 0 rgba(59,46,39,.3)}
.abcar-btn:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
@media(max-width:640px){.abcar-btn{width:29px;height:29px;font-size:14px;left:6px}.abcar-btn.next{right:6px}}
/* 键盘可达：轮播封面本身是链接 */
.abcar:focus-visible{outline:3px solid var(--coral);outline-offset:3px}

.abaddr{margin-top:9px;padding:9px 11px;border-radius:11px;
  background:var(--paper2);border:1.5px solid var(--line);text-align:left}
.abaddr-h{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.abaddr-h b{font-size:11.5px;font-weight:800;color:var(--ink)}
.abaddr-h span{font-size:9.5px;color:var(--ink3)}
.abaddr-l{margin-top:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.abaddr-t{flex:1 1 100%;font-size:10px;line-height:1.5;color:var(--ink2)}
.abcb{font:inherit;font-size:9.5px;font-family:var(--round);font-weight:700;
  padding:4px 9px;border-radius:100px;cursor:pointer;
  background:#fff;border:1.5px solid var(--ink);color:var(--ink);
  box-shadow:1.5px 1.5px 0 rgba(59,46,39,.5);
  transition:background .18s var(--ease)}
@media (hover:hover) and (pointer:fine){ .abcb:hover{background:#FFF0C9} }
.abcb.done{background:var(--mint);border-color:var(--ink);color:#fff}
.abnav{font-size:10px;font-weight:700;font-family:var(--hand);color:var(--coral);
  cursor:pointer;white-space:nowrap;padding:4px 2px}
@media (hover:hover) and (pointer:fine){ .abnav:hover{opacity:.7} }
.abnav:focus-visible{outline:2px solid rgba(194,84,76,.6);outline-offset:2px}

/* 底：一行联系 + 页脚 */
.abcall{margin-top:clamp(26px,4vh,40px);display:flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--ink2)}
/* 关于银赛末尾的「观看银赛案例」：整颗是可点链接，手机上一按就进作品页 */
.abgoWrap{margin:clamp(26px,4vh,40px) 0 6px;display:flex;justify-content:center}
.abgo{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  padding:13px 28px;border-radius:100px;background:var(--ink);color:#FFFCF3;
  font-weight:800;font-size:14px;letter-spacing:.03em;text-decoration:none;
  box-shadow:3px 3px 0 rgba(59,46,39,.28);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.abgo .arw{font-style:normal;font-size:13px;opacity:.72}
@media (hover:hover) and (pointer:fine){
  .abgo:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(59,46,39,.32)}
}
.abgo:active{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(59,46,39,.28)}

.abcall .abcl{font-weight:800;color:var(--ink);font-size:11.5px;letter-spacing:.02em}
.abcall .absep{font-style:normal;color:var(--ink3);opacity:.6}
.abcall a{color:inherit;text-decoration:none}
.abcall .abtel{font-weight:700;color:var(--ink);border-bottom:1px solid rgba(59,46,39,.24);padding-bottom:1px}
.abcall .abwx{font:inherit;font-size:11.5px;font-family:var(--round);background:none;border:0;
  color:var(--ink2);cursor:pointer;padding:0;border-bottom:1px solid rgba(59,46,39,.2)}
.abcall .abcta{font-weight:800;color:#C2544C;cursor:pointer;
  border-bottom:1px solid rgba(194,84,76,.45);padding-bottom:1px}
@media (hover:hover) and (pointer:fine){
  .abcall .abtel:hover,.abcall .abwx:hover{color:#C2544C;border-color:rgba(194,84,76,.5)}
  .abcall .abcta:hover{color:var(--coral);border-color:var(--coral)}
}

.abfoot{margin-top:clamp(10px,1.6vh,16px);padding-top:9px;
  border-top:1.5px dashed rgba(59,46,39,.16);text-align:left}
.abfoot .fnote{margin:0 0 3px;font-size:8px;line-height:1.55;color:var(--ink3)}
.abfoot .fbot{margin-top:5px;display:flex;align-items:center;flex-wrap:wrap;gap:5px;
  font-size:9px;color:var(--ink3)}
.abfoot .fbot a{color:var(--ink3);text-decoration:none;border-bottom:1px solid rgba(59,46,39,.16)}
.abfoot .fdot{opacity:.5}
/* ---------- 棚内实景图集 ----------
   12 张图 3 列铺开：桌面每张约 320×213，滚一屏多一点才看完 —— 这一屏的长度
   主要就是它撑起来的。图必须真在，上一版删过一次被退回来了。 */
.abgal-h{margin-top:clamp(20px,3.2vh,32px);display:flex;align-items:baseline;
  gap:9px;flex-wrap:wrap;text-align:left;
  padding-top:clamp(14px,2.2vh,20px);border-top:1.5px dashed rgba(59,46,39,.16)}
.abgal-t{font-size:clamp(13px,1.5vw,17px);font-weight:800;color:var(--ink);letter-spacing:.01em}
.abgal-t::before{content:'';display:inline-block;width:3px;height:.82em;margin-right:7px;
  border-radius:2px;background:var(--coral);vertical-align:-.06em}
.abgal-s{font-size:10px;color:var(--ink3);letter-spacing:.01em}
/* 「点开看大图」：图集和主图都能点开全屏幻灯片，得先让人知道 */
.abgal-x{font-style:normal;color:#C2544C;font-weight:700;
  border-bottom:1px dashed rgba(194,84,76,.5);padding-bottom:1px}

.abgal{margin-top:clamp(10px,1.6vh,15px);display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.1vw,13px)}
.gshot{position:relative;margin:0;border-radius:12px;overflow:hidden;
  aspect-ratio:3/2;background:var(--paper2);cursor:pointer;
  border:1.5px solid rgba(59,46,39,.14);
  box-shadow:2px 2px 0 rgba(59,46,39,.07);
  transform:translateZ(0)}
.gshot img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease)}
.gshot figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 10px 6px;
  font-size:9.5px;font-weight:700;color:#FFFDF6;letter-spacing:.02em;
  text-align:left;pointer-events:none;
  background:linear-gradient(transparent,rgba(32,22,15,.72))}
/* 只在真有精确指针时才给缩放：触屏上 hover 会粘住不散 */
@media (hover:hover) and (pointer:fine){
  .gshot:hover img{transform:scale(1.035)}
}
/* 进场：每张图自己进视口才起，用 translate/opacity，够独立合成不掉帧 */
.gshot.vi{opacity:0;transform:translate3d(0,14px,0)}
.gshot.in{opacity:1;transform:none;
  transition:opacity .42s var(--ease),transform .5s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .gshot.vi{opacity:1;transform:none}
  .gshot.in{transition:none}
  .gshot img{transition:none}
}

/* 单列：手机上把两块并成一条竖排，靠字号和间距压进一屏 */
@media(max-width:860px){
  #feed section.about .wrap{padding-top:74px;padding-bottom:40px}
  .abgal{grid-template-columns:repeat(2,1fr);gap:8px}
  .abgal-h{margin-top:18px;padding-top:12px}
  .gshot figcaption{font-size:8.5px;padding:12px 8px 5px}
  #feed section.about .h1{font-size:clamp(28px,7vw,38px)}
  #feed section.about .h2{font-size:clamp(10.5px,2.9vw,13px);line-height:1.45}
  .abgrid{grid-template-columns:1fr;gap:clamp(10px,1.8vh,15px);margin-top:12px}
  .abkv{gap:6px}
  .abi{padding:7px 3px;border-radius:9px}
  .abi .n{font-size:clamp(15px,4.4vw,20px)}
  .abi .l{font-size:8px;letter-spacing:0}
  .abslogan{margin-top:9px;font-size:clamp(12px,3.4vw,15px)}
  .abcopy{margin-top:6px}
  .abcopy p{font-size:clamp(9.8px,2.75vw,11.5px);line-height:1.62}
  .abcopy p + p{margin-top:5px}
  .abpress{margin-top:8px}
  .abpa{padding:9px 10px 10px;gap:4px;border-radius:10px}
  .abpt{font-size:12px}
  .abpd{font-size:10.5px;line-height:1.6}
  .abshot{flex:0 0 auto;min-height:0;aspect-ratio:2/1}
  .abshot img{height:100%}
  /* 作品轮播固定 16:9（覆盖上面 2:1 的旧主图规则，2026-10-30 老苗） */
  .abcar{aspect-ratio:16/9}
  .abaddr{padding:8px 10px}
  .abfoot .fnote{font-size:6.8px;line-height:1.45;margin-bottom:2px}
  .abfoot .fbot{font-size:8.5px;margin-top:4px}
  .abcall{font-size:10.5px;gap:6px;margin-top:22px}
  .abcall .abcl,.abcall .abtel,.abcall .abwx{font-size:10.5px}
}

/* ---------- Call back 屏（品牌收尾）的页脚 ----------
   这块原先挂在「关于银赛」屏里，字号是按密集信息屏定的 8px（手机 6.8px）。
   挪到品牌大标题下面之后，8px 像一排蚂蚁，读不清也不体面。
   抬到 10.5px（手机 10px），跟正文小字一个量级；上面再留一段呼吸，别贴着按钮。
   2026-10-30 老苗：「把备案信息和各种话放在最后一页」。 */
#feed section.homeSec .abfoot{
  width:100%;max-width:820px;margin:clamp(26px,6vh,58px) auto 0;
  padding-top:12px;text-align:center;border-top-color:rgba(59,46,39,.13);
}
#feed section.homeSec .abfoot .fnote{
  font-size:10.5px;line-height:1.72;margin:0 0 5px;color:var(--ink3);
}
#feed section.homeSec .abfoot .fbot{
  margin-top:8px;font-size:10.5px;gap:6px 10px;justify-content:center;
}
/* 版权小字跟备案行字号/颜色完全一致（2026-10-31 老苗：字体统一）
   中文页脚现在挂在 section.about 的 .abfoot 里，不是 homeSec */
#feed section.about .abfoot .fcopy,
#feed section.homeSec .abfoot .fcopy{font-size:9px;color:var(--ink3);opacity:.55;margin-top:6px}
@media(max-width:640px){
  #feed section.about .abfoot .fcopy,
  #feed section.homeSec .abfoot .fcopy{font-size:8.5px}
}
@media(max-width:640px){
  #feed section.homeSec .abfoot{margin-top:24px;padding-top:10px}
  #feed section.homeSec .abfoot .fnote{font-size:10px;line-height:1.66;margin-bottom:4px}
  #feed section.homeSec .abfoot .fbot{font-size:9.5px;gap:5px 8px}
  #feed section.homeSec .abfoot .fcopy{font-size:9.5px}
}
/* 平板 / 窄笔记本：这一档内容撑满整屏，居中会顶到顶栏上（820 下 eyebrow 被切一半），
   改为从顶部排、给顶栏让位，图再压一档把这 64px 挣回来 */
@media(min-width:641px) and (max-width:860px){
  #feed section.about{align-items:flex-start}
  #feed section.about .wrap{padding-top:72px}
  /* 上一版为了压进一屏把主图压到 2.4:1，无影棚那道弧形墙都看不全了。
     现在这一屏本来就是长页，恢复 3:2。 */
  .abshot{aspect-ratio:3/2}
  .abcar{aspect-ratio:16/9}
  /* 平板竖屏 2 列时每张 366×244、六行下来要滚 1500px，比桌面多一半。
     3 列每张 240×160，滚 660px 左右，跟桌面的手感对得上。 */
  .abgal{grid-template-columns:repeat(3,1fr)}
}
/* 小屏手机（360×780 及以下）：图再扁一点，把一屏塞满 */
@media(max-width:640px) and (max-height:820px){
  .abshot{aspect-ratio:2.6/1}
  .abcar{aspect-ratio:16/9}
  .abgrid{gap:9px}
  .abfoot .fnote{font-size:6.4px;line-height:1.42}
}
@media(max-width:400px){
  #feed section.about .h2{font-size:10px}
  .abpress{font-size:8.5px}
  .abpa{padding:8px 9px 9px}
  .abpt{font-size:11.5px}
  .abpd{font-size:10px;line-height:1.58}
  .abps{font-size:8.5px}
  /* 2.6:1 的扁图里说明文字会折成两行、末字「下」孤悬在第二行 */
  /* 2.6:1 的扁图里说明文字会折成两行、末字「下」孤悬在第二行。
     只作用于下面图集 .gshot，别动轮播 .abcar 的标题（2026-10-30 21:35 轮播标题加大） */
  .abgal .gshot figcaption{font-size:9px;padding:13px 8px 6px;line-height:1.4}
  .abcall .abcl{display:none}
}

/* ---------- 更多案例抽屉 ----------
   点击「关于银赛」屏的「45+ 年度成片」从右侧滑入。
   只动 transform 与 opacity：面板走 translateX，遮罩走 opacity，全程不触发排版。
   进场 .32s 强减速（cubic-bezier(.22,1,.36,1)），出场 .22s 加速收走 ——
   出场必须比进场快，慢吞吞地退出去会让人以为卡住了。
   transition 写在「目标状态」上，所以两条时长各管各的方向。 */
#cdr{
  position:fixed;inset:0;
  /* 280：盖得住顶栏(50)/底栏(55)/员工覆盖层(250)，但必须压在 #lead(300) 下面 ——
     抽屉底部那条「聊聊你的项目」会把 lead 叫出来，层级反了就会被抽屉盖住 */
  z-index:280;
  display:flex;justify-content:flex-end;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),visibility .22s var(--ease);
}
#cdr.on{opacity:1;visibility:visible;pointer-events:auto}
#cdr .cdr-mask{
  position:absolute;inset:0;
  background:rgba(59,46,39,.30);
  backdrop-filter:blur(3px) saturate(120%);
  -webkit-backdrop-filter:blur(3px) saturate(120%);
}
#cdr .cdr-panel{
  position:relative;
  width:min(520px,92vw);height:100%;
  display:flex;flex-direction:column;
  padding:24px 22px calc(18px + env(safe-area-inset-bottom));
  background:var(--paper2);
  border-left:2px solid rgba(59,46,39,.82);
  box-shadow:-9px 0 0 rgba(59,46,39,.07),-30px 0 70px -40px rgba(59,46,39,.6);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  transform:translateX(101%);
  transition:transform .22s cubic-bezier(.4,0,1,1);
}
#cdr.on .cdr-panel{
  transform:translateX(0);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
}
#cdr .cdr-head{padding-right:42px}
#cdr .cdr-eyebrow{
  font-family:var(--hand);font-size:12px;letter-spacing:.14em;color:#7A4B2A;
  display:inline-block;padding:3px 10px;border-radius:8px 13px 9px 14px;
  background:linear-gradient(180deg,#FFEDB4,#FFDD86);
  border:1.5px dashed rgba(59,46,39,.22);
  rotate:-1.4deg;
}
#cdr .cdr-title{margin-top:9px;font-size:clamp(21px,3.2vw,26px);font-weight:700;
  color:var(--ink);letter-spacing:.01em;line-height:1.2}
#cdr .cdr-x{
  position:absolute;right:15px;top:16px;width:30px;height:30px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:1.5px dashed rgba(59,46,39,.3);border-radius:50%;
  background:transparent;color:var(--ink2);font-size:12px;line-height:1;cursor:pointer;
  transition:color .18s var(--ease),border-color .18s var(--ease),transform .22s var(--ease);
}
#cdr .cdr-stage{
  position:relative;margin-top:14px;
  /* 弹性吃掉面板剩下的高度：内容不满时自动变大，不留下大片死白；
     矮屏（620）也压得住，min-height 兜底不让它塌成一条 */
  flex:1 1 auto;height:auto;min-height:180px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(59,46,39,.82);border-radius:14px;
  background:#241C16;overflow:hidden;
  box-shadow:5px 5px 0 rgba(59,46,39,.12);
}
/* contain 不裁画面：9:16 竖片、3:4、16:9 都能整幅看到，两侧/上下留深色 */
#cdr .cdr-stage video{display:block;max-width:100%;max-height:100%;object-fit:contain}
#cdr .cdr-cap{margin-top:11px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#cdr .cdr-cap b{font-size:15px;font-weight:700;color:var(--ink)}
#cdr .cdr-cap span{font-size:12px;color:var(--ink3)}
#cdr .cdr-tabs{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px}
#cdr .cdr-tabs button{
  padding:7px 13px;border-radius:99px;cursor:pointer;font:inherit;font-size:12px;
  color:var(--ink2);background:transparent;border:1.5px solid rgba(59,46,39,.18);
  transition:color .16s var(--ease),border-color .16s var(--ease),background-color .16s var(--ease);
}
#cdr .cdr-tabs button.on{
  color:#C2544C;border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.1);
}
#cdr .cdr-note{margin:16px 0 0;font-size:12px;line-height:1.75;color:var(--ink3)}
#cdr .cdr-note a{color:#C2544C;text-decoration:none;border-bottom:1px dashed rgba(194,84,76,.45)}
#cdr .cdr-foot{
  margin-top:auto;padding-top:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1.5px dashed rgba(59,46,39,.16);
  font-size:11.5px;color:var(--ink3);
}
#cdr .cdr-foot a{
  color:#C2544C;font-weight:700;text-decoration:none;white-space:nowrap;
  border-bottom:1px dashed rgba(194,84,76,.45);padding-bottom:1px;
  transition:border-color .18s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  #cdr .cdr-x:hover{color:var(--coral);border-color:rgba(255,107,107,.55);transform:rotate(90deg)}
  #cdr .cdr-tabs button:hover{color:var(--ink);border-color:rgba(59,46,39,.38)}
  #cdr .cdr-tabs button.on:hover{color:#C2544C;border-color:rgba(255,107,107,.62)}
}
@media(max-width:420px){
  #cdr .cdr-panel{width:94vw;padding:20px 16px calc(16px + env(safe-area-inset-bottom))}
  #cdr .cdr-stage{min-height:150px}
}
@media(prefers-reduced-motion:reduce){
  #cdr,#cdr .cdr-panel{transition:none}
  #cdr .cdr-x:hover{transform:none}
}
/* ---------- 下载暂缓开放（2026-10-29 老苗） ----------
   链接的 href 已从 DOM 里删掉，源码层面没有安装包地址；只留一个灰掉的文字位，
   免得访客以为这里坏了。OSS 的 dl/ 照旧更新，测试者手上的直链不受影响。 */
.hlink.is-off{color:var(--ink3) !important;cursor:not-allowed}
.hlink.is-off .ld{
  background:var(--ink3) !important;box-shadow:none !important;animation:none !important;
}
.hlink.is-off em{
  color:#8A7A6E !important;background:rgba(59,46,39,.05) !important;
  border-color:rgba(59,46,39,.14) !important;
}
.hlink.is-off:hover{color:var(--ink3) !important}
.hlink.is-off:hover .arw{color:var(--ink3) !important;transform:none !important}
/* ---------- 首屏标题：FitCheck 在墨色牌子里的样子 ----------
   2026-10-30 老苗：牌子（底色）留着，但不要 .COM / MEDIA 那段擦除了 ——
   FitCheck 就静静待在那儿，跟着这一屏自己的入场一起淡入（.h1b 那条 1.1s）。

   牌子不占额外版面：底色是 padding 撑出来的，再用等量负 margin 抵回去，
   行高不变（padding:.08em .26em / margin:-.08em 0 -.08em 0）。
   2026-10-30 老苗：左边距那 -.26em 已经撤掉 —— 它让牌的左沿比 INSIGHT 的 I
   左出 12px，眼睛读成「整栏是歪的」。现在牌的左沿就是 .fc 的盒左沿，
   与 INSIGHT 共用同一条硬左线，牌面那点半度倾斜交给 ::before 去歪。 */
.heroSec .hleft .fc{
  display:inline-block;
  position:relative;isolation:isolate;
  padding:.08em .26em;margin:-.08em 0 -.08em 0;
  border-radius:.2em;
  background:none;color:var(--paper);
}
/* 墨底色搬到伪元素上：只有「牌」歪 -.8deg，里面的 47px 反白字保持正的。
   旋转若挂在 .fc 上，iOS 会掉 subpixel AA，反白字发虚；
   而且 section.in .h1/.h1b 的入场动画自己占着 transform，往后往 .h1b 加变换都会被覆盖。
   z-index:-1 + isolation 让伪元素压在文字下面、又不跑出 .fc 的层叠上下文。

   ⚠️ 三条别改坏（改前先读）：
   1) .fc 必须保持 background:none —— 一旦给 .fc 加底色/悬停底色，就会看到
      「正的墨牌 + 歪的墨牌」两层。
   2) 禁止给 .fc 加 overflow:hidden —— 倾斜会被裁直，静默失效。
   3) 内描边不要换成 border:1.5px solid —— ::before 是 inset:0，border 会把可见墨边
      从 170 推到 171.5，把整栏的硬左线吃掉 1.5px。宁可整条删掉（它只有 1.62:1，纯装饰）。 */
.heroSec .hleft .fc::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:.2em;background:var(--ink);
  box-shadow:inset 0 0 0 1.5px rgba(251,244,230,.16);
  transform:rotate(-.8deg);
}

/* ---------- 首屏左栏：一条硬左线 + 小链接可读性 ----------
   墨牌的负左边距已归零，整栏左沿（贴纸 / INSIGHT / 墨牌 / 波浪 / 副标题 / 卖点 /
   按钮 / 小链接）统一落在同一条竖线上；牌子那 -.8deg 由伪元素承担，字仍是正的。 */

/* 「下载暂缓开放」是灰掉的位，但不能灰到读不清：
   基础那条带 !important，必须同权重+更晚出现才盖得住。 */
.heroSec .heroLinks .hlink.is-off{color:var(--ink2) !important}
.heroSec .heroLinks .hlink.is-off em{
  font-size:10.5px;color:#8A5A3B !important;background:#FFE9A8 !important;
  border-color:rgba(59,46,39,.16) !important}
/* 触控热区：行盒高度与外框都不变（12px 内距 / -12px 外边距正好抵消），
   只是把可点面积从 15px 撑到 39px，手指不用瞄。 */
.heroSec .heroLinks .hlink{padding:12px 0;margin:-12px 0}

/* ---------- 焦点环统一 ----------
   珊瑚 #FF6B6B 在纸底上只有 2.54:1，不达 3:1；改用 --blue-txt-hi(#B24A45) 的 4.85:1。 */
.heroSec .htitle:focus-visible,
.heroSec .hbtn:focus-visible,
.heroSec .heroLinks .hlink:focus-visible{outline:2px dashed var(--blue-txt-hi);outline-offset:6px}
.heroSec .htitle:focus-visible{outline-offset:10px}
.heroSec .hmore:focus-visible .hm-ic{outline-color:var(--blue-txt-hi)}

/* ---------- 首屏按钮的悬停 / 按下 ----------
   站里 #hint、.more 都是「按下沉进自己的影子里」那一套，首屏这两颗最重要的按钮
   原先完全没有 :active，点下去像点了张图，这里补齐。
   两条硬规矩：
   · 按下位移必须等于该档的影长（桌面 3px 影 → 3px 位移，≤820 的 2px 影 → 2px），
     否则按钮是「飘」了一下，不是「落」下去。
   · 「影长=位移」对次按钮同样成立 —— 所以 ≤820 次按钮的墨影也收到 2px（见上面那条）。
     当初只盯了带柠檬影的主按钮、忘了墨影那颗，就差 1px。
   · hover 一律关进 (hover:hover) and (pointer:fine)：iOS 的 hover 是粘滞的。 */
@media (hover:hover) and (pointer:fine){
  .heroSec .hbtn:hover{transform:translateY(-1px)}
  .heroSec .hbtn.pri:hover{box-shadow:4px 4px 0 rgba(255,201,75,.78)}
}
.heroSec .hbtn:active{transform:translate(3px,3px);box-shadow:0 0 0 rgba(0,0,0,0)}
/* 同权重、更晚出现 —— 否则压不过上面 :hover 那条 4px 影，按下去影不收回 */
.heroSec .hbtn.pri:active{box-shadow:0 0 0 rgba(0,0,0,0)}
@media (max-width:820px){
  .heroSec .hbtn:active{transform:translate(2px,2px)}
}
/* 入场动画那两条 transition-delay（.5s / .56s）会把 hover 和 :active 也一起推迟半秒——
   按下去半秒才动，等于没有反馈；桌面悬停半秒才浮起也是同一句延迟拖的。交互态一律清零。
   ⚠️ 特异性必须是 (0,4,0)：要压的是 section.in .hbtn:nth-child(n) 的 (0,3,1)。
   简化成 .heroSec .hbtn:active 是 (0,3,0) —— b 位打平、c 位 0<1，压不过，
   bug 会静默复活（不报错，只是"点下去半秒后才动"）。别简化这条选择器。 */
.heroSec .heroBtns .hbtn:hover,
.heroSec .heroBtns .hbtn:active{transition-delay:0s}
/* 必须放在上面 ≤820 那条 .heroSec .heroBtns{gap:8px} 之后，同权重靠先后生效 */
@media (max-width:640px){
  .heroSec .heroBtns{gap:6px}
}

/* 减弱动态：下滑箭头那颗 bob 一起停 */
@media(prefers-reduced-motion:reduce){
  .hmore .hm-ic i{animation:none}
}
/* 顶部表头（2026-10-30 拆页）：六项全保留，当前页那一项高亮；跨页项是普通链接 */
#nav a.nav-x.on{background:var(--coral);color:#fff;border-color:var(--coral);
  box-shadow:2px 2px 0 rgba(59,46,39,.55)}
/* 作品页首屏（手机）：上面几条窄屏规则把它收掉了，老苗要求「前面几页也出现」，
   这里用更高特异性放回来，缩小、贴在页码条上方 */
@media(max-width:1180px){
  #feed section.casesec.hasv .bud-clap{display:block;width:56px;height:56px;left:10px;bottom:104px}
}
/* 联系页挂王经理浮窗：底部留出浮窗高度，备案底行不被压住 */
#feed section.homeSec .wrap{padding-bottom:clamp(84px,10vh,104px)}