*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

:root {
  --bg: #faf7f2;
  --bg2: #f3ede4;
  --card: #fffefa;
  --text: #2c2018;
  --text2: #766055;
  --text3: #b5a090;
  --accent: #c4714e;
  --accent-soft: #faeee8;
  --sage: #7ba99a;
  --sage-soft: #edf4f2;
  --border: #e4d8c8;
  --sep: #ede3d6;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mw: 1080px;
  --font: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  --display: "Noto Serif SC", "Noto Sans SC", serif;
  /* 接近 iOS / visionOS 卡片：近距接触阴影 + 远距环境阴影 */
  --shadow-card:
    0 1px 2px rgba(44, 32, 24, 0.04),
    0 4px 16px rgba(44, 32, 24, 0.07);
  --shadow-card-hover:
    0 2px 6px rgba(44, 32, 24, 0.06),
    0 14px 36px rgba(44, 32, 24, 0.12);
  --shadow-warm: 0 12px 40px rgba(44, 32, 24, 0.1);
}

html {
  overflow: hidden;
  height: 100%
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow: hidden;
  height: 100%;
  -webkit-font-smoothing: antialiased
}

/* ── 全屏翻页容器（原生滚动，JS 决策翻页；长页面自然延伸） ── */
.pages-container {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scrollbar-width: none
}

.pages-container::-webkit-scrollbar {
  display: none
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start
}

.page>section {
  flex: 1;
  display: flex;
  flex-direction: column
}

.sec-in,
.show-in {
  width: 100%;
  margin: auto 0
}

/* 每页背景色匹配原始 section 背景 */
.page:nth-child(1) {
  background: var(--bg)
}

.page:nth-child(2) {
  background: var(--bg2)
}

.page:nth-child(3) {
  background: var(--bg)
}

.page:nth-child(4) {
  background: var(--bg)
}

.page:nth-child(5) {
  background: var(--bg2)
}

.page:nth-child(6) {
  background: var(--bg)
}

.page:nth-child(7) {
  background: var(--bg2)
}

.page:nth-child(8) {
  background: var(--bg)
}

/* 原 section 的背景色去掉，由 page 接管 */
.sec.about {
  background: transparent
}

.show-alt {
  background: transparent
}

/* ── 页面指示器 ── */
.page-indicator {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.pi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text3);
  opacity: 0.55;
  transition: opacity 0.3s, background 0.3s, transform 0.3s;
  cursor: pointer
}

.pi-dot.active {
  background: var(--accent);
  opacity: 1;
  transform: scale(1.35)
}

a {
  color: inherit;
  text-decoration: none
}

/* ── Nav ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 40px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 254, 250, 0.72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease)
}

.nav.is-scrolled {
  background: rgba(255, 254, 250, 0.92);
  border-bottom-color: rgba(44, 32, 24, 0.06);
  box-shadow: 0 1px 0 rgba(44, 32, 24, 0.04)
}

.nav-logo {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text)
}

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none
}

.nav-links a {
  font-size: 0.9375rem;
  color: var(--text2);
  transition: color 0.25s
}

.nav-links a:hover {
  color: var(--accent)
}

/* ── Hero：一屏一构图 ── */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 96px 28px 64px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(196, 113, 78, 0.14), transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 70%, rgba(123, 169, 154, 0.16), transparent 50%),
    linear-gradient(180deg, #fff8f1 0%, var(--bg) 55%, #f6f0e8 100%)
}

.hero-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.55;
  animation: orbDrift 14s ease-in-out infinite alternate
}

.hero-orb-a {
  width: min(52vw, 420px);
  height: min(52vw, 420px);
  top: 8%;
  left: -8%;
  background: rgba(196, 113, 78, 0.28)
}

.hero-orb-b {
  width: min(48vw, 380px);
  height: min(48vw, 380px);
  bottom: 12%;
  right: -6%;
  background: rgba(123, 169, 154, 0.3);
  animation-delay: -4s
}

@keyframes orbDrift {
  from {
    transform: translate(0, 0) scale(1)
  }

  to {
    transform: translate(24px, -18px) scale(1.06)
  }
}

.hero-wave {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 96px;
  opacity: 0.5
}

.hero-wave i {
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--accent), var(--sage));
  animation: heroBar 1.6s ease-in-out infinite;
  transform-origin: bottom
}

.hero-wave i:nth-child(odd) {
  height: 42%
}

.hero-wave i:nth-child(even) {
  height: 78%
}

.hero-wave i:nth-child(3n) {
  height: 100%
}

.hero-wave i:nth-child(1) {
  animation-delay: 0s
}

.hero-wave i:nth-child(2) {
  animation-delay: 0.08s
}

.hero-wave i:nth-child(3) {
  animation-delay: 0.16s
}

.hero-wave i:nth-child(4) {
  animation-delay: 0.24s
}

.hero-wave i:nth-child(5) {
  animation-delay: 0.32s
}

.hero-wave i:nth-child(6) {
  animation-delay: 0.4s
}

.hero-wave i:nth-child(7) {
  animation-delay: 0.48s
}

.hero-wave i:nth-child(8) {
  animation-delay: 0.56s
}

.hero-wave i:nth-child(9) {
  animation-delay: 0.64s
}

.hero-wave i:nth-child(10) {
  animation-delay: 0.72s
}

.hero-wave i:nth-child(11) {
  animation-delay: 0.8s
}

.hero-wave i:nth-child(12) {
  animation-delay: 0.88s
}

.hero-wave i:nth-child(13) {
  animation-delay: 0.96s
}

.hero-wave i:nth-child(14) {
  animation-delay: 1.04s
}

.hero-wave i:nth-child(15) {
  animation-delay: 1.12s
}

.hero-wave i:nth-child(16) {
  animation-delay: 1.2s
}

.hero-wave i:nth-child(17) {
  animation-delay: 1.28s
}

.hero-wave i:nth-child(18) {
  animation-delay: 1.36s
}

@keyframes heroBar {

  0%,
  100% {
    transform: scaleY(0.45)
  }

  50% {
    transform: scaleY(1)
  }
}

.hero-in {
  position: relative;
  z-index: 1;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center
}

.hero-brand {
  font-family: var(--font);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp 0.9s var(--ease) 0.15s forwards
}

.hero-title {
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp 0.9s var(--ease) 0.35s forwards
}

.hero-sub {
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  font-weight: 400;
  color: var(--text2);
  max-width: 30em;
  line-height: 1.8;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp 0.9s var(--ease) 0.5s forwards
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp 0.9s var(--ease) 0.65s forwards
}

.btn-p {
  appearance: none;
  padding: 13px 32px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  border: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease);
  box-shadow: 0 8px 28px rgba(196, 113, 78, 0.32)
}

.btn-p:hover {
  box-shadow: 0 12px 36px rgba(196, 113, 78, 0.4)
}

.btn-p:active {
  transform: scale(0.95)
}

.btn-s {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font-size: 1.0625rem;
  font-weight: 500;
  border: 1.5px solid rgba(196, 113, 78, 0.45);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.2s
}

.btn-s:hover {
  background: var(--accent-soft);
  border-color: var(--accent)
}

.btn-s:active {
  transform: scale(0.95)
}

.scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 1.1s forwards;
  z-index: 1
}

.scroll-hint::after {
  content: "";
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--text3), transparent);
  margin: 0 auto;
  animation: pulse 2.2s ease-in-out infinite
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.25;
    transform: scaleY(0.55)
  }

  50% {
    opacity: 0.9;
    transform: scaleY(1)
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* Reveal */
.rv,
.rv-l,
.rv-r {
  opacity: 0;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease)
}

.rv {
  transform: translateY(40px)
}

.rv-l {
  transform: translateX(-36px)
}

.rv-r {
  transform: translateX(36px)
}

.rv.on,
.rv-l.on,
.rv-r.on {
  opacity: 1;
  transform: none
}

.stagger>* {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease)
}

.stagger.on>*:nth-child(1) {
  transition-delay: 0ms;
  opacity: 1;
  transform: none
}

.stagger.on>*:nth-child(2) {
  transition-delay: 90ms;
  opacity: 1;
  transform: none
}

.stagger.on>*:nth-child(3) {
  transition-delay: 160ms;
  opacity: 1;
  transform: none
}

.stagger.on>*:nth-child(4) {
  transition-delay: 230ms;
  opacity: 1;
  transform: none
}

.stagger.on>*:nth-child(5) {
  transition-delay: 300ms;
  opacity: 1;
  transform: none
}

.stagger.on>*:nth-child(6) {
  transition-delay: 360ms;
  opacity: 1;
  transform: none
}

/* Sections */
.sec {
  padding: 24px 0;
  position: relative
}

.sec-in {
  max-width: var(--mw);
  margin: 0 auto;
  padding: 0 28px
}

.sec-hd {
  text-align: center;
  margin-bottom: clamp(40px, 6vh, 64px)
}

.sec-ey {
  font-size: clamp(1.875rem, 3vw, 2.125rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 12px
}

.sec-t {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--text2)
}

/* About */
.about {
  background: var(--bg2);
  height: 100%;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center
}

.about-vis {
  height: 340px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 40%, rgba(196, 113, 78, 0.22), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(123, 169, 154, 0.28), transparent 50%),
    linear-gradient(145deg, #3d2a1f, #2a1e15);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card)
}

.wave {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 120px
}

.wave i {
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #e8a888, var(--sage));
  animation: wv 1.25s ease-in-out infinite
}

.wave i:nth-child(1) {
  height: 40%;
  animation-delay: 0s
}

.wave i:nth-child(2) {
  height: 70%;
  animation-delay: 0.1s
}

.wave i:nth-child(3) {
  height: 100%;
  animation-delay: 0.2s
}

.wave i:nth-child(4) {
  height: 60%;
  animation-delay: 0.3s
}

.wave i:nth-child(5) {
  height: 85%;
  animation-delay: 0.4s
}

.wave i:nth-child(6) {
  height: 45%;
  animation-delay: 0.5s
}

.wave i:nth-child(7) {
  height: 95%;
  animation-delay: 0.6s
}

.wave i:nth-child(8) {
  height: 55%;
  animation-delay: 0.7s
}

.wave i:nth-child(9) {
  height: 80%;
  animation-delay: 0.8s
}

.wave i:nth-child(10) {
  height: 35%;
  animation-delay: 0.9s
}

.wave i:nth-child(11) {
  height: 65%;
  animation-delay: 1s
}

.wave i:nth-child(12) {
  height: 90%;
  animation-delay: 1.1s
}

@keyframes wv {

  0%,
  100% {
    transform: scaleY(0.5)
  }

  50% {
    transform: scaleY(1)
  }
}

/* ── 手机界面示意：对话气泡 + 音景播放卡 ── */
.phone {
  width: min(280px, 78vw);
  border-radius: 34px;
  padding: 10px;
  background: linear-gradient(180deg, #4a3322, #2a1e15);
  box-shadow: 0 20px 50px rgba(44, 32, 24, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12)
}

.phone-screen {
  border-radius: 26px;
  padding: 16px 12px;
  background: linear-gradient(165deg, #2b1f15, #1c140d);
  display: flex;
  flex-direction: column;
  gap: 10px
}

.chat-bubble {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.8125rem;
  line-height: 1.55
}

.chat-bubble.me {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px
}

.chat-bubble.ai {
  align-self: flex-start;
  background: rgba(255, 254, 250, 0.09);
  color: rgba(255, 254, 250, 0.9);
  border-bottom-left-radius: 4px
}

.scene-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(196, 113, 78, 0.35), rgba(123, 169, 154, 0.3));
  border: 0.5px solid rgba(255, 254, 250, 0.12)
}

.scene-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 254, 250, 0.95)
}

.scene-tag {
  margin-left: auto;
  font-size: 0.6875rem;
  color: rgba(255, 254, 250, 0.65)
}

.scene-wave {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 18px
}

.scene-wave i {
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 254, 250, 0.85);
  animation: wv 1.2s ease-in-out infinite
}

.scene-wave i:nth-child(odd) {
  height: 45%
}

.scene-wave i:nth-child(even) {
  height: 80%
}

.about-txt h3 {
  font-size: clamp(1.5rem, 2.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 16px
}

.about-txt p {
  font-size: 1.0625rem;
  color: var(--text2);
  line-height: 1.85;
  margin-bottom: 8px
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px
}

.stat-n {
  font-size: clamp(1.875rem, 3vw, 2.125rem);
  font-weight: 600;
  color: var(--accent);
  line-height: 1.15;
  letter-spacing: -0.02em
}

.stat-l {
  font-size: 0.8125rem;
  color: var(--text2);
  margin-top: 6px
}

/* Features */
.feats {
  background: var(--bg)
}

.feat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px
}

.feat-card {
  display: block;
  padding: 24px;
  border-radius: 16px;
  background: var(--card);
  border: 0.5px solid rgba(44, 32, 24, 0.06);
  box-shadow: var(--shadow-card);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s;
  position: relative;
  -webkit-tap-highlight-color: transparent
}

.feat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(44, 32, 24, 0.08);
  box-shadow: var(--shadow-card-hover)
}

.feat-card:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-card)
}

.feat-hd {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px
}

.feat-ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft)
}

.feat-card:nth-child(2) .feat-ic {
  color: var(--sage);
  background: var(--sage-soft)
}

.feat-card:nth-child(3) .feat-ic {
  color: #8a6a4a;
  background: #f3ebe2
}

.feat-card:nth-child(4) .feat-ic {
  color: #9a6b58;
  background: #f7ebe6
}

.feat-card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em
}

.feat-card p {
  font-size: 0.9375rem;
  color: var(--text2);
  line-height: 1.7;
  margin-bottom: 16px
}

.feat-go {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.01em
}

.feat-card:hover .feat-go {
  text-decoration: underline;
  text-underline-offset: 3px
}

/* Showcase */
.show {
  padding: 24px 0;
  position: relative;
  background: var(--bg)
}

.show-alt {
  background: var(--bg2)
}

.show-in {
  max-width: var(--mw);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center
}

.show-in.rev {
  direction: rtl
}

.show-in.rev>* {
  direction: ltr
}

.show-txt .ey {
  font-size: clamp(1.875rem, 3vw, 2.125rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 12px
}

.show-txt h2 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 16px
}

.show-txt p {
  font-size: 1.0625rem;
  color: var(--text2);
  line-height: 1.85;
  margin-bottom: 8px
}

.show-list {
  list-style: none;
}

.show-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  font-size: 1rem;
  color: var(--text2);
  border-bottom: 1px solid var(--sep);
  line-height: 1.6
}

.show-list li:last-child {
  border-bottom: none
}

.show-list .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
  background: var(--accent)
}

.show-vis {
  height: 280px;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: var(--shadow-card)
}

.show-vis.c1 {
  background:
    radial-gradient(circle at 30% 30%, rgba(123, 169, 154, 0.45), transparent 55%),
    linear-gradient(160deg, #2f3d38, #1e2a26)
}

.show-vis.c2 {
  background:
    radial-gradient(circle at 70% 40%, rgba(196, 113, 78, 0.4), transparent 55%),
    linear-gradient(160deg, #3d2a1f, #2a1e15)
}

.show-vis.c3 {
  background:
    radial-gradient(circle at 40% 60%, rgba(196, 113, 78, 0.28), transparent 50%),
    linear-gradient(160deg, #352820, #231912)
}

.show-vis.c4 {
  background:
    radial-gradient(circle at 60% 35%, rgba(232, 168, 136, 0.35), transparent 55%),
    linear-gradient(160deg, #3a2c24, #241c16)
}

.vis-panel {
  text-align: center;
  z-index: 1;
  padding: 28px
}

.vis-icon {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 254, 250, 0.92);
  margin-bottom: 12px
}

.vis-lbl {
  font-size: 0.9375rem;
  color: rgba(255, 254, 250, 0.62);
  letter-spacing: 0.04em
}

/* Closing CTA */
.big-hl {
  text-align: center;
  align-items: center;
  padding: 24px 28px;
  background:
    radial-gradient(ellipse 70% 80% at 50% 40%, rgba(196, 113, 78, 0.12), transparent 60%),
    var(--bg)
}

.big-hl-in {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px
}

.big-hl-brand {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent)
}

.big-hl h2 {
  font-size: clamp(1.875rem, 3vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text)
}

.big-hl-sub {
  color: var(--text2);
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-bottom: 12px;
  max-width: 28em
}

/* Footer */
.footer {
  padding: 24px 28px 32px;
  text-align: center;
}

.footer-logo {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  margin-bottom: 8px
}

.footer p {
  font-size: 0.9375rem;
  color: var(--text2)
}

.footer-copy {
  margin-top: 28px !important;
  font-size: 0.75rem !important;
  color: var(--text3) !important
}

/* ── 每页独立布局：内容铺满一屏，而非挤在中间 ── */

/* 第 1 页 · hero：自身已 flex 垂直居中，无需额外处理 */

/* 第 2 页 · 按自己的节奏来：网格撑满整屏，视觉块拉高 */
.about .sec-in {
  flex: 1;
  display: flex;
  flex-direction: column
}

.about-grid {
  flex: 1;
  align-items: center;
  align-content: center
}

.about-vis {
  height: min(56vh, 480px)
}

/* 第 3 页 · 产品能力：标题在上，卡片均分剩余高度 */
.feats .sec-in {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.feats .sec-hd {
  margin-bottom: clamp(20px, 4.5vh, 48px)
}

.feat-grid {
  grid-template-rows: repeat(2, 1fr)
}

.feats .feat-grid {
  flex: 1;
  min-height: 0
}

.feat-card {
  display: flex;
  flex-direction: column;
  justify-content: center
}

/* 第 4–7 页 · 详情展示：左右栏撑满整屏，视觉块适度高度 */
.show-in {
  flex: 1
}

.show-vis {
  height: min(50vh, 400px)
}

/* 第 8 页 · 结尾：CTA 居中、footer 沉底（由 .page 的 flex 布局天然实现） */
.big-hl {
  justify-content: center
}

/* Responsive */
@media (max-width: 900px) {

  .about-grid,
  .show-in {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .show-in.rev {
    direction: ltr
  }

  .about-vis,
  .show-vis {
    height: min(30vh, 240px)
  }

  /* 各屏内容从顶部开始：所有屏第一个元素距顶统一 24px */
  .sec,
  .show {
    padding: 0
  }

  .sec-in,
  .show-in {
    margin: auto 0;
    padding: 24px 28px;
    padding-top: max(24px, env(safe-area-inset-top))
  }


  /* 视觉块统一为扁横条，不再占用半个屏幕 */

  .about-grid {
    display: flex;
    flex-direction: column;
    justify-content: center
  }

  .about-grid .about-txt {
    order: 1
  }

  .about-grid .about-vis {
    order: 2;
    height: auto;
    padding: 22px 16px;
    width: 100%
  }

  .feats .sec-in {
    justify-content: center
  }

  .feats .feat-grid {
    flex: none;
    grid-template-rows: none
  }

  .show-in {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch
  }

  .show-in .show-txt {
    margin: 0;
    padding: 0
  }

  .show-in .show-vis {
    height: min(30vh, 240px);
    width: 100%
  }

  .show-list li {
    padding: 9px 0
  }

  .nav-links {
    display: none
  }

  .nav {
    padding: 0 20px;
    justify-content: center
  }
}

@media (max-width: 640px) {
  .page-indicator {
    display: none
  }

  .hero {
    justify-content: center;
    padding: 24px 20px 48px;
    padding-top: max(24px, env(safe-area-inset-top))
  }

  .hero-brand {
    margin-bottom: 18px
  }

  .hero-title {
    margin-bottom: 16px
  }

  .hero-sub {
    margin-bottom: 28px
  }

  .hero-cta {
    flex-direction: column;
    width: 100%;
    max-width: 320px
  }

  .btn-p,
  .btn-s {
    width: 100%;
    padding: 13px 28px;
    font-size: 1rem
  }

  .scroll-hint {
    display: none
  }

  .hero-wave {
    height: 64px;
    gap: 5px;
    bottom: 8%;
    opacity: 0.35
  }

  .sec-in,
  .show-in {
    padding: 24px 16px;
    padding-top: max(24px, env(safe-area-inset-top))
  }

  .sec-hd {
    margin-bottom: 24px
  }

  .sec-ey {
    font-size: 1.75rem;
    margin-bottom: 8px
  }

  .sec-t {
    font-size: 0.9375rem
  }

  /* 功能卡片：移动端 2×2 紧凑排布，不撑满屏高 */
  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
  }

  .feat-card {
    padding: 16px;
    justify-content: flex-start
  }

  .feat-hd {
    gap: 12px;
    margin-bottom: 12px
  }

  .feat-ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 0.9375rem
  }

  .feat-card h3 {
    font-size: 1.0625rem
  }

  .feat-card p {
    font-size: 0.8125rem;
    line-height: 1.7;
    margin-bottom: 12px
  }

  .feat-go {
    font-size: 0.8125rem
  }

  /* 详情页：ey 为主题大字，h2 降为副句，列表更紧凑 */
  .show-txt .ey {
    font-size: 1.75rem;
    margin-bottom: 8px
  }

  .show-txt h2 {
    font-size: 0.9375rem;
    margin-bottom: 12px
  }

  .show-txt p {
    font-size: 0.9375rem;
    line-height: 1.7
  }

  .show-list li {
    padding: 8px 0;
    font-size: 0.875rem;
    gap: 12px
  }

  .about-vis,
  .show-vis {
    height: min(30vh, 210px);
    border-radius: 16px
  }

  /* 仅手机端（≤640px）：视觉块改为扁横条，不占半屏 */

  .about-grid,
  .show-in {
    gap: 16px
  }

  .vis-icon {
    font-size: 1.75rem;
    margin-bottom: 8px
  }

  .vis-lbl {
    font-size: 0.8125rem
  }

  .about-txt h3 {
    margin-bottom: 12px
  }

  .about-txt p {
    font-size: 0.9375rem;
    line-height: 1.7
  }

  .stats {
    gap: 16px;
    margin-top: 24px
  }

  .stat-n {
    font-size: 1.75rem
  }

  .big-hl {
    padding: 24px 20px;
    padding-top: max(24px, env(safe-area-inset-top))
  }

  .big-hl-in {
    gap: 12px
  }
}

/* 矮屏手机（如 iPhone SE）：进一步压缩，确保内容不溢出一屏 */
@media (max-width: 640px) and (max-height: 700px) {
  .hero {
    padding: 24px 20px 48px
  }

  .hero-brand {
    margin-bottom: 14px
  }

  .hero-sub {
    margin-bottom: 22px;
    font-size: 1rem
  }

  .sec-hd {
    margin-bottom: 18px
  }

  .show-vis {
    display: none
  }

  .show-in .show-txt {
    flex: 1;
    justify-content: center
  }

  .about-vis {
    display: none
  }

  .show-list li {
    padding: 5px 0;
    font-size: 0.8125rem
  }

  .show-list .dot {
    margin-top: 6px
  }

  .feat-card p {
    font-size: 0.75rem
  }

  .stats {
    margin-top: 16px
  }
}

@media (max-width: 360px) {
  .hero-brand {
    font-size: 3rem
  }

  .hero-title {
    font-size: 1.875rem
  }

  .feat-grid {
    gap: 10px
  }
}

@media (hover: none) and (pointer: coarse) {
  .feat-card:hover {
    transform: none;
    box-shadow: var(--shadow-card);
    border-color: rgba(44, 32, 24, 0.06)
  }

  .feat-card:active {
    transform: scale(0.97);
    box-shadow: var(--shadow-card)
  }

  .btn-p:hover {
    box-shadow: 0 8px 28px rgba(196, 113, 78, 0.32)
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-brand,
  .hero-title,
  .hero-sub,
  .hero-cta,
  .scroll-hint,
  .hero-orb,
  .hero-wave i,
  .wave i {
    animation: none !important;
    opacity: 1;
    transform: none
  }

  .rv,
  .rv-l,
  .rv-r,
  .stagger>* {
    opacity: 1;
    transform: none;
    transition: none
  }
}

@supports (padding: env(safe-area-inset-top)) {
  .nav {
    padding-top: env(safe-area-inset-top);
    height: calc(64px + env(safe-area-inset-top))
  }


  .footer {
    padding-bottom: calc(72px + env(safe-area-inset-bottom))
  }
}