/* =========================================================
   清韵文化 · 官网首页（2026-10 极光玻璃版）
   玻璃拟态：backdrop blur 20-30px / 半透明白 / 1px 细边 / 24px 圆角
   ========================================================= */
:root{
  --bg:#07070E; --ink:#F5F7FC; --muted:rgba(245,247,252,.60); --faint:rgba(245,247,252,.38);
  --glass:rgba(255,255,255,.075); --glass-2:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.16);
  --pink:#FF3D7F; --violet:#7C5CFF; --cyan:#3AE0DC;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.75 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
a{color:inherit;text-decoration:none}
/* 尺寸随分辨率自适应：边距、字号、间距都用 clamp，窗口窄就收紧、窗口宽就舒展（老板 2026-10-10） */
.wrap{width:min(1200px,100% - clamp(24px,3.4vw,48px));margin:0 auto}

/* ---------- 极光背景 ---------- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(1200px 800px at 15% -10%,#1B1147 0%,transparent 60%),
  radial-gradient(1000px 700px at 90% 10%,#0B2A44 0%,transparent 62%),
  linear-gradient(180deg,#08080F,#05050A 60%,#0A0913)}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;mix-blend-mode:screen;animation:drift 26s ease-in-out infinite}
.aurora i:nth-child(1){width:620px;height:620px;left:-8%;top:-12%;background:radial-gradient(circle,#6D28D9,transparent 66%)}
.aurora i:nth-child(2){width:560px;height:560px;right:-6%;top:6%;background:radial-gradient(circle,#0E7490,transparent 66%);animation-delay:-8s}
.aurora i:nth-child(3){width:520px;height:520px;left:35%;top:38%;background:radial-gradient(circle,#BE185D,transparent 68%);animation-delay:-15s}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-40px,0) scale(1.08)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1px);background-size:3px 3px}

/* ---------- 玻璃 ---------- */
.glass{background:var(--glass);border:1px solid var(--line);border-radius:24px;
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.18)}
.glass-2{background:var(--glass-2);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%)}

/* ---------- 悬浮玻璃导航 ---------- */
.nav{position:sticky;top:14px;z-index:30;width:min(1200px,100% - clamp(16px,2.4vw,32px));margin:14px auto 0;border-radius:999px;
  padding:10px clamp(10px,1.1vw,20px) 10px clamp(14px,1.6vw,22px);display:flex;align-items:center;justify-content:space-between;
  gap:clamp(10px,1.3vw,18px);flex-wrap:nowrap;min-width:0}
.brand{display:flex;align-items:center;gap:10px}
.brand i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font:700 16px/1 var(--sans);font-style:normal;background:linear-gradient(145deg,var(--pink),var(--violet));color:#fff;box-shadow:0 10px 22px -10px rgba(255,61,127,.9);position:relative}
.brand i b{position:absolute;right:-5px;bottom:-5px;width:14px;height:14px;border-radius:4px;background:rgba(255,255,255,.9);color:#B3125A;font:700 8px/14px var(--sans);text-align:center}
.brand span{font-size:clamp(13.5px,1.15vw,16px);font-weight:700;letter-spacing:.14em;white-space:nowrap}
.brand em{font-style:normal;display:block;font-size:8.5px;letter-spacing:.3em;color:var(--faint);margin-top:2px}
.menu{display:flex;gap:clamp(11px,1.5vw,24px);font-size:clamp(12.5px,.93vw,14px);color:var(--muted);
  flex-wrap:nowrap;min-width:0}
.menu a{white-space:nowrap}
.menu a:hover{color:#fff}
.menu a.lrc{color:#FF7AA8}
.cta{padding:clamp(7px,.65vw,9px) clamp(13px,1.3vw,20px);border-radius:999px;background:linear-gradient(120deg,var(--pink),var(--violet));
  color:#fff;font-size:clamp(12.5px,.95vw,13.5px);font-weight:600;white-space:nowrap;flex:none;
  box-shadow:0 14px 30px -14px rgba(255,61,127,.95)}

/* ---------- 首屏 ---------- */
.hero{padding:clamp(30px,3.8vw,56px) 0 clamp(26px,2.8vw,40px)}
.hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:stretch}
.hero-card{padding:22px clamp(22px,3vw,46px) 20px;border-radius:28px;min-height:clamp(280px,22vw,318px);
  display:flex;flex-direction:column;justify-content:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.3em;color:rgba(255,255,255,.66);margin-bottom:10px}
.eyebrow::before,.eyebrow::after{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,61,127,.9))}
.eyebrow::after{background:linear-gradient(90deg,rgba(124,92,255,.9),transparent)}
.hero h1{font-size:clamp(34px,4.2vw,58px);line-height:1.16;letter-spacing:.02em;font-weight:800}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,#fff,#9BE7FF 40%,#FFB4D3);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin:12px 0 18px;color:var(--muted);font-size:15px;line-height:1.9;max-width:620px}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.b1{padding:13px 28px;border-radius:999px;background:#fff;color:#0B0B14;font-weight:700;font-size:14px}
.b2{padding:13px 28px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);font-size:14px;color:#EDEFF7}
.stage{position:relative;height:420px;display:grid;place-items:center}
.sphere{width:340px;height:340px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.22),rgba(255,255,255,.04) 46%,rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.4),0 0 80px -20px rgba(124,92,255,.5)}
.vinyl{width:230px;height:230px;border-radius:50%;position:relative;
  background:repeating-radial-gradient(circle,rgba(255,255,255,.07) 0 2px,rgba(12,10,24,.9) 2px 5px,rgba(30,20,60,.8) 5px 7px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);animation:spin 26s linear infinite}
.vinyl::after{content:"韵";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font:700 26px/1 var(--sans);color:#fff;background:linear-gradient(145deg,var(--pink),var(--violet));box-shadow:0 0 30px rgba(255,61,127,.7)}
@keyframes spin{to{transform:rotate(360deg)}}
.chip-float{position:absolute;padding:9px 16px;border-radius:999px;font-size:12.5px;color:#E9ECF6}
.chip-float.a{right:8px;top:38px}
.chip-float.b{left:0;bottom:52px}

/* ---------- 区块 ---------- */
.sec{padding:clamp(30px,3.2vw,40px) 0 clamp(32px,3.6vw,44px)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:.04em}
.sec-head h2 em{display:block;font-style:normal;font-size:11px;letter-spacing:.34em;color:var(--faint);margin-bottom:8px}
.sec-head .note{font-size:12.5px;color:var(--faint)}
.badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:11.5px;background:rgba(255,61,127,.18);border:1px solid rgba(255,61,127,.35);color:#FF9CC0}

/* ---------- 轮播（专辑 / 艺人） ---------- */
.carousel{overflow:hidden}
.track{display:flex;width:100%;transition:transform .7s cubic-bezier(.22,.72,.24,1)}
.page{flex:0 0 100%;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.alb{padding:12px;border-radius:20px;text-align:center}
.alb .cover{width:100%;aspect-ratio:1/1;border-radius:14px;background-size:cover;background-position:center;background-color:rgba(255,255,255,.06);box-shadow:0 14px 30px -16px rgba(0,0,0,.9)}
.alb h3{margin:10px 0 2px;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alb p{font-size:11px;color:var(--faint)}
.artists{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.av{text-align:center}
.av i{width:100%;max-width:110px;aspect-ratio:1/1;border-radius:50%;display:block;margin:0 auto 8px;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.25);box-shadow:0 16px 34px -18px #000}
.av span{font-size:12.5px;color:rgba(245,247,252,.85)}
.av small{display:block;font-size:11px;color:var(--faint)}

/* ---------- 理由 ---------- */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.w{padding:26px 22px;border-radius:22px;text-align:center;transition:transform .3s,box-shadow .3s}
.w:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(255,61,127,.7)}
.w i{width:64px;height:64px;border-radius:20px;margin:0 auto 14px;display:grid;place-items:center;background:rgba(255,255,255,.10);border:1px solid var(--line)}
.w svg{width:28px;height:28px;stroke:#CFD6EE;fill:none;stroke-width:1.6}
.w:hover i{background:linear-gradient(145deg,var(--pink),var(--violet));border-color:transparent}
.w:hover svg{stroke:#fff}
.w h4{font-size:15px;margin-bottom:8px}
.w p{font-size:12.5px;color:var(--muted);line-height:1.9}

/* ---------- 平台 ---------- */
.plats{display:flex;flex-direction:column;gap:12px}
.prow{display:flex;align-items:center;gap:14px;min-width:0}
.prow>span{flex:none;width:72px;font-size:12.5px;color:var(--faint);text-align:right}
.strip{display:flex;gap:10px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.pw{flex:none;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:14px;font-size:12.5px;color:#E8EBF5;white-space:nowrap}
.pw img,.pw svg{width:20px;height:20px;object-fit:contain}

/* ---------- 页脚 ---------- */
footer{padding:26px 0 34px;color:var(--faint);font-size:12px}
.foot{border-radius:20px;padding:20px 24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer a{color:rgba(245,247,252,.62)}
footer a:hover{color:#fff}

/* ---------- 响应式 ---------- */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .stage{height:320px;order:-1}
  .sphere{width:260px;height:260px}.vinyl{width:176px;height:176px}.vinyl::after{width:58px;height:58px;font-size:20px}
  .page{grid-template-columns:repeat(3,1fr)}
  .artists{grid-template-columns:repeat(3,1fr)}
  .why{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .wrap{width:calc(100% - 28px)}
  .nav{width:calc(100% - 20px);border-radius:22px;padding:10px 12px;flex-wrap:wrap;top:8px}
  .menu{order:3;width:100%;gap:14px 18px;font-size:13px;flex-wrap:wrap;justify-content:flex-start;row-gap:8px}
  .hero-card{padding:28px 22px}
  .pw{padding:8px 12px;font-size:12px}
  .prow{flex-direction:column;align-items:flex-start}
  .prow>span{text-align:left}
  /* 2026-10-09 平台扩容后：窄屏不再横向滚动（平台多了会被切掉看不见），改成自动换行 */
  .strip{width:100%;flex-wrap:wrap;overflow:visible}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .track{transition:none}
}

/* =========================================================
   浅色主题（2026-10-09 老板要求：前端也改浅色调 · 浅蓝渐变白）
   只覆盖颜色与阴影，版式不动
   ========================================================= */
:root{
  --bg:#EAF2FF; --ink:#152036; --muted:#5E6B85; --faint:#7C89A3;
  --glass:rgba(255,255,255,.80); --glass-2:rgba(255,255,255,.90);
  --line:rgba(46,124,246,.16);
  --pink:#2E7CF6; --violet:#1B4BD8; --cyan:#7DD3FC;
}
body{background:linear-gradient(168deg,#E4EFFF 0%,#F4F9FF 46%,#FFFFFF 100%) fixed;color:var(--ink)}
.aurora{background:
  radial-gradient(900px 620px at 12% -8%,rgba(46,124,246,.18),transparent 62%),
  radial-gradient(820px 560px at 92% 6%,rgba(125,211,252,.30),transparent 62%),
  linear-gradient(180deg,#F2F7FF,#FFFFFF 62%,#EFF5FF)}
.aurora i{opacity:.5;mix-blend-mode:normal;filter:blur(80px)}
.aurora i:nth-child(1){background:radial-gradient(circle,rgba(46,124,246,.32),transparent 66%)}
.aurora i:nth-child(2){background:radial-gradient(circle,rgba(125,211,252,.45),transparent 66%)}
.aurora i:nth-child(3){background:radial-gradient(circle,rgba(196,181,253,.38),transparent 68%)}
.grain{opacity:.55;background-image:radial-gradient(rgba(21,32,54,.045) 1px,transparent 1px)}
.glass{background:var(--glass);border:1px solid var(--line);
  box-shadow:0 26px 56px -44px rgba(24,54,110,.55),inset 0 1px 0 rgba(255,255,255,.9)}
.glass-2{background:var(--glass-2)}
.nav{background:rgba(255,255,255,.78);border:1px solid var(--line);box-shadow:0 20px 46px -36px rgba(24,54,110,.6)}
.brand i{box-shadow:0 12px 24px -12px rgba(46,124,246,.9)}
.brand i b{background:#fff;color:#1B4BD8}
.brand em,.brand small{color:var(--faint)}
.menu{color:#3D4A66}
.menu a:hover{color:#1B4BD8}
.menu a.lrc{color:#2E7CF6}
.cta{background:linear-gradient(120deg,#2E7CF6,#1B4BD8);box-shadow:0 14px 30px -14px rgba(46,124,246,.95)}
.eyebrow{color:#5E6B85}
.eyebrow::before{background:linear-gradient(90deg,transparent,rgba(46,124,246,.9))}
.eyebrow::after{background:linear-gradient(90deg,rgba(125,211,252,.9),transparent)}
.hero h1{color:#152036}
.hero h1 em{background:linear-gradient(100deg,#2E7CF6,#7DD3FC);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{color:#5E6B85}
.b1{background:linear-gradient(120deg,#2E7CF6,#1B4BD8);color:#fff;box-shadow:0 16px 32px -18px rgba(46,124,246,.95)}
.b2{background:#fff;border:1px solid var(--line);color:#31405F}
.sphere{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.96),rgba(255,255,255,.55) 46%,rgba(46,124,246,.10));
  border:1px solid rgba(46,124,246,.20);
  box-shadow:0 40px 90px -54px rgba(24,54,110,.75),inset 0 1px 0 rgba(255,255,255,1),0 0 70px -22px rgba(46,124,246,.35)}
.vinyl{background:repeating-radial-gradient(circle,rgba(21,32,54,.10) 0 2px,rgba(255,255,255,.94) 2px 5px,rgba(46,124,246,.12) 5px 7px);
  box-shadow:inset 0 0 0 1px rgba(46,124,246,.16)}
.vinyl::after{background:linear-gradient(145deg,#2E7CF6,#1B4BD8);box-shadow:0 0 26px rgba(46,124,246,.55)}
.chip-float{color:#31405F;background:rgba(255,255,255,.86);border:1px solid var(--line)}
.sec-head h2{color:#152036}
.sec-head h2 em{color:#8A96AE}
.sec-head .note{color:#8A96AE}
.alb{background:rgba(255,255,255,.86);border:1px solid var(--line);
  box-shadow:0 22px 46px -38px rgba(24,54,110,.6)}
.alb .cover{background-color:rgba(46,124,246,.08);box-shadow:0 14px 30px -20px rgba(24,54,110,.7)}
.alb h3{color:#152036}
.alb p{color:#7C89A3}
.av i{border:1px solid rgba(46,124,246,.22);box-shadow:0 16px 34px -22px rgba(24,54,110,.8)}
.av span{color:#31405F}
.av small{color:#8A96AE}
.w{background:rgba(255,255,255,.82);border:1px solid var(--line);
  box-shadow:0 22px 46px -38px rgba(24,54,110,.55)}
.w:hover{box-shadow:0 30px 60px -34px rgba(46,124,246,.55)}
.w i{background:rgba(46,124,246,.10);border:1px solid var(--line)}
.w svg{stroke:#2E7CF6}
.w h4{color:#152036}
.w p{color:#5E6B85}
.pw{background:rgba(255,255,255,.82);border:1px solid var(--line);color:#31405F}
/* 2026-10-09 方向 A：主流行的「+ 更多渠道」胶囊、以及没有官方图标的平台用文字卡 */
.pw.more{background:rgba(46,124,246,.10);border:1px solid rgba(46,124,246,.22);color:#2E7CF6;
  font-weight:600;font-size:12px}
.pw.plain{padding-left:14px;color:#5E6B85}
.prow>span{color:#8A96AE}
.strip::-webkit-scrollbar-thumb{background:rgba(46,124,246,.25)}
footer{color:#8A96AE}
footer a{color:#5E6B85}
footer a:hover{color:#1B4BD8}
.foot{background:rgba(255,255,255,.78);border:1px solid var(--line);
  box-shadow:0 22px 46px -40px rgba(24,54,110,.5)}
.badge{background:rgba(46,124,246,.12);border:1px solid rgba(46,124,246,.30);color:#1B4BD8}

/* ---------- 新增说明性区块（2026-10-09：老板说官网太单调） ---------- */
.sec-head+.about-grid{margin-top:6px}
.about-grid{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:stretch}
.about-card{padding:28px 30px;border-radius:24px}
.about-card h3{margin:0 0 12px;font-size:20px;letter-spacing:.02em}
.about-card p{color:#4E5B76;font-size:13.5px;line-height:2.05;margin:0 0 12px}
.about-points{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px}
.about-points li{display:flex;gap:10px;font-size:13px;color:#4E5B76}
.about-points i{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:11px;
  background:rgba(46,124,246,.14);color:#1B4BD8;margin-top:2px}
.about-points b{color:#152036;margin-right:6px}
.stats-panel{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stats-panel .st{border-radius:20px;padding:22px 20px;display:flex;flex-direction:column;justify-content:center}
.stats-panel .st b{font-size:28px;letter-spacing:.01em;
  background:linear-gradient(120deg,#1B4BD8,#2E7CF6);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats-panel .st span{font-size:12.5px;color:#7C89A3;margin-top:4px}

.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc-card{border-radius:20px;padding:22px 24px}
.svc-card h4{margin:0 0 8px;font-size:15.5px;display:flex;align-items:center;gap:9px}
.svc-card h4::before{content:"";width:4px;height:14px;border-radius:3px;background:linear-gradient(180deg,#2E7CF6,#1B4BD8)}
.svc-card p{margin:0;font-size:12.5px;color:#5E6B85;line-height:1.95}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.step{border-radius:22px;padding:24px 20px;position:relative;overflow:hidden}
.step i{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;font-style:normal;font-weight:800;font-size:14px;color:#fff;
  background:linear-gradient(145deg,#2E7CF6,#1B4BD8);margin-bottom:12px;box-shadow:0 12px 22px -12px rgba(46,124,246,.95)}
.step b{display:block;font-size:14.5px;margin-bottom:7px}
.step p{margin:0;font-size:12.5px;color:#5E6B85;line-height:1.95}
.step::after{content:"";position:absolute;right:-26px;top:-26px;width:86px;height:86px;border-radius:50%;background:rgba(46,124,246,.07)}

.license{border-radius:24px;padding:10px 8px 16px;overflow:hidden}
.license table{width:100%;border-collapse:collapse}
.license th{font-size:12.5px;color:#7C89A3;font-weight:600;text-align:left;padding:14px 20px;background:rgba(46,124,246,.05);
  border-bottom:1px solid rgba(46,124,246,.14)}
.license td{padding:16px 20px;font-size:13.5px;color:#3D4A66;border-bottom:1px solid rgba(46,124,246,.10)}
.license tr:last-child td{border-bottom:0}
.license td b{color:#152036}
.license-note{margin:0;padding:14px 20px 4px;font-size:12.5px;color:#7C89A3;line-height:1.9}

.faq-glass{border-radius:24px;padding:8px 8px 12px}
.faq-glass details{border-bottom:1px solid rgba(46,124,246,.10);padding:4px 12px}
.faq-glass details:last-child{border-bottom:0}
.faq-glass summary{cursor:pointer;list-style:none;padding:14px 8px;font-size:14px;font-weight:600;color:#1F2B45;display:flex;align-items:center;gap:10px}
.faq-glass summary::-webkit-details-marker{display:none}
.faq-glass summary::before{content:"＋";width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:12px;
  background:rgba(46,124,246,.12);color:#1B4BD8;flex:none}
.faq-glass details[open] summary::before{content:"－";background:linear-gradient(145deg,#2E7CF6,#1B4BD8);color:#fff}
.faq-glass p{margin:0 0 14px 40px;font-size:13px;color:#5E6B85;line-height:2}

@media(max-width:1000px){
  .about-grid,.svc,.steps{grid-template-columns:1fr}
  .stats-panel{grid-template-columns:1fr 1fr}
  .faq-glass p{margin-left:0}
}

/* ---------- 新卡片的悬停动效（对齐「选择我们的理由」那块的手感） ---------- */
.about-card,.stats-panel .st,.svc-card,.step,.license,.faq-glass{transition:transform .3s cubic-bezier(.22,.72,.24,1),box-shadow .3s,border-color .3s}
.about-card:hover,.stats-panel .st:hover,.svc-card:hover,.step:hover,.license:hover,.faq-glass:hover{
  transform:translateY(-4px);border-color:rgba(46,124,246,.34);
  box-shadow:0 30px 60px -34px rgba(46,124,246,.55),inset 0 1px 0 rgba(255,255,255,.95)}
.stats-panel .st:hover b{background:linear-gradient(120deg,#2E7CF6,#7DD3FC);-webkit-background-clip:text;background-clip:text}

.svc-card{position:relative;overflow:hidden}
.svc-card::after{content:"";position:absolute;right:-30px;bottom:-34px;width:96px;height:96px;border-radius:50%;
  background:rgba(46,124,246,0);transition:background .3s}
.svc-card:hover::after{background:rgba(46,124,246,.09)}
.svc-card:hover h4{color:#1B4BD8}
.svc-card:hover h4::before{background:linear-gradient(180deg,#2E7CF6,#7DD3FC)}

.step i{transition:transform .3s,box-shadow .3s}
.step:hover i{transform:scale(1.08);box-shadow:0 16px 30px -10px rgba(46,124,246,1)}
.step:hover b{color:#1B4BD8}

.license tbody tr{transition:background .25s}
.license tbody tr:hover{background:rgba(46,124,246,.055)}
.license tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 #2E7CF6}

.faq-glass summary{transition:color .2s}
.faq-glass summary:hover{color:#1B4BD8}
.faq-glass summary:hover::before{background:rgba(46,124,246,.24);transform:scale(1.06)}
.faq-glass summary::before{transition:background .2s,transform .2s}

@media(prefers-reduced-motion:reduce){
  .about-card:hover,.stats-panel .st:hover,.svc-card:hover,.step:hover,.license:hover,.faq-glass:hover{transform:none}
}

/* ---------- 首屏图形：近期发行专辑环绕（2026-10-09 老板定方向 C，去掉中间圆球） ---------- */
/* ---------- 首页 注册/登录 弹窗（2026-10-12 老板要求做进官网首页） ---------- */
.nav-act{display:flex;align-items:center;gap:10px;flex:none}
.nav-login{font-size:clamp(12.5px,.95vw,13.5px);font-weight:600;color:#1B4BD8;white-space:nowrap;
  padding:clamp(7px,.65vw,9px) clamp(12px,1.1vw,16px);border-radius:999px;background:rgba(46,124,246,.10);
  border:1px solid rgba(46,124,246,.22);transition:background .2s,border-color .2s}
.nav-login:hover{background:rgba(46,124,246,.18);border-color:rgba(46,124,246,.4)}
.auth-mask{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  padding:clamp(14px,2vw,28px);
  background:radial-gradient(900px 500px at 50% 0%,rgba(53,116,238,.22),transparent 62%),rgba(14,26,52,.42);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.auth-mask.open{display:flex}
/* 玻璃质感 + 随浏览器尺寸自适应：宽/内边距/字号/控件高度全部 clamp（2026-10-12 老板要求） */
.auth-card{position:relative;width:clamp(360px,30vw,540px);max-width:100%;border-radius:clamp(18px,1.6vw,26px);
  padding:clamp(22px,2.1vw,34px) clamp(22px,2.1vw,34px) clamp(18px,1.8vw,28px);
  background:linear-gradient(158deg,rgba(255,255,255,.9),rgba(238,245,255,.8));
  border:1px solid rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);
  box-shadow:0 40px 90px -34px rgba(10,26,58,.62),0 0 0 1px rgba(46,124,246,.08),inset 0 1px 0 rgba(255,255,255,.95);
  animation:authIn .24s cubic-bezier(.22,.72,.24,1)}
.auth-card::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(46,124,246,.55),transparent)}
@keyframes authIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.auth-x{position:absolute;right:clamp(12px,1.2vw,18px);top:clamp(10px,1.1vw,16px);
  width:clamp(26px,2vw,32px);height:clamp(26px,2vw,32px);border-radius:9px;display:grid;place-items:center;
  color:#8A96AE;font-size:clamp(13px,.95vw,15px);cursor:pointer;background:rgba(255,255,255,.6);
  border:1px solid rgba(46,124,246,.14)}
.auth-x:hover{background:rgba(46,124,246,.14);color:#1B4BD8}
.auth-tabs{display:flex;gap:6px;background:rgba(255,255,255,.5);border:1px solid rgba(46,124,246,.12);
  border-radius:12px;padding:4px;margin-bottom:clamp(14px,1.4vw,20px);width:fit-content}
.auth-tabs button{border:0;background:transparent;font-size:clamp(13px,1vw,14.5px);font-weight:600;color:#6D7792;
  padding:clamp(7px,.7vw,10px) clamp(16px,1.6vw,26px);border-radius:9px;cursor:pointer}
.auth-tabs button.on{background:#fff;color:#1B4BD8;box-shadow:0 8px 18px -12px rgba(24,54,110,.6)}
.auth-pane h3{margin:0 0 6px;font-size:clamp(18px,1.5vw,22px)}
.auth-sub{margin:0 0 clamp(14px,1.4vw,18px);font-size:clamp(12.5px,1vw,13.5px);color:#6D7792;line-height:1.7}
.auth-sub b{color:#1B4BD8}
.auth-f{display:block;margin-bottom:clamp(12px,1.2vw,16px)}
.auth-f>span{display:block;font-size:clamp(12.5px,1vw,13.5px);color:#5A6A88;margin-bottom:7px}
.auth-f input{width:100%;height:clamp(42px,3vw,50px);padding:0 clamp(12px,1.1vw,15px);border-radius:11px;
  border:1px solid rgba(46,124,246,.2);background:rgba(255,255,255,.82);
  font-size:clamp(13.5px,1.05vw,14.5px);color:#152036;outline:none;transition:border-color .18s,box-shadow .18s}
.auth-f input:focus{border-color:rgba(46,124,246,.55);box-shadow:0 0 0 3px rgba(46,124,246,.14)}
.auth-agree{display:flex;gap:9px;align-items:flex-start;font-size:clamp(11px,.9vw,12.5px);line-height:1.75;color:#6D7792;margin:4px 0 clamp(13px,1.3vw,17px)}
.auth-agree input{margin-top:3px}
.auth-agree a{color:#1B4BD8}
.auth-btn{width:100%;height:clamp(44px,3.2vw,52px);border:0;border-radius:12px;cursor:pointer;color:#fff;
  font-size:clamp(14px,1.1vw,15.5px);font-weight:600;
  background:linear-gradient(120deg,#2E7CF6,#1B4BD8);box-shadow:0 16px 30px -18px rgba(46,124,246,.95);text-decoration:none}
.auth-btn:disabled{opacity:.62;cursor:not-allowed}
.auth-msg{min-height:18px;margin-top:10px;font-size:clamp(12px,1vw,13px);color:#6D7792;text-align:center}
.auth-msg.bad{color:#D0483F}.auth-msg.ok{color:#12A594}
.auth-foot{margin-top:clamp(10px,1vw,14px);font-size:clamp(12px,1vw,13px);color:#8A96AE;text-align:center;line-height:1.7}
.auth-foot a{color:#1B4BD8}
.auth-done{text-align:center;padding:6px 4px 2px}
.auth-done .ad-ico{width:clamp(50px,4vw,64px);height:clamp(50px,4vw,64px);margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:24px;background:linear-gradient(145deg,#22C55E,#12A594);box-shadow:0 18px 34px -18px rgba(18,165,148,.95)}
.auth-done h3{margin:0 0 8px}
.auth-done p{font-size:12.5px;color:#5E6B85;line-height:1.85;margin:0 0 18px}
/* 注册成功里那个按钮：不再通栏拉满（老板 2026-10-12：太长太大、字不居中） */
.auth-btn-mid{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  width:auto;min-width:200px;max-width:100%;margin:0 auto;
  height:clamp(42px,3vw,48px);padding:0 clamp(22px,2vw,32px);line-height:1;border-radius:12px;
  font-size:clamp(13.5px,1.05vw,15px)}
@media(max-width:820px){.auth-card{padding:22px 18px 18px}}

.stage{position:relative;min-height:318px;display:grid;place-items:center;overflow:visible}
.hero-discs{position:relative;width:540px;height:436px;transform:scale(.78);transform-origin:center center}
.hero-cover{position:absolute;border-radius:16px;background-size:cover;background-position:center;
  background-color:rgba(46,124,246,.08);border:4px solid #fff;
  box-shadow:0 22px 44px -26px rgba(24,54,110,.68),0 0 0 1px rgba(46,124,246,.08);
  transition:transform .38s cubic-bezier(.22,.72,.24,1),box-shadow .38s;
  animation:heroDrift 9s ease-in-out infinite}
/* 手工摆位：大小不一、略有重叠，像随手贴上的一面封面墙 */
.hero-cover:nth-child(1){left:6px;top:14px;width:138px;height:138px;--rot:-6deg;animation-delay:-1s}
.hero-cover:nth-child(2){left:148px;top:0;width:116px;height:116px;--rot:4deg;animation-delay:-4s}
.hero-cover:nth-child(3){left:268px;top:24px;width:148px;height:148px;--rot:-2deg;animation-delay:-7s}
.hero-cover:nth-child(4){left:414px;top:6px;width:116px;height:116px;--rot:7deg;animation-delay:-2.5s}
.hero-cover:nth-child(5){left:0;top:166px;width:122px;height:122px;--rot:3deg;animation-delay:-5.5s}
.hero-cover:nth-child(6){left:116px;top:138px;width:150px;height:150px;--rot:-3deg;animation-delay:0s;z-index:2}
.hero-cover:nth-child(7){left:282px;top:184px;width:128px;height:128px;--rot:5deg;animation-delay:-3s}
.hero-cover:nth-child(8){left:408px;top:148px;width:124px;height:124px;--rot:-5deg;animation-delay:-6s}
.hero-cover:nth-child(9){left:22px;top:304px;width:116px;height:116px;--rot:-6deg;animation-delay:-8s}
.hero-cover:nth-child(10){left:146px;top:298px;width:138px;height:138px;--rot:2deg;animation-delay:-1.8s;z-index:2}
.hero-cover:nth-child(11){left:296px;top:318px;width:112px;height:112px;--rot:-4deg;animation-delay:-4.6s}
.hero-cover:nth-child(12){left:390px;top:286px;width:146px;height:146px;--rot:3deg;animation-delay:-7.4s;z-index:2}
.hero-cover:nth-child(13){left:52px;top:66px;width:96px;height:96px;--rot:9deg;animation-delay:-2.2s;z-index:3}
.hero-cover:nth-child(14){left:352px;top:80px;width:92px;height:92px;--rot:-8deg;animation-delay:-5.8s;z-index:3}
@keyframes heroDrift{
  0%,100%{transform:rotate(var(--rot,0deg)) translateY(0)}
  50%{transform:rotate(calc(var(--rot,0deg) + .6deg)) translateY(-6px)}
}
.hero-cover:hover{animation:none;transform:rotate(0deg) translateY(-10px) scale(1.08);z-index:9;
  box-shadow:0 34px 64px -28px rgba(46,124,246,.72),0 0 0 2px rgba(46,124,246,.2)}
@media(max-width:1200px){
  .stage{min-height:360px}
  .hero-discs{transform:scale(.66)}
}
/* 中等窗口（笔记本常见 1280/1152/1024）：导航再收一点，避免菜单被挤成两行（老板 2026-10-10） */
@media(max-width:1280px){
  .menu{gap:clamp(10px,1.2vw,16px)}
  .nav{padding:9px 10px 9px 16px}
  .brand i{width:34px;height:34px;font-size:15px}
  .why{gap:14px}
  .page,.artists{gap:12px}
}
@media(max-width:1120px){
  .hero-grid{gap:18px}
  .hero h1{letter-spacing:0}
  .hero .lead{font-size:14.5px}
  .menu{gap:9px}
  .cta{padding:7px 13px}
}
@media(max-width:1000px){
  .stage{height:auto;order:-1;padding:8px 0 4px}
  .hero-discs{width:100%;height:auto;transform:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;position:static}
  .hero-cover{position:static;width:100%!important;height:auto!important;aspect-ratio:1/1;border-width:3px;border-radius:14px;animation:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-cover{animation:none;transition:none}
}