/* 落地页：没有访问码时的那一屏（26-landing.js）。
   第三版（2026-10-06「网站风格看上去不是coui 风格」）：整页用 COUI 的语言写，
   值取自 coui-html-kit/dist/styles.css，不自己发明：
   · 字：OPPO Sans 4.0（showcase_build.py 按本页用到的字裁成小文件）；
     字号字重照 couiTextDisplay / Headline / Body（标题 500–600，不用粗黑）；
   · 色：底 couiColorBackgroundWithCard #f0f1f2，卡片 #fff，主色 0080FF，
     文字 LabelPrimary .9 / Secondary .54；深色照 kit 的深色表；
   · 形：卡片圆角 20–32（roundCornerXL…XXXXL），阴影 couiShadowLv1/2/4，
     按钮是全圆角胶囊，带 17.0 的边缘光（couiButtonPrimaryShadow），标签是分段控件；
   · 动：进场、按压缩到 .96，曲线 cubic-bezier(.3,0,.1,1)（COUI 的 ease）。
   第四版（2026-10-07「ColorOS 17 风格重新polish」）：照 coloros.com/version/coloros17 —— 居中字标、
   「17」的橙粉紫渐变（--g-17）和「流畅」的紫蓝渐变（--g-flow）各用在一个词上；标题 700 粗重、
   小标是一行粗体字；卡片平铺不投影、圆角 32；一段深色沉浸段；页底渐变卡。
   借 .gate/.lock 的盖层。place-items 要清掉：.gate 的 center 在新版 Chrome 里
   对块级布局也生效，会把顶栏缩成内容宽。 */
@font-face{font-family:"OPPO Sans Landing";src:url(/showcase/landing-font.woff2) format("woff2");
  font-weight:100 700;font-display:swap}

.lock{
  --c-primary:#0080ff;--c-primary-rgb:0 128 255;
  --c-label:rgba(0,0,0,.9);--c-label-2:rgba(0,0,0,.54);--c-label-3:rgba(0,0,0,.4);
  --c-divider:rgba(0,0,0,.12);--c-track:rgba(0,0,0,.06);
  --c-bg:#f0f1f2;--c-card:#fff;--c-bar:rgba(255,255,255,.8);
  --c-lv1:0 3px 10px rgba(0,0,0,.06);--c-lv2:0 2px 24px rgba(0,0,0,.04);--c-lv4:0 6px 54px rgba(0,0,0,.14);
  --c-edge:inset 0 0 2px rgba(255,255,255,.2),inset 0 -1px 2px rgba(255,255,255,.1),inset 0 -2px 8px rgba(255,255,255,.2);
  --c-ease:cubic-bezier(.3,0,.1,1);
  --g-17:linear-gradient(115deg,#ff9a3c 0%,#ff5f8f 42%,#a35cff 78%,#6d5bff 100%);
  --g-flow:linear-gradient(100deg,#d14df0 0%,#7b4cf5 55%,#3d4ff0 100%);
  --g-card:linear-gradient(120deg,#5b5cf6 0%,#a15ae6 38%,#f0708f 72%,#ff9d5c 100%);
  --ld-w:1160px;--ld-pad:max(20px,calc((100% - var(--ld-w))/2));
  font-family:"OPPO Sans Landing","OPPO Sans 4.0",system-ui,-apple-system,"PingFang SC",sans-serif;
  color:var(--c-label)}
:root[data-theme="dark"] .lock{
  --c-primary:#1a8cff;--c-primary-rgb:26 140 255;
  --c-label:rgba(255,255,255,.9);--c-label-2:rgba(255,255,255,.54);--c-label-3:rgba(255,255,255,.4);
  --c-divider:rgba(255,255,255,.12);--c-track:rgba(255,255,255,.1);
  --c-bg:#000;--c-card:#1e1e1e;--c-bar:rgba(0,0,0,.78);
  --c-lv1:0 3px 10px rgba(0,0,0,.4);--c-lv2:0 2px 24px rgba(0,0,0,.4);--c-lv4:0 6px 54px rgba(0,0,0,.6)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lock{
  --c-primary:#1a8cff;--c-primary-rgb:26 140 255;
  --c-label:rgba(255,255,255,.9);--c-label-2:rgba(255,255,255,.54);--c-label-3:rgba(255,255,255,.4);
  --c-divider:rgba(255,255,255,.12);--c-track:rgba(255,255,255,.1);
  --c-bg:#000;--c-card:#1e1e1e;--c-bar:rgba(0,0,0,.78);
  --c-lv1:0 3px 10px rgba(0,0,0,.4);--c-lv2:0 2px 24px rgba(0,0,0,.4);--c-lv4:0 6px 54px rgba(0,0,0,.6)}}

.gate.lock{display:block;place-items:normal;padding:0;overflow:auto;overscroll-behavior:contain;background:var(--c-bg)}
.gate.lock[hidden]{display:none}
.lock button,.lock input{font-family:inherit}

/* ── 按钮：COUI 胶囊，主色带 17.0 边缘光，次要是白 ─────────────────────── */
.ld-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 24px;
  border:0;border-radius:9999px;font-size:16px;font-weight:500;line-height:22px;text-decoration:none;cursor:pointer;
  position:relative;isolation:isolate;transition:transform .2s var(--c-ease),filter .2s}
.ld-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(0,0,0,.08);opacity:0;transition:opacity .15s;z-index:-1}
.ld-btn:hover::after{opacity:.5}
.ld-btn:active{transform:scale(.96)}
.ld-btn.is-primary{background:rgb(var(--c-primary-rgb)/.92);color:#fff;box-shadow:var(--c-edge),0 8px 24px -10px rgb(var(--c-primary-rgb)/.6)}
.ld-btn.is-secondary{background:var(--c-card);color:var(--c-label);box-shadow:var(--c-edge),var(--c-lv1)}
.ld-btn.is-glass{background:rgba(255,255,255,.62);color:var(--c-label);backdrop-filter:saturate(1.6) blur(20px);
  -webkit-backdrop-filter:saturate(1.6) blur(20px);box-shadow:var(--c-edge),inset 0 0 0 .5px rgba(0,0,0,.06)}
:root[data-theme="dark"] .ld-btn.is-glass{background:rgba(255,255,255,.12);color:#fff}
.ld-btn.is-onfill{background:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.ld-btn.is-small{height:32px;padding:0 14px;font-size:14px}
.ld-btn.is-large{height:52px;padding:0 32px;font-size:17px}
.ld-btn:disabled{opacity:.4;pointer-events:none}
.ld-play-ic{width:22px;height:22px;border-radius:50%;background:rgb(var(--c-primary-rgb)/.12);position:relative;margin-left:-6px}
.ld-play-ic::after{content:"";position:absolute;left:8px;top:6px;border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent var(--c-primary)}

/* ── 顶栏：在首屏上透明，滚下去换成 COUI 顶栏材质 ─────────────────────── */
/* 顶栏独立固定，保留内容的实际高度，避免零高度 sticky 容器裁掉导航。 */
.ld-bar{position:fixed;top:0;left:0;right:0;z-index:5}
.ld-bar-in{display:flex;align-items:center;gap:12px 28px;padding:12px var(--ld-pad);transition:background .3s,box-shadow .3s}
.ld-bar.solid .ld-bar-in{background:var(--c-bar);backdrop-filter:saturate(1.8) blur(30px);
  -webkit-backdrop-filter:saturate(1.8) blur(30px);box-shadow:0 .5px 0 var(--c-divider)}
.ld-bar .mark{padding:0;gap:10px}
.ld-bar .mark-sq{width:28px;height:28px;border-radius:8px}
.ld-bar .mark-sq svg{width:16px;height:16px}
.ld-bar .mark b{font-size:18px;font-weight:600;color:var(--c-label)}
.ld-bar .mark-en{color:var(--c-label-3)}
.ld-nav{display:flex;gap:2px;margin-right:auto}
.ld-nav button{height:32px;padding:0 14px;border-radius:9999px;font-size:14px;font-weight:500;color:var(--c-label-2);transition:.15s}
.ld-nav button:hover{color:var(--c-label);background:var(--c-track)}
/* 中 / EN：小号分段控件，和下面动效的标签同一种控件。 */
.ld-lang{display:inline-flex;padding:3px;border-radius:9999px;background:var(--c-track)}
.ld-lang button{height:26px;min-width:34px;padding:0 9px;border:0;border-radius:9999px;background:transparent;
  font-size:12.5px;font-weight:500;color:var(--c-label-2);cursor:pointer;transition:background .2s var(--c-ease),box-shadow .2s}
.ld-lang [aria-pressed="true"]{background:var(--c-card);color:var(--c-label);box-shadow:var(--c-lv1)}
.ld-gate{display:grid;gap:4px;justify-items:end}
.ld-form{display:flex;align-items:center;gap:8px}
.ld-form input{width:180px;height:36px;padding:0 16px;border-radius:9999px;border:0;outline:none;font-size:14px;
  color:var(--c-label);background:var(--c-track);transition:.15s}
.ld-form input::placeholder{color:var(--c-label-3)}
.ld-form input:focus{background:var(--c-card);box-shadow:0 0 0 2px rgb(var(--c-primary-rgb)/.5)}
.ld-gate .lock-err{margin:0;font-size:12px;color:#e3361c}

.ld-main{display:block;overflow-x:clip}

/* ── 一段的三级：一行粗体小标 → 粗重大标题（一个渐变词）→ 一句话（ColorOS 17 的段头）── */
.ld-band{padding:96px var(--ld-pad)}
.ld-head{display:grid;justify-items:start;gap:12px;max-width:880px;margin-bottom:40px}
.ld-head.is-center{justify-items:center;text-align:center;margin-left:auto;margin-right:auto;max-width:1040px}
.ld-kicker{margin:0;font-size:17px;line-height:24px;font-weight:700;color:var(--c-label)}
.ld-head h2{margin:0;font-size:clamp(30px,4.4vw,56px);line-height:1.18;font-weight:700;letter-spacing:-.02em;color:var(--c-label);text-wrap:balance}
.ld-head.is-center h2{font-size:clamp(34px,5.6vw,72px);line-height:1.12}
.ld-head h2 em,.ld-finale h2 em{font-style:normal;background:var(--g-flow);-webkit-background-clip:text;background-clip:text;color:transparent}
.ld-lede{margin:0;font-size:17px;line-height:1.65;color:var(--c-label-2);max-width:720px}

/* ── 首屏：ColorOS 17 —— 白底上居中的字标（「design」用 17 的渐变）、一句粗体话、
   三台竖直的手机（中间大一号、两边低一点），底部渐变回页面灰。 ───────────────── */
.ld-hero{position:relative;padding:120px var(--ld-pad) 16px;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;
  background:linear-gradient(180deg,var(--c-card) 0%,var(--c-card) 55%,var(--c-bg) 100%)}
.ld-hero-text{display:grid;justify-items:center;max-width:900px}
.ld-logo{margin:0;font-size:clamp(52px,8.4vw,112px);line-height:1;font-weight:600;letter-spacing:-.035em;color:var(--c-label)}
.ld-logo em{font-style:normal;background:var(--g-17);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.04em}
.ld-hero-tag{margin:18px 0 0;text-wrap:balance;font-size:clamp(22px,2.6vw,34px);line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--c-label)}
.ld-hero-sub{margin:14px 0 0;max-width:560px;font-size:17px;line-height:1.65;color:var(--c-label-2)}
.ld-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}

/* 三台手机：银色细边（像官网的机身），中间那台在前、大一号；两边低一点、靠后。 */
.ld-trio{position:relative;display:flex;justify-content:center;align-items:flex-end;margin-top:56px;width:100%;max-width:980px}
.ld-device{position:relative;flex:none;width:236px;aspect-ratio:360/792;padding:5px;border-radius:44px;
  background:linear-gradient(145deg,#f7f8fa,#c9cdd3 45%,#eef0f3 70%,#b9bec6);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.35),0 8px 24px -12px rgba(0,0,0,.18)}
.ld-device img,.ld-device video{width:100%;height:100%;object-fit:cover;display:block;border-radius:39px;border:3px solid #111;background:#f0f1f2}
.ld-device.p0{transform:translateY(40px);margin-right:-26px;z-index:1}
.ld-device.p1{width:276px;z-index:3}
.ld-device.p2{transform:translateY(40px);margin-left:-26px;z-index:2}
/* 统计：官网「提升 55.6%」的写法 —— 小字在上、大数字在下，不加卡片。 */
/* 等宽列：每列一样宽，中间那列正好在中间那台手机下面（列宽不等时整行看着歪了）。 */
.ld-stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:min(100%,720px);
  column-gap:clamp(12px,3vw,40px);margin:72px 0 0}
.ld-stats div{display:grid;gap:4px;justify-items:center;align-content:end;text-align:center}
.ld-stats dd{margin:0;font-size:14px;line-height:20px;color:var(--c-label-2);order:-1}
.ld-stats dt{font-size:clamp(34px,4vw,48px);line-height:1.1;font-weight:700;color:var(--c-label);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ld-stats dt small{font-size:.42em;font-weight:600;color:var(--c-label-2);letter-spacing:0}
@media (prefers-reduced-motion: no-preference){
  .ld-device.p1{animation:ld-rise 7s ease-in-out infinite}
  .ld-trio{animation:ld-trio-in 1.1s var(--c-ease) .15s both}
}
@keyframes ld-rise{50%{transform:translateY(-8px)}}
@keyframes ld-trio-in{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}

/* ── 能力：一组一行，左组名、右图标卡（ColorOS 设置页的图标：彩色圆角方块 + 白色 OS 17 图标）── */
.ld-cap-row{display:grid;grid-template-columns:168px minmax(0,1fr);gap:20px;align-items:start;padding:16px 0;
  border-top:.5px solid var(--c-divider)}
.ld-cap-row:first-of-type{border-top:0}
.ld-cap-row.is-design{--g:#0080ff}.ld-cap-row.is-deliver{--g:#20b26b}
.ld-cap-row.is-create{--g:#ff7a1a}.ld-cap-row.is-check{--g:#7b61ff}
.ld-cap-group{padding-top:6px}
.ld-cap-group h3{margin:0;display:flex;align-items:center;gap:10px;font-size:22px;line-height:30px;font-weight:700;color:var(--c-label)}
.ld-cap-group h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--g)}
.ld-cap-group p{margin:4px 0 0 18px;font-size:14px;line-height:20px;color:var(--c-label-2)}
.ld-cap-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media (max-width:1240px){.ld-cap-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ld-tile{display:grid;align-content:start;gap:2px;padding:16px 14px 14px;border-radius:24px;background:var(--c-card);
  box-shadow:none;transition:transform .3s var(--c-ease),box-shadow .3s}
.ld-tile:hover{transform:translateY(-3px);box-shadow:var(--c-lv4)}
.ld-ic{display:block;width:44px;height:44px;border-radius:14px;margin-bottom:10px;position:relative;
  background:linear-gradient(160deg,color-mix(in srgb,var(--g) 78%,#fff),var(--g));
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.25),0 6px 14px -6px color-mix(in srgb,var(--g) 70%,transparent)}
.ld-ic::after{content:"";position:absolute;inset:9px;background:#fff;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ld-tile b{font-size:15px;line-height:21px;font-weight:500;color:var(--c-label)}
.ld-tile span{font-size:12px;line-height:17px;color:var(--c-label-2)}

/* ── 介绍片：一张大圆角媒体卡，中间是官网那颗「▶ 观看视频」白色磨砂胶囊 ─────── */
.ld-film{position:relative;border-radius:32px;overflow:clip;background:#000}
.ld-film video{width:100%;aspect-ratio:16/9;display:block;background:#000;object-fit:cover}
.ld-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.04);border:0;cursor:pointer}
.ld-play i{display:none}
.ld-play span{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px 0 18px;border-radius:9999px;
  font-size:15px;font-weight:600;color:#000;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(20px);
  -webkit-backdrop-filter:saturate(1.6) blur(20px);box-shadow:var(--c-edge),0 10px 30px -12px rgba(0,0,0,.4);
  transition:transform .25s var(--c-ease)}
.ld-play span::before{content:"";border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #000}
.ld-play:hover span{transform:scale(1.05)}
.ld-play:active span{transform:scale(.96)}
.ld-film.playing .ld-play{display:none}

/* ── 示例：每个 App 一张白卡 ────────────────────────────────────────── */
.ld-phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
/* 六个示例：三个或六个时一行三个。 */
.ld-phones:not(:has(> :nth-child(4))),.ld-phones:has(> :nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ld-phone{display:grid;justify-items:center;text-align:center;gap:4px;padding:24px 12px 16px;border-radius:32px;
  background:var(--c-card);box-shadow:none;transition:transform .3s var(--c-ease),box-shadow .3s}
.ld-phone:hover{transform:translateY(-4px);box-shadow:var(--c-lv4)}
.ld-screen{--k:.52;width:calc(360px * var(--k));height:calc(792px * var(--k));border-radius:32px;overflow:clip;
  background:#1c1f21;border:3px solid #1c1f21;box-sizing:content-box;position:relative}
.ld-screen iframe{width:360px;height:792px;border:0;display:block;transform:scale(var(--k));transform-origin:0 0;background:#fff}
.ld-try{display:block;width:100%;height:100%;padding:0;position:relative;border:0;background:none;cursor:pointer}
.ld-try img{width:100%;height:100%;object-fit:cover;display:block}
.ld-try span{position:absolute;left:50%;bottom:20px;transform:translate(-50%,6px);height:32px;line-height:32px;padding:0 16px;
  border-radius:9999px;font-size:14px;font-weight:500;color:#fff;background:rgb(var(--c-primary-rgb)/.92);box-shadow:var(--c-edge);
  opacity:0;transition:.25s var(--c-ease);white-space:nowrap}
.ld-try:hover span,.ld-try:focus-visible span{opacity:1;transform:translate(-50%,0)}
@media (hover:none){.ld-try span{opacity:1;transform:translate(-50%,0)}}
.ld-phone h3{margin:14px 0 0;font-size:20px;line-height:28px;font-weight:700;color:var(--c-label)}
.ld-phone p{margin:0;font-size:13px;line-height:18px;color:var(--c-label-2);max-width:230px}
.ld-phone a{margin-top:4px;height:32px;line-height:32px;padding:0 12px;border-radius:9999px;font-size:14px;font-weight:500;
  color:var(--c-primary);text-decoration:none}
.ld-phone a:hover{background:rgb(var(--c-primary-rgb)/.08)}
.ld-phone-links{display:flex;flex-wrap:wrap;justify-content:center}
.ld-phone-apk{position:relative}
.ld-phone-apk img{position:absolute;left:50%;bottom:calc(100% + 8px);width:112px;height:112px;padding:6px;border-radius:16px;
  background:#fff;box-shadow:var(--c-edge),0 8px 24px rgb(0 0 0/.12);transform:translate(-50%,6px);opacity:0;pointer-events:none;
  transition:.2s var(--c-ease)}
.ld-phone-apk:hover img,.ld-phone-apk:focus-within img{opacity:1;transform:translate(-50%,0)}
@media (hover:none){.ld-phone-apk img{display:none}}

/* ── MCP：/mcp 页的实录（mcp-reel.css），换成本页的白卡和 COUI 主色 ─────── */
#ld-mcp-reel{min-height:200px}
/* 深色沉浸段（官网「OPPO AI 更懂你 更主动」那一段）：黑底、一团紫蓝的光、白字。 */
.ld-dark{position:relative;background:#000;color:#fff;overflow:clip;
  --c-label:rgba(255,255,255,.92);--c-label-2:rgba(255,255,255,.6);--c-label-3:rgba(255,255,255,.4)}
.ld-dark::before{content:"";position:absolute;left:50%;top:-180px;width:1100px;height:520px;transform:translateX(-50%);
  pointer-events:none;border-radius:50%;filter:blur(40px);opacity:.55;
  background:radial-gradient(closest-side,rgba(123,76,245,.7),rgba(61,79,240,.35) 55%,transparent)}
.ld-dark > *{position:relative}
.ld-dark .ld-head{margin-left:auto;margin-right:auto;justify-items:center;text-align:center}
.ld-dark .ld-head h2 em{background:var(--g-17);-webkit-background-clip:text;background-clip:text}
.ld-mcp .mc-reel{--accent:#0080ff;--accent-ink:#0080ff;--accent-soft:rgba(0,128,255,.1);
  --surface:#fff;--line:transparent;border:0;border-radius:32px;background:#fff;color:rgba(0,0,0,.9);box-shadow:0 30px 80px -30px rgba(123,76,245,.6);font-family:inherit}
.ld-mcp .mc-reel-foot{border-top:.5px solid var(--c-divider)}
.ld-mcp .mc-reel-pause{border-radius:9999px}

/* ── 动效：分段控件 + 白卡 ──────────────────────────────────────────── */
.ld-seg{display:inline-flex;gap:0;padding:4px;margin-bottom:14px;border-radius:9999px;background:var(--c-track)}
.ld-seg-item{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 18px;border:0;border-radius:9999px;
  background:transparent;font-size:14px;font-weight:500;color:var(--c-label);cursor:pointer;transition:background .2s var(--c-ease),box-shadow .2s}
.ld-seg-item span{font-size:12px;color:var(--c-label-3)}
.ld-seg-item[aria-selected="true"]{background:var(--c-card);box-shadow:var(--c-lv1)}
.ld-seg-item[aria-selected="true"] span{color:var(--c-primary)}
/* 动效实验室 APK：一张横卡，左二维码、中说明、右下载按钮。 */
.ld-apk{display:flex;align-items:center;gap:16px;margin:0 0 20px;padding:10px 18px 10px 10px;border-radius:24px;
  background:var(--c-card);box-shadow:var(--c-lv2)}
.ld-apk-qr{width:76px;height:76px;flex:none;padding:4px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 .5px var(--c-divider)}
.ld-apk-text{flex:1;min-width:0}
.ld-apk h3{margin:0;font-size:17px;line-height:24px;font-weight:550;color:var(--c-label)}
.ld-apk p{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--c-label-2);max-width:520px}
.ld-group-intro{margin:0 0 16px;max-width:720px;font-size:14px;line-height:20px;color:var(--c-label-2)}
/* 卡片就是动效本身，没有垫底的黑边：系统动效是整屏手机，其余裁到动效区域。 */
.ld-motion{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.ld-motion[data-shape="phone"]{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.ld-clip{display:grid;gap:0;padding:6px 6px 0;text-align:left;border:0;border-radius:20px;background:var(--c-card);
  box-shadow:var(--c-lv2);cursor:pointer;transition:transform .3s var(--c-ease),box-shadow .3s}
.ld-clip:hover{transform:translateY(-3px);box-shadow:var(--c-lv4)}
.ld-clip:active{transform:scale(.97)}
.ld-clip img{width:100%;aspect-ratio:360/491;object-fit:cover;display:block;border-radius:15px;background:#e9eaeb}
.ld-motion[data-shape="phone"] .ld-clip img{aspect-ratio:360/792;border-radius:18px}
.ld-clip b{padding:9px 6px 11px;font-size:14px;line-height:20px;font-weight:500;color:var(--c-label)}

/* ── 收尾：官网页底的渐变卡（升级计划那张）：紫 → 粉 → 橙，白字，半透明白胶囊 ── */
.ld-finale{padding-top:16px;padding-bottom:96px}
.ld-finale-in{display:grid;justify-items:center;text-align:center;gap:14px;padding:72px 24px;border-radius:32px;
  background:var(--g-card);color:#fff;position:relative;overflow:clip}
.ld-finale-in::before{content:"";position:absolute;inset:-50% -10% auto auto;width:60%;height:140%;pointer-events:none;
  border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent)}
.ld-finale h2{margin:0;position:relative;font-size:clamp(30px,4.4vw,56px);line-height:1.15;font-weight:700;letter-spacing:-.02em;color:#fff}
.ld-finale p{margin:0;position:relative;font-size:17px;line-height:24px;color:rgba(255,255,255,.86)}
.ld-finale .ld-btn{margin-top:10px}

/* ── 动效录屏：白卡 ─────────────────────────────────────────────────── */
.ld-dlg{margin:auto;border:0;padding:10px;border-radius:32px;background:var(--c-card);color:var(--c-label);
  width:min(400px,calc(100vw - 32px));display:none;gap:10px;box-shadow:var(--c-lv4)}
.ld-dlg[open]{display:grid}
.ld-dlg::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(8px)}
.ld-dlg video{width:100%;max-height:74vh;border-radius:24px;background:#000;display:block}
.ld-dlg-t{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 8px 6px 12px}
.ld-dlg-t b{font-size:17px;font-weight:550}

/* ── 进场：进到视口时浮上来一次 ─────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .lock [data-rv]{opacity:0;transform:translateY(20px);
    transition:opacity .6s var(--c-ease),transform .8s var(--c-ease);transition-delay:calc(var(--i,0) * 70ms)}
  .lock [data-rv].in{opacity:1;transform:none}
  .ld-hero-text [data-rv]:nth-child(2){transition-delay:.06s}
  .ld-hero-text [data-rv]:nth-child(3){transition-delay:.12s}
  .ld-hero-text [data-rv]:nth-child(4){transition-delay:.18s}
  .ld-hero-text [data-rv]:nth-child(5){transition-delay:.24s}
}

/* ── 窄屏 ───────────────────────────────────────────────────────────── */
@media (max-width:1020px){
  .ld-phones,.ld-phones:not(:has(> :nth-child(4))),.ld-phones:has(> :nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .ld-cap-row{grid-template-columns:1fr;gap:14px}
}
@media (max-width:760px){
  .ld-nav{display:none}
  .ld-bar-in{padding:10px 16px;gap:10px}
  .ld-bar .mark-en{display:none}
  .ld-gate{margin-left:0}
  .ld-lang{margin-left:auto}
  .ld-form input{width:118px}
  .ld-band{padding:56px 16px}
  .ld-head{margin-bottom:24px}
  .ld-lede{font-size:15px}
  .ld-hero{padding:96px 16px 40px}
  .ld-hero-sub{font-size:15px}
  .ld-trio{margin-top:36px}
  .ld-device{width:128px;padding:3px;border-radius:24px}
  .ld-device img{border-radius:21px;border-width:2px}
  .ld-device.p1{width:156px}
  .ld-device.p0{margin-right:-18px;transform:translateY(24px)}
  .ld-device.p2{margin-left:-18px;transform:translateY(24px)}
  .ld-stats{gap:20px;margin-top:44px}
  .ld-apk{flex-wrap:wrap;gap:14px;padding:16px;border-radius:24px}
  .ld-apk-qr{display:none}
  .ld-apk .ld-btn{width:100%}
  .ld-cap-row{grid-template-columns:1fr;gap:10px;padding:16px 0}
  .ld-cap-group{padding-top:0}
  .ld-cap-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ld-tile{border-radius:20px;padding:12px}
  .ld-ic{width:40px;height:40px;border-radius:12px;margin-bottom:8px}
  .ld-ic::after{inset:8px}
  .ld-film{border-radius:24px}
  .ld-play span{height:38px;font-size:14px}
  .ld-phones{gap:12px}
  .ld-phone{padding:14px 8px 12px;border-radius:22px}
  .ld-screen{--k:.4;border-radius:22px;border-width:2px}
  .ld-phone h3{font-size:15px}
  .ld-phone p{font-size:12px}
  .ld-seg-item{padding:0 12px;font-size:13px}
  .ld-motion,.ld-motion[data-shape="phone"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ld-clip{border-radius:20px;padding:6px 6px 0}
  .ld-clip img{border-radius:14px}
  .ld-clip b{font-size:14px;padding:10px 6px 12px}
  .ld-finale{padding:8px 16px 56px}
  .ld-finale-in{padding:44px 20px;border-radius:28px}
}

/* 紧凑（2026-10-07「稍微紧凑一点留空太多」）：手机上能力卡改成图标在左、字在右的一行，
   一屏能看到一整组；示例、动效卡也收一点。放在最后，盖过上面窄屏里的值。 */
@media (max-width:760px){
  .ld-stats dt{font-size:30px}
  .ld-stats dd{font-size:12px;line-height:16px}
  .ld-cap-row{padding:10px 0;gap:8px}
  .ld-cap-group h3{font-size:17px;line-height:24px}
  .ld-cap-group p{margin-top:2px;font-size:13px}
  .ld-cap-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ld-tile{grid-template-columns:32px minmax(0,1fr);column-gap:10px;row-gap:0;align-items:center;padding:10px;border-radius:16px}
  .ld-ic{grid-row:span 2;width:32px;height:32px;border-radius:10px;margin:0}
  .ld-ic::after{inset:7px}
  .ld-tile b{font-size:14px;line-height:20px}
  .ld-tile span{font-size:11.5px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ld-phone{padding:14px 6px 10px;border-radius:22px}
  .ld-phone h3{font-size:16px;line-height:22px}
  .ld-screen{--k:.38}
}
@media (max-width:760px){
  .ld-form input{width:96px;padding:0 12px}
  .ld-lang button{min-width:30px;padding:0 7px}
}