/* ============================ 
   网易天马 · NetEase Pegasus 
   高端影视/短剧 App 官网样式 
   ============================ */ 
 
/* Sora 拉丁字体：走阿里 npmmirror CDN（国内稳定），加载失败自动回退系统 sans-serif；   
   中文交给系统字体（PingFang SC / Microsoft YaHei），不再依赖 Google/gstatic 镜像。 */   
@font-face {   
  font-family: "Sora";   
  font-style: normal;   
  font-weight: 400;   
  font-display: swap;   
  src: url("https://registry.npmmirror.com/@fontsource/sora/5.0.8/files/files/sora-latin-400-normal.woff2") format("woff2");   
}   
@font-face {   
  font-family: "Sora";   
  font-style: normal;   
  font-weight: 500;   
  font-display: swap;   
  src: url("https://registry.npmmirror.com/@fontsource/sora/5.0.8/files/files/sora-latin-500-normal.woff2") format("woff2");   
}   
@font-face {   
  font-family: "Sora";   
  font-style: normal;   
  font-weight: 600;   
  font-display: swap;   
  src: url("https://registry.npmmirror.com/@fontsource/sora/5.0.8/files/files/sora-latin-600-normal.woff2") format("woff2");   
}   
@font-face {   
  font-family: "Sora";   
  font-style: normal;   
  font-weight: 700;   
  font-display: swap;   
  src: url("https://registry.npmmirror.com/@fontsource/sora/5.0.8/files/files/sora-latin-700-normal.woff2") format("woff2");   
}   
@font-face {   
  font-family: "Sora";   
  font-style: normal;   
  font-weight: 800;   
  font-display: swap;   
  src: url("https://registry.npmmirror.com/@fontsource/sora/5.0.8/files/files/sora-latin-800-normal.woff2") format("woff2");   
}   
 
:root { 
  /* 主色 - 淡色调：薄荷青→淡紫蓝→玫粉→橙粉→金黄 */ 
  --c-blue-deep: #7684E3; 
  --c-blue: #7684E3; 
  --c-cyan: #6ED2E9; 
  --c-mint: #FF9C79; 
  --c-pink: #D97A85; 
  --c-purple: #7684E3; 
  --c-red: #D97A85; 
  --c-orange: #FF9C79; 
  --c-gold: #FFCE66; 
 
  /* 中性 - 背景提亮 */ 
  --bg-0: #1a2440; 
  --bg-1: #1f2a4a; 
  --bg-2: #233055; 
  --text-1: #ffffff; 
  --text-2: rgba(255, 255, 255, 0.92); 
  --text-3: rgba(255, 255, 255, 0.78); 
  --text-4: rgba(255, 255, 255, 0.55); 
 
  /* 玻璃 */ 
  --glass-bg: rgba(255, 255, 255, 0.09); 
  --glass-bg-strong: rgba(255, 255, 255, 0.16); 
  --glass-border: rgba(255, 255, 255, 0.22); 
  --glass-border-strong: rgba(255, 255, 255, 0.32); 
 
  /* 阴影 - 淡色光晕 */ 
  --shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.35); 
  --shadow-glass: 0 20px 60px -20px rgba(118, 132, 227, 0.4), 
                  inset 0 1px 0 rgba(255, 255, 255, 0.25); 
  --shadow-cta: 0 20px 50px -12px rgba(255, 156, 121, 0.5); 
 
  /* 圆角 */ 
  --r-sm: 10px; 
  --r-md: 16px; 
  --r-lg: 24px; 
  --r-xl: 32px; 
  --r-pill: 999px; 
 
  /* 渐变 - 精确 5 色：青→紫蓝→玫粉→橙粉→金 */ 
  --grad-brand: linear-gradient(135deg, #6ED2E9 0%, #7684E3 12%, #D97A85 75%, #FF9C79 89%, #FFCE66 100%); 
  --grad-brand-soft: linear-gradient(135deg, rgba(110, 210, 233, 0.2), rgba(255, 206, 102, 0.2)); 
} 
 
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: pan-x pan-y;
  overflow-x: hidden;
  overflow-x: clip;
}
 
body { 
  font-family: "Sora", "Noto Sans SC", -apple-system, BlinkMacSystemFont, 
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
  font-weight: 400; 
  background: var(--bg-0); 
  color: var(--text-1); 
  line-height: 1.6; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  overflow-x: hidden; 
  cursor: auto; 
} 
 
/* 交互元素显示手型 */ 
a, button, input, .dl-btn, .feature-card, .list-item, .stage-btn, .stage-play { 
  cursor: pointer; 
} 
 
img { 
  max-width: 100%; 
  display: block; 
} 
 
/* ====== 通用 ====== */ 
.glass { 
  background: var(--glass-bg); 
  backdrop-filter: blur(24px) saturate(180%); 
  -webkit-backdrop-filter: blur(24px) saturate(180%); 
  border: 1px solid var(--glass-border); 
  box-shadow: var(--shadow-glass); 
} 
 
.gradient-text { 
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 55%, #FFCE65 100%); 
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent; 
  -webkit-text-fill-color: transparent; 
} 
 
.section-eyebrow { 
  display: inline-block; 
  font-size: 12px; 
  letter-spacing: 0.3em; 
  font-weight: 600; 
  color: #ffffff; 
  text-transform: uppercase; 
  padding: 6px 12px; 
  border: 1px solid rgba(255, 255, 255, 0.35); 
  border-radius: var(--r-pill); 
  background: rgba(255, 255, 255, 0.12); 
  margin-bottom: 18px; 
} 
 
.section-head { 
  text-align: center; 
  max-width: 780px; 
  margin: 0 auto 64px; 
} 
 
.section-title { 
  font-family: "Sora", "Noto Sans SC", sans-serif; 
  font-size: clamp(32px, 4.4vw, 56px); 
  font-weight: 700; 
  line-height: 1.15; 
  letter-spacing: -0.02em; 
} 
 
.section-sub { 
  margin-top: 16px; 
  font-size: clamp(14px, 1.2vw, 17px); 
  color: var(--text-3); 
} 
 
/* ====== 背景：Figma 淡色渐变 + 柔和极光 ====== */ 
.bg-aurora { 
  position: fixed; 
  inset: 0; 
  z-index: -2; 
  overflow: hidden; 
  background: 
    /* 顶层柔光斑（饱和度提升） */ 
    radial-gradient(800px 600px at 0% 0%, rgba(110, 210, 233, 0.55), transparent 55%), 
    radial-gradient(1300px 900px at 95% 30%, rgba(217, 122, 133, 0.6), transparent 65%), 
    radial-gradient(1200px 800px at 55% 100%, rgba(255, 156, 121, 0.55), transparent 65%), 
    radial-gradient(900px 700px at 30% 55%, rgba(118, 132, 227, 0.55), transparent 65%), 
    /* 减弱暗色蒙版，让色彩更鲜亮 */ 
    linear-gradient(180deg, rgba(20, 28, 56, 0.12) 0%, rgba(20, 28, 56, 0.18) 100%), 
    /* 主渐变：饱和度提升版（保留色相） */ 
    linear-gradient(90deg, 
      #1FBFE0 0%, 
      #4A5DE8 12%, 
      #E64A60 75%, 
      #FF7A45 89%, 
      #FFB800 100%); 
} 
 
.blob { 
  position: absolute; 
  border-radius: 50%; 
  filter: blur(80px); 
  opacity: 0.85; 
  animation: float 18s ease-in-out infinite alternate; 
} 
 
.blob-a { 
  width: 360px; 
  height: 360px; 
  top: -100px; 
  left: -80px; 
  background: radial-gradient(circle, rgba(110, 210, 233, 0.85), transparent 70%); 
} 
 
.blob-b { 
  width: 620px; 
  height: 620px; 
  top: 28%; 
  right: -160px; 
  background: radial-gradient(circle, rgba(217, 122, 133, 0.85), transparent 70%); 
  animation-duration: 24s; 
} 
 
.blob-c { 
  width: 720px; 
  height: 720px; 
  bottom: -200px; 
  left: 28%; 
  background: radial-gradient(circle, rgba(255, 206, 102, 0.78), transparent 70%); 
  animation-duration: 30s; 
} 
 
@keyframes float { 
  0%   { transform: translate(0, 0) scale(1); } 
  50%  { transform: translate(40px, -30px) scale(1.06); } 
  100% { transform: translate(-30px, 40px) scale(0.96); } 
} 
 
.grid-overlay { 
  position: absolute; 
  inset: 0; 
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), 
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); 
  background-size: 64px 64px; 
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); 
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); 
  opacity: 0.6; 
} 
 
.noise { 
  position: absolute; 
  inset: 0; 
  pointer-events: none; 
  opacity: 0.04; 
  mix-blend-mode: overlay; 
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); 
} 
 
/* ====== 鼠标光晕 ====== */ 
.cursor-glow { 
  position: fixed; 
  width: 520px; 
  height: 520px; 
  border-radius: 50%; 
  /* 彩虹光晕 */ 
  background: radial-gradient(circle, rgba(118, 132, 227, 0.22) 0%, rgba(217, 122, 133, 0.12) 35%, transparent 65%); 
  pointer-events: none; 
  transform: translate(-50%, -50%); 
  /* 始终置顶（视频也能盖住） */ 
  z-index: 9999; 
  transition: opacity 0.3s ease; 
  will-change: left, top; 
  /* 防止溢出造成横向滚动 */ 
  filter: blur(2px); 
} 
 
/* ====== 导航 ====== */ 
.nav { 
  position: fixed; 
  top: 18px; 
  left: 50%; 
  transform: translateX(-50%); 
  width: min(1200px, calc(100% - 32px)); 
  z-index: 100; 
  padding: 12px 20px; 
  border-radius: var(--r-pill); 
  display: flex; 
  align-items: center; 
  gap: 24px; 
  transition: top 0.3s ease, padding 0.3s ease; 
} 
 
.nav.scrolled { 
  top: 10px; 
  padding: 10px 18px; 
  background: rgba(7, 13, 36, 0.55); 
} 
 
.brand { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  text-decoration: none; 
  color: inherit; 
  flex-shrink: 0; 
} 
 
.brand-logo { 
  width: 40px; 
  height: 40px; 
  border-radius: 10px; 
  filter: drop-shadow(0 6px 14px rgba(118, 132, 227, 0.45)); 
} 
 
.brand-text { 
  display: flex; 
  flex-direction: column; 
  line-height: 1.1; 
} 
 
.brand-name { 
  font-size: 16px; 
  font-weight: 700; 
  letter-spacing: 0.02em; 
} 
 
.brand-en { 
  font-size: 11px; 
  color: var(--text-3); 
  letter-spacing: 0.12em; 
  text-transform: uppercase; 
} 
 
.nav-links { 
  display: flex; 
  align-items: center; 
  gap: 6px; 
  margin-left: auto; 
} 
 
.nav-links a { 
  text-decoration: none; 
  color: var(--text-2); 
  font-size: 14px; 
  font-weight: 500; 
  padding: 8px 14px; 
  border-radius: var(--r-pill); 
  transition: color 0.2s ease, background 0.2s ease; 
} 
 
.nav-links a:hover { 
  color: var(--text-1); 
  background: rgba(255, 255, 255, 0.06); 
} 
 
.nav-cta { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  padding: 11px 22px; 
  font-size: 14px; 
  font-weight: 700; 
  text-decoration: none; 
  color: #0535FF; 
  background: #ffffff; 
  border-radius: var(--r-pill); 
  box-shadow: 0 12px 30px -8px rgba(255, 255, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.9); 
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; 
} 
 
.nav-cta svg { 
  width: 16px; 
  height: 16px; 
} 
 
.nav-cta:hover { 
  transform: translateY(-2px); 
  background: #FFCE65; 
  color: #0535FF; 
  box-shadow: 0 18px 40px -10px rgba(255, 206, 101, 0.85); 
} 
 
/* ====== Hero ====== */ 
.hero { 
  position: relative; 
  min-height: 100vh; 
  padding: 140px 24px 80px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
 
.hero-inner { 
  width: 100%; 
  max-width: 1280px; 
  display: grid; 
  grid-template-columns: 1.1fr 1fr; 
  gap: 60px; 
  align-items: center; 
} 
 
.glass-pill { 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
  padding: 8px 16px; 
  border-radius: var(--r-pill); 
  font-size: 13px; 
  color: var(--text-2); 
  margin-bottom: 28px; 
} 
 
.glass-pill .dot { 
  width: 8px; 
  height: 8px; 
  border-radius: 50%; 
  background: var(--c-mint); 
  box-shadow: 0 0 12px var(--c-mint); 
  animation: pulse 2.4s ease-in-out infinite; 
} 
 
@keyframes pulse { 
  0%, 100% { opacity: 1; transform: scale(1); } 
  50% { opacity: 0.6; transform: scale(0.9); } 
} 
 
.hero-title { 
  font-family: "Sora", "Noto Sans SC", sans-serif; 
  font-size: clamp(48px, 7vw, 96px); 
  font-weight: 800; 
  line-height: 1.05; 
  letter-spacing: -0.03em; 
  margin-bottom: 24px; 
} 
 
.hero-title .title-line { 
  display: block; 
} 
 
.hero-sub { 
  font-size: clamp(15px, 1.2vw, 18px); 
  color: var(--text-3); 
  margin-bottom: 40px; 
  max-width: 560px; 
} 
 
/* 下载按钮 */ 
.download-row { 
  display: grid; 
  grid-template-columns: repeat(2, auto); 
  gap: 14px; 
  margin-bottom: 40px; 
} 
 
.dl-btn { 
  position: relative; 
  display: inline-flex; 
  align-items: center; 
  gap: 12px; 
  padding: 14px 22px; 
  border-radius: var(--r-md); 
  text-decoration: none; 
  color: var(--text-1); 
  font-family: inherit; 
  background: rgba(255, 255, 255, 0.14); 
  border: 1px solid rgba(255, 255, 255, 0.4); 
  backdrop-filter: blur(20px); 
  -webkit-backdrop-filter: blur(20px); 
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease; 
  overflow: hidden; 
  min-width: 212px; 
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); 
} 
 
.dl-btn .dl-icon { 
  width: 32px; 
  height: 32px; 
  display: grid; 
  place-items: center; 
  flex-shrink: 0; 
} 
 
.dl-btn .dl-icon svg { 
  width: 28px; 
  height: 28px; 
} 
 
.dl-btn .dl-text { 
  display: flex; 
  flex-direction: column; 
  line-height: 1.15; 
  text-align: left; 
} 
 
.dl-btn .dl-tip { 
  font-size: 11px; 
  color: rgba(255, 255, 255, 0.85); 
  letter-spacing: 0.04em; 
} 
 
.dl-btn .dl-name { 
  font-size: 17px; 
  font-weight: 700; 
  color: #ffffff; 
} 
 
.dl-btn:hover { 
  transform: translateY(-3px); 
  border-color: #ffffff; 
  background: #ffffff; 
  color: #0535FF; 
  box-shadow: 0 22px 44px -14px rgba(255, 255, 255, 0.55); 
} 
 
.dl-btn:hover .dl-tip, 
.dl-btn:hover .dl-name { 
  color: #0535FF; 
} 
 
.dl-android { 
  background: rgba(255, 255, 255, 0.14); 
} 
 
.dl-ios { 
  background: rgba(255, 255, 255, 0.14); 
} 
 
.dl-apk { 
  background: rgba(255, 255, 255, 0.14); 
} 
 
.dl-shine { 
  position: absolute; 
  top: 0; 
  left: -120%; 
  width: 60%; 
  height: 100%; 
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.35), transparent); 
  transform: skewX(-20deg); 
  transition: left 0.7s ease; 
  pointer-events: none; 
} 
 
.dl-btn:hover .dl-shine { 
  left: 130%; 
} 
 
.hero-meta { 
  display: flex; 
  align-items: center; 
  gap: 28px; 
  flex-wrap: wrap; 
} 
 
.meta-item { 
  display: flex; 
  flex-direction: column; 
  line-height: 1.2; 
} 
 
.meta-item strong { 
  font-size: 26px; 
  font-weight: 700; 
  color: #ffffff; 
} 
 
.meta-item span { 
  font-size: 12px; 
  color: var(--text-3); 
  letter-spacing: 0.02em; 
  margin-top: 2px; 
} 
 
.meta-divider { 
  width: 1px; 
  height: 36px; 
  background: rgba(255, 255, 255, 0.1); 
} 
 
/* 右侧手机 */ 
.hero-visual { 
  position: relative; 
  height: 640px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
 
.phone { 
  position: absolute; 
  width: 280px; 
  height: 580px; 
  border-radius: 44px; 
  padding: 14px; 
  background: 
    linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.16) 100%); 
  border: 1px solid rgba(255, 255, 255, 0.28); 
  backdrop-filter: blur(28px) saturate(180%); 
  -webkit-backdrop-filter: blur(28px) saturate(180%); 
  box-shadow: 
    0 60px 140px -30px rgba(255, 255, 255, 0.22), 
    0 30px 80px -20px rgba(0, 0, 0, 0.55), 
    inset 0 1px 0 rgba(255, 255, 255, 0.4), 
    inset 0 -1px 0 rgba(255, 255, 255, 0.12), 
    inset 1px 0 0 rgba(255, 255, 255, 0.18), 
    inset -1px 0 0 rgba(255, 255, 255, 0.18); 
  transition: transform 0.4s ease, box-shadow 0.4s ease; 
} 
 
.phone-back { 
  transform: translate(-130px, 30px) rotate(-8deg); 
  z-index: 1; 
} 
 
.phone-front { 
  transform: translate(110px, -10px) rotate(6deg); 
  z-index: 2; 
} 
 
.hero-visual:hover .phone-back { 
  transform: translate(-150px, 20px) rotate(-10deg); 
} 
 
.hero-visual:hover .phone-front { 
  transform: translate(120px, -20px) rotate(8deg); 
} 
 
.phone-screen { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  border-radius: 32px; 
  overflow: hidden; 
} 
 
.phone-screen-img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  object-position: top center; 
  display: block; 
  border-radius: inherit; 
} 
 
/* 屏幕高光 */ 
.phone-reflection { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  border-radius: inherit; 
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 40%), 
    linear-gradient(315deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 30%); 
  pointer-events: none; 
  mix-blend-mode: screen; 
} 
 
.phone-screen-dark { 
  background: #060b1f; 
} 
 
.phone-screen-light { 
  background: #f4f6fb; 
} 
 
/* 漂浮玻璃元素 */ 
.float-card { 
  position: absolute; 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  padding: 10px 14px; 
  border-radius: var(--r-md); 
  z-index: 3; 
  animation: floatCard 6s ease-in-out infinite alternate; 
} 
 
.float-card-1 { 
  top: 10%; 
  right: -10px; 
  animation-delay: -2s; 
} 
 
.float-card-2 { 
  bottom: 12%; 
  left: -10px; 
  animation-delay: -4s; 
} 
 
@keyframes floatCard { 
  from { transform: translateY(0); } 
  to   { transform: translateY(-14px); } 
} 
 
.fc-icon { 
  width: 32px; 
  height: 32px; 
  border-radius: 10px; 
  background: #ffffff; 
  display: grid; 
  place-items: center; 
  color: #0535FF; 
  font-size: 14px; 
  font-weight: 700; 
  box-shadow: 0 6px 14px -4px rgba(255, 255, 255, 0.55); 
} 
 
.fc-icon.heart { 
  background: #FFCE65; 
  color: #D54656; 
} 
 
.fc-text { 
  display: flex; 
  flex-direction: column; 
  line-height: 1.2; 
} 
 
.fc-title { 
  font-size: 13px; 
  font-weight: 700; 
} 
 
.fc-sub { 
  font-size: 10px; 
  color: var(--text-3); 
  letter-spacing: 0.04em; 
} 
 
/* 滚动提示 */ 
.scroll-hint { 
  position: absolute; 
  bottom: 32px; 
  left: 50%; 
  transform: translateX(-50%); 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 8px; 
  font-size: 10px; 
  letter-spacing: 0.4em; 
  color: var(--text-4); 
} 
 
.scroll-line { 
  width: 1px; 
  height: 50px; 
  background: linear-gradient(180deg, var(--c-cyan), transparent); 
  animation: scrollLine 2.4s ease-in-out infinite; 
} 
 
/* ====== Section 通用 ====== */ 
section { 
  padding: 120px 24px; 
  position: relative; 
} 
 
[data-reveal] { 
  opacity: 0; 
  transform: translateY(40px); 
  transition: opacity 0.8s ease, transform 0.8s ease; 
} 
 
[data-reveal].in-view { 
  opacity: 1; 
  transform: translateY(0); 
} 
 
/* ====== 特色 ====== */ 
.feature-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 22px; 
  max-width: 1240px; 
  margin: 0 auto; 
} 
 
.feature-card { 
  padding: 32px 28px; 
  border-radius: var(--r-lg); 
  position: relative; 
  overflow: hidden; 
  transition: transform 0.35s ease, border-color 0.35s ease; 
} 
 
.feature-card::before { 
  content: ""; 
  position: absolute; 
  inset: -1px; 
  border-radius: var(--r-lg); 
  padding: 1px; 
  background: linear-gradient(135deg, rgba(118, 132, 227, 0.5), transparent 50%); 
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); 
  -webkit-mask-composite: xor; 
  mask-composite: exclude; 
  opacity: 0; 
  transition: opacity 0.3s ease; 
  pointer-events: none; 
} 
 
.feature-card:hover { 
  transform: translateY(-6px); 
} 
 
.feature-card:hover::before { 
  opacity: 1; 
} 
 
.feat-icon { 
  width: 56px; 
  height: 56px; 
  border-radius: 16px; 
  display: grid; 
  place-items: center; 
  margin-bottom: 22px; 
  background: rgba(255, 255, 255, 0.14); 
  color: #ffffff; 
  border: 1px solid rgba(255, 255, 255, 0.32); 
} 
 
.feat-icon svg { 
  width: 28px; 
  height: 28px; 
} 
 
.ic-2 { color: #ffffff; border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.14); } 
.ic-3 { color: #FFCE65; border-color: rgba(255, 206, 101, 0.45); background: rgba(255, 206, 101, 0.16); } 
.ic-4 { color: #ffffff; border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.14); } 
.ic-5 { color: #ffffff; } 
 
.feature-card h3 { 
  font-size: 21px; 
  font-weight: 700; 
  margin-bottom: 10px; 
  letter-spacing: -0.01em; 
} 
 
.feature-card p { 
  color: var(--text-3); 
  font-size: 14.5px; 
  line-height: 1.7; 
} 
 
.feature-cta { 
  background: linear-gradient(135deg, rgba(118, 132, 227, 0.25), rgba(255, 156, 121, 0.18)); 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
} 
 
.feature-cta h3 { 
  font-size: 24px; 
} 
 
.ghost-btn { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  margin-top: 22px; 
  padding: 11px 20px; 
  align-self: flex-start; 
  border: 1px solid rgba(255, 255, 255, 0.6); 
  border-radius: var(--r-pill); 
  text-decoration: none; 
  background: rgba(255, 255, 255, 0.1); 
  color: #ffffff; 
  font-size: 13px; 
  font-weight: 600; 
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; 
} 
 
.ghost-btn:hover { 
  background: #ffffff; 
  color: #0535FF; 
  transform: translateY(-2px); 
  box-shadow: 0 12px 28px -8px rgba(255, 255, 255, 0.45); 
} 
 
/* ====== 短剧矩阵（无边异形高级播放器） ====== */ 
.player { 
  max-width: 1360px; 
  margin: 0 auto; 
  display: flex; 
  flex-direction: column; 
  gap: 56px; 
  padding: 0; 
  position: relative; 
  isolation: isolate; 
} 
 
/* 异形装饰光斑 */ 
.player-glow { 
  position: absolute; 
  border-radius: 50%; 
  filter: blur(80px); 
  pointer-events: none; 
  z-index: -1; 
} 
 
.player-glow-1 { 
  width: 380px; 
  height: 380px; 
  top: -80px; 
  left: -120px; 
  background: radial-gradient(circle, rgba(118, 132, 227, 0.6), transparent 70%); 
  animation: glowFloat 12s ease-in-out infinite alternate; 
} 
 
.player-glow-2 { 
  width: 460px; 
  height: 460px; 
  bottom: -120px; 
  right: -160px; 
  background: radial-gradient(circle, rgba(255, 156, 121, 0.5), transparent 70%); 
  animation: glowFloat 16s ease-in-out infinite alternate-reverse; 
} 
 
@keyframes glowFloat { 
  0%   { transform: translate(0, 0) scale(1); } 
  100% { transform: translate(40px, -30px) scale(1.1); } 
} 
 
/* ----- 下方横向滚动列表 ----- */ 
.player-list { 
  display: flex; 
  flex-direction: column; 
  gap: 18px; 
  position: relative; 
} 
 
.list-head { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 0 6px 14px; 
  position: relative; 
} 
 
.list-head::after { 
  content: ""; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  height: 1px; 
  background: linear-gradient(90deg, var(--c-cyan), rgba(118, 132, 227, 0.05) 60%, transparent); 
  opacity: 0.7; 
} 
 
.list-title { 
  font-size: 12px; 
  font-weight: 700; 
  letter-spacing: 0.32em; 
  color: #ffffff; 
} 
 
.list-count { 
  font-size: 11px; 
  color: var(--text-3); 
  margin-top: 4px; 
  letter-spacing: 0.04em; 
} 
 
.list-more { 
  width: 36px; 
  height: 36px; 
  border-radius: 50%; 
  background: rgba(255, 255, 255, 0.16); 
  border: 1px solid rgba(255, 255, 255, 0.4); 
  color: #ffffff; 
  display: grid; 
  place-items: center; 
  cursor: pointer; 
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; 
} 
 
.list-more svg { width: 16px; height: 16px; } 
 
.list-more:hover { 
  background: #ffffff; 
  color: #0535FF; 
  transform: translateX(2px); 
} 
 
.list-items { 
  list-style: none; 
  display: flex; 
  flex-direction: row; 
  gap: 18px; 
  overflow-x: auto; 
  overflow-y: visible; 
  padding: 8px 6px 14px; 
  margin: 0 -6px; 
  scroll-snap-type: x mandatory; 
  scrollbar-width: none; 
  -ms-overflow-style: none; 
  -webkit-overflow-scrolling: touch; 
} 
 
/* 隐藏滚动条 */ 
.list-items::-webkit-scrollbar { 
  display: none; 
  width: 0; 
  height: 0; 
} 
 
.list-item { 
  position: relative; 
  flex: 0 0 auto; 
  width: 220px; 
  display: flex; 
  flex-direction: column; 
  gap: 0; 
  padding: 0; 
  border-radius: 18px; 
  background: transparent; 
  border: none; 
  cursor: pointer; 
  scroll-snap-align: start; 
  transition: transform 0.3s ease; 
} 
 
.list-item:hover { 
  transform: translateY(-6px); 
} 
 
.list-item.active { 
  transform: translateY(-6px); 
} 
 
/* active 卡片底部光条 */ 
.list-item.active::after { 
  content: ""; 
  position: absolute; 
  left: 14%; 
  right: 14%; 
  bottom: -10px; 
  height: 3px; 
  border-radius: 3px; 
  background: var(--grad-brand); 
  box-shadow: 0 0 16px rgba(118, 132, 227, 0.9); 
} 
 
.li-thumb { 
  position: relative; 
  width: 100%; 
  aspect-ratio: 16 / 9; 
  border-radius: 14px; 
  overflow: hidden; 
  background: rgba(0, 0, 0, 0.4); 
  border: 1px solid rgba(255, 255, 255, 0.08); 
  transition: border-color 0.3s ease, box-shadow 0.3s ease; 
} 
 
.list-item:hover .li-thumb { 
  border-color: rgba(118, 132, 227, 0.6); 
  box-shadow: 0 18px 36px -14px rgba(118, 132, 227, 0.55); 
} 
 
.list-item.active .li-thumb { 
  border-color: rgba(118, 132, 227, 0.75); 
  box-shadow: 
    0 22px 44px -14px rgba(118, 132, 227, 0.65), 
    inset 0 0 0 2px rgba(118, 132, 227, 0.45); 
} 
 
.li-thumb img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
  transition: transform 0.5s ease, filter 0.3s ease; 
  filter: brightness(0.95) saturate(1.05); 
} 
 
.list-item:hover .li-thumb img, 
.list-item.active .li-thumb img { 
  transform: scale(1.08); 
  filter: brightness(1) saturate(1.2); 
} 
 
.li-thumb-play { 
  position: absolute; 
  inset: 0; 
  display: grid; 
  place-items: center; 
  font-size: 22px; 
  color: #fff; 
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.65)); 
  opacity: 0; 
  transition: opacity 0.3s ease; 
} 
 
.list-item:hover .li-thumb-play, 
.list-item.active .li-thumb-play { 
  opacity: 1; 
} 
 
.list-item.active .li-thumb-play { 
  background: linear-gradient(180deg, rgba(118, 132, 227, 0.3) 30%, rgba(0, 0, 0, 0.7)); 
} 
 
.li-meta { 
  padding: 12px 4px 4px; 
  display: block; 
} 
 
.li-meta h5 { 
  font-size: 14px; 
  font-weight: 700; 
  margin-bottom: 4px; 
  letter-spacing: -0.01em; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  color: var(--text-1); 
  transition: color 0.25s ease; 
} 
 
.list-item.active .li-meta h5, 
.list-item:hover .li-meta h5 { 
  color: #FFCE65; 
} 
 
.li-meta span { 
  font-size: 11px; 
  color: var(--text-3); 
  letter-spacing: 0.03em; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  display: block; 
} 
 
/* 评分胶囊浮在缩略图右上角 */ 
.li-rate { 
  position: absolute; 
  top: 8px; 
  right: 8px; 
  z-index: 2; 
  font-size: 11px; 
  font-weight: 700; 
  color: #ffd66b; 
  letter-spacing: 0.04em; 
  padding: 3px 8px; 
  border-radius: var(--r-pill); 
  background: rgba(0, 0, 0, 0.55); 
  backdrop-filter: blur(10px); 
  border: 1px solid rgba(255, 214, 107, 0.4); 
  white-space: nowrap; 
} 
 
.li-rate::before { 
  content: "★ "; 
  font-size: 10px; 
} 
 
/* ----- 右侧大屏（异形不规则） ----- */ 
.player-stage { 
  position: relative; 
  /* 允许装饰元素溢出 */ 
  overflow: visible; 
} 
 
.stage-frame { 
  position: relative; 
  aspect-ratio: 16 / 9; 
  overflow: visible; 
  background: transparent; 
  isolation: isolate; 
} 
 
/* ----- 海报 3D 堆叠卡组 ----- */ 
.poster-deck { 
  position: absolute; 
  inset: 0; 
  z-index: 2; 
  perspective: 1600px; 
  transform-style: preserve-3d; 
  pointer-events: none; 
} 
 
.poster-card { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  width: 100%; 
  aspect-ratio: 16 / 9; 
  border-radius: 18px; 
  overflow: hidden; 
  cursor: pointer; 
  pointer-events: auto; 
  background: #0a0612; 
  border: 1px solid rgba(255, 255, 255, 0.16); 
  transform: translate(-50%, -50%); 
  transform-style: preserve-3d; 
  will-change: transform, opacity; 
  transition: 
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1), 
    opacity 0.5s ease, 
    box-shadow 0.4s ease, 
    border-color 0.4s ease; 
  box-shadow: 
    0 34px 80px -22px rgba(0, 0, 0, 0.8), 
    inset 0 1px 0 rgba(255, 255, 255, 0.12); 
} 
 
.poster-bg { 
  position: absolute; 
  inset: 0; 
  background-size: cover; 
  background-position: center; 
  filter: blur(16px) brightness(0.5); 
  transform: scale(1.25); 
} 
 
.poster-img { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
  z-index: 1; 
} 
 
.poster-video { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  z-index: 1; 
} 
 
.poster-num { 
  position: absolute; 
  top: 12px; 
  left: 12px; 
  z-index: 2; 
  font-size: 12px; 
  font-weight: 800; 
  letter-spacing: 0.1em; 
  color: #fff; 
  padding: 3px 9px; 
  border-radius: 9px; 
  background: rgba(0, 0, 0, 0.5); 
  backdrop-filter: blur(6px); 
  border: 1px solid rgba(255, 255, 255, 0.28); 
} 
 
/* 卡片右上角全屏按钮 */ 
.poster-fs { 
  position: absolute; 
  top: 12px; 
  right: 12px; 
  z-index: 3; 
  width: 34px; 
  height: 34px; 
  border-radius: 10px; 
  display: grid; 
  place-items: center; 
  cursor: pointer; 
  color: #fff; 
  background: rgba(0, 0, 0, 0.45); 
  border: 1px solid rgba(255, 255, 255, 0.28); 
  backdrop-filter: blur(6px); 
  opacity: 0; 
  transition: opacity 0.3s ease, background 0.25s ease, transform 0.25s ease, border-color 0.25s ease; 
} 
 
.poster-fs svg { width: 18px; height: 18px; } 
 
.poster-card.front .poster-fs, 
.poster-card:hover .poster-fs { opacity: 1; } 
 
.poster-fs:hover { 
  background: var(--grad-brand); 
  border-color: transparent; 
  transform: scale(1.08); 
} 
 
@media (pointer: coarse) { 
  .poster-fs { opacity: 1; } 
} 
 
/* 视频播放按钮（中央大按钮） */ 
.poster-play { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  z-index: 3; 
  width: 64px; 
  height: 64px; 
  border-radius: 50%; 
  display: grid; 
  place-items: center; 
  cursor: pointer; 
  color: #fff; 
  background: rgba(0, 0, 0, 0.45); 
  border: 1.5px solid rgba(255, 255, 255, 0.55); 
  backdrop-filter: blur(6px); 
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); 
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease; 
} 
 
.poster-play svg { width: 26px; height: 26px; margin-left: 3px; } 
 
.poster-play:hover { 
  background: var(--grad-brand); 
  border-color: transparent; 
  transform: translate(-50%, -50%) scale(1.08); 
} 
 
/* 视频弹窗 */ 
.video-modal { 
  position: fixed; 
  inset: 0; 
  z-index: 10000; 
  display: grid; 
  place-items: center; 
  background: rgba(5, 4, 12, 0.94); 
  backdrop-filter: blur(8px); 
  opacity: 0; 
  visibility: hidden; 
  transition: opacity 0.3s ease, visibility 0.3s ease; 
} 
 
.video-modal.open { 
  opacity: 1; 
  visibility: visible; 
} 
 
.video-box { 
  position: relative; 
  width: min(94vw, 1500px); 
  max-height: 92vh; 
  display: flex; 
} 
 
.video-el { 
  width: 100%; 
  height: auto; 
  max-height: 92vh; 
  border-radius: 12px; 
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.85); 
  background: #000; 
} 
 
@media (max-width: 768px) { 
  .video-box { 
    width: 96vw; 
    max-height: 80vh; 
  } 
  .video-el { 
    max-height: 80vh; 
    border-radius: 8px; 
  } 
  .video-close { 
    top: 14px; 
    right: 14px; 
    width: 38px; 
    height: 38px; 
    font-size: 22px; 
  } 
} 
 
.video-close { 
  position: fixed; 
  top: 24px; 
  right: 28px; 
  width: 44px; 
  height: 44px; 
  border-radius: 50%; 
  font-size: 26px; 
  line-height: 1; 
  color: #fff; 
  cursor: pointer; 
  background: rgba(255, 255, 255, 0.12); 
  border: 1px solid rgba(255, 255, 255, 0.3); 
  backdrop-filter: blur(10px); 
  transition: background 0.2s ease, transform 0.2s ease; 
} 
 
.video-close:hover { 
  background: rgba(255, 255, 255, 0.24); 
  transform: scale(1.06); 
} 
 
/* 卡片边缘高光 */ 
.poster-glow { 
  position: absolute; 
  inset: 0; 
  z-index: 2; 
  border-radius: inherit; 
  pointer-events: none; 
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 42%); 
  opacity: 0; 
  transition: opacity 0.4s ease; 
} 
 
/* 海报全屏灯箱 */ 
.poster-lightbox { 
  position: fixed; 
  inset: 0; 
  z-index: 9999; 
  display: grid; 
  place-items: center; 
  background: rgba(5, 4, 12, 0.92); 
  backdrop-filter: blur(8px); 
  opacity: 0; 
  visibility: hidden; 
  transition: opacity 0.3s ease, visibility 0.3s ease; 
} 
 
.poster-lightbox.open { 
  opacity: 1; 
  visibility: visible; 
} 
 
.lightbox-img { 
  max-width: 92vw; 
  max-height: 90vh; 
  object-fit: contain; 
  border-radius: 12px; 
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.85); 
  transform: scale(0.94); 
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); 
} 
 
.poster-lightbox.open .lightbox-img { transform: scale(1); } 
 
.lightbox-close { 
  position: fixed; 
  top: 24px; 
  right: 28px; 
  width: 44px; 
  height: 44px; 
  border-radius: 50%; 
  font-size: 26px; 
  line-height: 1; 
  color: #fff; 
  cursor: pointer; 
  background: rgba(255, 255, 255, 0.12); 
  border: 1px solid rgba(255, 255, 255, 0.3); 
  backdrop-filter: blur(10px); 
  transition: background 0.2s ease, transform 0.2s ease; 
} 
 
.lightbox-close:hover { 
  background: rgba(255, 255, 255, 0.24); 
  transform: scale(1.06); 
} 
 
.lightbox-nav { 
  position: fixed; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 56px; 
  height: 56px; 
  border-radius: 50%; 
  display: grid; 
  place-items: center; 
  cursor: pointer; 
  color: #fff; 
  background: rgba(255, 255, 255, 0.1); 
  border: 1px solid rgba(255, 255, 255, 0.28); 
  backdrop-filter: blur(10px); 
  transition: background 0.2s ease, transform 0.2s ease; 
} 
 
.lightbox-nav svg { width: 26px; height: 26px; } 
.lightbox-prev { left: 3vw; } 
.lightbox-next { right: 3vw; } 
 
.lightbox-nav:hover { 
  background: var(--grad-brand); 
  border-color: transparent; 
  transform: translateY(-50%) scale(1.08); 
} 
 
.lightbox-counter { 
  position: fixed; 
  bottom: 28px; 
  left: 50%; 
  transform: translateX(-50%); 
  font-size: 14px; 
  font-weight: 700; 
  color: #fff; 
  letter-spacing: 0.06em; 
  font-variant-numeric: tabular-nums; 
  padding: 6px 16px; 
  border-radius: var(--r-pill); 
  background: rgba(255, 255, 255, 0.12); 
  border: 1px solid rgba(255, 255, 255, 0.24); 
  backdrop-filter: blur(10px); 
} 
 
.poster-card.front { 
  border-color: rgba(118, 132, 227, 0.65); 
  box-shadow: 
    0 46px 100px -24px rgba(118, 132, 227, 0.72), 
    0 20px 50px -20px rgba(0, 0, 0, 0.7), 
    inset 0 1px 0 rgba(255, 255, 255, 0.28); 
} 
 
.poster-card.front .poster-glow { opacity: 1; } 
 
.poster-card:not(.front):hover { 
  filter: brightness(1.12); 
  border-color: rgba(255, 255, 255, 0.4); 
} 
 
.carousel-nav { 
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 52px; 
  height: 52px; 
  border-radius: 50%; 
  display: grid; 
  place-items: center; 
  cursor: pointer; 
  z-index: 4; 
  color: #fff; 
  background: rgba(10, 6, 18, 0.42); 
  border: 1px solid rgba(255, 255, 255, 0.3); 
  backdrop-filter: blur(12px); 
  opacity: 0; 
  transition: opacity 0.25s ease, background 0.25s ease, transform 0.25s ease, border-color 0.25s ease; 
} 
 
.stage-frame:hover .carousel-nav { opacity: 1; } 
.carousel-nav svg { width: 22px; height: 22px; } 
.carousel-prev { left: 20px; } 
.carousel-next { right: 20px; } 
 
.carousel-nav:hover { 
  background: var(--grad-brand); 
  border-color: transparent; 
  transform: translateY(-50%) scale(1.08); 
  box-shadow: 0 14px 30px -8px rgba(118, 132, 227, 0.7); 
} 
 
@media (pointer: coarse) { 
  .carousel-nav { opacity: 1; } 
} 
 
.stage-index { 
  font-size: 13px; 
  font-weight: 700; 
  color: #fff; 
  padding: 5px 12px; 
  border-radius: var(--r-pill); 
  background: rgba(0, 0, 0, 0.45); 
  border: 1px solid rgba(255, 255, 255, 0.3); 
  backdrop-filter: blur(10px); 
  font-variant-numeric: tabular-nums; 
  letter-spacing: 0.04em; 
} 
 
.stage-hint { 
  display: inline-block; 
  margin-top: 4px; 
  font-size: 12px; 
  font-weight: 600; 
  letter-spacing: 0.04em; 
  color: rgba(255, 255, 255, 0.62); 
} 
 
 
 
@keyframes kenBurns { 
  from { transform: scale(1.04) translate(-1%, 0); } 
  to   { transform: scale(1.12) translate(2%, -2%); } 
} 
 
.stage-mask { 
  position: absolute; 
  inset: 0; 
  background: 
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0.95) 100%), 
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, transparent 50%); 
  z-index: 1; 
  pointer-events: none; 
} 
 
.stage-topbar { 
  position: absolute; 
  top: 60px; 
  left: 22px; 
  right: 22px; 
  z-index: 2; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  gap: 14px; 
  flex-wrap: wrap; 
} 
 
.stage-tags { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
} 
 
.stage-tag { 
  font-size: 11px; 
  font-weight: 700; 
  padding: 5px 12px; 
  border-radius: var(--r-pill); 
  background: linear-gradient(135deg, #ff4d4d, #ff7a4d); 
  color: #fff; 
  letter-spacing: 0.06em; 
  box-shadow: 0 6px 18px -4px rgba(255, 77, 77, 0.5); 
} 
 
.stage-tag.tag-pink { background: linear-gradient(135deg, #ff5b8a, #ff8aa6); box-shadow: 0 6px 18px -4px rgba(255, 91, 138, 0.5); } 
.stage-tag.tag-purple { background: linear-gradient(135deg, #8a5bff, #b496ff); box-shadow: 0 6px 18px -4px rgba(138, 91, 255, 0.5); } 
.stage-tag.tag-blue { background: linear-gradient(135deg, #0535FF, #3444AC); box-shadow: 0 6px 18px -4px rgba(118, 132, 227, 0.55); } 
.stage-tag.tag-red { background: linear-gradient(135deg, #ff4d4d, #ff7a4d); } 
 
.stage-genre { 
  font-size: 12px; 
  color: rgba(255, 255, 255, 0.78); 
  letter-spacing: 0.06em; 
} 
 
.stage-extras { 
  display: flex; 
  align-items: center; 
  gap: 14px; 
} 
 
.stage-rate { 
  font-size: 13px; 
  font-weight: 700; 
  color: #ffd66b; 
  padding: 5px 12px; 
  border-radius: var(--r-pill); 
  background: rgba(0, 0, 0, 0.45); 
  border: 1px solid rgba(255, 214, 107, 0.4); 
  backdrop-filter: blur(10px); 
  letter-spacing: 0.04em; 
} 
 
.stage-duration { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  font-size: 12px; 
  color: rgba(255, 255, 255, 0.78); 
  font-variant-numeric: tabular-nums; 
} 
 
.stage-duration svg { width: 14px; height: 14px; } 
 
/* 中央播放按钮 */ 
.stage-play { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  width: 86px; 
  height: 86px; 
  border-radius: 50%; 
  border: none; 
  z-index: 3; 
  background: #ffffff; 
  backdrop-filter: blur(20px) saturate(180%); 
  color: #FF0000; 
  display: grid; 
  place-items: center; 
  cursor: pointer; 
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; 
  box-shadow: 
    0 24px 60px -16px rgba(0, 0, 0, 0.5), 
    0 0 0 6px rgba(255, 255, 255, 0.18), 
    inset 0 1px 0 rgba(255, 255, 255, 0.9); 
} 
 
.stage-play svg { 
  width: 36px; 
  height: 36px; 
  margin-left: 4px; 
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25)); 
} 
 
.stage-play:hover { 
  background: linear-gradient(135deg, #F76B4F 0%, #E0408E 100%); 
  color: #ffffff; 
  transform: translate(-50%, -50%) scale(1.08); 
  box-shadow: 
    0 28px 70px -16px rgba(224, 64, 142, 0.7), 
    0 0 0 8px rgba(255, 255, 255, 0.2), 
    inset 0 1px 0 rgba(255, 255, 255, 0.9); 
} 
 
.stage-play-ring { 
  position: absolute; 
  inset: -10px; 
  border-radius: 50%; 
  border: 1px solid rgba(255, 255, 255, 0.55); 
  animation: ringPulse 2.6s ease-out infinite; 
  pointer-events: none; 
} 
 
.stage-play-ring-2 { 
  animation-delay: -1.3s; 
} 
 
@keyframes ringPulse { 
  0%   { transform: scale(0.85); opacity: 0.9; } 
  70%  { transform: scale(1.45); opacity: 0; } 
  100% { transform: scale(1.45); opacity: 0; } 
} 
 
/* 底部信息 */ 
.stage-info { 
  position: absolute; 
  left: 28px; 
  right: 28px; 
  bottom: 26px; 
  z-index: 2; 
  max-width: 70%; 
} 
 
.stage-title { 
  font-size: clamp(28px, 3vw, 40px); 
  font-weight: 800; 
  line-height: 1.1; 
  letter-spacing: -0.02em; 
  margin-bottom: 10px; 
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); 
} 
 
.stage-desc { 
  color: rgba(255, 255, 255, 0.82); 
  font-size: 13.5px; 
  line-height: 1.65; 
  margin-bottom: 18px; 
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical; 
  overflow: hidden; 
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); 
} 
 
.stage-actions { 
  display: flex; 
  gap: 10px; 
  flex-wrap: wrap; 
} 
 
.stage-btn { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  padding: 11px 22px; 
  border-radius: var(--r-pill); 
  font-family: inherit; 
  font-size: 13px; 
  font-weight: 700; 
  border: 1px solid rgba(255, 255, 255, 0.45); 
  background: rgba(255, 255, 255, 0.18); 
  backdrop-filter: blur(14px); 
  color: #fff; 
  cursor: pointer; 
  transition: transform 0.2s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; 
} 
 
.stage-btn svg { width: 16px; height: 16px; } 
 
.stage-btn:hover { 
  transform: translateY(-2px); 
  background: rgba(255, 255, 255, 0.28); 
  border-color: #ffffff; 
} 
 
.stage-btn.primary { 
  background: #ffffff; 
  color: #0535FF; 
  border-color: #ffffff; 
  box-shadow: 0 14px 30px -8px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.9); 
} 
 
.stage-btn.primary:hover { 
  background: #FFCE65; 
  color: #0535FF; 
  box-shadow: 0 18px 40px -10px rgba(255, 206, 101, 0.85); 
} 
 
/* 播放进度条 */ 
.stage-progress { 
  position: absolute; 
  left: 22px; 
  right: 22px; 
  bottom: 22px; 
  z-index: 4; 
  display: flex; 
  align-items: center; 
  gap: 14px; 
  padding: 10px 16px; 
  border-radius: var(--r-pill); 
  background: rgba(7, 13, 36, 0.6); 
  backdrop-filter: blur(20px) saturate(180%); 
  border: 1px solid rgba(255, 255, 255, 0.14); 
  color: #fff; 
  animation: progressIn 0.4s ease both; 
} 
 
@keyframes progressIn { 
  from { opacity: 0; transform: translateY(10px); } 
  to   { opacity: 1; transform: translateY(0); } 
} 
 
.progress-pause, 
.progress-fs { 
  width: 32px; 
  height: 32px; 
  border-radius: 50%; 
  border: none; 
  background: rgba(255, 255, 255, 0.12); 
  color: #fff; 
  display: grid; 
  place-items: center; 
  cursor: pointer; 
  transition: background 0.2s ease; 
} 
 
.progress-pause svg, 
.progress-fs svg { width: 14px; height: 14px; } 
 
.progress-pause:hover, 
.progress-fs:hover { 
  background: var(--c-cyan); 
  color: #fff; 
} 
 
.progress-time { 
  font-size: 12px; 
  font-weight: 600; 
  font-variant-numeric: tabular-nums; 
  color: var(--text-2); 
  min-width: 38px; 
} 
 
.progress-bar { 
  flex: 1; 
  height: 4px; 
  border-radius: 2px; 
  background: rgba(255, 255, 255, 0.16); 
  overflow: hidden; 
  position: relative; 
} 
 
.progress-bar-fill { 
  position: absolute; 
  inset: 0; 
  width: 0%; 
  background: var(--grad-brand); 
  border-radius: 2px; 
  transition: width 0.5s linear; 
  box-shadow: 0 0 12px rgba(118, 132, 227, 0.8); 
} 
 
.progress-bar-fill::after { 
  content: ""; 
  position: absolute; 
  right: -4px; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 10px; 
  height: 10px; 
  border-radius: 50%; 
  background: #fff; 
  box-shadow: 0 0 10px rgba(118, 132, 227, 0.9); 
} 
 
/* 播放中：隐藏中央按钮和底部信息 */ 
.stage-frame.playing .stage-play, 
.stage-frame.playing .stage-info { 
  opacity: 0; 
  pointer-events: none; 
  transition: opacity 0.35s ease; 
} 
 
.stage-frame.playing .stage-mask { 
  background: 
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.05) 70%, rgba(0, 0, 0, 0.7) 100%); 
} 
 
/* ===== 异形溢出装饰：右下角"预告片"浮卡 ===== */ 
.stage-floating-card { 
  position: absolute; 
  bottom: -28px; 
  right: -16px; 
  z-index: 6; 
  display: flex; 
  align-items: center; 
  gap: 14px; 
  padding: 12px 18px 12px 14px; 
  border-radius: 20px 6px 20px 6px; 
  background: rgba(7, 13, 36, 0.78); 
  backdrop-filter: blur(24px) saturate(180%); 
  border: 1px solid rgba(255, 255, 255, 0.18); 
  box-shadow: 
    0 30px 60px -16px rgba(0, 0, 0, 0.6), 
    inset 0 1px 0 rgba(255, 255, 255, 0.18); 
  overflow: hidden; 
} 
 
.floating-glow { 
  position: absolute; 
  top: -40px; 
  right: -40px; 
  width: 140px; 
  height: 140px; 
  background: radial-gradient(circle, rgba(118, 132, 227, 0.55), transparent 70%); 
  border-radius: 50%; 
  filter: blur(20px); 
  pointer-events: none; 
} 
 
.floating-icon { 
  position: relative; 
  width: 36px; 
  height: 36px; 
  border-radius: 50%; 
  display: grid; 
  place-items: center; 
  background: #ffffff; 
  color: #0535FF; 
  flex-shrink: 0; 
  box-shadow: 0 8px 18px -4px rgba(255, 255, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.9); 
} 
 
.floating-icon svg { width: 14px; height: 14px; margin-left: 1px; } 
 
.floating-meta { 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  gap: 3px; 
  padding-right: 6px; 
} 
 
.floating-label { 
  font-size: 9px; 
  font-weight: 700; 
  letter-spacing: 0.28em; 
  color: #ffffff; 
} 
 
.floating-time { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  font-size: 14px; 
  font-weight: 700; 
  color: #fff; 
  font-variant-numeric: tabular-nums; 
  letter-spacing: 0.04em; 
} 
 
.floating-time svg { width: 14px; height: 14px; opacity: 0.75; } 
 
/* 响应式 */ 
@media (max-width: 1024px) { 
  .player { 
    gap: 44px; 
    padding: 0 4px; 
  } 
  .stage-info { 
    max-width: 92%; 
  } 
  .stage-floating-card { 
    bottom: -22px; 
    right: 12px; 
  } 
  .list-item { width: 200px; } 
} 
 
@media (max-width: 600px) { 
  .stage-frame { 
    border-radius: 28px 8px 28px 8px; 
  } 
  .stage-topbar { 
    top: 14px; 
    left: 14px; 
    right: 14px; 
  } 
  .stage-info { 
    left: 16px; 
    right: 16px; 
    bottom: 18px; 
    max-width: 100%; 
  } 
  .stage-title { 
    font-size: 22px; 
  } 
  .stage-desc { 
    font-size: 12px; 
    -webkit-line-clamp: 2; 
  } 
  .stage-btn { 
    padding: 8px 14px; 
    font-size: 12px; 
  } 
  .stage-play { 
    width: 64px; 
    height: 64px; 
  } 
  .stage-play svg { width: 28px; height: 28px; } 
  .stage-extras .stage-duration { display: none; } 
  .stage-floating-card { 
    bottom: -18px; 
    right: 8px; 
    padding: 10px 14px 10px 12px; 
  } 
  .list-item { width: 168px; } 
} 
 
/* ====== Modes 双模式 ====== */ 
.modes-inner { 
  max-width: 1240px; 
  margin: 0 auto; 
  border-radius: var(--r-xl); 
  padding: 60px 64px; 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 40px; 
  align-items: center; 
  overflow: hidden; 
  position: relative; 
} 
 
.modes-copy .section-title { 
  text-align: left; 
  margin-top: 18px; 
} 
 
.modes-copy p { 
  margin: 22px 0; 
  color: var(--text-3); 
} 
 
.modes-list { 
  list-style: none; 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 14px; 
  margin-top: 24px; 
} 
 
.modes-list li { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  font-size: 14px; 
  color: var(--text-2); 
} 
 
.modes-list span { 
  width: 8px; 
  height: 8px; 
  border-radius: 50%; 
  flex-shrink: 0; 
} 
 
.dot-blue { background: var(--c-blue); box-shadow: 0 0 10px var(--c-blue); } 
.dot-cyan { background: var(--c-cyan); box-shadow: 0 0 10px var(--c-cyan); } 
.dot-mint { background: var(--c-mint); box-shadow: 0 0 10px var(--c-mint); } 
.dot-pink { background: var(--c-pink); box-shadow: 0 0 10px var(--c-pink); } 
 
.modes-visual { 
  position: relative; 
  height: 360px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
 
.modes-logo { 
  width: 180px; 
  height: 180px; 
  border-radius: 36px; 
  z-index: 2; 
  filter: drop-shadow(0 30px 60px rgba(118, 132, 227, 0.55)); 
  animation: floatLogo 5s ease-in-out infinite alternate; 
} 
 
@keyframes floatLogo { 
  from { transform: translateY(-6px); } 
  to   { transform: translateY(6px); } 
} 
 
.modes-ring { 
  position: absolute; 
  border-radius: 50%; 
  border: 1px solid rgba(118, 132, 227, 0.2); 
  animation: rotateRing 30s linear infinite; 
} 
 
.r1 { width: 240px; height: 240px; border-color: rgba(118, 132, 227, 0.45); } 
.r2 { width: 320px; height: 320px; border-color: rgba(217, 122, 133, 0.35); animation-duration: 50s; animation-direction: reverse; } 
.r3 { width: 420px; height: 420px; border-color: rgba(255, 156, 121, 0.22); animation-duration: 80s; } 
 
@keyframes rotateRing { 
  from { transform: rotate(0deg); } 
  to   { transform: rotate(360deg); } 
} 
 
/* ====== 数据 ====== */ 
.stats-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 20px; 
  max-width: 1240px; 
  margin: 0 auto; 
} 
 
.stat-item { 
  padding: 32px 24px; 
  border-radius: var(--r-lg); 
  text-align: center; 
} 
 
.stat-num { 
  font-family: "Sora", sans-serif; 
  font-size: clamp(36px, 4vw, 52px); 
  font-weight: 800; 
  line-height: 1; 
  letter-spacing: -0.02em; 
} 
 
.stat-label { 
  margin-top: 12px; 
  color: var(--text-3); 
  font-size: 13px; 
  letter-spacing: 0.04em; 
} 
 
/* ====== CTA 下载 ====== */ 
.cta-download { 
  padding-bottom: 160px; 
} 
 
.cta-inner { 
  position: relative; 
  max-width: 1180px; 
  margin: 0 auto; 
  border-radius: var(--r-xl); 
  padding: 80px 64px; 
  overflow: hidden; 
  text-align: center; 
} 
 
.cta-glow { 
  position: absolute; 
  inset: -50%; 
  background: radial-gradient(closest-side, rgba(118, 132, 227, 0.45), transparent 70%); 
  filter: blur(60px); 
  z-index: 0; 
} 
 
.cta-text { 
  position: relative; 
  z-index: 1; 
  max-width: 720px; 
  margin: 0 auto 40px; 
} 
 
.cta-text .section-title { 
  margin-top: 14px; 
} 
 
.cta-text p { 
  color: var(--text-3); 
  margin-top: 16px; 
} 
 
.cta-inner .download-row {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  margin-bottom: 0;
}
 
/* ====== Footer ====== */ 
.footer { 
  padding: 80px 24px 40px; 
  border-top: 1px solid rgba(255, 255, 255, 0.06); 
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.4)); 
} 
 
.footer-top { 
  max-width: 1240px; 
  margin: 0 auto; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  gap: 32px; 
  flex-wrap: wrap; 
  padding-bottom: 32px; 
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); 
} 
 
.footer-brand { 
  display: flex; 
  align-items: center; 
  gap: 16px; 
} 
 
.footer-brand .brand-logo { 
  width: 56px; 
  height: 56px; 
  border-radius: 14px; 
} 
 
.footer-brand .brand-name { 
  font-size: 17px; 
} 
 
.footer-tag { 
  font-size: 12px; 
  color: var(--text-3); 
  margin-top: 4px; 
  letter-spacing: 0.1em; 
} 
 
/* 关于：横向胶囊式链接行 */ 
.footer-cols { 
  display: flex; 
  align-items: center; 
  gap: 6px; 
  flex-wrap: wrap; 
} 
 
.footer-cols a { 
  display: inline-flex; 
  align-items: center; 
  color: var(--text-2); 
  font-size: 13px; 
  text-decoration: none; 
  padding: 8px 16px; 
  border-radius: var(--r-pill); 
  background: rgba(255, 255, 255, 0.04); 
  border: 1px solid rgba(255, 255, 255, 0.08); 
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; 
  white-space: nowrap; 
} 
 
.footer-cols a:hover { 
  color: #ffffff; 
  background: rgba(255, 255, 255, 0.16); 
  border-color: rgba(255, 255, 255, 0.45); 
  transform: translateY(-1px); 
} 
 
.footer-bottom { 
  max-width: 1240px; 
  margin: 30px auto 0; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  font-size: 12px; 
  color: var(--text-4); 
  flex-wrap: wrap; 
  gap: 12px; 
} 
 
/* ====== 响应式 ====== */ 
@media (max-width: 1024px) { 
  .hero-inner { 
    grid-template-columns: 1fr; 
    gap: 40px; 
  } 
  .hero-visual { 
    height: 560px; 
  } 
  .feature-grid { 
    grid-template-columns: repeat(2, 1fr); 
  } 
  .stats-grid { 
    grid-template-columns: repeat(2, 1fr); 
  } 
  .modes-inner { 
    grid-template-columns: 1fr; 
    padding: 50px 40px; 
  } 
  .modes-copy .section-title { 
    text-align: center; 
  } 
  .modes-list { 
    grid-template-columns: 1fr; 
  } 
  .footer-top { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 24px; 
  } 
  body { cursor: auto; }
  .cursor-glow { display: none; }
}

/* CTA 下载按钮：宽度不足以四列横排时降为两列，避免文字截断 */ 
@media (max-width: 1120px) { 
  .cta-inner .download-row { 
    grid-template-columns: repeat(2, auto); 
  } 
} 
 
@media (max-width: 720px) { 
  .nav { 
    padding: 10px 14px; 
    gap: 10px; 
  } 
  .nav-links { display: none; } 
  .brand-en { display: none; } 
 
  .hero { 
    padding: 120px 18px 60px; 
  } 
 
  .hero-title { font-size: 56px; } 
 
  .feature-grid, 
  .stats-grid { 
    grid-template-columns: 1fr; 
  } 
 
  .download-row, 
  .cta-inner .download-row { grid-template-columns: 1fr; } 
 
  .dl-btn { min-width: 100%; } 
 
  section { padding: 80px 18px; } 
 
  .cta-inner { padding: 50px 24px; } 
 
  .modes-inner { padding: 40px 24px; } 
 
  .phone { width: 240px; height: 500px; } 
 
  .phone-back { transform: translate(-90px, 20px) rotate(-8deg); } 
  .phone-front { transform: translate(70px, -10px) rotate(6deg); } 
 
  .footer-bottom { justify-content: center; text-align: center; } 
} 
 
/* ===== 移动端竖屏：≤ 480px ===== */ 
@media (max-width: 480px) { 
  /* 顶部导航更紧凑 */ 
  .nav { 
    top: 8px; 
    padding: 8px 10px 8px 12px; 
    width: calc(100% - 16px); 
    gap: 8px; 
  } 
  .brand-logo { width: 32px; height: 32px; border-radius: 8px; } 
  .brand-name { font-size: 14px; } 
  .nav-cta { 
    padding: 8px 12px; 
    font-size: 12px; 
  } 
  .nav-cta svg { width: 14px; height: 14px; } 
 
  /* Hero 区域字号收窄 */ 
  .hero { 
    padding: 96px 16px 40px; 
  } 
  .hero-title { 
    font-size: 44px; 
    margin-bottom: 16px; 
  } 
  .hero-sub { 
    font-size: 14px; 
    margin-bottom: 28px; 
  } 
  .glass-pill { 
    font-size: 11px; 
    padding: 6px 12px; 
    margin-bottom: 20px; 
  } 
 
  /* 下载按钮：单列 + 紧凑 */ 
  .download-row { 
    gap: 10px; 
    margin-bottom: 28px; 
  } 
  .dl-btn { 
    padding: 12px 16px; 
    min-width: 100%; 
  } 
  .dl-btn .dl-icon { width: 28px; height: 28px; } 
  .dl-btn .dl-icon svg { width: 24px; height: 24px; } 
  .dl-btn .dl-name { font-size: 15px; } 
 
  /* Hero meta 三列变两列+换行 */ 
  .hero-meta { 
    gap: 16px; 
    justify-content: space-between; 
  } 
  .meta-item strong { font-size: 22px; } 
  .meta-divider { display: none; } 
 
  /* 双手机预览：缩小且重叠收紧 */ 
  .hero-visual { 
    height: 480px; 
  } 
  .phone { 
    width: 200px; 
    height: 420px; 
    border-radius: 36px; 
    padding: 10px; 
  } 
  .phone-screen { border-radius: 26px; } 
  .phone-back  { transform: translate(-70px, 20px) rotate(-8deg); } 
  .phone-front { transform: translate(60px, -10px) rotate(6deg); } 
  .float-card { display: none; } 
 
  /* Section 通用 padding */ 
  section { 
    padding: 64px 16px; 
  } 
  .section-head { margin-bottom: 40px; } 
  .section-title { font-size: 28px !important; } 
  .section-sub { font-size: 13px; } 
 
  /* Player 大屏 */ 
  .player { 
    gap: 36px; 
  } 
  .stage-frame { 
    border-radius: 22px 8px 22px 8px; 
  } 
  .stage-topbar { 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    gap: 8px; 
  } 
  .stage-tag { 
    font-size: 9px; 
    padding: 3px 8px; 
  } 
  .stage-genre { display: none; } 
  .stage-rate { 
    font-size: 11px; 
    padding: 3px 8px; 
  } 
  .stage-info { 
    left: 14px; 
    right: 14px; 
    bottom: 14px; 
  } 
  .stage-title { 
    font-size: 19px !important; 
    margin-bottom: 6px; 
  } 
  .stage-desc { 
    font-size: 11px; 
    margin-bottom: 12px; 
    -webkit-line-clamp: 2; 
  } 
  .stage-actions { 
    gap: 6px; 
  } 
  .stage-btn { 
    padding: 7px 12px; 
    font-size: 11px; 
  } 
  .stage-btn svg { width: 13px; height: 13px; } 
  .stage-play { width: 56px; height: 56px; } 
  .stage-play svg { width: 24px; height: 24px; } 
  .stage-play-ring { inset: -6px; } 
 
  /* 进度条 */ 
  .stage-progress { 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
    gap: 8px; 
    padding: 6px 10px; 
  } 
  .progress-pause, .progress-fs { 
    width: 28px; 
    height: 28px; 
  } 
  .progress-time { 
    font-size: 11px; 
    min-width: 34px; 
  } 
 
  /* 浮卡进一步缩小且不挡视觉中心 */ 
  .stage-floating-card { 
    bottom: -16px; 
    right: 12px; 
    padding: 8px 12px 8px 10px; 
    gap: 8px; 
    border-radius: 16px 4px 16px 4px; 
  } 
  .floating-icon { width: 28px; height: 28px; } 
  .floating-icon svg { width: 12px; height: 12px; } 
  .floating-label { font-size: 8px; letter-spacing: 0.22em; } 
  .floating-time { font-size: 12px; } 
  .floating-time svg { width: 12px; height: 12px; } 
 
  /* 横向列表卡片更小 */ 
  .list-head { padding: 0 4px 12px; } 
  .list-title { font-size: 11px; letter-spacing: 0.26em; } 
  .list-count { font-size: 10px; } 
  .list-more { width: 32px; height: 32px; } 
  .list-items { 
    gap: 12px; 
    padding: 6px 4px 12px; 
  } 
  .list-item { width: 144px; } 
  .li-thumb { border-radius: 12px; } 
  .li-meta { padding: 10px 2px 2px; } 
  .li-meta h5 { font-size: 13px; } 
  .li-meta span { font-size: 10px; } 
  .li-rate { 
    top: 6px; 
    right: 6px; 
    font-size: 10px; 
    padding: 2px 6px; 
  } 
 
  /* 特色卡 */ 
  .feature-card { padding: 24px 22px; } 
  .feature-card h3 { font-size: 19px; } 
  .feature-card p { font-size: 13.5px; } 
  .feat-icon { width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; } 
  .feat-icon svg { width: 24px; height: 24px; } 
 
  /* 双模式 */ 
  .modes-inner { 
    padding: 36px 22px; 
    gap: 24px; 
  } 
  .modes-list { 
    gap: 10px; 
    grid-template-columns: 1fr 1fr; 
  } 
  .modes-list li { font-size: 13px; } 
  .modes-visual { 
    height: 240px; 
  } 
  .modes-logo { width: 130px; height: 130px; border-radius: 28px; } 
  .r1 { width: 180px; height: 180px; } 
  .r2 { width: 240px; height: 240px; } 
  .r3 { display: none; } 
 
  /* 数据 */ 
  .stat-item { padding: 24px 18px; } 
  .stat-num { font-size: 32px !important; } 
  .stat-label { font-size: 12px; } 
 
  /* CTA */ 
  .cta-download { padding-bottom: 100px; } 
  .cta-inner { 
    padding: 40px 20px; 
    border-radius: 24px; 
  } 
 
  /* Footer */ 
  .footer { padding: 48px 16px 24px; } 
  .footer-top { gap: 18px; padding-bottom: 22px; } 
  .footer-brand { gap: 12px; } 
  .footer-brand .brand-logo { width: 44px; height: 44px; border-radius: 11px; } 
  .footer-brand .brand-name { font-size: 15px; } 
  .footer-tag { font-size: 11px; } 
  .footer-cols { gap: 6px; } 
  .footer-cols a { 
    font-size: 12px; 
    padding: 7px 12px; 
  } 
  .footer-bottom { 
    flex-direction: column; 
    text-align: center; 
    gap: 8px; 
    margin-top: 18px; 
    font-size: 11px; 
  } 
 
  /* 滚动提示在小屏隐藏 */ 
  .scroll-hint { display: none; } 
} 
 
/* ===== 极窄屏：≤ 360px ===== */ 
@media (max-width: 360px) { 
  .hero-title { font-size: 36px; } 
  .section-title { font-size: 24px !important; } 
  .stage-title { font-size: 17px !important; } 
  .stage-actions .stage-btn:nth-child(3) { display: none; } 
  .list-item { width: 132px; } 
  .phone { width: 180px; height: 380px; } 
} 
 
/* ===== 横屏手机 (landscape) ===== */ 
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) { 
  .hero { 
    padding: 100px 24px 40px; 
    min-height: auto; 
  } 
  .hero-visual { height: 360px; } 
  .phone { width: 180px; height: 380px; } 
  .scroll-hint { display: none; } 
} 
 
/* ===== 手机竖屏：海报改为竖向列表 ===== */ 
@media (max-width: 640px) and (orientation: portrait) { 
  .player-stage { overflow: visible; } 
 
  .stage-frame { 
    aspect-ratio: auto; 
    height: auto; 
    overflow: visible; 
    display: flex; 
    flex-direction: column; 
    gap: 14px; 
    padding: 16px; 
    border-radius: 20px; 
    background: #0a0612; 
  } 
  .stage-frame::before { display: none; } 
 
  .stage-topbar, 
  .stage-info { 
    position: static; 
    inset: auto; 
    left: auto; 
    right: auto; 
    bottom: auto; 
    max-width: 100%; 
  } 
  .stage-topbar { order: 1; } 
  .stage-info { order: 2; } 
  .poster-deck { order: 3; } 
 
  .poster-deck { 
    position: static; 
    perspective: none; 
    transform-style: flat; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    height: auto; 
    pointer-events: auto; 
  } 
 
  .poster-card { 
    position: relative !important; 
    top: auto; 
    left: auto; 
    width: 100%; 
    height: auto; 
    aspect-ratio: 16 / 9; 
    transform: none !important; 
    opacity: 1 !important; 
    z-index: auto !important; 
    box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.75); 
  } 
  .poster-card.front { 
    box-shadow: 0 24px 50px -18px rgba(118, 132, 227, 0.5); 
  } 
 
  .poster-glow, 
  .carousel-nav, 
  .stage-hint { display: none; } 
} 
 
/* 减少动画 */ 
@media (prefers-reduced-motion: reduce) { 
  *, *::before, *::after { 
    animation-duration: 0.01ms !important; 
    transition-duration: 0.01ms !important; 
  } 
} 

/* ===== 移动端性能降级（触屏设备）：关闭模糊、玻璃拟态与背景动画 ===== */
@media (pointer: coarse), (hover: none) {
  /* 1. 大光斑：去掉高斯模糊 + 无限位移动画（GPU/发热最大开销） */
  .blob,
  .player-glow,
  .cta-glow {
    filter: none;
    animation: none;
  }
  .blob-a, .blob-b, .blob-c { opacity: 0.45; }

  /* 2. 噪点：关闭 overlay 混合模式，降低滚动合成成本 */
  .noise { mix-blend-mode: normal; opacity: 0.03; }

  /* 3. 玻璃拟态：去掉 backdrop-filter，改实色半透明底 */
  .glass,
  .phone,
  .li-rate,
  .poster-num,
  .poster-fs,
  .poster-play,
  .video-modal,
  .video-close,
  .poster-lightbox {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .glass { background: rgba(20, 28, 56, 0.72); }
  .phone { background: rgba(15, 22, 46, 0.55); }

  /* 4. 海报卡：去掉模糊背景 */
  .poster-bg { filter: none; }

  /* 5. 鼠标跟随光晕触屏端不展示，避免空耗合成层 */
  .cursor-glow { display: none; }
}