/* ===== 星曜AI智播 · 动效与细节增强 ===== */

/* ---------- 滚动进度条 ---------- */
.progress-bar{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:var(--grad);box-shadow:0 0 14px rgba(var(--brand-rgb),.85);
  transition:width .08s linear;
}

/* ---------- Header 滚动态 ---------- */
.header{transition:background .3s,box-shadow .3s;}
.header.scrolled{background:rgba(var(--bg-rgb),.92);box-shadow:0 8px 32px var(--sh-float);}

/* ---------- 移动端菜单 ---------- */
.menu-toggle{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:8px;
}
.menu-toggle span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:.3s;}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:99;
  background:rgba(var(--bg-rgb),.97);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  padding:16px 24px 24px;
  /* 必须常驻 flex：此前只在 .open 里改 transform/opacity，
     但基样式是 display:none，导致点开汉堡菜单后抽屉依然是 none，
     手机上根本打不开导航。改为用 visibility 控制显隐，动画保持不变。 */
  display:flex;flex-direction:column;gap:4px;
  visibility:hidden;pointer-events:none;
  transform:translateY(-12px);opacity:0;transition:.28s;
}
.mobile-nav.open{visibility:visible;pointer-events:auto;transform:translateY(0);opacity:1;}
.mobile-nav a{padding:13px 14px;border-radius:var(--r-sm);font-size:16px;color:var(--muted);transition:.2s;}
.mobile-nav a:active,.mobile-nav a.active{color:var(--text);background:var(--brand-soft);}
.mobile-nav .btn{margin-top:12px;}

/* ---------- 滚动揭示 ---------- */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none;}

/* ---------- 背景光球 ---------- */
.orb{position:fixed;border-radius:50%;filter:blur(80px);z-index:-1;pointer-events:none;}
.orb-1{
  width:430px;height:430px;top:10%;left:-140px;
  background:radial-gradient(circle,rgba(var(--brand-rgb),.30),transparent 70%);
  animation:orbFloat 17s ease-in-out infinite;
}
.orb-2{
  width:380px;height:380px;top:52%;right:-130px;
  background:radial-gradient(circle,rgba(var(--brand2-rgb),.22),transparent 70%);
  animation:orbFloat 22s ease-in-out infinite reverse;
}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(42px,-56px) scale(1.14);}
  66%{transform:translate(-32px,38px) scale(.9);}
}

/* ---------- 渐变文字流光 ---------- */
.shimmer{
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--accent-sky),var(--brand));
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 7s linear infinite;
}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* ---------- 按钮流光扫过 ---------- */
.btn-primary{position:relative;overflow:hidden;}
.btn-primary::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,var(--sheen),transparent);
  transform:skewX(-20deg);
}
.btn-primary:hover::after{animation:sweep .85s ease-out;}
@keyframes sweep{0%{left:-130%}100%{left:170%}}

/* ---------- 卡片光泽扫过 ---------- */
.card,.case-card,.price-card,.feat-group,.video-card{overflow:hidden;}
.card::after,.case-card::after,.price-card::after,.feat-group::after,.video-card::after{
  content:"";position:absolute;top:0;left:-110%;width:48%;height:100%;
  background:linear-gradient(90deg,transparent,var(--sheen-soft),transparent);
  transform:skewX(-20deg);transition:left .65s ease;pointer-events:none;
}
.card:hover::after,.case-card:hover::after,.price-card:hover::after,
.feat-group:hover::after,.video-card:hover::after{left:150%;}

/* 修复：价格标签原本跨出卡片上沿（top:-13px），会被 overflow:hidden 裁成"半截乱码"。
   改为卡片内右上角胶囊，不越界。 */
.price-tag{top:20px;right:24px;left:auto;padding:6px 16px;}

/* ---------- 手机 mockup 浮动 ---------- */
.mockup{animation:floatY 6.5s ease-in-out infinite;}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---------- 台词逐条浮现 ---------- */
.m-line{opacity:0;transform:translateY(12px);animation:lineIn .55s cubic-bezier(.22,.61,.36,1) forwards;}
.m-line:nth-child(1){animation-delay:.35s;}
.m-line:nth-child(2){animation-delay:.85s;}
.m-line:nth-child(3){animation-delay:1.5s;}
.m-line:nth-child(4){animation-delay:2.1s;}
.m-line:nth-child(5){animation-delay:2.75s;}
@keyframes lineIn{to{opacity:1;transform:none;}}

/* ---------- 时间线绘制 ---------- */
.timeline::before{transform:scaleY(0);transform-origin:top;transition:transform 1.3s ease;}
.timeline.in::before{transform:scaleY(1);}

/* ---------- FAQ 手风琴 ---------- */
.faq-item{cursor:pointer;}
.faq-item h4{display:flex;align-items:center;gap:12px;user-select:none;}
.faq-item .toggle{
  margin-left:auto;color:var(--brand-2);font-size:22px;font-weight:400;
  line-height:1;transition:transform .32s ease;
}
.faq-item.open .toggle{transform:rotate(45deg);}
.faq-item .faq-answer{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .42s ease,opacity .3s ease,margin .3s ease;
}
.faq-item.open .faq-answer{max-height:720px;opacity:1;}
.faq-item:hover{border-color:rgba(var(--brand-rgb),.45);}

/* ---------- 返回顶部 ---------- */
.back-top{
  position:fixed;right:26px;bottom:26px;width:50px;height:50px;
  border-radius:50%;background:var(--grad);color:var(--on-brand);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;line-height:1;
  box-shadow:0 12px 32px rgba(var(--brand-rgb),.45);
  opacity:0;pointer-events:none;transform:translateY(16px) scale(.9);
  transition:.32s cubic-bezier(.22,.61,.36,1);z-index:120;
}
.back-top.show{opacity:1;pointer-events:auto;transform:none;}
.back-top:hover{transform:translateY(-4px) scale(1.07);box-shadow:0 16px 40px rgba(var(--brand-rgb),.6);}

/* ---------- 图片灯箱 ---------- */
.lightbox{
  position:fixed;inset:0;z-index:300;
  background:rgba(3,6,14,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;padding:40px;cursor:zoom-out;
}
.lightbox.show{display:flex;animation:fadeIn .28s ease;}
.lightbox img{
  max-width:92vw;max-height:88vh;border-radius:0;
  /* 反馈图是透明底手机模型：用 drop-shadow 跟轮廓走，不能用 box-shadow（会画出一个矩形黑影） */
  filter:drop-shadow(0 30px 80px var(--sh-modal));
  animation:zoomIn .3s cubic-bezier(.22,.61,.36,1);
}
.lightbox-close{
  position:absolute;top:26px;right:32px;font-size:34px;color:var(--muted);
  background:none;border:none;cursor:pointer;line-height:1;transition:.2s;
}
.lightbox-close:hover{color:var(--text);}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes zoomIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}

/* ---------- 行业跑马灯 ---------- */
.marquee{
  overflow:hidden;position:relative;padding:22px 0;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--overlay-0);
}
.marquee-track{display:flex;gap:46px;width:max-content;animation:scrollX 30s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{
  display:flex;align-items:center;gap:10px;
  font-size:15px;color:var(--muted);white-space:nowrap;transition:.2s;
}
.marquee-item:hover{color:var(--text);}
.marquee-item b{color:var(--brand-2);font-size:11px;}

/* ---------- 数字滚动 ---------- */
.count-up{font-variant-numeric:tabular-nums;}

/* ---------- 图片 hover 微放大 ---------- */
.shot img{transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.shot:hover img{transform:scale(1.025);}

/* ---------- 导航下划线 ---------- */
.nav a{position:relative;}
.nav a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--grad);border-radius:2px;
  transform:scaleX(0);transform-origin:center;transition:transform .28s ease;
}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1);}

/* ---------- 响应式 ---------- */
@media (max-width:720px){
  .menu-toggle{display:flex;}
  .header-cta{display:none;}
  .orb{display:none;}
  .back-top{right:16px;bottom:16px;width:44px;height:44px;}
}

/* ---------- 降低动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .reveal{opacity:1;transform:none;}
  .m-line{opacity:1;transform:none;}
}

/* ---------- Hero 标题防孤字换行 ---------- */
.nw{white-space:nowrap;}

/* 双栏布局区（>1024px）：字号随视口收缩，保证“的 AI 直播间”一行放下 */
.hero h1{font-size:clamp(40px,3.85vw,48px);}

/* 单栏布局区（≤1024px）：整行宽度可用，字号放宽 */
@media (max-width:1024px){
  .hero h1{font-size:clamp(30px,4.6vw,44px);}
}

/* 手机（≤720px）：缩到不溢出，配合 .nw 保证不出现孤字 */
@media (max-width:720px){
  .hero h1{font-size:clamp(26px,7vw,34px);line-height:1.28;}
}

/* ---------- Hero 真机实拍图（透明底） ---------- */
/* 裁前主体宽 489×59.5%≈291px；350px ≈ 放大 20%。
   2026-09-15：整体缩小 15%（350→297.5），三档断点同比缩放，
   保持图片占右列的比例不变；改大改小只需同时缩放下面这组数值。 */
.hero-visual{position:relative;max-width:297.5px;margin:0 auto;padding:10px 0;}
.hero-visual .mockup-glow{inset:-24px;}
.hero-img{
  position:relative;z-index:1;width:100%;display:block;
  animation:floatY 6.5s ease-in-out infinite;
  filter:drop-shadow(0 24px 60px var(--sh-el)) drop-shadow(0 0 70px rgba(var(--brand-rgb),.30));
}
@media (max-width:1024px){
  .hero-visual{max-width:276.25px;}
}
@media (max-width:720px){
  .hero-visual{max-width:238px;}
}


/* ======================================================================
   右侧客服挂件（悬浮留资入口）
   桌面：右下角竖向 dock + 向左弹出面板
   移动：单按钮 + 底部升起面板（bottom sheet）
   ====================================================================== */
.cs-widget{
  position:fixed;right:24px;bottom:96px;z-index:140;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}
.cs-dock{display:flex;flex-direction:column;align-items:center;gap:10px;}

.cs-btn{
  position:relative;width:52px;height:52px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:rgba(var(--glass-rgb),.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text);font-family:inherit;
  box-shadow:0 10px 30px var(--sh-el-sm);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,border-color .22s;
}
.cs-btn svg{width:22px;height:22px;}

/* 企业微信标：透明底单色剪影 + currentColor，跟随按钮文字色。
   （原图是二维码中心的位图，直接当图标会带出底色方块，改成 mask 上色才干净） */
.cs-ico-wecom{
  display:block;width:24px;height:24px;flex:none;background:currentColor;
  -webkit-mask-image:url(img/qy-wechat-icon.png?v=e4ac735f);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-image:url(img/qy-wechat-icon.png?v=e4ac735f);
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
.cs-btn:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:0 14px 34px var(--sh-el-hover);}
.cs-btn:active{transform:scale(.95);}
.cs-btn:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;}

.cs-main{background:var(--grad);color:var(--on-brand-2);border-color:transparent;box-shadow:0 12px 32px rgba(var(--brand-rgb),.38);}
.cs-main:hover{box-shadow:0 16px 40px rgba(var(--brand-rgb),.5);}
.cs-main svg{width:24px;height:24px;}

/* 脉冲光环：暗示"可交互" */
.cs-main .cs-ring{
  position:absolute;inset:0;border-radius:var(--r-pill);
  border:1.5px solid rgba(var(--brand-rgb),.55);pointer-events:none;
  animation:cs-pulse 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes cs-pulse{
  0%{transform:scale(1);opacity:.75;}
  70%{transform:scale(1.55);opacity:0;}
  100%{transform:scale(1.55);opacity:0;}
}

/* hover 文字提示 */
.cs-tip{
  position:absolute;right:calc(100% + 10px);top:50%;
  transform:translateY(-50%) translateX(6px);
  white-space:nowrap;font-size:12.5px;color:var(--text);
  background:rgba(var(--glass-rgb),.94);border:1px solid var(--border);
  padding:6px 11px;border-radius:var(--r-xs);pointer-events:none;
  opacity:0;transition:.2s;
}
.cs-btn:hover .cs-tip{opacity:1;transform:translateY(-50%) translateX(0);}

/* 首次引导气泡 */
.cs-bubble{
  position:absolute;right:64px;bottom:6px;
  background:#fff;color:#0A1226;font-size:13px;font-weight:600;
  padding:9px 14px;border-radius:var(--r-sm);white-space:nowrap;
  box-shadow:0 10px 28px var(--sh-el-sm);
  opacity:0;transform:translateX(10px);pointer-events:none;
  transition:opacity .34s ease,transform .34s cubic-bezier(.34,1.56,.64,1);
}
.cs-bubble.show{opacity:1;transform:translateX(0);animation:cs-nudge 3s ease-in-out 1s infinite;}
.cs-bubble::after{
  content:"";position:absolute;right:-6px;top:50%;margin-top:-6px;
  border:6px solid transparent;border-left-color:#fff;border-right:0;
}
@keyframes cs-nudge{0%,100%{margin-right:0}50%{margin-right:6px}}

/* ---------- 面板 ---------- */
.cs-panel{
  position:absolute;right:calc(100% + 16px);bottom:0;width:344px;
  background:linear-gradient(165deg,var(--panel-1) 0%,var(--panel-2) 100%);
  border:1px solid var(--border-strong);border-radius:var(--r-lg);
  box-shadow:var(--shadow),0 0 50px rgba(var(--brand-rgb),.18);
  opacity:0;visibility:hidden;transform:translateX(14px) scale(.96);
  transform-origin:bottom right;pointer-events:none;
  transition:opacity .3s ease,transform .38s cubic-bezier(.34,1.56,.64,1),visibility .3s;
  overflow:hidden;
}
.cs-widget.open .cs-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto;}

.cs-head{display:flex;align-items:center;gap:11px;padding:18px 18px 14px;border-bottom:1px solid var(--border);}
.cs-avatar{
  width:38px;height:38px;border-radius:var(--r-sm);background:var(--grad);flex:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--on-brand-2);font-weight:800;font-size:13px;letter-spacing:.5px;
}
.cs-head-txt{flex:1;min-width:0;}
.cs-title{font-size:15px;font-weight:700;color:var(--text);line-height:1.3;}
.cs-sla{font-size:11.5px;color:var(--dim);}
.cs-close{
  width:30px;height:30px;border-radius:var(--r-xs);flex:none;
  background:var(--surface);border:1px solid var(--border);color:var(--muted);
  font-size:17px;line-height:1;cursor:pointer;transition:.2s;font-family:inherit;
}
.cs-close:hover{color:var(--text);background:var(--surface-2);}
.cs-close:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;}

.cs-body{padding:16px 18px 18px;}
.cs-form{display:flex;flex-direction:column;gap:13px;}
.cs-field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;}
.cs-field label i{color:var(--danger-a);font-style:normal;margin-left:2px;}
.cs-field input,.cs-field select,.cs-field textarea{
  width:100%;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-sm);
  padding:11px 13px;font-size:14px;color:var(--text);
  font-family:inherit;line-height:1.5;transition:.2s;
}
.cs-field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.5 L6 8.5 L10 4.5' stroke='%2394A3C4' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
}
.cs-field select option{background:var(--panel-1);color:var(--text);}
.cs-field textarea{resize:none;min-height:62px;}
.cs-field input::placeholder,.cs-field textarea::placeholder{color:var(--placeholder);}
.cs-field input:focus,.cs-field select:focus,.cs-field textarea:focus{
  outline:none;border-color:var(--brand);background:rgba(var(--brand-rgb),.06);
  box-shadow:0 0 0 3px var(--brand-soft);
}
.cs-err{display:none;font-size:11.5px;color:var(--danger-b);margin-top:5px;font-style:normal;}
.cs-field.err .cs-err{display:block;}
.cs-field.err input,.cs-field.err select,.cs-field.err textarea{border-color:rgba(var(--danger3-rgb),.6);}

.cs-submit{
  width:100%;height:46px;border:0;border-radius:var(--r-sm);cursor:pointer;
  background:var(--grad);color:var(--on-brand-2);font-size:15px;font-weight:700;
  font-family:inherit;letter-spacing:.2px;margin-top:2px;
  box-shadow:0 10px 26px rgba(var(--brand-rgb),.32);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
}
.cs-submit:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(var(--brand-rgb),.44);}
.cs-submit:active{transform:scale(.98);}
.cs-submit:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;}
.cs-privacy{font-size:11px;color:var(--dim);line-height:1.55;text-align:center;margin-top:2px;}

/* 成功态 */
.cs-success{display:none;text-align:center;padding:14px 6px 6px;}
.cs-widget.done .cs-form{display:none;}
.cs-widget.done .cs-success{display:block;}
.cs-check{width:60px;height:60px;margin:0 auto 14px;}
.cs-check-circle{stroke:var(--brand-2);stroke-width:2.5;stroke-dasharray:152;stroke-dashoffset:152;
  animation:cs-draw .6s cubic-bezier(.65,0,.45,1) forwards;}
.cs-check-mark{stroke:var(--brand-2);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:48;stroke-dashoffset:48;
  animation:cs-draw .4s cubic-bezier(.65,0,.45,1) .35s forwards;}
@keyframes cs-draw{to{stroke-dashoffset:0;}}
.cs-success h4{font-size:16px;font-weight:700;margin-bottom:6px;}
.cs-success p{font-size:13px;color:var(--muted);line-height:1.7;}
.cs-again{
  margin-top:16px;background:var(--surface);border:1px solid var(--border);
  color:var(--muted);border-radius:var(--r-xs);padding:9px 18px;font-size:13px;
  cursor:pointer;font-family:inherit;transition:.2s;
}
.cs-again:hover{color:var(--text);background:var(--surface-2);}

/* 留资成功后的第二通道：直接加企业微信（比等回电更即时，客户不流失） */
.cs-wecom-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:46px;margin-top:18px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid rgba(var(--brand-rgb),.34);background:var(--brand-soft);
  color:var(--brand-2);font-family:inherit;font-size:14px;font-weight:600;
  transition:background .2s,border-color .2s,transform .2s;
}
.cs-wecom-cta:hover{background:rgba(var(--brand-rgb),.14);border-color:rgba(var(--brand-rgb),.5);}
.cs-wecom-cta:active{transform:scale(.98);}
.cs-wecom-cta:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;}
.cs-wecom-cta .cs-ico-wecom{width:20px;height:20px;}

/* 遮罩（移动端） */
.cs-mask{
  position:fixed;inset:0;z-index:139;
  background:rgba(3,7,18,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.cs-mask.show{opacity:1;pointer-events:auto;}

/* Toast 提示 */
.cs-toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,14px);z-index:260;
  background:rgba(var(--glass-rgb),.96);border:1px solid var(--border-strong);
  color:var(--text);font-size:13.5px;padding:11px 20px;border-radius:var(--r-sm);
  box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transition:opacity .26s ease,transform .26s cubic-bezier(.34,1.56,.64,1);
}
.cs-toast.show{opacity:1;transform:translate(-50%,0);}

/* ---------- 移动端：底部升起面板 ---------- */
@media (max-width:720px){
  .cs-widget{right:14px;bottom:74px;gap:0;}
  .cs-btn{width:48px;height:48px;}
  .cs-dock .cs-sub{display:none;}
  /* 唯独保留企业微信入口：手机用户正是扫码加微信的主力
     （二维码可以在微信里长按识别，所以手机上一样走得通） */
  .cs-dock .cs-wechat{display:flex;}
  .cs-bubble{right:60px;bottom:2px;font-size:12.5px;padding:8px 12px;}
  .cs-panel{
    position:fixed;left:0;right:0;bottom:0;width:100%;
    border-radius:var(--r-lg) var(--r-lg) 0 0;border-left:0;border-right:0;border-bottom:0;
    max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateY(102%);transform-origin:bottom center;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .cs-widget.open .cs-panel{transform:translateY(0);}
  .cs-panel::before{
    content:"";display:block;width:40px;height:4px;border-radius:2px;
    background:var(--border-strong);margin:9px auto 0;
  }
}

/* ======================================================================
   手机端触控与输入优化（覆盖在最后，确保优先级最高）
   ====================================================================== */
@media (max-width:720px){
  /* ---------- 悬浮元素收敛 ----------
     手机上原本同时存在三个独立圆钮（客服 / 企业微信 / 返回顶部）+ 一个引导气泡：
     占掉一大块可视面积，滚动时还会互相叠着压住数据条、卡片和页脚。
     处理方式：把「返回顶部」由脚本搬进客服 dock（见 main.js），
     三个钮收敛成同一列的一组，位置固定、宽度可预期，不再各自为政。 */
  .cs-dock .back-top{
    position:static;width:48px;height:48px;font-size:19px;
    background:rgba(var(--glass-rgb),.86);color:var(--text);
    border:1px solid var(--border);
    box-shadow:0 10px 30px var(--sh-el-sm);
    transform:none;opacity:1;
  }
  /* 没有滚动过就不占位：不能让它撑出一个隐形空档 */
  .cs-dock .back-top:not(.show){display:none;}
  .cs-dock .back-top.show{
    display:flex;
    animation:backTopIn .32s cubic-bezier(.34,1.56,.64,1);
  }
  .cs-dock .back-top:hover{transform:scale(1.06);}
}
@keyframes backTopIn{from{opacity:0;transform:translateY(10px) scale(.85);}to{opacity:1;transform:none;}}

@media (max-width:720px){
  /* dock 悬在右下角，滚到页底时会压住版权行 → 给页脚留出安全底距 */
  .footer{padding-bottom:calc(30px + 84px + env(safe-area-inset-bottom));}

  /* 主导航入口必须 ≥44px */
  .menu-toggle{width:44px;height:44px;padding:0;}

  /* 关闭按钮：视觉保持 30px，用伪元素把点击热区扩到 46px */
  .cs-close{position:relative;}
  .cs-close::after{content:"";position:absolute;inset:-8px;border-radius:var(--r-sm);}

  /* 页脚 / 品牌链接：补足触控高度（视觉不变） */
  footer a{min-height:44px;display:inline-flex;align-items:center;}
  .brand{min-height:44px;display:flex;align-items:center;}

  /* 输入框 16px：低于此值 iOS 聚焦时会强制放大整页 */
  .cs-field input,.cs-field select,.cs-field textarea{font-size:16px;}
  .form-grid input,.form-grid select,.form-grid textarea{font-size:16px;}
  input,select,textarea{font-size:16px;}
}


/* ======================================================================
   FX LAYER · 科技感动效增强层
   ----------------------------------------------------------------------
   目标：把「云白 · 靛蓝」从「干净」推到「有仪器感」——
        缓慢运转的网格、极淡的扫描光、卡片边缘的环形流光、
        跟着指针走的高光，共同传达「系统一直在跑」的观感。

   纪律（改之前先读这三条）：
   1. 全部配色走主题变量，换配色时自动跟随，不留硬编码色值
   2. 只动 transform / opacity / filter，不碰 width/height/left/top 等布局属性，
      一律交给合成层，滚动时不掉帧
   3. 浅色底上光效宁淡勿浓，透明度普遍压在 .15 以下，
      否则会显脏 —— 这是这套浅色主题最容易翻车的地方
   4. 触屏设备 + 「减少动态效果」偏好 → 自动降级为静态
   ====================================================================== */

/* 让锥形渐变的角度可以参与过渡/动画（不支持时退化为静态渐变，不影响可读性） */
@property --fx-ang{syntax:"<angle>";inherits:false;initial-value:0deg;}

/* ---------- 1. 背景网格：缓慢平移，暗示"坐标在动" ---------- */
@keyframes fxGridDrift{from{transform:translate3d(0,0,0);}to{transform:translate3d(64px,64px,0);}}
.grid-lines{background:none;}
.grid-lines::before{
  content:"";position:absolute;inset:-128px;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  animation:fxGridDrift 24s linear infinite;
  will-change:transform;
}

/* ---------- 2. 扫描光带：一条很淡的横向光缓慢下移（脚本注入） ---------- */
.fx-scan{
  position:fixed;left:0;right:0;top:0;height:220px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(var(--brand-rgb),.045) 42%,
    rgba(var(--brand2-rgb),.070) 58%,
    transparent 100%);
  opacity:0;
  animation:fxScanDrop 14s cubic-bezier(.5,0,.5,1) 3s infinite;
  will-change:transform,opacity;
}
@keyframes fxScanDrop{
  0%{transform:translate3d(0,-32vh,0);opacity:0;}
  10%{opacity:1;}
  88%{opacity:1;}
  100%{transform:translate3d(0,118vh,0);opacity:0;}
}

/* ---------- 3. 指针光晕：跟着鼠标走的柔光（脚本注入，仅桌面） ---------- */
.fx-pointer{
  position:fixed;top:-440px;left:-440px;width:880px;height:880px;
  z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,
    rgba(var(--brand-rgb),.105) 0%,
    rgba(var(--brand2-rgb),.055) 40%,
    transparent 68%);
  opacity:0;transition:opacity .55s ease;
  will-change:transform;
}
.fx-pointer.on{opacity:1;}

/* ---------- 4. Hero 粒子星座（脚本注入 canvas，仅桌面） ---------- */
.fx-net{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity 1.6s ease .3s;
}
.fx-net.on{opacity:1;}

/* ---------- 5. 滚动进度条：流光 ----------
   ⚠️ 这里刻意不做"光点"：进度条只有 3px 高，在浅色底上
      一颗带模糊的亮蓝点会脱离条体、像页面上多了块污渍
      （实测在滚动到 40% 时最明显）。靠条体自身的流光就够。 */
.progress-bar{
  background:linear-gradient(90deg,var(--brand) 0%,var(--brand-2) 50%,var(--brand) 100%);
  background-size:200% 100%;
  animation:fxBarFlow 2.8s linear infinite;
}
@keyframes fxBarFlow{to{background-position:-200% 0;}}

/* ---------- 6. Header：滚动后底部亮起一道渐变光 ---------- */
.header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,
    rgba(var(--brand-rgb),.45) 22%,rgba(var(--brand2-rgb),.70) 50%,
    rgba(var(--brand-rgb),.45) 78%,transparent);
  opacity:0;transition:opacity .4s ease;
}
.header.scrolled::after{opacity:1;}
.nav a:hover::after,.nav a.active::after{box-shadow:0 0 10px rgba(var(--brand-rgb),.85);}

/* ---------- 7. Hero 主标题：渐变缓慢流动 ---------- */
@keyframes fxTextFlow{from{background-position:0% 50%;}to{background-position:-260% 50%;}}
h1 .hl{
  background-image:linear-gradient(100deg,
    var(--brand) 0%,var(--brand-2) 30%,var(--accent-sky) 50%,var(--brand-2) 70%,var(--brand) 100%);
  background-size:260% 100%;
  animation:fxTextFlow 7.5s linear infinite;
}

/* ---------- 8. Hero 徽章：一道白色高光定期掠过 ---------- */
.badge{position:relative;overflow:hidden;}
.badge::after{
  content:"";position:absolute;top:0;left:-130%;width:58%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  transform:skewX(-20deg);
  animation:fxBadgeSweep 4s ease-in-out infinite;
}
@keyframes fxBadgeSweep{0%{left:-130%;}42%{left:190%;}100%{left:190%;}}

/* ---------- 9. Hero 视觉：双环扫描（雷达感） ---------- */
@keyframes fxSpin{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes fxSpinRev{from{transform:translate(-50%,-50%) rotate(360deg);}to{transform:translate(-50%,-50%) rotate(0deg);}}
.hero-visual::before,
.hero-visual::after{
  content:"";position:absolute;left:50%;top:50%;border-radius:50%;
  pointer-events:none;z-index:0;
}
.hero-visual::before{
  width:114%;aspect-ratio:1/1;
  background:conic-gradient(from 0deg,
    transparent 0deg 210deg,
    rgba(var(--brand-rgb),.40) 246deg,
    rgba(var(--brand2-rgb),.75) 286deg,
    transparent 322deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  animation:fxSpin 12s linear infinite;
}
.hero-visual::after{
  width:88%;aspect-ratio:1/1;
  border:1px dashed rgba(var(--brand-rgb),.34);
  animation:fxSpinRev 46s linear infinite;
}

/* ---------- 10. 章节标题：脉冲点 + 渐变短线 ---------- */
.sec-tag::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:9px;vertical-align:middle;
  background:var(--brand-2);box-shadow:0 0 12px rgba(var(--brand2-rgb),.95);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes fxBarPulse{0%,100%{transform:scaleX(.62);opacity:.6;}50%{transform:scaleX(1.18);opacity:1;}}
.sec-head::after{
  content:"";display:block;width:56px;height:2px;border-radius:2px;margin:24px auto 0;
  background:var(--grad);
  box-shadow:0 0 16px rgba(var(--brand-rgb),.5);
  animation:fxBarPulse 3.6s ease-in-out infinite;
}

/* ---------- 11. 卡片：轻 3D 倾斜 + 指针高光 + 环形流光描边 ---------- */
.fx-tilt{
  isolation:isolate;
  /* ⚠️ transition 必须显式带上 opacity：
     它是简写，会整段覆盖 .reveal 的过渡，漏掉 opacity
     会把卡片的"滚动淡入"变成瞬现。 */
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),
             transform .42s cubic-bezier(.22,.61,.36,1),
             border-color .25s ease,background .25s ease,box-shadow .3s ease;
  will-change:transform;
}
/* 倾斜的"零位"。
   ⚠️ 为什么要写 :not(.reveal) 和 .reveal.in 两份：
      .reveal.in{transform:none} 的权重(0,2,0) 高于 .fx-tilt(0,1,0)，
      不把权重提上去，鼠标移开后卡片会被它直接按回 none，
      倾斜回弹动画根本不会发生。 */
.fx-tilt:not(.reveal),
.fx-tilt.reveal.in{
  transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--ty,0px),0);
}
/* 同理：.card:hover 的 translateY 也会盖掉倾斜，必须一并重写 */
.fx-tilt:not(.reveal):hover,
.fx-tilt.reveal.in:hover{
  --ty:-5px;
  transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--ty,0px),0);
}
/* 指针高光：用负 z-index 让它落在卡片自身底色之上、正文之下，不污染文字 */
.fx-spot{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    rgba(var(--brand-rgb),.15),transparent 62%);
  opacity:0;transition:opacity .4s ease;
}
.fx-tilt:hover .fx-spot{opacity:1;}
/* 环形流光描边：用 mask 挖空中心，只留最外 1.5px 的一圈。
   ⚠️ 弧段形态用「彗星」而不是「一段亮弧」：
      早先写成 transparent 0~196deg 的固定亮弧，等于有一半以上的时间
      整条描边是隐形的（--fx-ang 转到暗区就完全看不见），
      hover 时显得时有时无。改成亮头固定在 0deg、向后拖尾渐隐，
      任何角度都至少能看到彗头。 */
@keyframes fxRingSpin{to{--fx-ang:360deg;}}
.card::after,.case-card::after,.price-card::after,.feat-group::after,.video-card::after{
  content:"";position:absolute;inset:0;left:0;top:0;right:0;bottom:0;
  width:auto;height:auto;transform:none;padding:1.6px;border-radius:inherit;
  background:conic-gradient(from var(--fx-ang),
    rgba(var(--brand2-rgb),.95) 0deg,
    rgba(var(--brand-rgb),.55) 36deg,
    rgba(var(--brand-rgb),.16) 86deg,
    transparent 156deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.card:hover::after,.case-card:hover::after,.price-card:hover::after,
.feat-group:hover::after,.video-card:hover::after{
  left:0;opacity:1;animation:fxRingSpin 3.6s linear infinite;
}
/* 痛点卡走红色语义，别用品牌蓝 */
.pain-card::after{
  background:conic-gradient(from var(--fx-ang),
    rgba(var(--danger2-rgb),.90) 0deg,
    rgba(var(--danger-rgb),.50) 36deg,
    rgba(var(--danger-rgb),.14) 86deg,
    transparent 156deg,
    transparent 360deg);
}

/* ---------- 12. 数据条：横向扫描光 + 数字发光 ---------- */
@keyframes fxStatScan{
  0%{transform:translateX(0);opacity:0;}
  14%{opacity:1;}
  72%{opacity:1;}
  100%{transform:translateX(400%);opacity:0;}
}
.stat{position:relative;overflow:hidden;}
.stat::after{
  content:"";position:absolute;top:0;bottom:0;left:-42%;width:42%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(var(--brand-rgb),.12),transparent);
  animation:fxStatScan 6.8s cubic-bezier(.5,0,.5,1) infinite;
}
.stat:nth-child(2)::after{animation-delay:1.15s;}
.stat:nth-child(3)::after{animation-delay:2.3s;}
.stat .v{filter:drop-shadow(0 0 14px rgba(var(--brand-rgb),.28));}

/* ---------- 13. 四步流程：连线生长 + 编号脉冲 ---------- */
.steps .step:not(:last-child)::after{
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.steps .step.in:not(:last-child)::after{transform:scaleX(1);}
.steps .step:nth-child(2)::after{transition-delay:.18s;}
.steps .step:nth-child(3)::after{transition-delay:.36s;}
@keyframes fxStepPulse{
  0%{transform:scale(1);opacity:.75;}
  75%{transform:scale(1.3);opacity:0;}
  100%{transform:scale(1.3);opacity:0;}
}
.steps .step .step-n::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(var(--brand-rgb),.45);
  animation:fxStepPulse 3s cubic-bezier(.2,.6,.3,1) infinite;
}
.steps .step:nth-child(2) .step-n::after{animation-delay:.55s;}
.steps .step:nth-child(3) .step-n::after{animation-delay:1.1s;}
.steps .step:nth-child(4) .step-n::after{animation-delay:1.65s;}

/* ---------- 14. 对比表：行高亮 + 胜出列发光 ---------- */
.compare tbody td{transition:background .25s ease,box-shadow .25s ease;}
.compare tbody tr{transition:background .25s ease;}
.compare tbody tr:hover{background:rgba(var(--brand-rgb),.075);}
/* hover 时必须把 3px 竖条一起带上：
   否则这一条会覆盖 .compare td.win 的 box-shadow，鼠标一过竖条就消失。 */
.compare tbody tr:hover td.win{
  background:rgba(var(--brand-rgb),.145);
  box-shadow:inset 3px 0 0 var(--brand),inset 0 0 30px rgba(var(--brand-rgb),.13);
}

/* ---------- 15. 时间线：圆点脉冲 ---------- */
@keyframes fxDotPulse{
  0%{transform:scale(1);opacity:.8;}
  72%{transform:scale(1.9);opacity:0;}
  100%{transform:scale(1.9);opacity:0;}
}
.tl-item::after{
  content:"";position:absolute;left:-34px;top:6px;width:20px;height:20px;
  border-radius:50%;pointer-events:none;
  border:1px solid rgba(var(--brand-rgb),.5);
  animation:fxDotPulse 2.9s cubic-bezier(.2,.6,.3,1) infinite;
}
.tl-item:nth-child(2)::after{animation-delay:.5s;}
.tl-item:nth-child(3)::after{animation-delay:1s;}
.tl-item:nth-child(4)::after{animation-delay:1.5s;}
.tl-item:nth-child(5)::after{animation-delay:2s;}
.tl-item:nth-child(6)::after{animation-delay:2.5s;}

/* ---------- 16. FAQ：展开态左侧亮条 + 浮起 ---------- */
.faq-item{position:relative;overflow:hidden;}
.faq-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2.5px;
  border-radius:var(--r) 0 0 var(--r);
  background:var(--grad);
  transform:scaleY(0);transform-origin:top center;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.faq-item.open::before{transform:scaleY(1);}
.faq-item.open{
  border-color:rgba(var(--brand-rgb),.45);
  background:rgba(var(--brand-rgb),.028);
  box-shadow:0 10px 28px rgba(var(--brand-rgb),.09);
}

/* ---------- 17. CTA 区：一道侧光缓慢扫过 ---------- */
@keyframes fxBandSweep{
  0%{transform:rotate(16deg) translateX(0);opacity:0;}
  14%{opacity:1;}
  70%{opacity:1;}
  100%{transform:rotate(16deg) translateX(300%);opacity:0;}
}
/* ⚠️ 原实现是「一块 rotate(16deg) 的矩形渐变在横向平移」——
   矩形的上/下边扫过渐变底时，会在画面上留下一条可见的斜切分界线，
   看起来像图层没对齐，而不是「光扫过」。
   修法：渐变两端收到全透明（不再靠元素边界截断），
   再叠一层横向 mask 把两侧羽化掉，最后 1px 模糊兜底。 */
.cta-band::before{
  content:"";position:absolute;top:-60%;left:-45%;width:56%;height:220%;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(var(--brand-rgb),0) 0%,rgba(var(--brand-rgb),.13) 50%,rgba(var(--brand-rgb),0) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 66%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 66%,transparent 100%);
  filter:blur(1.2px);
  animation:fxBandSweep 7.5s cubic-bezier(.45,0,.55,1) infinite;
}

/* ---------- 18. 视频卡：播放键脉冲 + 悬停放大 ---------- */
@keyframes fxPlayPulse{
  0%{transform:scale(1);opacity:.75;}
  80%{transform:scale(1.5);opacity:0;}
  100%{transform:scale(1.5);opacity:0;}
}
.video-thumb .play{
  position:relative;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.video-thumb .play::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1.5px solid rgba(var(--brand2-rgb),.55);
  animation:fxPlayPulse 2.8s cubic-bezier(.2,.6,.3,1) .8s infinite;
}
.video-card:hover .video-thumb .play{transform:scale(1.1);}

/* ---------- 19. 按钮：主按钮焦点光环 / 次按钮扫光 ---------- */
.btn-primary:hover{
  box-shadow:0 14px 34px rgba(var(--brand-rgb),.45),0 0 0 5px rgba(var(--brand-rgb),.13);
}
.btn-ghost{position:relative;overflow:hidden;}
.btn-ghost::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--brand-rgb),.20),transparent);
  transform:skewX(-20deg);
}
.btn-ghost:hover::after{animation:sweep .8s ease-out;}

/* ---------- 20. 降级 ---------- */
/* 触屏：脚本本来就不挂指针类特效，这里再兜一层 ——
   移动端点击会留下「粘住的 :hover」，不关掉的话高光和环形流光会一直挂在卡片上。 */
@media (hover:none){
  .fx-spot{display:none;}
  .card:hover::after,.case-card:hover::after,.price-card:hover::after,
  .feat-group:hover::after,.video-card:hover::after{opacity:0;animation:none;}
}
@media (max-width:900px){
  .fx-net{display:none;}
}
@media (max-width:720px){
  .fx-scan{display:none;}
  .hero-visual::before,.hero-visual::after{opacity:.5;}
  .sec-head::after{margin-top:18px;}
  .stat::after{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .fx-scan,.fx-net,.fx-pointer,.badge::after,.stat::after,
  .cta-band::before,.hero-visual::before,.hero-visual::after,
  .steps .step .step-n::after,.tl-item::after,.video-thumb .play::after{display:none!important;}
  .grid-lines::before,.progress-bar,h1 .hl,.sec-head::after{animation:none!important;}
  .fx-tilt,.fx-tilt:hover{
    transform:none!important;
    transition:none!important;
  }
  .fx-tilt:hover{box-shadow:none;}
}