/* =========================================================
   重庆火点科技 · 主站首页
   分段叙事的长页，不再强求一屏：留白与节奏是"大厂感"的来源。
   配色收敛为 墨 + 白 + 单一朱红，四色只留在标志本身。
   只服务 /，与 home.css（机位图页）、style.css（智能控制页）互不影响
   ========================================================= */

:root{
  /* 工业风：底与面板只靠明度分层，不用描边 */
  --bg:#0B0D11;
  --panel:#12151C;
  --panel-2:#171B23;
  --panel-3:#1D222B;
  --ink:#ffffff;
  --ink-2:rgba(255,255,255,.66);
  --ink-3:rgba(255,255,255,.52);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.05);
  --fire:#F0400F;
  --fire-2:#FF7A3D;
  --on:#34C759;
  --r:12px;
  --r-lg:14px;
  --ease:cubic-bezier(.28,.11,.32,1);
  --maxw:1200px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro SC","SF Pro Text","PingFang SC",
         "HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC",
         system-ui,sans-serif;
  --mark:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --num:"SF Mono",ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  line-height:1.5;letter-spacing:-.01em;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,4vw,40px);
  width:100%;position:relative;z-index:2}

/* ---------- 背景 ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--bg)}
.bg-glow{position:absolute;left:50%;top:-10%;width:min(150vw,1500px);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(240,64,15,.22),rgba(240,64,15,.06) 46%,transparent 72%);
  animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.7;transform:translateX(-50%) scale(.97)}
                   50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
.bg-base{display:none}
.ember{position:fixed;bottom:-4%;width:4px;height:4px;border-radius:50%;
  background:var(--fire-2);opacity:0;box-shadow:0 0 7px 2px rgba(255,122,61,.6);
  animation:rise 11s linear infinite;z-index:0;pointer-events:none}
@keyframes rise{
  0%  {opacity:0;transform:translate(0,0) scale(.5)}
  10% {opacity:.9}
  70% {opacity:.4}
  100%{opacity:0;transform:translate(14vw,-108vh) scale(.2)}
}

/* ---------- 顶栏 ---------- */
.page{position:relative;z-index:1}
.top{position:sticky;top:0;z-index:50;padding:14px 0;
  background:rgba(11,13,17,.78);backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.top.stuck{border-bottom-color:var(--line-2)}
.top-in{display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{width:30px;height:30px}
.brand .wm{display:flex;flex-direction:column;gap:2px;line-height:1}
.brand .wm b{font-family:var(--mark);font-size:13px;font-weight:600;
  letter-spacing:.24em;margin-right:-.24em;white-space:nowrap}
.brand .wm b .sp{display:inline-block;width:.44em}
.brand .wm b .pt{font-style:normal;color:var(--fire)}
.brand .wm em{font-style:normal;font-size:9.5px;color:var(--ink-3);letter-spacing:.02em}
.top-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.top-nav a{font-size:13.5px;color:var(--ink-2);transition:color .2s}
.top-nav a:hover{color:var(--ink)}
.top-nav a.on{color:var(--ink)}
.top-nav a.on::after{content:"";display:block;height:2px;margin-top:5px;
  border-radius:2px;background:var(--fire)}
.top-tel{display:flex;align-items:center;gap:7px;padding:8px 15px;border-radius:980px;
  border:1px solid var(--line);font-size:13px;font-weight:500;transition:.22s var(--ease)}
.top-tel:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24)}
.top-wx{padding:9px 18px;border-radius:980px;background:var(--fire);color:#0E0F12;
  font-size:13px;font-weight:600;transition:background .22s var(--ease)}
.top-wx:hover{background:#ff5a26}

/* ---------- 通用段落骨架 ---------- */
.sec{padding:clamp(38px,5vh,66px) 0}
/* 段落之间一道发丝线：整页同色时需要分节，工业风用细线而不是换底色 */
.sec + .sec{border-top:1px solid var(--line-2)}
.sec-head{max-width:720px;margin-bottom:clamp(20px,2.8vh,32px)}
.sec-tag{display:inline-flex;align-items:baseline;gap:10px;font-size:11.5px;
  font-weight:500;color:var(--ink-3);margin-bottom:14px;letter-spacing:.08em}
.sec-n{font-style:normal;font-family:var(--num);font-size:11px;font-weight:600;
  color:var(--fire);letter-spacing:.06em}
.sec-n::after{content:"";display:inline-block;width:18px;height:1px;
  margin:0 0 3px 9px;background:var(--line);vertical-align:middle}
.sec-tag.dot::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--fire);box-shadow:0 0 0 3px rgba(240,64,15,.16);align-self:center}
.sec-h{margin:0;font-size:clamp(24px,3vw,38px);font-weight:600;
  letter-spacing:-.045em;line-height:1.22}
.sec-p{margin:13px 0 0;max-width:56ch;font-size:13px;line-height:1.78;color:var(--ink-2)}

/* ---------- 首屏 ---------- */
.hero{padding:clamp(34px,5vh,64px) 0 clamp(26px,3.4vh,42px)}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  align-items:center;gap:clamp(26px,3.4vw,48px)}
/* 第二屏用 h2：一页只应有一个 h1，视觉与 h1 保持一致 */
.hero h1,.hero .hero-h{margin:0;font-size:clamp(26px,3.3vw,42px);font-weight:600;
  letter-spacing:-.045em;line-height:1.18}
.hero h1 .hl,.hero .hero-h .hl{color:var(--fire)}
.hero-p{margin:clamp(12px,1.6vh,18px) 0 0;max-width:31em;
  font-size:13.5px;line-height:1.72;color:var(--ink-2)}
.hero-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(16px,2.2vh,24px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:40px;padding:0 20px;border-radius:8px;font-size:13.5px;font-weight:500;
  transition:.22s var(--ease);white-space:nowrap}
.btn-1{background:var(--fire);color:#0E0F12;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.btn-1:hover{background:#ff5a26}
.btn-2{border:1px solid var(--line);color:var(--ink)}
.btn-2:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.26)}
.btn svg{width:13px;height:13px}

/* 首屏主视觉：真实交付作品，装进一体式显示器外框 */
.hero-vis{position:relative}
.mon{position:relative;display:flex;flex-direction:column;align-items:center}
/* 机身：细边框 + 圆角，顶边一道高光模拟铝合金 */
.mon-screen{position:relative;width:100%;padding:11px;border-radius:16px;
  background:linear-gradient(180deg,#2a2d34,#15171c 42%,#0e1014);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 2px 8px rgba(0,0,0,.5),
    0 34px 70px -22px rgba(0,0,0,.8)}
/* 屏幕玻璃：内圈暗边 + 一道斜向反光 */
.mon-screen::after{content:"";position:absolute;inset:11px;border-radius:12px;
  pointer-events:none;z-index:3;
  background:linear-gradient(122deg,rgba(255,255,255,.07) 0%,transparent 34%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.shot-s{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  background:#000}
.dash{position:absolute;inset:0;background:#0B0D11;line-height:0}
.dash svg{width:100%;height:100%;display:block}
.shot-s figure{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;
  transition:opacity .8s var(--ease),visibility 0s .8s}
.shot-s figure.on{opacity:1;visibility:visible;transition:opacity .8s var(--ease)}
.shot-s img{width:100%;height:100%;object-fit:cover}
.shot-cap{position:absolute;left:12px;bottom:11px;z-index:4;
  padding:5px 12px;border-radius:980px;
  font-size:12px;font-weight:500;color:#fff;background:rgba(8,9,12,.66);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
/* 支架：细颈 + 扁底座 */
.mon-neck{width:clamp(64px,9%,86px);height:clamp(20px,2.6vh,30px);
  background:linear-gradient(90deg,#191b20,#43474f 22%,#5b606a 50%,#43474f 78%,#191b20);
  clip-path:polygon(16% 0,84% 0,100% 100%,0 100%)}
.mon-foot{width:clamp(150px,34%,236px);height:9px;border-radius:0 0 9px 9px;
  background:linear-gradient(90deg,#15171b,#4a4e57 20%,#666b75 50%,#4a4e57 80%,#15171b);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.85)}
.mon-cap{margin:16px 0 0;font-size:12px;color:var(--ink-3);letter-spacing:.02em}

/* 首屏事实条 */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(22px,3vh,34px);background:var(--bg);
  border-radius:var(--r-lg);overflow:hidden}
.fact{padding:clamp(14px,1.6vw,18px);background:var(--panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.fact b{display:block;font-size:clamp(16px,1.6vw,20px);font-weight:600;letter-spacing:-.02em}
/* 用直接子元素：.fact span 会连 <b> 里嵌套的 .num 一起命中，
   把数字变成块级小灰字 */
.fact > span{display:block;margin-top:7px;font-size:12px;color:var(--ink-3);line-height:1.55}

/* ---------- 业务矩阵 ---------- */
/* 三张卡合成一整块，中间用 1px 底色缝隙分栏：
   读起来是一套系统，而不是三个孤立的盒子 */
.biz{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.bz{position:relative;display:flex;flex-direction:column;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  padding:clamp(20px,2.1vw,26px);border-radius:0;
  background:var(--panel);
  transition:background .28s var(--ease)}
.bz::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--fire);opacity:0;transition:opacity .28s var(--ease)}
.bz:hover{background:var(--panel-2)}
.bz:hover::before{opacity:1}
.bz-top{display:flex;align-items:center;gap:13px}
.bz-i{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  background:var(--panel-3);color:var(--fire-2);flex-shrink:0}
.bz-i svg{width:20px;height:20px}
.bz h3{margin:0;font-size:clamp(15px,1.25vw,17px);font-weight:600;letter-spacing:-.02em}
.bz h3 .tag{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:5px;
  font-style:normal;font-size:10px;font-weight:600;letter-spacing:.02em;
  color:var(--fire-2);background:rgba(240,64,15,.16);vertical-align:2px}
.bz p{margin:11px 0 0;font-size:12.5px;line-height:1.68;color:var(--ink-2)}
.bz-k{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.bz-k li{padding:5px 10px;border-radius:6px;font-size:11.5px;
  color:rgba(255,255,255,.6);background:var(--panel-3)}
.bz-go{margin-top:auto;padding-top:clamp(13px,1.7vh,18px);
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--fire-2)}
.bz-go svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.bz:hover .bz-go svg{transform:translateX(4px)}

/* ---------- 案例网格：一大五小，避免九张等大堆成一面壁纸 ---------- */
.works{display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(0,1fr);gap:clamp(12px,1.5vw,18px)}
.wk{position:relative;border-radius:var(--r);overflow:hidden;background:var(--panel);
  aspect-ratio:16/9;transition:transform .3s var(--ease);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
/* 头图占两列两行，作为视觉锚点 */
.wk:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.wk::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:var(--r);
  box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .28s var(--ease)}
.wk:hover::after{box-shadow:inset 0 0 0 2px rgba(240,64,15,.75)}
/* 六张图色温差异很大，平铺在一起会吵。
   默认压住饱和与亮度并盖一层压暗层，悬停时复原 —— 网格安静，作品在被看时才亮起来 */
.wk img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.62) brightness(.78) contrast(1.04);
  transition:transform .6s var(--ease),filter .45s var(--ease)}
.wk:hover img{transform:scale(1.045);filter:none}
.wk::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,13,17,.34),rgba(11,13,17,.10) 42%,rgba(11,13,17,.72));
  transition:opacity .45s var(--ease)}
.wk:hover::before{opacity:.45}
/* 店名做成信息条：图本身很满，纯文字压上去读不清 */
.wk figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:rgba(11,13,17,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.wk figcaption b{font-size:13px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk figcaption i{margin-left:auto;flex-shrink:0;padding:3px 8px;border-radius:5px;
  font-style:normal;font-size:10.5px;color:rgba(255,255,255,.62);background:rgba(255,255,255,.09);
  transition:color .3s var(--ease),background .3s var(--ease)}
.wk:hover figcaption i{color:var(--fire-2);background:rgba(240,64,15,.18)}
.wk:first-child figcaption{padding:12px 15px}
.wk:first-child figcaption b{font-size:15px}
.more{display:flex;justify-content:center;margin-top:clamp(16px,2.2vh,24px)}

@media (max-width:860px){
  .works{grid-template-columns:repeat(2,1fr)}
  .wk:first-child{grid-column:span 2;grid-row:span 1;aspect-ratio:16/9}
}
@media (max-width:560px){
  .works{grid-template-columns:1fr}
  .wk:first-child{grid-column:span 1}
}

/* ---------- 自研软件：图文交错 ---------- */
.dev{display:grid;gap:clamp(18px,2.4vh,30px)}
.dev-row{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;gap:clamp(22px,3vw,46px)}
.dev-row:nth-child(even) .dev-vis{order:-1}
.dev-vis{border-radius:var(--r-lg);overflow:hidden;background:var(--panel);
  padding:clamp(16px,2vw,24px);box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.dev-vis svg{width:100%;height:auto;display:block}
.dev h3{margin:0;font-size:clamp(17px,1.6vw,21px);font-weight:600;letter-spacing:-.03em}
.dev h3 .tag{display:inline-block;margin-left:9px;padding:2px 8px;border-radius:6px;
  font-style:normal;font-size:10.5px;font-weight:600;
  color:var(--fire-2);background:rgba(240,64,15,.16);vertical-align:3px}
.dev p{margin:10px 0 0;font-size:13px;line-height:1.72;color:var(--ink-2)}
.dev-k{margin:13px 0 0;padding:0;list-style:none}
.dev-k li{position:relative;padding-left:16px;font-size:12.5px;line-height:1.65;color:var(--ink-2)}
.dev-k li+li{margin-top:6px}
.dev-k li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--fire);opacity:.85}
.dev-go{display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-size:13.5px;font-weight:500;color:var(--fire-2)}
.dev-go svg{width:12px;height:12px}

/* ---------- 联系 ---------- */
.cta{position:relative;padding:clamp(30px,4.2vh,52px) clamp(20px,3vw,48px);
  border-radius:var(--r-lg);background:var(--panel);text-align:center;overflow:hidden}
.cta::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--fire)}
.cta h2{margin:0;font-size:clamp(20px,2.4vw,29px);font-weight:600;letter-spacing:-.035em}
.cta p{margin:11px 0 0;font-size:13.5px;color:var(--ink-2)}
.cta-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}

/* ---------- 底栏 ---------- */
.foot{padding:clamp(18px,2.4vh,28px) 0;border-top:1px solid var(--line-2)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  font-size:12.5px;color:var(--ink-3)}
.foot-in .sep{margin-left:auto}
.foot-in a{color:var(--ink-3);transition:color .2s}
.foot-in a:hover{color:var(--ink-2)}
.foot-in b{font-weight:500;color:var(--ink-2)}

/* ---------- 入场：滚动到视口再浮现 ---------- */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr;gap:34px}
  .biz{grid-template-columns:1fr}
  .works{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
  .dev-row{grid-template-columns:1fr;gap:26px}
  .dev-row:nth-child(even) .dev-vis{order:0}
  .top-nav a:not(.top-tel):not(.top-wx){display:none}
}
@media (max-width:600px){
  .works{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .brand .wm em{display:none}
  .top-tel{display:none}
  .hero-acts .btn,.cta-acts .btn{flex:1}
}

/* 用户明确要求：开启「减少动画」时动效仍要照常运行 */
@media (prefers-reduced-motion:reduce){
  .bg-glow{animation:breathe 9s ease-in-out infinite!important}
  .ember{animation:rise 11s linear infinite!important}
}

/* ---------- 开场序列 ---------- */
.intro{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
  background:#000;overflow:hidden}
.intro.done{opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility 0s .55s}
html.intro-on,html.intro-on body{overflow:hidden}
.intro-stage{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,2.4vh,26px)}
.intro-svg{width:min(74vw,340px);height:auto;overflow:visible;position:relative;z-index:2}
.i-scratch{stroke-dasharray:100;stroke-dashoffset:100;opacity:0;
  animation:iScratch .34s .35s var(--ease) forwards}
@keyframes iScratch{0%{stroke-dashoffset:100;opacity:0}15%{opacity:.9}
                    100%{stroke-dashoffset:0;opacity:0}}
.i-match{opacity:0;animation:iMatch 1.05s .3s var(--ease) forwards}
@keyframes iMatch{
  0%{opacity:0;transform:translate(-14px,10px) rotate(-6deg)}
  14%{opacity:1}
  40%{transform:translate(34px,-16px) rotate(-16deg)}
  70%{opacity:1;transform:translate(48px,-24px) rotate(-20deg)}
  100%{opacity:0;transform:translate(62px,-34px) rotate(-24deg)}}
.i-head{animation:iHead .5s .62s var(--ease) forwards}
@keyframes iHead{0%{fill:#8a6a4a;r:3.2}50%{fill:#FFC061;r:4.4}100%{fill:#FFC061;r:3.6}}
.i-spark{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:iSpark .75s .6s var(--ease) forwards}
@keyframes iSpark{0%{opacity:0;scale:.2}22%{opacity:1;scale:1.25}
                  60%{opacity:.7;scale:.9;translate:6px -10px}
                  100%{opacity:0;scale:.5;translate:14px -22px}}
.i-torch{opacity:0;animation:iFade .4s 1.0s var(--ease) forwards}
@keyframes iFade{to{opacity:1}}
.i-ribbons path{stroke-dasharray:100;stroke-dashoffset:100;
  animation-name:iBurn;animation-duration:.72s;
  animation-timing-function:var(--ease);animation-fill-mode:forwards}
.i-ribbons .i-r1{animation-delay:1.18s}
.i-ribbons .i-r2{animation-delay:1.32s}
.i-ribbons .i-r3{animation-delay:1.46s}
@keyframes iBurn{to{stroke-dashoffset:0}}
.intro-glow{position:absolute;left:50%;top:38%;width:min(96vw,580px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;z-index:1;
  background:radial-gradient(closest-side,rgba(240,64,15,.42),rgba(240,64,15,.10) 40%,transparent 70%);
  animation:iGlow 1.5s 1.15s var(--ease) forwards}
@keyframes iGlow{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
                 40%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
                 100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}}
.intro-wm{margin:0;position:relative;z-index:2;display:flex;
  font-family:var(--mark);font-weight:600;color:#fff;
  font-size:clamp(15px,2.4vw,22px);letter-spacing:.3em;margin-right:-.3em}
.intro-wm .il{display:inline-block;opacity:0;transform:translateY(14px);
  animation-name:iLetter;animation-duration:.5s;
  animation-timing-function:var(--ease);animation-fill-mode:forwards;
  animation-delay:calc(1.95s + var(--i) * .055s)}
.intro-wm .il.sp{width:.5em}
.intro-wm .il.pt{color:var(--fire)}
@keyframes iLetter{to{opacity:1;transform:none}}
.intro-skip{position:absolute;right:22px;bottom:20px;z-index:3;
  padding:7px 15px;border-radius:980px;border:1px solid rgba(255,255,255,.2);
  font-size:12px;color:rgba(255,255,255,.55);opacity:0;
  animation:iFade .4s 1.2s var(--ease) forwards;transition:color .2s,border-color .2s}
.intro-skip:hover{color:#fff;border-color:rgba(255,255,255,.5)}

/* ---------- 微信二维码浮层 ---------- */
.qr-mask{position:fixed;inset:0;z-index:9996;display:grid;place-items:center;padding:20px;
  background:rgba(8,9,12,.86);
  backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
  opacity:0;transition:opacity .26s var(--ease)}
.qr-mask[hidden]{display:none}
.qr-mask.on{opacity:1}
.qr-panel{position:relative;width:min(340px,100%);padding:26px 24px 22px;text-align:center;
  border-radius:var(--r-lg);background:var(--panel);
  box-shadow:0 30px 70px -18px rgba(0,0,0,.7);
  transform:translateY(12px) scale(.97);transition:transform .28s var(--ease)}
.qr-mask.on .qr-panel{transform:none}
.qr-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;color:var(--ink-2);
  background:rgba(255,255,255,.08);transition:.2s}
.qr-x:hover{background:rgba(255,255,255,.18);color:var(--ink)}
.qr-t{margin:0 0 16px;font-size:14px;font-weight:600}
.qr-img{margin:0;border-radius:16px;overflow:hidden;background:#fff;padding:10px;line-height:0}
.qr-img img{width:100%;height:auto}
.qr-id{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:14px;padding:11px 14px;border-radius:12px;
  background:rgba(255,255,255,.07);font-size:13.5px;color:var(--ink-2);transition:.2s}
.qr-id:hover{background:rgba(255,255,255,.13)}
.qr-id b{color:var(--ink);font-weight:600;letter-spacing:.02em}
.qr-id em{font-style:normal;font-size:11.5px;color:var(--fire-2)}
.qr-tip{margin:12px 0 0;font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.qr-tip a{color:var(--fire-2)}

/* ---------- 访问统计弹窗 ---------- */
.st-mask{position:fixed;inset:0;z-index:9995;display:none;place-items:center;padding:20px;
  background:rgba(8,9,12,.86);
  backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px)}
.st-mask.on{display:grid}
.st-panel{width:min(760px,100%);max-height:86vh;overflow:auto;padding:24px 26px 26px;
  border-radius:var(--r-lg);background:var(--panel);
  box-shadow:0 30px 70px -18px rgba(0,0,0,.7)}
.st-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.st-head b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.st-x{margin-left:auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;color:var(--ink-2);background:rgba(255,255,255,.08);transition:.2s}
.st-x:hover{background:rgba(255,255,255,.16);color:var(--ink)}
.st-login{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.st-tip{width:100%;margin:0 0 2px;font-size:13.5px;color:var(--ink-2)}
.st-login input{flex:1;min-width:180px;height:46px;padding:0 15px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);font:inherit;font-size:14px;
  color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.st-login input::placeholder{color:var(--ink-3)}
.st-login input:focus{border-color:var(--fire);box-shadow:0 0 0 3px rgba(240,64,15,.22)}
.st-err{width:100%;margin:2px 0 0;font-size:12.5px;color:#ff6b5a}
.st-body{font-size:14px;color:var(--ink-2)}
.btn-sm{height:46px;padding:0 22px;font-size:14px}


/* ---------- 工业风补充：状态点 / 数字读数 ---------- */
.dot-on{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--on);
  box-shadow:0 0 0 3px rgba(52,199,89,.16);vertical-align:1px;margin-right:7px}
/* 不能叫 .num：main.js 的计数器会抓 .num 并用 data-to 覆写内容 */
.mono{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* 面板之间用 1px 底色缝隙分层，不用描边 */
.facts{gap:1px}
@media (max-width:960px){ .biz{grid-template-columns:1fr} }


/* ---------- 右侧常驻联系栏 ---------- */
.rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:300;width:186px}
.rail-card{position:relative;padding:10px;border-radius:var(--r-lg);background:var(--panel);
  box-shadow:0 2px 8px rgba(0,0,0,.5),0 24px 56px -18px rgba(0,0,0,.8);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.rail-head{position:relative;display:flex;align-items:center;gap:0;height:30px;
  margin:-10px -10px 9px;padding:0 32px 0 12px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:var(--panel-2)}
.rail-head b{font-size:12px;font-weight:600;letter-spacing:.02em}
.rail-x{position:absolute;top:50%;right:7px;transform:translateY(-50%);
  width:19px;height:19px;border-radius:5px;display:grid;place-items:center;
  font-size:9px;line-height:1;color:var(--ink-3);background:var(--panel-3);transition:.2s}
.rail-x:hover{background:#2a303b;color:var(--ink)}
.rail-qr{margin:0;border-radius:8px;background:#fff;line-height:0;overflow:hidden}
.rail-qr img{width:100%;height:auto;padding:6px;background:#fff}
.rail-cap{margin:8px 0 9px;text-align:center;font-size:10.5px;color:var(--ink-3)}
.rail-row{width:100%;display:flex;align-items:center;gap:7px;padding:8px 9px;
  border-radius:7px;background:var(--panel-3);color:var(--ink);text-align:left;
  transition:background .2s var(--ease)}
.rail-row+.rail-row{margin-top:5px}
.rail-row:hover{background:#252b36}
.rail-row svg{width:14px;height:14px;flex-shrink:0;color:var(--ink-3)}
.rail-row b{font-size:11.5px;font-weight:600;white-space:nowrap}
.rail-row em{margin-left:auto;font-style:normal;font-size:10px;color:var(--fire-2)}
.rail-tip{margin:8px 0 1px;text-align:center;font-size:10px;color:var(--ink-3)}
/* 收起态：只留侧边把手 */
.rail-tab{position:absolute;right:0;top:50%;transform:translateY(-50%) translateX(18px);
  display:none;flex-direction:column;align-items:center;gap:6px;padding:12px 7px;
  border-radius:8px 0 0 8px;background:var(--panel);color:var(--ink);
  font-size:11px;font-weight:600;letter-spacing:.08em;
  box-shadow:0 2px 10px rgba(0,0,0,.5)}
.rail-tab:hover{background:var(--panel-2)}
.rail-tab svg{width:16px;height:16px;color:var(--fire-2)}
.rail-tab span{writing-mode:vertical-rl}
.rail.min{width:auto}
.rail.min .rail-card{opacity:0;transform:translateX(20px) scale(.97);pointer-events:none}
.rail.min .rail-tab{display:flex;transform:translateY(-50%)}
@media (max-width:1280px),(max-height:680px){
  .rail{right:0;width:auto}
  .rail .rail-card{opacity:0;transform:translateX(20px) scale(.97);pointer-events:none}
  .rail .rail-tab{display:flex;transform:translateY(-50%)}
  .rail.open{right:12px;width:186px}
  .rail.open .rail-card{opacity:1;transform:none;pointer-events:auto}
  .rail.open .rail-tab{display:none}
}
@media (max-width:600px){ .rail{display:none} }


/* 首屏轮播圆点：压在屏幕右下角 */
.shot-dots{position:absolute;right:22px;bottom:22px;z-index:5;display:flex;gap:5px}
.shot-dots button{width:6px;height:6px;padding:0;border:0;border-radius:980px;
  background:rgba(255,255,255,.3);cursor:pointer;
  transition:width .3s var(--ease),background .3s var(--ease)}
.shot-dots button.on{width:18px;background:var(--fire)}


/* ---------- 首屏：两项业务分屏轮播 ---------- */
.hero-tabs{display:flex;gap:4px;margin-bottom:clamp(16px,2.2vh,26px)}
.ht{padding:9px 16px;border-radius:8px;background:var(--panel);
  font-size:13px;font-weight:500;color:var(--ink-3);
  transition:background .25s var(--ease),color .25s var(--ease)}
.ht:hover{background:var(--panel-2);color:var(--ink-2)}
.ht.on{background:var(--panel-3);color:var(--ink)}
.ht.on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--fire);margin-right:7px;vertical-align:1px}
.hero-slides{position:relative}
.hs{display:none}
.hs.on{display:block;animation:hsIn .5s var(--ease)}
@keyframes hsIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .hs.on{animation:hsIn .5s var(--ease)!important}
}
@media (max-width:600px){
  .hero-tabs{gap:3px}
  .ht{flex:1;padding:9px 8px;font-size:12px;text-align:center}
  .ht.on::before{display:none}
}


/* ---------- 精修补充 ---------- */
/* 焦点可见：键盘操作时也看得出选中了哪个 */
a:focus-visible,button:focus-visible{outline:2px solid var(--fire-2);outline-offset:3px;border-radius:6px}
/* 选中文字用品牌色 */
::selection{background:rgba(240,64,15,.32);color:#fff}
/* 滚动条随深色底 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#20252F;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#2B313D}
/* 段落标题的状态点做微呼吸，整页唯一的常驻动效 */
.sec-tag::before{animation:tagPulse 3.2s ease-in-out infinite}
@keyframes tagPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(240,64,15,.16)}
  50%    {box-shadow:0 0 0 5px rgba(240,64,15,.08)}
}
@media (prefers-reduced-motion:reduce){
  .sec-tag::before{animation:tagPulse 3.2s ease-in-out infinite!important}
}


/* ---------- 胶片颗粒：纯色深底容易显得廉价，加一层极淡噪点 ---------- */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  background-size:140px 140px}

/* ---------- 悬停细节 ---------- */
.bz:hover .bz-i{background:rgba(240,64,15,.16)}
.bz-i{transition:background .28s var(--ease)}
.wk figcaption{transition:padding .3s var(--ease)}
.wk:hover figcaption{padding-bottom:12px}
.btn{position:relative;overflow:hidden}
.btn-2{transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease)}

/* ---------- 首屏 tab 精修 ---------- */
.hero-tabs{border-bottom:1px solid var(--line-2);padding-bottom:0;gap:0}
.ht{border-radius:0;background:transparent;padding:11px 18px;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.ht:hover{background:transparent;color:var(--ink-2)}
.ht.on{background:transparent;color:var(--ink);border-bottom-color:var(--fire)}
.ht.on::before{display:none}


/* ---------- 动态机位图案例：点击播放 ---------- */
.wk-v{cursor:pointer}
.wk-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;opacity:0;transition:opacity .35s var(--ease)}
.wk-v.playing video{opacity:1}
.wk-v.playing img{opacity:0}
.wk-v img{transition:transform .6s var(--ease),filter .45s var(--ease),opacity .35s var(--ease)}
.wk-v.playing::before{opacity:.2}
.wk-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  color:#0E0F12;background:var(--fire);
  box-shadow:0 6px 24px rgba(240,64,15,.45),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .28s var(--ease),opacity .28s var(--ease),background .2s}
.wk-play svg{width:22px;height:22px;margin-left:2px}
.wk-play:hover{background:#ff5a26;transform:translate(-50%,-50%) scale(1.06)}
.wk-v.playing .wk-play{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8)}
.wk-v:hover .wk-play{transform:translate(-50%,-50%) scale(1.06)}
.wk-v.playing:hover .wk-play{opacity:1;pointer-events:auto;
  transform:translate(-50%,-50%) scale(1)}


/* ---------- 访问统计面板内容 ----------
   main.js 注入的 13 个类在这两张表里都没定义过，
   导致数字与标签黏在一起、走势图只剩两个日期 */
.st-body{display:grid;gap:18px}
/* 四张数字卡 */
.st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line-2);border-radius:10px;overflow:hidden}
.st-card{padding:13px 14px;background:var(--panel-3, #1D222B)}
.st-card i{display:block;font-style:normal;font-size:11.5px;
  color:var(--ink-3);margin-bottom:6px}
.st-card b{font-family:var(--num);font-size:22px;font-weight:600;letter-spacing:-.02em}
.st-card span{margin-left:5px;font-size:11px;color:var(--ink-3)}
/* 分节 */
.st-sec h4{margin:0 0 10px;font-size:12.5px;font-weight:600;color:var(--ink-2);
  letter-spacing:.02em}
/* 每日 PV 柱状图 */
.st-bars{display:flex;align-items:flex-end;gap:3px;height:76px;
  padding:8px 10px;border-radius:10px;background:var(--panel-3, #1D222B)}
/* main.js 生成的是 <span> 并内联 height，不要写成 i / --h */
.st-bars span{flex:1;min-width:0;border-radius:3px 3px 0 0;background:var(--fire);
  opacity:.8;transition:opacity .2s}
.st-bars span:hover{opacity:1}
.st-axis{display:flex;justify-content:space-between;margin:7px 0 0;
  font-size:10.5px;color:var(--ink-3)}
/* 国内 / 海外 */
.st-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-bottom:12px;
  background:var(--line-2);border-radius:10px;overflow:hidden}
.st-split > div{padding:11px 13px;background:var(--panel-3, #1D222B)}
.st-split i{font-style:normal;font-size:11.5px;color:var(--ink-3);margin-right:7px}
.st-split b{font-family:var(--num);font-size:18px;font-weight:600}
.st-split span{margin-left:4px;font-size:11px;color:var(--ink-3)}
.st-split .o b{color:var(--fire-2)}
/* 地区条形 */
.st-geo{display:grid;gap:5px}
.st-g{position:relative;display:flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:7px;background:var(--panel-3, #1D222B);
  overflow:hidden;font-size:12px}
.st-g::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);
  background:rgba(255,255,255,.07)}
.st-g.o::before{background:rgba(240,64,15,.16)}
.st-g > *{position:relative;z-index:1}
.st-g em{font-style:normal;flex:1;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.st-g u{text-decoration:none;font-family:var(--num);font-weight:600}
.st-g s{text-decoration:none;width:44px;text-align:right;
  font-size:11px;color:var(--ink-3)}
.st-g.o em{color:var(--fire-2)}
/* 城市标签 */
.st-chips{display:flex;flex-wrap:wrap;gap:6px}
.st-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border-radius:6px;background:var(--panel-3, #1D222B);font-size:11.5px;color:var(--ink-2)}
.st-chip b{font-family:var(--num);font-weight:600;color:var(--ink)}
/* 通用列表：设备 / 页面 / 来源 */
.st-list{display:grid;gap:1px;background:var(--line-2);border-radius:10px;overflow:hidden}
.st-row{display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:var(--panel-3, #1D222B);font-size:12px}
.st-row em{font-style:normal;flex:1;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.st-row u{text-decoration:none;font-family:var(--num);font-weight:600;flex-shrink:0}
/* 脚注 */
.st-meta{margin:0;font-size:11px;line-height:1.75;color:var(--ink-3)}

@media (max-width:560px){
  .st-grid{grid-template-columns:repeat(2,1fr)}
  .st-split{grid-template-columns:1fr}
}