/* ===========================================================
   电脑端 (>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) 0 0 / 1640px 717px no-repeat;
}
/* 不支持 webp 的老浏览器回退到 jpg */
.no-webp .pc-stage::before{background-image:url(../img/desktop-bg.jpg)}

/* 舞台下面那片留白：把背景图底边那一行像素纵向铺下去，不是填一条纯色。
   背景图底边坐着汉堡、餐盒、金币这些实物元素，颜色沿 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) 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:0;top:215px;width:1440px;height:64px}
.pc-hero__h1a,.pc-hero__h1b,.pc-hero__h1c{
  position:absolute;top:0;line-height:64px;white-space:nowrap;font-weight:800;
}
.pc-hero__h1a{left:100px;font-size:64px;letter-spacing:1.92px}
.pc-hero__h1c{left:422px;font-size:64px;letter-spacing:1.9px}
/* 字面柠檬黄 + 深色描边。设计稿上是 Figma 的文字描边，4.4px、对齐方式「外部」。
   这里写 8.8 不是写错：CSS 的 -webkit-text-stroke 是「居中」描边，骑在字的轮廓线上，
   内侧那一半会被 paint-order 后画的黄色字面盖掉，只剩一半露在外面 ——
   所以要照着设计稿的外描边还原，得给两倍。字里那些镂空的小口子两边各被吃掉 4.4px，
   和 Figma 的外描边表现一致。 */
.pc-hero__h1b{
  left:173px;font-size:58px;letter-spacing:4.06px;
  color:var(--c-yellow);
  -webkit-text-stroke:8.8px var(--c-ink);
  paint-order:stroke fill;
}

.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:305px;
  --qr-matrix:matrix3d(0.850765,-0.011462,0,-0.000054,
                       0.014081,0.991562,0,0.000018,
                       0,0,1,0,
                       907.457942,187.769302,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}