/* ===================================================================
   毛玻璃视觉层 · 取色自 logo（深蓝 #0040a0 / 亮蓝 #0070d0 / 冰青 #e0f0f0）
   叠加在原主题之上，只改视觉，不动布局
   =================================================================== */
:root{
  --blue:#1f7ed4;
  --blue-d:#1470c4;
  --blue-l:#57a9ee;
  --cyan:#6fd8ea;
  --ink:#0a1d38;
  --ink-2:#2c4767;
  --muted:#617c99;
  --line:rgba(12,89,178,.14);
  --bg:#eaf2fe;
  --card:rgba(255,255,255,.66);
  --ring:0 26px 60px -32px rgba(4,40,104,.42), 0 2px 8px -4px rgba(4,40,104,.1), inset 0 1px 0 rgba(255,255,255,.92);
}

/* ---------- 背景：以 logo 图片铺底（固定层） + 白纱保证可读 ---------- */
html,body{background-color:#e9f1fd}
body{background:none!important}
.mesh{display:none!important}

/* 视口铺满 logo（预模糊底图，只留品牌色晕；不用 CSS blur 省性能） */
.brandBg{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:url("assets/logo-bg.jpg") center center / cover no-repeat;
  background-color:#e9f1fd;
}
.brandBg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(100% 62% at 50% 8%, rgba(255,255,255,.66) 0%, rgba(248,252,255,.44) 52%, rgba(236,245,255,.28) 100%),
    linear-gradient(180deg, rgba(246,251,255,.54) 0%, rgba(224,238,255,.4) 46%, rgba(236,245,255,.52) 100%);
}

/* ---------- 毛玻璃基础材质 ---------- */
.glass,.card.glass,.rule.glass{
  background:linear-gradient(163deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.46) 54%, rgba(236,245,255,.56) 100%);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:var(--ring);
  -webkit-backdrop-filter:blur(26px) saturate(185%);
  backdrop-filter:blur(26px) saturate(185%);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
}
/* 卡片顶部再压一条 1px 高光，模拟玻璃边缘 */
.glass::before,.rule::before{pointer-events:none}
.card.glass:hover{
  background:linear-gradient(163deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.54) 54%, rgba(233,243,255,.62) 100%);
  box-shadow:0 34px 74px -36px rgba(4,40,104,.5), 0 2px 10px -4px rgba(4,40,104,.12), inset 0 1px 0 #fff;
}

/* ---------- 导航：悬浮玻璃胶囊 ---------- */
.nav{padding-top:10px;background:none!important}
.nav::after{display:none!important}
.nav .navIn,.nav.scrolled .navIn{
  height:64px;border-radius:18px;padding:0 16px;
  background:linear-gradient(160deg, rgba(255,255,255,.74), rgba(255,255,255,.44));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 20px 46px -34px rgba(4,40,104,.62), inset 0 1px 0 rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.scrolled .navIn{
  background:linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.62));
  box-shadow:0 26px 56px -34px rgba(4,40,104,.66), inset 0 1px 0 #fff;
}
.nav a:not(.btn){border-radius:10px}
.nav a:not(.btn):hover{background:rgba(12,89,178,.08)}

/* ---------- 数据区：四块玻璃卡 ---------- */
.stats li{
  background:linear-gradient(163deg, rgba(255,255,255,.82), rgba(238,246,255,.5));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 20px 46px -34px rgba(4,40,104,.55), inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
}
.stats b{color:var(--blue-d)}
.stats em{color:var(--ink)}
.stats span{color:var(--muted)}

/* ---------- 套餐卡 ---------- */
.plan{
  background:linear-gradient(163deg, rgba(255,255,255,.8), rgba(240,247,255,.5));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--ring);
  -webkit-backdrop-filter:blur(26px) saturate(185%);
  backdrop-filter:blur(26px) saturate(185%);
}
.plan.hot{
  background:linear-gradient(163deg, rgba(255,255,255,.84), rgba(234,246,255,.56));
  border:1px solid rgba(12,127,208,.32);
  box-shadow:0 30px 64px -34px rgba(4,58,130,.5), inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(26px) saturate(185%);
  backdrop-filter:blur(26px) saturate(185%);
}
.plan.hot::after{display:none}

/* ---------- 按钮：玻璃 + 品牌蓝渐变 ---------- */
.btn{
  background:linear-gradient(160deg,#0b65c3 0%, #0a55a6 55%, #07407e 100%);
  box-shadow:0 18px 34px -16px rgba(7,53,110,.7), inset 0 1px 0 rgba(255,255,255,.38);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.btn:hover{filter:brightness(1.06);box-shadow:0 24px 44px -18px rgba(9,72,150,.8), inset 0 1px 0 rgba(255,255,255,.5)}
.btn.ghost{
  background:linear-gradient(163deg, rgba(255,255,255,.76), rgba(240,247,255,.5));
  color:var(--blue-d);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 16px 34px -26px rgba(4,40,104,.6), inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(18px) saturate(175%);
  backdrop-filter:blur(18px) saturate(175%);
}
.btn.ghost:hover{background:linear-gradient(163deg, rgba(255,255,255,.9), rgba(233,243,255,.62))}

/* ---------- 悬浮小卡 / 胶囊 / FAQ ---------- */
.floatCard{
  background:linear-gradient(160deg, rgba(255,255,255,.86), rgba(244,250,255,.6))!important;
  border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:0 20px 44px -30px rgba(4,40,104,.6), inset 0 1px 0 #fff!important;
  -webkit-backdrop-filter:blur(24px) saturate(185%);
  backdrop-filter:blur(24px) saturate(185%);
}
.chip{background:rgba(12,89,178,.09);border:1px solid rgba(255,255,255,.6);color:var(--blue-d)}
.chip.big{
  background:linear-gradient(160deg, rgba(255,255,255,.8), rgba(238,246,255,.52));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 12px 26px -22px rgba(4,40,104,.6), inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(16px) saturate(175%);
  backdrop-filter:blur(16px) saturate(175%);
}
.pill,.kicker{
  background:linear-gradient(160deg, rgba(255,255,255,.8), rgba(232,243,255,.55));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 12px 28px -24px rgba(4,40,104,.6), inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(16px) saturate(175%);
  backdrop-filter:blur(16px) saturate(175%);
  color:var(--blue-d);
}
.faq details{
  background:linear-gradient(163deg, rgba(255,255,255,.76), rgba(240,247,255,.46));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 18px 40px -32px rgba(4,40,104,.55), inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
}
.faq details[open]{background:linear-gradient(163deg, rgba(255,255,255,.88), rgba(236,246,255,.56))}
/* 首屏玻璃播放器跟随新配色 */
.hpl{
  background:linear-gradient(163deg, rgba(255,255,255,.82), rgba(238,246,255,.52))!important;
  border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:0 34px 74px -34px rgba(4,40,104,.55), inset 0 1px 0 #fff!important;
  -webkit-backdrop-filter:blur(26px) saturate(185%);
  backdrop-filter:blur(26px) saturate(185%);
}
.ctaBox{
  background:
    radial-gradient(120% 100% at 8% 0%, rgba(126,196,255,.42), transparent 60%),
    linear-gradient(160deg, rgba(16,98,190,.94), rgba(6,54,118,.97));
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 40px 84px -40px rgba(6,48,116,.8), inset 0 1px 0 rgba(255,255,255,.32);
  -webkit-backdrop-filter:blur(26px) saturate(190%);
  backdrop-filter:blur(26px) saturate(190%);
}

/* ---------- 步骤卡：玻璃 ---------- */
.step{
  background:linear-gradient(163deg, rgba(255,255,255,.8), rgba(238,246,255,.5));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 22px 50px -34px rgba(4,40,104,.55), inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
}
.step:hover{background:linear-gradient(163deg, rgba(255,255,255,.88), rgba(233,243,255,.6))}

/* ---------- 细节统一 ---------- */
.sec h2,.hero h1{letter-spacing:-.4px}
.rules .rule:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){
  .glass,.card.glass,.plan,.stats li{transition:none}
}

/* ---------- 白名单卡：与普通卡同一套玻璃，只靠蓝色描边区分 ---------- */
.plan .tag{color:#1470c4;background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.9)}

/* 设备支持：7 个随机错位的小方块（居中成团） */
.devCloud{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:11px 10px;margin:30px auto 4px;max-width:352px;padding:0 2px;
}
.devCloud .dc{
  flex:0 0 104px;height:76px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 8px;border-radius:19px;
  font-size:12.5px;font-weight:700;line-height:1.25;letter-spacing:.1px;color:var(--blue-d);
  background:linear-gradient(158deg,rgba(255,255,255,.92),rgba(232,244,255,.66));
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 10px 24px -18px rgba(11,58,110,.5),inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  backdrop-filter:blur(16px) saturate(170%);
  transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--dr,0deg));
  transition:transform .45s cubic-bezier(.2,.8,.25,1),box-shadow .45s;
}
.devCloud .dc:hover{transform:translate(var(--dx,0),calc(var(--dy,0px) - 3px)) rotate(0deg);box-shadow:0 16px 30px -18px rgba(11,58,110,.55),inset 0 1px 0 rgba(255,255,255,.95)}
@media(max-width:379px){
  .devCloud{gap:9px 8px;max-width:100%}
  .devCloud .dc{flex:0 0 96px;height:72px;font-size:12px}
}

/* 客户端：App 图标随机散落 */
.appLabel{
  margin:24px 0 4px;font-size:12.5px;font-weight:800;letter-spacing:1.6px;
  color:rgba(20,112,196,.78);text-transform:uppercase;
}
.appScatter{
  position:relative;width:100%;max-width:336px;height:312px;
  margin:6px auto 0;
}
.appScatter .apic{
  position:absolute;margin:0;width:24%;aspect-ratio:1;border-radius:25%;overflow:hidden;
  background:rgba(255,255,255,.5);
  box-shadow:0 14px 26px -16px rgba(11,58,110,.55), 0 1px 0 rgba(255,255,255,.9) inset;
  transition:transform .45s cubic-bezier(.2,.8,.25,1),box-shadow .45s;
}
.appScatter .apic img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.appScatter .apic:hover{transform:rotate(0deg) scale(1.06);box-shadow:0 20px 32px -18px rgba(11,58,110,.62)}
.appScatter .s1{left:3%;top:4%;transform:rotate(-7deg)}
.appScatter .s2{left:38%;top:0;transform:rotate(5deg)}
.appScatter .s3{left:73%;top:8%;transform:rotate(-3deg)}
.appScatter .s4{left:14%;top:36%;transform:rotate(180deg)}
.appScatter .s5{left:50%;top:33%;transform:rotate(4deg)}
.appScatter .s6{left:72%;top:44%;transform:rotate(180deg)}
.appScatter .s7{left:34%;top:70%;transform:rotate(-6deg)}
.appMore{margin:10px 0 0;font-size:13px;color:#6b7c92;letter-spacing:.2px}
@media(min-width:820px){
  .appScatter{max-width:420px;height:364px}
  .appMore{font-size:13.5px}
}