:root {
  --w: 853px;
  --h: 2540px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
    "Songti SC", "STSong", "Noto Serif SC", serif;
  --ink: #071a12;
  --text: #16201d;
  --muted: #686f6d;
  --soft: #9aa09d;
  --green: #08794f;
  --green-deep: #006b45;
  --line: rgba(22, 46, 33, .12);
  --card-border: rgba(169, 185, 173, .42);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: var(--w);
  min-width: var(--w);
  height: auto;
  min-height: var(--h);
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: var(--font);
  background: #f7faf5;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  -webkit-overflow-scrolling: touch;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.screen {
  position: relative;
  width: var(--w);
  min-height: var(--h);
  padding-bottom: 160px;
  overflow: visible;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 4%, rgba(226, 242, 236, .74) 0 0, rgba(226, 242, 236, .42) 0 108px, transparent 252px),
    radial-gradient(circle at 80% 9%, rgba(226, 241, 234, .62) 0 0, rgba(226, 241, 234, .2) 0 142px, transparent 315px),
    radial-gradient(circle at 47% 62%, rgba(231, 243, 236, .42) 0 0, transparent 330px),
    linear-gradient(180deg, #fbfdf9 0%, #f8fbf6 35%, #f4f8f1 100%);
}

.bamboo {
  position: absolute;
  inset: 0;
  width: 853px;
  height: 1844px;
  pointer-events: none;
}

.status-time {
  position: absolute;
  left: 71px;
  top: 31px;
  font-size: 31px;
  line-height: 39px;
  font-weight: 800;
  letter-spacing: 0;
  color: #000;
}

.status {
  position: absolute;
  display: block;
}

.signal {
  left: 673px;
  top: 38px;
  width: 41px;
  height: 32px;
}

.wifi {
  left: 719px;
  top: 36px;
  width: 41px;
  height: 32px;
}

.battery {
  left: 763px;
  top: 35px;
  width: 58px;
  height: 35px;
}

.top-action {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(249, 251, 248, .96));
  box-shadow: 0 9px 22px rgba(9, 26, 16, .08), inset 0 1px 0 rgba(255, 255, 255, .96);
}

.top-action img {
  position: absolute;
  object-fit: contain;
}

.top-action.search {
  left: 657px;
  top: 113px;
}

.top-action.search img {
  left: 15px;
  top: 15px;
  width: 47px;
  height: 47px;
}

.top-action.bell {
  left: 742px;
  top: 113px;
}

.top-action.bell img {
  left: 16px;
  top: 14px;
  width: 40px;
  height: 43px;
}

.pressed {
  transform: translateY(1px) scale(.992);
}

.card,
.feature-card,
.wide-card {
  position: absolute;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(252, 253, 250, .79));
  border: 1px solid rgba(180, 190, 180, .45);
  box-shadow: 0 14px 32px rgba(31, 48, 34, .075);
  backdrop-filter: blur(10px);
}

.quick-card {
  left: 47px;
  top: 330px;
  width: 758px;
  height: 424px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(252, 253, 251, .86));
}

.section-title {
  position: absolute;
  left: 33px;
  top: 31px;
  display: flex;
  align-items: center;
}

.section-title img {
  width: 31px;
  height: 32px;
}

.section-title h2 {
  margin: 0 0 0 15px;
  font-size: 31px;
  line-height: 40px;
  font-weight: 800;
  color: #121c18;
}

.record-link,
.more-link {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #777c7a;
  font-size: 21px;
  line-height: 29px;
  font-weight: 400;
}

.record-link {
  left: 620px;
  top: 36px;
}

.record-link img,
.more-link img {
  width: 14px;
  height: 23px;
  opacity: .7;
}

.field {
  position: absolute;
  display: flex;
  align-items: center;
  height: 83px;
  border: 1px solid rgba(216, 208, 197, .78);
  border-radius: 10px;
  background: rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.name-field {
  left: 24px;
  top: 88px;
  width: 428px;
}

.field span,
.field-label {
  margin-left: 20px;
  font-size: 22px;
  line-height: 31px;
  font-weight: 500;
  color: #1f2724;
}

.name-field input {
  width: 250px;
  margin-left: 47px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #878d8a;
  font-size: 22px;
  line-height: 31px;
  font-weight: 400;
}

.name-field input::placeholder {
  color: #878d8a;
  opacity: 1;
}

.name-field.is-invalid {
  border-color: rgba(214, 90, 82, 0.78);
  box-shadow: 0 0 0 4px rgba(214, 90, 82, 0.08);
}

.name-field.is-invalid input::placeholder {
  color: #d65a52;
}

.gender-field {
  left: 461px;
  top: 88px;
  width: 271px;
}

.seg {
  position: absolute;
  top: 17px;
  width: 76px;
  height: 48px;
  border-radius: 999px;
  color: #1f2724;
  font-size: 22px;
  line-height: 48px;
  font-weight: 500;
}

.gender-field .seg:nth-of-type(1) {
  left: 91px;
}

.gender-field .seg:nth-of-type(2) {
  left: 179px;
}

.seg.active {
  color: #fff;
  background: linear-gradient(180deg, #0a8258, #06734c);
  box-shadow: 0 8px 15px rgba(7, 105, 70, .18);
}

.seg:not(.active) {
  background: rgba(245, 246, 244, .92);
}

.birth-field {
  left: 24px;
  top: 179px;
  width: 708px;
  height: 82px;
  text-align: left;
}

.birth-field em {
  margin-left: 48px;
  font-style: normal;
  color: #858b88;
  font-size: 22px;
  line-height: 31px;
  font-weight: 400;
}

.birth-chevron {
  position: absolute;
  left: 577px;
  top: 29px;
  width: 14px;
  height: 23px;
  opacity: .68;
}

.calendar {
  position: absolute;
  left: 659px;
  top: 26px;
  width: 27px;
  height: 29px;
  opacity: .88;
}

.generate {
  position: absolute;
  left: 24px;
  top: 282px;
  width: 707px;
  height: 78px;
  overflow: hidden;
  border-radius: 39px;
  color: #fff;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, .05) 0 36%, transparent 36% 100%),
    repeating-linear-gradient(74deg, rgba(255, 255, 255, .09) 0 2px, transparent 2px 8px),
    linear-gradient(90deg, #08784f 0%, #067047 55%, #056f47 100%);
  box-shadow: 0 15px 27px rgba(0, 88, 55, .17);
}

.generate img {
  position: absolute;
  left: 211px;
  top: 18px;
  width: 42px;
  height: 42px;
}

.generate span {
  position: absolute;
  left: 271px;
  top: 17px;
  font-size: 29px;
  line-height: 42px;
  font-weight: 800;
  letter-spacing: 0;
}

.safety {
  position: absolute;
  left: 195px;
  top: 375px;
  display: flex;
  align-items: center;
  margin: 0;
  color: #787e7b;
  font-size: 18px;
  line-height: 25px;
  font-weight: 400;
}

.safety img {
  width: 18px;
  height: 22px;
  margin-right: 12px;
}

.feature-card {
  width: 241px;
  height: 194px;
  border-radius: 18px;
}

.feature-card img {
  position: absolute;
  object-fit: contain;
}

.feature-card h3 {
  position: absolute;
  top: 105px;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 28px;
  line-height: 39px;
  font-weight: 800;
  color: #111918;
}

.feature-card p {
  position: absolute;
  top: 148px;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #777d7b;
}

.feature-paipan {
  left: 47px;
  top: 1710px;
}

.feature-paipan img {
  left: 88px;
  top: 34px;
  width: 63px;
  height: 63px;
}

.feature-exercises {
  left: 305px;
  top: 1710px;
}

.feature-exercises img {
  left: 91px;
  top: 34px;
  width: 60px;
  height: 62px;
}

.feature-courses {
  left: 563px;
  top: 1710px;
}

.feature-courses img {
  left: 84px;
  top: 37px;
  width: 70px;
  height: 55px;
}

.wide-card {
  width: 368px;
  height: 131px;
  border-radius: 18px;
}

.wide-card img {
  position: absolute;
  object-fit: contain;
}

.wide-card h3 {
  margin: 0;
  font-size: 28px;
  line-height: 39px;
  font-weight: 800;
  color: #111918;
}

.wide-card p {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #777d7b;
}

.ask-card {
  left: 47px;
  top: 1930px;
}

.ask-card img {
  left: 73px;
  top: 38px;
  width: 71px;
  height: 55px;
}

.ask-card div {
  position: absolute;
  left: 166px;
  top: 29px;
}

.case-card {
  left: 433px;
  top: 1930px;
  width: 371px;
}

.case-card img {
  left: 78px;
  top: 35px;
  width: 72px;
  height: 62px;
}

.case-card div {
  position: absolute;
  left: 166px;
  top: 29px;
}

.today-card {
  left: 47px;
  top: 2090px;
  width: 758px;
  height: 274px;
  border-radius: 22px;
}

.today-card > h2 {
  position: absolute;
  left: 30px;
  top: 28px;
  margin: 0;
  font-size: 31px;
  line-height: 42px;
  font-weight: 800;
  color: #121c18;
}

.more-link {
  left: 660px;
  top: 34px;
}

.practice-item {
  position: absolute;
  left: 24px;
  top: 83px;
  width: 708px;
  height: 179px;
  border: 1px solid rgba(216, 208, 197, .76);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(254, 255, 253, .65));
}

.book-badge {
  position: absolute;
  left: 21px;
  top: 22px;
  width: 66px;
  height: 67px;
  border-radius: 50%;
}

.book-badge img {
  width: 66px;
  height: 67px;
  display: block;
}

.practice-item h3 {
  position: absolute;
  left: 110px;
  top: 25px;
  margin: 0;
  font-size: 26px;
  line-height: 36px;
  font-weight: 800;
  color: #151d1b;
}

.tag {
  position: absolute;
  left: 313px;
  top: 28px;
  width: 74px;
  height: 33px;
  border-radius: 8px;
  border: 1px solid rgba(192, 125, 53, .16);
  background: #fbf0e1;
  color: #b1702e;
  text-align: center;
  font-size: 17px;
  line-height: 31px;
  font-weight: 500;
}

.meta {
  position: absolute;
  left: 110px;
  top: 70px;
  margin: 0;
  color: #7a807d;
  font-size: 19px;
  line-height: 28px;
  font-weight: 400;
}

.stars {
  position: absolute;
  left: 272px;
  top: 72px;
  display: flex;
  gap: 6px;
}

.stars img {
  width: 22px;
  height: 22px;
}

.start-practice {
  position: absolute;
  left: 536px;
  top: 33px;
  width: 151px;
  height: 58px;
  border-radius: 29px;
  color: #fff;
  background: linear-gradient(180deg, #0a8156, #07734c);
  box-shadow: 0 8px 16px rgba(6, 94, 62, .2);
  font-size: 21px;
  line-height: 58px;
  font-weight: 800;
}

.practice-stats {
  position: absolute;
  left: 22px;
  top: 113px;
  margin: 0;
  color: #7c827f;
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
}

.practice-track {
  position: absolute;
  left: 22px;
  top: 153px;
  width: 660px;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8e4;
}

.practice-track i {
  display: block;
  width: 415px;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #07794f, #056d47);
}

.tabbar {
  position: absolute;
  left: 0;
  top: 2380px;
  width: 853px;
  height: 145px;
  border-radius: 22px 22px 0 0;
  border: 1px solid rgba(210, 215, 211, .92);
  border-bottom: 0;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -5px 20px rgba(30, 45, 35, .05);
}

.tab {
  position: absolute;
  top: 15px;
  width: 112px;
  height: 88px;
}

.tab img {
  position: absolute;
  object-fit: contain;
  left: 50%;
  transform: translateX(-50%);
}

.tab span {
  position: absolute;
  left: 0;
  top: 58px;
  width: 100%;
  text-align: center;
  color: #787e7b;
  font-size: 21px;
  line-height: 29px;
  font-weight: 400;
}

.tab.active span {
  color: #08784f;
  font-weight: 500;
}

.tab:nth-of-type(1) {
  left: 62px;
}

.tab:nth-of-type(1) img {
  top: 0;
  width: 46px;
  height: 48px;
}

.tab:nth-of-type(2) {
  left: 262px;
}

.tab:nth-of-type(2) img {
  top: 2px;
  width: 35px;
  height: 45px;
}

.tab:nth-of-type(3) {
  left: 462px;
}

.tab:nth-of-type(3) img {
  top: 3px;
  width: 39px;
  height: 39px;
}

.tab:nth-of-type(4) {
  left: 662px;
}

.tab:nth-of-type(4) img {
  top: 1px;
  width: 39px;
  height: 45px;
}

.home-indicator {
  display: none !important;
  position: absolute;
  left: 279px;
  top: 121px;
  width: 295px;
  height: 8px;
  border-radius: 999px;
  background: #020202;
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(8, 120, 79, .25);
  outline-offset: 2px;
}

/* The host app owns the shared bottom navigation. */
.tabbar {
  display: none !important;
}

/* ============================================================
   skin-sj-replica · 书卷风统一（排盘首页 / 工作台 iframe 模块）
   永远嵌于主 APP：默认生效，无参数开关；仅样式覆写，未动 JS/DOM
   ============================================================ */

/* skin-sj-replica · 1) token 层：:root 语义映射书卷系（功能色如 is-invalid 红不动） */
:root {
  --ink: #3A3023;
  --text: #3A3023;
  --muted: #5A4F3C;
  --soft: #8A7E68;
  --green: #16453A;
  --green-deep: #0F3229;
  --gold: #B98A2F;
  --gold-light: #D8B96A;
  --paper: #F1E8D2;
  --paper-card: #FBF6EA;
  --line: #DCCDA8;
  --card-border: #DCCDA8;
  --shadow-warm: rgba(58, 48, 35, .1);
}

/* skin-sj-replica · 2) 表面层：纸底 + 双向纸纹 */
html,
body {
  background:
    repeating-linear-gradient(115deg, rgba(58, 48, 35, .014) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(25deg, rgba(58, 48, 35, .014) 0 2px, transparent 2px 7px),
    #F1E8D2;
}

.screen {
  background:
    radial-gradient(circle at 20% 4%, rgba(233, 221, 189, .85) 0, rgba(238, 228, 199, .4) 108px, transparent 252px),
    radial-gradient(circle at 80% 9%, rgba(235, 223, 191, .6) 0, rgba(235, 223, 191, .2) 142px, transparent 315px),
    radial-gradient(circle at 47% 62%, rgba(246, 239, 220, .5) 0, transparent 330px),
    repeating-linear-gradient(115deg, rgba(58, 48, 35, .014) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(25deg, rgba(58, 48, 35, .014) 0 2px, transparent 2px 7px),
    #F1E8D2;
}

.bamboo {
  filter: sepia(.4) hue-rotate(-10deg) saturate(.85);
  opacity: .85;
}

/* 近白表面 → 纸系（原 rgba(255,255,255,*) / #f7-#f5 系） */
.card,
.feature-card,
.wide-card {
  background: rgba(251, 246, 234, .94);
  border: 1px solid #DCCDA8;
  box-shadow: 0 14px 32px rgba(58, 48, 35, .1);
}

.quick-card {
  background: rgba(251, 246, 234, .94);
}

.top-action {
  background: linear-gradient(180deg, rgba(251, 246, 234, .98), rgba(245, 237, 218, .96));
  box-shadow: 0 9px 22px rgba(58, 48, 35, .12), inset 0 1px 0 rgba(255, 252, 244, .9);
}

.field {
  border: 1px solid #DCCDA8;
  background: rgba(253, 250, 243, .92);
  box-shadow: inset 0 1px 0 rgba(255, 252, 244, .8);
}

.seg:not(.active) {
  background: #EFE7CE;
}

.tabbar {
  border-color: #DCCDA8;
  background: rgba(251, 246, 234, .96);
  box-shadow: 0 -5px 20px rgba(58, 48, 35, .07);
}

/* 冷绿浅底 → 纸系轨道 */
.progress-ring::before {
  background: #FBF6EA;
  box-shadow: inset 0 1px 2px rgba(58, 48, 35, .06);
}

.goal-track,
.practice-track {
  background: rgba(58, 48, 35, .12);
}

/* 文字层级：墨字 / 次字 / 弱字 */
.hero-title,
.section-title h2,
.today-card > h2,
.selling-text h3,
.app-download h2,
.field span,
.field-label,
.seg,
.feature-card h3,
.wide-card h3,
.practice-item h3 {
  color: #3A3023;
}

.hero-tagline,
.hero-subtitle,
.record-link,
.more-link,
.name-field input,
.feature-card p,
.wide-card p,
.selling-text p,
.meta,
.practice-stats,
.tab span {
  color: #5A4F3C;
}

.name-field input::placeholder,
.birth-field em,
.safety,
.ios-note {
  color: #8A7E68;
}

.tab.active span {
  color: #16453A;
}

/* 线条 → 暖线 */
.split {
  background: rgba(58, 48, 35, .1);
}

.weekly-line {
  background: #DCCDA8;
}

button:focus-visible,
input:focus-visible {
  outline-color: rgba(22, 69, 58, .32);
}

/* skin-sj-replica · 3) 组件层 */
/* 标题 h1/h2 衬线 + 字距 */
.hero-title,
.section-title h2,
.app-download h2,
.today-card > h2 {
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  letter-spacing: .05em;
}

/* 本周学习概览 · 进度环：暖轨道 + 主绿进度 */
.progress-ring {
  background: conic-gradient(from 170deg, #16453A 0deg 281deg, rgba(58, 48, 35, .12) 281deg 360deg);
  box-shadow: inset 0 1px 2px rgba(58, 48, 35, .18);
}

/* 主按钮 · 生成专业综合命盘：金光斑 + 深绿渐变 */
.generate {
  background:
    radial-gradient(circle at 26% 18%, rgba(216, 185, 106, .22) 0, rgba(216, 185, 106, .07) 34%, transparent 62%),
    linear-gradient(135deg, #1E5044 0%, #0F3229 100%);
  box-shadow: 0 15px 27px rgba(15, 50, 41, .28), inset 0 1px 0 rgba(216, 185, 106, .28);
}

/* 性别选中段 / 开始练习按钮：同深绿系 */
.seg.active {
  background: linear-gradient(180deg, #1E5044, #0F3229);
  box-shadow: 0 8px 15px rgba(15, 50, 41, .22);
}

.start-practice {
  background: linear-gradient(135deg, #1E5044, #0F3229);
  box-shadow: 0 8px 16px rgba(15, 50, 41, .25);
}

/* 入口卡（八字/题库/奇门/问命复盘/案例库）· 纸匣卡 */
.feature-card,
.wide-card {
  background: #FBF6EA;
  border: 1px solid #DCCDA8;
  box-shadow: 0 10px 24px rgba(58, 48, 35, .1), inset 0 1px 0 rgba(255, 252, 244, .7);
}

/* PNG 图标暖化（星级评分图标不动） */
.feature-card img,
.wide-card img,
.section-title img,
.book-badge img,
.safety img,
.calendar {
  filter: sepia(.4) hue-rotate(-10deg) saturate(.85);
}

/* 进度条 · 金渐变填充 */
.goal-track i,
.practice-track i {
  background: linear-gradient(90deg, #B98A2F, #D8B96A);
}

/* 今日练习 · 练习条目纸匣化 */
.practice-item {
  border: 1px solid #DCCDA8;
  background: #FBF6EA;
  box-shadow: 0 6px 16px rgba(58, 48, 35, .08), inset 0 1px 0 rgba(255, 252, 244, .8);
}

.tag {
  border: 1px solid rgba(185, 138, 47, .35);
  background: #F6ECD4;
  color: #B98A2F;
}
/* end skin-sj-replica */

/* [全站原生触感] 无蓝色点按高亮、无文本误选、按压不缩放 */
*{ -webkit-tap-highlight-color:transparent; }
body{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
input, textarea, [contenteditable="true"]{ -webkit-user-select:text; user-select:text; }
button{ touch-action:manipulation; }
button:focus:not(:focus-visible){ outline:none; }
*:focus:not(:focus-visible){ outline:none !important; }
input:focus, textarea:focus, select:focus{ outline:none; }
::selection{ background:rgba(185,138,47,.32); color:inherit; }

/* ============================================================
   首页重构 · hero / 卖点区 / APP 下载区
   ============================================================ */

/* ---- hero 品牌区 ---- */
.hero {
  position: absolute;
  left: 47px;
  top: 50px;
  width: 758px;
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-logo {
  width: 80px;
  height: auto;
  margin-bottom: 18px;
  will-change: transform, opacity;
  animation: hero-breathe 5s ease-in-out infinite;
}

.hero-title {
  margin: 0;
  font-size: 52px;
  line-height: 64px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #3A3023;
  animation: hero-reveal .7s ease forwards;
}

.hero-tagline {
  margin: 14px 0 0;
  font-size: 26px;
  line-height: 36px;
  font-weight: 400;
  letter-spacing: .12em;
  color: #5A4F3C;
  opacity: 0;
  animation: hero-reveal .7s ease .2s forwards;
}

.hero-subtitle {
  margin: 16px 0 0;
  font-size: 22px;
  line-height: 32px;
  font-weight: 400;
  color: #8A7E68;
  opacity: 0;
  animation: hero-reveal .7s ease .4s forwards;
}

@keyframes hero-breathe {
  0%, 100% {
    opacity: .88;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

@keyframes hero-reveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- 卖点区 ---- */
.selling-points {
  position: absolute;
  left: 47px;
  top: 780px;
  width: 758px;
}

.selling-point {
  width: 100%;
  margin-bottom: 22px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(251, 246, 234, .94);
  border: 1px solid #DCCDA8;
  box-shadow: 0 10px 24px rgba(58, 48, 35, .08), inset 0 1px 0 rgba(255, 252, 244, .7);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: transform, opacity;
}

.selling-point:nth-child(1).is-visible { transition-delay: 0ms; }
.selling-point:nth-child(2).is-visible { transition-delay: 120ms; }
.selling-point:nth-child(3).is-visible { transition-delay: 240ms; }

.selling-point.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.selling-media {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
  background: rgba(58, 48, 35, .04);
}

.selling-media img {
  display: block;
  width: 100%;
  height: auto;
}

.selling-text h3 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 40px;
  font-weight: 800;
  color: #3A3023;
}

.selling-text p {
  margin: 0;
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
  color: #5A4F3C;
}

/* ---- APP 下载区 ---- */
.app-download {
  position: absolute;
  left: 47px;
  top: 1440px;
  width: 758px;
  height: 240px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(251, 246, 234, .94);
}

.app-download h2 {
  margin: 0 0 24px;
  font-size: 31px;
  line-height: 42px;
  font-weight: 800;
  color: #3A3023;
}

.download-row {
  display: flex;
  align-items: center;
  gap: 28px;
}

.download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  height: 76px;
  padding: 0 32px;
  border-radius: 38px;
  color: #fff;
  background: linear-gradient(135deg, #1E5044 0%, #0F3229 100%);
  box-shadow: 0 15px 27px rgba(15, 50, 41, .28), inset 0 1px 0 rgba(216, 185, 106, .28);
  font-size: 26px;
  line-height: 76px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}

.download-btn:active {
  transform: translateY(1px) scale(.992);
  box-shadow: 0 10px 20px rgba(15, 50, 41, .22);
}

.qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.qr-block img {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  display: block;
}

.qr-block span {
  font-size: 17px;
  line-height: 24px;
  color: #8A7E68;
}

.ios-note {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 26px;
  color: #8A7E68;
}