/* 这是引入了一些字体 */
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap'); 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  /* 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时 */
  scroll-behavior: smooth; 
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  /* 下方内容区统一使用首页深紫背景，让整页和首屏风格保持一致。 */
  --page-section-bg: #1c0522;
  background: linear-gradient(#2b1055,#7597de);
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 30px 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10000;
}

header .logo {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 2em;
  /* 真实 logo 容器：横向摆放图标和品牌文字，不添加可见外框。 */
  width: auto;
  height: 72px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  line-height: 0;
  text-transform: none;
  letter-spacing: 2px;
}

header .logo img {
  /* 限制 logo 图片显示尺寸，保留图标自身比例和透明边缘。 */
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  /* 用轻微阴影贴合夜景背景，不再使用外层容器框。 */
  filter: drop-shadow(0 8px 14px rgba(28, 5, 34, 0.24));
}

header .logo-text {
  /* 品牌文字沿用原来 LOGO 的白色、粗体、大字号和字距风格。 */
  color: #fff;
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 2px;
}

header ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

header ul li {
  list-style: none;
  margin-left: 20px;
}

header ul li a {
  text-decoration: none;
  padding: 6px 15px;
  color: #fff;
  border-radius: 20px;
}

header ul li a:hover,
header ul li a.active {
  background: #fff;
  color: #2b1055;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

section::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to top, #1c0522, transparent);
  z-index: 1000;
}

section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* object-fit CSS 属性指定可替换元素（例如：<img> 或 <video>）的内容应该如何适应到其使用高度和宽度确定的框。 */
  object-fit: cover;
  pointer-events: none;
}

@property --moon-spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --moon-scale {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

section img#moon {
  /* mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。 */ 
  mix-blend-mode: screen;
  /* 月亮保持水平居中，垂直位置上移到山峰上方的主视觉区域。 */
  top: 28%;
  left: 50%;
  width: 25%;
  height: 25%;
  /* logo 图片按比例完整显示，避免当前尺寸下被 object-fit: cover 裁切。 */
  object-fit: contain;
  /* 用亮度、饱和度和光晕模拟之前月亮的发光融合效果。 */
  /* filter:
    brightness(1.18)
    saturate(1.08)
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.75))
    drop-shadow(0 0 46px rgba(126, 124, 255, 0.72))
    drop-shadow(0 0 82px rgba(117, 151, 222, 0.48)); */
  /* 滚动偏移交给 JS 更新，默认值保证页面刚打开时月亮在正中间。 */
  --moon-scroll-y: 0px;
  --moon-spin: 0deg;
  --moon-scale: 1;
  /* 先把月亮自身中心对齐到屏幕中心，再叠加下滑时的视差偏移。 */
  transform:
    translate(-50%, calc(-50% + var(--moon-scroll-y)))
    /* rotate(var(--moon-spin)) */
    scale(var(--moon-scale));
  transform-origin: 50% 50%;
  /* animation: moonTornadoPulse 5s ease-in-out infinite; */
  /* 滚出首页后由 JS 淡出，避免小 logo 残留到核心优势区域。 */
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

@keyframes moonTornadoPulse {
  0%,
  68%,
  100% {
    --moon-spin: 0deg;
    --moon-scale: 1;
  }

  78% {
    --moon-spin: 160deg;
    --moon-scale: 1.06;
  }

  88% {
    --moon-spin: 360deg;
    --moon-scale: 1.1;
  }

  94% {
    --moon-spin: 360deg;
    --moon-scale: 1;
  }
}

section img#mountains_front {
  z-index: 10;
}

#text {
  position: absolute;
  top: 48%;
  left: 50%;
  color: #fff;
  white-space: nowrap;
  font-size: clamp(3.2rem, 7.5vw, 8.5rem);
  line-height: 1;
  --text-slide-x: -120px;
  --text-opacity: 0;
  transform: translate(calc(-50% + var(--text-slide-x)), -50%);
  opacity: var(--text-opacity);
  will-change: transform, opacity;
  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.35s ease;
  z-index: 9;
}

#btn {
  text-decoration: none;
  display: inline-block;
  padding: 8px 30px;
  border-radius: 40px;
  background: #fff;
  color: #2b1055;
  font-size: 1.5em;
  z-index: 9;
  transform: translateY(100px);
}

.sec {
  position: relative;
  /* 保持原有深紫背景，只调整内容区间距来匹配参考图的板块节奏。 */
  padding: 96px 0 110px;
  background: var(--page-section-bg);
  /* 导航点击“核心优势”时保留一点顶部空间，让标题和卡片定位更自然。 */
  scroll-margin-top: 24px;
}

.sec-header {
  /* 标题区居中展示，形成参考图中“标题 + 副标题”的结构。 */
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto 52px;
  text-align: center;
}

.sec-header h2 {
  /* 标题保留大字号，但在深色背景上使用白色以保持原背景可读性。 */
  font-size: 3.2em;
  line-height: 1.15;
  margin-bottom: 10px;
  color: #fff;
}

.sec-header p {
  /* 副标题使用半透明白色，降低层级，避免抢过主标题。 */
  font-size: 1.05em;
  color: rgba(255, 255, 255, 0.72);
}

.feature-carousel-wrap {
  /* 卡片轮播外层固定左右边界，超出边界的卡片会被裁掉。 */
  position: relative;
  width: min(100% - 272px, 1648px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  /* 控制两侧柔边宽度，只保留边缘一小条过渡，避免大面积压暗卡片。 */
  --carousel-fade-size: clamp(18px, 1.8vw, 34px);
  /* 使用透明渐隐裁切卡片本身，避免用深色遮罩压在白卡片上产生突兀灰带。 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--carousel-fade-size), #000 calc(100% - var(--carousel-fade-size)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--carousel-fade-size), #000 calc(100% - var(--carousel-fade-size)), transparent 100%);
}

.feature-carousel {
  /* 横向卡片轨道由 JS 持续设置 transform，形成自动循环滑动。 */
  display: flex;
  gap: 28px;
  width: max-content;
  overflow: visible;
  padding: 8px 0 28px;
  user-select: none;
  will-change: transform;
  position: relative;
  z-index: 1;
}

.feature-carousel::-webkit-scrollbar {
  /* 隐藏横向滚动条，让卡片区更接近参考图的干净视觉。 */
  display: none;
}

.feature-card {
  /* 卡片宽度跟随轮播边界变化，桌面端通常展示三张并露出第四张。 */
  position: relative;
  flex: 0 0 clamp(320px, calc((min(100vw - 272px, 1648px) - 56px) / 3), 520px);
  min-height: 300px;
  padding: 34px 32px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: #1f2937;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
  /* 卡片以中心点吸附，保证初始重点卡片和拖拽松手后都能居中停靠。 */
  scroll-snap-align: center;
  transform: translateY(0);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease,
    background-color 0.25s ease;
}

.feature-card-active {
  /* 重点卡片使用紫色描边，呼应主视觉颜色并模拟参考图中间卡片状态。 */
  border: 2px solid rgba(177, 136, 255, 0.9);
  box-shadow: 0 18px 38px rgba(137, 88, 255, 0.26);
}

.feature-card:hover,
.feature-card:focus-within {
  border-color: rgba(139, 92, 246, 0.95);
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.22),
    0 24px 54px rgba(137, 88, 255, 0.34);
  transform: translateY(-10px);
}

.feature-card:hover .feature-icon,
.feature-card:focus-within .feature-icon {
  transform: scale(1.06);
  box-shadow: 0 16px 30px rgba(137, 88, 255, 0.18);
}

.feature-badge {
  /* 右上角角标用于突出重点能力。 */
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c5cff, #a855f7);
  color: #fff;
  font-size: 0.82em;
  font-weight: 700;
}

.feature-icon {
  /* 图标方块模拟参考图的浅色图标容器。 */
  width: 76px;
  height: 76px;
  margin-bottom: 26px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  font-weight: 700;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.feature-icon-blue {
  /* 蓝紫图标用于低门槛接入卡片。 */
  background: #ecebff;
  color: #6b63ff;
}

.feature-icon-purple {
  /* 紫色图标用于重点技术能力卡片。 */
  background: #efe7ff;
  color: #8b5cf6;
}

.feature-icon-pink {
  /* 粉色图标用于简单易用卡片。 */
  background: #ffe9f3;
  color: #ec4899;
}

.feature-icon-green {
  /* 绿色图标用于安全可靠卡片。 */
  background: #e7f8ef;
  color: #22c55e;
}

.feature-card h3 {
  /* 卡片标题使用深色粗体，和参考图的白卡片阅读层级一致。 */
  font-size: 1.45em;
  line-height: 1.25;
  margin-bottom: 18px;
  color: #1f2937;
}

.feature-card ul {
  /* 列表去掉默认缩进，改用自定义圆点。 */
  list-style: none;
}

.feature-card li {
  /* 列表项使用两列布局，左侧为绿色确认符号。 */
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  color: #4b5563;
  line-height: 1.55;
}

.feature-card li::before {
  /* 绿色圆点勾选符号，模拟参考图中的优势列表样式。 */
  content: '✓';
  position: absolute;
  top: 2px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 0.72em;
  line-height: 16px;
  text-align: center;
  font-weight: 700;
}

.download-hero {
  /* 下载体验区改为首页同款深紫背景，保持整页视觉统一。 */
  min-height: 720px;
  height: auto;
  padding: 92px clamp(32px, 4vw, 64px);
  background: var(--page-section-bg);
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr);
  gap: 56px;
  align-items: center;
  overflow: visible;
}

.download-hero::before {
  /* 新增区不需要首屏山谷的底部渐变遮罩，单独关闭全局 section 伪元素。 */
  display: none;
}

.download-copy {
  /* 左侧文案限制最大宽度，避免大屏下文本行长过长。 */
  max-width: 760px;
}

.download-copy h2 {
  /* 深色背景下标题使用白色粗体，保持足够对比度。 */
  color: #fff;
  font-size: clamp(3rem, 4.3vw, 4.9rem);
  line-height: 1.12;
  letter-spacing: 0;
  margin-bottom: 28px;
}

.download-copy h2 > span:not(.headline-line) {
  /* 关键词使用亮蓝紫色，在深色背景上更醒目。 */
  color: #9aa8ff;
}

.download-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.headline-line {
  display: block;
  color: inherit;
}

.download-copy h2 .headline-char {
  display: inline-block;
  color: #fff;
  transform: translateY(0);
  animation: headlineFloat 2.7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.09s);
  will-change: transform;
}

.download-copy h2 .headline-accent {
  color: #9aa8ff;
}

@keyframes headlineFloat {
  0%,
  72%,
  100% {
    transform: translateY(0);
  }

  12% {
    transform: translateY(-0.18em);
  }

  24% {
    transform: translateY(0);
  }
}

.download-copy p {
  /* 说明文字使用半透明白色，保持和标题的层级差。 */
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.18rem;
  line-height: 1.85;
  max-width: 650px;
  margin-bottom: 40px;
}

.download-actions {
  /* 按钮区使用弹性换行，形成参考图中的两排按钮布局。 */
  display: flex;
  flex-wrap: wrap;
  gap: 18px 20px;
  max-width: 540px;
}

.download-btn {
  /* 所有按钮统一尺寸和圆角，保证两排布局整齐。 */
  min-width: 138px;
  height: 58px;
  padding: 0 26px;
  border-radius: 999px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 1.08rem;
  font-weight: 800;
  transform: translateY(0);
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.download-btn-primary {
  /* 主行动按钮使用实心紫色渐变，强化下载和体验入口。 */
  color: #fff;
  background: linear-gradient(135deg, #635bff, #8b5cf6);
  box-shadow: 0 14px 26px rgba(99, 91, 255, 0.22);
}

.download-btn-primary:hover,
.download-btn-primary:focus-visible {
  background: linear-gradient(135deg, #746dff, #a855f7);
  box-shadow:
    0 0 0 3px rgba(154, 168, 255, 0.22),
    0 20px 36px rgba(139, 92, 246, 0.38);
  transform: translateY(-5px);
}

.download-btn-outline {
  /* 深色背景下次级按钮使用白色描边，既清楚又不抢主按钮层级。 */
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.84);
}

.download-btn-outline:hover,
.download-btn-outline:focus-visible {
  color: #1c0522;
  background: #fff;
  border-color: #fff;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.18),
    0 18px 34px rgba(255, 255, 255, 0.2);
  transform: translateY(-5px);
}

.app-preview {
  /* 右侧预览区承载新版浅色软件界面，保持和左侧文案水平居中。 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-window {
  /* 新版软件窗口主体：按参考图使用浅色控制台和大圆角。 */
  width: min(100%, 860px);
  aspect-ratio: 1.72;
  border-radius: 22px;
  overflow: hidden;
  background: #f8f2fb;
  box-shadow: 0 28px 70px rgba(4, 9, 30, 0.28);
  display: grid;
  grid-template-columns: 64px minmax(190px, 34%) minmax(0, 1fr);
  color: #0f172a;
  min-height: 0;
  animation: appWindowFloat 4.8s ease-in-out infinite;
  will-change: transform;
}

@keyframes appWindowFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

.app-rail {
  /* 左侧渐变导航栏：模拟截图里的品牌导航带。 */
  padding: 14px 10px;
  background: linear-gradient(180deg, #d9b9ff 0%, #b7e8ff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  min-height: 0;
}

.app-rail-logo {
  /* 软件侧栏 logo 使用真实灵析图标，贴合用户给的新界面截图。 */
  position: static;
  display: block;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(97, 68, 160, 0.28));
}

.app-vip {
  /* VIP 标签使用紫色胶囊，模拟截图里的会员标识。 */
  padding: 2px 8px;
  border-radius: 50%;
  color: #fff;
  background: #8d5cf6;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.app-rail-tools {
  /* 侧栏工具图标纵向排列，保持每个入口尺寸稳定。 */
  display: grid;
  gap: 18px;
  justify-items: center;
  color: #fff;
}

.app-rail-tools span {
  /* 单个工具入口使用图标化文字，避免引入额外图标库。 */
  width: 36px;
  height: 36px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  text-shadow: 0 3px 10px rgba(85, 76, 142, 0.25);
}

.app-power {
  /* 电源入口固定在侧栏底部，匹配截图左下角按钮。 */
  margin-top: auto;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
}

.app-library {
  /* 歌曲列表栏使用淡紫背景，和截图左侧列表区一致。 */
  padding: 14px 10px 16px;
  background: #f6eff8;
  border-right: 1px solid rgba(119, 103, 140, 0.14);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.app-library-top {
  /* 列表顶部放搜索框和收藏按钮。 */
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}

.app-search-light {
  /* 新版搜索框使用蓝色描边和白底阴影，贴近参考图。 */
  height: 38px;
  padding: 0 12px;
  border: 1px solid #67bdf0;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 9px 20px rgba(89, 163, 220, 0.18);
}

.app-search-light input {
  /* 搜索框输入本身去掉默认边框，避免破坏模拟软件视觉。 */
  width: 100%;
  border: 0;
  outline: 0;
  color: #334155;
  background: transparent;
  font-size: 0.78rem;
}

.app-heart {
  /* 收藏心形放在搜索框右侧，作为轻量装饰控件。 */
  color: #c7c4c8;
  font-size: 1.15rem;
}

.app-song-list {
  /* 歌曲列表纵向滚动区域，截图中左侧卡片列表的核心部分。 */
  display: grid;
  gap: 8px;
  overflow: hidden;
  flex: 1;
}

.app-song-list p {
  /* 单首歌曲使用圆角浅色卡片，保留足够行高避免文字拥挤。 */
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid rgba(120, 112, 128, 0.18);
  border-radius: 8px;
  display: flex;
  align-items: center;
  color: #111827;
  background: rgba(255, 255, 255, 0.42);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-upload {
  /* 上传按钮固定在歌曲列表底部。 */
  height: 36px;
  margin-top: 16px;
  border: 1px solid #70bffc;
  border-radius: 8px;
  color: #1e3a8a;
  background: #f8fbff;
  font-weight: 700;
}

.app-workspace {
  /* 主工作区使用浅粉白背景，承载顶部栏、空状态和底部播放区。 */
  min-width: 0;
  min-height: 0;
  background: #fbf5fb;
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr) 120px;
}

.app-toolbar-light {
  /* 顶部工具栏右对齐，模拟客服、教程、到期时间和窗口按钮。 */
  padding: 10px 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  color: #2b9bec;
  font-size: 0.78rem;
  min-width: 0;
  overflow: hidden;
}

.app-toolbar-light a {
  /* 顶部客服链接保持蓝色。 */
  color: #2b9bec;
  text-decoration: none;
  font-weight: 700;
}

.app-toolbar-light button {
  /* 顶部教程按钮使用浅蓝描边胶囊。 */
  min-width: 48px;
  height: 28px;
  border: 1px solid #72bffa;
  border-radius: 7px;
  color: #2b9bec;
  background: #edf8ff;
  font-weight: 700;
}

.app-expire {
  /* 到期时间使用长胶囊，保持和截图一致的状态条。 */
  height: 28px;
  padding: 0 12px;
  border: 1px solid #72bffa;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #0f9f8f;
  background: #f5fbff;
  font-weight: 700;
}

.app-recharge {
  /* 充值按钮使用橙色强调。 */
  min-width: 56px;
  color: #fff !important;
  background: #f59e0b !important;
  border-color: #f59e0b !important;
}

.app-window-dot {
  /* 右上角窗口控制按钮使用灰色圆形。 */
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #6b7280;
  font-weight: 900;
}

.app-empty-panel {
  /* 中间空状态区使用居中文案，模拟未加载歌词和暂无音频数据。 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #c7ddf6;
  font-size: 0.9rem;
  gap: 22px;
}

.app-lyric-state {
  /* 歌词提示用蓝色高亮。 */
  color: #2b9bec;
}

.app-playbar-light {
  /* 底部播放区固定高度，包含时间轴和控制按钮。 */
  min-height: 0;
  padding: 0 18px 14px;
  display: grid;
  align-content: end;
  gap: 14px;
}

.app-timebar {
  /* 时间轴使用左右时间和中间进度条的三列布局。 */
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 8px;
  align-items: center;
  color: #0f172a;
  font-size: 0.75rem;
}

.app-track-light {
  /* 进度条底色保持浅蓝灰。 */
  height: 5px;
  border-radius: 999px;
  background: #dbe9f7;
}

.app-track-light span {
  /* 当前播放位置小圆点。 */
  width: 12px;
  height: 18px;
  margin-top: -6px;
  border-radius: 999px;
  display: block;
  background: #4ab3f4;
  border: 1px solid #0f65a8;
}

.app-control-row {
  /* 底部控制区分成模式按钮、播放键和音量控制三块。 */
  display: grid;
  grid-template-columns: minmax(176px, 1fr) 72px;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.app-mode-grid {
  /* 模式按钮按 2x2 网格排列，匹配截图左下控制组。 */
  padding: 10px;
  border: 1px solid #72bffa;
  border-radius: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 10px;
  background: rgba(255, 255, 255, 0.35);
}

.app-mode-grid button {
  /* 模式按钮统一高度和圆角。 */
  height: 40px;
  border: 1px solid #72bffa;
  border-radius: 8px;
  color: #0f172a;
  background: #f8fbff;
  font-weight: 700;
}

.app-mode-grid .app-mode-active {
  /* 当前模式按钮使用蓝色渐变强调。 */
  color: #fff;
  background: linear-gradient(135deg, #75d7f7, #0fb4ea);
}

.app-main-play {
  /* 中间播放按钮使用浅蓝大圆环。 */
  width: 68px;
  height: 68px;
  margin: 0 auto;
  border: 8px solid #c3e7ff;
  border-radius: 50%;
  color: #c3e7ff;
  background: #eef8ff;
  font-size: 2rem;
}

.app-volume-box {
  /* 右侧音量控制面板使用浅蓝描边圆角框。 */
  padding: 10px 10px;
  border: 1px solid #72bffa;
  border-radius: 14px;
  display: none;
  gap: 8px;
  background: rgba(255, 255, 255, 0.38);
}

.app-volume-box p {
  /* 单条音量行使用标签、滑杆和百分比三列。 */
  display: grid;
  grid-template-columns: 58px 1fr 40px;
  gap: 6px;
  align-items: center;
  color: #2b9bec;
  font-size: 0.72rem;
}

.app-volume-box i {
  /* 音量滑杆主体。 */
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #9dd8ff 86%, #e4eef8 86%);
}

.app-volume-box i::after {
  /* 音量滑块圆点。 */
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 12px;
  height: 16px;
  border: 1px solid #0f65a8;
  border-radius: 999px;
  background: #42aef0;
  transform: translateY(-50%);
}

.app-volume-box .app-low-volume {
  /* 原唱音量低，滑杆进度更短。 */
  background: linear-gradient(90deg, #9dd8ff 18%, #e4eef8 18%);
}

.contact-section {
  /* 联系我们区改为首页同款深紫背景，和上方板块自然衔接。 */
  min-height: 720px;
  height: auto;
  padding: 92px clamp(32px, 4vw, 64px) 88px;
  background: var(--page-section-bg);
  display: block;
  overflow: visible;
}

.contact-section::before {
  /* 联系区不需要首屏山谷底部渐变，覆盖全局 section 伪元素。 */
  display: none;
}

.contact-header {
  /* 顶部标题区居中，先建立“与我们取得联系”的页面焦点。 */
  text-align: center;
  margin-bottom: 58px;
}

.contact-header h2 {
  /* 深色背景下联系区主标题使用白色，和首页标题风格统一。 */
  color: #fff;
  font-size: clamp(3rem, 4.3vw, 4.9rem);
  line-height: 1.15;
  letter-spacing: 0;
  margin-bottom: 22px;
}

.contact-header p {
  /* 标题下说明文字使用半透明白色，形成清晰层级。 */
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.18rem;
}

.contact-layout {
  /* 主体使用两列布局：左侧联系方式更宽，右侧扫码卡片固定宽度。 */
  width: min(100%, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: stretch;
}

.contact-info {
  min-width: 0;
}

.contact-info h3 {
  /* 左侧小标题使用白色，适配统一深色背景。 */
  color: #fff;
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 24px;
}

.contact-info > p {
  /* 联系方式说明使用半透明白色，避免在深色背景上过重。 */
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.8;
  max-width: 760px;
  margin-bottom: 34px;
}

.contact-card {
  /* 联系方式卡片使用白底描边，模拟参考图的圆角信息条。 */
  min-height: 108px;
  margin-bottom: 24px;
  padding: 28px 30px;
  border: 1px solid #cde4f7;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  display: flex;
  align-items: center;
  gap: 20px;
}

.contact-card:last-of-type {
  margin-bottom: 0;
}

.contact-icon {
  /* 蓝色图标块统一尺寸，增强联系方式列表的识别度。 */
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 7px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #5fb7e8;
  font-size: 1.35rem;
  font-weight: 800;
}

.contact-card h4 {
  /* 联系项标题比内容更粗，方便快速扫描。 */
  color: #1f2937;
  font-size: 1.05rem;
  line-height: 1.3;
  margin-bottom: 8px;
}

.contact-card p {
  /* 联系项正文使用灰蓝色，保持信息清晰但不过度抢眼。 */
  color: #526071;
  line-height: 1.6;
}

.contact-qr-card {
  /* 扫码咨询卡片保持独立白底边框，呼应参考图右侧卡片。 */
  min-height: 492px;
  padding: 42px 32px;
  border: 1px solid #cde4f7;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-qr-card h3 {
  /* 扫码卡标题居中加粗。 */
  color: #1f2937;
  font-size: 1.55rem;
  line-height: 1.2;
  margin-bottom: 16px;
}

.contact-qr-card > p {
  /* 扫码卡说明文字保持轻量。 */
  color: #526071;
  margin-bottom: 36px;
}

.contact-qr-code {
  /* 真实二维码图片固定显示尺寸，保持和卡片里的扫码区域一致。 */
  /* 覆盖首页全局 section img 的绝对定位，让二维码回到扫码卡片文档流中。 */
  position: static;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 12px;
  display: block;
  /* 覆盖全局 section img 的禁用鼠标事件，后续需要右键保存或识别时不受影响。 */
  pointer-events: auto;
  object-fit: cover;
  box-shadow: 0 24px 70px rgba(255, 72, 110, 0.18);
}

.site-footer {
  /* 页脚使用首页同款深紫背景，和上方内容区统一。 */
  background: var(--page-section-bg);
  padding: 70px clamp(28px, 6vw, 120px) 28px;
  color: rgba(255, 255, 255, 0.72);
}

.footer-inner {
  /* 页脚主体三列布局，最大宽度与上方内容保持对齐。 */
  width: min(100%, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr 0.8fr 1fr;
  gap: 80px;
}

.footer-brand h3 {
  /* 品牌名使用蓝色强调，呼应联系方式里的浅蓝主色。 */
  color: #42aeea;
  font-size: 1.35rem;
  line-height: 1.2;
  margin-bottom: 22px;
}

.footer-brand p {
  /* 品牌简介保持较小字号，避免页脚信息过重。 */
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.75;
  margin-bottom: 18px;
}

.footer-socials {
  /* 底部小图标横向排列，模拟参考图里的三个入口按钮。 */
  display: flex;
  gap: 14px;
}

.footer-socials a {
  /* 深色背景下快捷入口使用半透明白底，保持轻量可点击感。 */
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
  font-size: 1rem;
}

.footer-links h4,
.footer-contact h4 {
  /* 页脚列标题使用白色，方便用户快速找到信息分区。 */
  color: #fff;
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 24px;
}

.footer-links {
  /* 快速链接列纵向排列，符合参考图的底部导航样式。 */
  display: flex;
  flex-direction: column;
}

.footer-links a {
  /* 页脚链接使用半透明白色，间距保持舒展。 */
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  margin-bottom: 18px;
}

.footer-links a:hover {
  /* 悬停时用蓝色反馈，提示链接可点击。 */
  color: #42aeea;
}

.footer-contact p {
  /* 联系信息每行左侧保留图标位置，避免长地址和图标挤在一起。 */
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.8;
  margin-bottom: 12px;
}

.footer-contact span {
  /* 联系方式图标固定宽度，让三行内容起点整齐。 */
  width: 18px;
  flex: 0 0 18px;
  text-align: center;
}

.footer-bottom {
  /* 版权行使用半透明分隔线，并与上方三列保持同宽。 */
  width: 100%;
  margin: 56px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.footer-bottom p {
  /* 版权文字使用更浅的半透明白色，弱化但保持可读。 */
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
}

.footer-bottom a {
    color: inherit;
    text-decoration: none;
}
.footer-bottom a:hover {
    text-decoration: underline;
}

@media (max-width: 1100px) {
  .download-hero {
    /* 中等屏幕提前切换成上下布局，避免软件预览和标题互相挤压。 */
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .download-copy {
    /* 中等屏幕让文案区居中，保持参考图的主视觉聚焦感。 */
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }

  .download-actions {
    /* 中等屏幕按钮整体居中，避免换行后左侧过空。 */
    justify-content: center;
    margin: 0 auto;
  }

  .download-headline {
    align-items: center;
  }

  .contact-layout {
    /* 中等屏幕联系区改成上下布局，避免右侧扫码卡挤压联系方式。 */
    grid-template-columns: 1fr;
  }

  .contact-qr-card {
    /* 中等屏幕扫码卡限制最大宽度并居中。 */
    width: min(100%, 520px);
    margin: 0 auto;
  }

  .footer-inner {
    /* 中等屏幕页脚减少列间距，避免联系方式被挤压。 */
    gap: 44px;
  }
}

@media (max-width: 768px) {
  .sec {
    /* 移动端缩小上下间距，避免内容区显得过空。 */
    padding: 72px 0 88px;
  }

  .sec-header {
    /* 移动端收窄标题区边距，保证文字不贴边。 */
    width: min(100% - 32px, 560px);
    margin-bottom: 36px;
  }

  .sec-header h2 {
    /* 移动端标题降级，避免一行过长撑出屏幕。 */
    font-size: 2.25em;
  }

  .feature-carousel {
    /* 移动端轨道只调整卡片间距，外层仍负责裁切边界。 */
    gap: 18px;
  }

  .feature-carousel-wrap {
    /* 移动端轮播边界贴近屏幕两侧，保证卡片仍能自动滑进滑出。 */
    width: calc(100% - 32px);
  }

  .feature-card {
    /* 移动端卡片宽度跟随视口，保留部分下一张卡片作为滑动提示。 */
    flex-basis: min(86vw, 360px);
    min-height: 280px;
    padding: 28px 24px;
  }

  .download-hero {
    /* 移动端改成上下布局，避免右侧软件预览压缩正文。 */
    min-height: auto;
    padding: 72px 24px;
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .download-copy h2 {
    /* 移动端标题降级，保证长中文标题不溢出。 */
    font-size: 3rem;
  }

  .download-actions {
    /* 移动端按钮占满可用宽度，形成更易点击的两列/单列布局。 */
    gap: 14px;
  }

  .download-btn {
    /* 移动端按钮宽度自适应，避免文字被挤压。 */
    flex: 1 1 150px;
    min-width: 0;
  }

  .app-window {
    /* 移动端软件预览按宽度缩放，并减少左侧导航占位。 */
    width: 100%;
    grid-template-columns: 0 minmax(118px, 34%) minmax(0, 1fr);
  }

  .app-rail {
    /* 移动端隐藏彩色侧栏，给主界面留出更多宽度。 */
    display: none;
  }

  .app-library {
    /* 移动端缩小歌曲列表内边距，避免预览窗口过窄。 */
    padding: 12px 8px;
  }

  .app-toolbar-light a,
  .app-mail,
  .app-expire,
  .app-recharge {
    /* 移动端隐藏顶部细碎控件，保留窗口控制和教程按钮即可。 */
    display: none;
  }

  .app-workspace {
    /* 移动端压缩顶部和底部区域，保证中间面板仍可见。 */
    grid-template-rows: 42px minmax(0, 1fr) 118px;
  }

  .app-playbar-light {
    /* 移动端播放区减少左右间距。 */
    padding: 0 14px 12px;
  }

  .app-control-row {
    /* 移动端隐藏右侧音量面板后，控制区改成两列。 */
    grid-template-columns: minmax(0, 1fr) 78px;
    gap: 12px;
  }

  .app-volume-box {
    /* 移动端隐藏音量面板，避免预览窗口拥挤。 */
    display: none;
  }

  .app-main-play {
    /* 移动端缩小播放按钮。 */
    width: 66px;
    height: 66px;
    border-width: 8px;
  }

  .contact-section {
    /* 移动端缩小联系区边距，让内容更贴合窄屏。 */
    padding: 58px 20px 72px;
  }

  .contact-header {
    /* 移动端减少标题和内容之间的空白。 */
    margin-bottom: 44px;
  }

  .contact-info h3 {
    /* 移动端联系方式标题降级，避免视觉过重。 */
    font-size: 1.55rem;
  }

  .contact-card {
    /* 移动端信息卡片改成更紧凑的横向布局。 */
    min-height: 96px;
    padding: 22px 18px;
    gap: 14px;
  }

  .contact-icon {
    /* 移动端图标块缩小，给文字留下更多宽度。 */
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .contact-qr-card {
    /* 移动端扫码卡高度自适应，避免底部出现过多空白。 */
    width: min(100%, 420px);
    min-height: auto;
    padding: 30px 22px 38px;
  }

  .contact-qr-code {
    /* 移动端二维码占位图缩小，保持卡片内部比例。 */
    width: 176px;
    height: 176px;
  }

  .site-footer {
    /* 移动端页脚缩小边距，避免底部显得过高。 */
    padding: 54px 24px 26px;
  }

  .footer-inner {
    /* 移动端三列改为单列，保证每组信息都完整可读。 */
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-bottom {
    /* 移动端版权行缩短与上方内容的距离。 */
    margin-top: 38px;
  }
}