/* 场景宣发页通用样式：移动优先，内容宽 750 设计稿，同一份页面可直接截成微信长图 */
:root {
  --bg: #07060f;
  --panel: rgba(255, 255, 255, 0.04);
  --line: rgba(255, 255, 255, 0.10);
  --text: #f1ecff;
  --muted: #a49cc4;
  --accent: #ff3fd1;        /* 夜场霓虹粉紫 */
  --accent-2: #ffb21e;      /* 取自 logo 橙黄 */
  --cyan: #00e5ff;
  --grad: linear-gradient(100deg, var(--accent-2), var(--accent) 55%, #7b5cff);
  --font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }

/* 海报主体：最大 750px 居中，桌面端两侧留黑 */
.poster {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(255, 63, 209, 0.18), transparent 70%),
    radial-gradient(ellipse 70% 30% at 100% 35%, rgba(123, 92, 255, 0.14), transparent 70%),
    radial-gradient(ellipse 70% 30% at 0% 70%, rgba(255, 178, 30, 0.08), transparent 70%),
    var(--bg);
  overflow: hidden;
}
.sec { padding: 64px 28px; position: relative; }
.sec + .sec { border-top: 1px solid var(--line); }

/* 章节标题：编号 + 主标题 + 副标题 */
.poster { counter-reset: sec; }
/* 编号自动生成：隐藏的版本段落不计数，切版本不跳号 */
.no::before { counter-increment: sec; content: counter(sec, decimal-leading-zero) " · "; }
.no {
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--accent);
  font-weight: 700;
}
.h2 {
  margin: 8px 0 12px;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 900;
}
.h2 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin: 0 0 24px; font-size: 16px; color: var(--muted); }
.lead b { color: var(--text); }

/* 素材占位：只放图（App 截图 + AI 现场图），不放视频——客户没耐心看，图 1 秒就懂 */
.slot {
  margin: 0;
  border: 1.5px dashed rgba(255, 63, 209, 0.45);
  border-radius: 14px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 12px, transparent 12px 24px);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 16px;
}
.slot b { display: block; color: var(--accent); font-size: 15px; margin-bottom: 4px; }
.slot.tall { aspect-ratio: 9 / 16; }
.slot.sq { aspect-ratio: 1 / 1; }
.media { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.media img { width: 100%; }
/* 手机截图：套 CSS 手机外壳（边框 + 听筒孔 + 阴影），两台左右微倾，不必看清每个字 */
.media.phone {
  position: relative; width: 68%; margin: 8px auto 0; padding: 7px; overflow: visible;
  border-radius: 32px; border: 1px solid #55556a;
  background: linear-gradient(145deg, #34343f, #0b0b10);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.6), inset 0 0 0 3px #050507;
}
.media.phone img { border-radius: 25px; }
.media.phone::before {
  content: ""; position: absolute; z-index: 1; top: 14px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: #050507; box-shadow: 0 0 0 2px #1c1c24;
}
/* 平板截图：横屏外壳，边框比手机宽，左侧边框中点放前置摄像头 */
.media.tablet {
  position: relative; width: 92%; margin: 8px auto 0; padding: 16px 18px; overflow: visible;
  border-radius: 30px; border: 1px solid #55556a;
  background: linear-gradient(145deg, #34343f, #0b0b10);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 3px #050507;
}
.media.tablet img { border-radius: 12px; }
.media.tablet::before {
  content: ""; position: absolute; top: 50%; left: 6px; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: #050507; box-shadow: 0 0 0 2px #1c1c24;
}
.cols > div:first-child > .media.phone { transform: rotate(-4deg); }
.cols > div:last-child > .media.phone { transform: rotate(4deg); }
/* AI 生成图统一角标（AI 生成内容标识） */
.demo { position: relative; }
.demo::after {
  content: "效果示意"; position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px;
  font-size: 11px; color: rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.5);
}

/* 双列 / 三列小图 */
.cols { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-top: 12px; }
.cols.c3 { grid-template-columns: repeat(3, 1fr); }
.cap { margin-top: 6px; font-size: 13px; color: var(--muted); text-align: center; }

/* 首屏 */
.hero { padding: 40px 28px 56px; text-align: center; }
.brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: var(--muted); }
.brand img { width: 36px; height: 36px; border-radius: 8px; }
.kicker { margin: 36px 0 10px; font-size: 15px; letter-spacing: 0.4em; color: var(--accent-2); }
.h1 { margin: 0; font-size: 46px; line-height: 1.2; font-weight: 900; }
/* 长标题：字多时缩字号，保证 750 宽内每行不折行 */
.h1-long { font-size: 38px; line-height: 1.3; }
@media (max-width: 420px) { .h1-long { font-size: 26px; } }
.h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { margin: 16px auto 28px; max-width: 30em; }
.venues { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.venues span {
  padding: 6px 14px; border-radius: 999px; font-size: 14px;
  border: 1px solid rgba(255, 63, 209, 0.4); background: rgba(255, 63, 209, 0.08);
}

/* 一晚时间轴 */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 64px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(var(--accent-2), var(--accent), #7b5cff);
}
.timeline li { display: grid; grid-template-columns: 52px 1fr; gap: 28px; padding: 10px 0; position: relative; }
.timeline li::after {
  content: ""; position: absolute; left: 59px; top: 19px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--accent);
}
.timeline time { font-weight: 700; color: var(--accent-2); font-size: 15px; padding-top: 2px; }
.timeline h3 { margin: 0; font-size: 18px; }
.timeline p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }

/* 痛点对比 */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vs > div { border-radius: 14px; padding: 18px 16px; border: 1px solid var(--line); background: var(--panel); }
.vs h3 { margin: 0 0 10px; font-size: 16px; }
.vs ul { margin: 0; padding-left: 1.1em; font-size: 14px; color: var(--muted); }
.vs li + li { margin-top: 6px; }
.vs .old h3 { color: #8f8aa6; }
.vs .new { border-color: rgba(255, 63, 209, 0.5); background: rgba(255, 63, 209, 0.07); }
.vs .new h3 { color: var(--accent); }
.vs .new li { color: var(--text); }

/* 切换流程：步骤条 */
.flow { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 20px 0; }
.flow span { flex: 1; text-align: center; padding: 10px 2px; border-radius: 10px; font-size: 14px; font-weight: 700; background: var(--panel); border: 1px solid var(--line); }
.flow span.on { border-color: var(--accent); color: var(--accent); }
.flow i { font-style: normal; color: var(--accent-2); font-size: 14px; }

/* 要点列表 */
.points { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.points li { padding: 14px 16px 14px 44px; position: relative; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: 15px; }
.points li::before {
  content: ""; position: absolute; left: 16px; top: 19px; width: 14px; height: 14px;
  border-radius: 4px; background: var(--grad);
}
.points b { display: block; font-size: 16px; }
.points small { font-size: 14px; color: var(--muted); }

/* 核心屏强调 */
.sec.key { background: linear-gradient(180deg, rgba(255, 63, 209, 0.10), transparent 60%); }
.badge { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 12px; letter-spacing: 0.1em; vertical-align: middle; background: var(--grad); color: #1a0a1f; font-weight: 800; }
.note { margin-top: 14px; font-size: 12px; color: #7a7396; }

/* 一屏看懂：2×2 功能格 */
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feat div { padding: 18px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.feat b { display: block; font-size: 20px; margin-bottom: 4px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.feat p { margin: 0; font-size: 14px; color: var(--muted); }

/* 实例场景：2×2 图 + 标题 + 一句话 */
.venue-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.venue-list h3 { margin: 10px 0 2px; font-size: 17px; }
.venue-list p { margin: 0; font-size: 13px; color: var(--muted); }
.venue-list .slot { aspect-ratio: 4 / 3; }
.venue-list .media img { aspect-ratio: 4 / 3; object-fit: cover; }

/* 一晚流程：时间 | 环节 + 按钮 | 效果 */
.night { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.night li {
  display: grid; grid-template-columns: 56px 1fr auto; column-gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
}
.night time { grid-row: span 2; font-weight: 800; color: var(--accent-2); font-size: 15px; }
.night h3 { margin: 0; font-size: 18px; }
.night span { justify-self: end; padding: 3px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--accent); border: 1px solid rgba(255, 63, 209, 0.5); }
.night p { grid-column: 2 / 4; margin: 4px 0 0; font-size: 14px; color: var(--muted); }

/* 一键场景按钮：模拟手机上的大按钮 */
.scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.scenes div { padding: 14px 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); text-align: center; }
.scenes b { display: block; font-size: 20px; margin-bottom: 6px; }
.scenes p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.scenes .on { border-color: var(--accent); background: rgba(255, 63, 209, 0.12); }
.scenes .on b { color: var(--accent); }

/* 型号与收尾 */
.models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.models div { text-align: center; padding: 16px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.models b { display: block; font-size: 17px; }
.models span { font-size: 13px; color: var(--muted); }
.models .hot { border-color: var(--accent); }
.device { margin: 24px -28px 0; }
.cta { text-align: center; }
.qr { display: flex; justify-content: center; gap: 28px; margin: 24px 0 12px; }
.qr figure { margin: 0; }
.qr img { width: 150px; height: 150px; border-radius: 10px; background: #fff; padding: 6px; }
.qr figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }
.tel { font-size: 22px; font-weight: 800; letter-spacing: 0.05em; text-decoration: none; }
.foot { padding: 20px; text-align: center; font-size: 12px; color: #6d6788; }

/* 业务员转发工具 */
.share { padding: 28px; text-align: center; border-top: 1px solid var(--line); }
.share p { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.share div { display: flex; gap: 10px; justify-content: center; }
.share a, .share button {
  padding: 10px 18px; border-radius: 10px; font: inherit; font-size: 15px; text-decoration: none; cursor: pointer;
  color: var(--text); background: var(--panel); border: 1px solid var(--line);
}
.share button { border-color: var(--accent); color: var(--accent); }

/* 长图模式：固定 750 设计宽，隐藏转发工具 */
.wechat .poster { width: 750px; max-width: none; }
.wechat .share { display: none; }