/* =========================================================================
   SLai · Visual Impact Layer v4
   -------------------------------------------------------------------------
   目标：把"深色技术站"做成"有质感的发布会首页"。
   手段（都是加法，不改结构）：
     1) 极光背景：三层大面积色团缓慢漂移，取代单一 radial
     2) 渐变文字：主标题按 紫→青→紫 流动，视觉焦点
     3) 玻璃面板：卡片半透明 + 内描边 + 顶部高光，深底上"浮起来"
     4) 霓虹分割：章节之间用发光细线，而不是灰线
     5) 数字放大：KPI 变成巨号字体 + 渐变
     6) 微噪点 + 暗角：消掉纯色块的塑料感
   ========================================================================= */

/* ---------- 1. 极光背景 ---------- */
body::before{
  content:"";
  position:fixed;
  inset:-20vmax;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(38% 32% at 22% 18%, rgba(124,58,237,.38), transparent 62%),
    radial-gradient(34% 30% at 82% 8%,  rgba(34,211,238,.20), transparent 64%),
    radial-gradient(44% 36% at 68% 78%, rgba(168,85,247,.26), transparent 66%),
    radial-gradient(30% 26% at 10% 86%, rgba(59,130,246,.16), transparent 68%);
  filter:blur(28px) saturate(130%);
  animation:auroraShift 26s ease-in-out infinite alternate;
}
@keyframes auroraShift{
  0%   {transform:translate3d(0,0,0) scale(1)}
  50%  {transform:translate3d(-2.5%,1.8%,0) scale(1.06)}
  100% {transform:translate3d(2.2%,-1.4%,0) scale(1.02)}
}

/* 细噪点：给深色渐变降噪，避免"一块糊" */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 网格更淡、更靠上，只做"技术感"底纹 */
.bg-grid{opacity:.22}

main,header,footer{position:relative;z-index:2}

/* ---------- 2. 主标题：渐变流动 ---------- */
.hero h1{
  font-size:clamp(44px,6.6vw,92px);
  line-height:.98;
  font-weight:700;
  letter-spacing:-.045em;
  margin-top:6px;
}
.hero h1 .l2,
.hero h1 > span:first-child{
  display:block;
}
.hero h1{
  background:linear-gradient(104deg,#FFFFFF 0%,#E9D5FF 26%,#C084FC 48%,#67E8F9 70%,#FFFFFF 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:textFlow 12s linear infinite;
  filter:drop-shadow(0 0 42px rgba(168,85,247,.28));
}
@keyframes textFlow{
  0%   {background-position:0% 50%}
  100% {background-position:260% 50%}
}

.hero h1 .h-sub{
  background:none;
  -webkit-text-fill-color:initial;
  color:var(--muted);
  font-size:clamp(13px,1.35vw,16px);
  font-weight:400;
  letter-spacing:.04em;
  margin-top:18px;
  filter:none;
}

/* ---------- 3. 玻璃面板 ---------- */
.mrow,.doc,.prow,.dl-card,.viewer,.step{
  background:linear-gradient(180deg, rgba(30,22,52,.72), rgba(14,9,25,.62));
  border:1px solid rgba(168,85,247,.16);
  border-radius:12px;
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 24px 60px -34px rgba(0,0,0,.9);
}

.viewer{
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(168,85,247,.22),
    0 40px 90px -40px rgba(124,58,237,.55);
}

/* 卡片悬停：描边发亮 + 轻微上浮 + 外发光 */
.mrow:hover,.doc:hover,.prow:hover{
  border-color:rgba(192,132,252,.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 0 0 1px rgba(192,132,252,.35),
    0 30px 70px -30px rgba(124,58,237,.6);
  transform:translateY(-3px);
}

/* ---------- 4. 霓虹分割线 ---------- */
.sec-head{
  border-top:0;
  position:relative;
  padding-top:26px;
}
.sec-head::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(168,85,247,.55) 18%,
    rgba(103,232,249,.42) 50%,
    rgba(168,85,247,.55) 82%,
    transparent 100%);
  box-shadow:0 0 22px rgba(168,85,247,.45);
}

.kpi-strip{
  border-top:1px solid rgba(168,85,247,.28);
  border-bottom:1px solid rgba(168,85,247,.18);
  background:linear-gradient(180deg, rgba(124,58,237,.09), transparent 70%);
  border-radius:14px;
  overflow:hidden;
}
.kpi{border-right:1px solid rgba(168,85,247,.14)}
.kpi b{
  font-size:clamp(34px,3.8vw,52px);
  font-weight:700;
  letter-spacing:-.03em;
  background:linear-gradient(180deg,#FFFFFF,#C084FC 78%,#8B5CF6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  line-height:1;
}
.kpi b em{
  -webkit-text-fill-color:rgba(167,159,190,.75);
  font-size:.32em;
  letter-spacing:.16em;
  margin-left:8px;
}

/* ---------- 5. 主按钮：强发光 ---------- */
.btn-primary{
  background:linear-gradient(135deg,#A855F7,#7C3AED 55%,#4F46E5);
  border:1px solid rgba(216,180,254,.42);
  box-shadow:
    0 0 0 1px rgba(216,180,254,.14) inset,
    0 12px 34px -12px rgba(168,85,247,.95),
    0 0 60px -18px rgba(168,85,247,.85);
  font-weight:600;
  letter-spacing:.01em;
  color:#fff;
}
.btn-primary:hover{
  background:linear-gradient(135deg,#C084FC,#8B5CF6 55%,#6366F1);
  box-shadow:
    0 0 0 1px rgba(233,213,255,.34) inset,
    0 18px 46px -14px rgba(168,85,247,1),
    0 0 90px -20px rgba(168,85,247,1);
  transform:translateY(-2px);
}

/* ---------- 6. 信任徽标：发光胶囊 ---------- */
.trust-chip{
  background:linear-gradient(180deg, rgba(124,58,237,.16), rgba(124,58,237,.05));
  border-color:rgba(168,85,247,.34);
  box-shadow:0 0 24px -10px rgba(168,85,247,.7);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.trust-chip:hover{
  border-color:rgba(216,180,254,.6);
  box-shadow:0 0 34px -8px rgba(168,85,247,.9);
  transform:translateY(-1px);
}

/* ---------- 7. 顶部品牌线：整条发光 ---------- */
.nav.is-stuck{
  box-shadow:0 1px 0 rgba(168,85,247,.25), 0 14px 40px -24px rgba(124,58,237,.8);
}

/* ---------- 8. 滚动进度条 ---------- */
.scroll-progress{
  position:fixed;
  top:0;left:0;
  height:2px;
  width:0%;
  z-index:99;
  background:linear-gradient(90deg,#7C3AED,#C084FC,#67E8F9);
  box-shadow:0 0 18px rgba(192,132,252,.9);
  transition:width .08s linear;
}

/* ---------- 9. 章节编号发光 ---------- */
.sec-no{
  color:#C084FC;
  text-shadow:0 0 18px rgba(192,132,252,.8);
}

/* ---------- 10. 页脚：顶部霓虹 ---------- */
footer{
  position:relative;
  background:linear-gradient(180deg, transparent, rgba(124,58,237,.06));
}
footer::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,.6),rgba(103,232,249,.4),rgba(168,85,247,.6),transparent);
  box-shadow:0 0 24px rgba(168,85,247,.5);
}

/* ---------- 11. 客服 dock：更强存在感 ---------- */
.support-dock .dock-toggle{
  background:linear-gradient(135deg, rgba(168,85,247,.28), rgba(79,70,229,.22));
  border-color:rgba(216,180,254,.45);
  box-shadow:
    0 0 0 1px rgba(216,180,254,.16) inset,
    0 16px 44px -16px rgba(124,58,237,.95);
  font-weight:600;
}
.support-dock .dock-toggle:hover{
  background:linear-gradient(135deg, rgba(192,132,252,.42), rgba(99,102,241,.32));
  box-shadow:
    0 0 0 1px rgba(233,213,255,.3) inset,
    0 20px 56px -16px rgba(168,85,247,1);
}

/* ---------- 12. 降级 ---------- */
@media(prefers-reduced-motion:reduce){
  body::before{animation:none}
  .hero h1{animation:none}
}
@media(max-width:820px){
  .kpi-strip{border-radius:12px}
  .hero h1{font-size:clamp(38px,9vw,58px)}
}