/* AI智能测肤故事页 - 浅紫科技风 */
:root {
  --bg: #f3eef8;
  --bg-light: #faf7fc;
  --bg-soft: #ede6f5;
  --bg-flow-top: #e8dff5;
  --hero-fade: #ebe4f4;
  --accent: #9b6fd4;
  --accent-deep: #6d4c9e;
  --accent-light: #c4b5fd;
  --accent-glow: #ddd6fe;
  --dark: #2d2340;
  --gray: #6b6080;
  --footer-bg: #3d2d5c;
  --blue: #8b7cf6;
  --cyan: #a78bfa;
  --max-w: 1360px;
  --journey-card-w: 920px;
  --header-h: 72px;
  --section-pad: 48px 40px;
  --radius: 16px;
  --shadow: 0 8px 32px rgba(107,79,160,.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  background: var(--bg-soft);
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* ===== 全页统一氛围背景 ===== */
main.container {
  position: relative;
  isolation: isolate;
}
main.container::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 12% 6%, rgba(155,111,212,.16), transparent 58%),
    radial-gradient(ellipse 70% 45% at 88% 18%, rgba(139,124,246,.11), transparent 52%),
    radial-gradient(ellipse 80% 50% at 50% 48%, rgba(196,181,253,.09), transparent 60%),
    radial-gradient(ellipse 60% 40% at 18% 82%, rgba(155,111,212,.08), transparent 55%),
    radial-gradient(ellipse 55% 35% at 82% 78%, rgba(167,139,250,.07), transparent 50%),
    linear-gradient(180deg,
      var(--hero-fade) 0%,
      var(--bg-soft) 8%,
      var(--bg-light) 32%,
      var(--bg) 58%,
      var(--bg-light) 82%,
      var(--bg-soft) 100%
    );
}
main.container > * {
  position: relative;
  z-index: 1;
}

/* ===== Header ===== */
body.fix-header { padding-top: 0; }
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  transition: background .3s, box-shadow .3s;
}
.header.scrolled {
  background: var(--bg);
  box-shadow: 0 2px 20px rgba(107,79,160,.08);
}
.header .bar {
  max-width: 100%; margin: 0;
  height: var(--header-h);
  padding: 0 48px;
  display: flex; align-items: center; justify-content: flex-end;
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
  transition: background .3s;
}
.header-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.header-logo img {
  display: block;
  height: 56px;
  width: auto;
  object-fit: contain;
}
body:not(.scrolled) .header-logo img {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
.header.scrolled .bar {
  max-width: var(--max-w); margin: 0 auto;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(155,111,212,.12);
}
.logo-text { font-size: 22px; font-weight: 900; }
.logo-text span { color: var(--accent); }
.nav-links { display: flex; gap: 8px; }
.nav-links a {
  padding: 8px 18px; border-radius: 20px;
  font-size: 14px; font-weight: 600; color: var(--gray);
  text-decoration: none; transition: .25s;
}
.nav-links a:hover, .nav-links a.active {
  background: var(--accent); color: #fff;
}

/* ===== 通用 ===== */
.section { width: 100%; scroll-margin-top: var(--header-h); }
.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.section-inner.narrow {
  grid-template-columns: 1fr;
  max-width: min(var(--max-w), 100%);
  text-align: center;
}
.section-inner.wide {
  grid-template-columns: 1fr;
  max-width: var(--max-w);
}
.feature.reverse .section-inner {
  direction: rtl;
}
.feature.reverse .section-inner > * {
  direction: ltr;
}

.story-label,
.chapter-tag {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  color: var(--accent-deep);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(155,111,212,.1);
  border: 1px solid rgba(155,111,212,.2);
}
.hero .chapter-tag {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.3);
  color: rgba(255,255,255,.9);
}
.story-title {
  font-size: 36px; font-weight: 900;
  line-height: 1.25; margin-bottom: 16px;
}
.story-desc {
  font-size: 16px; color: var(--gray); line-height: 1.8;
}

/* 滚动渐入 */
.pain .section-inner,
.journey-intro .promo-spotlight-inner {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.pain.show .section-inner,
.journey-intro.show .promo-spotlight-inner {
  opacity: 1;
  transform: none;
}
.feature .text-col,
.feature .visual-col {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.feature.show .text-col { opacity: 1; transform: none; transition-delay: 0s; }
.feature.show .visual-col { opacity: 1; transform: none; transition-delay: .12s; }
.feature-list li {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .4s ease, transform .4s ease;
}
.feature.reverse .feature-list li { transform: translateX(12px); }
.feature.show .feature-list li { opacity: 1; transform: none; }
.feature.show .feature-list li:nth-child(1) { transition-delay: .25s; }
.feature.show .feature-list li:nth-child(2) { transition-delay: .35s; }
.feature.show .feature-list li:nth-child(3) { transition-delay: .45s; }

/* ===== Hero 全屏大图 ===== */
.section.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
}
.hero-visual {
  position: absolute; inset: 0; z-index: 0;
}
.hero-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 68% 28%;
  display: block;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(
      105deg,
      rgba(45,35,64,.82) 0%,
      rgba(45,35,64,.52) 28%,
      rgba(45,35,64,.22) 42%,
      rgba(109,76,158,.12) 55%,
      rgba(155,111,212,.05) 68%,
      transparent 88%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 42%,
      rgba(235,228,244,.06) 58%,
      rgba(237,230,245,.22) 72%,
      rgba(237,230,245,.42) 84%,
      rgba(235,228,244,.62) 92%,
      var(--hero-fade) 100%
    );
}
.section.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(18vh, 140px);
  z-index: 2;
  background: linear-gradient(180deg, transparent 0%, var(--hero-fade) 100%);
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 2;
  max-width: 600px;
  padding: 0 0 clamp(52px, 8vh, 80px) clamp(48px, 6vw, 96px);
  text-align: left;
  color: #fff;
}
.hero h1 {
  font-size: clamp(38px, 4.8vw, 54px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: 0.04em;
  margin: 0;
  text-shadow: 0 4px 28px rgba(0,0,0,.35);
}
.hero .tag {
  display: inline-block; padding: 6px 20px; border-radius: 20px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff; font-size: 13px; font-weight: 600;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
}
.hero-sub {
  font-size: 18px; font-weight: 600;
  color: var(--accent-light); margin-top: 10px;
}
.hero-value {
  font-size: clamp(15px, 1.75vw, 18px);
  font-weight: 700;
  color: rgba(255,255,255,.92);
  margin-top: 14px;
  line-height: 1.55;
  text-shadow: 0 2px 16px rgba(0,0,0,.28);
}
.hero-downloads {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center;
  margin-top: 28px;
}
.btn-download-hero {
  background: rgba(26,35,64,.85);
  backdrop-filter: blur(8px);
}
.hero-desc {
  font-size: 16px; color: rgba(255,255,255,.85);
  margin-top: 16px; line-height: 1.8;
}
.hero-scroll-cta {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 3;
}
.btn-scroll-down {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  cursor: pointer;
  position: relative;
  animation: scroll-down-bounce 2.2s ease-in-out infinite;
  transition: background .25s, border-color .25s, transform .25s;
}
.btn-scroll-down::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 47%;
  width: 11px;
  height: 11px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: translate(-50%, -55%) rotate(45deg);
}
.btn-scroll-down:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.75);
}
@keyframes scroll-down-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}
.scroll-hint {
  position: absolute;
  bottom: 28px; right: 48px;
  z-index: 3;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  letter-spacing: .08em;
  writing-mode: vertical-rl;
  animation: fadeHint 3s ease-in-out infinite;
}
@keyframes fadeHint {
  0%,100% { opacity: .4; }
  50% { opacity: .9; }
}

/* ===== 左侧故事进度线 ===== */
.story-progress {
  display: none;
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 98;
  align-items: stretch;
  gap: 10px;
  pointer-events: none;
}
.progress-track {
  width: 2px;
  background: rgba(155,111,212,.15);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.progress-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0%;
  background: linear-gradient(180deg, var(--accent-light), var(--accent));
  border-radius: 2px;
  transition: height .15s ease-out;
}
.progress-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
}
.progress-steps li {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  opacity: .25;
  transition: opacity .3s, transform .3s;
  cursor: pointer;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
}
.progress-steps li.act {
  opacity: 1;
  background: var(--accent);
  color: #fff;
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(155,111,212,.4);
}

/* ===== 波浪分割 ===== */
.wave-divider {
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%23faf7fc' d='M0,32 C360,80 720,0 1080,32 C1260,48 1380,40 1440,32 L1440,60 L0,60Z'/%3E%3C/svg%3E") center/cover no-repeat;
  margin-top: -1px;
}
.story-bridge {
  margin-top: 32px;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: .2em;
  opacity: .7;
  animation: pulseBridge 2.5s ease-in-out infinite;
}
@keyframes pulseBridge {
  0%,100% { opacity: .5; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(4px); }
}

/* ===== 痛点段 ===== */
.section.pain {
  background: linear-gradient(180deg, #2d2340 0%, var(--bg-light) 22%, var(--bg-soft) 100%);
  padding: 0 0 60px;
  position: relative;
}
.section.pain .section-inner { padding-top: 48px; }
.section.pain .chapter-tag { margin-top: 0; }
.story-desc.center { text-align: center; }
.story-title.center { text-align: center; }
.pain-lead { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.pain-list { list-style: none; text-align: left; margin-bottom: 24px; }
.pain-list li {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 0 14px 16px;
  border-left: 4px solid var(--accent);
  margin-bottom: 8px;
}
.pain-list strong { color: var(--accent-deep); font-size: 16px; }
.pain-list span { font-size: 14px; color: var(--gray); }
.stat-highlight {
  padding: 16px 24px; background: rgba(255,255,255,.75);
  border-radius: var(--radius); font-size: 16px; font-weight: 600;
}
.stat-highlight em { color: var(--accent); font-style: normal; font-size: 24px; }

/* ===== 宣传聚焦区（原旅程概览） ===== */
.section.journey-intro.promo-spotlight {
  background: transparent;
  padding: 44px 0 36px;
  position: relative;
  overflow: hidden;
}
.promo-spotlight-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px;
}
.promo-hero-panel {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 24px;
  color: var(--dark);
  border: 1px solid rgba(155,111,212,.16);
  box-shadow: 0 16px 48px rgba(107,79,160,.1);
}
.promo-editorial {
  background:
    linear-gradient(125deg, rgba(255,255,255,.94) 0%, rgba(248,245,252,.88) 52%, rgba(243,236,255,.82) 100%);
  backdrop-filter: blur(12px);
}
.promo-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.promo-deco-word {
  position: absolute;
  left: -2%;
  right: auto;
  top: 50%;
  transform: translateY(-52%);
  font-size: clamp(100px, 14vw, 200px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(155,111,212,.1);
  text-stroke: 1px rgba(155,111,212,.1);
  opacity: .75;
  user-select: none;
}
.promo-deco-ring {
  position: absolute;
  left: 6%;
  right: auto;
  top: 18%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(155,111,212,.12);
  box-shadow: inset 0 0 60px rgba(196,181,253,.1);
}
.promo-deco-ring::before {
  content: '';
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  border: 1px dashed rgba(155,111,212,.1);
}
.promo-editorial-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px 40px;
  align-items: stretch;
  padding: 36px 40px;
}
.promo-editorial-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 28px;
  border-left: 2px solid rgba(155,111,212,.32);
}
.promo-eyebrow {
  display: inline-block;
  padding: 0 0 10px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: none;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
}
.promo-headline {
  margin: 0 0 18px;
  text-shadow: none;
}
.promo-headline-line {
  display: block;
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: .06em;
  color: var(--dark);
  margin-bottom: 6px;
}
.promo-headline-accent {
  display: block;
  font-size: clamp(30px, 3.8vw, 44px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--dark);
}
.promo-headline-accent strong {
  display: inline;
  color: var(--accent-deep);
  font-weight: 900;
  background: linear-gradient(120deg, var(--accent-deep) 0%, var(--accent) 55%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.promo-lead {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray);
  margin: 0 0 24px;
  max-width: none;
  font-weight: 400;
  letter-spacing: .03em;
}
.promo-editorial-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  height: 100%;
}
.promo-step-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 16px 18px 16px 16px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(155,111,212,.14);
  border-radius: 4px 16px 16px 4px;
  box-shadow: 0 4px 16px rgba(107,79,160,.06);
  transition: background .3s, transform .3s, border-color .3s, box-shadow .3s;
}
.promo-step-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-glow), var(--accent));
}
.promo-step-card:hover {
  background: #fff;
  border-color: rgba(155,111,212,.28);
  box-shadow: 0 8px 24px rgba(107,79,160,.1);
  transform: translateX(6px);
}
.promo-step-card--1,
.promo-step-card--2,
.promo-step-card--3 {
  align-self: stretch;
  margin: 0;
  z-index: auto;
}
.promo-step-num {
  font-size: 28px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(155,111,212,.32);
  font-variant-numeric: tabular-nums;
}
.promo-step-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--dark);
  letter-spacing: .04em;
}
.promo-step-title em {
  font-style: normal;
  color: var(--accent-deep);
}
.promo-step-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--gray);
  font-weight: 500;
}
.btn-promo-scroll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: .14em;
  cursor: pointer;
  transition: color .25s, gap .25s;
}
.btn-promo-scroll--editorial {
  text-transform: none;
}
.btn-promo-line {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(155,111,212,.35));
  flex-shrink: 0;
  transition: width .3s;
}
.btn-promo-scroll svg {
  width: 16px;
  height: 16px;
  opacity: .75;
  animation: promoBounce 2.4s ease-in-out infinite;
}
.btn-promo-scroll:hover {
  color: var(--accent);
  gap: 14px;
  transform: none;
}
.btn-promo-scroll:hover .btn-promo-line {
  width: 56px;
}
@keyframes promoBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
.promo-contrast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 20px;
}
.promo-vs-card {
  padding: 22px 22px 20px;
  border-radius: 18px;
  border: 1px solid rgba(155,111,212,.14);
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 24px rgba(107,79,160,.07);
}
.promo-vs-old {
  opacity: .88;
}
.promo-vs-new {
  border-color: rgba(155,111,212,.32);
  background: linear-gradient(160deg, #fff 0%, rgba(243,236,255,.7) 100%);
  box-shadow: 0 10px 32px rgba(155,111,212,.14);
}
.promo-vs-badge {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  border-radius: 999px;
}
.promo-vs-old .promo-vs-badge {
  color: var(--gray);
  background: rgba(107,96,128,.1);
}
.promo-vs-new .promo-vs-badge {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
}
.promo-vs-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.promo-vs-card li {
  position: relative;
  padding: 8px 0 8px 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--gray);
  border-bottom: 1px dashed rgba(155,111,212,.1);
}
.promo-vs-card li:last-child { border-bottom: none; }
.promo-vs-old li::before {
  content: '×';
  position: absolute;
  left: 0;
  color: rgba(107,96,128,.45);
  font-weight: 700;
}
.promo-vs-new li {
  color: var(--dark);
  font-weight: 600;
}
.promo-vs-new li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}
.promo-vs-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
}
.promo-vs-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(155,111,212,.4);
}
.promo-vs-text {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-deep);
  letter-spacing: .1em;
}
.journey-intro .promo-spotlight-inner {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.journey-intro.show .promo-spotlight-inner {
  opacity: 1;
  transform: none;
}
.journey-intro.show .promo-step-card {
  animation: promoStepIn .65s cubic-bezier(.22,1,.36,1) backwards;
}
.journey-intro.show .promo-step-card--1 { animation-delay: .18s; }
.journey-intro.show .promo-step-card--2 { animation-delay: .32s; }
.journey-intro.show .promo-step-card--3 { animation-delay: .46s; }
@keyframes promoStepIn {
  from { opacity: 0; transform: translateX(24px) translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ===== 故事主线 · 横向滑动卡片 ===== */
.story-journey {
  --journey-phone-w: 200px;
  --journey-phone-h: 393px;
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 0 36px;
  background: transparent;
  overflow: hidden;
}
.story-journey::before {
  display: none;
}
.journey-carousel-hint {
  text-align: center;
  font-size: 13px;
  color: var(--accent-deep);
  margin: 0 0 20px;
  letter-spacing: .04em;
  opacity: .85;
}
.journey-carousel-shell {
  position: relative;
  max-width: min(var(--max-w), calc(100vw - 24px));
  margin: 0 auto;
  padding: 0 8px;
}
.journey-carousel-shell::before,
.journey-carousel-shell::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 28px;
  width: 72px;
  z-index: 4;
  pointer-events: none;
}
.journey-carousel-shell::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg-light) 10%, transparent);
}
.journey-carousel-shell::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 10%, transparent);
}
.journey-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(155,111,212,.22);
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  color: var(--accent-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(107,79,160,.16);
  transition: transform .25s, box-shadow .25s, background .25s, color .25s, opacity .25s;
}
.journey-carousel-arrow svg {
  width: 26px;
  height: 26px;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.journey-carousel-arrow:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 8px 28px rgba(155,111,212,.35);
  transform: translateY(-50%) scale(1.06);
}
.journey-carousel-arrow:active:not(:disabled) {
  transform: translateY(-50%) scale(.98);
}
.journey-carousel-arrow:disabled {
  opacity: .28;
  cursor: not-allowed;
  box-shadow: none;
}
.journey-carousel-arrow.prev { left: 4px; }
.journey-carousel-arrow.next { right: 4px; }
.journey-carousel-viewport {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 0 24px;
}
.journey-carousel-viewport::-webkit-scrollbar {
  display: none;
}
.journey-carousel-track {
  display: flex;
  gap: 28px;
  width: max-content;
  padding: 0 max(16px, calc((100vw - min(var(--journey-card-w), 94vw)) / 2 - 24px));
  align-items: stretch;
}
.story-journey .feature-card {
  position: relative;
  flex: 0 0 min(var(--journey-card-w), 94vw);
  scroll-snap-align: center;
  scroll-margin-top: var(--header-h);
  background: rgba(255,255,255,.96);
  border-radius: 20px;
  border: 1px solid rgba(155,111,212,.14);
  box-shadow: 0 8px 32px rgba(107,79,160,.1);
  overflow: hidden;
  opacity: .42;
  transform: scale(.94);
  transition: opacity .35s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.story-journey .feature-card::before {
  display: none;
}
.story-journey .feature-card.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(155,111,212,.28);
  box-shadow: 0 16px 48px rgba(107,79,160,.16), 0 0 0 1px rgba(155,111,212,.1);
}
.story-journey .feature-card.finale {
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,242,255,.98));
}
.story-journey .feature-card .section-inner.card-layout {
  display: grid;
  grid-template-columns: var(--journey-phone-w) minmax(0, 1fr);
  gap: 0 32px;
  max-width: none;
  margin: 0;
  padding: 28px 32px;
  text-align: left;
  align-items: center;
  min-height: 420px;
}
.story-journey .card-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--journey-phone-w);
  min-height: var(--journey-phone-h);
  flex-shrink: 0;
}
.story-journey .card-phone .phone {
  width: var(--journey-phone-w);
  height: var(--journey-phone-h);
  margin: 0;
  opacity: 1;
  transform: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.story-journey .card-phone .phone::before {
  width: 56px;
  height: 6px;
  top: 8px;
}
.story-journey .card-phone .phone-screen {
  flex: 1;
  margin-top: 18px;
  width: 100%;
  aspect-ratio: auto;
  min-height: 0;
  height: calc(100% - 18px);
}
.story-journey .card-phone .phone-fullshot {
  background: transparent;
  box-shadow: var(--shadow);
  padding: 0;
  overflow: hidden;
}
.story-journey .card-phone .phone-fullshot::before {
  display: none;
}
.story-journey .card-phone .phone-fullshot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 0;
  box-shadow: none;
}
.story-journey .card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  justify-content: center;
}
.story-journey .card-content .chapter-tag {
  margin-bottom: 0;
  align-self: flex-start;
}
.story-journey .card-content .story-title {
  font-size: 24px;
  margin: 0;
  line-height: 1.3;
}
.story-journey .card-content .story-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--gray);
  margin: 0;
}
.story-journey .card-content .tier-mini {
  margin: 0;
  gap: 6px;
}
.story-journey .card-content .tier-tag {
  font-size: 11px;
  padding: 4px 10px;
}
.story-journey .card-content .feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  width: 100%;
}
.story-journey .card-content .feature-list li {
  padding: 12px 12px;
  font-size: 12px;
  background: rgba(248,245,252,.95);
  border-radius: 10px;
  border-left: 3px solid var(--accent);
  box-shadow: none;
  opacity: 1;
  transform: none;
}
.story-journey .card-content .feature-list b {
  display: block;
  font-size: 11px;
  color: var(--accent-deep);
  margin-bottom: 3px;
  line-height: 1.3;
}
.story-journey .card-content .feature-list span {
  display: block;
  font-size: 10px;
  color: var(--gray);
  line-height: 1.45;
}
.story-journey .card-content .chapter-transition {
  margin: 6px 0 0;
  padding: 8px 0 0;
  font-size: 11px;
  color: var(--accent-deep);
  background: none;
  border: none;
  border-top: 1px dashed rgba(155,111,212,.22);
  border-radius: 0;
  font-style: normal;
  opacity: .85;
}
.story-journey .card-phone .ui-logs { padding: 10px 8px; }
.story-journey .card-phone .ui-logs .logs-title { font-size: 11px; margin-bottom: 8px; }
.story-journey .card-phone .log-item { padding: 6px; margin-bottom: 5px; gap: 5px; border-radius: 8px; }
.story-journey .card-phone .log-thumb { width: 26px; height: 26px; border-radius: 6px; }
.story-journey .card-phone .log-info .time { font-size: 7px; }
.story-journey .card-phone .log-tag { font-size: 6px; padding: 1px 3px; }
.story-journey .card-phone .log-qr { padding: 4px; font-size: 6px; border-radius: 6px; }
.story-journey .card-phone .qr-modal { padding: 14px; border-radius: 12px; width: 82%; }
.story-journey .card-phone .qr-modal h3 { font-size: 11px; margin-bottom: 4px; }
.story-journey .card-phone .qr-modal p { font-size: 8px; margin-bottom: 8px; }
.story-journey .card-phone .qr-code { width: 64px; height: 64px; background-size: 8px 8px; border-width: 4px; }
.story-journey .card-phone .ui-report .report-header { font-size: 9px; padding: 8px; }
.story-journey .card-phone .face-img { height: 48px; }
.story-journey .card-phone .rtab { font-size: 7px; padding: 4px 2px; }
.story-journey .card-phone .report-card { padding: 6px; }
.story-journey .card-phone .report-card h4 { font-size: 8px; }
.story-journey .card-phone .report-row { font-size: 7px; padding: 3px 0; }
.story-journey .card-phone .ui-loading .tab { font-size: 8px; padding: 6px; }
.story-journey .card-phone .loading-center h3 { font-size: 9px; }
.story-journey .card-phone .loading-center p { font-size: 7px; }
.story-journey .card-phone .loading-rings { width: 36px; height: 36px; }
.story-journey .card-phone .scan-area { width: 90px; height: 118px; margin-top: 16px; }
.story-journey .card-phone .scan-hint { font-size: 8px; margin-top: 24px; padding: 4px 8px; }
.story-journey .card-phone .scan-controls { bottom: 16px; gap: 20px; }
.story-journey .card-phone .scan-ctrl { font-size: 7px; }
.story-journey .card-phone .shutter { width: 36px; height: 36px; }
.journey-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 480px;
  margin: 8px auto 0;
  padding: 0 24px;
}
.journey-carousel-dots button {
  min-width: 44px;
  height: 36px;
  padding: 0 10px;
  border-radius: 18px;
  border: 1px solid rgba(155,111,212,.22);
  background: rgba(255,255,255,.85);
  color: var(--gray);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: .25s;
}
.journey-carousel-dots button.act {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(155,111,212,.35);
}
.story-journey .chapter-connector {
  display: none;
}
.story-title.compact {
  font-size: 28px;
  margin-bottom: 10px;
}
.section.chapter.compact-chapter {
  padding: 8px 0;
}
.compact-chapter .section-inner {
  gap: 36px;
  padding: 36px 32px;
}
.compact-chapter.finale {
  padding-bottom: 24px;
}
.visual-col.visual-only {
  grid-template-columns: 1fr;
  justify-items: center;
}
.phone, .phone-shot {
  width: 220px;
}
.phone-shot { width: 220px; }
.chapter-connector {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.connector-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-light);
  box-shadow: 0 0 0 2px rgba(155,111,212,.25), 0 2px 8px rgba(155,111,212,.3);
  transition: transform .4s, box-shadow .4s;
}
.section.chapter.show .connector-dot {
  transform: scale(1.2);
  box-shadow: 0 0 0 4px rgba(155,111,212,.2), 0 0 16px rgba(155,111,212,.4);
}
.chapter-transition {
  margin-top: 20px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--accent-deep);
  background: rgba(155,111,212,.08);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
.section.chapter.finale {
  padding-bottom: 60px;
}
.section.chapter.finale .connector-dot {
  background: linear-gradient(135deg, var(--accent), #e879f9);
  width: 14px;
  height: 14px;
}

/* ===== 视觉列：手机 + 功能列表 ===== */
.visual-col {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
}
.phone {
  width: 260px;
  border-radius: 32px;
  background: #111;
  box-shadow: var(--shadow), 0 0 0 4px #333, 0 0 0 6px #111;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

/* 真实截图（已含手机外框） */
.phone-shot {
  width: 260px;
  flex-shrink: 0;
}
.phone-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.phone::before {
  content: ''; position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%); width: 80px; height: 8px;
  background: #222; border-radius: 8px; z-index: 10;
}
.phone-screen {
  margin-top: 28px;
  width: 100%;
  aspect-ratio: 9/19.5;
  overflow: hidden;
}

/* 功能介绍列表 */
.feature-list {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  text-align: left;
}
.story-journey .feature-list li {
  padding: 10px 12px;
  font-size: 12px;
}
.story-journey .feature-list b {
  font-size: 13px;
}
.story-journey .feature-list span {
  font-size: 12px;
}
.feature-list li {
  background: rgba(255,255,255,.85);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 2px 12px rgba(107,79,160,.08);
  border-left: 4px solid var(--accent);
}
.feature-list b {
  display: block; font-size: 14px; color: var(--accent-deep);
  margin-bottom: 4px;
}
.feature-list span { font-size: 13px; color: var(--gray); line-height: 1.5; }

.tier-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tier-tag {
  font-size: 12px; padding: 6px 14px; border-radius: 20px;
  background: rgba(255,255,255,.7); font-weight: 600; color: var(--gray);
}
.tier-tag.hot { background: var(--accent); color: #fff; }
.tier-tag.pro { background: var(--accent-deep); color: #fff; }

.market-stat {
  margin-top: 16px; padding: 14px 18px;
  background: rgba(255,255,255,.75); border-radius: 12px;
  font-size: 14px;
}
.market-stat em { color: var(--accent); font-style: normal; font-weight: 800; }

.service-mini { list-style: none; margin-top: 8px; }
.service-mini li {
  font-size: 15px; padding: 10px 0;
  border-bottom: 1px dashed rgba(155,111,212,.2);
}
.service-mini b { color: var(--accent-deep); margin-right: 8px; }

/* ===== Dots ===== */
.dots {
  position: fixed; right: 20px; top: 50%;
  transform: translateY(-50%); z-index: 99;
  display: flex; flex-direction: column; gap: 10px;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); border: none; opacity: .3;
  box-shadow: 0 2px 6px rgba(107,79,160,.2);
  cursor: pointer; padding: 0; transition: .25s;
}
.dot.act { opacity: 1; transform: scale(1.3); }

/* ===== Footer ===== */
.footer {
  background: var(--footer-bg);
  color: rgba(255,255,255,.75);
  padding: 0;
  font-size: 13px;
}
.page-block.compact-block {
  padding: 36px 0;
}
.download-triple.compact .download-card {
  padding: 20px 16px;
}
.download-triple.compact h3 {
  font-size: 15px;
  margin-bottom: 12px;
}
.support-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--gray);
}
.support-inline a { color: var(--accent); text-decoration: none; }
.link-feedback {
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
.page-block .faq-item { margin-top: 16px; }

/* ===== Footer 统一面板 ===== */
.finale-footer {
  background: linear-gradient(180deg, var(--footer-bg) 0%, #352650 100%);
  padding-top: 0;
  margin-top: -108px;
  position: relative;
  z-index: 1;
}
.footer-unified {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 40px 20px;
}
.footer-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.epilogue-text {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255,255,255,.78);
  letter-spacing: .04em;
  font-style: italic;
  line-height: 1.6;
}
.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.65);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  flex-shrink: 0;
}
.back-to-top:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
.footer-legal-section {
  padding: 14px 0 4px;
  background: none;
  border: none;
}
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
}
.footer-legal-links--inline {
  justify-content: flex-start;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-legal-link {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.72);
  cursor: pointer;
  transition: color .2s;
}
.footer-legal-link:hover {
  color: #fff;
}
.footer-legal-sep {
  color: rgba(255,255,255,.28);
  font-size: 12px;
  line-height: 1;
  user-select: none;
}
.footer-legal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.footer-legal-heading {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: .04em;
}
.footer-legal-lead {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin: 0;
}
.footer-legal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.legal-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: background .2s, border-color .2s;
  font-family: inherit;
}
.legal-card:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(196,181,253,.35);
  transform: none;
  box-shadow: none;
}
.legal-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(155,111,212,.28);
  color: #fff;
  flex-shrink: 0;
}
.legal-card-icon svg {
  width: 17px;
  height: 17px;
}
.legal-card-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.legal-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.legal-card-desc {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,.55);
}
.footer-downloads {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 999px;
  background: #1a2340;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 4px 16px rgba(26,35,64,.25);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26,35,64,.35);
  background: #243052;
}
.btn-download-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.btn-outline {
  background: transparent !important;
  color: var(--accent-deep) !important;
  border: 2px solid var(--accent) !important;
  box-shadow: none !important;
  cursor: pointer;
  font-family: inherit;
}
.btn-outline:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

/* ===== 会员 / 下载 / 支持页 ===== */
.page-block {
  background: var(--bg-light);
  padding: 40px 0;
  scroll-margin-top: var(--header-h);
  position: relative;
  overflow: hidden;
}
.page-block:nth-child(even) { background: var(--bg-soft); }
.page-block .section-inner.wide {
  max-width: var(--max-w);
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 28px 32px;
  text-align: left;
}
.page-block .section-inner {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.page-block.show .section-inner { opacity: 1; transform: none; }

/* ===== 应用价值 · 人群 · 场景 ===== */
.audience-wrap {
  padding: 36px 20px 32px;
  background: transparent;
}
.audience-shell {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.audience-section {
  scroll-margin-top: var(--header-h);
}
.audience-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 24px 40px;
  align-items: end;
  text-align: left;
  margin-bottom: 24px;
  padding: 28px 32px 28px 36px;
  background: linear-gradient(120deg, rgba(255,255,255,.92) 0%, rgba(248,245,252,.78) 100%);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(155,111,212,.14);
  border-radius: 20px;
  box-shadow: 0 10px 36px rgba(107,79,160,.07);
  position: relative;
  overflow: hidden;
}
.audience-hero::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent-glow), var(--accent-deep));
}
.audience-hero::after {
  content: 'SCENE';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 900;
  letter-spacing: .12em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(155,111,212,.08);
  text-stroke: 1px rgba(155,111,212,.08);
  pointer-events: none;
  user-select: none;
}
.audience-hero-title {
  position: relative;
  z-index: 1;
}
.audience-hero-title .zone-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.08;
  letter-spacing: .02em;
}
.audience-hero-line {
  display: block;
  font-weight: 900;
  color: var(--dark);
}
.audience-hero-line--accent {
  padding-left: 32px;
  color: var(--accent-deep);
  position: relative;
}
.audience-hero-line--accent::before {
  content: '·';
  position: absolute;
  left: 10px;
  top: -.02em;
  color: var(--accent);
  font-weight: 400;
}
.audience-hero-aside {
  position: relative;
  z-index: 1;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(155,111,212,.14);
}
.audience-hero-aside .zone-desc {
  max-width: none;
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray);
}
.audience-hero .chapter-tag { margin-bottom: 10px; }
.audience-panel {
  margin-bottom: 20px;
  padding: 28px 32px 32px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(155,111,212,.14);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(107,79,160,.06);
}
.audience-panel-last { margin-bottom: 0; }
.panel-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(155,111,212,.1);
}
.panel-label {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(155,111,212,.35);
}
.panel-head-text h3 {
  font-size: 20px;
  font-weight: 900;
  color: var(--dark);
  margin: 0 0 4px;
  line-height: 1.3;
}
.panel-head-text p {
  font-size: 14px;
  color: var(--gray);
  margin: 0;
  line-height: 1.55;
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.value-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 18px;
  background: linear-gradient(145deg, #fff 0%, rgba(248,245,252,.9) 100%);
  border: 1px solid rgba(155,111,212,.12);
  border-radius: 16px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.value-card:hover {
  border-color: rgba(155,111,212,.28);
  box-shadow: 0 8px 24px rgba(107,79,160,.1);
  transform: translateY(-2px);
}
.value-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(155,111,212,.18), rgba(196,181,253,.28));
  border: 1px solid rgba(155,111,212,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}
.value-card-body { min-width: 0; }
.value-card-body h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 6px;
  line-height: 1.3;
}
.value-card-body p {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.55;
  margin: 0;
}
.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.audience-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.4;
  background: rgba(250,247,252,.9);
  border: 1px solid rgba(155,111,212,.1);
  border-radius: 12px;
  transition: border-color .2s, background .2s;
}
.audience-item:hover {
  background: #fff;
  border-color: rgba(155,111,212,.25);
}
.audience-item-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 0 0 3px rgba(155,111,212,.15);
}
.scene-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.scene-card {
  padding: 20px 20px 18px;
  background: linear-gradient(160deg, #fff 0%, rgba(248,245,252,.85) 100%);
  border: 1px solid rgba(155,111,212,.12);
  border-radius: 16px;
  border-left: 4px solid var(--accent);
  box-shadow: 0 2px 12px rgba(107,79,160,.04);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.scene-card:hover {
  border-left-color: var(--accent-deep);
  box-shadow: 0 10px 28px rgba(107,79,160,.1);
  transform: translateY(-2px);
}
.scene-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.scene-icon-wrap {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(155,111,212,.15), rgba(255,255,255,.95));
  border: 1px solid rgba(155,111,212,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
.scene-card h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.35;
  margin: 0;
}
.scene-card p {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.65;
  margin: 0;
  padding-left: 56px;
}

/* ===== 收尾区：会员 + 下载 + 支持 统一面板 ===== */
.closing-wrap {
  padding: 32px 20px 24px;
  background: transparent;
  position: relative;
  z-index: 2;
}
.closing-shell {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 32px 36px 20px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(155,111,212,.16);
  border-radius: 24px;
  box-shadow: 0 16px 48px rgba(107,79,160,.1);
}
.closing-part {
  padding: 0 0 24px;
  margin: 0;
  scroll-margin-top: var(--header-h);
  border-bottom: 1px solid rgba(155,111,212,.1);
}
.closing-part + .closing-part { padding-top: 24px; }
.closing-part-last {
  border-bottom: none;
  padding-bottom: 8px;
}
.zone-head { margin-bottom: 16px; }
.zone-head-center { text-align: center; }
.zone-head .chapter-tag { margin-bottom: 8px; }
.zone-title {
  font-size: 28px;
  font-weight: 900;
  color: var(--dark);
  line-height: 1.25;
  margin: 0 0 6px;
}
.zone-desc {
  font-size: 15px;
  color: var(--gray);
  margin: 0;
  line-height: 1.55;
}
.zone-head-center .zone-desc { max-width: 560px; margin: 0 auto; }
.zone-head-center .tier-pills { justify-content: center; }
.zone-subtitle {
  font-size: 15px;
  font-weight: 800;
  color: var(--accent-deep);
  margin: 0 0 10px;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.hub-card {
  background: #fff;
  border: 1px solid rgba(155,111,212,.12);
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 2px 12px rgba(107,79,160,.05);
}
.zone-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(155,111,212,.1);
}
.zone-benefits {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(155,111,212,.1);
}
.zone-benefits .benefits-grid {
  grid-template-columns: repeat(4, 1fr);
}
.tier-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 14px;
}
.tier-pills span {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-deep);
  background: rgba(155,111,212,.1);
  border: 1px solid rgba(155,111,212,.18);
}
.tier-pills .hot {
  background: linear-gradient(135deg, rgba(155,111,212,.2), rgba(196,181,253,.35));
  border-color: rgba(155,111,212,.35);
}
.tier-pills .pro {
  background: linear-gradient(135deg, #6d4c9e, #9b6fd4);
  color: #fff;
  border-color: transparent;
}

.pricing-card {
  position: relative;
  text-align: left;
  transition: border-color .2s, box-shadow .2s;
}
.pricing-card:hover {
  border-color: rgba(155,111,212,.28);
  box-shadow: 0 6px 20px rgba(107,79,160,.1);
}
.pricing-card.featured {
  border-color: var(--accent);
  background: linear-gradient(165deg, #fff 0%, rgba(243,236,255,.6) 100%);
  box-shadow: 0 8px 28px rgba(155,111,212,.12);
}
.pricing-tier {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--accent);
  opacity: .7;
  margin-bottom: 6px;
}
.pricing-badge {
  position: absolute;
  top: -9px;
  right: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.pricing-card h3 { font-size: 18px; color: var(--dark); margin-bottom: 4px; }
.pricing-price {
  font-size: 14px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 12px;
}
.pricing-features { list-style: none; }
.pricing-features li {
  font-size: 13px;
  color: var(--gray);
  padding: 7px 0;
  border-bottom: 1px dashed rgba(155,111,212,.12);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features li::before { content: '✓ '; color: var(--accent); font-weight: 700; }

.benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.benefit-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 12px;
  background: #fff;
  border: 1px solid rgba(155,111,212,.14);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(107,79,160,.08);
}
.benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border: none;
  color: #fff;
  box-shadow: 0 2px 8px rgba(107,79,160,.22);
  flex-shrink: 0;
}
.benefit-icon svg {
  width: 20px;
  height: 20px;
}
.benefit-card h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 4px;
}
.benefit-card p {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.55;
  margin: 0;
}

.faq-item {
  background: rgba(250,247,252,.85);
  border-radius: 10px;
  margin-bottom: 6px;
  border: 1px solid rgba(155,111,212,.1);
  overflow: hidden;
}
.faq-item:last-child { margin-bottom: 0; }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dark);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  color: var(--accent);
  font-weight: 400;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p {
  padding: 0 12px 12px;
  font-size: 11px;
  color: var(--gray);
  line-height: 1.6;
}

.download-hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.download-hub-card h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
}
.hub-card-desc {
  font-size: 13px;
  color: var(--gray);
  margin: 0;
}
.download-hub-card .download-option-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}
.support-faq-standalone {
  width: 100%;
}
#section-support.closing-part-last {
  padding-top: 8px;
  padding-bottom: 16px;
}
#section-support .faq-section-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent-deep);
  margin: 0 0 16px;
  line-height: 1.3;
  letter-spacing: .02em;
}
#section-support .support-faq.support-faq-standalone {
  padding: 22px 24px 24px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(155,111,212,.14);
  box-shadow: 0 4px 20px rgba(107,79,160,.06);
}
#section-support .faq-item {
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(250,247,252,.95);
}
#section-support .faq-item summary {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
#section-support .faq-item summary::after {
  font-size: 16px;
}
#section-support .faq-item p {
  padding: 0 16px 14px;
  font-size: 13px;
  line-height: 1.65;
}
.support-split { align-items: stretch; }
.support-legal-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  background: rgba(250,247,252,.85);
  border: 1px solid rgba(155,111,212,.1);
  border-radius: 14px;
  padding: 14px 16px;
  box-sizing: border-box;
}
.support-legal-lead {
  font-size: 12px;
  color: var(--gray);
  margin: -4px 0 14px;
  line-height: 1.5;
}
.support-legal-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.support-legal-grid .legal-card {
  flex: 1;
  align-items: center;
  min-height: 0;
}
.legal-card-light {
  background: var(--bg-soft);
  border: 1px solid rgba(155,111,212,.14);
  color: var(--dark);
  box-shadow: 0 2px 10px rgba(107,79,160,.05);
}
.legal-card-light:hover {
  background: rgba(243,236,255,.95);
  border-color: rgba(155,111,212,.3);
  box-shadow: 0 6px 20px rgba(107,79,160,.1);
}
.legal-card-light .legal-card-icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border: none;
  color: #fff;
}
.legal-card-light .legal-card-title {
  color: var(--dark);
}
.legal-card-light .legal-card-desc {
  color: var(--gray);
}
.support-faq {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  background: rgba(250,247,252,.85);
  border: 1px solid rgba(155,111,212,.1);
  border-radius: 14px;
  padding: 12px 14px 16px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.support-faq .faq-item:last-child {
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}
.footer-contact-section {
  padding: 18px 0 14px;
  border-bottom: none;
}
.footer-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.35fr) minmax(0, 0.95fr);
  gap: 16px 24px;
}
.footer-contact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-contact-item .footer-icp-link {
  font-size: 13px;
  color: rgba(255,255,255,.82);
}
.footer-contact-item .footer-icp-link:hover { color: #fff; }
.footer-contact-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
}
.footer-contact-item a,
.footer-contact-item span {
  font-size: 13px;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  line-height: 1.45;
}
.footer-contact-item a:hover { color: #fff; }
.footer-feedback-link {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  transition: background .2s, border-color .2s;
}
.footer-feedback-link:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
.footer-icp-link {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  transition: color .2s;
}
.footer-icp-link:hover { color: rgba(255,255,255,.7); }
.download-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.download-option-icon svg {
  width: 22px;
  height: 22px;
}
.download-option-icon.ios {
  background: linear-gradient(145deg, #4a4a4a, #1a1a1a);
}
.download-option-icon.android {
  background: linear-gradient(145deg, #4cd964, #2aab5a);
}
.download-option-text {
  flex: 1;
  min-width: 0;
}
.download-option-text h3 {
  font-size: 14px;
  margin: 0 0 2px;
  color: var(--dark);
  font-weight: 800;
  line-height: 1.2;
}
.download-option-text p {
  font-size: 11px;
  color: var(--gray);
  margin: 0;
  line-height: 1.3;
}
.btn-download-sm {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
}
.download-qr-frame {
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(155,111,212,.08), rgba(255,255,255,.95));
  border: 2px dashed rgba(155,111,212,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.download-qr-frame.sm,
.download-qr-frame.md {
  width: 52px;
  height: 52px;
}
.download-qr-frame::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 4px;
  background:
    radial-gradient(circle at 25% 25%, rgba(155,111,212,.3) 1.5px, transparent 1.5px),
    radial-gradient(circle at 75% 75%, rgba(155,111,212,.3) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  opacity: .5;
}
.download-qr-label {
  position: relative;
  z-index: 1;
  font-size: 9px;
  font-weight: 700;
  color: var(--accent-deep);
}
.overlay-qr {
  width: 120px; height: 120px; margin: 0 auto 12px;
  background:
    linear-gradient(135deg, rgba(155,111,212,.08), rgba(255,255,255,.95));
  border: 2px dashed rgba(155,111,212,.35);
  border-radius: 12px;
}

/* ===== 弹层 ===== */
.overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(45,35,64,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.overlay[hidden] { display: none; }
.overlay-panel {
  background: #fff;
  border-radius: 20px;
  padding: 32px 28px;
  max-width: 400px; width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.overlay-panel h3 { font-size: 18px; color: var(--dark); margin-bottom: 12px; }
.overlay-panel p { font-size: 14px; color: var(--gray); line-height: 1.7; margin-bottom: 8px; }
.overlay-close {
  position: absolute; top: 12px; right: 16px;
  width: 32px; height: 32px;
  border: none; background: none;
  font-size: 24px; color: var(--gray);
  cursor: pointer; line-height: 1;
}
.overlay-hint { font-size: 12px !important; color: var(--accent) !important; }
.overlay-legal { max-width: 640px; max-height: 85vh; text-align: left; overflow: hidden; display: flex; flex-direction: column; }
.legal-body {
  overflow-y: auto;
  font-size: 14px; color: var(--gray);
  line-height: 1.85; padding-right: 8px;
}
.legal-body h4 { color: var(--dark); margin: 18px 0 8px; font-size: 15px; }

/* ===== 手机 UI（保持不变，用固定 px 替代 vw）===== */
.ui-home {
  background: linear-gradient(180deg, #f5f9ff, #e8f2ff);
  height: 100%; padding: 20px 16px;
}
.ui-home .greeting { font-size: 11px; color: #999; }
.ui-home .brand { font-size: 18px; font-weight: 800; color: #1a2a4a; margin: 4px 0 20px; }
.scan-circle {
  width: 110px; height: 110px; margin: 12px auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #5ca0ff);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(43,124,255,.35);
  position: relative;
}
.scan-circle::before, .scan-circle::after {
  content: ''; position: absolute; border-radius: 50%;
  border: 1px dashed rgba(43,124,255,.3);
}
.scan-circle::before { width: 130px; height: 130px; }
.scan-circle::after { width: 150px; height: 150px; border-style: dotted; opacity: .5; }
.scan-icon {
  width: 28px; height: 28px; border: 2px solid #fff;
  position: relative; margin-bottom: 6px;
}
.scan-icon::before {
  content: ''; position: absolute; top: 50%; left: 10%; right: 10%;
  height: 2px; background: #fff; transform: translateY(-50%);
}
.scan-circle span { color: #fff; font-size: 12px; font-weight: 600; z-index: 1; }
.ui-home .hint { text-align: center; color: #aaa; font-size: 11px; margin-top: 16px; }
.stat-row { display: flex; gap: 10px; margin-top: 20px; }
.stat-card {
  flex: 1; background: #fff; border-radius: 10px; padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.stat-card .num { font-size: 18px; font-weight: 800; color: #1a2a4a; }
.stat-card .lbl { font-size: 10px; color: #999; margin-top: 2px; }

.ui-scan {
  background: #000; height: 100%; position: relative;
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
}
.scan-back {
  position: absolute; top: 36px; left: 14px; z-index: 5;
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.8); font-size: 18px; line-height: 1;
  cursor: default;
}
.ui-scan .scan-hint {
  margin-top: 36px; padding: 6px 14px; border-radius: 20px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-size: 10px;
  display: flex; align-items: center; gap: 6px;
  z-index: 2;
}
.ui-scan .scan-hint .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #00e5ff; box-shadow: 0 0 8px #00e5ff;
  animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.scan-area {
  position: relative;
  margin-top: 28px;
  width: 130px; height: 170px;
  flex-shrink: 0;
}
.scan-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 2px dashed #00e5ff;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,229,255,.15);
}
.scan-cross {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  color: #00e5ff; font-size: 18px; font-weight: 100;
  line-height: 1; z-index: 2;
  text-shadow: 0 0 6px rgba(0,229,255,.8);
}
/* 扫描光线：从上扫到下 */
.scan-line {
  position: absolute; left: 8%; right: 8%;
  height: 3px; z-index: 3;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,229,255,.4) 20%,
    #00e5ff 50%,
    rgba(0,229,255,.4) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 6px #00e5ff,
    0 0 14px rgba(0,229,255,.7),
    0 0 28px rgba(0,229,255,.35);
  border-radius: 2px;
  animation: scanDown 2.8s ease-in-out infinite;
}
.scan-line::after {
  content: '';
  position: absolute; left: 0; right: 0; top: -20px; height: 40px;
  background: linear-gradient(180deg,
    transparent,
    rgba(0,229,255,.12) 50%,
    transparent
  );
  pointer-events: none;
}
@keyframes scanDown {
  0%   { top: 6%;  opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 94%; opacity: 0; }
}
.scan-brackets {
  position: absolute; inset: -8px;
  pointer-events: none; z-index: 4;
}
.scan-brackets span {
  position: absolute; width: 18px; height: 18px;
  border-color: #00e5ff; border-style: solid;
}
.scan-brackets span:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; }
.scan-brackets span:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; }
.scan-brackets span:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.scan-brackets span:nth-child(4) { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.scan-controls {
  position: absolute; bottom: 28px; width: 100%;
  display: flex; align-items: flex-end; justify-content: center; gap: 36px;
}
.scan-ctrl {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff; font-size: 9px; opacity: .85;
}
.scan-ctrl-icon {
  display: block; width: 22px; height: 22px;
  border-radius: 4px; opacity: .9;
}
.album-icon {
  border: 1.5px solid rgba(255,255,255,.7);
  position: relative;
}
.album-icon::after {
  content: ''; position: absolute; bottom: 3px; left: 3px; right: 3px; height: 8px;
  border: 1px solid rgba(255,255,255,.5); border-radius: 1px;
}
.flip-icon {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-radius: 6px;
  position: relative;
}
.flip-icon::before {
  content: '⟳'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px;
}
.shutter {
  width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}
.shutter::after {
  content: ''; width: 40px; height: 40px;
  border-radius: 50%; background: #fff;
}

.ui-loading {
  background: linear-gradient(180deg, #0a1628, #0d1f3c);
  height: 100%; padding: 16px;
}
.ui-loading .tabs {
  display: flex; background: rgba(255,255,255,.05);
  border-radius: 10px; overflow: hidden; margin-bottom: 24px;
}
.ui-loading .tab {
  flex: 1; text-align: center; padding: 10px;
  font-size: 11px; color: #666;
}
.ui-loading .tab.active {
  color: var(--cyan); border-bottom: 2px solid var(--cyan);
}
.loading-center {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 55%; gap: 16px;
}
.loading-rings { width: 64px; height: 64px; position: relative; }
.loading-rings .ring {
  position: absolute; border-radius: 50%;
  border: 2px solid transparent;
  animation: spin 2s linear infinite;
}
.loading-rings .ring:nth-child(1) { inset: 0; border-top-color: var(--cyan); animation-duration: 1.5s; }
.loading-rings .ring:nth-child(2) { inset: 8px; border-right-color: var(--blue); animation-duration: 2s; animation-direction: reverse; }
.loading-rings .ring:nth-child(3) { inset: 16px; border-bottom-color: rgba(0,229,255,.4); animation-duration: 2.5s; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-center h3 { color: var(--cyan); font-size: 13px; text-align: center; }
.loading-center p { color: #666; font-size: 10px; text-align: center; }

.ui-report {
  background: #0a1628; height: 100%; padding: 16px; overflow: hidden;
}
.ui-report .report-header {
  color: var(--cyan); font-size: 13px; font-weight: 700;
  text-align: center; margin-bottom: 12px;
}
.ui-report .face-img {
  width: 55%; margin: 0 auto 10px; border-radius: 10px;
  background: linear-gradient(135deg, #1a3050, #2a4a70);
  aspect-ratio: 3/4;
}
.report-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.report-tabs .rtab {
  flex: 1; text-align: center; padding: 6px 2px; font-size: 8px;
  border-radius: 8px; color: #888; background: rgba(255,255,255,.05);
}
.report-tabs .rtab.active {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: #0a1628; font-weight: 700;
}
.report-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(0,229,255,.2);
  border-radius: 10px; padding: 10px;
}
.report-card h4 {
  color: var(--cyan); font-size: 11px; margin-bottom: 8px;
  padding-left: 6px; border-left: 3px solid var(--cyan);
}
.report-row {
  display: flex; justify-content: space-between;
  padding: 5px 0; font-size: 9px; color: #aaa;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.report-row .val { color: #fff; }
.report-row .val.warn { color: #ff6b8a; }

.ui-logs { background: #f0f4f8; height: 100%; padding: 16px; }
.ui-logs .logs-title {
  text-align: center; font-size: 15px; font-weight: 700;
  color: #1a2a4a; margin-bottom: 14px;
}
.log-item {
  background: #fff; border-radius: 10px; padding: 10px;
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.log-thumb {
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, #ffc8b0, #e8a090);
}
.log-info { flex: 1; min-width: 0; }
.log-info .time { font-size: 10px; color: #333; font-weight: 600; }
.log-tags { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.log-tag { font-size: 8px; padding: 2px 6px; border-radius: 6px; }
.log-tag.pending { background: #fff8e0; color: #e6a800; }
.log-tag.done { background: #e0f8ee; color: #1a9a5c; }
.log-qr {
  background: var(--blue); color: #fff; border-radius: 8px;
  padding: 8px; text-align: center; font-size: 8px; flex-shrink: 0;
}

.ui-qr {
  background: rgba(0,0,0,.5); height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.qr-modal {
  background: #fff; border-radius: 16px; padding: 24px;
  text-align: center; width: 78%;
}
.qr-modal h3 { font-size: 16px; color: #1a2a4a; margin-bottom: 6px; }
.qr-modal p { font-size: 11px; color: #999; margin-bottom: 16px; }
.qr-code {
  width: 100px; height: 100px; margin: 0 auto;
  background:
    linear-gradient(45deg, #000 25%, transparent 25%),
    linear-gradient(-45deg, #000 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #000 75%),
    linear-gradient(-45deg, transparent 75%, #000 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  border: 6px solid #fff; outline: 1px solid #eee;
}

/* Hero 区导航白色文字 */
body:not(.scrolled) .header .logo-text { color: #fff; }
body:not(.scrolled) .header .logo-text span { color: var(--accent-light); }
body:not(.scrolled) .header .nav-links a { color: rgba(255,255,255,.85); }
body:not(.scrolled) .header .nav-links a:hover,
body:not(.scrolled) .header .nav-links a.active {
  background: rgba(255,255,255,.2); color: #fff;
}

/* 滚动后恢复默认导航色 */
body.scrolled .header .logo-text { color: var(--dark); }
body.scrolled .header .logo-text span { color: var(--accent); }
body.scrolled .header .nav-links a { color: var(--gray); }
body.scrolled .header .nav-links a:hover,
body.scrolled .header .nav-links a.active {
  background: var(--accent); color: #fff;
}

@media (max-width: 900px) {
  :root { --header-h: 56px; --section-pad: 32px 16px; }
  .compact-chapter .section-inner { padding: 28px 16px; gap: 24px; }
  .story-title.compact { font-size: 22px; }
  .hero-content {
    max-width: 100%;
    padding: 0 24px 72px;
    text-align: center;
  }
  .hero h1 { font-size: clamp(28px, 8vw, 34px); }
  .header .bar { padding: 0 16px; }
  .header-logo img { height: 44px; }
  .logo-text { font-size: 18px; }
  .nav-links a { font-size: 12px; padding: 6px 12px; }
  .hero-sub { font-size: 16px; }
  .hero-desc { font-size: 14px; }
  .hero-scroll-cta { bottom: 18px; }
  .btn-scroll-down { width: 48px; height: 48px; }
  .hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(45,35,64,.15) 0%,
        rgba(45,35,64,.42) 48%,
        rgba(237,230,245,.18) 68%,
        rgba(237,230,245,.38) 80%,
        rgba(235,228,244,.58) 90%,
        var(--hero-fade) 100%
      );
  }

  .section-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .visual-col {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .story-journey {
    --journey-phone-w: 156px;
    --journey-phone-h: 306px;
    padding: 4px 0 24px;
  }
  .journey-carousel-shell {
    padding: 0 8px;
  }
  .journey-carousel-shell::before,
  .journey-carousel-shell::after {
    width: 40px;
  }
  .journey-carousel-arrow {
    width: 48px;
    height: 48px;
  }
  .journey-carousel-arrow svg {
    width: 22px;
    height: 22px;
  }
  .journey-carousel-arrow.prev { left: 0; }
  .journey-carousel-arrow.next { right: 0; }
  .journey-carousel-track {
    padding: 0 max(8px, calc((100vw - min(360px, 96vw)) / 2));
    gap: 16px;
  }
  .story-journey .feature-card {
    flex-basis: min(360px, 96vw);
  }
  .story-journey .feature-card .section-inner.card-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px 16px;
    min-height: 0;
    text-align: center;
  }
  .story-journey .card-content .chapter-tag {
    align-self: center;
  }
  .story-journey .card-content .feature-list {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .story-journey .card-content .chapter-transition {
    text-align: left;
  }
  .journey-carousel-dots {
    max-width: 100%;
    gap: 8px;
  }
  .journey-carousel-dots button {
    min-width: 38px;
    height: 32px;
    font-size: 11px;
  }
  .feature-list {
    padding-top: 0;
    max-width: 100%;
  }
  .feature.reverse .section-inner { direction: ltr; }
  .story-title { font-size: 28px; }
  .hero h1 { font-size: 36px; }
  .hero-sub { font-size: 18px; }
  .pain-list { text-align: left; }
  .phone-shot { width: 220px; }
  .phone { width: 220px; }

  .story-progress { display: none; }
  .scroll-hint { display: none; }
  .story-journey::before,
  .chapter-connector { display: none; }
  .promo-spotlight-inner { padding: 0 16px; }
  .promo-hero-panel,
  .promo-editorial { min-height: 0; }
  .promo-editorial-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 20px 24px;
  }
  .promo-editorial-copy {
    order: -1;
    padding-left: 16px;
    border-left-width: 2px;
  }
  .promo-editorial-steps { order: 1; }
  .promo-headline-line { font-size: 22px; letter-spacing: .04em; }
  .promo-headline-accent { font-size: 26px; }
  .promo-lead { font-size: 14px; margin-bottom: 20px; }
  .promo-deco-word {
    left: -8%;
    right: auto;
    font-size: 88px;
    opacity: .5;
  }
  .promo-deco-ring {
    width: 160px;
    height: 160px;
    left: -4%;
    right: auto;
    top: 8%;
    opacity: .6;
  }
  .promo-editorial-steps {
    min-height: 0;
    gap: 10px;
    padding-top: 4px;
  }
  .promo-step-card {
    width: 100%;
    margin: 0 !important;
    align-self: stretch !important;
  }
  .promo-step-card--2,
  .promo-step-card--3 { margin-top: 0 !important; }
  .promo-step-num { font-size: 26px; }
  .promo-step-title { font-size: 18px; }
  .promo-contrast {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .promo-vs-mid {
    flex-direction: row;
    padding: 4px 0;
  }
  .promo-vs-icon { width: 36px; height: 36px; font-size: 16px; }
  .chapter-transition { text-align: left; }
  .footer-unified { padding: 0 16px 16px; }
  .footer-top-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 16px 0 12px;
  }
  .footer-top-actions {
    justify-content: center;
    flex-wrap: wrap;
  }
  .epilogue-text { font-size: 14px; }
  .footer-contact-grid { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .footer-contact-addr,
  .footer-contact-icp { grid-column: 1 / -1; }
  .footer-legal-links--inline {
    justify-content: center;
    margin-top: 14px;
    padding-top: 12px;
  }
  .hero-value { font-size: 15px; }
  .hero-downloads { justify-content: center; }
  .hub-grid,
  .pricing-grid,
  .download-grid { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr 1fr; }
  .scene-grid { grid-template-columns: 1fr; }
  .scene-card p { padding-left: 0; margin-top: 4px; }
  .audience-wrap { padding: 20px 16px 24px; }
  .audience-hero {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px 20px 20px 24px;
    border-radius: 16px;
  }
  .audience-hero::after { display: none; }
  .audience-hero-title .zone-title { font-size: 28px; }
  .audience-hero-line--accent { padding-left: 28px; }
  .audience-hero-aside { padding-bottom: 0; border-bottom: none; }
  .audience-hero-aside .zone-desc { font-size: 14px; line-height: 1.7; }
  .audience-panel { padding: 20px 16px 24px; border-radius: 16px; }
  .zone-split,
  .support-split { grid-template-columns: 1fr; }
  .zone-benefits .benefits-grid { grid-template-columns: 1fr 1fr; }
  .closing-wrap { padding: 20px 16px 12px; }
  .closing-shell { padding: 20px 16px 8px; border-radius: 20px; }
  #section-support .faq-section-title { font-size: 18px; margin-bottom: 14px; }
  #section-support .support-faq.support-faq-standalone { padding: 18px 16px 20px; }
  #section-support .faq-item summary { padding: 12px 14px; font-size: 13px; }
  #section-support .faq-item p { padding: 0 14px 12px; font-size: 12px; }
  .zone-title { font-size: 22px; }
  .btn-download-sm { padding: 7px 10px; font-size: 11px; }
  .dots { right: 12px; }
  .dot { width: 8px; height: 8px; }
  .page-compact .section-inner { padding: 28px 16px; gap: 24px; }
  .page-compact .hero-content {
    padding: 0 24px 64px;
    text-align: center;
  }
  .page-compact .hero h1 { font-size: clamp(28px, 8vw, 32px); }
}
.page-compact .section.hero { min-height: 88vh; }
.page-compact .hero-content {
  padding: 0 0 64px clamp(40px, 5vw, 80px);
}
.page-compact .hero h1 { font-size: 50px; }
.page-compact .section-inner { padding: 40px 28px; gap: 40px; }
.page-compact .story-title { font-size: 30px; margin-bottom: 12px; }
.page-compact .section.pain { padding: 0 0 36px; }
.page-compact .section.pain .section-inner { padding-top: 32px; }
.page-compact .pain-list li { padding: 10px 0 10px 14px; margin-bottom: 4px; }
.page-compact .wave-divider { height: 40px; }
.page-compact .section.journey-intro { padding: 28px 0 28px; }
.page-compact .promo-editorial-grid { padding: 32px 28px 28px; gap: 24px; }
.page-compact .promo-headline-line { font-size: 28px; }
.page-compact .promo-headline-accent { font-size: 34px; }
.page-compact .story-journey {
  --journey-phone-w: 188px;
  --journey-phone-h: 370px;
  padding: 4px 0 20px;
}
.page-compact .story-journey .card-content .story-title { font-size: 21px; }
.page-compact .story-journey .card-content .feature-list li { padding: 8px 8px; }
.page-compact .journey-carousel-arrow { width: 52px; height: 52px; }
.page-compact .section.chapter { padding: 6px 0; }
.page-compact .section.chapter.finale { padding-bottom: 28px; }
.page-compact .chapter-connector { height: 28px; }
.page-compact .chapter-transition { margin-top: 14px; padding: 8px 12px; font-size: 12px; }
.page-compact .feature-list { gap: 8px; padding-top: 8px; }
.page-compact .feature-list li { padding: 10px 14px; }
.page-compact .visual-col { gap: 16px; }
.page-compact .audience-wrap { padding: 24px 16px 20px; }
.page-compact .audience-hero { padding: 24px 24px 22px 28px; margin-bottom: 16px; gap: 18px; }
.page-compact .audience-panel { padding: 22px 20px 26px; margin-bottom: 14px; }
.page-compact .value-grid { gap: 10px; }
.page-compact .audience-grid { gap: 10px; }
.page-compact .scene-grid { gap: 10px; }
.page-compact .closing-wrap { padding: 20px 16px 12px; }
.page-compact .closing-shell { padding: 24px 28px 8px; }
.page-compact .closing-part { padding-bottom: 18px; }
.page-compact .closing-part + .closing-part { padding-top: 18px; }
.page-compact .closing-part-last { padding-bottom: 8px; }
.page-compact .hub-grid { gap: 10px; }
.page-compact .hub-card { padding: 14px 12px; }
.page-compact .zone-split { margin-top: 14px; padding-top: 14px; gap: 12px; }
.page-compact .zone-title { font-size: 22px; }
.page-compact .footer-unified { padding: 0 20px 14px; }
.page-compact .footer-top-bar { padding: 16px 0 12px; }
.page-compact .epilogue-text { font-size: 14px; }
.page-compact .footer-contact-section { padding: 14px 0 2px; }
.page-compact .story-bridge { margin-top: 20px; }
.page-compact .hero-scroll-cta { bottom: 22px; }