/* 蕉点落地页：PC / H5 背景拉伸铺满可见视口，元素按设计稿百分比定位。
 * PC 1920×1080，H5 750×1624。B 版移动端保留独立长页布局。
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  overflow-y: hidden;
}
img { user-select: none; }

.landing { position: relative; width: 100%; }
.landing[data-layout="pending"] { visibility: hidden; }

.pc-shell, .h5-shell { display: none; position: relative; width: 100%; }
.landing[data-layout="pc"] .pc-shell,
.landing[data-layout="h5"] .h5-shell {
  display: block;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}
/* 背景允许非等比拉伸；定位框始终等于当前可见屏幕。 */
.pc-frame, .h5-frame {
  position: relative;
  width: 100%;
  height: 100%;
}
.pc-bg, .h5-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* 独立切图在设计稿百分比框内等比缩放，背景伸缩不影响文案字形。 */
.landing-art {
  position: absolute;
  display: block;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  z-index: 2;
}
.h5-brand { left: 1.8667%; top: 1.5394%; width: 32.0000%; height: 5.7882%; }
.h5-title { left: 4.4000%; top: 58.7438%; width: 95.0667%; height: 14.5936%; }
.h5-subtitle { left: 4.4000%; top: 71.6749%; width: 95.0667%; height: 6.4655%; }
.h5-features { left: 13.0667%; top: 78.1404%; width: 75.3333%; height: 7.7586%; }
.pc-brand { left: 1.4583%; top: 1.8519%; width: 21.3542%; height: 14.8148%; }
.pc-title { left: 0.0000%; top: 19.4444%; width: 45.3646%; height: 27.6852%; }
.pc-subtitle { left: 2.7083%; top: 45.0926%; width: 38.5417%; height: 10.0926%; }
.pc-features { left: 4.8958%; top: 55.5556%; width: 33.6458%; height: 13.3333%; }
.pc-tagline { left: 31.2500%; top: 6.0185%; width: 13.7500%; height: 10.8333%; }

/* ========== 热区基础样式 ========== */
.hotspot {
  position: absolute;
  display: block;
  background: transparent;
  text-decoration: none;
  border: 0;
  outline: 0;
  cursor: pointer;
  z-index: 5;
}
.landing.debug-hotspots .hotspot { outline: 2px solid rgba(255,64,64,.6); background: rgba(255,64,64,.08); }

/* ========== PC 顶部三按钮（蕉点稿 1920×1080，相对 .pc-frame 的像素坐标） ========== */
.pc-coopbar {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.pc-coopbtn {
  position: absolute;
  top: 2.3148%;
  height: 5.463%;
  line-height: 0;
  pointer-events: auto;
}
.pc-coop-biz { left: 59.375%; width: 10.4167%; }
.pc-coop-group { left: 72.6042%; width: 10.4167%; }
.pc-coop-channel { left: 85.7813%; width: 10.4688%; }
.pc-coopbtn img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ========== PC 热区（番茄新版 pc.jpg 1672×941；坐标首版估算，用 ?debug 微调） ========== */
/* 右上 3 个外链：广告合作 / 官方群组 / 渠道合作 */
.pc-biz     { top: 3.5%; left: 73.5%; width: 8.5%; height: 4.5%; }
.pc-group   { top: 3.5%; left: 83.0%; width: 8.5%; height: 4.5%; }
.pc-channel { top: 3.5%; left: 91.0%; width: 8.5%; height: 4.5%; }

/* 扫码卡片整体等比缩放，文案和二维码共用定位框。 */
.pc-download-card {
  position: absolute;
  left: 0.0521%;
  top: 64.2593%;
  width: min(42.5521vw, 70.024vh);
  width: min(42.5521vw, 70.024dvh);
  aspect-ratio: 817 / 417;
  z-index: 3;
}
.pc-qr-frame {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}
.pc-qr {
  position: absolute;
  top: 29.6163%; left: 17.0135%;
  width: 19.5838%; aspect-ratio: 1;
  z-index: 5;
}
.pc-qr canvas, .pc-qr img {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ========== H5 热区（番茄魔改新图 1400(1).jpg 750×1400，iOS/安卓同图；
   顶部 3 链接图标经图像分析实测 中心≈60%/77.7%/95.4%、header top 1~6%；热区取生成宽度确保可点） ========== */
.h5-biz         { top: 1.4%; left: 47.0%; width: 17.5%; height: 4.8%; }
.h5-group       { top: 1.4%; left: 64.5%; width: 16.5%; height: 4.8%; }
.h5-channel     { top: 1.4%; left: 81.0%; width: 18.5%; height: 4.8%; }
.h5-bottom-text { top: 96.3%; left: 4.0%; width: 92.0%; height: 3.2%; }

/* ========== H5 顶部三按钮（蕉点稿 750×1624：商务 282,46 / 官方 438,46 / 流量 594,46） ========== */
.h5-coopbar {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.h5-coopbtn {
  position: absolute;
  top: 2.8325%;
  height: 2.5862%;
  line-height: 0;
  pointer-events: auto;
}
.h5-coop-biz { left: 37.6%; width: 18.6667%; }
.h5-coop-group { left: 58.4%; width: 18.6667%; }
.h5-coop-channel { left: 79.2%; width: 18.8%; }
.h5-coopbtn img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ========== H5 底部 2 按钮（高速 36,1413；普通 383,1413；均为 331×111） ========== */
.h5-dlbar {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.h5-dlbtn {
  position: absolute;
  top: 87.0074%;
  height: 6.835%;
  width: 44.1333%;
  line-height: 0;
  pointer-events: auto;
}
.h5-dl-fast { left: 4.8%; }
.h5-dl-normal { left: 51.0667%; }
.h5-dlbtn img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* 蕉点稿没有安装教程徽章，先藏起来，避免压住海报 */
.h5-guide-btn {
  position: absolute;
  right: 4%; bottom: 24%;
  z-index: 25;
  width: 74px; height: 74px;
  border-radius: 50%;
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1px;
  text-decoration: none;
  color: #fff;
  background: radial-gradient(circle at 50% 28%, #ff8a5b 0%, #f5392f 55%, #c41e1e 100%);
  border: 2px solid #ffd9cc;
  box-shadow: 0 6px 16px rgba(196,30,30,.5), inset 0 2px 7px rgba(255,255,255,.4), inset 0 -4px 9px rgba(150,20,20,.4);
  animation: h5GuidePulse 2s ease-in-out infinite;
}
.h5-guide-ic { width: 22px; height: 22px; color: #fff; }
.h5-guide-tx { font-size: 12px; font-weight: 800; line-height: 1.1; text-shadow: 0 1px 2px rgba(120,10,10,.4); letter-spacing: .5px; }
@keyframes h5GuidePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .h5-guide-btn { animation: none; } }

/* 默认 H5 一屏展示；安装教程弹层仍可独立滚动。 */
body.landing-h5 { overflow: hidden; }

/* ========== B 版（视频网格长落地页，Figma node 648:66 → 750×2212 裁后） ========== */
/* B 版保留最大 750px 的居中长页布局。 */
body.b-version { overflow: auto; background: #000; }
.landing.landing-b {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: #000;
}
/* B 版移动长页容器：定位上下文 = 图片框，热区 % 相对它对齐。
 * PC 端（landing.js 切 data-layout="pc" 并去掉 .landing-b）隐藏本段、改显 pcShell。*/
.b-shell { position: relative; display: block; }
.landing[data-layout="pc"] .b-shell { display: none; }

.b-bg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}
.b-hot {
  position: absolute;
  display: block;
  background: transparent;
  text-decoration: none;
  border: 0;
  outline: 0;
  cursor: pointer;
  z-index: 5;
}
/* B 版热区（基于 bg-b.jpg 750×2212；精确测自 648:102/648:108/648:101 bbox） */
.b-btn-android { left:  4.00%; top: 91.14%; width: 44.80%; height: 3.71%; border-radius: 999px; }
.b-btn-ios     { left: 51.73%; top: 91.14%; width: 44.80%; height: 3.71%; border-radius: 999px; }
.b-bottom-text { left: 24.53%; top: 96.02%; width: 51.20%; height: 2.89%; }
/* B 版顶部右侧 3 个外链按钮（图标+文案为整块热区；目标与 PC pc-mail/telegram/sw 一致）
 * 商务合作(♥)→官网 t1t1.com、官方社群(✈)→Telegram、官方邮箱(✉)→mailto。
 * 坐标量自 bg-b.jpg 顶部 header（750×2212）。 */
.b-biz   { left: 57.60%; top: 1.18%; width: 14.67%; height: 4.43%; }
.b-group { left: 72.00%; top: 1.18%; width: 13.33%; height: 4.43%; }
.b-mail  { left: 84.93%; top: 1.18%; width: 14.67%; height: 4.43%; }
.landing.landing-b.debug-hotspots .b-hot { outline: 2px solid rgba(255,64,64,.6); background: rgba(255,64,64,.08); }

/* ========== 安卓「安装包报毒解决方案」弹层（深色金主题，与落地页统一） ========== */
.android-modal {
  position: fixed; inset: 0;
  background: #0d0a07;
  color: #e8d9a8;
  z-index: 100;
  overflow-y: auto;
}
.android-modal[hidden] { display: none; }
.android-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(180deg, #241a0c, #1a1308);
  border-bottom: 1px solid rgba(212,175,55,.35);
  position: sticky; top: 0; z-index: 2;
}
.android-modal-back {
  width: 32px; height: 32px;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}
/* 原黑色返回箭头图标，深色底下反相成浅金 */
.android-modal-back img { width: 100%; height: 100%; object-fit: contain; filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg) brightness(1.1); }
.android-modal-title { font-size: 16px; font-weight: 700; flex: 1; text-align: center; color: #f2d675; letter-spacing: 1px; }
.android-modal-spacer { width: 32px; }

.android-modal-list { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
/* 修：列表 display:flex 会盖过 hidden 属性的 display:none，点「查看」进详情态时列表隐不掉 */
.android-modal-list[hidden] { display: none; }
.android-modal-cell {
  display: block;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
}
.android-modal-cell img { width: 100%; display: block; }

.android-modal-detail { padding: 14px; }
.android-modal-detail[hidden] { display: none; }
.android-modal-pic { background: rgba(255,255,255,.04); border: 1px solid rgba(212,175,55,.22); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.android-modal-pic img { width: 100%; display: block; }

/* ========== 浮动广告位（右下） ========== */
.ad-float {
  position: fixed;
  right: 12px;
  bottom: 16px;
  width: min(80px, 22vw);
  aspect-ratio: 1/1;
  z-index: 50;
}
.ad-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.ad-slide.active { opacity: 1; }
.ad-slide img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(0,0,0,.2);
}
.ad-close {
  position: absolute;
  top: -8px; right: -8px;
  width: 20px; height: 20px;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
  z-index: 1;
}

@media (min-width: 961px) {
  .ad-float { width: 96px; right: 24px; bottom: 24px; }
}