/* ===== 深蓝起源 · 全站高级动效 v1 ===== */
:root{--fx-pa:var(--pa,#2997ff);--fx-pa2:var(--pa2,#a855f7)}
html{scroll-behavior:smooth}
::selection{background:rgba(41,151,255,.28)}

/* —— 滚动进度条 —— */
.fx-progress{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:120;background:linear-gradient(90deg,var(--fx-pa),var(--fx-pa2));border-radius:0 99px 99px 0;pointer-events:none}

/* —— 导航栏滚动态 —— */
.navbar{transition:box-shadow .4s ease}
.navbar.fx-scrolled{box-shadow:0 12px 36px rgba(0,0,0,.35)}

/* —— 英雄区序列入场（页面加载即播） —— */
@keyframes fxUp{from{opacity:0;transform:translateY(26px);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
.subhero .eyebrow,.hero-dark .tag{animation:fxUp .8s cubic-bezier(.2,.7,.2,1) both}
.subhero h1,.hero-dark h1{animation:fxUp .95s cubic-bezier(.2,.7,.2,1) .1s both}
.subhero .lead,.hero-dark .sub{animation:fxUp .95s cubic-bezier(.2,.7,.2,1) .2s both}
.subhero .acts,.hero-dark .hero-acts{animation:fxUp .95s cubic-bezier(.2,.7,.2,1) .3s both}
.subhero .note,.subhero .ver,.hero-dark .hstrip{animation:fxUp .95s cubic-bezier(.2,.7,.2,1) .42s both}

/* —— 英雄区悬浮光斑 —— */
.subhero,.hero-dark{isolation:isolate}
.subhero>.wrap,.hero-dark>.wrap{position:relative;z-index:1}
.fx-orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-orbs i{position:absolute;width:46vw;height:46vw;max-width:580px;max-height:580px;border-radius:50%;background:radial-gradient(circle,var(--fx-pa) 0%,transparent 62%);opacity:.17;filter:blur(72px);animation:fxDrift 17s ease-in-out infinite alternate}
.fx-orbs i:nth-child(1){left:22%;top:-26%}
.fx-orbs i:nth-child(2){left:58%;top:-14%;background:radial-gradient(circle,var(--fx-pa2) 0%,transparent 62%);opacity:.13;animation-duration:23s;animation-delay:-7s}
.fx-orbs i:nth-child(3){left:-14%;top:22%;opacity:.1;animation-duration:27s;animation-delay:-13s}
@keyframes fxDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(7vw,6vh,0) scale(1.16)}}
@media(max-width:880px){.fx-orbs i{width:74vw;height:74vw;opacity:.12}}

/* —— 渐变文字流光 —— */
@keyframes fxFlow{to{background-position:220% 50%}}
.statement .g{background-size:220% 100%;animation:fxFlow 4.5s ease-in-out infinite alternate}
.stat b{background-size:220% 100%;animation:fxFlow 6s ease-in-out infinite alternate}
.hero-dark h1 .g{background:linear-gradient(100deg,#2997ff,#7dc4ff,#a855f7,#2997ff);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxFlow 6.5s linear infinite}

/* —— 设备轻浮动 —— */
@keyframes fxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* 首页手机由 JS 随笔记本一起组装（初始隐藏，避免加载闪现） */
@media (min-width:701px) and (prefers-reduced-motion:no-preference){.hero-dark .dphone{opacity:0;will-change:transform,opacity}}
.herostage .phone{animation:fxBob 8.5s ease-in-out infinite}

/* —— 按钮质感 —— */
.pill{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .3s,filter .25s,background .25s,border-color .25s}
.pill:hover{transform:translateY(-2px)}
.pill:active{transform:translateY(0) scale(.97)}
.pill-b{position:relative;overflow:hidden}
.pill-b::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);transition:left .65s ease}
.pill-b:hover::after{left:130%}
.pill-b:hover{box-shadow:0 12px 30px rgba(0,0,0,.22)}

/* —— 卡片微交互 —— */
.bento .b .bi{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bento .b:hover .bi{transform:scale(1.16) rotate(-5deg)}
.stat,.step,.wcard{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.stat:hover,.step:hover,.wcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.qa{transition:background .3s,padding .3s;border-radius:14px}
.qa:hover{background:rgba(120,130,160,.06);padding-left:14px;padding-right:14px}
.sc-li .ci{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.sc-li:hover .ci{transform:scale(1.14) rotate(-6deg)}
.pf .pfi{display:inline-block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.pf:hover .pfi{transform:scale(1.2)}

/* —— 展示图轻缩放 —— */
.gstage img,.stage2 img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.gstage:hover img,.stage2:hover img{transform:scale(1.02)}

/* —— 3D 倾斜容器 —— */
.gstage,.stage2{will-change:transform}

/* —— 内层列表级联（motion.js 赋予 .rv） —— */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* —— 引言署名 —— */
.statement .by{display:block;margin-top:20px;font-size:15.5px;color:#86868b;font-weight:400;letter-spacing:0}

/* —— 图标磁贴（emoji → SVG，由 motion.js 注入） —— */
.fxi{display:inline-flex!important;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--fx-pa),var(--fx-pa2));position:relative;overflow:hidden;flex:none;box-shadow:0 8px 18px rgba(0,0,0,.16);font-size:0!important}
.fxi::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0) 58%)}
.fxi svg{position:relative;z-index:1;display:block}
.bi.fxi{width:54px;height:54px;border-radius:16px}
.bi.fxi svg{width:26px;height:26px}
.b.span6 .bi.fxi{width:62px;height:62px;border-radius:18px}
.b.span6 .bi.fxi svg{width:30px;height:30px}
.b.dark .bi.fxi{box-shadow:0 10px 26px rgba(0,0,0,.45)}
.ci.fxi svg{width:16px;height:16px}
.pfi.fxi{width:36px;height:36px;border-radius:11px}
.pfi.fxi svg{width:19px;height:19px}
.ei.fxi{background:linear-gradient(135deg,var(--fx-pa),var(--fx-pa2))!important;color:#fff!important;box-shadow:0 5px 12px rgba(0,0,0,.2)}
.ei.fxi svg{width:14px;height:14px}
.peyebrow .ei.fxi svg{width:17px;height:17px}
.wi.fxi{width:48px;height:48px;border-radius:14px;margin-bottom:14px}
.wi.fxi svg{width:24px;height:24px}
.wcard:hover .wi.fxi{transform:scale(1.1) rotate(-4deg)}
.wi.fxi{transition:transform .45s cubic-bezier(.2,.7,.2,1)}

/* ===== v6 · 排版与图标质感精修 ===== */
body{text-rendering:optimizeLegibility}

/* 英雄大标题：柔和白渐变（Apple 式） */
.subhero h1,.hero-dark h1{background:linear-gradient(180deg,#fff 58%,rgba(255,255,255,.62));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-dark h1 .g{-webkit-text-fill-color:transparent}

/* 标题字距微收 */
.section-t,.sc-text h2,.prow h2,.subhero h1,.hero-dark h1{letter-spacing:-.028em}

/* 眉题：渐变短线 + 字距 */
.sc-eyebrow{letter-spacing:.07em;font-size:13px}
.sc-eyebrow::before{content:"";display:inline-block;width:24px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--fx-pa),var(--fx-pa2))}

/* 数字用等宽数字 */
.stat b,.hstrip .hs b,.mbar b,.mstep b{font-variant-numeric:tabular-nums}

/* —— 图标层级 v2 —— */
/* 列表小图标：浅底品牌色（轻），只有大图标保留渐变磁贴（重） */
.ci.fxi,.pfi.fxi{background:var(--bg2,#f5f5f7);background:color-mix(in srgb,var(--fx-pa) 11%,#fff);color:var(--fx-pa);box-shadow:none}
.ci.fxi::after,.pfi.fxi::after{display:none}
/* 深色大卡里的图标：玻璃白 */
.b.dark .bi.fxi{background:rgba(255,255,255,.14);box-shadow:none}
.b.dark .bi.fxi::after{background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 60%)}
/* 磁贴阴影带品牌色、更收敛 */
.bi.fxi,.mi.fxi,.wi.fxi{box-shadow:0 6px 16px color-mix(in srgb,var(--fx-pa) 24%,transparent)}
.bi.fxi{border-radius:15px}

/* 按钮内高光 */
.pill-b{box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.pill-b:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 30px rgba(0,0,0,.22)}

/* 卡片边框更轻 */
.bento .b,.stat,.step,.wcard,.mcard{border-color:rgba(0,0,0,.045)}

/* FAQ：品牌色 Q 标记 */
.qa h4{display:flex;align-items:center;gap:10px}
.qa h4::before{content:"Q";flex:none;width:23px;height:23px;border-radius:8px;background:color-mix(in srgb,var(--fx-pa) 11%,#fff);color:var(--fx-pa);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.qa p{padding-left:33px}

/* 移动端复习时间轴降噪 */
@media(max-width:480px){.mstep small{display:none}}

/* ===== v9 · 首页笔记本随滚动开合盖子（精修：缓动 + 亮屏 + 反光） ===== */
.hero-dark .devices{perspective:2200px}
.hero-dark .laptop{will-change:transform}
.hero-dark .laptop .lscreen{position:relative;transform-origin:center bottom;will-change:transform;backface-visibility:hidden}
/* 屏幕随掀开由暗变亮 */
.hero-dark .laptop .lscreen .shot img{filter:brightness(calc(.32 + var(--open,0)*.68)) saturate(calc(.7 + var(--open,0)*.3));transition:filter .12s linear}
/* 玻璃反光：掀开越大越明显，斜向高光扫过屏幕 */
.hero-dark .laptop .lscreen .lsheen{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:11px 11px 0 0;background:linear-gradient(118deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.03) 52%,rgba(255,255,255,0) 62%);opacity:calc(var(--open,0)*.9);mix-blend-mode:screen}
/* 合盖时屏幕外缘一圈冷光，像刚点亮 */
.hero-dark .laptop .lscreen::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:11px 11px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,calc(var(--open,0)*.35));}

/* ===== v8 · 产品模块进场编排（多样动作：旋转/翻转/滑入/弹跳/3D 摆入） ===== */
@media (prefers-reduced-motion: no-preference){
  @keyframes mBgDrift{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.09)}}
  .pbg::before{animation:mBgDrift 26s ease-in-out infinite alternate;transform-origin:50% 30%}
  .pbg .prow{perspective:1600px}
  /* —— 动作词库 —— */
  @keyframes mAppear{from{opacity:0}to{opacity:1}}
  @keyframes mRise{from{opacity:0;transform:translateY(40px) scale(.96);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
  @keyframes mFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  @keyframes mSlideL{from{opacity:0;transform:translateX(-54px) rotate(-4deg)}to{opacity:1;transform:none}}
  @keyframes mSlideR{from{opacity:0;transform:translateX(54px) rotate(4deg)}to{opacity:1;transform:none}}
  @keyframes mPopL{from{opacity:0;transform:scale(.3) rotate(-14deg)}to{opacity:1;transform:none}}
  @keyframes mPopR{from{opacity:0;transform:scale(.3) rotate(14deg)}to{opacity:1;transform:none}}
  @keyframes mBtn{from{opacity:0;transform:translateY(14px) scale(.85)}to{opacity:1;transform:none}}
  @keyframes mSpin{from{opacity:0;transform:rotate(-210deg) scale(.2)}to{opacity:1;transform:none}}
  @keyframes mFlip{from{opacity:0;transform:rotateX(-88deg)}to{opacity:1;transform:none}}
  @keyframes mDeviceR{from{opacity:0;transform:rotateY(-28deg) translate(78px,26px) scale(.85);filter:blur(9px)}to{opacity:1;transform:none;filter:blur(0)}}
  @keyframes mDeviceL{from{opacity:0;transform:rotateY(28deg) translate(-78px,26px) scale(.85);filter:blur(9px)}to{opacity:1;transform:none;filter:blur(0)}}
  /* 初始隐藏，等模块激活 */
  .pbg .peyebrow,.pbg .prow h2,.pbg .plead,.pbg .pchip,.pbg .pf,.pbg .pacts,.pbg .pvis,
  .pbg .peyebrow .pnum,.pbg .peyebrow .ei{opacity:0}
  .pbg .pvis{transform-origin:center}
  /* 眉题：容器淡入，内含徽章旋转、图标翻转 */
  .pbg.mod-in .peyebrow{animation:mAppear .5s ease-out .05s both}
  .pbg.mod-in .peyebrow .pnum{animation:mSpin .75s cubic-bezier(.32,1.5,.5,1) .12s both}
  .pbg.mod-in .peyebrow .ei{animation:mFlip .6s cubic-bezier(.3,.9,.3,1.3) .22s both;transform-origin:center}
  /* 标题：模糊聚焦上升 */
  .pbg.mod-in .prow h2{animation:mRise .95s cubic-bezier(.2,.7,.2,1) .16s both}
  /* 描述：上浮 */
  .pbg.mod-in .plead{animation:mFadeUp .8s cubic-bezier(.2,.75,.2,1) .3s both}
  /* 标签：交替方向旋转弹跳 */
  .pbg.mod-in .pchip{animation:mPopL .6s cubic-bezier(.34,1.45,.5,1) both}
  .pbg.mod-in .pchip:nth-child(2n){animation-name:mPopR}
  .pbg.mod-in .pchip:nth-child(1){animation-delay:.36s}
  .pbg.mod-in .pchip:nth-child(2){animation-delay:.43s}
  .pbg.mod-in .pchip:nth-child(3){animation-delay:.5s}
  /* 功能项：左列从左、右列从右滑入带倾斜 */
  .pbg.mod-in .pf{animation:mSlideL .72s cubic-bezier(.2,.78,.25,1) both}
  .pbg.mod-in .pf:nth-child(2n){animation-name:mSlideR}
  .pbg.mod-in .pf:nth-child(1){animation-delay:.46s}
  .pbg.mod-in .pf:nth-child(2){animation-delay:.54s}
  .pbg.mod-in .pf:nth-child(3){animation-delay:.62s}
  .pbg.mod-in .pf:nth-child(4){animation-delay:.7s}
  /* 按钮：缩放弹出 */
  .pbg.mod-in .pacts{animation:mBtn .7s cubic-bezier(.34,1.4,.5,1) .78s both}
  /* 设备截图：大角度 3D 摆入（左置模块反向） */
  .pbg.mod-in .pvis{animation:mDeviceR 1.05s cubic-bezier(.2,.72,.2,1) .14s both}
  .pbg--kt.mod-in .pvis,.pbg--tools.mod-in .pvis{animation-name:mDeviceL}
}

/* —— 弱动效偏好 —— */
@media(prefers-reduced-motion:reduce){
  .fx-orbs,.fx-progress{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
}