/* ============================================================
   直播助手网 · 功能展示与动效（showcase）
   与全站苹果简洁风保持一致：白底 + 淡灰 + 蓝色点缀
   ============================================================ */

/* ---------- 滚动淡入 ---------- */
/* 只做位移与轻微透明过渡：内容始终可见，避免动画未触发时“空白” */
.reveal{transform:translateY(26px);opacity:.999;transition:transform .7s cubic-bezier(.22,.61,.36,1),opacity .7s}
.reveal.in{transform:none;opacity:1}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.40s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- 功能卡片网格 ---------- */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:38px}
.fitem{position:relative;background:#fff;border-radius:20px;padding:26px 24px 24px;
  box-shadow:0 8px 28px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.05);
  transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s}
.fitem:hover{transform:translateY(-7px);box-shadow:0 20px 50px rgba(0,113,227,.18)}
.fitem::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(0,113,227,.10),transparent 60%);
  opacity:0;transition:opacity .3s}
.fitem:hover::after{opacity:1}
.fitem .fico{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0071e3,#5e5ce6);margin-bottom:15px;
  box-shadow:0 8px 20px rgba(0,113,227,.28);transition:transform .32s}
.fitem:hover .fico{transform:scale(1.08) rotate(-4deg)}
.fitem .fico svg{width:27px;height:27px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fitem h4{font-size:17px;font-weight:600;margin-bottom:7px;letter-spacing:-.2px}
.fitem p{font-size:14px;color:#6e6e73;line-height:1.65}
.fitem .tag{display:inline-block;margin-top:10px;font-size:12px;color:#0071e3;background:rgba(0,113,227,.08);
  padding:3px 10px;border-radius:999px}

/* ---------- 界面示意图（浏览器窗口） ---------- */
.shot{margin:40px auto 0;max-width:880px}
.shot-frame{border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.20);
  border:1px solid rgba(0,0,0,.09);background:#0b1020}
.shot-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:#1b2136}
.shot-bar i{width:11px;height:11px;border-radius:50%;display:inline-block}
.shot-bar .r{background:#ff5f57}.shot-bar .y{background:#febc2e}.shot-bar .g{background:#28c840}
.shot-bar span{margin-left:12px;font-size:12px;color:#8b93a7;letter-spacing:.3px}
.shot-frame svg{display:block;width:100%;height:auto;min-height:200px;background:#0b1020}
.shot-frame{position:relative}
.shot-cap{text-align:center;font-size:13px;color:#86868b;margin-top:14px}

/* ---------- 报警流程演示（自动播放） ---------- */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:38px;text-align:center}
.flow .step{background:#fff;border-radius:18px;padding:22px 16px;box-shadow:0 8px 26px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.05);position:relative;overflow:hidden}
.flow .step .n{width:34px;height:34px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#fff;background:linear-gradient(135deg,#0071e3,#5e5ce6)}
.flow .step h5{font-size:15px;font-weight:600;margin-bottom:5px}
.flow .step p{font-size:13px;color:#86868b}
.flow .step::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,#0071e3,#5e5ce6);animation:flowbar 4s linear infinite}
@keyframes flowbar{0%{width:0}25%{width:100%}75%{width:100%}100%{width:0}}
.flow .step:nth-child(2)::before{animation-delay:1s}
.flow .step:nth-child(3)::before{animation-delay:2s}
.flow .step:nth-child(4)::before{animation-delay:3s}

/* ---------- 数据看板样式的小面板 ---------- */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:34px}
.stat-box{background:linear-gradient(180deg,#fff,#fafafa);border-radius:18px;padding:22px 16px;text-align:center;
  box-shadow:0 8px 26px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.05)}
.stat-box .num{font-size:32px;font-weight:700;letter-spacing:-1px;
  background:linear-gradient(90deg,#0071e3,#5e5ce6);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-box .lb{font-size:13px;color:#86868b;margin-top:4px}

/* ---------- 呼吸光晕 / 脉冲圆点 ---------- */
.pulse-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#28c840;margin-right:7px;
  box-shadow:0 0 0 0 rgba(40,200,64,.7);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(40,200,64,.7)}70%{box-shadow:0 0 0 12px rgba(40,200,64,0)}100%{box-shadow:0 0 0 0 rgba(40,200,64,0)}}

/* ---------- 标题下方渐变光带 ---------- */
.glowbar{height:3px;width:120px;margin:14px auto 0;border-radius:999px;
  background:linear-gradient(90deg,#0071e3,#5e5ce6,#ff375f);background-size:200% 100%;animation:glide 3s linear infinite}
@keyframes glide{0%{background-position:0% 0}100%{background-position:200% 0}}

/* ---------- 滚动提示箭头 ---------- */
.scrollhint{text-align:center;margin-top:26px;color:#86868b;font-size:13px}
.scrollhint .arw{display:block;font-size:18px;animation:updown 1.6s ease-in-out infinite}
@keyframes updown{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}

@media(max-width:720px){
  .fgrid{grid-template-columns:1fr;gap:14px}
  .fitem{padding:22px 18px}
  .flow{grid-template-columns:1fr 1fr;gap:12px}
  .stats-row{grid-template-columns:1fr 1fr;gap:12px}
  .stat-box .num{font-size:26px}
}