/* ══════════ 分页 + 炫酷升级 ══════════ */

/* ── 分页滚动 ── */
html{scroll-snap-type:y mandatory;scroll-behavior:smooth}
body{scroll-snap-type:y mandatory}
.page{min-height:100vh;scroll-snap-align:start;position:relative;
  display:flex;flex-direction:column;justify-content:center;
  padding:96px 0 72px;box-sizing:border-box}
.page.hero{justify-content:center;padding:110px 0 90px}
.page .wrap{position:relative;z-index:2;width:100%}

/* ── 大号序号 ── */
.pnum{position:absolute;right:3vw;top:6vh;z-index:1;pointer-events:none;
  font:900 clamp(90px,13vw,200px)/1 "PingFang SC",system-ui,sans-serif;
  letter-spacing:-.06em;
  background:linear-gradient(180deg,rgba(150,200,255,.16),rgba(150,200,255,.02));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  user-select:none}

/* ── 顶部进度条 ── */
.progress{position:fixed;top:0;left:0;right:0;height:2.5px;z-index:200;
  background:rgba(255,255,255,.05)}
.progress i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,#22d3ee,#4ade80,#a78bfa);
  box-shadow:0 0 12px rgba(74,222,128,.6);transition:width .25s}

/* ── 右侧导航点 ── */
.pnav{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:150;
  display:flex;flex-direction:column;gap:14px}
.pnav a{width:10px;height:10px;border-radius:50%;background:rgba(150,180,220,.28);
  display:block;transition:.28s;position:relative}
.pnav a:hover{background:rgba(150,180,220,.6);transform:scale(1.3)}
.pnav a.on{background:linear-gradient(135deg,#22d3ee,#4ade80);
  box-shadow:0 0 14px rgba(74,222,128,.75);transform:scale(1.45)}
.pnav a:after{content:attr(title);position:absolute;right:22px;top:50%;
  transform:translateY(-50%);white-space:nowrap;font-size:12px;color:#9ecbff;
  opacity:0;pointer-events:none;transition:.2s;
  background:rgba(10,14,22,.9);padding:3px 9px;border-radius:6px;
  border:1px solid rgba(120,170,255,.2)}
.pnav a:hover:after{opacity:1}

/* ── 每页不同极光（翻页有层次 ✓）── */
#power:before,#demo:before,#feature:before,#target:before,#start:before,#contact:before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
#power:before{background:radial-gradient(760px 480px at 82% 8%,rgba(34,211,238,.13),transparent 68%)}
#demo:before{background:radial-gradient(820px 520px at 18% 12%,rgba(124,58,237,.17),transparent 68%)}
#feature:before{background:radial-gradient(800px 500px at 78% 82%,rgba(251,191,36,.10),transparent 68%)}
#target:before{background:radial-gradient(820px 520px at 22% 78%,rgba(244,114,182,.12),transparent 68%)}
#start:before{background:radial-gradient(800px 500px at 80% 18%,rgba(74,222,128,.11),transparent 68%)}
#contact:before{background:radial-gradient(700px 440px at 50% 50%,rgba(124,58,237,.16),transparent 70%)}

/* ── 卡片：hover 描边流光 ── */
.fcard,.tcard,.st,.kpi,.dirs,.term,.demo-box{position:relative}
.fcard:after,.tcard:after,.st:after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .3s;
  background:linear-gradient(135deg,rgba(34,211,238,.5),rgba(74,222,128,.4) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.fcard:hover:after,.tcard:hover:after,.st:hover:after{opacity:1}

/* ── 分页内元素错峰入场 ── */
html.js .page .wrap{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.9,.2,1),transform .8s cubic-bezier(.2,.9,.2,1)}
html.js .page.in .wrap{opacity:1;transform:none}

/* 序号淡入 */
html.js .pnum{opacity:0;transition:opacity 1s .2s}
html.js .page.in .pnum{opacity:1}

/* ── 手机端关掉强制分页（太高会裁 ✓）── */
@media(max-width:820px){
  html,body{scroll-snap-type:none}
  .page{min-height:auto;padding:64px 0 48px;justify-content:flex-start}
  .page.hero{min-height:92vh}
  .pnum{font-size:78px;right:14px;top:10px;opacity:.6}
  .pnav{display:none}
}