/* ============================================================
   GoodBeat v2 · 多屏产品官网
   深色高级音乐科技风 · 蓝紫品牌体系
   ============================================================ */

:root {
  --bg: #070B18;
  --bg-2: #090E20;
  --bg-3: #0C1226;
  --card: #10172D;
  --card-2: #111A32;
  --panel: #0E1529;
  --field: #0A1122;

  --line: rgba(132, 146, 220, .12);
  --line-strong: rgba(132, 146, 220, .22);

  --txt: #FFFFFF;
  --sub: #AAB5D0;
  --muted: #6D77A0;
  --faint: #4E587E;

  --purple: #7957FF;
  --blue: #4B7CFF;
  --pink: #E94DDC;
  --cyan: #22D3EE;
  --green: #34D399;

  --grad: linear-gradient(135deg, #7957FF 0%, #8E5BFF 46%, #E94DDC 100%);
  --grad-cool: linear-gradient(135deg, #4B7CFF, #7957FF);
  --grad-bar: linear-gradient(90deg, #7957FF, #B34FE8 55%, #E94DDC);

  --r-btn: 12px;
  --r-card: 16px;
  --r-cta: 26px;

  --font-display: 'Sora', 'Manrope', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body: 'Manrope', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  --container: 1240px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-width: 1240px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: rgba(121, 87, 255, .4); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 40px; }
.section-pad { padding: 120px 0; }

/* ---------------- 氛围背景 ---------------- */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; background:
  radial-gradient(1200px 700px at 85% -10%, rgba(75, 124, 255, .08), transparent 60%),
  linear-gradient(180deg, var(--bg), var(--bg-2) 45%, var(--bg) 100%); }
.amb-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.amb-glow-1 { width: 620px; height: 620px; left: -180px; top: -120px;
  background: radial-gradient(circle, rgba(75, 124, 255, .14), transparent 65%); }
.amb-glow-2 { width: 700px; height: 700px; right: -220px; top: 38%;
  background: radial-gradient(circle, rgba(121, 87, 255, .12), transparent 65%); }
.amb-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(132, 146, 220, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132, 146, 220, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%);
}

/* ---------------- 通用按钮 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; white-space: nowrap; border-radius: var(--r-btn);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.btn svg { flex: none; width: 17px; height: 17px; }
.btn-lg svg, .btn-xl svg { width: 19px; height: 19px; }
.btn-nav svg { width: 16px; height: 16px; }
.btn-primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 10px 26px rgba(121, 87, 255, .30), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(121, 87, 255, .40); }
.btn-ghost {
  background: rgba(121, 87, 255, .07);
  border: 1px solid rgba(121, 87, 255, .55);
  color: #E3E7FF;
}
.btn-ghost:hover { border-color: #9A8BFF; background: rgba(121, 87, 255, .14); transform: translateY(-2px); }
.btn-nav { height: 44px; padding: 0 22px; font-size: 14px; }
.btn-lg { height: 52px; padding: 0 30px; font-size: 15.5px; border-radius: 14px; }
.btn-xl { height: 58px; padding: 0 48px; font-size: 17px; border-radius: var(--r-cta); }

.btn-mini {
  height: 30px; padding: 0 14px; border-radius: 9px;
  background: #1B2440; border: 1px solid var(--line);
  color: #C2C9E8; font-size: 12px; font-weight: 600; white-space: nowrap;
  transition: background .2s;
}
.btn-mini:hover { background: #232e54; }
.btn-mini.lg { height: 36px; padding: 0 18px; font-size: 12.5px; }
.btn-mini.danger { background: transparent; border-color: transparent; color: #9AA4C8; }
.btn-mini.danger:hover { color: #F0788B; background: rgba(224, 85, 106, .1); }

.btn-dl { height: 38px; padding: 0 17px; font-size: 13px; border-radius: 10px; }
.btn-batch { margin-left: auto; height: 40px; padding: 0 20px; font-size: 13px; border-radius: 10px; }

/* ---------------- 顶部导航 ---------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(7, 11, 24, .82);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(132, 146, 220, .09);
}
.nav-inner {
  max-width: 1360px; margin: 0 auto; padding: 0 48px;
  height: 76px; display: flex; align-items: center; gap: 22px;
}
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-img { width: 42px; height: 42px; border-radius: 11px; }
.brand-word {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  letter-spacing: 2.4px; color: #fff;
}
.nav-links { display: flex; align-items: center; gap: 38px; margin: 0 auto; }
.nav-links a {
  position: relative; font-size: 15px; font-weight: 500; color: var(--sub);
  padding: 6px 0; transition: color .2s;
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #fff; font-weight: 600; }
.nav-links a.active::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  width: 24px; height: 3px; border-radius: 3px; background: var(--grad);
}
.nav-right { display: flex; align-items: center; gap: 20px; flex: none; }
.nav-wechat { position: relative; display: flex; align-items: center; gap: 10px; flex: none; cursor: pointer; }
.nav-wechat-text b { display: block; font-size: 12.5px; font-weight: 600; color: #E6EAFF; white-space: nowrap; transition: color .2s; }
.nav-wechat-text span { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; margin-top: 1px; }
.nav-wechat:hover .nav-wechat-text b { color: #fff; }
/* 悬停桥接区：鼠标从触发区移向弹层时保持 hover */
.nav-wechat::after { content: ''; position: absolute; left: -8px; right: -8px; top: 100%; height: 16px; }

.nwx-pop {
  position: absolute; top: calc(100% + 14px); left: 50%; width: 218px;
  transform: translateX(-50%) translateY(-6px);
  padding: 16px 16px 15px;
  text-align: center;
  background: linear-gradient(180deg, #141D3A 0%, #0D1427 100%);
  border: 1px solid rgba(132, 146, 220, .22);
  border-radius: 16px;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, .62),
    0 0 46px -12px rgba(121, 87, 255, .5),
    inset 0 1px 0 rgba(176, 198, 255, .12);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index: 120;
}
.nav-wechat:hover .nwx-pop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nwx-pop-arrow {
  position: absolute; top: -7px; left: 50%; margin-left: -7px;
  width: 13px; height: 13px;
  background: #141D3A;
  border-left: 1px solid rgba(132, 146, 220, .22);
  border-top: 1px solid rgba(132, 146, 220, .22);
  transform: rotate(45deg);
}
.nwx-pop-head {
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 700; color: #fff; letter-spacing: .5px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(132, 146, 220, .12);
}
.nwx-pop-qr {
  width: 168px; height: 168px; margin: 0 auto;
  padding: 9px; border-radius: 12px; background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
.nwx-pop-qr img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.nwx-pop-sub { margin-top: 12px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.qr { background: #fff; border-radius: 10px; flex: none; }
.qr svg, .qr img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.qr-sm { width: 46px; height: 46px; padding: 5px; border-radius: 9px; }
.qr-md { width: 76px; height: 76px; padding: 8px; border-radius: 12px; }
.qr-lg { width: 172px; height: 172px; padding: 13px; border-radius: 16px; }

/* ---------------- Hero ---------------- */
.hero { position: relative; padding: 176px 0 130px; overflow: clip; }
.hero-grid { display: grid; grid-template-columns: 42fr 58fr; gap: 56px; align-items: center; }

.pill-badge {
  display: inline-flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 18px; border-radius: 19px;
  background: linear-gradient(135deg, rgba(121, 87, 255, .18), rgba(233, 77, 220, .10));
  border: 1px solid rgba(121, 87, 255, .42);
  color: #D7CEFF; font-size: 13px; font-weight: 600;
}
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px rgba(233, 77, 220, .8); }

.hero-title {
  margin-top: 26px;
  font-family: var(--font-display); font-size: 78px; font-weight: 800;
  line-height: 1.02; letter-spacing: -1px;
}
.t-white { color: #fff; }
.t-grad {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-slogan { margin-top: 20px; font-family: var(--font-display); font-size: 30px; font-weight: 700; color: #EDF0FF; }
.hero-desc { margin-top: 20px; font-size: 16px; line-height: 1.95; color: var(--sub); }
.hero-cta { display: flex; gap: 16px; margin-top: 40px; }
.hero-traits { display: flex; gap: 34px; margin-top: 40px; }
.hero-traits li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: #B6C0DE; list-style: none; }
.hero-traits svg { width: 18px; height: 18px; color: #9A8BFF; }

/* Hero 右侧：GoodBeat 笔记本 + 前景手机 + 流动音乐光效 */
.hero-visual { position: relative; }

/* ---------- 背景光效：柔光晕 + 流动音乐波形 ---------- */
.hv-fx { position: absolute; inset: -60px -80px -40px -60px; z-index: 0; pointer-events: none; }
.hv-glow { position: absolute; border-radius: 50%; filter: blur(80px); }
.hv-glow-a {
  top: -70px; left: 2%; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(63, 110, 255, .30), rgba(75, 124, 255, .10) 48%, transparent 70%);
  animation: hvPulse 8s ease-in-out infinite;
}
.hv-glow-b {
  top: 40px; right: -90px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(121, 87, 255, .28), rgba(233, 77, 220, .10) 52%, transparent 72%);
  animation: hvPulse 10s ease-in-out infinite 1.4s;
}
@keyframes hvPulse { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.hv-ribbons { position: absolute; inset: 0; width: 100%; height: 100%; }
.rb-crisp path { stroke-linecap: round; }

/* ---------- 舞台 ---------- */
.hv-stage { position: relative; z-index: 1; height: 500px; }

/* ---------- 手写标语 ---------- */
.hv-slogan {
  position: absolute; right: -78px; top: 42px; z-index: 6;
  transform: rotate(6deg); transform-origin: left center;
  font-family: "STXingkai", "Xingkai SC", "KaiTi", "STKaiti", "PingFang SC", cursive;
  font-size: 19px; font-weight: 600; line-height: 1.55; letter-spacing: 2px; color: #E2E9FF;
  text-shadow: 0 0 18px rgba(110, 140, 255, .7), 0 2px 6px rgba(0, 0, 0, .55);
  pointer-events: none;
}
.hv-slogan span { display: block; }
.hv-swoosh { position: absolute; left: -4px; bottom: -6px; width: 134px; height: 20px; opacity: .9; filter: drop-shadow(0 0 5px rgba(233, 77, 220, .55)); }
@media (max-width: 1360px) {
  .hv-slogan { right: 8px; top: -42px; font-size: 17px; letter-spacing: 1.5px; }
}

/* ---------- 笔记本电脑 ---------- */
.hv-laptop {
  position: absolute; left: 6%; bottom: 14px; width: 81%; z-index: 2;
  transform: perspective(1900px) rotateY(-6.5deg) rotateX(.8deg);
  transform-origin: 50% 100%;
}
.hv-lid {
  position: relative; padding: 13px 10px 11px;
  border-radius: 15px 15px 7px 7px;
  background: linear-gradient(150deg, #242F56 0%, #131C3A 46%, #090F22 100%);
  border: 1px solid rgba(132, 160, 255, .28);
  box-shadow:
    0 44px 80px -28px rgba(0, 0, 0, .85),
    0 0 46px -8px rgba(64, 104, 255, .5),
    0 22px 64px -24px rgba(150, 84, 255, .65),
    inset 0 1px 0 rgba(176, 198, 255, .26),
    inset 0 -2px 6px rgba(0, 0, 0, .5);
}
.hv-cam {
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: #3A4775; box-shadow: inset 0 0 0 1px rgba(160, 180, 255, .3), 0 0 4px rgba(120, 150, 255, .45);
}
.hv-screen {
  border-radius: 8px; overflow: hidden; background: #070C1D;
  border: 1px solid rgba(90, 116, 210, .2);
  box-shadow: inset 0 0 46px rgba(56, 96, 220, .14), inset 0 0 0 1px rgba(0, 0, 0, .5);
}
.hv-deck {
  position: relative; height: 27px; margin: -1px 2% 0;
  clip-path: polygon(4% 0, 96% 0, 99.3% 100%, .7% 100%);
  background: linear-gradient(180deg, rgba(130, 160, 255, .16), transparent 34%),
              linear-gradient(180deg, #182144 0%, #0E1532 55%, #070C1C 100%);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55));
}
.hv-hinge {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 84px; height: 5px; border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #05080F, #0A1024);
  box-shadow: inset 0 1px 0 rgba(120, 150, 255, .25);
}
.hv-deck::after {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: 3px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(110, 158, 255, .8) 32%, rgba(168, 120, 255, .7) 64%, transparent);
  box-shadow: 0 0 10px rgba(96, 140, 255, .6);
}

/* ---------- 屏内 GoodBeat 客户端 ---------- */
.m-app { background: #080E20; }
.m-bar {
  height: 36px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; background: #0C1328; border-bottom: 1px solid rgba(132, 146, 220, .12);
}
.m-brand { display: flex; align-items: center; gap: 7px; }
.m-brand img { width: 16px; height: 16px; border-radius: 5px; }
.m-brand b { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; color: #DDE4FF; letter-spacing: .3px; }
.m-win { display: flex; align-items: center; gap: 9px; color: #8D99C4; }
.m-win svg { width: 10px; height: 10px; }
.m-body { display: flex; height: 368px; }
.m-side {
  width: 86px; flex: none; padding: 12px 8px;
  background: #0A1024; border-right: 1px solid rgba(132, 146, 220, .1);
  display: flex; flex-direction: column; gap: 2px;
}
.m-side a {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 8px; border-radius: 8px;
  font-size: 11px; color: #8D97BD; white-space: nowrap;
}
.m-side a svg { width: 14px; height: 14px; flex: none; }
.m-side a.on {
  background: linear-gradient(135deg, #5B5FF0, #7358F5); color: #fff; font-weight: 700;
  box-shadow: 0 8px 18px rgba(91, 95, 240, .35);
}
.m-main { flex: 1; min-width: 0; padding: 13px 14px; display: flex; flex-direction: column; gap: 11px; }
.m-head { display: flex; align-items: center; justify-content: space-between; }
.m-head h4 { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: #fff; }
.m-vip {
  font-size: 9px; font-weight: 800; letter-spacing: .5px; color: #FACC15;
  padding: 3px 8px; border-radius: 10px; background: rgba(250, 204, 21, .12);
}
.m-search {
  height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 13px; border-radius: 10px;
  background: #0A1124; border: 1px solid rgba(134, 151, 255, .16);
}
.m-search i { flex: 1; font-style: normal; font-size: 11.5px; color: #64709A; white-space: nowrap; overflow: hidden; }
.m-go {
  flex: none; height: 28px; padding: 0 18px; border-radius: 8px;
  background: var(--grad); color: #fff; font-size: 11.5px; font-weight: 700;
  box-shadow: 0 8px 18px rgba(121, 87, 255, .35);
}
.m-list { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 0; }
.m-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px;
  background: #0D152E; border: 1px solid rgba(132, 146, 220, .10);
}
.m-cover {
  width: 38px; height: 38px; flex: none; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}
.m-cover svg { width: 18px; height: 18px; color: rgba(255, 255, 255, .85); }
.c1 { background: linear-gradient(135deg, #FF9A56, #E94DDC); }
.c2 { background: linear-gradient(135deg, #4B7CFF, #7957FF); }
.c3 { background: linear-gradient(135deg, #22D3EE, #4B7CFF); }
.c4 { background: linear-gradient(135deg, #FBBF24, #E94DDC); }
.m-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-info b { font-size: 12.5px; font-weight: 700; color: #E6EAFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-info em { font-style: normal; font-size: 10.5px; color: #6D77A0; }
.m-acts { display: flex; align-items: center; gap: 9px; flex: none; }
.m-play {
  width: 29px; height: 29px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #33406B; color: #AAB5D8; background: #141D39;
}
.m-play svg { width: 12px; height: 12px; margin-left: 1px; }
.m-play.on { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(121, 87, 255, .45); }
.m-skip { width: 14px; height: 14px; color: #7E8AB3; }
.m-dl {
  width: 29px; height: 29px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: #AAB5D8; background: #161F3D; border: 1px solid rgba(132, 146, 220, .14);
}
.m-dl svg { width: 14px; height: 14px; }

/* ---------- 前景手机 ---------- */
.hv-phone {
  position: absolute; right: 6%; bottom: 12px; z-index: 5;
  width: 138px; height: 280px; border-radius: 30px; padding: 7px;
  background: linear-gradient(155deg, #26315C 0%, #101733 58%, #080D1F 100%);
  border: 1px solid rgba(160, 140, 255, .3);
  box-shadow:
    0 30px 56px -12px rgba(0, 0, 0, .8),
    0 0 34px -6px rgba(134, 92, 255, .5),
    inset 0 1px 0 rgba(190, 180, 255, .28);
  transform: perspective(1000px) rotateY(-4deg) rotateZ(-1.4deg);
}
.hp-notch {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 10px; border-radius: 0 0 8px 8px; background: #0A1022; z-index: 2;
}
.hp-screen {
  position: relative; width: 100%; height: 100%; border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  background:
    radial-gradient(130px 170px at 50% 24%, rgba(121, 87, 255, .4), transparent 70%),
    radial-gradient(110px 140px at 50% 100%, rgba(75, 124, 255, .2), transparent 70%),
    #090F22;
}
.hp-note {
  width: 62px; height: 62px; border-radius: 19px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad); color: #fff;
  box-shadow: 0 10px 26px rgba(121, 87, 255, .55), 0 0 30px rgba(150, 110, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.hp-note svg { width: 30px; height: 30px; }
.hp-screen b { font-family: var(--font-display); font-size: 15.5px; font-weight: 800; color: #fff; }
.hp-screen em { font-style: normal; font-size: 10.5px; color: #9AA6D0; margin-top: -4px; }
.hp-line { width: 56px; height: 1px; margin: 2px 0 1px; background: linear-gradient(90deg, transparent, rgba(150, 140, 255, .5), transparent); }
.hp-eq { display: flex; align-items: center; gap: 3px; height: 28px; }
.hp-eq i {
  width: 3px; height: var(--h, 16px); border-radius: 2px;
  background: linear-gradient(180deg, #9A8BFF, #E94DDC);
  box-shadow: 0 0 8px rgba(154, 139, 255, .6);
  animation: hpEq var(--du, 1s) ease-in-out var(--d, 0s) infinite alternate;
}
@keyframes hpEq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }

/* ---------- 地面光带与倒影 ---------- */
.hv-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 102px; z-index: 1; pointer-events: none; }
.hv-ground::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 48% 70% at 42% 100%, rgba(56, 108, 255, .78), transparent 70%),
    radial-gradient(ellipse 33% 60% at 80% 100%, rgba(140, 84, 255, .62), transparent 72%),
    radial-gradient(ellipse 78% 32% at 50% 100%, rgba(34, 66, 190, .5), transparent 75%);
  filter: blur(5px);
}
.hv-ground::after {
  content: ''; position: absolute; left: 9%; right: 5%; bottom: 17px; z-index: 3; height: 4px;
  background: linear-gradient(90deg, transparent, rgba(150, 188, 255, 1) 28%, rgba(182, 140, 255, .9) 62%, transparent);
  filter: blur(.6px);
}
.hv-cs { position: absolute; bottom: 4px; z-index: 1; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .42), transparent 70%); filter: blur(13px); }
.hv-cs-l { left: 7%; width: 74%; height: 22px; }
.hv-cs-p { right: 8%; width: 20%; height: 16px; }
.hv-refl { position: absolute; bottom: 7px; z-index: 2; border-radius: 50%; filter: blur(9px); }
.hv-refl-l {
  left: 11%; width: 64%; height: 32px;
  background: linear-gradient(180deg, rgba(96, 138, 255, .42), transparent);
}
.hv-refl-p {
  right: 9%; width: 19%; height: 28px;
  background: linear-gradient(180deg, rgba(164, 110, 255, .42), transparent);
}

/* ---------------- 客户端窗口 Mockup ---------------- */
.shot {
  background: linear-gradient(180deg, #0D1428, #0A1020);
  border: 1px solid var(--line-strong);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 46px 100px rgba(2, 5, 16, .72), 0 0 0 1px rgba(121, 87, 255, .04);
}
.shot-bar {
  height: 48px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; background: rgba(12, 18, 38, .9);
  border-bottom: 1px solid var(--line);
}
.shot-brand { display: flex; align-items: center; gap: 9px; }
.shot-brand img { width: 22px; height: 22px; border-radius: 6px; }
.shot-brand b { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #C6CFF0; }
.shot-vip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 11px; border-radius: 13px;
  background: rgba(250, 204, 21, .13); color: #FACC15;
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
}
.vip-dot { width: 6px; height: 6px; border-radius: 50%; background: #FACC15; }

.shot-body { display: flex; }
.shot-side {
  width: 172px; flex: none; padding: 14px 12px;
  background: rgba(9, 13, 29, .8); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.shot-side a {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 12px; border-radius: 10px;
  font-size: 12.5px; font-weight: 500; color: #8D97BD;
  transition: background .2s, color .2s;
}
.shot-side a svg { width: 17px; height: 17px; flex: none; }
.shot-side a.on {
  background: linear-gradient(135deg, #5B5FF0, #7358F5);
  color: #fff; font-weight: 700;
  box-shadow: 0 8px 18px rgba(91, 95, 240, .35);
}
.shot-main { flex: 1; min-width: 0; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.shot-head h3 { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: #fff; }
.shot-head p { font-size: 12px; color: var(--muted); margin-top: 3px; }

.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px;
}
.fld-label { display: block; font-size: 12px; color: #7E89AD; margin-bottom: 10px; }

/* 链接输入行 */
.link-row { display: flex; align-items: center; gap: 10px; }
.ic-link, .ic-folder, .ic-search { display: inline-flex; align-items: center; justify-content: center; flex: none; color: #7E89AD; }
.ic-link { width: 18px; height: 18px; }
.ic-link svg, .ic-folder svg, .ic-search svg { width: 100%; height: 100%; }
.link-row {
  height: 48px; padding: 0 12px; border-radius: 11px;
  background: var(--field); border: 1px solid rgba(134, 151, 255, .15);
}
.link-txt { flex: 1; font-size: 12.5px; color: #8D99C4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 格式胶囊 */
.fmt-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.fmt-row .fld-label, .dl-setting .fld-label { margin-bottom: 0; flex: none; }
.fmt-pill {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  height: 31px; padding: 0 14px; border-radius: 16px;
  border: 1px solid #38446A; font-size: 12px; font-weight: 600; color: #8D99C4;
}
.fmt-pill i {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid #4A5680; position: relative; flex: none;
}
.fmt-pill.on { border-color: rgba(121, 87, 255, .6); background: rgba(121, 87, 255, .1); color: #DFE4FF; }
.fmt-pill.on i { border-color: #7957FF; }
.fmt-pill.on i::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--grad); }
.fmt-pill em { font-style: normal; font-size: 10.5px; color: var(--muted); font-weight: 500; }
.fmt-pill.sm { height: 27px; padding: 0 12px; font-size: 11.5px; }

/* 保存路径 */
.path-row {
  display: flex; align-items: center; gap: 10px;
  height: 42px; margin-top: 14px; padding: 0 12px; border-radius: 10px;
  background: var(--field);
}
.ic-folder { width: 16px; height: 16px; }
.path-txt { flex: 1; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 下载结果 */
.song-result { display: block; }
.song-top { display: flex; align-items: center; gap: 13px; }
.cover {
  width: 48px; height: 48px; border-radius: 11px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4B7CFF, #7957FF 55%, #B34FE8);
  box-shadow: 0 6px 16px rgba(75, 124, 255, .3);
}
.cover svg { width: 24px; height: 24px; color: #fff; }
.cover.lg { width: 66px; height: 66px; border-radius: 14px; }
.cover.lg svg { width: 32px; height: 32px; }
.song-meta { flex: 1; min-width: 0; }
.song-meta b { display: block; font-size: 15px; font-weight: 700; color: #fff; }
.song-meta span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.badge-done {
  flex: none; padding: 4px 12px; border-radius: 12px;
  background: rgba(52, 211, 153, .14); color: var(--green);
  font-size: 11px; font-weight: 700;
}

.bar { height: 6px; border-radius: 4px; background: #1C2547; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--grad-bar); }
.song-result .bar { margin-top: 13px; }
.bar-ok { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--green); }

/* 已保存文件 */
.files-panel { display: flex; flex-direction: column; gap: 9px; }
.files-panel .fld-label { margin-bottom: 2px; }
.file-line {
  display: flex; align-items: center; gap: 11px;
  min-height: 46px; padding: 7px 12px; border-radius: 10px; background: var(--field);
}
.ftag {
  flex: none; min-width: 40px; height: 24px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 10px; font-weight: 800;
}
.ftag.m4a { background: rgba(45, 212, 191, .16); color: #2DD4BF; }
.ftag.mp3 { background: rgba(251, 191, 36, .16); color: #FBBF24; }
.ftag.wav { background: rgba(167, 139, 250, .2); color: #A78BFA; }
.fl-meta { flex: 1; min-width: 0; }
.fl-meta b { display: block; font-size: 12.5px; font-weight: 600; color: #D6DDF8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-meta span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-line em { flex: none; font-style: normal; font-size: 11px; color: var(--muted); }

/* ---------------- 第二屏：功能总览 ---------------- */
.sec-head { text-align: center; }
.sec-kicker {
  display: inline-block; font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: 3.5px; color: #9A8BFF;
}
.sec-head h2 {
  position: relative; margin-top: 14px;
  font-family: var(--font-display); font-size: 38px; font-weight: 800; color: #fff;
}
.sec-head h2::after {
  content: ''; display: block; width: 46px; height: 4px; border-radius: 4px;
  background: var(--grad); margin: 16px auto 0;
}
.sec-head p { margin-top: 16px; font-size: 15.5px; line-height: 1.9; color: var(--sub); }

#features.section-pad { padding-bottom: 56px; }
.ov-tabs { display: flex; gap: 14px; margin-top: 58px; }
.ov-tab {
  flex: 1; height: 74px; padding: 0 22px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
  transition: border-color .25s, transform .25s, background .25s, box-shadow .25s;
}
.ov-tab:hover { border-color: rgba(121, 87, 255, .5); transform: translateY(-3px); }
.ov-num { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 1px; }
.ov-name { font-size: 15.5px; font-weight: 700; color: #E6EAFF; }
.ov-tab.active {
  background: var(--grad); border-color: transparent;
  box-shadow: 0 14px 32px rgba(121, 87, 255, .38);
}
.ov-tab.active .ov-num { color: rgba(255, 255, 255, .78); }
.ov-tab.active .ov-name { color: #fff; }

/* 复选框（批量下载列表复用） */
.ms-check {
  width: 14px; height: 14px; border-radius: 4px; flex: none; position: relative;
  background: var(--grad);
}
.ms-check::after {
  content: ''; position: absolute; inset: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/78% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/78% no-repeat;
  background: #fff;
}
.ms-check.off { background: transparent; border: 1.5px solid #38446A; }

/* ---------------- 第三~七屏：独立功能展示 ---------------- */
.feat-alt {
  background: linear-gradient(180deg, rgba(16, 23, 45, .45), rgba(9, 14, 32, .1) 18%, rgba(9, 14, 32, .1) 82%, rgba(16, 23, 45, .45));
  border-top: 1px solid rgba(132, 146, 220, .07);
  border-bottom: 1px solid rgba(132, 146, 220, .07);
}
.feat-grid { display: grid; grid-template-columns: 5fr 6.4fr; gap: 72px; align-items: center; }
.feat-grid.rev { grid-template-columns: 6.4fr 5fr; }

.feat-index {
  display: block; font-family: var(--font-display); font-size: 66px; font-weight: 800; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.feat-text h2 { margin-top: 8px; font-family: var(--font-display); font-size: 37px; font-weight: 800; letter-spacing: .3px; }
.feat-desc { margin-top: 18px; font-size: 16px; line-height: 1.95; color: var(--sub); }
.feat-points { margin-top: 40px; display: flex; flex-direction: column; gap: 22px; }
.feat-points li { list-style: none; display: flex; gap: 15px; align-items: flex-start; }
.pt-ic {
  width: 46px; height: 46px; flex: none; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(121, 87, 255, .12); border: 1px solid rgba(121, 87, 255, .3);
}
.pt-ic svg { width: 21px; height: 21px; color: #B6A6FF; }
.feat-points b { display: block; font-size: 16px; font-weight: 700; color: #EDF0FF; margin-top: 2px; }
.feat-points li div > span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.75; color: var(--muted); }

.flow { margin-top: 38px; display: flex; flex-wrap: wrap; align-items: center; }
.flow li {
  list-style: none; position: relative;
  height: 34px; padding: 0 16px; margin-bottom: 8px;
  display: inline-flex; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  font-size: 12.5px; font-weight: 600; color: #C2C9E8;
}
.flow li:not(:last-child)::after {
  content: '→'; margin-left: 24px; position: absolute; right: -20px; top: 50%;
  transform: translateY(-50%); color: #7957FF; font-weight: 800; font-size: 13px;
}
.flow li:not(:last-child) { margin-right: 28px; }

/* 批量下载效果图细节 */
.src-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.src-row .fld-label { margin-bottom: 4px; }
.src-name { font-family: var(--font-display); font-size: 16.5px; font-weight: 800; color: #fff; }
.src-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.search-row {
  margin-top: 14px; display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 12px; border-radius: 11px;
  background: var(--field); border: 1px solid rgba(134, 151, 255, .13);
}
.ic-search { width: 16px; height: 16px; }
.search-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #D6DDF8; font-family: inherit; font-size: 12.5px;
}
.search-input::placeholder { color: #5A658F; }
.pick-info { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.pick-info em { font-style: normal; color: #9A8BFF; font-weight: 700; }

.audition { font-size: 12px; color: #9A8BFF; margin-bottom: 10px; }
.list-panel { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; }
.song-row {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 12px; border-radius: 8px; background: var(--field);
}
.song-row.checked { background: rgba(121, 87, 255, .12); }
.song-row b { flex: 1; font-size: 12.5px; font-weight: 500; color: #7E89AD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-row.checked b { color: #E2E7FF; }
.row-no { width: 24px; flex: none; text-align: left; font-size: 11px; color: #59648c; }
.song-row > i { flex: none; font-style: normal; font-size: 11px; color: var(--muted); }
.song-row > i:nth-of-type(1) { width: 38px; text-align: right; }
.play-ic {
  position: relative; flex: none; width: 27px; height: 27px; border-radius: 50%;
  border: 1.4px solid #4A5680;
}
.play-ic::after {
  content: ''; position: absolute; left: 10px; top: 7px;
  border-left: 7px solid #8D99C4; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}
.song-row.checked .play-ic { border-color: #A78BFA; }
.song-row.checked .play-ic::after { border-left-color: #CBBFFF; }
.song-row.playing { background: rgba(121, 87, 255, .16); }
.song-row.playing .play-ic { background: var(--grad); border-color: transparent; }
.song-row.playing .play-ic::after { display: none; }
.song-row.playing .play-ic::before {
  content: ''; position: absolute; inset: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6.5' y='5' width='3.6' height='14' rx='1.3' fill='%23000'/%3E%3Crect x='13.9' y='5' width='3.6' height='14' rx='1.3' fill='%23000'/%3E%3C/svg%3E") center/46% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6.5' y='5' width='3.6' height='14' rx='1.3' fill='%23000'/%3E%3Crect x='13.9' y='5' width='3.6' height='14' rx='1.3' fill='%23000'/%3E%3C/svg%3E") center/46% no-repeat;
  background: #fff;
}
.row-wave {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0 0 8px 8px;
  background: rgba(121, 87, 255, .25); overflow: hidden;
}
.row-wave i { display: block; height: 100%; background: var(--grad-bar); }

.dl-setting {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 0 18px; min-height: 60px;
}

/* 歌曲上传效果图细节 */
.song-card { padding: 18px; }
.sc-top { display: flex; align-items: flex-start; gap: 15px; }
.sc-info { flex: 1; min-width: 0; }
.sc-info > b { font-family: var(--font-display); font-size: 23px; font-weight: 800; }
.sc-sub i { font-style: normal; color: #9A8BFF; margin-right: 2px; }
.sc-sub em { font-style: normal; margin: 0 7px; }
.suno-tag {
  display: inline-flex; align-items: center; margin-top: 9px;
  height: 25px; padding: 0 12px; border-radius: 13px;
  background: rgba(121, 87, 255, .14); border: 1px solid rgba(121, 87, 255, .35);
  font-size: 11px; font-weight: 600; color: #CBBFFF;
}
.sc-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 120px; flex: none; }
.btn.soft { width: 100%; height: 34px; padding: 0 10px; font-size: 11.5px; border-radius: 10px; }
.sc-actions .btn-mini { width: 100%; justify-content: center; }
.sc-sub { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-meta {
  margin-top: 14px; display: flex; align-items: center;
  background: var(--field); border-radius: 10px; height: 42px; padding: 0 14px;
}
.sc-meta > div {
  display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0; background: none;
}
.sc-meta > div + div { padding-left: 14px; margin-left: 14px; border-left: 1px solid rgba(255,255,255,.08); }
.mc-ic {
  width: auto; height: auto; flex: none; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center; background: none;
}
.mc-ic svg { width: 14px; height: 14px; color: #B6A6FF; }
.sc-meta label { display: none; }
.sc-meta b { display: block; font-size: 12px; font-weight: 700; color: #E2E7FF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.upload-grad {
  border-radius: 14px; padding: 18px 20px;
  background: linear-gradient(100deg, #3B44D8 0%, #7C3AED 48%, #D344C9 100%);
  box-shadow: 0 18px 40px rgba(109, 71, 230, .35);
}
.ug-head { display: flex; align-items: center; gap: 13px; }
.ug-ic {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: rgba(255, 255, 255, .16); display: inline-flex; align-items: center; justify-content: center;
}
.ug-ic svg { width: 22px; height: 22px; color: #fff; }
.ug-head b { display: block; font-size: 17px; font-weight: 800; color: #fff; }
.ug-head span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .78); margin-top: 2px; }
.ug-head em { margin-left: auto; font-style: normal; font-size: 27px; font-weight: 800; color: #fff; }
.ug-bar { height: 8px; border-radius: 5px; background: rgba(255, 255, 255, .22); margin-top: 14px; overflow: hidden; }
.ug-bar i { display: block; height: 100%; border-radius: 5px; background: rgba(255, 255, 255, .85); }
.ug-foot { display: flex; justify-content: space-between; margin-top: 11px; }
.ug-foot span { font-size: 11px; color: rgba(255, 255, 255, .82); }

.steps { display: flex; justify-content: space-between; padding: 6px 4px 0; }
.step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; }
.step:not(:last-child)::after {
  content: ''; position: absolute; top: 18px; left: calc(50% + 24px); right: calc(-50% + 24px);
  height: 2px; background: #232C4E;
}
.step.done:not(:last-child)::after { background: rgba(52, 211, 153, .45); }
.step-dot {
  position: relative; z-index: 1;
  width: 37px; height: 37px; border-radius: 50%;
  background: #1A2240; border: 1.5px solid #2C3760;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #7E89AD;
}
.step.done .step-dot { background: var(--green); border-color: transparent; color: #071310; }
.step.cur .step-dot {
  border: 2px solid #7957FF; color: #CBBFFF;
  box-shadow: 0 0 0 5px rgba(121, 87, 255, .14);
}
.step b { font-size: 12px; font-weight: 700; color: #C2C9E8; }
.step em { font-style: normal; font-size: 10px; color: var(--muted); }
.step.done em { color: var(--green); }
.step.cur em { color: #CBBFFF; }

/* 批量上传效果图细节 */
.add-bar { display: flex; align-items: center; gap: 18px; }
.plus { font-size: 19px; font-weight: 600; margin-right: 2px; }
.pick-count { font-size: 13px; color: var(--muted); }
.pick-count em { font-style: normal; color: #E6EAFF; font-weight: 800; }
.batch-list { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.bf-row { display: flex; gap: 14px; align-items: stretch; }
.bf-no { width: 22px; flex: none; padding-top: 5px; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--faint); }
.bf-main { flex: 1; min-width: 0; }
.bf-line { display: flex; align-items: center; gap: 12px; }
.bf-line b { flex: 1; font-size: 13px; font-weight: 700; color: #E2E7FF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-line > i { flex: none; font-style: normal; font-size: 11.5px; color: var(--muted); width: 64px; }
.bf-line em { flex: none; font-style: normal; font-size: 11.5px; font-weight: 600; }
.st-ok { color: var(--green); }
.st-cur { color: #CBBFFF; }
.st-wait { color: var(--muted); }
.bf-del { flex: none; font-size: 11.5px; color: #5E6892; }
.bf-del:hover { color: #F0788B; }
.bf-main .bar { margin-top: 8px; }
.batch-foot {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 62px; padding: 0 20px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 13px; color: var(--sub);
}

/* 歌词排版效果图 */
.lyric-body { display: block; }
.lyric-main { padding: 22px 24px 20px; }
.lyric-grid { display: grid; grid-template-columns: 1fr 118px 1fr; gap: 18px; margin-top: 16px; }
.lyric-box {
  background: var(--field); border: 1px solid var(--line);
  border-radius: 13px; padding: 16px 18px;
}
.lyric-box.out { border-color: rgba(121, 87, 255, .35); background: #0B1326; }
.lyric-box label { display: block; font-size: 12.5px; font-weight: 600; color: #9AA4C8; margin-bottom: 12px; }
.lyric-text em { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; color: #9A8BFF; margin: 12px 0 5px; }
.lyric-text em:first-child { margin-top: 0; }
.lyric-text span { display: block; font-size: 12.5px; line-height: 2.05; color: #B6C0E2; }
.lyric-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.convert-btn {
  width: 66px; height: 66px; border-radius: 17px; background: var(--grad);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 16px; font-weight: 800; line-height: 1.3; color: #fff;
  box-shadow: 0 12px 28px rgba(121, 87, 255, .45);
}
.convert-hint { font-size: 11px; line-height: 1.7; color: var(--muted); text-align: center; }
.lyric-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.lyric-foot span { font-size: 12px; color: var(--muted); }
.lyric-foot a { font-size: 12.5px; font-weight: 700; color: #9A8BFF; cursor: pointer; }
.lyric-foot a:hover { color: #B9A9FF; }

/* ---------------- 第八屏：总结 ---------------- */
.sum-title { font-size: 46px; line-height: 1.25; }
.sum-title::after { display: none; }
.sum-sub-line { display: block; margin-top: 14px; font-size: 30px; font-weight: 700; color: #EDF0FF; -webkit-text-fill-color: currentColor; }
.sum-row { display: flex; justify-content: space-between; margin-top: 66px; }
.sum-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sum-ic {
  width: 76px; height: 76px; border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--line-strong);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.sum-ic svg { width: 32px; height: 32px; color: #A99CFF; }
.sum-item:hover .sum-ic {
  transform: translateY(-5px); border-color: rgba(121, 87, 255, .55);
  box-shadow: 0 16px 34px rgba(121, 87, 255, .18);
}
.sum-item b { font-size: 15.5px; font-weight: 700; color: #E6EAFF; }

/* ---------------- 第九屏：商务合作 ---------------- */
.biz-panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: center;
  background: linear-gradient(135deg, rgba(17, 26, 50, .9), rgba(13, 19, 40, .9));
  border: 1px solid var(--line-strong); border-radius: 22px;
  padding: 62px 64px;
}
.biz-panel::before {
  content: ''; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(233, 77, 220, .16), transparent 65%);
  pointer-events: none;
}
.biz-left { position: relative; z-index: 1; }
.biz-left h2 { margin-top: 14px; font-family: var(--font-display); font-size: 35px; font-weight: 800; }
.biz-left p { margin-top: 16px; font-size: 15.5px; line-height: 1.95; color: var(--sub); }
.biz-cta { display: flex; gap: 16px; margin-top: 38px; }
.biz-qr {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 24px; border-radius: 18px;
  background: rgba(10, 15, 32, .7); border: 1px solid var(--line);
}
.biz-qr > b { margin-top: 16px; font-size: 15px; font-weight: 700; color: #EDF0FF; }
.biz-qr ul { display: flex; gap: 16px; margin-top: 10px; }
.biz-qr li { list-style: none; font-size: 12.5px; color: var(--sub); position: relative; }
.biz-qr li:not(:last-child)::after { content: '·'; position: absolute; right: -11px; color: var(--faint); }

/* ---------------- 第十屏：下载 ---------------- */
.dl-panel {
  position: relative; overflow: hidden;
  text-align: center; border-radius: 24px;
  background: linear-gradient(180deg, rgba(17, 26, 50, .85), rgba(12, 18, 38, .9));
  border: 1px solid var(--line-strong);
  padding: 78px 40px 72px;
}
.dl-panel::before {
  content: ''; position: absolute; left: 50%; top: -240px; transform: translateX(-50%);
  width: 680px; height: 420px;
  background: radial-gradient(ellipse, rgba(121, 87, 255, .22), rgba(75, 124, 255, .08) 45%, transparent 70%);
  pointer-events: none;
}
.dl-logo {
  position: relative; width: 80px; height: 80px; margin: 0 auto;
  border-radius: 21px;
  filter: drop-shadow(0 12px 28px rgba(121, 87, 255, .45));
}
.dl-panel h2 { position: relative; margin-top: 24px; font-family: var(--font-display); font-size: 39px; font-weight: 800; }
.dl-slogan { position: relative; margin-top: 12px; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: #D6DDF8; }
.dl-sub { position: relative; margin-top: 9px; font-size: 14.5px; color: var(--sub); }
.dl-meta { position: relative; display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 30px; }
.dl-os {
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 20px; border-radius: 20px;
  border: 1px solid rgba(121, 87, 255, .5); background: rgba(121, 87, 255, .08);
  font-size: 14px; font-weight: 700; color: #E3E7FF;
}
.dl-os svg { width: 16px; height: 16px; }
.dl-ver { font-size: 13.5px; color: var(--sub); }
.dl-ver b { color: #EDF0FF; }
.dl-panel .btn { position: relative; margin-top: 32px; }
.dl-btns { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.dl-panel .dl-btns .btn { margin-top: 0; }
.dl-note { position: relative; margin-top: 22px; font-size: 12.5px; color: var(--muted); letter-spacing: .3px; }

/* Mac 版下载下拉：默认只占一个按钮的位置，点击后展开芯片选择 */
.dl-mac-dd { position: relative; display: inline-flex; }
.dl-mac-toggle .dl-mac-caret { width: 15px; height: 15px; margin-left: 2px; transition: transform .22s ease; }
.dl-mac-dd.open .dl-mac-toggle .dl-mac-caret { transform: rotate(180deg); }
.dl-mac-menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 250px; padding: 8px;
  background: linear-gradient(180deg, #141B33, #0F1528);
  border: 1px solid rgba(132, 146, 220, .20); border-radius: 14px;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 40;
}
.dl-mac-dd.open .dl-mac-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dl-mac-opt {
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; text-decoration: none;
  transition: background .15s ease;
}
.dl-mac-opt + .dl-mac-opt { margin-top: 2px; }
.dl-mac-opt:hover { background: rgba(121, 87, 255, .13); }
.dl-mac-opt .mo-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(121, 87, 255, .14); color: #B9A8FF;
}
.dl-mac-opt .mo-ic svg { width: 21px; height: 21px; }
.dl-mac-opt .mo-txt { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.dl-mac-opt .mo-chip { font-size: 14.5px; font-weight: 800; color: #EDF0FF; letter-spacing: .2px; }
.dl-mac-opt .mo-sub { font-size: 12px; color: var(--muted); }
.dl-mac-opt .mo-go {
  flex: none; width: 16px; height: 16px; color: var(--muted);
  opacity: 0; transform: translateX(-3px);
  transition: opacity .15s ease, transform .15s ease, color .15s ease;
}
.dl-mac-opt:hover .mo-go { opacity: 1; transform: translateX(0); color: #B9A8FF; }
@media (max-width: 560px) {
  .dl-mac-menu { min-width: 230px; }
}

/* ---------------- Footer ---------------- */
.footer { background: #080D1D; border-top: 1px solid rgba(132, 146, 220, .09); }
.footer-grid {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 40px;
  padding: 54px 40px 36px;
}
.f-brand .brand { pointer-events: none; }
.f-brand p { margin-top: 14px; font-size: 13px; color: var(--muted); }
.f-links { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 14px 32px; padding-top: 10px; }
.f-links a { font-size: 14px; color: var(--sub); transition: color .2s; }
.f-links a:hover { color: #fff; }
.f-contact { justify-self: end; }
.f-contact > b { font-size: 14.5px; font-weight: 700; color: #EDF0FF; }
.f-wechat { display: flex; align-items: center; gap: 13px; margin-top: 14px; }
.f-wechat span { font-size: 13px; font-weight: 600; color: #C2C9E8; line-height: 1.6; }
.f-wechat em { font-style: normal; font-size: 11px; font-weight: 400; color: var(--muted); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px 26px; margin-top: 22px;
  border-top: 1px solid rgba(132, 146, 220, .08);
}
.footer-bottom span { font-size: 12px; color: #55608A; }
.f-legal { display: flex; align-items: center; gap: 16px; }
.f-legal a { font-size: 12.5px; color: #8A94BD; transition: color .2s; }
.f-legal a:hover { color: #fff; }
.f-legal i { width: 1px; height: 12px; background: rgba(132, 146, 220, .25); font-style: normal; }

/* ---------------- 滚动显现 ---------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .12s; }


/* ============================================================
   GoodBeat Hero Right Visual · refined product showcase
   仅调整第一屏右侧效果，不影响左侧文案、导航及后续页面
   ============================================================ */
.hero-visual {
  min-width: 0;
  overflow: visible;
}

.hv-stage {
  height: 510px;
}

/* 参考图构图：电脑更大、更靠左；手机作为前景层 */
.hv-laptop {
  left: -1%;
  bottom: 15px;
  width: 96%;
  transform: perspective(2200px) rotateY(-4.8deg) rotateX(.7deg);
  transform-origin: 48% 100%;
}

.hv-lid {
  padding: 12px 10px 10px;
  border-radius: 16px 16px 8px 8px;
  background: linear-gradient(150deg, #26345F 0%, #151F42 45%, #080E21 100%);
  border-color: rgba(117, 153, 255, .34);
  box-shadow:
    0 48px 90px -30px rgba(0, 0, 0, .88),
    0 0 54px -10px rgba(48, 101, 255, .52),
    0 26px 72px -26px rgba(151, 76, 255, .58),
    inset 0 1px 0 rgba(188, 208, 255, .30),
    inset 0 -2px 7px rgba(0, 0, 0, .55);
}

.hv-screen {
  border-radius: 9px;
  box-shadow:
    inset 0 0 50px rgba(56, 96, 220, .16),
    inset 0 0 0 1px rgba(0, 0, 0, .55);
}

.m-body {
  height: 372px;
}

/* 屏幕 UI 更接近参考图：清晰、紧凑、真实软件感 */
.m-bar {
  height: 35px;
}

.m-side {
  width: 88px;
}

.m-main {
  padding: 13px 15px;
}

.m-search {
  height: 39px;
}

.m-row {
  padding: 8px 10px;
}

/* 手机略微放大并前移，保持“电脑后、手机前”的层次 */
.hv-phone {
  right: 2%;
  bottom: 13px;
  width: 145px;
  height: 292px;
  border-radius: 31px;
  z-index: 8;
  transform: perspective(1100px) rotateY(-4deg) rotateZ(-1.2deg);
  box-shadow:
    0 34px 62px -14px rgba(0, 0, 0, .84),
    0 0 40px -7px rgba(134, 92, 255, .54),
    inset 0 1px 0 rgba(194, 188, 255, .30);
}

.hp-screen {
  border-radius: 25px;
}

/* 背景波形更靠近参考图：主要集中在产品后方，不喧宾夺主 */
.hv-fx {
  inset: -75px -110px -50px -85px;
}

.hv-glow-a {
  top: -90px;
  left: 7%;
  width: 560px;
  height: 560px;
  opacity: .9;
}

.hv-glow-b {
  top: 55px;
  right: -120px;
  width: 520px;
  height: 520px;
  opacity: .82;
}

.hv-slogan {
  right: -58px;
  top: 52px;
  font-size: 20px;
  line-height: 1.48;
  letter-spacing: 2px;
}

.hv-swoosh {
  width: 140px;
}

/* 产品落地光集中在电脑和手机脚下 */
.hv-ground {
  height: 106px;
}

.hv-ground::after {
  left: 5%;
  right: 2%;
  bottom: 17px;
  height: 4px;
}

/* 在常见 1440px~1600px 桌面宽度下保持右侧构图完整 */
@media (max-width: 1360px) {
  .hv-laptop {
    left: 0;
    width: 94%;
  }
  .hv-phone {
    right: 0;
    width: 138px;
    height: 280px;
  }
  .hv-slogan {
    right: 2px;
    top: -30px;
    font-size: 17px;
  }
}

@media (min-width: 1700px) {
  .hv-laptop {
    width: 98%;
  }
  .hv-phone {
    right: 1%;
    width: 152px;
    height: 306px;
  }
}

/* ---------------- 交流群二维码弹窗 ---------------- */
.gqr-mask {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(6, 9, 20, .72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.gqr-mask.show { opacity: 1; visibility: visible; }

.gqr-modal {
  position: relative;
  width: 460px; max-width: 100%;
  padding: 22px 22px 20px;
  text-align: center;
  background: linear-gradient(180deg, #151E3D 0%, #0D1428 100%);
  border: 1px solid rgba(132, 146, 220, .22);
  border-radius: 20px;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, .7),
    0 0 70px -18px rgba(121, 87, 255, .6),
    inset 0 1px 0 rgba(176, 198, 255, .14);
  transform: translateY(14px) scale(.97);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.gqr-mask.show .gqr-modal { transform: translateY(0) scale(1); }

.gqr-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #AEB8DD; background: rgba(10, 15, 32, .66);
  border: 1px solid rgba(132, 146, 220, .2);
  transition: color .2s, background .2s, border-color .2s;
}
.gqr-close:hover { color: #fff; background: rgba(121, 87, 255, .3); border-color: rgba(150, 130, 255, .5); }
.gqr-close svg { width: 16px; height: 16px; }

.gqr-card {
  width: 100%; border-radius: 14px; overflow: hidden;
  background: #fff; padding: 10px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .4);
}
.gqr-card img { display: block; width: 100%; height: auto; border-radius: 8px; }

.gqr-tip {
  margin-top: 16px;
  font-size: 14px; font-weight: 600; letter-spacing: .5px; color: #DDE4FF;
}

/* ---------------- 下载区安装提示（无签名弹窗指引） ---------------- */
.dl-help {
  width: 100%;
  max-width: 560px;
  margin: 22px auto 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
}
.dl-help summary {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px;
  cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--sub);
  list-style: none;
  user-select: none;
  transition: background .2s, color .2s;
}
.dl-help summary::-webkit-details-marker { display: none; }
.dl-help summary:hover { background: var(--card-2); color: #fff; }
.dl-help summary > svg:first-child { flex: none; width: 17px; height: 17px; color: var(--cyan); }
.dl-help .dh-arrow { margin-left: auto; flex: none; width: 15px; height: 15px; color: var(--muted); transition: transform .25s; }
.dl-help[open] summary .dh-arrow { transform: rotate(180deg); }
.dl-help[open] summary { color: #fff; border-bottom: 1px solid var(--line); }

.dl-help-body { padding: 16px 18px 18px; }
.dl-help-body p { font-size: 13px; color: var(--sub); line-height: 1.75; }
.dl-help-body ol { margin: 10px 0 0; padding-left: 22px; }
.dl-help-body li { font-size: 13px; color: var(--sub); line-height: 2; }
.dl-help-body li b { color: #fff; }
.dl-help-alt {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px !important; color: var(--muted) !important;
}
.dl-hash { margin-top: 14px; }
.dl-hash span { display: block; font-size: 11px; letter-spacing: .6px; color: var(--muted); margin-bottom: 6px; }
.dl-hash code {
  display: block; word-break: break-all;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11.5px; line-height: 1.6; color: #C2C9E8;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px;
}