/* ===========================================================
   电脑端 (>768px)
   设计稿 1440x717 整体等比缩放：舞台内所有元素都用设计稿绝对坐标，
   和 Figma 一一对应，任何分辨率下版式都不会走样。
   注意 Figma 画板是 1640x717，内容块只占正中间的 1440 —— 舞台坐标 = 画板坐标 - 100，
   只有背景图和顶栏那条是按画板宽度铺的（见下面两处 ::before）。
   =========================================================== */

/* display 由 base.css 统一控制（两套版式的显隐都在那边切），这里不要再写，
   否则会盖掉 base.css 里竖屏平板那条回退规则。 */
/* 舞台顶边贴住视口顶边。缩放走的是 cover（见 desktop.js），常规笔记本上高度正好
   铺满、上下都贴边；只有更「方」的视口裁切踩到刹车之后，才会在下面剩一截，
   由 ::after 的延展色带接住。空白只可能出现在下面一处，好收拾。 */
.pc{
  position:fixed;inset:0;
  align-items:flex-start;justify-content:center;
  overflow:hidden;
  background:linear-gradient(180deg,var(--c-edge-top) 0%,var(--c-edge-top) 12%,
                              var(--c-edge-bot) 88%,var(--c-edge-bot) 100%);
}

.pc-stage{
  position:relative;flex:none;
  width:1440px;height:717px;
  transform:scale(var(--pc-scale,1));
  /* 锚在顶边中点：transform 不参与布局，origin 要是 center center 的话
     flex-start 对齐的是未缩放的那个 717 高的盒子，放大后顶边会溢出视口。 */
  transform-origin:center top;
}
/* 背景图比内容宽：设计稿画板是 1640x717，内容块只占正中间的 1440，
   两侧各多出 100px 背景。所以背景挂在伪元素上、左右各溢出 100px
   （溢出部分由 .pc 的 overflow:hidden 裁掉），内容坐标一律不受影响。
   宽屏/超宽屏能多露出一截画面，窄的时候和以前一样只看得到中间 1440。 */
.pc-stage::before{
  content:"";position:absolute;left:-100px;top:0;
  width:1640px;height:717px;
  background:url(../img/desktop-bg.webp?v=20260911) 0 0 / 1640px 717px no-repeat;
}
/* 不支持 webp 的老浏览器回退到 jpg */
.no-webp .pc-stage::before{background-image:url(../img/desktop-bg.jpg?v=20260911)}

/* 舞台下面那片留白：把背景图底边那一行像素纵向铺下去，不是填一条纯色。
   背景图底边坐着汉堡、餐盒、金币这些实物元素，颜色沿 x 从 #F7B449 一直到 #FCE3B9，
   随便挑一个纯色都会在某一段露出明显的横向接缝，等于把它们拦腰切一刀。
   desktop-bg-foot.png 就是那一行（tools/make-bg-foot.py 生成，出图前已横向模糊过），
   repeat-y 一铺，接缝处逐列几乎同色；再叠一层往下渐隐到 --c-edge-bot，把汉堡、金币
   那几段拉出来的竖向色柱收干净，远看就是背景自然沉下去。
   常规笔记本上高度是铺满的，这条带子根本不出现；只有 16:10 这种更「方」的视口
   裁切踩到刹车之后，下面才会露出一截（留白高度 = vh×SAFE_W/vw − 717 个舞台单位）。
   渐隐距离取 70px：露一小截时（16:10 笔记本约 17~120px）刚好在见底前收完，
   露一大截时下半截就是干净的纯色。
   跟着背景图一起左右溢出 100px，两侧仍走 .pc 的渐变去接背景图的左右边缘。
   高度取一个大值兜底，多出来的由 .pc 的 overflow:hidden 裁掉。 */
.pc-stage::after{
  content:"";position:absolute;left:-100px;top:100%;
  width:1640px;height:1400px;
  background:
    linear-gradient(180deg,rgba(254,226,173,0) 0,var(--c-edge-bot) 70px),
    url(../img/desktop-bg-foot.png?v=20260911) 0 0 / 1640px 1px repeat-y;
}

/* ---------------- 顶栏 ---------------- */
.pc-top{position:absolute;left:0;top:0;width:1440px;height:70px}
/* 顶栏在设计稿里是通栏的，得跟着背景图一起左右各溢出 100px，否则超宽屏上
   会看到这条半透明白条提前收尾。条子画在伪元素上，顶栏本身的盒子不动，
   里面 logo / 下载按钮的 left 仍然是舞台坐标。 */
.pc-top::before{
  content:"";position:absolute;left:-100px;top:0;width:1640px;height:70px;
  background:var(--c-header);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.pc-brand{position:absolute;left:80px;top:12px;height:46px;display:block}
.pc-brand__mark{position:absolute;left:0;top:0;width:46px;height:46px;border-radius:10px}
.pc-brand__word{position:absolute;left:60px;top:7px;width:133px;height:32px}

.pc-dl{
  position:absolute;left:1227px;top:15px;width:133px;height:40px;
  border-radius:75px;background:var(--g-btn);
  transition:transform .18s ease,box-shadow .18s ease;
}
.pc-dl:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(226,154,0,.42)}
.pc-dl:active{transform:translateY(0)}
.pc-dl__icon{position:absolute;left:20px;top:9px;width:22px;height:22px}
.pc-dl__text{
  position:absolute;left:0;top:12px;width:133px;padding-left:28px;
  font-size:16px;font-weight:500;line-height:16px;text-align:center;color:var(--c-ink);
}

/* ---------------- 主文案 ---------------- */
.pc-hero{position:absolute;left:0;top:0;width:1440px;height:717px;pointer-events:none}

/* 手写涂鸦高亮块：设计稿是一张蒙版图 + 纯色填充 */
.pc-hero__hl{
  position:absolute;left:130.14px;top:238.41px;
  width:360.786px;height:90.177px;
  display:flex;align-items:center;justify-content:center;
}
/* 蒙版的位置/尺寸不是照抄 Figma 导出值 —— 那组值渲染出来整条带子偏低约 9px、
   宽约 3%。这里是拿设计稿渲染图逐列拟合出来的，误差 1px 内。 */
/* 涂鸦是单色形状，颜色已经烤进 PNG，所以用普通背景图而不是 mask ——
   mask-image 在 Chrome 里受 CORS 限制，file:// 直接打开时会被拦掉整个图。
   要换颜色的话改图，不是改这里：见 README。 */
.pc-hero__hl::before{
  content:"";width:357.601px;height:72.262px;
  transform:rotate(2.89deg);
  background:url(../img/hl-desktop.png) 3.49px -41.969px / 347.569px 166.157px no-repeat;
}

.pc-hero__h1{
  position:absolute;left:100px;top:215px;height:64px;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.pc-hero__h1a,.pc-hero__h1c{
  flex:none;line-height:64px;white-space:nowrap;font-weight:800;
}
.pc-hero__h1a{font-size:64px;letter-spacing:0}
.pc-hero__h1c{font-size:64px;letter-spacing:1.9px}
/* 「傻瓜比价」这四个字在设计稿里不是排出来的字，是 logo 字形（5792:339，260×61 的矢量组），
   深墨色，不再是原来那版的柠檬黄字面 + 外描边。手机版第 1 屏早就是这个做法了（.mb-h1__word），
   电脑版 2026-09-10 跟上。
   顶栏那张 wordmark.svg 是同一套字形的另一次导出，两者外框比例差 2.5%（133:32 vs 260:61），
   直接拉伸会横向撑胖，所以这里单独放一张按设计稿尺寸导出的 wordmark-h1.svg。
   字标按 260px 等比显示，两侧统一由主标题的 6px gap 紧凑排列。
   单字「用」不加字距，避免末尾字距叠加到左侧间隙。
   PuHuiTi 字形边缘与 SVG 内部留白不同，两侧自带留白相差约 5.6px。
   字标向左做 2.8px 光学补偿，保持前后文字位置不变，使两侧可见间隙一致。 */
.pc-hero__h1b{display:block;flex:none;width:260px;height:auto;transform:translateX(-2.8px)}

.pc-hero__sub{
  position:absolute;left:100px;top:319px;
  font-size:40px;font-weight:600;line-height:40px;letter-spacing:-2px;white-space:nowrap;
}

.pc-hero__badge{
  position:absolute;left:100px;top:387px;width:623px;height:62px;
  border-radius:20px;background:var(--c-badge);
}
.pc-hero__spark{position:absolute;left:24.99px;top:15.88px;width:28.022px;height:30.443px}
.pc-hero__badge span{
  position:absolute;left:62px;top:21px;
  font-size:26px;font-weight:500;line-height:20px;letter-spacing:1.3px;color:var(--c-ink);
}

/* ---------------- 实时二维码（贴合） ----------------
   背景大图里那张卡片上的二维码是「烤」进去的，这里用一个平面元素
   经 matrix3d（单应变换）投影到它所在的平面上，把它整块盖掉。
   新版设计稿的卡片基本是正面朝前，不再像旧版那样大角度倾斜，但底图那张码
   仍然不是正方形（约 236×256），四条边也不等长，所以还是走单应变换，
   仿射/纯缩放都对不齐。
   数值由 tools/fit-qr.py 直接从 desktop-bg.webp 上量出来，换背景图后重跑即可。 */
.pc-qr{
  --qr-size:312px;
  --qr-matrix:matrix3d(0.850581,-0.008226,0,-0.000047,
                       0.012214,0.991587,0,0.000013,
                       0,0,1,0,
                       906.048524,185.038859,0,1);
  position:absolute;left:0;top:0;
  width:var(--qr-size);height:var(--qr-size);
  transform-origin:0 0;
  transform:var(--qr-matrix);
  background:#fff;
  border-radius:14px;
  overflow:hidden;
}
.pc-qr__img{width:100%;height:100%;object-fit:contain;background:#fff}

/* ---------------- 底部四个功能卡 ---------------- */
.pc-feats{position:absolute;left:96px;top:553px;width:1248px;height:124px}
/* 白描边设计稿给的是 2px，但舞台在大屏上会整体放大（2K 屏放到 1.8 倍），
   2px 跟着变成 3.6px，看起来就糊了一圈白边，所以这里收到 1px。 */
.pc-feat{
  position:absolute;top:0;width:300px;height:124px;
  border:1px solid #fff;border-radius:20px;
  background:rgba(255,255,255,.75);
  box-shadow:0 4px 10px rgba(255,196,1,.25);
  -webkit-backdrop-filter:blur(19.45px);backdrop-filter:blur(19.45px);
}
.pc-feats>:nth-child(1){left:0}
.pc-feats>:nth-child(2){left:316px}
.pc-feats>:nth-child(3){left:632px}
.pc-feats>:nth-child(4){left:948px}

.pc-feat__tile{
  position:absolute;left:26px;top:22px;width:76px;height:76px;
  border-radius:20px;display:block;
}
.pc-feat__tile img{position:absolute;left:13px;top:13px;width:50px;height:50px}
/* 比价图标在 50x50 框里本身带内边距，按设计稿保留 */
.pc-feat--compare .pc-feat__tile img{left:17.75px;top:17.43px;width:40.522px;height:41.085px}
.pc-feat--compare .pc-feat__tile{background:var(--t-compare)}
.pc-feat--coupon  .pc-feat__tile{background:var(--t-coupon)}
.pc-feat--gift    .pc-feat__tile{background:var(--t-gift)}
.pc-feat--wallet  .pc-feat__tile{background:var(--t-wallet)}

.pc-feat__t{
  position:absolute;left:118px;top:34px;
  font-size:24px;font-weight:600;line-height:24px;white-space:nowrap;
}
.pc-feat__d{
  position:absolute;left:118px;top:68px;
  font-size:18px;font-weight:400;line-height:18px;white-space:nowrap;color:var(--c-sub);
}

/* ---------------- 底部版权信息 ----------------
   设计稿里是一整行居中文字，行盒贴死舞台底边（717 − 20 = 697），
   整行约 690px 宽，居中在舞台中线上，不会碰到右下角那只汉堡。
   设计稿三段之间隔的是 3 个 / 4 个空格，HTML 里连续空格会被折叠掉，
   所以拆成三段用 margin 把间距给死（12px 字号下普惠体一个空格 ≈ 3.7px）。
   中间那段设计稿画的是加下划线的 mailto 邮箱，后来改成手机号了 ——
   纯文本、不加下划线也不做 tel: 链接，因为这行只在电脑版出现，点它没有意义。 */
.pc-foot{
  position:absolute;left:0;right:0;top:697px;
  display:flex;justify-content:center;white-space:nowrap;
  font-size:12px;font-weight:500;line-height:20px;letter-spacing:.6px;
  color:var(--c-brown);
}
.pc-foot>:nth-child(2){margin-left:11px}
.pc-foot>:nth-child(3){margin-left:15px}
.pc-foot>:nth-child(4){margin-left:15px}

/* ---------------- 视频介绍入口 ----------------
   设计稿 6072:2（画板 200,477 → 舞台 100,477）。后台没配视频时 index.html 里是 hidden，
   由 home-video.js 亮出来 —— 和手机版第 2 屏共用同一份配置、同一条视频。 */
.pc-vlink{
  position:absolute;left:100px;top:477px;width:246px;height:46px;
  display:flex;align-items:center;gap:10px;
  padding:0 18px 0 8px;
  border:1px solid rgba(151,81,5,.16);border-radius:24px;
  background:rgba(255,253,245,.95);
  /* 设计稿是 drop-shadow 而不是 box-shadow：只描外轮廓、不在圆角内侧留一圈灰边 */
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.7));
  transition:transform .18s ease,box-shadow .18s ease;
}
.pc-vlink:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(151,81,5,.16)}
.pc-vlink:active{transform:translateY(0)}
.pc-vlink__ico{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding-left:2px;   /* 三角形视觉重心偏左，往右挪 2px 才像居中 */
  border:1px solid rgba(151,81,5,.16);border-radius:16px;
  background:#FFF8E1;
}
.pc-vlink__ico svg{display:block;width:12px;height:12px}
.pc-vlink__t{font-size:18px;font-weight:500;line-height:26px;white-space:nowrap}

/* ---------------- 视频弹层 ----------------
   设计稿 6073:6「首次进入 · 视频暂停」。图层名写的是「48% 深色 + 5px 背景模糊」，
   但那是早前的命名，Figma 里实际填的是 16% + 5px（CSS 的 blur 半径是 Figma 的一半，
   所以写 2.5px）—— 逐像素反推设计稿渲染图也是 0.165，以实际值为准。 */
.pc-video{position:absolute;inset:0;z-index:60}
.pc-video__mask{
  position:absolute;inset:0;
  background:rgba(26,26,26,.16);
  -webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);
  cursor:pointer;
}
/* 与 .pc-stage 同尺寸、同缩放：卡片、关闭键、「稍后再看」都用设计稿的舞台坐标摆，
   任何分辨率下比例都跟设计稿一致。蒙层不进来，它要铺满整个视口。 */
.pc-video__stage{
  position:absolute;left:50%;top:0;
  width:1440px;height:717px;margin-left:-720px;
  transform:scale(var(--pc-scale,1));
  transform-origin:center top;
}

.pc-video__card{
  position:absolute;left:548px;top:31px;width:344px;height:612px;   /* 9:16 */
  border-radius:18px;
  box-shadow:0 16px 48px rgba(0,0,0,.18);
  background:#FFD93D url(../img/logo.png) center / 42% auto no-repeat; /* 封面到位前的本地兜底 */
  overflow:hidden;
}
/* 设计稿那圈半透明白高光走伪元素、不用 border：写成 border 的话卡片里所有绝对定位的子元素
   都以 border 内侧为原点，播放键会整体偏 1px，封面也铺不到边（白边下面会漏出底色）。 */
.pc-video__card::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  border:1px solid rgba(255,255,255,.6);border-radius:18px;
}
.pc-video__cover{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.pc-video__cover:not(.is-ready){visibility:hidden}
/* 播放器平时压在封面底下、完全透明（不能用 hidden：全屏 API 要求元素在文档流里）；
   起播后浮到封面上面。竖版视频和卡片同为 9:16，用 cover 铺满不留黑边。 */
.pc-video__player{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:#000;
  opacity:0;pointer-events:none;
}
.pc-video__card.is-playing .pc-video__player{opacity:1;pointer-events:auto;z-index:2}
.pc-video__card.is-playing .pc-video__play{display:none}
/* 桌面弹窗只保留播放、进度与最右侧音量；部分 Chromium 版本仍会显示全屏控件。 */
.pc-video__player::-webkit-media-controls-fullscreen-button{display:none}

/* 播放按钮组：设计稿 6075:80，卡片内 (136,270)，72 宽的按钮 + 12 间距 + 22 高的文案 */
.pc-video__play{
  position:absolute;left:136px;top:270px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.pc-video__playbtn{
  display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;padding-left:4px;
  border:1px solid rgba(42,42,42,.14);border-radius:36px;
  background:#fff;
  transition:transform .15s ease;
}
.pc-video__playbtn svg{display:block;width:28px;height:28px}
.pc-video__play:hover .pc-video__playbtn{transform:scale(1.06)}
.pc-video__play:active .pc-video__playbtn{transform:scale(.96)}
/* 设计稿这行字是压在一张干净的浅米色示意封面上的纯文字。实际封面由运营在后台配，
   现在这张就是满版的宣传图（大字 + 人物），深色文字直接盖上去一个字也读不出来 ——
   所以垫一层和示意封面同色系的半透明白底，浅封面上几乎看不出来，花封面上才认得出这行字。 */
.pc-video__playtxt{
  padding:0 12px;border-radius:11px;
  background:rgba(255,253,245,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:14px;font-weight:500;line-height:22px;color:var(--c-ink);
}

.pc-video__close{
  position:absolute;left:908px;top:31px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.35);border-radius:20px;
  background:rgba(26,26,26,.18);
  transition:background .18s ease;
}
.pc-video__close:hover{background:rgba(26,26,26,.34)}
.pc-video__close svg{display:block;width:18px;height:18px}

.pc-video__later{
  position:absolute;left:671px;top:659px;
  display:flex;align-items:center;gap:8px;
  padding:5px 12px;
  font-size:13px;line-height:22px;color:#fff;
  opacity:.86;
  transition:opacity .18s ease;
}
.pc-video__later:hover{opacity:1}
.pc-video__later svg{display:block;width:14px;height:14px}